전략지도 (go_flow)

아이디어를 마인드맵처럼 뻗어 나가게 그리되, 시도 → 성공/실패를 상태로 기록하는 excalidraw 감성의 개인용 전략 캔버스.

마인드맵은 아이디어만 남고, 칸반은 결과만 남는다. 전략지도는 계보(무엇에서 파생됐나)와 결과(해봤더니 어땠나)를 한 장의 지도에 함께 남긴다. 실패한 가지는 자라기를 멈추고, 성공한 가지에서 다음 작업이 뻗어 나간다.

핵심 규칙

• 박스 상태는 체크박스처럼 4종 — 아이디어(흰) · 시도 중(노랑) · 성공(초록) · 실패(회색 빗금). 언제든 전환할 수 있다.
• R1 — 실패는 자라지 않는다: 실패 상태인 동안 파생이 잠긴다(⊘). 상태를 되돌리면 다시 자란다.
• R2 — 실패는 지우지 않는다: 실패 가지는 지도에 남고, 회고 메모가 자산이 된다.
• R3 — 지도는 내 것: 데이터는 브라우저(localStorage)와 내보낸 JSON 파일에만 존재한다. 서버 전송 없음.

기능

• 무한 캔버스 — 드래그 팬, 휠 줌(커서 기준), 손그림 룩(나눔 펜 스크립트)
• 박스 — 더블클릭 생성/편집, 드래그 이동, 상태 토글, 회고 메모 스티키
• 구간 프레임 — 자유 배치 배경 표식(이름표 드래그·리사이즈), 박스를 소유하지 않음
• 화살표 — 파생(＋ 핸들/Tab, 자동 연결)과 수동 연결(L), 클릭 선택 후 Delete 로 삭제
• 지도 여러 장 + 홈 목록(성공·시도·실패 개수 요약)
• 자동 저장(디바운스) + JSON 내보내기/불러오기

실행

pnpm install
pnpm dev        # http://localhost:3000

검사·빌드: pnpm typecheck · pnpm lint · pnpm build && pnpm start

단축키

키	동작
N / 더블클릭	새 박스
Z	새 구간
Enter	제목 편집
Tab	파생 박스
1 2 3	시도 중 · 성공 · 실패 토글
M	메모
L	연결(화살표 잇기)
Del / Esc	선택 삭제 / 해제

데이터 저장 — 알아둘 것

localStorage 는 브라우저 × 기기 × 도메인 단위다.

• 다른 브라우저·다른 PC·다른 도메인(localhost ↔ 배포 주소)에서는 서로 다른 저장소 — 옮길 땐 JSON 내보내기 → 불러오기를 쓴다.
• 브라우저의 "사이트 데이터 삭제"를 하면 지도가 사라진다. 중요한 지도는 내보내기로 백업해 둘 것.
• 서버·계정이 없으므로 배포해도 정적 페이지만 서빙된다 (예: Vercel).

문서

정책·스펙의 SoT 는 docs/ 의 md 문서들이다 (AI 가 작성·동기화): 원페이저 · PRD-전략지도 · IA-현행화 · 운영-가이드 · 화면 시안 — 색인은 _manifest.md

기술 스택

Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS v4 · Zustand — 코드 규약은 CLAUDE.md 참조.