post it and pray

포스트잇/책상 테마의 할 일 관리 웹앱. 빌드 스텝 없이 index.html 하나로 동작하는 순수 HTML/CSS/JS 앱.

보드 구성

• gotta do... (today) — 오늘 할 일. 직접 바꾼 순서는 보드를 옮기면 지워지지만, 같은 날 안에 다른 보드(waiting 등)로 보냈다가 gotta do로 되돌리면 떠나기 전의 자리(몇 번째였는지)로 돌아옴(다음 날이 되면 기억을 버림) 긴급(❗) 항목을 완료하면 긴급 표시가 함께 내려가고(완료를 취소해도 긴급은 복구되지 않음, Ctrl+Z로는 되돌림) 체크해도 당일 자정까지는 취소선만 그어진 채 그대로 남아있고, 다음날 앱을 열 때 자동으로 done 아카이브로 넘어감.
• waiting... — 회신/응답 대기 중인 일. 체크박스 대신 항상 보이는 ← 버튼으로 today로 되돌릴 수 있고, 줄 아래 아이콘 줄의 someday(🌙) 옆 **완료 버튼(✓)**으로 바로 끝낼 수 있음(gotta do로 옮겨 완료 처리하므로 오늘 목록에 취소선으로 남았다가 다음날 done 기록으로 넘어감. 못 끝낸 하위 항목이 있으면 먼저 확인하고, 회신 예정일은 정리됨. 실수로 눌렀으면 Ctrl+Z). 📅로 회신 예정일을 붙일 수 있고, 붙여도 pray later로 옮겨지지 않고 waiting에 남음(오늘 자동 이동도 없음). 예정일이 내일 이후인 항목은 목록 맨 아래 ▾ ⋯ 접힘 구역(기본 접힘, 구역 안은 예정일 빠른 순)으로 들어가고, 예정일이 오늘이거나 지나면 일반 waiting 항목처럼 목록에 나타남. 날짜를 지우면 일반 항목으로 복귀. 구역에 항목이 없으면 토글 자체가 숨겨지고, ⋯에 마우스를 올리면 "아직 안 와도 되는 것 N개"(예정일이 내일 이후인 항목 수)가 뜸.
• 날짜 지우기 — 항목의 날짜 행(📅)에서 날짜 지우기 버튼 또는 브라우저 달력(크롬)의 삭제 버튼으로 날짜를 지울 수 있음(둘이 똑같이 동작: 예정일이면 원래 보드로, waiting이면 회신 예정일만 제거). 년/월/일 중 일부 칸만 지워 둔 입력 중 상태나, 달력을 연 직후(0.7초 이내)에 모바일 브라우저가 쏘는 빈 값 이벤트는 지우기로 보지 않고 무시함.
• 터치 기기(손가락)에서의 편집/아이콘 줄 — 탭을 두 단계로 나눔. ① 닫혀 있는 항목을 탭하면 그 항목의 아이콘 줄만 열림(하위 항목은 안 펼침). 한 번에 한 항목만 열려 있고, 다른 곳을 탭하면 닫힘(스크롤은 닫지 않음). ② 아이콘 줄이 열린 항목의 글자를 한 번 더 탭하면 편집에 들어감. 체크박스·버튼·편집 중인 입력창·(완료/전체) 진행도는 이 규칙 대상이 아님. 마우스 기기는 그대로(호버로 아이콘 줄, 클릭으로 편집). 롱프레스는 OS의 글자 선택(0.5초쯤)과 시간이 겹쳐서 쓰지 않음. 새 항목 입력줄은 탭하면 포커스가 가서 아이콘이 같이 열림.
• 열림/닫힘 지연은 기기가 정함 — 호버로 펼치는 것은 마우스가 실수로 스친 것을 걸러내려고 0.15초 기다렸다 열고 0.25초 뒤에 닫음(--expand-delay/--collapse-delay). 손가락 기기는 탭이 일부러 하는 동작이라 두 지연을 0으로 덮어씀(@media (hover: none)) — 열릴 때도 닫힐 때도 기다리지 않음. 아이콘 줄이 열린 모양(높이/투명도/여백)은 편집 중·날짜 행 고정·탭으로 연 항목이 한 규칙(:is())을 공유.
• 진동(햅틱) — 손가락 기기에서 버튼/항목/체크박스를 탭할 때 살짝(8ms), 하단 알림이 뜰 때(12ms), 보드 이동으로 도착할 때(톡-톡 패턴) 진동함. navigator.vibrate를 쓰므로 안드로이드 크롬 등에서만 울리고 iOS 사파리는 지원하지 않아 조용히 무시됨. 마우스 기기와 "동작 줄이기" 설정에서는 꺼져 있고, 80ms 안에 연달아 불리면 한 번만 울림. 세기/패턴은 script.js 맨 위 시간 값 블록의 HAPTIC_*.
• 입력 중에는 다른 항목 호버 비활성 — 글자를 입력하는 칸(제목 수정, 하위 항목 추가/수정, 새 항목 입력 등)에 포커스가 있는 동안은 고치는 그 항목의 아이콘 줄만 열려 있고, 다른 항목은 마우스를 올려도 아이콘 줄/someday 하위 항목이 펼쳐지지 않음(열릴 때마다 항목 높이가 달라져 치는 동안 아래 항목이 출렁이던 것을 막음). 입력을 끝내면(Enter/Esc/다른 곳 클릭) 평소처럼 호버가 돌아옴. 날짜 행이 열려 고정된 항목과 모바일에서 탭으로 열어둔 항목은 예외.
• 하위 항목 간소화 표시 — 항목 옆에 (완료/전체) 진행도가 붙고, 행에 마우스를 올리거나 포커스하면(터치 기기는 탭해서 연 항목이나 편집 중인 항목) 상세가 펼쳐짐. waiting은 미완료 하위 항목만 상시 표시(완료된 것만 숨김), someday와 완료 처리된 gotta do 항목은 하위 항목 전체를 숨김. pray later의 "not my problem... yet" 칸도 접힌 하위 항목 옆에 진행도를 표시.
• pray later... 📅 (scheduled) — 날짜가 지정된 할 일 저장소(waiting처럼 하위 항목이 있으면 (완료/전체) 알약이 붙고 완료된 하위 항목은 접혀 있다가 알약을 누르면 펼쳐짐, someday 포스트잇 안, 기본 접힘). 오늘 마감/지난 마감 항목은 여기 대신 today's list(정상 항목 또는 "oops, still here" 아래)에 표시됨. "someday"와 제목이 같은 글자(s)로 시작해서 헷갈리는 것을 피하려고 이렇게 이름 붙였고, 날짜 개념이라는 걸 바로 알아보도록 📅 이모지는 그대로 둠.
• pray later... / someday... 자동 접힘 — 두 섹션은 펼친 지 15분이 지나면 자동으로 다시 접힘(다시 펼치면 15분을 새로 잼). 마침 그 섹션 안에서 항목을 고치는 중이면 닫지 않고 1분 뒤 다시 확인함.
• someday... — 날짜 없는 언젠가 할 일. 날짜를 지정하면 pray later...(scheduled)로 이동. 새 항목 입력창은 접힘 섹션 밖, 카드 맨 아래에 항상 노출되어 있어서 목록을 펼치지 않아도 바로 입력 가능(플레이스홀더는 "미래에 내가...").
• done (리갈패드) — 완료 항목 아카이브. 월별(이번 달 기본 펼침) → 날짜별로 그룹핑(리갈패드의 줄과 어긋나지 않도록 제목/월 제목/항목 줄 높이를 모두 28px 단위로 맞추고 날짜 묶음 사이에는 여백을 두지 않음 — 날짜 구분은 왼쪽 라벨이 함). 항목별로 "↻ 또 하기" / 🗑️ 삭제 가능. "↻ 또 하기"를 누르면 그 항목 근처에 모달이 떠서 이름·하위 항목·날짜(선택, "내일" 버튼 있음)를 고친 뒤 "완료"를 누르면 새 항목으로 복제됨(날짜를 정하면 pray later...(scheduled), 안 정하면 today로. 지난 기록은 그대로 남음). 이름을 비우면 닫히지 않고, 취소/Esc/바깥 클릭이면 아무것도 안 만듦.
• not my problem... yet (리갈패드 아래 칸) — pray later에 안 보이는(7일째부터인, 오늘 기준 6일 뒤까지만 pray later에 보임) scheduled 항목 목록. 날짜 값(예: 10-30)을 누르면 그 줄 아래에 날짜 선택 칸이 열려서 바로 수정 가능(📅 버튼은 없음. 칸 옆의 "닫기"는 칸만 닫음).
• gone... 👻 (리갈패드 아래 칸의 뒷면) — 최근 3일 안에 지운 항목 기록. "not my problem... yet" 제목 옆 ↺ gone... 버튼으로 뒤집어 보고, 항목별로 "↩ 되살리기" / 🗑️(완전히 삭제) 가능. 3분 뒤 자동으로 원래 칸으로 돌아감. 실제 Ctrl+Z(되돌리기)와 헷갈리지 않도록 예전 Ctrl+Z 이름에서 바꿈.
• lupin mode 🕶️ (월급루팡 모드) — waiting 스티키 뒷면에 숨어있는, 일하는 척하며 딴짓 할 일을 적어두는 숨김 보드(별도 카드가 아니라 waiting 노트를 뒤집으면 나오는 뒷면). waiting 카드 제목 줄 오른쪽 끝(someday 카드의 접힘 화살표와 같은 자리)의 🕶️ 아이콘을 누르거나 키보드 l로 실제로 카드를 뒤집는 3D 플립 애니메이션과 함께 전환됨(🥷 대신 🕶️를 쓰는 이유는 Windows 기본 이모지 폰트에 🥷가 없어서 네모 박스로 깨지기 때문). 체크박스 있는 할 일 리스트라 다른 보드와 똑같이 쓸 수 있지만, 체크해도 done 아카이브로 절대 넘어가지 않고 다른 보드로 옮겨지지도 않음 — 완전히 격리된 숨김 보드.
• 클라우드 / 백업 💾 — 헤더의 로그아웃/라이트 옆 💾 버튼(툴팁 "클라우드 / 백업")을 누르면 모달이 뜸. 모달 위쪽은 클라우드 맞추기(로그인했을 때만): 기기마다 내용이 달라졌을 때 어느 쪽이 마지막 값인지 직접 골라 이 기기 값을 클라우드에 저장(클라우드를 덮어씀) 또는 클라우드 값을 이 기기로 가져오기(이 기기를 바꿈, 되돌릴 수 없음). 합치지 않고 통째로 바꾸며, 누르면 두 쪽의 항목 수와 클라우드의 마지막 저장 시각을 보여주고 지워질 쪽을 밝힌 뒤 한 번 더 확인함. 저장에 실패하면 실패했다고 알림. 모달에는 이 기기와 클라우드 중 어느 쪽이 더 최근인지(클라우드가 더 최근이면 이 기기가 마지막으로 받은 시각, 못 올린 변경이 있으면 그 사실)도 한 줄로 보여줌. 올리기·불러오기가 실패하면(오프라인, 로그인 만료 등) 헤더에 **⚠ 동기화 안 됨**이 떠서 누르면 이 모달이 열리고, 평소에는 보이지 않음. 이 기기에 못 올린 변경이 있는 채로 닫았다 다시 열어도 클라우드로 덮어쓰지 않고 항목별로 합친 뒤 다시 올림(한쪽에서 지운 항목이 다른 쪽에 남아 있으면 되살아날 수 있음). 이와 별개로, 탭/앱으로 돌아올 때(5초 이상 간격) 클라우드가 이 기기가 마지막으로 받은 시점보다 더 최근이고 이 기기에 못 올린 변경이 없으면 자동으로 클라우드 내용을 불러옴(못 올린 변경이 있으면 덮어쓰지 않고 평소 저장처럼 항목별로 합침, 글자를 고치는 중·모달·하루 시작하기·포커스 카운트다운 중에는 건너뜀). 아래쪽은 백업 / 복구(파일): 백업 데이터 받기(예전 이름 내보내기)는 전체 데이터를 postit-backup-YYYY-MM-DD.json으로 내려받음(파일 모양: { app, version, exportedAt, boards }, boards는 localStorage/클라우드에 저장되는 것과 같은 shape이라 월급루팡(lupin)과 gone(삭제 기록)까지 전부 들어감 — 파일은 평문이니 남에게 줄 땐 주의). 복구하기는 파일을 고르면 "gotta do N · waiting N · someday N · pray later N · done N" 요약과 함께 확인 모달이 뜨고, 복구를 누르면 지금 데이터가 통째로 그 파일 내용으로 바뀜(합치기 아님). 복구도 일반 변경처럼 저장되므로 Ctrl+Z로 되돌릴 수 있고, 로그인 상태면 클라우드에도 평소처럼 반영됨(다른 기기에서 동시에 쓰는 중이면 충돌 병합 때 복구로 지워진 항목이 되살아날 수 있음 — 삭제 기록이 없는 기존 한계). 앱 파일이 아니거나 JSON이 아니거나 더 새 버전이면 "이 앱의 백업 파일이 아니에요" 등으로 거절하고 아무것도 바꾸지 않음. boards 객체만 있는 파일도 받아주고, 알 수 없는 필드는 걸러짐.
• 검색 🔍 (search 리갈패드) — done 리갈패드와 같은 모양의 검색 패드(제목 search 🔍와 입력칸이 한 줄). 보드 위 빨간 깃발(done) 왼쪽의 파란 깃발, 키보드 /, Ctrl+K(맥은 Cmd+K)로 열고, 검색어가 없을 때는 제안 4섹션(검색 제목 줄 밑에 빈 줄 한 칸을 두고 시작, 각각 최대 4개, 넘는 건 안 보여줌, 한 항목은 위 섹션에만): 챙길 것(기한/회신 예정일이 오늘이거나 지남 또는 하위 항목이 다 끝났거나 1개 남은 항목을 "회신 1일 지남", "오늘 마감", "하위 다 끝남" 같은 이유 태그와 함께 — 지난 것 → 오늘 → 마무리만 남은 것 순), 오래 묵은 것(someday/waiting 중 2주 넘게 손 안 댄 것 — 후보가 4개보다 많으면 무작위로 4개(오래된 순으로 자르면 늘 같은 것만 보이므로)를 뽑되, 검색 패드를 열 때 한 번만 뽑고 열려 있는 동안은 고정, 보여줄 땐 오래된 순. 태그는 정확한 일수 대신 2주째(14일~)/한 달째(30일~)/두 달째(60일~), 마지막 수정 시각이 없으면 만든 시각 기준, 회신 예정일이 미래인 waiting은 제외), 최근 완료(최근 3일 안에 끝낸 것), 자주 한 것(최근 30일 안에 2일 이상 끝냈고 같은 제목이 열려 있지 않은 일 — 하루 시작하기에서 묻지 않고 여기서만 보여줌, 눌러서 완료 기록의 그 줄로 이동). 챙길 게 하나도 없으면 "지금 챙길 게 없어요" 한 줄. 각 항목 앞에는 어느 보드 것인지 알려주는 아이콘(✿ gotta do, ⏳ waiting, 🌙 someday, 📅 pray later, 📋 done)이 붙고, done 패널처럼 리갈패드의 줄(28px)에 글씨가 얹히도록 모든 행 높이를 28px 단위로 맞춤. 입력하는 대로 gotta do / waiting / someday / pray later / done 항목의 제목·하위 항목·메모에서 찾아 보드별로 묶어 보여줌(보드마다 20개까지, 넘으면 "…외 N개"). 검색어는 대소문자 구분 없이 부분 일치, 띄어쓰기로 여러 개를 쓰면 전부 들어 있는 항목만(제목·하위 항목·메모 어디에 흩어져 있어도 됨). 하위 항목/메모에서 걸린 항목은 제목 아래에 걸린 곳을 한 줄로 보여주고 검색어는 형광펜으로 표시. 결과를 누르거나 Enter(첫 결과)를 누르면 원래 항목으로 이동함: 검색 패드가 닫히고, 항목이 접힌 구역(someday/pray later/waiting의 ⋯) 안에 있으면 먼저 펼치고, 보드에 없는 항목(완료 기록, 7일째부터인 pray later = "not my problem... yet")이면 done 패널을 열어 접힌 월까지 펼친 뒤 그 줄로 스크롤하고, 흔들어서 강조함(보드 이동의 도착 흔들림과 같은 효과 — 반투명 막 같은 다른 강조는 없음). 키보드 포커스는 주지 않고 사용자가 클릭/Tab으로 직접 정함(포커스가 있으면 아이콘 줄이 계속 펼쳐지므로)(waiting 뒷면(lupin)이 보이던 중이면 앞면으로 돌아옴). 항목이 안 보이는 화면 상태(focus 모드의 시간 고르는 단계 등)여서 못 찾으면 메모 모달(읽기)로 대신 보여줌. lupin(월급루팡)과 gone(삭제 기록)은 검색 대상이 아님. 읽기 전용이라 데이터는 안 바뀜. done 패널과 같은 자리를 덮기 때문에 한쪽을 열면 다른 쪽은 닫히고, Esc(모달이 없을 때)/✕/로고 클릭으로 닫으면 검색어도 지워짐. focus mode 카운트다운 중에는 열리지 않음.
• 하루 시작하기 🌅 (리갈패드) — 헤더의 🌅 하루 시작하기 버튼으로 필요할 때만 여는 리갈패드(자동으로 열리지 않음, 오늘 아직 확정 전이면 버튼에 작은 점). done/검색 리갈패드와 같은 자리에서 같은 모양(.archive-panel)으로 열리고, 열려 있는 동안 배경 보드는 inert라 조작되지 않고 보드 단축키/Ctrl+Z도 꺼짐. 두 단계를 다음 단계 →(← 이전)로 차례로 넘어가고, 마지막 단계에서만 버튼이 계획 확정하고 Today로가 되고, 확정하면 오늘 남은 할 일이 있을 때 포커스의 할 일 고르기 화면으로 넘어감(자동 시작 없음). 오늘 순서 정하기의 각 줄 ✓로 이미 끝낸 일을 완료 표시할 수 있고 확정할 때 완료 처리됨(제목 옆에 날짜 · 1/2 정비하기처럼 지금 단계만 작게 보임). ① 정비하기 — 항목마다 고르는 대신 규칙이 "상황인데, 제안?" 질문을 만들어 목록으로 한꺼번에 보여주고, 줄마다 아니오 / 네만 고름(진행은 3 / 6). 한 줄은 보드 아이콘 · 제목 · 이유 칩 / 질문 / [아니오] [네]이고, 답하면 그 줄이 ✓ 결과 한 줄로 접히며 바꾸기로 다시 열 수 있음(답하는 순서는 자유). 아니오를 누르면 그 줄 아래에 대안 선택지(예: 내일로 미루기 · 날짜 정하기(오늘 마감 질문에서 직접 고름) · 다음 주로 미루기 · 날짜 지우기(마감/확인 날짜를 없앰) · 언젠가로 보내기 · 이미 끝났어요 · 3일 더 기다리기 · 긴급 해제 · 대기중으로 옮기기 …, 마지막은 늘 그대로 두기/3일 뒤에 다시)가 글자 버튼으로 펼쳐짐(대안이 없는 규칙은 바로 그대로 둠). 규칙은 검색 제안과 같은 선정 기준(개수 제한·무작위 없이 전부)에서 나옴: 마감이 N일 지났는데, 오늘 처리할래요?(네 → 오늘 할 일로) · 회신 기한이 N일 지났는데, 후속 연락을 하실래요?(네 → 원본은 3일 뒤 확인으로 waiting에 두고 제목을 미리 채운 새 할 일을 Today에 만듦, 원본과 연결하는 필드는 없음) · 오늘 마감인데, 긴급건으로 처리할래요?(네 → ❗ 긴급 표시. 마감일을 정한 지 3일 안인 항목은 묻지 않고, 한 번에 3개까지만 물음 — 나머지는 gotta do에 그대로 보임) · 오늘 회신 예정인데, 확인 연락을 하실래요? · 하위 항목을 모두 끝냈는데, 완료 처리할래요? · 하나만 남았는데, 오늘 마무리할래요?(둘 다 waiting 항목에는 묻지 않음) · N째 그대로인데, 오늘 해볼래요? / N째 기다리는 중인데, 후속 연락을 하실래요?(오래 묵은 someday/waiting) · N일째 오늘 목록에 있는데, 언젠가로 미룰래요?(gotta do에 7일 넘게 그대로인 것) · 내일 마감인데, 오늘 미리 시작할래요?(마감이 내일 — 모레 마감은 금요일에 일요일 마감일 때만 묻고, 마감일을 정한 지 3일 안인 항목은 이미 아는 일이라 묻지 않으며, 한 번에 마감이 빠른 순으로 3개까지만 물음. 오늘 할 일이 이미 많으면 묻지 않음: gotta do 카드에 보이는 미완료 개수(일반 항목 + 오늘 마감 + oops)가 모레 마감은 5개 이상, 내일 마감은 8개 이상일 때 건너뜀, 금요일에 주말 마감이면 이번 주말 마감인데, 오늘 미리 처리할래요?) · 마감이 N일 넘게 지났는데, 다음 주로 다시 잡을래요?(7일 이상 지난 마감, 네 → 다음 월요일로 날짜 변경) · 확인 날짜가 없는데, 3일 뒤에 확인할까요?(확인 날짜 없이 7일 넘게 묵은 waiting) · N일째 기다리는 중인데, 후속 연락을 하실래요?(waiting이 마지막으로 손댄 지 3일(72시간) 넘었고 확인일이 아직 안 온 것 — 한 번에 가장 오래된 것부터 최대 3개까지만 묻고 나머지는 다음 날 차례, 아니오는 3일 미루기, 대안은 내일 확인하기/다음에 확인하기 (날짜 지정)//) · (❗인데 3일 넘게 그대로, 네 → 오늘 순서 맨 위로) · (열려 있는 같은 제목, 네 → 나중에 만든 쪽을 휴지통으로 보내고 하위 항목은 합침) · 오늘 할 일이 (지금 답 기준으로) 8개를 넘으면 목록 맨 끝에 (순서 뒤쪽의 긴급 아닌 기존 항목부터 내일 날짜로). 이미 오늘 목록에 있는데 '오늘 하기'를 묻는 식으로 물을 게 없으면 그 항목은 건너뜀. 과 에서 는 아무 일도 안 하는 게 아니라 — 항목의 에 오늘 날짜를 남겨 3일 동안 다시 안 묻게 하고(검색 제안의 도 같음), 은 올리지 않아서 '얼마나 묵었나'와 '최근에 미룬 때'가 따로 관리됨(모든 기기에 동기화). 날짜가 정하는 규칙(마감·회신)의 는 아무것도 바꾸지 않아 다음 날 다시 물음(같은 제목·확인 날짜 없음·긴급 규칙의 도 3일 미루기). 남은 질문은 로 넘길 수 있음. ② — 확정 후 gotta do에 남을 미완료 할 일(기존 Today + 네로 들어온 것 + 후속 연락/추가한 할 일)의 (긴급 → 오늘 마감 → 마감이 지났다가 가져온 것 → 후속 연락 → 마무리만 남은 것 → 기존 항목 → 반복/추가한 것, 같은 단계 안에서는 원래 순서). 칩은 만 보여서 글자가 적음(어디서 온 항목인지는 표시하지 않음). 바꾸고 싶은 것만 한 줄에 하나씩 순서 바꾸기 모드와 같은 손잡이 드래그나 ↑↓ 버튼(손잡이에서 키보드 ↑↓도 됨)으로 정렬하고, 아래 줄(보드 맨 아래 입력줄과 같음)에서 바로 새 할 일을 추가할 수 있음. 그 아래 목록(하나 이상일 때)에서는 (확정하면 waiting에서 gotta do로 실제로 옮겨지고 회신 예정일 같은 waiting 전용 값은 정리됨. 확정 전까지는 이 화면의 임시 상태라 로 취소할 수 있음). 목록에는 (정비 답으로 오늘로 옮겨지거나 해결되거나 확인일이 미래로 잡힌 항목은 빠지고, 직접 바꿨을 때만 확정 때 로 저장). 순서는 기존 gotta do의 에 그대로 저장됨. : 답과 순서는 확정 전까지 초안(의 , 기기별·클라우드 동기화 안 함)에만 쌓이고, 같은 날 다시 열면 이어서 봄(날짜가 지난 초안은 버림, 로 직접 비우기도 가능, /✕로 닫아도 초안 유지). 은 한 번이라 한 번에 통째로 되돌아감. 답한 뒤 그 항목이 다른 기기에서 바뀌었으면(이 달라짐) 그 답은 무효가 되어 다시 물어봄. 자정을 넘기면 기준 날짜를 갱신하고 안내함.
• 메모 📝 — 할 일 하나에 메모(최대 2000자)를 붙일 수 있음. 항목에 마우스를 올리면 나오는 아이콘 줄의 📝(❗ ➕ 📝 …)를 누르면 입력 모달이 열리고, 메모가 붙은 항목은 날짜/(완료/전체)와 같은 모양의 메모 알약이 오른쪽에 표시됨. 알약을 누르면 그 항목 위치에 모달이 떠서 상위 항목 + 하위 항목 + 메모를 읽기 모드로 보여주고(닫기/Esc/바깥 클릭으로 닫힘), 수정을 누르면 같은 모달 안에서 제목·하위 항목(글자 수정/삭제/추가)·메모를 한꺼번에 고칠 수 있음(저장 또는 어느 칸에서든 Shift+Enter(Alt/Ctrl/Cmd+Enter도 같음 — 새 항목 입력창의 Shift+Enter처럼 "확정하고 다음으로"; 메모 칸의 Enter는 그냥 줄바꿈). 저장하든 취소/Esc/바깥 클릭이든 모달이 닫히지 않고 읽기 모드로 돌아감 — 저장은 변경 반영, 취소는 아무것도 안 바뀜. 메모를 새로 쓰다 취소하거나 메모를 비워 저장하면 보여줄 게 없어 닫힘). 하위 항목의 완료 체크는 모달에서 못 바꿈. 메모를 비우고 저장하면 메모가 삭제됨. focus mode에서는 알약 대신 할 일 박스 안(하위 항목 아래)에 메모 내용이 바로 보이고(카운트다운 중에는 읽기 전용, 시간 고르는 단계에서는 눌러서 수정 모달 열기), 되살리기("↻ 또 하기")하면 메모도 같이 복제됨.
• 묶기 🔗 — 같이 처리하는 항목(예: 오늘 전산반영 건)을 이름·프로젝트 없이 가볍게 묶음. 항목 아이콘 줄의 🔗를 누르고 같은 카드의 다른 항목을 누르면 묶이고(Esc나 다른 곳을 누르면 취소), 묶인 항목은 카드 안에서 붙어 보이며 체크박스끼리 세로 선으로 이어짐. 묶음에 더 넣으려면 묶인 항목의 🔗를 다시 누름. ✂️는 그 항목만 묶음에서 뺌. 묶인 항목 하나만 다른 카드/대기중으로 옮기거나 날짜를 지정하려 하면 한 번 더 물어서 같이 옮기기(묶인 항목 전부 적용) 또는 그룹 해제하기(그 항목만 적용)를 고름(Esc/바깥 클릭은 아무것도 안 함). 항목을 지우면 묶음에서 빠지고, 완료 표시한 항목은 묶음 표시에서 제외되고(체크를 풀면 다시 묶임), done으로 넘어가면 묶음이 풀림. 검색 결과에서는 묶인 항목 옆에 작은 🔗가 붙음. 하루 시작하기는 묶인 항목을 질문 하나(🔗 묶음 3개, 짝들 제목 표시)로 묻고 그 답을 묶음 전체에 적용함. '오늘 할 일이 많은데, 일부는 미룰래요?'는 미룰 후보를 항목마다 오늘/내일(금·토·일엔 월요일)/날짜지정으로 고름(처음엔 전부 오늘이고, 이대로 정하기를 누르면 고른 것만 미룸)(묶인 항목에는 완료 질문과 "이미 끝났어요" 선택지는 나오지 않음). 순서 바꾸기에서 묶인 항목을 끌면 묶음이 그 자리로 같이 옮겨짐.
• pray later 날짜 머리글 — pray later 카드는 날짜별 머리글(🙏 내일 / 모레 / 수요일…, 6일 안이라 요일로만) 아래에 항목을 모아 보여주고, 항목마다 날짜 알약은 붙이지 않음(날짜 수정은 📅). 머리글은 항목 본문과 같은 크기·글꼴이고 색만 흐림. 완료한 항목은 머리글 없이 아래 구분선 밑에 날짜 알약과 함께 남음. 묶음은 같은 날짜 안에서만 붙음.
• focus mode 🍅 (뽀모도로) — gotta do 카드 자체가 리스트 ↔ 타이머 화면으로 전환되는 몰입 모드(별도 오버레이가 아니라 같은 카드 안에서 내용물만 크로스페이드로 갈아끼움). 제목 줄 오른쪽의 🍅 아이콘, 각 할 일 행에 마우스를 올리면 나오는 🍅 아이콘, 키보드 Alt+T(포커스된 항목 기준) 또는 t(리스트 화면일 때) 네 가지로 진입. 할 일 선택 → 3/5/15/25분 중 시간 선택까지는 다른 카드가 그대로 보이지만, 실제 카운트다운이 시작되는 순간부터 waiting/pray later/someday 카드가 흐려지고 조작이 막히며, waiting 카드는 무조건 앞면으로 되돌아감. 카운트다운 중엔 모든 키보드 단축키가 꺼지고 화면의 "완료로 표시"/"나가기" 버튼으로만 빠져나갈 수 있음(나가기는 되돌릴 수 없는 확인 단계를 거침). 시간이 다 되면 "완료로 표시" / "타이머 다시 설정하기"(같은 할 일로 시간 선택 단계로 복귀) / "대기중으로 변경" / "앗.. 못했어요" 중 하나를 골라 마무리.

구글 캘린더 연결 (선택)

하루 시작하기에 일정 살펴보기 단계를 더함. 서버도 환경변수도 필요 없고, 구글 로그인에 캘린더 읽기 권한(calendar.readonly)을 합쳐서 한 번에 동의받음. script.js 맨 위의 GOOGLE_CLIENT_ID가 비어 있으면 이 기능은 통째로 숨겨져 앱 동작에 아무 영향이 없음.

설정(한 번만, 이미 쓰는 구글 로그인 클라이언트를 재사용 — 새로 만들 필요 없음)

1. Google Cloud Console에서 지금 로그인에 쓰는 프로젝트를 고르고 API 및 서비스 → 라이브러리 → Google Calendar API → 사용.
2. OAuth 동의 화면 → 범위 추가 또는 삭제에서 https://www.googleapis.com/auth/calendar.readonly 추가(게시 상태가 "테스트"면 본인 계정은 이미 테스트 사용자일 것).
3. 사용자 인증 정보 → 로그인에 쓰는 웹 클라이언트 → 승인된 JavaScript 원본에 배포 주소(예: https://내-앱.vercel.app) 한 줄 추가(기존 로그인 설정은 그대로).
4. 그 클라이언트 ID(…apps.googleusercontent.com, Supabase 대시보드의 Authentication → Providers → Google에도 있음)를 script.js 맨 위 const GOOGLE_CLIENT_ID = ''; 따옴표 안에 붙여넣고 배포. 공개값이라 코드에 들어가도 안전하고, client secret은 필요 없음. Supabase 구글 로그인과 같은 클라이언트여야 로그인 때 받은 동의가 그대로 이어짐.

동작

• 로그인 한 번으로: 설정한 뒤 Google로 로그인을 누르면 기본 권한과 함께 캘린더 읽기 권한까지 한 번에 동의받음(이미 로그인해 있던 사람은 한 번 로그아웃 후 다시 로그인하면 동의 화면에 캘린더가 추가돼 뜸). 로그인 직후 Supabase가 주는 구글 토큰(session.provider_token)을 이 기기에 받아 두므로, 그 후 50분 동안은 팝업 없이 바로 일정을 읽음. 탭에 돌아올 때마다 같은 세션이 다시 오므로 이미 본 토큰은 만료 시각을 늘리지 않음.
• 다른 계정의 캘린더: 일정이 로그인 계정이 아닌 다른 구글 계정에 있으면 다른 구글 계정으로 연결(또는 연결 후 다른 계정으로 연결)을 눌러 계정 선택창에서 고름. 그 계정(테스트 단계에서는 테스트 사용자로 등록된 계정)의 캘린더를 읽고, 이 기기에 postit-gcal-account로 기억함.
• 다음 날부터: 토큰이 만료되면 하루 시작하기의 일정 살펴보기에 들어설 때 같은 동의를 바탕으로 구글에서 새 토큰을 조용히 받음(로그인한 계정을 힌트로 넘겨 계정 선택 창이 안 뜨고, 구글에 로그인돼 있으면 팝업이 잠깐 떴다 바로 닫힘). 토큰은 이 기기의 localStorage에만 둠.
• 로그인하지 않은 경우: 일정 살펴보기의 📅 구글 캘린더 연결 버튼으로 같은 방식(동의 팝업)으로 연결할 수 있음.
• 오늘·내일 일정을 시간순으로 보여주고(내일이 주말·공휴일이면 다음 영업일까지 — 금요일이면 월요일 일정도 보임. 그 사이 쉬는 날은 일정이 있을 때만 나옴. 공휴일은 구글의 대한민국 공휴일 캘린더를 같은 권한으로 읽어 판단하고, 못 읽으면 주말만 쉬는 날로 봄)(기본 캘린더뿐 아니라 내가 편집할 수 있는, 선택돼 있는 캘린더를 모두 읽음. 일정 단계 아래 캘린더 N/M개 읽는 중 · 고르기에서 어떤 캘린더를 읽을지 체크로 고름 — 구독한 캘린더도 고를 수 있음)(종일 일정은 종일, 취소/거절한 일정과 근무 위치는 제외, 이미 끝난 오늘 일정은 흐리게), 일정마다 정비하기와 같은 모양으로 ㄴ [할 일로 복사] [할 일 작성하기] 두 버튼이 붙음(gotta do 하위 항목처럼 [ ]로 감싼 작은 글씨)(**할 일로 복사**는 일정 자체를 할 일로 담음 — 오늘 일정은 오늘 순서 목록에, 내일 이후 일정은 그 날짜의 pray later 항목으로 확정 때 만들어짐, 다시 누르면 뺌 / **할 일 작성하기는 그 일정과 연결된 할 일(회의 자료 준비 같은 것)을 누르면 그 버튼이 그 자리에서 바로 글자 칸으로 바뀌어 직접 적어 오늘 할 일로 추가함, Enter로 확정하면 다음 칩이 이어서 열리고 Esc로 닫음, 만든 칩은 눌러서 고치고(비우면 삭제) ×로 뺌. 아무 버튼도 안 누르면 아무것도 가져오지 않음)(오늘 일정은 오늘 순서 목록에, 내일 일정은 내일 날짜의 pray later 항목으로 확정 때 만들어짐). 구글 캘린더 원본은 바꾸지 않음.
• 연결하지 않고 다음 단계를 누르면 그 단계는 숨겨지고, 오늘 순서 정하기 아래 📅 구글 캘린더 연결하기로 나중에 연결할 수 있음. 일정 단계 아래 캘린더 연결 해제는 토큰을 취소하고 단계를 숨김.
• iOS 사파리 등에서는 팝업이 막힐 수 있어 그때는 "팝업이 열리지 않았어요. 버튼을 눌러 연결해 주세요"가 뜸(버튼을 직접 누르면 열림).

항목 이동 연출

항목을 다른 보드로 옮길 때(hover 아이콘 줄의 이동 버튼, waiting의 ←, 날짜 지정/지우기로 pray later를 오갈 때, focus 모드의 "대기중으로 변경") 같은 규칙으로 연출함. 완료/취소선 연출은 별개라 여기서 다루지 않음. 데이터는 곧바로 옮겨 저장되고(Ctrl+Z 가능), 화면 갱신만 출발 자리가 사라진 뒤에 일어남.

• 손댈 항목으로 옮길 때 (waiting/someday/pray later → gotta do): 도착 자리를 펼치고 스크롤해서 흔들어서 보여줌(검색 결과 이동과 같은 효과, 포커스는 주지 않음).
• 손대지 않을 항목이고 도착 자리가 지금 보일 때 (gotta do/waiting, 열어 둔 someday/pray later 중 화면 안): 출발 자리는 0.2초 동안 옅어지며 접히고(아래 항목이 미끄러져 올라옴), 도착 자리에서 장난기 있는 흔들림(항목 전체가 가운데를 축으로 살짝 커졌다 5도씩 잦아들며 흔들림, 0.7초).
• 도착 자리가 안 보일 때 (접힌 someday/pray later, waiting의 ⋯, 7일째부터인 pray later, 월급루팡 뒷면, 모바일에서 화면 밖 등): 출발 자리는 0.4초로 더 길게 사라지고, 하단 알림으로 "someday로 옮겼어요"(보드 이름) 안내.
• 모션 곡선은 style.css의 --ease-ui(작은 상태 전환·패널·취소선 등 기본 ease)와 --ease-emphasized(펼침·나타남·안착, 빠르게 출발해 천천히 안착) 두 가지로 모아 씀(시간이 일정하게 흐르는 linear 2곳과 흔들림/뒤집기용 직접 만든 곡선 4곳은 예외).
• 흔들림 세기/길이는 style.css의 --wiggle-deg(5deg), --wiggle-scale(1.04), --wiggle-dur(0.7s)로 조정. prefers-reduced-motion이면 사라지는 연출 없이 바로 갱신됨.

완료 확인 & 되돌리기

• 미완료 하위 항목이 남은 상위 항목을 완료하려 하면 확인 모달이 뜸 — "모두 완료"를 누르면 남은 하위 항목도 함께 완료 처리하고, "취소"/Esc/바깥 클릭이면 아무것도 바꾸지 않음. 하위 항목을 전부 끝내도 상위 항목이 자동으로 완료되지는 않고, 완료한 상위 항목을 되돌려도 하위 항목의 완료 상태는 그대로 남음.
• focus mode에서 "완료로 표시" 를 누르면 확인 없이 하위 항목까지 전부 완료함(전체를 끝내려고 타이머를 켠 것이므로).
• 모달은 브라우저 기본 confirm() 대신 앱 스타일이고, 부모 항목의 왼쪽 위 모서리에 맞춰 뜨며 뒤 화면은 focus mode처럼 흐려짐. 클라우드 데이터를 불러올지 묻는 확인도 같은 모달을 씀(이건 항목 기준 위치가 없어 가운데).
• Ctrl+Z / Ctrl+Shift+Z(또는 Ctrl+Y) — 되돌리기/다시 실행. 저장되는 모든 변경(완료·삭제·이동·이름 수정·하위 항목·날짜·긴급 등)이 대상이고 최근 10번까지만 기억함. 기록은 메모리에만 있어 새로고침하면 사라지고, 클라우드에서 데이터를 통째로 받아오거나 충돌을 병합할 때도 비워짐. 되돌리면 화면 아래에 "되돌렸어요" 안내가 잠깐 뜸. 입력창에 포커스가 있을 때(글자 되돌리기는 브라우저 기본 동작), focus mode 카운트다운 중, 모달이 떠 있을 때는 동작하지 않음. 키보드가 없는 모바일에는 버튼이 없음.
• 스크롤바는 페이지·리갈패드 모두 화면에서 숨김(휠/터치/키보드 스크롤은 그대로).

키보드 단축키

어디서나 (입력창/textarea에 포커스가 없을 때만)

키	동작
n	today 새 항목 입력창 포커스
w	waiting 새 항목 입력창 포커스. lupin mode가 보이는 중이면 한 번은 waiting으로 복귀만, 그 뒤로 또 누르면 waiting 입력창까지 포커스
s	someday 새 항목 입력창 포커스
d	done 아카이브(리갈패드) 패널 열기/닫기 토글
/	검색 패드 열기(검색창에 바로 포커스)
l	waiting 스티키가 waiting 화면이면 lupin mode로 뒤집기만. lupin mode가 이미 보이는 중이면 그 자리에서 바로 lupin 새 항목 입력창 포커스
t	gotta do 카드가 리스트 화면일 때만 focus mode(할 일 고르는 단계)로 전환. 이미 focus mode면 무동작
Ctrl+K / Cmd+K	검색 패드 열기 — 입력창에 포커스가 있어도 동작(브라우저 기본 동작은 막음)
Ctrl+Z	되돌리기 (최근 10번). 위 "완료 확인 & 되돌리기" 참고
Ctrl+Shift+Z / Ctrl+Y	다시 실행

focus mode가 카운트다운(또는 종료 후 결과 선택) 중일 때는 위 단축키(n/w/s/d/l/t)를 포함한 모든 키보드 단축키가 꺼짐 — 화면에 뜬 버튼을 마우스로 눌러야만 빠져나갈 수 있음. 할 일/시간을 고르는 선택 단계에서는 평소처럼 다 작동하되, n만 예외로 focus mode를 닫고 today 입력창에 포커스함.

l/w는 시간 간격이 아니라 "지금 어느 면이 보이는 중인가" 상태로 판단함 — 예전엔 ll/ww처럼 짧은 시간 안에 두 번 눌러야 포커스까지 갔는데, 한글 입력기가 켜져있으면 자판 전환 때문에 키 입력 간격이 벌어져서 더블탭으로 안 잡히는 경우가 있어 시간 기준을 없앴음. 이 단축키들 전부 물리 키(e.code) 기준으로도 감지함 — e.key로 비교하면 한글 입력기가 켜져있을 때 물리적으로 같은 자리를 눌러도 자모가 들어와서 단축키가 아예 안 먹는 문제가 있어서, 아래 Alt+D/Alt+E와 같은 방식으로 통일함.

각 보드 새 항목 입력창 안에서

키	동작
Enter	입력한 텍스트를 새 항목으로 등록 (마우스로는 옆의 + 버튼을 클릭 — 텍스트가 있으면 등록, 비어있으면 입력창에 포커스만)
Shift+Enter	입력한 텍스트를 새 항목으로 등록하고, 곧바로 그 항목의 하위 항목 입력을 열어서 포커스(이어서 하위 항목을 치고 Enter로 계속 추가 가능)
Alt+D	아직 입력창에 등록 안 하고 치고 있던 텍스트가 있으면 Shift+Enter처럼 먼저 그걸 상위 항목으로 등록한 다음(없으면 이번 세션에 그 입력창으로 마지막에 등록한 항목), 그 항목의 날짜 피커 오픈 (waiting에서는 "회신 예정일" 피커)
Alt+E	위와 동일하게 먼저 등록/대상 지정한 다음, 그 항목의 긴급(urgent) 표시 토글
Alt+T	gotta do 카드에 그려지는 항목(호버 시 🍅 아이콘이 뜨는 항목)이면 그 항목을 곧장 선택한 채로 focus mode 시간 선택 단계로 진입

Alt+D/Alt+E는 일반 타이핑(대문자 D/E 포함)과 절대 겹치지 않도록 Shift 대신 Alt를 씀 — 물리 키(e.code) 기준으로 감지해서 키보드 레이아웃과 무관하게 동작.

이미 등록된 상위 항목의 이름을 고치는 중에

키	동작
Enter	수정 확정
Shift+Enter	수정한 이름을 확정하고, 곧바로 그 항목의 하위 항목 입력을 열어서 포커스(새 항목 입력창의 Shift+Enter와 같은 규칙)
Esc	수정 취소
Alt+D / Alt+E	수정을 확정하고 날짜 피커 열기 / 긴급 토글

새 항목 입력창에 마우스로 미리 날짜/긴급/하위 항목 정해두기

각 새 항목 입력창(today/waiting/someday/lupin)에 마우스를 올리면(또는 입력창에 포커스하면) 기존 task-item과 똑같은 모양의 !(긴급)/+(하위 항목)/📅(날짜, waiting에서는 "회신 예정일") 아이콘이 나타남. 아직 등록 전인 상태에서 이걸로 긴급 여부·날짜·하위 항목 여러 개를 미리 정해두고, Enter나 + 버튼으로 등록하면 그 설정이 전부 적용된 채로 한 번에 만들어짐(today/someday에서 날짜를 지정하면 바로 pray later...(scheduled)로 들어가고, waiting에서는 회신 예정일로만 저장되어 waiting에 남음). 등록하고 나면 다음 입력을 위해 전부 초기화됨.

날짜 피커(📅 버튼으로 열리는 date input)에는 달력을 직접 펼치지 않고 바로 찍을 수 있는 "내일" 버튼이 있음 — 내일 날짜로 지정하는 경우가 잦아서 추가함. 완료 아카이브의 "↻ 또 하기" 모달의 날짜 칸에도 동일하게 있음.

데이터 저장 & 동기화

• 기본은 브라우저 localStorage(게스트 모드, 기기별로 로컬 저장).
• Google 로그인 시 Supabase(postit_data 테이블, 로그인한 유저 id로 자기 자신의 행에만 접근)에 동기화됨. 로그아웃하면 다시 로컬 전용으로 동작.
• 항목마다 마지막으로 바뀐 시각(updatedAt)을 저장 때 찍어 두고, 두 기기의 같은 항목이 충돌하면 더 나중에 바꾼 쪽이 이김(예: 한 기기에서 완료한 뒤 다른 기기에서 Ctrl+Z로 되돌리면 되돌린 쪽이 유지됨). 시각이 없거나 같으면 예전 규칙(아카이브 > 완료 > 진행 중)으로 판단. 두 기기의 시계가 크게 어긋나면 판단이 틀릴 수 있고, 한쪽에서 지운 항목이 다른 쪽에서 되살아날 수 있는 한계는 그대로임.
• 자세한 저장 데이터 구조는 SCHEMA.md 참고.

개발

빌드/설치 과정 없음 — index.html을 브라우저로 열거나 아무 정적 서버로 서빙하면 끝(예: python3 -m http.server).