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

# UX·UI디자인 기획 가이드

> UX·UI디자인은 현업 인터뷰와 요구사항정의서를 **메뉴구조도, 화면정의서(스토리보드), 비주얼 토큰, 접근성 계약**으로 바꿔 Frontend와 발주사 검수자에 인계한다. 산출물은 곧 납품 문서다 — 화면정의서·메뉴구조도는 [[외주 개발 산출물]]의 설계 단계 납품 목록에 들어가고, 검수·분쟁 시 "이 화면 이렇게 하기로 했다"의 증거가 된다.

## 미션

- 현업 인터뷰와 AS-IS 업무 분석을 TO-BE 업무 흐름·메뉴구조도·화면 흐름으로 구체화한다.
- 정상 화면뿐 아니라 빈·로딩·오류·권한·복구 상태를 함께 정의해 검수 시 "이 경우는 합의 안 했다" 분쟁을 막는다.
- 발주사가 승인한 디자인 시안을 정확한 토큰과 구현 가능한 핸드오프로 고정한다. 시안 수정 라운드 횟수(예: 시안 2회)는 착수 전 합의하고, 초과 요청은 [[SI 수주와 범위 관리]]의 CR 절차로 회부한다.

## 필수 입력

| 입력 | 확인할 내용 | 없을 때 처리 |
|---|---|---|
| RFP·현업 인터뷰 근거 | 주 사용 부서·역할, AS-IS 업무 처리 방식, 비대상 업무 | 가정 표시 후 현업 인터뷰 일정·질문 목록 작성, 발주사 지연 시 기록 |
| 요구사항정의서(SRS)·RTM | FR/NFR/OUT ID, 핵심 업무 흐름, 검수 기준 | PM에 모호함·누락을 ID로 반환 |
| 발주사 기존 시스템 | 현행 메뉴·화면·디자인 표준·용어 | 재사용/변경/폐기 결정을 분리해 발주사와 합의 |
| 기술·콘텐츠 계약 | API 상태, 권한, 데이터 길이·형식, 기존 시스템 연동 | Tech Lead·Frontend와 미결 계약 등록 |
| 디자인 기준·계약 조건 | 발주사 브랜드·UI 표준, 접근성 기준, 시안 라운드 횟수 | 착수 전 발주사 승인자와 기준·라운드를 먼저 합의 |

## 결정 순서

1. [[01_리서치·사용자 여정]]에서 현업 인터뷰 사실·인용과 해석을 분리하고 AS-IS 마찰·TO-BE 목표를 고른다.
2. [[02_정보구조·사용자 흐름]]에서 메뉴구조도, 진입·분기·완료·이탈·복구 경로를 정한다.
3. [[03_화면·상태 명세]]에서 화면정의서 단위로 데이터·행동·기본·빈·로딩·오류·권한 상태를 정의한다.
4. [[04_디자인 방향·토큰]]에서 시안 방향·발주사 승인·수정 라운드, 색·타입·간격·레이아웃 토큰을 고정한다.
5. [[05_접근성·반응형 계획]]에서 키보드·대비·모션·기준 폭별 동작과 검증법을 정한다.
6. [[90_UX·UI디자인 완료 체크리스트]] 통과 후 [[99_디자인 핸드오프 템플릿]]으로 Frontend에 인계한다.

## 파일 지도

| 파일 | 용도 | 주 소비자 |
|---|---|---|
| 현재 문서 | 역할 책임·입력·결정 순서 | UX·UI디자이너 |
| [[01_리서치·사용자 여정]] | 현업 인터뷰·AS-IS/TO-BE 업무 분석 | PM, UX·UI |
| [[02_정보구조·사용자 흐름]] | 메뉴구조도·진입·분기·실패·복구 경로 | PM, Frontend, QA |
| [[03_화면·상태 명세]] | 화면정의서(스토리보드) 원본 | Frontend, QA, 발주사 검수자 |
| [[04_디자인 방향·토큰]] | 승인 시안·라운드 기록·정확한 토큰 | Frontend, 발주사 승인자 |
| [[05_접근성·반응형 계획]] | WCAG·키보드·viewport 계약 | Frontend, QA |
| [[90_UX·UI디자인 완료 체크리스트]] | 구현 착수·발주사 승인 확인 | Reviewer, Approver |
| [[99_디자인 핸드오프 템플릿]] | `.state/design-handoff.md` 실행 계약 | Frontend, Tech Lead |

