0Pricing
CSS Academy · 강의

토큰 도구: Style Dictionary

Style Dictionary 도구를 사용해 여러 플랫폼에서 디자인 토큰을 변환하고 배포합니다.

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

스타일 딕셔너리란 무엇인가요?

스타일 딕셔너리는 아마존이 만든 오픈 소스 빌드 도구로, 하나의 기준 소스에서 토큰 JSON을 플랫폼별 결과물인 CSS 사용자 지정 속성, SCSS 변수, iOS Swift 상수, Android XML, JavaScript/TypeScript 모듈로 변환합니다.

프로젝트 구조

tokens/ 디렉터리의 JSON 또는 JSON5 파일로 토큰을 구성하세요. 스타일 딕셔너리는 모든 파일을 자동으로 병합합니다. 범주별로 파일을 분리하세요: tokens/color.json, tokens/spacing.json, tokens/typography.json.

토큰 JSON 형식

각 토큰은 value 키와 선택적인 type, description, comment 필드를 가진 중첩 객체입니다. 스타일 딕셔너리는 출력 시 중첩 구조를 점 표기법 이름으로 평탄화합니다.

  <pre class="json-block">{
  "color": {
    "brand": {
      "primary": { "value": "#3b82f6", "type": "color" }
    }
  }
}</pre>

설정 파일

config.json은 소스(토큰 파일), 플랫폼(웹, ios, android), 플랫폼별 변환 및 형식을 지정합니다. 각 플랫폼은 서로 다른 변환을 적용하고 서로 다른 파일 형식으로 출력할 수 있습니다.

  <pre class="json-block">{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "dist/css/",
      "files": [{"destination": "variables.css", "format": "css/variables"}]
    }
  }
}</pre>

변환

변환은 빌드 중에 토큰 값을 수정합니다. color/css는 색상을 16진수로 형식화하고, size/rem은 px를 rem으로 변환하며, name/cti/kebab는 중첩된 범주-유형-항목 구조에서 kebab-case 이름을 생성합니다.

형식

형식은 출력 파일의 내용을 결정합니다. 기본 제공 형식으로 css/variables는 CSS :root 블록을 출력하고, scss/variables는 SASS 변수를 출력하며, javascript/module은 JS 객체를 내보냅니다. 사용자 지정 형식을 사용하면 필요한 어떤 출력 구조든 만들 수 있습니다.

토큰 간 참조

중괄호 구문으로 다른 토큰을 참조하세요: {"value": "{color.brand.primary}"}. 스타일 딕셔너리는 빌드 시점에 참조를 해석하여 구체적인 값을 출력합니다. 참조는 별칭과 전역 토큰 간의 매핑을 만듭니다.

사용자 지정 변환

프로젝트별 요구 사항을 처리하려면 사용자 지정 변환을 등록하세요. 색상에서 알파 값을 제거하거나, 디자인 도구의 불투명도 값을 변환하거나, 공급업체 접두사를 추가할 수 있습니다. 사용자 지정 변환은 기본 제공 변환과 마찬가지로 빌드 과정에 포함됩니다.

빌드 실행

npx style-dictionary build를 실행하거나 npm 빌드 스크립트에 추가하세요. 출력 파일은 설정된 buildPath 디렉터리에 생성됩니다. 생성된 파일을 커밋하거나 CI에서 빌드 시점에 생성할 수 있으며, 두 방식 모두 일반적으로 사용됩니다.

Figma 통합

토큰 스튜디오 for 피그마는 토큰 JSON을 GitHub 저장소와 동기화합니다. JSON이 변경되면 스타일 딕셔너리가 CI에서 실행되어 업데이트된 CSS 및 플랫폼 파일을 자동으로 생성합니다. 디자인 변경 사항이 수동 복사 및 붙여넣기 없이 코드에 반영됩니다.

토큰 버전 관리

npm에서 토큰 패키지의 버전을 관리하세요. 소비자는 특정 버전에 고정하고 의도적으로 업그레이드합니다. 변경 기록에는 추가, 사용 중단, 제거된 토큰을 기록합니다. 시맨틱 버전 관리는 호환성을 깨는 변경과 안전한 업데이트를 구분하여 전달합니다.

지식 점검

스타일 딕셔너리에서 "변환"은 어떤 역할을 하나요?

요약

스타일 딕셔너리는 설정 가능한 변환과 형식을 통해 하나의 토큰 JSON 소스를 플랫폼별 결과물로 변환합니다. 피그마에서 코드로 토큰을 동기화하고, 여러 플랫폼에서 일관성을 유지하며, 팀이 의도적으로 사용하고 업그레이드할 수 있는 버전 관리 토큰 패키지를 만들 수 있습니다.

자주 묻는 질문

“토큰 도구: Style Dictionary” 강의는 무료인가요?

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

“토큰 도구: Style Dictionary”에서 뭘 배우나요?

Style Dictionary 도구를 사용해 여러 플랫폼에서 디자인 토큰을 변환하고 배포합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“토큰 도구: Style Dictionary” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 디자인 토큰이란
  2. 토큰 이름 지정 규칙
  3. CSS 변수로 다중 브랜드 테마 구현
  4. 토큰 도구: Style Dictionary
← CSS Academy(으)로 돌아가기