/design-handoff

디자인 핸드오프 패키지를 생성하여 handoff/ 디렉토리에 저장한다.

트리거

사용자가 특정 페이지나 컴포넌트에 대한 디자인 핸드오프를 요청할 때 실행한다.

입력

사용자에게 다음을 확인한다:

  1. 대상: 핸드오프할 페이지 또는 컴포넌트 (예: "로그인 페이지", "테이블 컴포넌트")
  2. 프로젝트: 대상이 속한 프로토타입 프로젝트 (예: prototypes/sokind-admin)

절차

Step 1. 소스 코드 분석

  • 대상 페이지/컴포넌트의 소스 코드를 읽는다
  • 사용된 컴포넌트, 디자인 토큰, 에셋을 파악한다
  • globals.css에서 사용된 Design System 토큰의 실제 값을 확인한다

Step 2. Visual Specs 작성

  • 레이아웃: 전체 구조, 컨테이너 크기, 정렬 방식
  • 측정값: 모든 요소의 width, height, padding, margin, gap
  • Typography: 사용된 typo-* 토큰과 실제 스펙 (font-size/line-height/weight)
  • Color: 사용된 시멘틱 컬러 토큰과 실제 값
  • Spacing: 사용된 간격 값 (4px 배수 확인)
  • Border/Radius: 모서리, 테두리 스타일

Step 3. Interaction Specs 작성

  • 상태 정의: Default, Hover, Active, Focus, Disabled, Loading, Error 등
  • 상태 전이: 어떤 조건에서 어떤 상태로 변경되는지
  • 애니메이션: 트랜지션, 애니메이션 효과
  • 반응형: 브레이크포인트별 동작 차이

Step 4. 에셋 목록

  • 이미지 파일 (경로, 형식, 크기)
  • 아이콘 (라이브러리, 이름, 크기)
  • 폰트 (패밀리, 로드 방식)

Step 5. QA 체크리스트

카테고리별 체크리스트 작성:

  • 레이아웃 & 반응형
  • 인터랙션 & 상태
  • Typography & Color (Design System 토큰 준수)
  • 접근성 (label, aria, keyboard, focus)

Step 6. 구현 참고사항

  • 외부 의존성
  • 목업 데이터 (있는 경우)
  • 알려진 제한사항
  • 추후 교체/연동 필요 항목

출력

저장 경로 (필수)

1{프로젝트 베이스 경로}/handoff/{파일명}.md
  • 프로젝트 베이스 경로: 대상이 속한 프로토타입의 루트 (예: prototypes/sokind-admin)
  • 파일명: 대상을 kebab-case로 표현 (예: login-and-terms-agreement.md)
  • handoff/ 디렉토리가 없으면 자동 생성한다

예시

1prototypes/sokind-admin/handoff/login-and-terms-agreement.md
2prototypes/sokind-admin/handoff/manage-users-table.md
3prototypes/sokind-admin/handoff/create-training-form.md

문서 구조

1# 디자인 핸드오프: {대상명}
2> 핸드오프 버전: v1.0 | 생성일: {날짜}
3> 소스: {소스 파일 경로}
4
5## 1. 페이지/컴포넌트 개요
6## 2. Visual Specs — 레이아웃 & 측정값
7## 3. Visual Specs — 상세 요소
8## 4. Interaction Specs — 상태 & 동작
9## 5. Design System 토큰 요약
10## 6. 에셋 목록
11## 7. QA 체크리스트
12## 8. 구현 참고사항