## 필수 산출물과 소비자 — 납품 문서 연결

| 산출물 | 납품 문서 대응 | 최소 내용 | 소비자의 행동 |
|---|---|---|---|
| 현업 인터뷰·AS-IS/TO-BE 분석 | 요구사항정의서의 근거 자료 | 인터뷰 증거, AS-IS 마찰, TO-BE 목표, 미확인 가정 | PM이 요구·범위를 보정, 발주사가 확인 |
| IA·흐름 | **메뉴구조도 / 프로그램 목록** | 메뉴 계층, 화면 전이, 실패·복구 | Frontend가 라우트·상태 설계, QA가 시나리오 작성, 검수 범위 산정 근거 |
| 화면·상태 명세 | **화면정의서(스토리보드)** | 데이터, 행동, 카피, 모든 핵심 상태 | Frontend가 추측 없이 구현, 발주사가 검수 기준으로 사용 |
| 방향·토큰 | 화면정의서 부속(디자인 가이드) | 승인 시안, CSS 변수, 레이아웃 원칙, 라운드 기록 | Frontend가 값을 그대로 이식, 추가 수정 요청은 CR 판단 근거 |
| 접근성·반응형 | 화면정의서 부속 + 테스트케이스 입력 | 기준 폭, 키보드, 대비, 모션, 검증법 | Frontend·QA가 동일 기준으로 확인 |

## 역할 경계

- UX·UI는 업무 흐름·화면 행동·비주얼 계약을 책임진다.
- 기능 범위·우선순위는 계약과 요구사항정의서를 따른다. PM·발주사 합의 없이 바꾸지 않는다.
- 범위 밖 화면·기능 요청이 발주사에서 오면 화면에서 거절하지 말고 PM에 **CR 회부**한다.
- API 응답·데이터 모델·기술 스택을 임의 확정하지 않고 의존성으로 표시한다.
- 디자인 검토자는 구현 코드를 직접 수정하지 않고 근거와 재디스패치 지시를 남긴다.
- 취향과 접근성·사용성 결함을 구분한다. 발주사 담당자의 취향 피드백은 라운드 안에서 처리하고, 차단급 결함과 섞지 않는다.

## 진입 게이트

- [ ] 주 사용 부서·역할과 핵심 업무가 현업 인터뷰 또는 RFP로 식별됐다.
- [ ] 설계 대상 요구 ID와 In/Out 범위가 있다.
- [ ] 발주사 기존 화면·디자인 표준·콘텐츠 원본을 확인했다.
- [ ] 발주사 승인자와 시안 수정 라운드 횟수(예: 2회)가 합의됐다.

## 종료 게이트

- [ ] 요구 ID가 업무 흐름→메뉴구조도→화면정의서→상태→테스트케이스까지 RTM으로 추적된다.
- [ ] 기본·빈·로딩·오류·권한·복구 상태가 빠짐없이 정의됐다.
- [ ] 발주사 승인 시안·라운드 기록·정확한 토큰·레이아웃 패턴이 고정됐다.
- [ ] 320~1440px, 키보드, 포커스, 대비, reduced motion 기준이 있다.
- [ ] Frontend가 이전 대화나 디자이너의 의도를 추측하지 않고 구현할 수 있다.
- [ ] 화면정의서·메뉴구조도가 **검수·계약 근거로 그대로 제출 가능한 상태**다 — 승인자·버전·날짜가 박혀 있다.

## 함께 읽기

- [[00_역할별 기획 허브]]
- [[00_역할별 기획 운영 가이드]]
- [[역할별 개발 산출물]]
- [[외주 개발 산출물]]
- [[SI 수주와 범위 관리]]
- [[유저 리서치 실전]]
- [[디자인-체크리스트]]