# Show GN: 무설치/무서버로 동작하는 브라우저 네이티브 메모장 (Vim 모드 지원)

> Clean Markdown view of GeekNews topic #26867. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26867](https://news.hada.io/topic?id=26867)
- GeekNews Markdown: [https://news.hada.io/topic/26867.md](https://news.hada.io/topic/26867.md)
- Type: show
- Author: [yupkidangju](https://news.hada.io/@yupkidangju)
- Published: 2026-02-21T16:34:22+09:00
- Updated: 2026-02-21T16:34:22+09:00
- Original source: [yupkidangju.github.io](https://yupkidangju.github.io/webmemo/)
- Points: 30
- Comments: 20

## Summary

브라우저만으로 동작하는 **로컬 전용 메모장 WebMemo Pro**는 서버나 빌드 도구 없이 HTML·JS·CSS만으로 구현된 순수 클라이언트 프로젝트입니다. File System Access API를 이용해 Ctrl+S나 Vim의 `:w` 명령으로 실제 파일을 저장하고, IndexedDB 기반의 로컬 타임머신 기능으로 리비전을 자동 보관합니다. GitHub 레포를 내려받아 index.html만 실행하면 완전한 오프라인 환경에서 Vim 모드와 마크다운 미리보기까지 사용할 수 있습니다.

## Topic Body

무거운 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

## Comments



### Comment 51545

- Author: jtpark03
- Created: 2026-02-21T20:58:26+09:00
- Points: 2

멋지네요

### Comment 51550

- Author: yupkidangju
- Created: 2026-02-21T21:35:34+09:00
- Points: 1
- Parent comment: 51545
- Depth: 1

감사합니다!

### Comment 51729

- Author: freedomzero
- Created: 2026-02-24T00:28:28+09:00
- Points: 1

클로즈드 소스이긴 한데, 100% 오프라인 스크래치보드를 만들고 있습니다 : https://zetopad.site/

### Comment 51735

- Author: yupkidangju
- Created: 2026-02-24T01:29:09+09:00
- Points: 1
- Parent comment: 51729
- Depth: 1

정말 멋지군요. 디자인이 굉장히 좋네요. 기대되는 프로젝트입니다!

### Comment 51619

- Author: shakespeares
- Created: 2026-02-23T10:20:10+09:00
- Points: 1

멋집니다~

### Comment 51638

- Author: yupkidangju
- Created: 2026-02-23T11:44:27+09:00
- Points: 1
- Parent comment: 51619
- Depth: 1

감사합니다!

### Comment 51610

- Author: boxqkrtm
- Created: 2026-02-23T09:56:43+09:00
- Points: 1

좋네요  
모바일에서 헤더부분 세로 스크롤도 막으면 좋을거같아요

### Comment 51637

- Author: yupkidangju
- Created: 2026-02-23T11:44:22+09:00
- Points: 1
- Parent comment: 51610
- Depth: 1

코드 추가해서 제가 테스트해봤더니 문제는 없는것 같은데 혹시나 문제 있으면 피드백주심 반영하겠습니다.

### Comment 51608

- Author: nobae
- Created: 2026-02-23T09:51:34+09:00
- Points: 1

좋아요

### Comment 51636

- Author: yupkidangju
- Created: 2026-02-23T11:44:06+09:00
- Points: 1
- Parent comment: 51608
- Depth: 1

감사합니다!

### Comment 51603

- Author: t7vonn
- Created: 2026-02-23T09:37:42+09:00
- Points: 1

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

### Comment 51633

- Author: yupkidangju
- Created: 2026-02-23T11:43:35+09:00
- Points: 1
- Parent comment: 51603
- Depth: 1

말씀해주신 피드백 한번 반영해봤습니다. 혹시나 안되는게 있으면 말씀해주시면 해결해보겠습니다. 한글 커맨드 지원과 엔터시 뉴라인은 같은 문제더군요..

### Comment 51601

- Author: heycalmdown
- Created: 2026-02-23T09:16:27+09:00
- Points: 1

https://github.com/Yupkidangju/AIHack  
https://github.com/Yupkidangju/SheetPicker  
  
다른 프로젝트도 멋지네요

### Comment 51634

- Author: yupkidangju
- Created: 2026-02-23T11:43:53+09:00
- Points: 1
- Parent comment: 51601
- Depth: 1

감사합니다! 저건 아직 다들 개발중인겁니다. 완전히 만들어봐야죠!

### Comment 51600

- Author: zinisuni
- Created: 2026-02-23T08:54:27+09:00
- Points: 1

오.. 완전 좋네요~~

### Comment 51635

- Author: yupkidangju
- Created: 2026-02-23T11:43:58+09:00
- Points: 1
- Parent comment: 51600
- Depth: 1

감사합니다!

### Comment 51584

- Author: chl11wq12
- Created: 2026-02-22T21:55:28+09:00
- Points: 1

우와웅!

### Comment 51589

- Author: yupkidangju
- Created: 2026-02-23T00:46:57+09:00
- Points: 1
- Parent comment: 51584
- Depth: 1

감사합니다!

### Comment 51558

- Author: aqwer31560
- Created: 2026-02-22T04:56:16+09:00
- Points: 1

짱이다

### Comment 51588

- Author: yupkidangju
- Created: 2026-02-23T00:46:51+09:00
- Points: 1
- Parent comment: 51558
- Depth: 1

감사합니다. 조금 더 업데이트해서 머메이드 맵이나 도표도 랜더링되게 해놨습니다!