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

# 디자인 방향·토큰

> "클린·미니멀" 같은 형용사 대신 레퍼런스의 구체적 DNA, 선택·거부 이유, 정확한 토큰 값을 고정한다. 외주에서는 여기에 하나가 더 붙는다: **시안 수정 라운드 횟수를 착수 전 계약으로 합의하고(예: 시안 2회), 라운드마다 발주사 승인 기록을 남긴다.** 라운드를 명시하지 않으면 "무한 수정"은 명시 안 한 쪽 책임이다 ([[SI 수주와 범위 관리]]).

## 기존 체계 확인

| 항목 | 값 |
|---|---|
| 발주사 디자인 표준·현행 시스템 UI | `{가이드·경로·버전 / 없음}` |
| 브랜드 원본 | `{발주사 CI/BI 가이드·로고 원본}` |
| 재사용할 토큰·컴포넌트 | `{항목}` |
| 변경해야 할 약속 | `{항목·이유·발주사 승인 필요}` |
| 새 raw 값 허용 여부 | `{금지 / 승인 조건}` |

## 시안 라운드 합의 (착수 전 계약)

| 항목 | 값 |
|---|---|
| 합의된 시안 제시 수 | `{예: 방향 시안 2~3안}` |
| 합의된 수정 라운드 | `{예: 선택안 기준 수정 2회}` |
| 라운드 1회의 정의 | `{피드백 취합 1회 → 반영본 1회 — 개별 이메일 건별 아님}` |
| 피드백 기한 | `{예: 전달 후 5영업일 — 무응답 시 승인 간주 여부}` |
| 초과 라운드 처리 | `CR 회부 — 영향(일정·비용) 산정 후 승인 시 진행` |
| 합의 근거 | `{계약·회의록 링크·일자}` |

## 레퍼런스 DNA

| 후보 | 출처·캡처 | 색·대비 | 타이포 | 레이아웃·여백 | 특징 요소 | 차용 / 금지 |
|---|---|---|---|---|---|---|
| A. `{브랜드}` | `{URL·파일·날짜}` | `{구체값}` | `{구체값}` | `{패턴}` | `{요소}` | `{결정}` |
| B. `{브랜드}` | `{값}` | `{값}` | `{값}` | `{값}` | `{값}` | `{값}` |
| C. `{브랜드}` | `{값}` | `{값}` | `{값}` | `{값}` | `{값}` | `{값}` |

## 시안 방향·발주사 선택 게이트

| 방향 | 한 문장 선언 | 주인공·주 액션 | 특징적 레이아웃 | 위험 | 시안 경로 | 판정·이유 |
|---|---|---|---|---|---|---|
| A | `{구체적 방향}` | `{요소}` | `{패턴}` | `{위험}` | `{파일}` | `선택/거부 — {발주사 이유}` |
| B | | | | | | |
| C | | | | | | |

## 라운드 기록

| 라운드 | 전달일 | 발주사 피드백(요약·원본 링크) | 반영·미반영과 이유 | 반영본 버전 | 승인·잔여 |
|---:|---|---|---|---|---|
| 시안 제시 | `{날짜}` | `{선택안·의견}` | `{값}` | `{v1}` | `{선택 확정}` |
| 수정 1 | `{날짜}` | `{값}` | `{값}` | `{v2}` | `{값}` |
| 수정 2 | `{날짜}` | `{값}` | `{값}` | `{v3}` | `{최종 승인 / CR 후보}` |

> 라운드 소진 후 추가 요청은 여기서 다투지 않는다 — 기록하고 PM에 CR 회부한다. "사소한 것" 10개가 일정 붕괴의 실체다.

| 승인 항목 | 값 |
|---|---|
| 선택 방향·브랜드 | `{값}` |
| 승인 시안·버전 | `{파일·프레임·날짜}` |
| 발주사 승인자·일시 | `{이름 · 날짜 — 서면/메일 근거}` |
| 봉인한 거부 방향 | `{방향·재사용 금지 포인트}` |
| 재검토 트리거 | `{CR 승인·브랜드 변경 등}` |

## 전역 CSS 토큰

| 토큰 | 정확한 값 | 용도 | 변경 승인 필요 | 대비·검증 |
|---|---|---|---|---|
| `--bg` | `#{hex}` | `{대면적 배경}` | `예` | `{결과}` |
| `--text` | `#{hex}` | `{본문}` | `예` | `{비율}` |
| `--accent` | `#{hex}` | `{주 액션 1곳}` | `예` | `{비율}` |
| `--sub` | `#{hex}` | `{보조 영역}` | `예` | `{비율}` |
| `--font-title` | `'{font}'` | `{제목}` | `예` | `{fallback}` |
| `--font-body` | `'{font}'` | `{본문}` | `예` | `{fallback}` |
| `--ls-heading` | `{값}em` | `{제목 자간}` | `예` | `{값}` |
| `--lh-heading` | `{값}` | `{제목 행간}` | `예` | `≤ 1.2 여부` |
| `--lh-body` | `{값}` | `{본문 행간}` | `예` | `≥ 1.6 여부` |

## 확장 토큰

| 종류 | 토큰 | 값 | 적용 범위 | 기존 토큰과 관계 |
|---|---|---|---|---|
| 간격 | `{--space-*}` | `{값}` | `{범위}` | `{alias/new}` |
| 모서리 | `{--radius-*}` | `{값}` | `{범위}` | `{값}` |
| 그림자 | `{--shadow-*}` | `{값}` | `{범위}` | `{값}` |
| 모션 | `{--duration-*}` | `{값}` | `{범위}` | `{reduced 대체}` |
| 계층 | `{--z-*}` | `{값}` | `{범위}` | `{값}` |

## 레이아웃 패턴

- 커밋 선언: `{예: 비대칭 2열, 왼쪽 7/12 콘텐츠·오른쪽 5/12 보조}`
- 최대 너비·거터: `{값}`
- 주 액션 위치·강조 규칙: `{값}`
- 카드·구분선·아이콘 사용 이유: `{업무·콘텐츠 근거}`
- 화면 전용 토큰: `없음 / {예외·승인자}`

## 컴포넌트 상태 토큰

| 컴포넌트 | Default | Hover | Focus | Active | Disabled | Error |
|---|---|---|---|---|---|---|
| `{Button}` | `{토큰}` | `{토큰}` | `{토큰}` | `{토큰}` | `{토큰}` | `{토큰}` |

## 구현 불변식

- 발주사 승인 시안의 색·폰트·spacing 값은 임의로 "비슷하게" 바꾸지 않는다 — 검수 시 시안 대조의 기준이다.
- 새 raw color·화면 전용 테마 진입점은 만들지 않는다.
- 값 변경이 필요하면 원본 토큰·영향 화면·발주사 승인자를 기록한다.
- 구현 후 대표 route 2~3개를 같은 viewport로 캡처해 승인 시안과 비교한다 — 검수 대응 증거로 보관.

## 다음 문서

- 접근성·반응형 검증: [[05_접근성·반응형 계획]]
- 실행 인계: [[99_디자인 핸드오프 템플릿]]