시맨틱 토큰 없이 디자인 시스템을 운영하고 있다면, 확장성과 효율성을 위한 핵심 도구를 놓치고 있는 셈입니다.

정의

시맨틱 토큰을 사용하면 디자인 결정을 원시 값이 아닌 용도에 따라 정의하는 구조적이고 유연한 시스템을 만들 수 있습니다. 버튼이나 텍스트에 고정된 색상 코드를 직접 할당하는 대신, primary-button-bg나 warning-text 같은 토큰을 사용하는 방식입니다.

즉, 기본 버튼의 배경색이 blue/500이 되는 것이 아니라 primary-button-bg가 되며, 이 토큰에 blue/500이라는 값이 연결되어 있습니다(여기에는 HEX 색상 코드 #5A8DD7이 적용되어 있습니다).

시각적인 예시로 살펴보겠습니다. 다만 실제로 적용해 보기 전까지는 이 방식이 얼마나 유용한지 체감하기 어렵다는 점을 염두에 두세요.

일반적으로는 이렇게 요소에 변수를 적용합니다:

이제 component-2의 외곽선을 #0D0D0D로 바꾸고 싶다고 해보겠습니다. 그러면 이렇게 해야 합니다:

별거 아닌 것처럼 보이지만, 시스템 규모가 커지기 시작하면 어떤 HEX 값을 어떤 컴포넌트나 요소에 적용해야 하는지 파악하기가 금세 어려워집니다.

대신 시맨틱 토큰을 적용해 각 요소에 어떤 변수를 사용해야 하는지 명확하게 만들어야 합니다.

이렇게 하면 업데이트가 훨씬 쉬워집니다. 토큰을 한 번만 바꾸면 모든 곳에 적용되니까요! 어떻게 하는지 보여드리겠습니다…

왜 필요한가

확장성

디자인 시스템이 커질수록 여러 컴포넌트에 걸쳐 스타일을 수동으로 업데이트하는 일은 감당하기 어려워집니다. 시맨틱 토큰을 사용하면 한 곳에서 변경한 내용을 시스템 전체에 일관되게 적용할 수 있습니다.

예를 들어 기본 색상을 바꾸되, page-title 컴포넌트에서만 바꾸기로 했다고 해보겠습니다. 시맨틱 토큰을 제대로 적용해 두었다면 컴포넌트 자체를 수정할 필요가 없습니다. 변수 창에서 연결된 토큰만 변경하면 됩니다.

혹은 디자인 시스템에서 #black/600이 배경색으로 잘 어울리지 않는다는 걸 깨달았을 수도 있습니다. 그럴 때는 변수 설정으로 가서 surface-alt를 다른 primitive 토큰으로 교체하기만 하면 됩니다.

일관성과 유지보수성

구체적인 값보다 기능에 초점을 맞추기 때문에, 시맨틱 토큰은 제품 전반에 걸쳐 더욱 통일되고 일관된 룩을 보장합니다. 더 이상 어떤 값을 써야 할지 추측하거나 기억할 필요가 없습니다. 적절한 이름의 시맨틱 토큰을 선택하기만 하면 됩니다.

메인 테두리에는 어떤 색을 써야 할지 기억하려고 애쓸 필요가 있을까요? 간단합니다. stroke-primary입니다.

테마와 커스터마이징

다크 모드를 도입하든, 브랜드 커스터마이징을 하든, 다양한 스타일을 A/B 테스트하든, 시맨틱 토큰은 그 과정을 간소화합니다. 일일이 원시 색상 값을 수정하는 대신, 더 높은 수준에서 토큰을 교체하면 됩니다.

미래를 대비하는 디자인 시스템

디자인과 구현 사이에 명확한 추상화 계층을 두면, 시맨틱 토큰을 통해 기존 디자인을 망가뜨리지 않고도 시간이 지나면서 시스템을 더 쉽게 발전시킬 수 있습니다.

회사의 새로운 브랜딩에 맞춰 새로운 컬러 스킴을 출시해야 하나요? primitive 값만 수정하면 됩니다.

구축 방법

핵심 디자인 토큰 정의하기

색상, 타이포그래피, 간격 등 핵심 디자인 속성을 위한 기초 토큰을 만드는 것부터 시작하세요.

보통 저는 이러한 원시 값을 primitives라는 별도의 컬렉션에 만듭니다.

Pro-tip: Tailwind CSS Color Generator를 사용해 기본 색상 팔레트를 빠르게 불러오고, Export/Import Variables 플러그인을 사용해 파일 간 설정을 가져오고 내보내세요.

핵심 토큰을 시맨틱 토큰으로 매핑하기

다음으로, 이러한 값이 UI에서 어떻게 사용되는지를 설명하는 시맨틱 토큰을 정의하세요. 이는 추상화 계층 역할을 하여 기본 구조에 영향을 주지 않고 스타일을 더 쉽게 업데이트할 수 있게 해줍니다.

시맨틱 토큰을 설정하는 데는 시간이 걸리며, 진행하면서 접근 방식을 다듬어야 할 수도 있습니다. 하지만 일단 구축해 두면 확장성과 유지보수성이 크게 향상되고, 불일치를 줄이며 개발 속도를 높일 수 있습니다. 충분히 투자할 가치가 있는 일입니다.

변수 범위 제한하기

마지막으로, 특정 변수를 어떤 요소에 적용할 수 있는지 범위를 제한하세요. 이를 위해 먼저 primitives로 이동해 모든 변수를 비활성화합니다.

그런 다음 토큰을 하나씩 살펴보며 적용 범위를 정의하세요. 아래 예시에서는 border 관련 토큰을 외곽선 요소에만 적용되도록 제한했습니다.

이제 외곽선에 변수를 적용하려고 하면 해당되는 변수만 표시되어 올바른 변수를 선택하기가 정말 쉬워집니다!

이 글은 완전한 튜토리얼이 아닙니다

디자인 시스템에 시맨틱 토큰을 적용하는 방법을 더 자세히 배우고 싶다면, 먼저 Figma의 이 튜토리얼부터 시작해 보시길 권합니다. 그 다음에는 직접 가지고 놀아보면서 자신의 디자인 시스템에 적용해 보는 것이 시맨틱 토큰을 어떻게 활용하고 싶은지 이해하는 가장 좋은 방법입니다.

맞습니다. 시맨틱 토큰을 설정하는 과정은 길고 지루할 수 있지만, 그 효과는 엄청납니다. 아직 디자인 시스템에 시맨틱 토큰을 도입하지 않았다면, 한번 시도해 보시길 권합니다!

기억하세요. 중요한 것은 outcomes over outputs입니다. 완벽한 문서가 아니라 팀에 정말 필요한 것에 집중하세요.