메모함
내 기기에 저장되는 개인용 메모 앱입니다. 클립보드(자주 쓰는 글을 바로 복사)와 세컨드브레인(PARA + 제텔카스텐으로 지식 쌓기) 역할을 같이 합니다. 메인 화면은 호기심의 방(cabinet of curiosities)입니다. 주워 온 키워드에 이름표를 달아 진열장의 자기 자리에 올려 두고, 가끔 산책하며 다시 봅니다.
- 서버도, 회원가입도 없습니다. 옵시디언처럼 메모는 지금 쓰는 기기 안에만 저장됩니다.
- 인터넷이 없어도 열립니다. 폰·PC 홈 화면에 앱처럼 설치할 수 있습니다.
- 마크다운(.md)으로 내보낼 수 있어서 언제든 옵시디언으로 옮길 수 있습니다.
쓰는 법: 칸 하나로 적고, 찾고, 복사
화면에는 호기심의 방(글자 지도)과 오른쪽 아래 메뉴 버튼 하나뿐입니다. 적기·찾기·목록·태그·설정은 모두 버튼 안에 있습니다.
| 하고 싶은 것 | 동작 |
|---|
| 적기 | 칸에 적고 저장 (PC는 Enter). 어디에 둘지는 안 정해도 됨 → 받은함(미분류 상자) |
| 복사해 둔 것 담기 | 클립보드에서 저장 한 번 |
| 웹·앱에서 담기 | 공유 → 메모함 (편집 화면 없이 바로 저장) |
| 찾기 | 같은 칸에 짧게 적으면 아래 목록이 바로 걸러짐. #태그 +프로젝트 -빼기 초성 ㅁㅅ |
| 자주 쓰는 글 복사 | 고정한 메모는 목록 맨 위 줄에 — 누르면 바로 복사 |
| 내용 보기 | 카드를 누르면 그 자리에서 펼쳐짐 (화면 이동 없음) |
| 고치기 | 펼친 카드의 편집 → 다 쓰면 ‘완료’ 또는 뒤로 가기 |
키워드 저장소처럼 쓰기
한 줄에 키워드: 짧은 설명 으로 적으면 됩니다. 예) 積読: 사 놓고 안 읽은 책
- 목록·진열장에는 키워드가 크게, 설명(이름표)은 작게 보입니다.
- 복사하면 키워드만 복사되고, 알림 줄의 검색을 누르면 바로 구글에서 찾습니다.
호기심의 방 (메인 화면)
앱을 열면 보이는 건 호기심의 방 하나뿐입니다. 큰 종이 한 장에 진열장(자료 · 영역 · 프로젝트)과 미분류 상자(받은함)가 놓여 있고, 진열장의 선반 위에 표본(키워드)이 글자로 올라가 있습니다. 상자·그림 없이 글자와 가는 선뿐입니다.
| 호기심의 방 | 이 앱에서 |
|---|
| 진열장 | 영역·프로젝트 하나 (자료 진열장은 기본) |
| 선반 | 진열장 안의 가로줄. 표본은 선반 위 자기 자리에 |
| 표본 | 키워드 |
| 이름표 | 키워드: 짧은 설명 |
| 미분류 상자 | 받은함. 주워 온 것이 일단 쌓이는 곳 |
| 수장고 | 보관. 방에는 안 보이고 찾기로만 |
- 멀리서 보면 진열장 이름판만 크게 보이고, 진열장을 누르면 그쪽으로 다가갑니다. 더 다가가면 이름표(설명)까지 보입니다
- 표본을 누르면 복사 (→ 검색 / 열기)
- 두 손가락(또는 마우스 휠)으로 확대·축소, 끌어서 이동. 왼쪽 아래 전체는 방 전체 보기
- 새 표본은 미분류 상자에 놓입니다. 표본을 꾹 눌러 끌어서(PC는 그냥 끌어서) 진열장에 올리면 그 영역·프로젝트로 정리됩니다
- 한 번 놓인 자리는 앱이 다시 섞지 않습니다. 자리로 기억하게 하려는 것입니다
산책 = 나중에 다시 보기
왼쪽 아래 산책을 누르면 오래 안 만난 표본부터 하나씩 다가가 이름표까지 보여 줍니다. 다음으로 넘기고 그만으로 끝냅니다. 같은 산책에서는 본 것을 다시 보여 주지 않고, 되도록 다른 진열장으로 옮겨 다닙니다. 복사한 것도 '만난 것'으로 쳐서 뒤로 밀립니다. 알림이나 일정은 없습니다. 생각날 때 한 바퀴 돌면 됩니다.
메뉴 버튼 안
오른쪽 아래 버튼을 누르면 화면을 덮는 판이 열립니다. 맨 위가 입력칸(바로 칠 수 있음)이고, 그 아래가 목록(고정 · 모아보기 · 날짜별 흐름), 오른쪽 위 태그 · 설정입니다. 목록에서 메모를 펼쳐 진열장에서를 누르면 방으로 돌아가 그 표본을 표시합니다. 저장하거나 뒤로 가기를 하면 판이 닫힙니다.
저장할 때 쓰는 짧은 명령:
#태그 — 태그 (하위 태그 #교육/임용)+이사 — ‘이사 준비’ 프로젝트로 바로 저장 (앞부분만 써도 됨)! — 고정- 본문 안:
==형광펜== 핵심 표시(목록에 먼저 보임)
기능은 일부러 적게 둡니다. 할 일 체크, 사진 넣기, 메모끼리 링크, 프로젝트 마감일, 첫 화면 알림 카드는 뺐습니다 (사진은 나중에 다시 넣을 수 있게 저장 구조만 남겨 둠).
참고한 메모 방식
| 방식 | 가져온 것 |
|---|
| Drafts (먼저 적고, 나중에 정하기) | 열면 바로 입력칸. 저장할 때 위치를 묻지 않음 |
| Notational Velocity / Raycast | 한 칸으로 찾기와 적기를 같이. 클립보드 저장, 고정 메모 한 번에 복사 |
| Logseq·Mem (하루 흐름, 폴더 없이) | 목록은 날짜별 흐름(오늘·어제…). 분류는 태그로 나중에 |
| 제텔카스텐 (임시 메모 → 정리) | 받은함 = 임시 메모. 끌어서 진열장에 올리거나 버림 |
| 장소법 · Data Mountain (자리로 기억) | 메인 화면 글자 지도. 한 번 놓인 자리는 그대로 |
| 호기심의 방 (Wunderkammer, 수집가의 진열실) | 진열장·선반·표본·이름표·미분류 상자·수장고라는 틀. 산책하며 다시 보기 |
| 티아고 포르테 CODE·PARA·점진적 요약 | 프로젝트·영역·자료·보관 칩, ==형광펜==이 목록 미리보기에 먼저 |
| Google Keep | 카드형 목록, 고정 |
PARA 정리법 (이 앱 기준)
| 칸 | 넣는 것 | 예 |
|---|
| 받은함 (미분류 상자) | 일단 담은 것. 나중에 옮김 | 공유로 받은 기사 |
| 프로젝트 | 끝나는 날이 있는 일 | 2027 임용 2차 준비, 이사, 학교 축제 |
| 영역 | 끝이 없이 계속 챙기는 분야 | 수업, 건강, 돈 관리, 집 |
| 자료 | 언젠가 쓸 정보. 태그로 찾음 | 미술 수업 아이디어, 레시피 |
| 보관 | 끝난 프로젝트, 다 쓴 메모 | |
헷갈릴 때 기준:
- “끝났다고 말할 수 있는 날이 있나?” 있으면 프로젝트, 없으면 영역.
- 매년 반복되는 일(예: 학교 축제, 연말정산)은 둘로 나눕니다. 해마다 쓰는 양식·노하우는 영역에, 올해 진행분은 프로젝트(
2026 축제)로 만들고 그 영역에 연결합니다. 끝나면 끝냄 → 보관. 내년엔 영역에서 노하우를 보고 새 프로젝트를 만듭니다.
- 여러 프로젝트에 쓰이는 자료는 자료에 두고
#태그로 묶습니다. 메모를 복사해 두 군데 넣지 않습니다.
설치
1. 인터넷 주소 만들기 (처음 한 번, GitHub Pages)
- 이 저장소에서 Settings → Pages
- Source: Deploy from a branch, Branch: main / (root) → Save
- 1~2분 뒤
https://내아이디.github.io/memobox/ 에서 열립니다.
저장소가 공개(Public)여도 메모는 공개되지 않습니다. 공개되는 건 앱 코드뿐이고, 메모는 각자 기기 안에만 있습니다.
2. 보고 있는 사이트 담기 (브라우저별)
| 어디서 | 처음 한 번 | 그다음부터 |
|---|
| 안드로이드 크롬 · 삼성 인터넷 | 주소를 열고 메뉴 → 앱 설치(홈 화면에 추가) | 사이트에서 공유 → 메모함. 글을 드래그해서 공유하면 그 글이 저장 |
| PC 크롬 · 엣지 · 사파리 | 메뉴 버튼 → 태그·설정 → 메모함에 담기를 북마크바로 끌어다 놓기 | 사이트에서 북마크 메모함에 담기 누르기 (드래그한 글도 같이) |
| 아이폰 사파리 | 아래 '단축어 만들기' | 사이트에서 공유 → 메모함에 담기 |
- ⚠️ 아이폰은 사파리와 홈 화면 앱의 저장 공간이 따로이고, 단축어는 사파리로 열립니다. 그래서 아이폰에서는 이 앱을 사파리에서 쓰세요(즐겨찾기에 추가). 사파리는 오래 안 열면 저장한 걸 지울 수 있으니 가끔 백업하세요.
아이폰 단축어 만들기
- 단축어 앱 → ＋ → 이름
메모함에 담기
- 아래 ⓘ(설정) → 공유 시트에서 보기 켜기, 받는 형식: URL·텍스트
- 동작 추가: URL 인코딩 (입력: 단축어 입력)
- 동작 추가: URL 열기 →
https://shiroleestudio.github.io/memobox/?text= 뒤에 ‘URL 인코딩된 텍스트’ 변수
3. 떠 있는 클립보드처럼 쓰기
웹앱은 다른 앱 위에 늘 떠 있을 수는 없어서, 폰에 있는 기능을 씁니다.
- 갤럭시: 최근 앱 화면에서 메모함 아이콘 → 팝업 화면으로 열기. 작은 창에서는 방 대신 찾기·목록이 바로 뜹니다. 예) 다른 앱에서 うさぎ를 써야 할 때 → 작은 창에
토끼 → うさぎ 누르기(복사) → 원래 칸에 붙여넣기
- 그 밖의 폰: 앱 아이콘을 꾹 누르면 찾기·적기 → 열리자마자 입력칸. 찾아서 복사하고 뒤로 가기
- PC: 설치한 앱 창을 작게 옆에 두고
Ctrl+K 또는 / 로 바로 찾기
기기 사이 옮기기 · 백업
지금 버전은 자동 동기화가 없습니다(옵시디언 기본과 같음).
- 다른 기기로 옮길 때: ⚙️ → 전체 백업(JSON) → 그 파일을 다른 기기에서 ⚙️ → 가져오기. 같은 메모는 더 최근 것이 남습니다.
- 폰에서 백업하면 공유 창이 떠서 구글 드라이브·카카오톡 나에게 등으로 바로 보낼 수 있습니다.
- 옵시디언 노트(.md)도 여러 개 골라서 가져올 수 있습니다.
다음에 붙일 수 있는 것
- 자동 동기화: 메모는 지금처럼 기기에 두고, 바뀐 것만 Supabase(무료)나 구글 드라이브 파일과 주고받는 방식. 로컬 우선은 그대로 유지
- 크롬 확장(선택 영역 캡처), 웹페이지 본문 자동 저장
- 그래프 보기(메모 연결 지도)
개발
- 빌드 도구 없음.
index.html + style.css + js/(ES 모듈) 그대로 배포
js/core.js 순수 함수(검색·태그·링크·마크다운·ZIP), js/db.js IndexedDB, js/app.js 화면- 테스트:
npm test (Node 20 이상, 설치할 것 없음)
- 로컬 실행:
python3 -m http.server 후 http://localhost:8000
- 앱 파일을 바꾸면
sw.js의 CACHE 이름(버전)을 올려야 설치된 앱이 새 파일을 받습니다
운영
- 주소: https://shiroleestudio.github.io/memobox/ (저장소 shiroleestudio/memobox). 옛 주소 dooholee96-code.github.io/memobox 는 리다이렉트.
- 작업 규칙·결정 기록은
AGENTS.md(사람과 AI 공용). CLAUDE.md 는 그 파일을 가리키기만 합니다.
- 배포:
main 에 푸시하면 GitHub Pages 가 그대로 올립니다(빌드 없음). 파일을 바꾸면 sw.js 의 CACHE 버전을 올려야 설치된 앱이 새 파일을 받습니다 — 이걸 빼먹는 것이 가장 흔한 "배포했는데 안 바뀜" 원인입니다.
- 되돌리기:
git revert <커밋> 후 푸시(이때도 CACHE 를 한 번 더 올립니다).
- 의존성 없음. 설치할 것도, 썩을 것도 없습니다. 테스트만 Node 20 이상(
npm test).
- 사용자 데이터는 기기의 IndexedDB 에만 있습니다. 백업은 ⚙️ → 전체 백업(JSON)으로 사용자가 합니다. 서버·계정 없음.
- 라이선스:
LICENSE(MIT).
- 계정·정기 점검·다른 저장소: 허브 저장소(shiroleestudio.github.io)의
STUDIO.md.
