디자인 시스템 만들기 1일차 - 토큰 수집하기

Intro...

저는 회사에서 컴포넌트 라이브러리를 배포해 사용하고 있습니다. 디자인 시스템을 만들고 싶었지만, 일단 디자이너가 없고 만들 수 있는 업무 시간이 따로 주어지진 않아서 감각대로 주먹구구식으로 만들다보니 막상 컴포넌트를 유연하게 스타일링하기가 불편하더라고요. 하루에도 수십번 npm publish 를 하면서 업데이트하곤 했어요.

그러던 중, 원티드랩에서 공유해주신 디자인 시스템 개발기를 읽었습니다. 사이즈에 대한 토큰명을 정하는 것에도 일주일씩 고민하며 체계적으로 만드는 모습을 보면서 저도 제대로 만들어보고 싶다고 생각했습니다.

짧은 시간에 만들긴 했지만 컴포넌트 구조도 많이 고민하며 만든 라이브러리인데 막상 스타일링에서 막히니 답답했습니다.

1. 디자인 시스템 톺아보기

직접 만들어보니 왜 토큰을 먼저 수집해야 하는지 알겠더라고요. 토큰은 컴포넌트 스타일링의 기초가 되고, 만들기도 편해지고 협업에도 큰 도움이 되기 때문이에요. 7월 달에 공개된 원티드랩 디자인 시스템을 자세히 살펴보면서 색상 토큰이 Atomic, Semantic 레이어(계층)로 나뉘어져 있다는 것을 알게 됐습니다. Semantic/Primary, Atomic/Blue, Atomic/Orange 등 처럼요.

1-1. Atomic

물리 색상 계층으로 가장 원초적인 원색/스펙트럼 색상을 뜻한다고 합니다. 이 Atomic 레이어는 절대 컴포넌트에서 직접 쓰지 않고 Semantic 색상에 의해 참조됩니다.

1-2. Semantic

의미 또는 역할 기반의 레이어입니다. 이 색상이 어떤 상황에서 쓰여야 하는지 역할을 명시하고 실제 색상값은 아래 Atmoic 레이어에서 공급되는 것이죠.

1-3. 왜 레이어를 분리했을까?

색상 레이어를 분리하면 생기는 장점이 뭘까요?

만약 브랜드 색상이 바뀌더라도 UI 전체를 한번에 바꿀 수 있게 됩니다. 만약 원티드의 Primary색이 Blue에서 Purple로 바뀐다면 Atomic/Blue 값을 Purple로 바꾸지 않고 Semantic/Primary가 Atomic/Purple 계열을 바라보게 조정하면 됩니다.

2. 토큰 수집하기

그래서 오늘은 토큰을 수집했습니다. 디자인 시스템을 만들기 시작한 이상, #323232 와 같이 하드코딩하는 일이 없어야 해요. 피그마에서 일일히 찾기가 힘들었지만, 코드로 작성하기 편리하도록 색상, 텍스트의 스타일을 모두 찾아서 정리했습니다.

_Accent 안에서 왜 Foreground/Background로 계층을 분리했을까? _ 하는 궁금증들은 GPT를 활용하면서 정리했어요. 디자이너는 이런식으로 시스템을 구축하는구나 조금이나마 알게 됐던 것 같습니다.

그런데 가이드라인을 읽어보니 이미 토큰값들도 보기 좋게 제공해주셨더라구요 ㅋㅋㅋㅋㅋ
역시 문서를 꼼꼼히 읽어봐야 합니다 ㅠ 그래도 찾아보면서 많이 배웠으니 만족,,

3. CSS 변수 세팅하기 (다음 시간에...)

CSS는 바닐라 익스트렉트(Vanilla-Extract)를 사용할 예정입니다. 포트폴리오를 만들면서 런타임 제로 특성 덕분에 Next와도 호환이 좋다는 걸 경험했고, 개인적으로 Tailwind처럼 클래스명이 길어지는 걸 별로 안좋아하기 때문이에요.

다음 시간에는 원티드랩 디자인 가이드라인을 조금 더 자세히 읽으면서 CSS 변수 세팅을 하려고 합니다. 조만간 2편을 올려보겠습니닷!