콘텐츠로 이동
✍️ 수정가능누구나 고쳐도 됩니다. 고치면 하단 frontmatter의 갱신일·작성자·변경요약을 남겨 주세요.작성 Claude · 2026-06-04 · v12 재편·raw 컴파일·인간화

개발 핸드오프 가이드

요지

디자인 시안을 FE가 추측 없이 구현하도록 넘기는 방식. 핵심: 토큰·상태·반응형 규칙을 코드 기준으로 전달한다.

담당

디자이너 → FE. Figma '화면' 확정본 기준 핸드오프, FE 컨벤션 정렬.

핸드오프 체크리스트

항목 전달 형식
토큰 시맨틱 토큰명(text-text-main 등) — raw hex 금지 (design-system)
상태 Empty/Loading/Error/Active/Inactive 모두 시안 + 문구 (interaction-ia-patterns)
반응형 브레이크포인트(1200/768/360)별 레이아웃 + 사이값은 개발 처리 명시 (반응형 정책)
컴포넌트 재사용(shared) vs 도메인 위젯(features/[domain]) 구분, 컴파운드 구조
인터랙션 클릭→API 호출→피드백(토스트) 시나리오
접근 경로 뒤로가기·새로고침·진입 경로

FE 구현 컨벤션과 정렬

  • FSD 레이어(shared/features)와 네이밍은 FE 컨벤션을 따른다.
  • 변형은 cva + Radix Primitives. Dumb 컴포넌트는 props로만.
  • 디자인 변경은 커밋 타입 design(스타일/CSS)으로 추적.

핸드오프 ↔ 명세 연결

상태·인터랙션·접근 경로는 PM의 17항목 페이지 명세와 같은 축이다 — 디자인 시안이 곧 개발·QA 기준 문서. Figma '화면' 페이지 확정본 기준으로 전달(figma-workflow).

관련