디자인시스템(3). 디자인 토큰

개요

기존에 Polymorphic 컴포넌트와 Compound 컴포넌트에 대해서 정리해보았다.

디자인 시스템 구축에 꼭 필요한 과정은 아니나 위의 컴포넌트 제작과정을 알게 된다면 더쉽고 빠르게 디자인 시스템을 구축할수있다.

이번엔 디자인시스템의 핵심이라고 할 수 있는 디자인 토큰에 대해서 알아 볼까 한다 .

💡 이 글은 디자이너나 피그마 관련된 설명이 아닌 단순한 디자인 시스템 구축을 위한 개발자를 위한 글임을 참고 바랍니다.

디자인 토큰이란?

디자인 토큰 개념을 대중화 시킨 ‘세일즈포스(Salesforce)’의 Lightning Design System에서 디자인 토큰 개념을 설명하고있다.

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. 출처

 

간단하게 요약하자면

💡 UI 개발 을 위한 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 하드 코딩된 값(예: 색상의 16진수 값 또는 간격의 픽셀 값) 대신 이를 사용합니다 . 쉽게 말하면 확장 가능하고 일관된 시스템 구축을 위하여 디자인 토큰을 사용한다는 의미이다.

그래서 토큰? 그게 뭔데?

디자인 토큰이란 개념을 알았는데 그래서 그 토큰이라는게 어떤 기능을 하는것이며, 토큰을 사용하는 이유가 뭔지 아직 잘 모르겠다 왜 사용하는 것일까?

토큰이란? 하나의 형태에 여러가지 기능이나 정보를 담을 수 있는 개념

 

전산에서 토큰이란 의미를 가진 최소한의 문자열 덩어리라고 쓰여져있다.

 

쉽게 게임방에서 내가 토큰으로 교환해서 게임을 한다고 쳐보자
토큰의 사용방법은 몰라도 게임방에서 게임을 하기위해 토큰을 지불해야된다는 사실은 변하지 않는다.
이렇게 의미론 적으로 게임하기 → 토큰 지불

 

디자인 토큰도 마찬가지로
특정 색상, 마진, 타이포그래피 등을 정의해놓고 우리만의 약속된 토큰 값을 가져가는 것이다.

디자인 토큰의 값

앞써 디자인 토큰에대해서 알아봤으니
디자인 토큰의 값은 어떻게 처리하는지 알아보자

Core Value

Core value란 정확한 값을 지칭하는 토큰이다
#03C75B라는 hex값의 색상을 알수있지만 정확한 색의 이름, 의미, 용도를 알 수 없다.

Primitive(Global) Value

Primitive(Global) value란 추상적인 값을 지칭하는 토큰이다.
Green 400 색상이름, 명도등을 유추할수있지만 정확한 컬러값, 의미, 용도는 알 수 없다.

Semantic(Alias) Value

Semantic(Alias) value란 의미에 집중한 값을 지칭하는 토큰이다.

Primary 색상에 의미 표현 가능하지만 정확한 컬러값, 색상이름, 의미를 알 수 없다.

Component Value

Component value란 사용 용도를 알수있는 값인 토큰이다.

Button Primary 라는 사용 용도를 알 수 있지만 정확한 컬러 값, 색상 이름, 의미 알 수 없다.

위 그림과 같이 아래로 내려갈수록 관리에 용이해지는 토큰값을 사용할 수 있다.

개발자 답게 코드로 한번 보자

보통 디자이너에게 JSON 형태로 피그마에서 전달받든가 아니면, 시스템 구축이 잘되어져 있다면 github와 연계되어 토큰을 바로 업로드 시키는 형태로 구축되어 있을 가능성인 높다

보통 피그마에서 추출하면 아래 참조값형태로 변환된다

