Show GN: 무설치/무서버로 동작하는 브라우저 네이티브 메모장 (Vim 모드 지원)
(yupkidangju.github.io)무거운 Electron 기반 IDE를 켜기는 부담스럽고, 클라우드 기반 노트 앱은 보안이 우려되어 직접 개발한 순수 로컬 웹 에디터 WebMemo Pro를 소개합니다.
React나 Webpack 같은 빌드 도구 없이 순수 Vanilla HTML/JS/CSS만으로 브라우저의 한계를 테스트해 본 개인 프로젝트입니다.
[주요 기술적 특징]
네이티브 파일 저장 (File System Access API): 브라우저에서 Ctrl+S를 누르면 "다른 이름으로 저장" 창 없이 로컬 디스크의 원본 파일을 직접 덮어씁니다.
완벽한 Vim 모드 지원: CodeMirror 6 기반의 Vim 에뮬레이터를 탑재했습니다. 흥미로운 점은, Vim의 :w 명령어가 실제 로컬 파일 시스템 저장과 연동되며, :wq를 입력하면 저장 후 브라우저 탭이 닫히도록 구현했다는 것입니다.
로컬 타임머신 (IndexedDB): 5MB 용량 제한이 있는 localStorage 대신 IndexedDB를 활용해 GB 단위의 오프라인 저장이 가능합니다. 또한, 각 탭별로 최근 10개의 리비전 스냅샷을 백그라운드에서 자동 보관하여 데이터 유실을 방지합니다.
Zero-Dependency & 오프라인 구동: 백엔드 서버가 아예 존재하지 않습니다. GitHub 레포지토리를 다운로드 받아 index.html만 더블클릭해도 완벽한 오프라인 상태에서 모든 기능이 동작합니다.
그 외에도 드래그 앤 드롭 파일 오픈, 마크다운 실시간 렌더링(Floating TOC 포함), 미니맵 등 개발자 친화적인 UX를 구현했습니다.
가벼운 텍스트 편집이나 마크다운 작성이 필요할 때 유용하게 쓰일 수 있을 것 같습니다. 피드백이나 코드 리뷰는 언제나 환영합니다!
데모: https://yupkidangju.github.io/webmemo/
소스코드(GitHub): https://github.com/Yupkidangju/webmemo