수익형 웹사이트 만들기11 [Findaline] 기록을 찾는 기능 Findaline의 두 번째 릴리즈입니다. 이번 업데이트는 사용자가 자신이 기록한 콘텐츠를 보다 쉽고 빠르게 찾아볼 수 있게 하는 데 중점을 두었습니다. 이를 위해 주요한 두 가지 개선이 이루어졌습니다. - 텍스트 검색 기능 향상: 검색창에서 제공하던 텍스트 기반 검색이 더욱 향상되었습니다. - 사진 관리 시스템 도입: 사진 파일을 쉽게 검색하고 관리할 수 있는 새로운 방법을 제공합니다. 1. 텍스트 검색 기능 텍스트 검색 기능이 향상되어 이제는 메모의 제목뿐만 아니라 본문 내용 전체를 대상으로 검색할 수 있습니다. 검색 결과에서는 사용자가 입력한 검색어와 일치하는 제목이나 본문 내용이 하이라이트 처리되어 한눈에 들어옵니다. 이로써, 필요한 정보를 찾기 위해 메모를 하나하나 열어보는 수고를 덜 수 있게 .. 2024. 3. 26. [Findaline] 소개 Findaline Findaline은 포트폴리오용으로 만든 메모 웹 애플리케이션입니다. PARA 메모법을 기반으로 하여, 사용자가 메모를 기록하고 정리할 수 있도록 디자인되었습니다. 또한, 기록된 메모를 효과적으로 활용할 수 있는 다양한 방안들을 고려하며 개발되었습니다. 2024.01.29 - PARA PARA 뜬구름 잡는 일들이 많아지니 생각 정리가 어렵고 시간이 없다. 잘 알려진 메모법들과 일정 관리법들에 대해 알아봤고, PARA를 적용하기로 했다. https://www.youtube.com/watch?v=lkRQuMIbFYc PARA 시간 관리 codingbroker.tistory.com 개요 메모 애플리케이션은 크게 두 종류로 나눠 볼 수 있습니다. Notion, Evernote, Obsidian.. 2024. 3. 21. [Rectify] 에디터 Beta v0.4 - 메뉴바, 반응형 Beta v0.3 업데이트 내용 1. 메뉴바 추가 옵시디언 같은 메뉴바가 없는 깔끔한 에디터를 만들 예정이었지만 사용성이 좋지 않은 것 같아서 결국 메뉴바를 추가했다. 옵시디언에서는 마크다운 에디팅이 지원되기 때문에 메뉴바가 없어도 에디팅이 수월한데, WYSIWYG 에디터에서는 아무래도 키보드만으로는 모든 기능을 수행하기가 어렵다. 위치가 고정된 메뉴바 대신 노션처럼 마우스 커서에 따라 움직이는 버블 메뉴바를 추가했다. 기존에 콘텍스트 메뉴에 몰아두었던 기능들을 메뉴바에 분배하니 사용성이 조금 나아진 듯하다. 이미지, 차트 추가 등 커스텀 요소와 관련 있는 기능들은 콘텍스트 메뉴에 그대로 남겨두었고, 스타일 기능(볼드체, 기울임, 색상 등)들을 메뉴바로 옮겼다. 2. 반응형 기존에 막아두었던 작은 화면의.. 2024. 2. 10. [Rectify] 에디터 Beta v0.3 - 콜라보레이션, 웹소켓 서버 배포 Beta v0.3 업데이트 내용 1. Collaboration 협업 에디팅 구현. tiptap extensions와 @hocuspocus/server 모듈을 사용했다. 이 모듈과 함께 y.js, prosemirror를 사용하면 CRDT(Conflict-free Replicated Data Type)의 설정이 굉장히 간편해진다. 2. 서버 배포 heroku의 eco dyno 티어를 사용했다. 가격은 컴퓨팅 시간당 $0.005, 최대 월 $5이다. 30분 동안 작업이 없으면 서버를 자동으로 재운다. 2024. 2. 8. [Rectify] 에디터 Beta v0.2 - 차트, 클립보드 데이터 Beta v0.2 업데이트 내용 1. 차트 노드 추가 recharts 패키지의 bar, line 차트 사용 2. clipboard data 연동 에디터 내에서 생성된 콘텐츠가 아닌 외부의 콘텐츠가 클립보드를 통해 삽입되는 경우가 있다. 단순 문자열인 경우에는 paragraph를 생성해서 내용을 채워주면 되지만, 일반적으로 브라우저에서 클립보드에 데이터를 담을 때(복사)에는 HTMLElement로 담기는 경우가 많다. 이 경우 에디터 내에는 이미 이미지(img), 링크(a), 비디오(video)를 랜더링 하는 커스텀 노드가 존재하기 때문에 클립보드에 있는 img, a, video 태그를 그대로 삽입해 버리면 에디터와 매칭되지 않는 html 요소들이 삽입되어 버린다. 그래서 clipboard에 있는 데이터가.. 2024. 2. 7. [Rectify] 에디터 Beta v0.1 - 컨텍스트 메뉴, shortcutkey, 커스텀 노드 Beta v0.1 에디터만 베타 테스트 배포하기. editor, graph view, calendar는 각각 패키지 출시를 꿈꾸며 독립적인 모듈로 제작할 예정이다. 1. top menu bar 노션과 옵시디언에는 티스토리 에디터와는 다르게 상단에 메뉴바가 없다. 내 수준에서는 어떤 이유인지 잘 모르겠지만 세계적인 UI/UX 전문가들의 화면이니 나도 따라 하기로 했다. 메뉴바 없이 버튼들을 어떻게 배치해야 되나 고민이 많았다. 찾기 좋은 곳에 몰아넣으면 그 많은 버튼 안에서 특정 버튼을 또 찾아야 한다는 불편함이 있었고, 적절히 공간을 나누자니 필요에 의한 분류가 아닌 디자인을 위한 분류가 되는 듯한 느낌이 들었다. 명확한 방향성은 아직 정하지 못했지만 우선 볼드체나 밑줄, 링크 등 기본적인 기능들은 콘텍.. 2024. 2. 2. [Rectify] 기획 두 번째 프로젝트 Rectify는 PARA를 위한 일정관리 애플리케이션이다. 수익형 웹사이트는 아니고, 포트폴리오용에 가깝다. PARA는 어느 애플리케이션에서도 쓰기 좋지만 PARA만을 위한 애플리케이션은 없어서 기획해 보았다. 기술 스택 react, tailwindcss, firebase 기능 1. WYSIWYG 에디터 prosemirror를 활용한 rich text editor 2. 프로젝트 관리 file system 느낌이 나는 인터페이스로 구현. notion의 좌측 사이드바를 벤치마킹할 예정이다. 3. Graph view P, A, R, A의 관계를 한눈에 파악할 수 있는 화면. obsidian의 graph view를 벤치마킹할 예정이다. 4. Calendar Project에 해당하는 메모들의 일.. 2024. 1. 29. [연봉툴즈] 배포 2주일 경과 https://www.yeonbongtools.com/ 연봉툴즈 2024 2024 가장 정확한 연봉 실수령액 계산기. 실수령액 계산기와 연봉별 테이블, 연봉 인상률 계산기 등 급여와 관련된 다양한 툴을 제공합니다. www.yeonbongtools.com 오랜만에 유입수를 확인해 보니 반의 반으로 줄었다. 내가 게을러지니까 어떻게 알고 유입수도 똑같이 줄어든다. 2차 작업 내용을 신나게 적어두었는데, 1주일 동안 손이 가질 않았다. 위기 상황인 것 같다. 일단 중요한 건 기록이니 포스팅은 남기자. 좋은 소식 첫 번째 첫 번째 좋은 소식은 구글 서치콘솔에서 트래픽이 잡히기 시작했다는 것이다. 6일 전 소식이다. 주요 키워드도 예상대로 잘 잡히고 있다. 아직 클릭수는 0이지만! 좋은 소식 두 번째 Light .. 2024. 1. 26. [연봉툴즈] 배포 1주일 경과 배포 후 1주일이 지났다. 위 이미지는 vercel에서 제공하는 무료 티어 애널리틱스 화면이다. 총 41의 유입이 발생했고, 페이지뷰는 381이다. 유입은 동일한 사용자 기준 1일 1회로 계산된다고 한다. 여기서 웹 크롤러와 나의 유입을 제외하면 35 유입에 350 페이지뷰 정도가 된다. 당연하게도 모든 유입은 이 블로그를 통해서 발생했는데, 생각보다 많아서 놀랐다. 아직 검색 유입은 한 개도 없다. 고무적인 건 유입당 페이지뷰가 무려 10회에 육박? 한다는 점이다. 개발에 관심이 있는 독자분들이 구경을 하다가 가신 걸까? 잘 모르겠지만 감사하고 신나는 수치다. 각 검색엔진 사이트 등록은 배포 3일 후에 요청했다. 금일(24년 1월 18일) 확인해 보니 구글, 빙, 네이버, 줌은 등록이 완료되었고 다음은.. 2024. 1. 18. [연봉툴즈] 배포 배포 https://www.yeonbongtools.com/ 연봉툴즈 2024 연봉 실수령액 테이블 연봉 별 실수령 금액을 표로 확인해보세요. www.yeonbongtools.com 1차 배포를 완료했다. 풍문이지만 도메인 서버 등록 6개월 미만의 신생 웹사이트는 검색 노출에 매우 불리하다고 한다. 그래서 추가 작업은 틈틈이 업데이트하기로 하고, 일단 웹사이트를 배포했다. 작업 내용은 기획 AI의 기획서를 그대로 따랐다. 여기서는 기술 스택, 기능, 차별화, 개선할 사항을 정리한다. 1. 기술 스택 Frontend & Backend Nextjs Style Tailwindcss(+daisyUI) Hosting Vercel 2. 기능 주요 기능은 3가지이다. 실수령액 계산기 연봉 인상률 계산기 실수령액 테이.. 2024. 1. 10. [연봉툴즈] 기획 연봉 계산기 인터넷 건물주 되기 프로젝트. 첫 번째 지을 인터넷 건물은 연봉 계산기이다. 정확히 표현하면 월 실수령액 계산기. 유튜브 영상을 보다가 아이디어를 얻었다. 주요 기능은 사용자가 계약 연봉을 입력하면 세금을 공제한 월 실수령액을 계산해 주는 것이다. 입력할 필드는 5개 정도 되고, 출력은 각종 세금과 월 수령액이다. 주요 기능이 완료되면 연봉과 관련된 다양한 기능을 추가할 예정이다. 주제 선정 과정 구현이 매우 간단하고, 수요가 많다. 네이버 키워드 도구에서 관련 검색어의 월 검색량을 모두 합치면 40만 정도 된다. 특이한 점은 클릭률(특히 pc)이 매우 낮다는 점인데, 이건 검색 결과의 최상단에서 네이버가 자체적으로 연봉 계산기를 제공해 주기 때문인 듯하다. 잡코리아와 사람인에서도 계산기를 .. 2024. 1. 5. 이전 1 다음
