디자인 토큰

정의

디자인 토큰은 색, 간격, 모서리 반경처럼 화면 곳곳에서 되풀이되는 값에 이름을 붙여 두고, 실제 코드에서는 그 이름으로 참조하게 만드는 방식입니다. 15px이나 파란색 코드값을 여기저기 직접 적는 대신 --space-md, --color-accent 같은 이름을 두고 그것을 가리키는 것입니다. 이렇게 하면 이름 뒤에 담긴 값 하나만 바꿔도 그 토큰을 쓰는 모든 자리가 한 번에 함께 바뀝니다. 값과 그 값이 쓰이는 곳을 이름이라는 한 겹으로 분리해, 흩어진 수치를 하나의 중앙 목록으로 묶는 것이 디자인 토큰의 핵심입니다.

왜 중요한가

하드코딩된 값이 화면 곳곳에 흩어져 있으면 나중에 무언가를 바꿀 때 그 값을 쓴 모든 자리를 일일이 찾아 고쳐야 하고, 하나라도 놓치면 화면이 미묘하게 어긋납니다. 토큰을 쓰면 다크 모드 전환, 브랜드 색을 바꾸는 리브랜딩, 여러 제품의 스타일 통일이 모두 한 곳만 손보는 일로 바뀝니다. 또한 이름 자체가 값의 의도를 설명해 주어, --color-accent를 보면 그것이 강조색이라는 역할을 코드만 읽어도 알 수 있습니다. 개별 값을 외우던 작업이 의미가 담긴 시스템을 다루는 작업으로 바뀌면, 협업하는 여러 사람이 같은 규칙 위에서 일관된 화면을 만들 수 있게 됩니다. 결국 토큰은 흩어진 결정들을 한 목록으로 모아, 디자인을 개인의 감이 아니라 팀이 공유하는 약속으로 바꾸어 놓습니다.

흔한 실수

• 토큰 이름에 색이나 수치를 그대로 박아 넣는 것입니다. --blue-500 대신 역할을 담은 --color-accent처럼 지어야, 나중에 강조색을 초록으로 바꿔도 이름이 값과 어긋나 혼란을 주는 일이 없습니다.
• 토큰을 만들어 놓고도 급할 때 다시 원래 수치를 직접 적어 버리는 것입니다. 예외가 하나둘 쌓이면 토큰의 의미가 무너져, 한 곳만 바꾸면 된다는 장점이 사라지고 결국 다시 흩어진 값들을 뒤지게 됩니다.
• 처음부터 지나치게 많은 토큰을 만들어 두는 것입니다. 쓰지도 않을 값까지 미리 이름 붙여 두면 어떤 토큰을 골라야 할지 오히려 헷갈리므로, 실제로 반복되는 값이 보일 때 하나씩 토큰으로 승격시키는 편이 관리하기 쉽습니다.

실무 팁

• 토큰은 무엇의 값인지가 아니라 어떤 역할인지로 이름 지으세요. 강조, 배경, 경계처럼 쓰임을 드러내는 이름을 붙이면 다크 모드나 리브랜딩 때 값만 갈아 끼워도 이름과 의미가 어긋나지 않아, 변경이 훨씬 안전하고 빨라집니다.
• 이 도구에서 배운 간격, 색, 반경, 그림자 같은 값들을 하나씩 토큰으로 묶어 보세요. 낱개로 익힌 개념들을 이름 붙은 시스템으로 엮는 순간, 흩어져 있던 지식이 실제로 재사용 가능한 나만의 디자인 시스템으로 완성됩니다.
• 원본 값과 화면에서 참조하는 이름을 두 층으로 나눠 두면 관리가 한결 편해집니다. 기본 색이나 간격 값을 아래층에 두고 강조나 본문 같은 역할 이름이 그것을 가리키게 하면, 다크 모드처럼 역할만 다시 잇는 변경을 아주 깔끔하게 처리할 수 있습니다.

관련 개념