[TIL] 프론트엔드 개발자에게 디자인 토큰을

박창조·2025년 7월 8일

TIL

목록 보기

2/6

프로젝트를 직접 기획하고 설계하면서 디자이너의 부재로 프론트엔드 팀원들과 UI/UX를 직접 설계하는 경험을 하였다.

피그마로 함께 와이어프레임부터 목업 디자인까지 만들어가면서 “체계적인 협업” 방법에 대한 필요를 느끼게 되었다.

각자 담당한 페이지의 일관된 디자인과 효율성을 위해 “디자인 시스템”에 대해 찾아보게 되었고, 자연스레 디자인에서 사용되는 개념인 여러 개념들을 알게 되었는데, 그 중 “디자인 토큰”에 대해 알아보려고 한다.

📌 디자인 토큰이란 ❓

디자인 토큰의 개념을 알기에 앞서 토큰(Token)이라는 개념에 대해 알아보자.

먼저 “현금 5만원” 이 있다고 하자. 이 5만원은 “돈”이라는 개념으로 보편적으로 사용하는 개념일 뿐 특화된 기능은 가지고 있지 않다.

이 5만원으로 “특정 카페의 5만원 권의 토큰”을 샀다고 해보자.

그렇다면, 이 “카페 5만원 권 토큰”은 원래 5만원이 가진 현금 가치를 가지고 있으면서, 카페를 이용할 수 있는 “특별한 기능”을 가지고 있을 수 있다고 할 수 있다.

이를 정의하면 토큰(Token)은 “하나의 형태에 여러가지 기능이나 정보를 담을 수 있는 개념” 이라고 할 수 있습니다.

디자인 토큰으로 확장하여 생각한다면, 디자인 토큰은 “디자인”에 관한 여러가지 시각적인 속성 (색상, 타이포그라피, 투명도 등)을 특정한 형태로 정의한 것을 의미한다.

디자인 토큰 ❓

“디자인”에 관한 여러가지 시각적인 속성 (색상, 타이포그라피, 투명도 등)을 특정한 형태(변수) 로 정의한 것

디자인 토큰이 필요한 이유

사용자의 관점에서 좋은 UI/UX를 제공하기 위해서는 “일관성” 을 유지하는 것이 아주 중요하다.

또한 디자이너의 관점에서 이러한 일관성을 유지하기 위해 “반복적”으로 사용되는 내용을 토큰화 시킴으로서 “유지 보수”에 아주 큰 효과를 볼 수 있고, 다른 사람들과 협업을 하는 과정에서 “같은” 내용을 통해 작업을 하게 되면서 훨씬 쉬워지게 된다.

그리고 “프론트엔드 개발자”의 관점에서 보았을 때, 정의한 디자인 토큰의 레퍼런스를 직접 사용함으로서 네이밍의 어려움에서 벗어 나, 비즈니스 로직을 개발하는 것에 집중할 수 있다는 큰 장점이 생기게 된다. 또한 모든 팀원이 정의된 내용을 바탕으로 협업하면서 협업 효율성을 증가 시킬 수 있다.

사용자

일관된 UI/UX를 제공 받을 수 있음

디자이너

협업 효율성 증가

유지보수성 증가

프론트엔드 개발자

디자이너 및 동료 개발자와 협업 효율성 증가

비즈니스 로직에 집중 가능

📌 디자인 토큰의 구조

구체적으로 디자인을 어떻게 토큰화 시키고 있는지 알아보자.

위에서 “디자인토큰”은 시각적인 요소에 여러가지를 담는 토큰을 정의하는 것이라고 하였다. 대부분의 시각적인 요소에 적용가능하지만, “색상” 을 기준으로 설명하고자 한다.

다음과 같은 로그인 버튼이 있다고 해보자.

이 버튼 디자인의 색상(Color)을 어떻게 부를 수 있을까??

#03c75a
Green-400
main 색상
로그인 버튼 색상

이처럼 해당 디자인 요소를 바라보는 각자의 관점과 범위에 따라 부르는 방법이 달라지게 된다.

그렇기 때문에 “디자인 토큰”은 구체적인 범위에 따라 구조화 하여 표현 할 수 있다.

Core Value (Raw Value) : 가장 Raw 한 값으로 표현 → #3f3se3
Primitive : 원시적인 값으로 표현, 컬러 팔레트를 표현 → Green-400
Semantic : 색상의 역할을 표현→ Primary, main, background
Component : 구체으로 사용되는 역할을 표현→ Button

이렇게 각각의 의미와 구체적인 범위에 따라서 표현할 수 있는 방법에 따라 각각의 토큰으로 만들 수 있다. 그래서 각각을 만들어 표현할 때 Primitive 토큰, Semantic 토큰, Component 토큰 이라고 정의할 수 있다.

이와 같이 범위에 따라 토큰을 레벨화 하여 구분하고, 연결하였을 때 위 사진과 같이 각각의 토큰들이 서로 연결됨으로 일관성을 가지게 될 수 있게 된다.

디자인 토큰 네이밍 정하기!

디자인 토큰의 이름을 정하는데 일반적으로 가장 많이 사용되는 방법들이 있겠지만, 가장 좋은 것은 “프로젝트의 목적, 협업하는 팀원들이 동의하는 것”을 네이밍으로 정의하는 것이다.

따라서 팀 안에서 “명확한 규칙”에 따라 정의하는 것이 아주 중요하다.

다음은 대한민국 전자정부 KRDS(Korea Design System) 에서 정해진 네이밍 예시이다.

