디자인 시스템의 토큰(Token)

디자인시스템 요모조모

by 져니킴 Nov 18. 2024

'토큰'은 디자인시스템에서 매우 기본적인 용어이기 때문에 이야기의 첫 시작에 다루어보면 좋을 것 같다.

디자인 시스템팀에 처음 들어가서 업무 설명을 들을 때 토큰이라는 단어를 처음 듣고 어리둥절했던 경험이 있다. 매니저가 토큰에 대해 이야기하는 내내 내 머릿속에 떠오른 것은 토큰이란 동전만 한 모양으로 이루어진 플라스틱 조각이었다. 어린 시절, 내가 살던 동네에 새로운 지하철 노선이 생겼는데 그 지역 특색이었는지 종이로 된 표가 아니고 토큰을 현금을 주고 구매해서 표대신 사용하는 시스템이었고 그것이 떠올랐다.

디자인 시스템에서의 토큰은 다르게 사용되고 있었다. 색깔이나 타이포그래피, 심지어는 Border radius에마저 토큰이라는 것을 정하고 또 그것들은 여러 계층으로 레이어링 되듯 쌓인 형태로 이루어질 수 있다는 것을 배웠다.

머릿속에 든 생각은 '굳이? 저렇게까지?' 그리고 몇 달이 지난 뒤에 일을 하다 보니 곧 그 이유를 알게 되었다.

단순한 한 페이지의 디자인이라면 토큰은 쓸모없을지 모른다. 그러나 제품이 엄청 커져 다양한 Flow와 Use case들이 생겨 많은 컴포넌트와 패턴이 생기면 엔지니어와 디자이너가 디자인과 코드를 관리하기 어려울 지경에 이를 수 있다. 어떤 경우에 정말 효과적일지는 나중에 더 이야기해 볼 생각이다.

토큰이 진짜 무엇인지 알아보기 위해 간단한 예시를 들어보겠다.

#0866FF (파란색)이라는 값이 있다.

이 파란색이 여기저기 다양한 목적으로 사용될 수 있기에 목적과 사용에 맞는 의미를 부여해 주는 그 값이 토큰이다.

그럼 재미를 위해 현재 '집을 다 짓고 인테리어를 위해 페인트칠을 할 상황'이라고 가정해 보겠다. #0866FF란 파란색이 집의 인테리어를 하는데에 쓰일 페인트 색이다. 나는 저 파란색을 우리 집을 상징하는 포인트 배경색으로 정했다. 그리고 집의 현관문에는 저 포인트 색을 칠하고 싶다. 또한 달콤한 오렌지 빛깔이 나는 주황색을 부주제 색으로 정하고 이를 지붕과 창문틀에 칠할 것이다.

이를 좀 더 보기 쉽게 정리해 보자면

#0866FF(파란색) - 포인트 배경색 - 현관문 배경색

#FF9029(주황색) - 부주제 배경색 - 지붕 & 창문틀 색

첫 번째에 있는 #로 시작하는 값들은 Raw value이다. 즉 토큰이 없는 상태이다.

두 번째에 토큰들은 목적이나 역할을 나타내는 기본적인 토큰들로써 Alias token 혹은 Semantic token이라고 불린다.

세 번째에 위치한 토큰들은 좀 더 특정한 제품이나 부분에 사용될지 정해놓은 값이므로 Component specific token이라고 부를 수 있다.

여기서 알아챌 수 있는 힌트는 #으로 시작하는 색깔 숫자에서 오른쪽으로 갈수록 그 범위가 점점 좁아진다는 것이다.

더 나아가 이를 영어밖에 할 줄 모르는 페인트칠하는 엔지니어에게 전달한다고 해보면 이렇게 정리할 수 있다.

#0866FF = color-bg-primary = color-bg-frontDoor

#FF9029 = color-bg-secondary = color-bg-roof

#FF9029 = color-bg-secondary = color-bg-window

그리고 좀 더 욕심 있는 디자이너라면 저 Raw value들도 가만히 놔두고 싶지 않을 것 같다.

Foundation token이라는 것들을 추가해서 색깔 별로 관리하면 더 일관성 있는 색을 사용하는 디자인 시스템을 만들 수 있다.

위에서 이야기한 파란색을 흰색 페인트를 섞던 검은색 페인트를 섞어 들을 조절해서 blue-00부터 blue-100까지 나열하여 정리하면 파란색에 대한 Foundation token이 완성된다. 파란색 안에서의 색상 차이는 컴퓨터에서는 색상(Hue) 채도(Saturation) 명도(Brightness)를 조정할 수 있다.

Foundation token이 추가된 상태라면 이렇게 한 계층이 더 추가된다.