핸드오프 가이드

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 – 1024px

2컬럼 그리드, 축소형 사이드바, 가로 스크롤 테이블

Desktop

> 1024px

고정 사이드바, 3–4컬럼 그리드, 전체 테이블

Auto Layout constraints

Figma frame constraints와 실제 반응형 구현 기준

Frame	Desktop	Tablet	Constraint
App Shell	sidebar fixed 280px + content fill	sidebar collapse, content fill	left fixed / right fill
Dashboard cards	4 columns, equal height	2 columns, wrap	hug content title / fill container grid
Comparison table	sticky provider + horizontal overflow	sticky provider + scroll hint	provider fixed / data columns min-width
CRM modal	max 5xl, tab content fill	full-width modal, tablist scroll	top pinned header / body scroll
LLM workbench	context/generate/review 3 columns	stacked panels	panel fill, audit column below

접근성 체크리스트

모든 상태는 색상 외 아이콘·텍스트로도 구분
본문 최소 14px, 행간 1.5 유지
인터랙티브 요소 focus-visible 링 제공
아이콘 전용 버튼에 aria-label 지정
모달 Esc 닫기 · 배경 스크롤 잠금
명도 대비 WCAG AA 이상 준수

레이아웃 기준

기본 간격 단위4px 스케일 (4/8/12/16/24)

컬러 사용총 3–5색 · 상태색 별도

타이포local/system font stack

최대 콘텐츠 폭1400px 컨테이너

Accessibility matrix

화면별 접근성 handoff 기준

/comparisonPASS

숫자 표는 tabular numerals, 상태는 텍스트+색상 병행

/customersPASS

모달 labelledBy, 탭 role, 경고 텍스트 제공

/assistantPASS

LLM 제한 문구, 승인 게이트, 감사 로그 표시

/consentPASS

필수 동의 비활성 버튼, stepper, 철회 방법 안내

Visual QA matrix

스크린샷 evidence로 확인할 화면 품질 기준

Desktop 1440x1200

home, dashboard, comparison, assistant

hero product preview, table overflow, no overlap

Tablet 834x1112

dashboard, customers, consent, handoff

2-column wrap, tablist scroll, modal width safe

Public-safe scan

all source

가상 샘플, 담당자 확인, 검토 보조 문구 유지

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