디자인 시스템 만들기 시리즈 1편 : 디자인 토큰 소개

원문 : https://www.michaelmang.dev/blog/introduction-to-design-tokens

Introduction to Design Tokens

TLDR:

• CSS는 스타일 시트 스펙의 원자가 아닙니다.
• 원자는 바로 딕셔너리의 필드 : 밸류 한 쌍입니다.
• css 클래스는 스펙(사양)이 아닙니다.
• color : 'black' 한 쌍입니다.
• 코드에서 사용할 수 있는 사양을 나타내는 "원자"는 키-값 쌍입니다. 이것이 바로 "디자인 토큰"이 의미하는 것입니다.

Design tokens are key-value pairs that represent the specs of a design system.

CSS 기술이 영원하지 않을 수도 있습니다. creating a common CSS architecture

하지만 자료구조는 영원합니다.

---

아래 시리즈의 1편 의역입니다.

1 | Introduction to Design Tokens
2 | Managing and Exporting Design Tokens With Style Dictionary
3 | Exporting Design Tokens From Figma With Style Dictionary
4 | Consuming Design Tokens From Style Dictionary Across Platform-Specific Applications
5 | Generating Design Token Theme Shades With Style Dictionary
6 | Documenting Design Tokens With Docusaurus
7 | Integrating Design Tokens With Tailwind
8 | Transferring High Fidelity From a Design File to Style Dictionary
9 | Scoring Design Tokens Adoption With OCLIF and PostCSS
10 | Bootstrap UI Components With Design Tokens And Headless UI
11 | Linting Design Tokens With Stylelint
12 | Stitching Styles to a Headless UI Using Design Tokens and Twind

위와 같은 멋진 컴포넌트 설명서를 애플리케이션으로 옮겨봅시다.

아래와 같은 문제가 발생합니다

• 우리팀은 styled-component를 적용했습니다.
• 다른팀도 styled-components를 쓰는데, css variable이 아닌 themeprovider를 사용한다 하네요. 공통화합니다.
• 다른팀이 vue를 사용하기로 해서 스타일을 stylis 파일로 뽑아냅니다
• 마케팅 팀이 외주를 줬다고 하네요. 제이쿼리입니다. 다 같이 css로 옮깁시다.
• 모바일 컴포넌트를 참고해야 하는데 모바일 팀은 plain JSX에 스타일 객체를 사용하고 있었다고 하네요. 공통화를 먼저 진행해야겠습니다.
• 디자인 팀이 스타일 재설계를 시작했다고 합니다.

점점 단일 진실 원천의 필요성이 드러납니다.

디자인 토큰은 무엇인가요?

모든 디자인 시스템은 애플리케이션을 구성하는 UI 요소의 스타일에 대한 "스펙"을 제공합니다.

애플리케이션의 UI 요소에 대한 스타일을 지정하는 목표는

회사의 모든 애플리케이션(모바일, 웹, 데스크톱 및 React, Vue 등)이 동일한 모양과 느낌을 갖도록 하는 것입니다.

 

각 UI 요소의 "사양"에는 원하는 모양과 느낌을 만드는 데 필요한 색상, 타이포그래피, 크기 및 간격을 지정하는 특정 스타일 또는 속성 세트가 포함됩니다.

많은 UI 요소는 다른 옵션("변형")도 제공합니다.

예를 들어 버튼은 "기본", "개요", "비활성화" 등의 변형을 가질 수 있습니다.

(a button can have a “basic”, “outline”, “disabled”, etc. variant:)

회사 내의 모든 응용 프로그램에서 일관된 모양과 느낌을 유지하는 첫번째 방법은 공유 UI 컴포넌트 라이브러리를 만드는 것입니다.

각 컴포넌트는 설계 시스템의 문서에서 요구하는 정확한 사양을 구현해야 합니다.

 

디자인 시스템을 만드는 데는 세가지 어려움이 있습니다.

• 첫째, 공유 UI 컴포넌트 라이브러리를 구현하는 개발자 팀이 문서를 코드로 변환할 때 실수를 할 수 있습니다. 
  • 테스트, 혹은 도구로 해결합니다.
  • Shopify’s Polaris design system documentation

• 둘째, UI 컴포넌트 라이브러리가 다른 플랫폼에서 작동하지 않을 수 있습니다.
  • 웹용 컴포넌트는 모바일 앱에서 작동하지 않을 수 있습니다.
• 셋째, UI 라이브러리는 다른 기술(동일한 플랫폼에 있더라도)에서 작동하지 않을 수 있습니다.
  • React와 Vue 구현 사이에 문제가 있을 수 있습니다.
• 마지막으로, 장기적으로 어떤 팀이 추가되고 어떤 기술과 플랫폼이 승리할지 미래를 예측할 수 있는 방법이 없습니다.

 

이를 해결하기 위해 단일 진실 원천 디자인 토큰이 필요합니다.

디자인 파일(Sketch, Figma 등과 같은 도구에서)에서 자동 생성될 수 있도록

디자인 시스템의 디자인 토큰을 관리 가능한 "딕셔너리"로 만드는 방법이 있다면 어떨까요?

그리고 다른 소비자의 선호도에 맞는 형식(예: CSS, SASS, JavaScript)으로 자동으로 내보낼 수 있는 방법이 있다면 어떨까요?

사실 몇가지 방법이 이미 있습니다.

used by companies such as Amazon, Salesforce, Shopify, Mozilla, Adobe, and more.

다음 편에서는 디자인 토큰을 관리 및 추출하는 방법을 살펴봅니다.