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

시맨틱 토큰이란

시맨틱 토큰을 사용하면 디자인 결정을 단순한 값이 아닌 용도를 기준으로 정의하는 체계적이고 유연한 시스템을 만들 수 있습니다. 버튼이나 텍스트에 고정된 컬러 코드를 직접 지정하는 대신 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라는 별도의 컬렉션에 만들어 둡니다.

팁: Tailwind CSS Color Generator를 사용하면 기본 컬러 팔레트를 빠르게 불러올 수 있고, Export/Import Variables 플러그인을 사용하면 파일 간에 설정을 가져오고 내보낼 수 있습니다.

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

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

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

변수 범위 제한하기

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

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

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

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

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

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

기억하세요. 중요한 것은 결과물이 아닌 성과입니다. 완벽한 문서가 아니라 팀에 실제로 필요한 것에 집중하세요.