산출물 소개컨셉·메뉴만 입력하면
컨셉·메뉴만 입력하면
이 6가지가 자동으로 나와요
각 산출물이 어떤 역할을 하는지, 실제로 어떻게 생겼는지 샘플과 함께 소개해요.
01
메뉴 구조
사이트 전체 메뉴를 트리로 정리해 정보구조(IA)의 뼈대를 잡아요. 어떤 메뉴 아래 어떤 화면이 들어가는지 한눈에 확정할 수 있어, 기획의 출발점이 됩니다.
PPT 다운로드엑셀 다운로드
사이트 전체
홈
메인 홈
상품
상품 목록상품 상세
마이
로그인마이페이지
02
IA · 화면 목록
메뉴별로 필요한 화면을 자동으로 뽑아 목록으로 정리해요. 화면ID·화면명·기능정의·버튼 이동·AI 생성 프롬프트까지 화면 단위로 담겨, ‘무엇을 만들지’가 확정돼요.
엑셀 다운로드
화면ID화면명유형
PCHOME0110메인 홈콘텐츠
PCPROD0110상품 목록UI/UX
PCPROD0210상품 상세기능
03
기능정의서
사이트에 필요한 요건을 업무 · 기능 · 구성 계층으로 분해하고, 유형(기능·콘텐츠·UI/UX·정책)을 붙여 정리한 요구사항 정의서예요. 실무 문서 형식 그대로 내려받을 수 있어요.
엑셀 다운로드
ID업무기능구성유형
01-01-01상품상품 목록3열 그리드 표시UI/UX
01-01-02카테고리 필터UI/UX
02-01-01회원로그인약관 동의정책
04
FLOW · 흐름도
화면과 화면 사이의 이동을 다이어그램으로 그려요. 어느 화면의 어떤 버튼을 누르면 어디로 가는지, 사용자 동선을 한눈에 볼 수 있어요.
HTML 다운로드draw.io 다운로드
메인 홈
상품 목록
상품 상세
장바구니
05
WBS · 일정
화면(작업)별 제작 일정을 정리해요. 전체 일정을 입력하면 화면 수에 맞춰 일정 초안을 자동으로 나눠주고, 손으로 조정한 화면은 그대로 유지돼요.
엑셀 다운로드
메인 홈
상품 목록
상품 상세
06
AI 빌드 스펙팩
위 모든 걸 한 벌로 정리한 마크다운·JSON이에요. 이 파일을 Claude Code·Cowork 같은 AI 코딩 도구에 그대로 넘기면, 화면 구성·이동·화면별 지시가 확정된 상태로 사이트가 만들어져요.
마크다운 다운로드JSON 다운로드
# 반려동물 쇼핑몰 — AI 빌드 스펙팩
## 화면별 스펙
### PCPROD0110 · 상품 목록
- 버튼 → 이동화면:
- `상품 선택` → `PCPROD0210`
- 생성 프롬프트:
좌측 필터, 우측 3열 상품 그리드...