핸드오프 가이드
Figma → 개발 전달을 위한 네이밍, 반응형, 접근성 기준입니다.
핸드오프 원칙
모든 토큰은 Figma Variables와 코드의 CSS 변수를 1:1로 매핑합니다. 컴포넌트는 상태별 variant로 구성하며, 개발 구현은 동일한 토큰 이름을 사용합니다. 최종 고객 안내 문구는 검토 보조로만 제공하고 담당자 확인을 통과해야 합니다.
토큰 네이밍 매핑
코드 토큰 ↔ Figma 변수
| 코드 토큰 | 용도 | Figma 변수 |
|---|---|---|
color/primary | 주요 액션, 브랜드 강조 | Primary/Base |
color/status/success | 동의 완료, 성공 피드백 | Status/Success |
radius/lg | 카드, 모달 (8px) | Radius/LG |
shadow/card | 카드 기본 elevation | Elevation/Card |
space/4 | 기본 간격 (16px) | Spacing/4 |
breakpoint/tablet | 태블릿 2컬럼 전환 | Layout/Tablet |
반응형 브레이크포인트
태블릿 우선 대응
Mobile
< 640px단일 컬럼, 하단 시트 모달, 사이드바 오버레이
Tablet
640 – 1024px2컬럼 그리드, 축소형 사이드바, 가로 스크롤 테이블
Desktop
> 1024px고정 사이드바, 3–4컬럼 그리드, 전체 테이블
접근성 체크리스트
- 모든 상태는 색상 외 아이콘·텍스트로도 구분
- 본문 최소 14px, 행간 1.5 유지
- 인터랙티브 요소 focus-visible 링 제공
- 아이콘 전용 버튼에 aria-label 지정
- 모달 Esc 닫기 · 배경 스크롤 잠금
- 명도 대비 WCAG AA 이상 준수
레이아웃 기준
기본 간격 단위4px 스케일 (4/8/12/16/24)
컬러 사용총 3–5색 · 상태색 별도
타이포local/system font stack
최대 콘텐츠 폭1400px 컨테이너
Dev Mode Handoff Evidence
제출 화면에서 확인 가능한 구현 근거
| Route | Evidence | Gate |
|---|---|---|
| /design-system | Variables, token naming, type scale, spacing table | route smoke |
| /components | Button, badge, input, loading, empty, error, modal variants | route smoke |
| /customers | CRM 상세 모달, 동의 경고, LLM 요약, next action | route smoke |
| /comparison | 18개 공급사, 숫자 정렬, 필터, 상태, disclaimer | route smoke |
| /assistant | 고객 요약, 비교 근거, 동의 누락, 메모 초안, 감사 로그 | route smoke |