README는 아무도 안 읽음. 대신 Claude한테 지도를 그려달라고 하세요.
Nobody reads the README anymore. Make Claude draw you the map instead.
핵심 요약
긴 마크다운 문서 대신 Claude로 상호작용 가능한 HTML 지도를 생성해 코드 계획을 시각화하는 방법.
- 계획 시각화 — 텍스트 위주의 마크다운 대신 클릭 가능한 노드 기반의 HTML 지도를 생성함.
- 상호작용 기능 — API 엔드포인트, 캐싱 규칙, UI 컴포넌트 간의 연결을 직접 클릭하며 확인할 수 있음.
- 효율적 이해 — 복잡한 의존 관계를 한눈에 파악하여 문서 가독성을 획기적으로 개선함.
- 이중 활용 — 인간은 HTML로 계획을 이해하고, 에이전트는 마크다운으로 코드를 실행함.
AI에게 캐싱, API, 프론트엔드, 속도 제한 등을 포함한 계획을 세워달라고 요청해 보세요.
돌아오는 건 8개의 섹션, 200줄짜리 마크다운 덩어리입니다. 한 번 훑어보다가 두 계층 사이의 의존성을 놓치면, 결국 처음부터 다시 읽게 되죠.
계획은 텍스트가 아닙니다. 그래프여야 합니다.
똑같은 계획을 하나의 HTML 파일로 만들면 작업 방식이 바뀝니다. API 노드를 클릭해서 무엇이 호출되는지 확인하고, 속도 제한을 클릭해서 어떤 경로를 보호하는지 보고, 캐싱을 클릭해서 무엇이 무효화되는지 확인하세요. 모든 계층을 파고들 수 있고, 모든 연결이 눈에 보입니다.
캐싱 키 + 무효화 규칙, 전부 클릭 가능
API 엔드포인트 + 스키마 + 이를 사용하는 UI 컴포넌트
속도 제한 규칙 + 적용되는 경로 + 스토리지 백엔드
이 모든 것을 브라우저에서 열 수 있는 하나의 파일로
인간에게는 계획을 이해하기 위한 HTML을, 에이전트에게는 실행을 위한 마크다운을 제공하세요.



