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
좋네요!
짧게 사용해보고 피드백 몇가지 남겨봅니다
- 맥에서는 ctrl이 아닌 cmd 를 주로 사용하기 때문에, 맥에서 커맨드가 ctrl/cmd 둘다 허용하거나, cmd 만 허용해도 될 것 같습니다 (ex. 파일 저장 -> ctrl/cmd+s) - 확인해보니 몇몇 커맨드는 cmd로만 동작합니다 (ex. 실행취소 - cmd-z만 동작)
- 커맨드 입력시 한글도 동일하게 허용하면 편리할 것 같습니다 (ex. ctrl/cmd+s 의 경우 ctrl/cmd+ㄴ 도 동일하게 받기)
- vim command mode 에서 엔터를 누르면 제 생각엔 커서만 이동해야 할 것 같은데 newline이 들어갑니다
말씀해주신 피드백 한번 반영해봤습니다. 혹시나 안되는게 있으면 말씀해주시면 해결해보겠습니다. 한글 커맨드 지원과 엔터시 뉴라인은 같은 문제더군요..