https://krds.go.kr/html/site/utility/utility_03.html#anchor-page-2

📌 프론트엔드 개발자와 디자인토큰

디자인 토큰은 위에서 앞서 이야기 했던 것 처럼 프론트엔드 개발자에게 디자인 요소에 대한 고민을 줄여주며, 디자이너와 협업하기에 큰 도움을 준다.

하지만, Figma와 같은 디자인 툴에서 설계되고 만들어진 디자인 토큰은 프로젝트의 규모가 커지면서 그 양도 어마어마 하게 많아진 것이다. 그렇기 때문에 디자인 토큰 → Code 로 변환하는 작업이 없다면 이것 또한 큰 불필요한 자원의 낭비가 될 가능성이 있다.

대부분 사용하는 Figma에서 Variables 기능을 제공함으로 디자인 토큰을 관리할 수 있도록 하였지만, 2025년 현재 디자인 토큰에 대해 공식적으로 표준으로 정해진 바는 없다.

이것들을 표준화 하기 위해서 W3C Design Tokens Community Group (DTCG) **에서 오래전부터 많은 노력을 하고 있다. 완전하지는 않고, 공식적으로 도입되고 있지는 않지만, Figma, Adobe 등 여러 회사에서 DTCG 에서 제안하는 Design Token Format Module** 을 도입하는 것을 고려하고 있다고 한다.

LAUNCHED: Variables! (Design Token support in Figma) | Figma Forum

Figma에서 DTCG를 사용하는 방법

Figma 자체에서 DTCG 표준을 직접 적용하고 있지는 않지만, 공식으로 제공되는 Tokens Studio 플러그인을 통해 지원하고 있다.

Token Studio 에서는 Color, Typography, Spacing, Shadow 등 다양한 타입의 토큰을 지원하며, 각각을 세트라는 큰 개념으로 분류하여 관리할 수 있다.

Token Studio 에서 제공하는 주요 기능은 다음과 같다.

UI에서 토큰을 생성
JSON 파일 Import 하여 관리
GitHub, GitLab, Bitbucket 같은 원격 저장소와 양방향(수정/동기화) 연동이 가능
내보내기(Export)할 때, 원하는 포맷(특히 W3C DTCG 표준 JSON)을 선택 가능
DTCG(W3C Design Tokens Community Group) 표준 지원

위 기능들을 사용하여 프론트엔드 개발자는 Figma에서 만들어진 디자인 토큰들을 JSON 파일로 추출하여 사용할 수 있다.

또한 Github 과 같은 원격 저장소와 연동하여 변경사항이 있을 때마다 자동으로 반영되도록 할 수 있다.

이를 통해 수작업으로 진행해야 했던 디자인 관련 CSS 관리를 알아서 해줄 수 있다는 큰 장점이 생긴다.

Tokens Studio를 통해 변환한 JSON은 파일은 Style Dictionary 라이브러리를 통해 CSS 변수로 변환하여 사용할 수 있다.

예를 들어 다음과 같은 디자인 토큰을 생성했다고 해보자.

{
  "colors": {
    "red": {
      "value": "#ff0000",
      "type": "color"
    }
  }
}

Style Dictionary 를 사용하면 아래와 같은 내용으로 변환할 수 있다.

:root {
  --colors-red: #ff0000;
}

디자인 토큰을 Github와 연동하기

Token Studio 에서 제공하는 기능을 통해 Figma에서 만든 디자인 토큰을 Github와 쉽게 연동할 수 있다.

1️⃣ Personal access tokens 발급 받기

Token Studio 에서 Github에 대한 권한을 얻기 위해 Personal access tokens 을 먼저 발급 받아야 한다.

저장소에 commit, push 등 작업을 수행하게 하기 위한 권한을 얻는 것이라고 이해하면 된다.

settings → Developer settings → Personal access tokens → Tokens (classic)

발급 시 저장소에 대한 읽기, 쓰기 권한을 설정해주자.

2️⃣ Github 연동하기

이제 Token Studio 으로 가보자. Settings → Add new sync provider 를 클릭하여 Github를 선택한다.

위에서 생성한 Personal access token을 포함하여, 저장소의 이름, 반영할 브랜치, 반영할 JSON 파일을 입력 후 save 버튼을 누르면 연동이 완료된다.

Github에 push 하게 되면 다음과 같이 변경 사항에 대한 정보와, commit에 대한 간단한 설정을 해줄 수 있다.

Github에 들어가서 확인해보면 다음과 같이 반영이 되어 있는 것을 볼 수 있다.

Token Studio 를 조금 더 자세히 확인해보면, 하단에 다음과 같이 바로바로 반영할 수 있도록 되어있는 것을 볼 수 있다.

Test를 위해 main 브랜치에 연동되도록 했지만, Design 용 브랜치를 만들어 올리면 PR을 생성하는 버튼도 나타난다.

3️⃣ JSON → CSS로 변환하기

위에서 저장소에 반영된 JSON 파일을 style-dictionary 을 통해서 CSS 변수로 변환해보자.

먼저 다음과 같이 라이브러리를 dev 로 설치해준다.

npm install -D style-dictionary @tokens-studio/sd-transforms

style-dictionary : 디자인 토큰을 여러 플랫폼(CSS, iOS, Android, JS 등)에 맞는 형식으로 변환해주는 빌드 툴
@tokens-studio/sd-transforms : Token Studio에서 추출한 JSON 형식이 Style Dictionary가 바로 이해하기 어려운 구조일 때, 이를 전처리하고 변환 규칙을 확장