{
    "colors": {
    "black": {
      "value": "#000000",
      "type": "color"
    },
    "white": {
      "value": "#ffffff",
      "type": "color"
    },
    "gray": {
      "100": {
        "value": "#f7fafc",
        "type": "color"
      },
      "200": {
        "value": "#edf2f7",
        "type": "color"
      },
      "300": {
        "value": "#e2e8f0",
        "type": "color"
      },
        //.. 이하 생략
        }
    }
    "fontSizes": {
    "h1": {
      "value": "{fontSizes.h2} * 1.25",
      "type": "fontSizes"
    },
    "h2": {
      "value": "{fontSizes.h3} * 1.25",
      "type": "fontSizes"
    },
    "h3": {
      "value": "{fontSizes.h4} * 1.25",
      "type": "fontSizes"
    },
}

color 같은 값은 상관 없으나 fontSizes 같은 값들은 참조값 형태로 참조가 되고 있어서 문제가 된다

그래서 디자이너 → 개발자로 올때는 한번 가공이 필요하다

• 1차 가공은 token-transformer로 가공

    {
      sizing: {
        base: { value: 4, description: 'Alias value', type: 'sizing' },
        large: { value: 8, description: 'Math value', type: 'sizing' } 
      }
    }

• 1차 가공의 경우 styled-component를 쓰는 상태라면 바로 쓸수 있는 가공 상태가 된다
  아래 코드는 예시 자료
• 2차 가공은 style-dictionary로 가공아래 예시 처럼 토큰으로 가공되어서 나온다
• 2차 가공은 퍼블리셔나 CSS형태로 가공이 가능하다 (pure CSS, SCSS, TailwindCSS 등)

:root {
  --color-primary-color: #7749f8;
  --color-primary-color-dark: #5227cc;
  --color-primary-light: #ebe5fc;
  --color-secondary-color: #6c757d;
  --color-secondary-dark-color: #54595e;
  --color-secondary-light-color: #abb5be;
  --color-status-color-success: #28a745;
  --color-status-color-danger: #dc3545;
  --color-status-color-warning: #ffc107;
  --color-status-color-info: #17a2b8;
  --color-gray-100: #f8f9fa;
  ...
}

위 가공이 끝나면 이제 디자인 토큰을 사용할수 있는 수준까지 오게 된다

아래의 경우는 관련된 변수의 값들을 볼수 있다

 

dropbox theme variable

 

primary color

실제 예시로써 dropBox 홈페이지에서 inspect내에서 추적이 가능한 디자인 토큰을 가져와봤다

위쪽의 경우 모든 color theme을 변수에 넣어서 참조값으로 theme을 관리되고 있는 모습

아래쪽의 경우는 관련된 변수의 값들을 볼수 있다

 

이런식으로 디자인 토큰의 값은 관리되고 있는 것이다 예시 자료처럼 예를 들어 —color_core_primary 값이 변경되었다고 가정해보자 그러면 오른쪽의 값만 변경되면 theme의 참조값은 이미 참조값으로써 참조되고 있기 때문에 변경할 필요가 없는 것이다.

 

 

결론

디자인 시스템 구축을 위한 디자인 토큰에 대해서 알아보았다.

단순히 공통된 디자인을 공유하는 것을 넘어 시스템내부의 color 값, spacing 값 등을 공유하여 관리를 더욱 쉽게하여 디자이너나 개발자간의 소통을 유연하게 해주는 장점을 보았다

 

하지만 디자인시스템은 역으로 족쇄같은 느낌으로 디자인의 창작을 막을수도 있고, 오히려 비대해진 디자인시스템을 관리하기에 벅차다는 부정적인 의견도 있다.

 

그럼에도 불구하고 많은 빅테크 기업들이 디자인 시스템을 구축하고 사용하는데는 변함이 없는 것은 디자인 시스템의 활용도는 무궁무진하다는 뜻으로 생각된다.

그만큼 디자인 토큰의 중요성도 많이 부각된다고 느끼며, 다시금 피그마를 배워 볼까 생각 되었다.