Design Token

Design Token이란?

Design Token(디자인 토큰)은 색상, 타이포그래피, 간격, 그림자, 테두리 반경 등의 스타일 속성을 변수처럼 정의하여 디자인과 코드에서 일관되게 사용할 수 있도록 만든 단위입니다.

“Primary Color = #007AFF” 같은 값을 이름 있는 구조로 정리하고, 이를 디자인 도구(Figma 등)와 개발 코드(CSS, iOS, Android 등)에서 공유합니다.

디자인 토큰 구조: Global → Alias → Component-Specific

디자인 토큰은 단순한 변수 정의를 넘어서 계층적 구조로 스타일을 효율적으로 관리하는 방법입니다.
Figma나 Style Dictionary 같은 도구를 사용할 때도 이 구조가 널리 활용됩니다.

Global Token (글로벌 토큰)

“기초적인 스타일 값 자체”를 의미하는 가장 낮은 레벨의 토큰으로 디자인 시스템에서 사용하는 색상, 간격, 타이포그래피 등의 원시 값을 정의합니다.

• blue-800: #004FFF
• font-size-16: 16px
• spacing-md: 16px

이 값은 실제로 UI에 직접 사용되기보다는, 추상화된 의미(알리어스 토큰)로 연결되어 관리됩니다.

Alias Token (알리어스 토큰)

“의미 기반의 중간 이름”으로, 글로벌 토큰을 참조하여 의도나 목적에 따라 분류한 레이어입니다. 이 토큰은 브랜드 정책이나 모드 전환(light/dark), 테마 변경에 유리하도록 스타일에 의미를 부여한 추상화 계층입니다.

• accent-color → blue-800 참조
• background-surface → white 참조
• text-primary → gray-900 참조

특정 상황(다크 모드 등)에서 alias token만 바꾸면 전체 스타일을 쉽게 전환 가능

Component-specific Token (컴포넌트 전용 토큰)

“구체적인 UI 요소에 적용되는 토큰”으로 버튼, 입력창, 배경, 드롭존 등 컴포넌트별로 실제 연결되는 스타일 변수입니다.
이 토큰은 alias token을 참조하며, 스타일 일관성과 모듈화를 보장합니다.

• drop-zone-background-color → accent-color 참조
• modal-header-font-color → text-title 참조
• button-primary-bg → brand-main-color 참조

이렇게 구성하면, 가장 하위의 global token 값만 변경해도 전체 스타일이 상향적으로 업데이트됩니다.

---

왜 디자인 토큰이 중요한가?

• UI 구성 요소의 일관성 유지
• 다크모드, 브랜드 테마, 반응형 대응 등 확장성
• 디자이너 ↔ 개발자 간 협업 효율 증가
• 유지보수 및 자동화 가능성 향상

디자인 토큰은 디자인 시스템의 핵심 구성 요소로, 일관된 UI 스타일을 유지할 수 있도록 돕습니다. 디자이너와 개발자가 동일한 기준으로 작업하며 협업 효율이 크게 향상됩니다.

토큰 구성 예시 (JSON)

{
  "color": {
    "primary": {
      "value": "#007AFF"
    },
    "background": {
      "value": "#F5F5F5"
    }
  },
  "font": {
    "size": {
      "body": {
        "value": "16px"
      }
    }
  },
  "radius": {
    "md": {
      "value": "6px"
    }
  }
}

JSON 구조는 스타일 정보를 계층적으로 구성하여 다양한 플랫폼으로 변환하기 쉽도록 설계됨.

Style Dictionary로 디자인 토큰을 실제 코드에 반영하는 법

Style Dictionary란?

Style Dictionary는 JSON 형식으로 정의된 디자인 토큰을 다양한 플랫폼의 코드(CSS, iOS, Android 등)로 자동 변환해주는 오픈소스 도구입니다.

주요 특징

• 한 번 정의하면 여러 플랫폼(CSS, iOS, Android 등)에 자동 출력
• Light / Dark / 브랜드 테마 등 모드별 변환 가능
• 자체 빌드 설정 가능 (token → CSS 변수, Swift 변수, XML 등)

설정 흐름 요약

1. tokens/ 폴더에 JSON 토큰 파일 저장
2. config.json으로 어떤 형식으로 빌드할지 정의
3. style-dictionary build 명령어 실행
4. 플랫폼별 코드가 자동으로 생성됨

플랫폼별 활용 예시

1. CSS 변수로 출력 (Web)

Style Dictionary를 통해 변환 및 사용 예시입니다.

:root {
  --color-primary: #007AFF;
  --color-background: #F5F5F5;
  --font-size-body: 16px;
  --radius-md: 6px;
}

button {
  background-color: var(--color-primary);
  font-size: var(--font-size-body);
  border-radius: var(--radius-md);
}

2. iOS (Swift) 코드로 출력 및 사용 예시

struct DesignTokens {
    static let colorPrimary = UIColor(red: 0.0, green: 0.48, blue: 1.0, alpha: 1.0) // #007AFF
    static let fontSizeBody: CGFloat = 16
    static let radiusMD: CGFloat = 6
}

button.backgroundColor = DesignTokens.colorPrimary
button.layer.cornerRadius = DesignTokens.radiusMD

3. Android (XML) 코드로 출력

사용 예시 (Kotlin)

<resources>
    <color name="color_primary">#007AFF</color>
    <dimen name="font_size_body">16sp</dimen>
    <dimen name="radius_md">6dp</dimen>
</resources>

button.setBackgroundColor(ContextCompat.getColor(context, R.color.color_primary))
button.setTextSize(TypedValue.COMPLEX_UNIT_SP, resources.getDimension(R.dimen.font_size_body))

Style Dictionary를 실제 적용할 때 유의할 점

1. 구조 설계 중요

• 토큰 이름은 명확하고 일관되게 (color.primary, font.size.body 등)
• 토큰 키는 중첩 구조를 활용하면 나중에 테마 관리가 쉬움

2. 모드/브랜드 대응은 별도 파일로 관리

tokens/
  └─ base/
      └─ color.json
  └─ themes/
      ├─ light.json
      └─ dark.json

이렇게 구성하면 빌드시 Light/Dark 테마를 자동으로 구분해서 출력 가능

3. 자동화 워크플로우에 통합 가능

• GitHub Actions, Figma Tokens → JSON → Style Dictionary → 코드 자동 푸시 등 CI/CD 연동 가능
• 디자인 변경 시 코드 자동 업데이트가 가능한 구조를 만들 수 있음

요약

항목	설명
정의	디자인 시스템 속성을 변수로 정의하여 여러 플랫폼에서 재사용
핵심 도구	Style Dictionary (JSON 기반 → CSS/iOS/Android 자동 변환)
주요 적용 속성	색상, 폰트 크기, 간격, 테두리, 그림자 등
장점	일관성, 유지보수 용이, 다크모드 대응, 협업 효율성 증가