이온디
4주 전
학습 목표
디자인 토큰의 개념 이해
Figma Dev Mode에서 정확한 CSS 값 추출
SCSS 변수 시스템 구축
디자인-퍼블 불일치 방지
1. 왜 디자인 토큰이 필요한가?
Figma MCP의 한계
Figma MCP는 레이아웃 구조를 빠르게 가져오는 데 탁월하지만, 정밀한 수치를 정확히 추출하는 데는 한계가 있습니다.
잘 가져오는 것
못 가져오는 것
레이아웃 구조 (Flexbox, Grid)
정확한 font-size
색상 값 (HEX, RGB)…
학습 목표
디자인 토큰의 개념 이해
Figma Dev Mode에서 정확한 CSS 값 추출
SCSS 변수 시스템 구축
디자인-퍼블 불일치 방지
1. 왜 디자인 토큰이 필요한가?
Figma MCP의 한계
Figma MCP는 레이아웃 구조를 빠르게 가져오는 데 탁월하지만, 정밀한 수치를 정확히 추출하는 데는 한계가 있습니다.
잘 가져오는 것
못 가져오는 것
레이아웃 구조 (Flexbox, Grid)
정확한 font-size
색상 값 (HEX, RGB)
line-height, letter-spacing
대략적인 크기
margin/padding 정밀 값
요소 순서
border-radius 세부 값
실제 사례: lllayer_kda 프로젝트
프롬프트:
피씨 이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/...
결과:
- ✅ 구조는 맞음 (섹션 배치, Flexbox)
- ❌ 글자 크기가 다름 (48px → 40px로 잘못 해석)
- ❌ 간격이 다름 (80px → 60px로 잘못 적용)
- ❌ 정렬이 안 맞음
원인: AI가 디자인을 "추론"하여 값을 생성하기 때문
2. 디자인 토큰이란?
디자인 시스템의 가장 작은 단위로, 재사용 가능한 값들의 모음입니다.
Typography 토큰
토큰명
설명
예시 값
font-family
폰트 종류
'Pretendard', sans-serif
font-size-h1
제목1 크기
64px
font-size-h2
제목2 크기
48px
font-size-body
본문 크기
16px
font-weight-bold
굵은 글씨
700
line-height-normal
기본 행간
1.5
letter-spacing-tight
자간 (좁음)
-0.02em
Spacing 토큰
토큰명
값
용도
spacing-xs
4px
아이콘-텍스트 간격
spacing-sm
8px
작은 요소 간격
spacing-md
16px
기본 패딩
spacing-lg
24px
섹션 내 간격
spacing-xl
48px
섹션 간 간격
spacing-xxl
80px
대형 섹션 간격
Color 토큰
토큰명
값
용도
color-primary
#0066FF
브랜드 메인
color-secondary
#6B7280
보조 색상
color-background
#FFFFFF
배경
color-surface
#F9FAFB
카드 배경
color-text-primary
#111827
본문 텍스트
color-text-secondary
#6B7280
부제목 텍스트
3. Figma에서 토큰 추출하기
방법 1: Dev Mode 활용 (가장 정확)
Figma에서 요소 선택
우측 Inspect 패널 확인
CSS 값 복사
Dev Mode에서 보이는 값:
font-size: 64px
line-height: 76.8px (= 1.2)
letter-spacing: -1.28px (= -0.02em)
방법 2: Figma Variables 활용
디자이너가 Variables로 정의한 경우:
# Claude 프롬프트
이 Figma 파일의 디자인 토큰(Variables)을 추출해주세요.
@https://www.figma.com/design/...
또는 MCP 도구 직접 호출:
get_variable_defs nodeId="xxx"
방법 3: 디자이너에게 스펙 문서 요청
디자이너에게 다음 항목을 요청하세요:
[ ] Typography 스펙 (H1~H6, Body, Caption 등)
[ ] Spacing 스펙 (4px 배수 권장)
[ ] Color 팔레트
[ ] Breakpoint 정의
4. SCSS 변수 시스템 구축
_variables.scss 예시
// ======================
// Typography
// ======================
$font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
$font-family-secondary: 'Noto Sans KR', sans-serif;
// Font Sizes
$font-size-h1: 64px;
$font-size-h2: 48px;
$font-size-h3: 32px;
$font-size-h4: 24px;
$font-size-body: 16px;
$font-size-caption: 14px;
$font-size-small: 12px;
// Font Weights
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
// Line Heights
$line-height-tight: 1.2;
$line-height-snug: 1.3;
$line-height-normal: 1.5;
$line-height-relaxed: 1.6;
$line-height-loose: 1.8;
// Letter Spacing
$letter-spacing-tight: -0.02em;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.05em;
// ======================
// Spacing
// ======================
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 48px;
$spacing-xxl: 80px;
$spacing-3xl: 120px;
// ======================
// Breakpoints
// ======================
$breakpoint-mobile: 360px;
$breakpoint-tablet: 768px;
$breakpoint-pc: 1920px;
$breakpoint-wide: 3440px;
// Inner Width (Container)
$inner-width-mobile: 324px;
$inner-width-tablet: 688px;
$inner-width-pc: 1720px;
$inner-width-wide: 2590px;
// ======================
// Colors
// ======================
$color-primary: #0066FF;
$color-primary-dark: #0052CC;
$color-secondary: #6B7280;
$color-background: #FFFFFF;
$color-surface: #F9FAFB;
$color-border: #E5E7EB;
$color-text-primary: #111827;
$color-text-secondary: #6B7280;
$color-text-muted: #9CA3AF;
// ======================
// 반응형 Mixin
// ======================
@mixin mobile {
@media (max-width: #{$breakpoint-tablet - 1px}) {
@content;
}
}
@mixin tablet {
@media (min-width: $breakpoint-tablet) and (max-width: #{$breakpoint-pc - 1px}) {
@content;
}
}
@mixin pc {
@media (min-width: $breakpoint-pc) {
@content;
}
}
@mixin wide {
@media (min-width: $breakpoint-wide) {
@content;
}
}
변수 사용 예시
// _typography.scss
.page-title {
font-family: $font-family-primary;
font-size: $font-size-h1;
font-weight: $font-weight-bold;
line-height: $line-height-tight;
letter-spacing: $letter-spacing-tight;
color: $color-text-primary;
@include tablet {
font-size: $font-size-h2;
}
@include mobile {
font-size: $font-size-h3;
}
}
.section {
padding: $spacing-xxl 0;
@include mobile {
padding: $spacing-xl 0;
}
}
.container {
max-width: $inner-width-pc;
margin: 0 auto;
padding: 0 $spacing-lg;
@include wide {
max-width: $inner-width-wide;
}
@include tablet {
max-width: $inner-width-tablet;
}
@include mobile {
max-width: $inner-width-mobile;
padding: 0 $spacing-md;
}
}
5. 워크플로우 개선
Before (기존 방식)
1. Figma URL 제공
↓
2. "이 디자인을 구현하세요"
↓
3. 결과 확인 → 수치가 안 맞음
↓
4. "글자 크기 48px로 수정해주세요"
↓
5. "간격 80px로 수정해주세요"
↓
6. 반복... (비효율)
After (토큰 기반 방식)
1. 프로젝트 시작 시 디자인 토큰 정의
↓
2. _variables.scss 파일 생성
↓
3. Figma URL + 토큰 명시 프롬프트
↓
4. 결과물 일관성 확보 (수정 최소화)
6. 실습: lllayer_kda 토큰 정의
Step 1: Figma에서 값 추출
피그마 Dev Mode에서 확인할 항목:
Typography
- [ ] Title (H1~H4) 폰트 사이즈
- [ ] Body text 폰트 사이즈
- [ ] Caption 폰트 사이즈
- [ ] Font weight 종류
- [ ] Line height 값
Spacing
- [ ] 섹션 간 간격
- [ ] 컨테이너 패딩
- [ ] 요소 간 간격
Layout
- [ ] Container max-width (브레이크포인트별)
- [ ] Grid gap
Step 2: _variables.scss 작성
파일 위치: layouts/lllayer_kda/assets/css/_variables.scss
// lllayer_kda 디자인 토큰
// Figma Dev Mode에서 추출한 정확한 값
// Typography
$font-size-hero: 120px; // 메인 타이틀
$font-size-h1: 64px;
$font-size-h2: 48px;
$font-size-h3: 32px;
$font-size-h4: 24px;
$font-size-body: 18px;
$font-size-caption: 14px;
// ... (프로젝트에 맞게 커스터마이즈)
Step 3: 기존 SCSS에 변수 적용
Before (하드코딩)
.hero-title {
font-size: 64px;
line-height: 1.2;
margin-bottom: 48px;
}
After (변수 사용)
.hero-title {
font-size: $font-size-h1;
line-height: $line-height-tight;
margin-bottom: $spacing-xl;
}
Step 4: 검증
브라우저 개발자 도구 열기
Computed 탭에서 실제 적용된 값 확인
Figma Dev Mode의 값과 1:1 비교
7. 프롬프트 템플릿 (토큰 기반)
기본 템플릿
작업경로: layouts/lllayer_kda/assets/pages/_about_english.html
SCSS경로: layouts/lllayer_kda/assets/css/components/_about.scss
## 디자인 토큰 (반드시 준수)
### Typography
| 요소 | font-size | line-height | font-weight |
|-----|-----------|-------------|-------------|
| H1 | 64px | 1.2 | 700 |
| H2 | 48px | 1.3 | 600 |
| H3 | 32px | 1.4 | 600 |
| Body | 18px | 1.6 | 400 |
| Caption | 14px | 1.5 | 400 |
### Spacing
| 용도 | 값 |
|-----|-----|
| Section gap | 80px |
| Inner gap | 48px |
| Container padding | 24px |
### Breakpoints
| 디바이스 | 뷰포트 | Inner width |
|---------|--------|-------------|
| Wide | 3440px | 2590px |
| PC | 1920px | 1720px |
| Tablet | 768px | 688px |
| Mobile | 360px | 324px |
피씨 이 1개의 디자인을 Figma에서 구현하세요.
**위 토큰 값을 정확히 적용해주세요.**
@https://www.figma.com/design/...?node-id=XXX
상세 템플릿 (복잡한 페이지용)
작업경로: layouts/lllayer_kda/assets/pages/_service.html
## 디자인 토큰
### Hero Section
- 타이틀: 120px / 1.0 / 700 / letter-spacing: -0.03em
- 서브타이틀: 24px / 1.5 / 400
- Section padding: 160px 0
### Content Section
- Section title: 48px / 1.3 / 600
- Body text: 18px / 1.8 / 400
- Card gap: 24px
- Section gap: 120px
### SCSS 변수 파일
layouts/lllayer_kda/assets/css/_variables.scss 파일의 변수를 사용하세요.
하드코딩된 px 값 대신 $font-size-*, $spacing-* 변수를 사용해주세요.
피씨 이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/...?node-id=XXX
[PC 스크린샷 첨부]
8. 핵심 포인트 요약
토큰 먼저, 퍼블 나중
프로젝트 시작 시 디자인 토큰부터 정의하세요.
디자이너와 협업
Typography/Spacing 스펙을 요청하세요.
디자이너가 Figma Variables를 사용하면 더 좋습니다.
SCSS 변수 필수
하드코딩 금지. 모든 값은 변수로 관리하세요.
프롬프트에 토큰 명시
AI가 정확한 값을 적용하도록 명시하세요.
체크리스트
프로젝트 시작 시:
- [ ] 디자이너에게 Typography 스펙 받기
- [ ] Spacing 시스템 정의 (4px 배수 권장)
- [ ] Color 팔레트 정리
- [ ] Breakpoint 정의
파일 생성:
- [ ] _variables.scss 파일 생성
- [ ] style.scss에 @import '_variables' 추가
작업 시:
- [ ] 하드코딩 대신 변수 사용
- [ ] 프롬프트에 토큰 표 명시
검증:
- [ ] 브라우저에서 Computed 값 확인
- [ ] Figma Dev Mode와 1:1 비교
- [ ] 반응형 브레이크포인트별 검증
참고 자료
Figma Dev Mode 가이드
Figma Variables 사용법
Design Tokens 커뮤니티 그룹
