1. 핸드오프에서 자주 일어나는 오해
디자이너와 개발자 사이에서 가장 많이 발생하는 마찰 포인트는 도구의 차이가 아닌 언어의 차이에서 옵니다.
| 디자이너가 피그마에서 하는 말 | 개발자가 코드에서 이해하는 것 | 실제 의도 |
|---|---|---|
| "간격 16" | margin: 16px | Gap인지 Padding인지 불명확 |
| "이미지 꽉 채우기" | width: 100% | object-fit: cover가 필요할 수도 |
| "텍스트 자동 줄바꿈" | word-break: break-all | Hug contents vs Fixed width |
| "그림자 — Soft" | 효과 패널 숫자 그대로 | 팀 공통 Shadow 토큰이 필요 |
이 오해를 줄이려면 공통 언어를 문서화해야 합니다. 피그마 Variables와 SCSS 토큰을 동기화하는 것이 그 시작입니다.
2. Figma Variables → SCSS 토큰 매핑
피그마 Variables(구 Styles)에서 정의한 값과 SCSS 변수를 1:1로 매핑하면 핸드오프 오류가 90% 감소합니다.
// ── 피그마 Variables 네이밍 (디자이너) ── // Color/Brand/Primary → #C96442 // Color/Background/Base → #FAFAF8 // Color/Text/Default → #1C1C1C // Spacing/4 → 16px // Spacing/6 → 24px // Radius/Card → 12px // ── SCSS 변수 매핑 (개발자) ── $color-brand-primary: #C96442; // Color/Brand/Primary $color-bg-base: #FAFAF8; // Color/Background/Base $color-text-default: #1C1C1C; // Color/Text/Default $space-4: 16px; // Spacing/4 $space-6: 24px; // Spacing/6 $radius-card: 12px; // Radius/Card
매핑 테이블을 팀 노션/컨플루언스에 공유하고, 피그마에 새 Variable을 추가할 때마다 SCSS도 동기화하는 PR 프로세스를 만드는 것이 이상적입니다.
3. Auto Layout → Flexbox 변환 규칙
피그마의 Auto Layout은 CSS Flexbox와 거의 1:1 대응됩니다. 변환 규칙을 숙지하면 코드 구현 시간이 단축됩니다.
| Figma Auto Layout | CSS Flexbox |
|---|---|
| Direction: Horizontal | flex-direction: row |
| Direction: Vertical | flex-direction: column |
| Gap: 16 | gap: 16px |
| Padding: 24 16 (수직 수평) | padding: 24px 16px |
| Align: Center Center | align-items: center; justify-content: center |
| Align: Space Between | justify-content: space-between |
| Hug Contents (Width) | width: fit-content (또는 display: inline-flex) |
| Fill Container (Width) | flex: 1 또는 width: 100% |
| Fixed 200px | width: 200px; flex-shrink: 0 |
4. 컴포넌트 네이밍 컨벤션 통일
피그마 컴포넌트 이름과 CSS 클래스명이 일치하면 핸드오프 시 오해가 줄어듭니다.
// ── 피그마 컴포넌트 네이밍 (권장) ──
// Button/Primary/Default
// Button/Primary/Hover
// Button/Secondary/Default
// Card/Post/Default
// Card/Post/Featured
// Badge/Category
// Badge/Audience/Developer
// ── 대응 CSS 클래스명 (kebab-case) ──
.btn-primary { }
.btn-primary:hover { }
.btn-secondary { }
.post-card { }
.post-card.is-featured { }
.badge { }
.audience-badge--developer { }
피그마의 / 구분은 CSS의 -(하이픈)으로, 피그마의 Variant Property는 CSS의 modifier 클래스(.is-hover, .is-active)로 변환됩니다.
5. 검수 체크리스트
개발 완료 후 디자이너가 직접 확인해야 할 항목입니다. 피그마와 브라우저를 나란히 놓고 비교하세요.
핸드오프 검수 체크리스트
☐ 색상: 브랜드 컬러 HEX 값 정확히 적용
☐ 타이포: 폰트 패밀리, 사이즈, 웨이트 일치
☐ 간격: Padding/Gap 값 토큰 기준 준수
☐ 모서리: border-radius 값 일치
☐ 그림자: box-shadow 값 일치
☐ 호버: 트랜지션 방향·속도 확인
☐ 반응형: 브레이크포인트별 레이아웃 확인
☐ 이미지: aspect-ratio, object-fit 확인
☐ 접근성: 색상 대비 4.5:1 이상 (WCAG AA)
☐ 폰트 크기: 최소 11px 이상 준수
팁: Figma Dev Mode 활용
피그마 Dev Mode에서 레이어를 클릭하면 CSS 속성을 직접 볼 수 있습니다. 특히 그림자, 그라디언트, 트랜스폼 값은 육안으로 재현하기 어려우므로 Dev Mode 값을 그대로 복사하는 것이 정확합니다.
피그마 Dev Mode에서 레이어를 클릭하면 CSS 속성을 직접 볼 수 있습니다. 특히 그림자, 그라디언트, 트랜스폼 값은 육안으로 재현하기 어려우므로 Dev Mode 값을 그대로 복사하는 것이 정확합니다.