Screen Spec Mockup Ko

기본 워크플로우

1. 목표를 화면 문제로 번역한다

• 사용자 목표, 핵심 시나리오, 주요 KPI, 필수 행동을 정리한다.
• 각 목표를 어떤 화면과 흐름이 담당하는지 매핑한다.

2. 사용자 플로우를 고정한다

• 시작 조건, 주요 분기, 성공 경로, 실패 경로를 정리한다.
• 한 플로우가 여러 화면을 건너면 화면 전환 조건을 적는다.

3. 화면 목록을 만든다

• 필수 화면, 선택 화면, 운영 화면으로 나눈다.
• 각 화면마다 목적, 주요 데이터, 주요 행동, 예외 상황을 적는다.

4. 컴포넌트와 상태를 정리한다

• 각 화면의 핵심 컴포넌트와 상태를 표로 정리한다.
• default, loading, empty, error, success, disabled 상태를 우선 검토한다.

5. 목업 초안을 만든다

• 텍스트 기반 구조 목업이나 간단한 섹션 블록 목업을 만든다.
• 구현과 QA가 바로 참조할 수 있게 정보 위계를 드러낸다.

6. 협업 전달물을 만든다

• 기획용: 화면 목적과 요구사항 범위
• 설계용: 데이터/상태/인터랙션 조건
• 구현용: 컴포넌트 구조와 예외 처리
• QA용: 화면별 체크리스트와 검증 포인트

출력 형식

• 프로젝트 목표 해석
• 사용자 플로우
• 화면 목록
• 화면별 상세 명세
• 컴포넌트/상태 표
• 텍스트 목업
• 구현 메모
• QA 체크포인트
• HANDOFF_PACKET

텍스트 목업 규칙

• 손그림 수준이어도 정보 위계가 드러나야 한다.
• 영역은 Header, Hero, Summary, Table, CTA, Drawer, Modal 같은 블록 이름으로 나눈다.
• 모바일 기준과 데스크톱 기준 차이가 크면 둘 다 적는다.

예시:

[Dashboard]
├─ Header: 서비스명 / 기간 필터 / 사용자 메뉴
├─ Summary Cards: MAU / Conversion / Error Rate
├─ Main Chart: 주간 추이 라인차트
├─ Insight Panel: 이상치 원인 요약 3건
└─ CTA: "원인 분석 열기"

협업 규칙

• multi-agent-manager-ko 흐름에서 화면이 필요하면 이 스킬을 먼저 붙인다.
• design-trend-agent-ko와 충돌 시, 구조와 상태 정의는 이 스킬을 우선한다.
• 구현 착수 전 architect-agent-ko, implementer-agent-ko, qa-agent-ko가 읽을 수 있는 수준으로 구체화한다.
• 게시용 시안이 아니라도 구현과 검증이 가능할 만큼 명확해야 한다.
• 결과는 기본적으로 multi-agent-manager-ko 또는 직접 지정된 다음 역할이 바로 쓸 수 있는 HANDOFF_PACKET으로 끝낸다.

품질 기준

• 최소 1개 이상의 사용자 플로우와 화면 목록이 있어야 한다.
• 화면별 목적, 주요 행동, 예외 상태가 빠지면 미완성이다.
• 목업 초안 없이 추상 설명만 있으면 미완성이다.
• QA 체크포인트가 없으면 전달 완료로 보지 않는다.
• 다음 역할이 바로 작업에 착수할 수 있는 next_prompt가 없으면 미완성이다.