디자인시스템 토큰이란? 이해하고 만들기

토큰이란 무엇일까요?

디자인 시스템 토큰을 이해하려면, 먼저 ‘토큰’이라는 말부터 알아야겠죠. 요즘은 상상하기 힘들겠지만, 저는 어렸을 때 토큰을 내고 버스를 탔어요. 하나의 토큰은 버스를 타고 목적지로 갈수 있다는 “규칙 동전” 같은 것이었어요.

디자인 시스템에서도 토큰은 이것과 비슷한 역할을 해요. 토큰은 디자인을 만들 때 필요한 작은 규칙이라고 할 수 있어요.

추억의 시내버스 토큰

토큰은 왜 중요할까요?

디자인 토큰은 색깔, 글씨 크기, 버튼 모양 등 우리가 화면에서 볼 수 있는 모든 것들을 정리해 둔 작은 규칙이에요.

예를 들어, 짱구를 그린다고 할 때 미리 정해둔 빨간색 크레용으로 매번 똑같은 빨간색 티셔츠를 그려야 우리가 아는 귀여운 짱구가 모든 장면에서 똑같은 모습으로 보이며 만화가 완성될 수 있겠죠.

디자인 토큰도 마찬가지로, 미리 정해진 규칙을 사용해서 모든 디자인 화면이 아름답고 일관성 있게 보이도록 할 수 있어요.

토큰은 어떻게 만들까요?

토큰을 만들기 위해 필요한 것 결정하기

출처 https://hybridheroes.de/blog/2023-02-02-the-future-of-design-tokens/

먼저, 디자이너가 어떤 종류의 토큰이 필요한지 생각해야 해요. 예를 들어, 컬러, 타이포그래피, 래디우스 값 같은 것들이 있을 수 있어요. 디자인 시스템에서 필요한 컴포넌트를 생각하면서 파악해요.

토큰의 이름과 값 정하기

출처 https://spectrum.adobe.com/page/design-tokens/

다음으로, 각 토큰에 이름을 붙이고 값을 정해야 해요. 예를 들어, “메인 컬러“ 라는 이름의 토큰을 만들어 본다면, 이 토큰에 어떤 색깔 값을 줄지 결정해야 해요.

토큰을 컴포넌트에 적용하기

출처 https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles

토큰이 준비되면, 이 토큰들을 실제 디자인 시스템의 컴포넌트에 적용해요. 예를 들어, 버튼 컴포넌트에는 컬러, 폰트, 스페이스, 래디우스 토큰이 적용될 수 있어요.

디자인 토큰의 이름을 짓는 방법

디자인 토큰에 이름을 짓는 일은 마치 누군가에게 별명을 지어주는 것과 비슷한데요. 별명은 그 친구가 어떤 성격을 가지고 있는지, 무엇을 좋아하는지를 나타내줄 수 있어야 하잖아요?

디자인 토큰의 이름도 마찬가지로 그 토큰이 무엇을 하는지 잘 설명할 수 있어야 해요. 그래야 디자인을 할 때 모든 사람이 토큰을 쉽게 찾고 사용할 수 있어요.

본격적으로 이름을 짓기 전에 서비스의 특징, 디자인 시스템의 목적에 맞게 네이밍 규칙을 세우게 되는데, 여러 회사들이 어떤 규칙과 철학을 가지고 토큰 네이밍을 하고 있는지 찾아봤어요.

1. Salesforce — Lightning Design System

https://www.linkedin.com/pulse/redefining-power-design-salesforces-lightning-system-kudret-keskin/

Salesforce의 Lightning Design System은 BEM(Block Element Modifier) 네이밍 방식을 사용해 각 컴포넌트의 구조와 기능을 명확하게 표현하고 있어요.

세일즈포스는 큰 규모의 웹 환경에서 일관성을 유지하고, 다양한 개발자와 디자이너가 쉽게 이해하고 적용할 수 있도록 하는데 중점을 둔 것 같아요.

제가 참고할때도 가장 직관적이고 구조를 이해하기 쉬운 레퍼런스였어요.

BEM이란?

출처 https://bootcamp.uxdesign.cc/introduction-to-bem-block-element-modifier-a-beginners-guide-35e267b6c39e

BEM은 웹 개발에서 사용되는 CSS 클래스의 이름을 지을 때 쓰이는 방법으로, Block, Element, Modifier의 약자에요. 스타일의 목적과 구조를 쉽게 파악할 수 있도록 도와주는데 예를 들어,

nav = Block : ‘nav’는 내비게이션 바 전체를 나타내는 블록.

nav__item = Element: ‘nav’ 블록의 하위 요소인 각 메뉴 항목.

