---
type: template
domain: product
role: UX·UI디자인
status: active
last-reviewed: 2026-07-27
---

# 화면·상태 명세

> 화면별 입력·데이터·행동과 기본·빈·로딩·오류·권한·복구 상태를 같은 계약에서 정의한다. 이 문서가 납품 문서 **화면정의서(스토리보드)**의 원본이다 — 화면정의서가 부실하면 "이 화면 이렇게 하기로 했나요" 분쟁과 재작업이 생긴다 ([[외주 개발 산출물]]). 상태 정의는 검수 시 테스트케이스와 1:1로 대응한다.

## 화면 목록

| Screen ID | 라우트·진입점 | 업무 목적 | 연결 Flow·요구 | 주 액션 | 보조 액션 | 권한 | 승인 시안 |
|---|---|---|---|---|---|---|---|
| `SCR-01` | `{/path}` | `{목적}` | `{FLOW-01 · FR-001}` | `{CTA 1개}` | `{행동}` | `{역할}` | `{파일·프레임·버전·발주사 승인일}` |

## 화면 상세

### SCR-01 — `{화면명}`

| 항목 | 명세 |
|---|---|
| 진입 전제 | `{권한·데이터·이전 상태}` |
| 사용자 질문 | `{이 화면에서 즉시 답해야 할 업무 질문}` |
| 주 정보·위계 | `{제목→핵심 데이터→행동 순}` |
| 데이터 입력 | `{필드·형식·길이·nullable·출처}` |
| 주 액션·결과 | `{행동 → 관찰 가능한 결과}` |
| 뒤로·취소·복귀 | `{경로·상태 보존}` |
| 로그·감사 기록 | `{기록 이벤트·시점·속성 — 발주사 감사 요구 반영}` |
| 관련 API·미결 | `{endpoint 또는 계약 필요}` |

## 상태 매트릭스

| State ID | 상태 | 진입 조건 | 보여줄 콘텐츠·카피 | 허용 행동 | 다음 상태·복구 | 연결 AC·TC |
|---|---|---|---|---|---|---|
| `SCR-01-S1` | 기본 | `{정상 데이터}` | `{콘텐츠}` | `{행동}` | `{상태}` | `{AC/TC ID}` |
| `SCR-01-S2` | 로딩 | `{요청 중}` | `{skeleton·진행 안내}` | `{취소 여부}` | `{성공/오류}` | `{AC/TC ID}` |
| `SCR-01-S3` | 빈 값 | `{항목 0개}` | `{첫 행동 안내}` | `{CTA}` | `{기본}` | `{AC/TC ID}` |
| `SCR-01-S4` | 오류 | `{실패 유형}` | `{원인 범위+다음 행동}` | `{재시도·문의}` | `{복구}` | `{AC/TC ID}` |
| `SCR-01-S5` | 권한 없음 | `{403·역할}` | `{이유·요청 경로}` | `{복귀·권한 요청}` | `{경로}` | `{AC/TC ID}` |
| `SCR-01-S6` | 완료 | `{성공}` | `{확인·다음 단계}` | `{계속·닫기}` | `{경로}` | `{AC/TC ID}` |
| `SCR-01-S7` | 오프라인·타임아웃 | `{조건}` | `{보존·재시도 안내}` | `{재시도}` | `{상태}` | `{AC/TC ID}` |

> 상태 매트릭스에 없는 상태는 검수 기준에도 없다. 검수일에 발견되는 "이 경우엔 어떻게 되나요"가 여기 빠진 행이다 — 착수 전에 채워 발주사와 합의한다.

## 입력·검증·오류 카피

| Field ID | 레이블 | 타입·형식 | 필수·제약 | 인라인 검증 시점 | 오류 메시지 | 복구 행동 |
|---|---|---|---|---|---|---|
| `FIELD-01` | `{현업 용어}` | `{타입}` | `{길이·허용값}` | `{blur/submit}` | `{무엇이 잘못됐고 어떻게 고치는가}` | `{행동}` |

## 상호작용

| Element ID | 요소·역할 | 기본 | Hover | Focus | Active | Disabled | 키보드·터치 |
|---|---|---|---|---|---|---|---|
| `UI-01` | `{button 등}` | `{값}` | `{값}` | `{표시}` | `{값}` | `{이유 표시}` | `{Enter/Space · 48px}` |

## 파괴적·비가역 행동

| 행동 | 위험 | 확인 방식 | 되돌리기·유예 | 권한 | 성공·실패 피드백 |
|---|---|---|---|---|---|
| `{삭제·발송·결제}` | `{손실}` | `{명시 확인·내용}` | `{undo/soft delete}` | `{역할}` | `{상태}` |

## 콘텐츠 스트레스 케이스

| 케이스 | 예시 입력 | 기대 동작 | 검증 화면·폭 |
|---|---|---|---|
| 긴 제목·이름 | `{실데이터 최대 길이 — 발주사 제공 데이터 기준}` | `{wrap/truncate+전체 보기}` | `{SCR · viewport}` |
| 빈 값 | `없음` | `{대체 텍스트}` | `{값}` |
| 다국어·숫자 | `{예시}` | `{레이아웃}` | `{값}` |
| 대량 항목 | `{N개 — 발주사 실운영 물량 기준}` | `{페이지·가상화}` | `{값}` |

## 구현·QA 인계

- 시안 기준 버전: `{파일·프레임·날짜·발주사 승인일}`
- 미정 API·데이터 계약: `{항목·Owner·기한}`
- Frontend가 바꾸면 재승인이 필요한 항목: `{토큰·흐름·카피}`
- QA가 반드시 실행할 상태: `{State ID}` — 테스트케이스에 반영
- 화면정의서 납품본 생성 기준: `{이 문서의 어느 버전을 어느 마일스톤에 제출하는가}`
- 다음 문서: [[04_디자인 방향·토큰]], [[05_접근성·반응형 계획]]