클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
목록으로

ClaudeMap 런타임 (레포 아키텍처 맵)

코드베이스를 스냅샷해 실시간 아키텍처 그래프로 렌더링하고, 그 맵을 따라 코드 설명·발표까지 진행하는 런타임 스킬입니다.

개발·코딩중급28516AI 점수 9/10마지막 업데이트: 2026. 4. 20.

무엇을 해주나

  • 대상 프로젝트 루트를 스캔해 원시 스냅샷 JSON을 생성합니다(snapshot.js).
  • @claudemap-architect 서브에이전트에게 스냅샷을 넘겨, 사람이 읽기 쉬운 시스템 단위로 묶인 상세 그래프 JSON을 받아옵니다.
  • 받은 그래프를 번들된 ClaudeMap UI(Vite 앱)로 렌더링하고, 코드 변경 시 /refresh로 그래프를 갱신합니다.
  • 특정 서브시스템만 떼어낸 스코프 맵 생성(/create-map), 가이드 워크스루(/explain), 하이라이트·포커스 연출(/show)을 지원합니다.
  • 아키텍트 패스가 실패하면 휴리스틱 그래프로 몰래 대체하지 않고 중단하도록 규정되어 있어 캐시 오염을 막습니다.

이런 분께 추천

  • 처음 인수받은 레거시 레포의 전체 구조를 빠르게 파악해야 하는 개발자
  • 신규 입사자 온보딩이나 코드 리뷰 세션에서 아키텍처를 화면으로 보여주고 싶은 팀 리드
  • 리팩터링 전후 시스템 경계 변화를 시각적으로 비교하고 싶은 아키텍트

활용 예시

  1. /setup-claudemap ~/work/my-api — 해당 레포의 아키텍처 맵을 처음 생성하고 UI를 띄웁니다.
  2. /create-map 인증 관련 모듈만 — 루트 그래프에서 인증 서브시스템만 뽑아 내부 구조를 더 세밀하게 분해한 맵을 만듭니다.
  3. /refresh/explain — 코드 변경분을 반영해 그래프를 갱신하고, 맵을 따라가며 요청 흐름을 단계별로 설명받습니다.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/QuinnAho/claudemap/HEAD/skill/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 QuinnAho/claudemap 의 skill 폴더를 내 ~/.claude/skills/claudemap-runtime/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/QuinnAho/claudemap.git ~/.claude/skills/claudemap

제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. Node.js가 설치되어 있는지 확인합니다(node -v). 번들 UI가 Vite 기반이라 Node 18 이상을 권장합니다.
  2. 터미널에서 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  3. 저장소를 통째로 클론합니다: git clone https://github.com/QuinnAho/claudemap.git ~/.claude/skills/claudemap
    • SKILL.md만 복사하면 동작하지 않습니다. skill/commands/*.js, skill/prompts/*, app/ 폴더가 모두 필요합니다.
  4. 저장소에 포함된 .claude/agents/claudemap-architect.md.claude/commands/*.md를 프로젝트 또는 사용자 설정으로 함께 복사합니다(README 안내 우선).
  5. 필요한 의존성을 설치합니다: cd ~/.claude/skills/claudemap && npm install
  6. Claude Code를 재시작한 뒤 분석하려는 프로젝트에서 /setup-claudemap을 실행합니다.
  7. 맵이 뜨면 "이 맵이 맞나요?" 질문에 수정 요청을 넣어 그래프를 다듬습니다.