버튼 색 하나 바꾸다 밤샌다면, 토큰이 답이다
유지보수와 협업 효율을 높이는 디자인 UI토큰 관리
1. 버튼 색을 하나 바꾸려다가 밤을 새운 적이 있다면.. 토큰이 필요한 시기이다.
인하우스 디자이너라면 공감하는 주제일듯하다. 처음 시안 이 몇 개 없을 때, 최종결정자의 지시에 따라 프로덕트를 대표하는 Primary, Sencondary 컬러를 변경할 때도 있고, 디자이너 스스로 컬러 밸런스가 맞지 않다고 느껴, 컬러의 미세한 조정이 필요할 때가 분명히 있다.
이때, 시안이 몇 개 없더라면, 컬러를 바꾸는 데에 크게 리소스가 많이 들지 않을 것이다. 하지만 프로덕트의 범위가 확장됨에 따라 시안의 개수도 많아지고, 그만큼 수정해야 할 컬러도 많아진다.
수많은 디자이너들이 이를 공감했고, 해결하기 위한 솔루션이 필요했다. 다행히도, 피그마에도 그러한 문제를 해결한 기능을 제공하고 있다.
2. 토큰이라는 작은 해답, 디자인 효율을 지키는 방법
피그마에서는 토큰을 활용할 수 있도록 varialble기능을 제공해주고 있다. (피그마 플러그인 중에 token studio for figma라는 플러그인을 제공해주고 있으니, 그것을 활용해도 좋다. 이 글을 Variable 기능 활용을 중심으로 글을 전개해 나간다.)
가령 우리의 버튼의 Primary color가 #78BBFA이다. 다만 최종결정자의 의견에 따라 버튼의 색을 오렌지에 가까운 #FF5938로 바꾼다고 생각해 보자
아찔하다 디자이너는 "버튼의 #78BBFA"만 바꾸고 싶은데, #78BBFA로 잡혀있는 다른 컴포넌트(선, card, checkbox, radio button 등) 많은 요소들이 색이 동시에 바뀌게 생겼다...
그럼 생각할 것이다. 버튼의 #78BBFA 컬러만 변경하는 방법은 없을까? 중요한 건 "버튼의"라는 관형표현이다.
3. 그래서 토큰이 필요한 거구나
설명에 앞서, 개념을 하나 확립하고 가자.
토큰을 구성하기 위해서 3가지 그룹을 먼저 정하고 가야 한다.
Primitive, Semantic, Component
01. Primitive = RGB컬러를 채도순에 따라 정의한 것. ex) blue/500, orange/600
02. Semantic = Primitive를 맥락에 맞게 의미를 부여하여 재사용 가능한 토큰으로 정의한 것 ex) primary-fill, primary-border
03. Component = Semantic 토큰을 실제 UI 컴포넌트에 매핑하여 일관된 디자인을 구현하는 것
Component단계까지는 갈 필요가 없다.
01. Primitive
그럼 일단, #78BBFA이 컬러를 깔끔한 명칭으로 다듬어보자 음... blue/600 정도가 좋겠다.
#FF5938는 orange/600이라고 하자.
#78BBFA = blue/600
#FF5938 = orange/600
축하한다. 우리가 방금 한 것은, RGB컬러를 Primitive 토큰으로 정의한 것이다.
02. Semantic(이 문단에서 "아 그래서 토큰이 필요한거구나" 라는 생각이 들어야한다.f)
이제 단순 색상 값(primitive)을 그대로 쓰는 대신, 버튼에서 쓸 의미 있는 이름표(semantic 토큰)를 만들어 연결해야 한다. 예를 들어,
blue/600을 직접 버튼에 넣는 게 아니라
button/primary-fill이라는 semantic 토큰을 만들고, 이 토큰이
blue/600을 참조하도록 설정한다.
그러면 버튼은 더 이상 색상 코드에 직접 의존하지 않고,
button/primary-fill이라는 semantic 토큰을 통해 색상을 불러오게 된다.
그럼 이 blue/600을 버튼 안에 종속시켜 보자.
button/primary-fill이라는 토큰을 만들고, blue/600과 연결시켜 준다.
button/primary-fill = blue/600
자 다시, 우리의 모든 버튼에 blue/600이 아닌, button/primary-fill을 연결 주면 토큰을 연결해 주자.
그리고 button/primary-fill에 종속되어 있는 blue/600을 orange/600으로 한 번만 딸깍! 해주면
모든 버튼의 컬러는 orang/600로 변경된다.
자. 이제 언제든지 버튼의 컬러를 변경하고 싶으면, 버튼을 전부클릭하여 일일이 바꾸지 않아도, variable기능을 통해서 컬러만 변경해 주면 모든 버튼의 컬러는 일괄적으로 변경된다.
4. 개발자와의 협업에서도 용이
이러한 개념은 개발에서도 사용된다. 우리 team의 프론트 개발자는 tailwind css를 활용하여 컬러를 관리한다. 정확히 피그마의 varialble과 동일한 개념이다.
5. 마무리하며...
토큰에 대해서 어느 정도 이해가 되었는가? 예시 중심의 설명이라 이해가 되었으리라 믿는다. 다만, 글만 읽고, 이해가 되었다고 생각하는 것은 착각이다. 지금은 버튼 하나의 색만 바꾸는 것을 예시로 두었지만, 버튼 안의 텍스트, 선, 상태(default, hovered, pressed 등)등을 정의해주어야 한다.
이뿐인가? 컴포넌트에서 사용되는 맥락중심의 컬러를 아카이빙 또는 카테고리화하여 컬러의 사용용도를 파악하고, 디자이너의 판단하에 토큰 네이밍을 하여 토큰 정리 및 컴포넌트에 토큰을 부여해주어야 한다.
직접 해보아야 한다. 그러면 내 것이 된다. 아래 이미지는 내가 직접 실무에서 토큰을 구성했던 것의 일부이다. 토큰을 일일이 세어보진 않았지만 아마 몇백 개는 되었으리라
언제든지 댓글로 물어보아도 된다. 정성스레 답변해 줄 것이다.
