Frontend Academy · 강의

Style Dictionary를 사용한 디자인 토큰

색상, 간격, 타이포그래피 토큰을 JSON으로 정의하고, Style Dictionary로 변환해 CSS 변수, JS 상수 또는 iOS/Android 형식으로 만듭니다.

Style Dictionary를 사용한 디자인 토큰은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

디자인 토큰이란?

디자인 토큰은 디자인 시스템에서 이름을 붙인 기본 값입니다. 색상, 간격, 글꼴 크기, 테두리 반경, 그림자 등이 이에 해당합니다. 토큰은 단일 기준이 되며 모든 컴포넌트가 토큰에서 스타일을 파생합니다.

토큰이 중요한 이유

토큰을 사용하면 디자인 결정과 구현을 분리할 수 있습니다. color.primary를 파란색에서 녹색으로 한 번만 변경하면 이를 사용하는 모든 컴포넌트가 업데이트됩니다. 또한 웹, iOS, Android에 동일한 디자인을 적용할 수 있습니다.

토큰 저장

토큰은 JSON 또는 YAML에 저장하십시오. 여러 플랫폼의 도구에서 사용할 수 있는 중립적인 형식입니다. JSON이 가장 일반적입니다.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary(Amazon)는 디자인 토큰을 위한 사실상의 빌드 도구입니다. 토큰을 읽고 CSS 변수, SCSS, JS 상수, iOS Swift, Android XML 등 여러 출력 형식으로 변환합니다.

npm install -D style-dictionary

구성

입력 토큰과 출력 플랫폼을 설명하는 style-dictionary.config.js를 만드십시오.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

빌드 실행하기

CLI를 실행하여 모든 플랫폼용 결과를 생성합니다.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

생성된 CSS 출력

일관된 이름 지정 규칙을 사용하는 CSS 변수입니다(네임스페이스가 포함된 kebab-case).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

생성된 JS 출력

JS/TS 코드에서 사용하는 JS 객체입니다(Tailwind 구성, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

토큰 이름 지정 규칙

리터럴 이름(color.blue-500)보다 의미 기반 이름(color.primary)을 사용하십시오. 의미 기반 토큰을 사용하면 이름을 바꾸지 않고도 값을 변경할 수 있습니다. 2단계 시스템은 리터럴 팔레트(blue-500)에서 의미 기반 별칭(primary)으로 이어집니다.

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

토큰으로 테마 구성하기

동일한 이름에 서로 다른 값을 사용하도록 입력을 달리하여 여러 플랫폼을 빌드하면 테마(라이트/다크)를 지원할 수 있습니다.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

토큰 범주

일반적인 범주는 color, spacing, typography(font-family, size, line-height, weight), border(radius, width), shadow, transition(duration, easing), z-index, breakpoint입니다.

토큰 레지스트리 도구

Style Dictionary 외에도 Tokens Studio(Figma 플러그인), Specify, Supernova가 있습니다. 이러한 도구를 사용하면 디자이너가 Figma에서 토큰을 관리하고 코드베이스와 자동으로 동기화할 수 있습니다.

빠른 확인

Style Dictionary와 함께 디자인 토큰을 사용할 때의 가장 큰 이점은 무엇입니까?

복습: 디자인 토큰

토큰은 이름을 붙인 기본 값(색상, 간격, 타이포그래피)으로, 디자인 시스템의 단일 기준입니다. JSON으로 저장합니다. Style Dictionary는 이를 CSS 변수, JS, iOS, Android로 변환합니다. 리터럴 이름(blue-500)보다 의미 기반 이름(primary)을 사용합니다. 2단계 구조는 팔레트에서 의미 기반 별칭으로 이어집니다. 별도의 빌드로 테마를 구성합니다. Tokens Studio를 통해 Figma에서 동기화할 수 있습니다.

자주 묻는 질문

“Style Dictionary를 사용한 디자인 토큰” 강의는 무료인가요?

네 — “Style Dictionary를 사용한 디자인 토큰” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Style Dictionary를 사용한 디자인 토큰”에서 뭘 배우나요?

색상, 간격, 타이포그래피 토큰을 JSON으로 정의하고, Style Dictionary로 변환해 CSS 변수, JS 상수 또는 iOS/Android 형식으로 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Style Dictionary를 사용한 디자인 토큰” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기