디자인 핸드오프 스펙 작성의 원칙
디자인 핸드오프는 디자이너가 개발자에게 구현에 필요한 모든 정보를 전달하는 과정입니다. 모호한 스펙은 개발 중 잦은 질문으로 이어지고, 최종 결과물이 디자인 의도와 달라지는 원인이 됩니다. 좋은 스펙은 개발자가 디자이너에게 묻지 않아도 구현할 수 있는 수준으로 작성해야 합니다.
색상·타이포그래피·간격·상태·반응형 브레이크포인트가 핵심 항목입니다. Figma의 Dev Mode나 Zeplin 같은 툴을 사용하면 이 정보를 자동으로 추출할 수 있지만, 툴에만 의존하면 상태(hover, focus, disabled)나 애니메이션 같은 동적 스펙이 누락되기 쉽습니다.
토큰 기반 스펙 작성
색상·크기·간격을 디자인 토큰으로 정의하면 디자이너와 개발자가 같은 이름으로 소통할 수 있습니다. color-primary-500, spacing-md처럼 의미 있는 이름을 사용하면 값이 변경되어도 토큰명은 유지되어 유지보수가 쉬워집니다.
자주 묻는 질문
스펙에 px와 rem 중 어느 단위를 써야 하나요?
웹 접근성을 위해 폰트·간격은 rem 권장, px 병기. 팀과 합의한 단위를 일관되게 사용하는 것이 가장 중요합니다.
핸드오프 스펙에서 꼭 명시해야 할 항목은?
색상 토큰·타이포그래피·간격·컴포넌트 상태(hover/focus/disabled)·반응형 브레이크포인트가 필수입니다.
Figma 플러그인 없이도 스펙 전달이 가능한가요?
Figma Inspect 패널 공유 또는 노션/컨플루언스 스펙 테이블로 충분합니다. 컴포넌트명·상태·단위를 명확히 기술하면 됩니다.