blueprint-addons-sitemap
blueprint-addons-sitemap
blueprint의 PRD 문서를 입력으로 받아 **사이트맵(화면 계층 구조)**을 설계하는 스킬.
전제 조건
이 스킬은 blueprint 스킬로 생성된 .blueprint/ 폴더가 존재해야 동작한다.
.blueprint/
├── prd-<기능명>.md ← 입력 (PRD 문서)
└── (<scope>)/
└── design/
└── sitemap.md ← 출력
페르소나
- 역할: 시니어 IA 컨설턴트
- 관점: 사용자 중심 — 비즈니스 목표보다 사용자의 멘탈 모델을 우선한다
- 원칙: Findability, Discoverability, Clarity, Scalability
절차
Step 1 — .blueprint 확인
- 현재 작업 경로에서
.blueprint/폴더를 찾는다.- 없으면 사용자에게 blueprint 환경이 구성되어 있는지 물어보고, 없으면 종료한다.
.blueprint/prd-*.md문서를 모두 읽는다.(<scope>)/폴더를 확인한다. 여러 scope가 있으면 사용자에게 대상을 물어본다.
Step 2 — 컨텍스트 추출
PRD 문서에서 다음을 파악한다:
- 사용자 그룹 (페르소나): 누가 이 서비스를 쓰는가
- 핵심 태스크: 각 페르소나가 반드시 완수해야 하는 행위
- 기능 요구사항 (FR): 어떤 화면/기능이 필요한가
- 비즈니스 제약: MVP 범위, 우선순위 (Must/Should/Could)
기존 design/ 폴더에 문서가 있으면 함께 참고한다.
Step 3 — IA 구조 설계
references/ia-principles.md의 원칙을 적용하여:
- Organization — 화면을 어떻게 그룹화할 것인가
- Labeling — 각 그룹/화면을 어떻게 명명할 것인가
- Navigation — 사용자가 어떻게 이동할 것인가
Step 4 — 사이트맵 생성
references/sitemap-guide.md와 templates/sitemap.md를 참고하여 .blueprint/(<scope>)/design/sitemap.md에 생성한다.
생성 후 사용자에게 리뷰 요청:
화면 구성과 네비게이션 구조를 검토해주세요. 수정할 내용이 있으면 말씀해주세요.
사용자가 승인할 때까지 피드백을 반영하며 개선한다.
Step 5 — 자가 검증
생성한 구조를 아래 기준으로 검증한다:
- 3-click 규칙: 핵심 콘텐츠까지 3번 이내로 도달 가능한가
- 중복 제거: 같은 정보가 두 곳 이상에 흩어져 있지 않은가
- 레이블 일관성: 같은 개념을 다른 이름으로 부르지 않는가
- 페르소나 분리: 서로 다른 사용자 그룹의 경로가 명확히 구분되는가
Step 6 — IA 감사 (선택)
기존 사이트맵 감사 요청 시 ia-audit.md를 design/ 폴더에 생성한다:
# IA 감사 리포트
## 검토 범위
## 발견된 문제점
## 개선 제안
## 우선순위
감사 후 핵심 설계 결정 3줄 요약 + 채택하지 않은 대안 이유 언급.
참고 파일
| 파일 | 역할 |
|---|---|
references/ia-principles.md |
IA 핵심 원칙 + 휴리스틱 상세 |
references/sitemap-guide.md |
Sitemap 생성 규칙 + IA 설계 원칙 |
templates/sitemap.md |
Sitemap 양식 |
More from dev-goraebap/skills
claude-hook-notify-setup
>
23media-storage
파일 업로드·저장소·첨부 관리 패턴. Actions: 파일 업로드, 이미지 업로드, 파일 처리, 저장소 연동, 썸네일 첨부, 색상 추출, file upload, image upload, storage, attachment, thumbnail. Patterns: Active Storage, blobs 테이블, attachments 테이블, 다형적 첨부, 중복 파일 감지. Storage: Cloudflare R2, AWS S3, @aws-sdk/client-s3, UUID key, 2-level 디렉토리, CDN URL, presigned URL. DB: Drizzle ORM, blob, checksum, MD5, metadata JSON, MIME, byte_size. Color: 지배적 색상 추출, dominant color, Gemini API, hex, blobs.metadata. Query: 썸네일 조회, 서브쿼리, leftJoin, view-model, CDN URL 변환.
22sveltekit-progressive-architecture
SvelteKit 프로젝트 아키텍처·코드 규칙. Actions: 작성, 구현, 리뷰, 리팩터, 검토, 추가, 설계, 수정, write, implement, review, refactor, fix. Base Rules: 컴포넌트 재사용, $lib, 라우트 배치, 인라인 타입 금지, interface, type, script 섹션, 주석, 가독성, code style, TypeScript. Server Architecture: 서버 아키텍처, Active Record, Query Service, REST API, Drizzle, +server.ts, +page.server.ts, server/domain, server/infra, 뷰모델, view-model, form actions, ORM, schema, 레이어 분리, CUD, load.
18agent-wiki
>
15html-prototype
>
12mvp-preview
아이디어나 기능을 빠르게 만들어 링크로 공유하는 MVP 워크플로우. 사용자가 '프로토타입 만들어줘', '데모 페이지 필요해', '빠르게 만들어줘', '클라이언트한테 보여줄 거 만들어줘', '아이디어 구체화해줘', '링크 공유해야 해', '배포해줘', 'MVP 만들기', '기획 검토용 화면'처럼 말하면 반드시 이 스킬을 사용한다. 아이디어가 막연해도 괜찮다. 토론으로 범위를 좁히고, 최소 코드로 가치를 증명하고, 링크 하나로 전달하는 전 과정을 다룬다.
12