Claude Code / Codex 플러그인: 에이전트가 코드베이스를 읽고, 각 모듈, 파일, 인터페이스에 평이한 설명을 덧붙이고 상호 호출 관계를 표시한 확대 가능한 인터랙티브 맵을 생성합니다. 프론트엔드와 백엔드가 서로 다른 저장소에 있을 경우에도 프론트엔드가 보낸 요청을 응답하는 백엔드 인터페이스와 매칭할 수 있습니다.
스타 수 809 (+44 / 24h)
이유
- "AI로 실행 가능한 앱을 만들었지만 작동 방식을 설명하기 어려운" 사용자를 대상으로 합니다: 하나의 페이지에서 시작해 그 뒤에 있는 컴포넌트, 요청, 서버 코드, 데이터 및 외부 서비스를 확인할 수 있으며, 맵에서 "환불이 고객 카드로 어떻게 처리되는가?"와 같은 질문을 하면 답변과 관련 부분만 포함된 소규모 맵을 받을 수 있습니다
- 진단 기능은 AI가 작성한 앱에서 흔히 발생하는 오류를 전문적으로 점검합니다: 코드에 하드코딩되거나 브라우저로 전송된 시크릿 키, 누구나 읽을 수 있는 Supabase 테이블, 공개된 Firebase 규칙, 위조 가능한 Stripe 콜백, 로그인 없이 접근 가능한 인터페이스 등을 확인하며 각각 복사하여 붙여넣을 수 있는 수정 방법을 제공합니다. "최근 변경 사항"에서는 에이전트가 방금 수정한 카드를 초록색으로 표시하고 그 이유를 명시합니다
- 스캔, 파싱, 요청 매칭 및 레이아웃은 의존성이 없는 Node 스크립트로 처리되며, 모듈 명명 및 설명은 Claude / Codex에 맡깁니다. 업데이트 시에는 변경된 부분만 다시 읽습니다. 코드가 아직 작성되지 않은 경우 PRD에서 점선으로 표시된 "청사진"을 그릴 수 있습니다
사용법
- Node.js 18 이상 필요; Claude Code:
claude plugin marketplace add haydenschmitty/floorplan후claude plugin install floorplan@floorplan; Codex:codex plugin marketplace add haydenschmitty/floorplan후codex plugin add floorplan@floorplan - 프로젝트에서 "Make me a floorplan of this app"이라고 말하면(Codex에서는
$floorplan입력 가능), 맵이floorplan/index.html에 생성되어 자동으로 열립니다. 코드 수정 후 "Update the floorplan"이라고 말하면 단일 HTML 파일로 내보내 다른 사람에게 공유할 수 있습니다 - 저자는 Brewline 예제 앱의 온라인 데모를 제공하므로 설치 없이도 먼저 클릭하여 살펴볼 수 있습니다
리스크
- 저자는 진단 기능이 감사(audit)가 아닌 점검(check)임을 명시합니다. 언어 및 프레임워크 지원 목록(TS/JS, Python, Go, Rust, Java 등, Express, FastAPI, Next.js, Spring 등)이 있으며, 목록 외 항목에 대한 지원은 제한적입니다
- 맵은 사용자의 Claude / Codex 할당량으로 생성되므로 별도의 API 키가 필요하지 않습니다. 버전 0.6.0, 라이선스 MIT, 저장소 생성일 10월 27일