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

# 디자인 핸드오프 템플릿

> S-skills 실행 저장 경로: `docs/sj-company/.state/design-handoff.md`. 아래 필수 블록의 키·제목·변수명은 바꾸지 않는다. 핸드오프의 원본은 발주사가 승인한 시안·화면정의서다 — 여기 담긴 값이 검수 시 시안 대조의 기준이 된다.

## 런타임 필수 블록

```markdown
# Design Handoff
source: docs/sj-company/drafts/draft-{X}-{TS}.html
brand: {브랜드명}

## CSS 변수 (이 값을 한 글자도 바꾸지 말 것)
--bg: #{hex}
--text: #{hex}
--accent: #{hex}
--sub: #{hex}
--font-title: '{제목폰트}'
--font-body: '{본문폰트}'
--ls-heading: {값}em
--lh-heading: {값}
--lh-body: {값}

## 레이아웃 패턴
{승인된 커밋 선언의 레이아웃 줄 그대로}
```

## 프로젝트 인계 확장 블록

> 런타임 필수 블록 아래에 붙인다. 필수 키를 대체하지 않는다.

```markdown
## 기준·추적
- 요구·Flow·Screen ID: {FR / FLOW / SCR — RTM 추적 가능}
- 승인 시안·버전: {파일·프레임·날짜}
- 발주사 승인자·라운드: {이름·일시 · 사용한 수정 라운드 n/합의 라운드 N}
- 비교할 대표 route·viewport: {경로 · 320/375/768/1024/1440}

## 화면·상태 계약
| 화면 | 기본 | 로딩 | 빈 값 | 오류 | 권한 없음 | 완료·복구 |
|---|---|---|---|---|---|---|
| {SCR-01} | {화면정의서 링크} | | | | | |

## 접근성·반응형 계약
- 적용 기준: {WCAG/KWCAG·인증 여부 — 계약 근거}
- 키보드·포커스: {명세 링크·핵심 규칙}
- 대비·상태 전달: {토큰 조합·기준}
- reduced motion: {대체 동작}
- 기준 폭별 재배치·오버플로: {규칙}

## Backend·콘텐츠 의존성
- endpoint·payload·상태: {계약 또는 미결 Owner·기한}
- 실제 카피·데이터 길이: {발주사 제공 원본·미제공 시 기록}

## 구현 불변식
- {색·폰트·spacing·레이아웃 중 재승인 없이 변경 금지 항목}
- 새 raw color·route 전용 토큰: 금지
- 승인 시안과 다른 구현 요청은 CR 회부 대상으로 보고

## 검증
- 시안 비교: {방법·증거 경로 — 검수 대응 증거로 보관}
- 접근성: {명령·사람 절차 — 테스트결과서 입력}
- 미수행 검사: {없음 또는 이유·위험·발주사 합의 여부}

## 미결·후속
- {없음 또는 Owner·기한 — 발주사 지연이 원인이면 명시}
```

## 저장 전 확인

- [ ] `source`는 존재하는 승인 시안 경로다.
- [ ] `brand`와 발주사 CI/BI 원본이 일치한다.
- [ ] 필수 CSS 변수 9개에 실제 값이 들어갔다.
- [ ] 레이아웃 패턴은 승인 선언을 축약·의역하지 않았다.
- [ ] 상태·접근성·반응형 원본(화면정의서)을 Frontend가 찾을 수 있다.
- [ ] 발주사 승인 없는 변경과 미결이 숨겨지지 않았다.

## 계약 메모

- Frontend는 런타임 필수 블록의 색·폰트·spacing 값을 그대로 이식한다.
- 구현 후 디자인 리뷰 결과는 별도 `.state/design-review.md`에 남기며 이 파일을 판정 보고서로 덮어쓰지 않는다.
- 이 핸드오프와 화면정의서·승인 기록이 어긋나면 화면정의서(발주사 승인본)가 우선한다.