nav__item — active = Modifier: 현재 활성화된 ‘nav’의 메뉴 항목을 나타내는 수정자.

2. Adobe — Spectrum

Adobe의 Spectrum 디자인 시스템은 Adobe 제품군에 일관된 사용자 경험을 제공하는 데 중점을 두었다고 해요. 제품의 확장성과 모듈성 그리고 원활한 협업을 위해 네이밍 규칙의 기준을 정립했어요.

Human-readable.

토큰은 인간이 쉽게 이해할 수 있는 의사소통 도구여야 합니다. 우리는 디자인 토큰을 사용하는 데 있어 다양한 수준의 제품 이해관계자들을 지원할 수 있어야 합니다. 이는 디자이너와 엔지니어 뿐만 아니라 모든 이해관계자들을 포함합니다.

Flat structure.

우리는 중첩된 구조나 트리 구조가 아닌 평면 구조를 사용합니다. 이는 특정 코딩 설정에 우선순위를 두지 않기 위함입니다. 이 방식은 또한 토큰의 이름이 서술적이고 대화적인 느낌을 가질 수 있도록 합니다.

Predictable and flexible.

우리는 자연어 규칙에 따라 설정된 어휘를 사용하는 토큰 명명 구조를 따릅니다. 이 구조는 복잡한 정보를 예측 가능한 방식으로 전달할 수 있게 해 주며, 동시에 디자인 시스템의 새로운 업데이트와 변경 사항을 수용할 수 있습니다.

https://spectrum.adobe.com/page/design-tokens/

이 밖에 많은 디자인 시스템을 갖춘 회사에서 각자의 서비스와 철학에 맞게 디자인 토큰의 규칙과 구조를 설계하고 있었어요. Design System Doc Site나 디자인 팀이 운영하는 블로그를 읽다 보면 많은 참고가 될 것 같아요.

디자인 토큰의 규칙과 문서화

설계한 디자인 토큰의 규칙과 구조를 명확하게 문서화하는 것도 중요해요. 이 문서는 개발자가 디자인 의도를 정확히 이해하고, 코드로 올바르게 구현할 수 있도록 소통하는 중요한 역할을 해요.

제가 작업했던 결과물을 예시로 설명해 볼게요.

문서화에 포함되어야 할 것은?

1. 토큰 카테고리: 색상, 폰트, 스페이싱, 래디우스, 이펙트 등 필요한 카테고리의 토큰들을 정의해요.

다양한 카테고리 별 정의

2. 네이밍 컨벤션: 각 토큰의 이름을 일관된 구조로 구성하는 방법을 설명해요. 토큰 구조를 설계하는 것은 전체적인 디자인 시스템의 요소들을 아우를 수 있고 직관적으로 소통할 수 있도록 하는데 중점을 뒀어요.

모든 토큰의 레퍼런스가 되는 토큰 (컬러 팔레트, 사이즈의 단위 등을 정의)

가장 기본적인 디자인 속성을 정의하는 프리미티브 토큰

특정 컨텍스트나 의미를 정의할 수 있는 시맨틱 토큰

컴포넌트 별로 정의할 수 있는 컴포넌트 토큰

3. 값의 정의: 각 토큰에 할당된 값을 나열해요. 개발자가 쉽게 읽고 파악할 수 있도록 정리해요.

color-text 토큰 나열 예시

4. 적용 예시: 실제 디자인 혹은 컴포넌트에서 토큰이 어떻게 사용되는지 구체적인 예를 들어 설명해요.

디자인 시스템 내 컴포넌트와 연결하여 예시 설명

Figma에서 디자인 토큰 세팅하기

토큰을 디자인에 쉽게 적용하고 관리할 수 있도록 Figma의 variable 기능을 적극적으로 활용했어요.

Variable 적용화면

[embed]

Figma 유튜브 채널에서 아주 쉽게 예제와 함께 설명을 해주기 때문에 어렵지 않게 따라할 수 있었어요.

[embed]

Variable 적용화면

최근 타이포그래피 토큰도 variable 기능으로 세팅할 수 있도록 업데이트 되었으니 한번 살펴보시는 것도 좋을 것 같아요!

마무리하며

디자인 시스템과 토큰에 대해 이해하려고 노력하면서 결과물을 만들어가는 과정에서 많은 배움이 있었어요. 이제 개발자와 함께 협업하며 라이브러리를 구축하는 과정에서 쌓는 레슨런도 잘 정리해서 기록해 보려고 합니다. 부족하지만 저와 같이 디자인 시스템에 대해 고민하고 계신 프로덕트 디자이너 분께 도움이 되면 좋겠습니다 :)