디자인 토큰 이해

입문 단계에서는 색이나 글자 크기를 필요할 때마다 즉석에서 정했습니다. 그러다 보면 같은 회색인데 어떤 곳은 #888, 다른 곳은 #8a8a8a처럼 미묘하게 어긋나고, 화면이 묘하게 지저분해 보입니다. 이 챕터에서는 그 혼란을 정리하는 핵심 개념인 디자인 토큰(design token)을 배웁니다. 토큰이란 디자인에서 반복되는 결정을 이름 붙여 한곳에 모아 둔 값입니다. 마치 요리에서 양념을 매번 눈대중으로 넣는 대신, 미리 계량한 통에 담아 두고 꺼내 쓰는 것과 같습니다.

왜 값에 이름을 붙이는가

색 #a78bfa를 사이트 곳곳에 그대로 적어 두면, 브랜드 색을 바꾸고 싶을 때 모든 파일을 뒤져 일일이 고쳐야 합니다. 대신 --color-primary라는 이름을 만들고 그 안에 색을 넣으면, 이름은 그대로 두고 값 하나만 바꿔도 사이트 전체가 따라 바뀝니다. 이름은 '무엇에 쓰는 색인가'라는 의도를 담고, 값은 '실제로 어떤 색인가'를 담습니다. 이 둘을 분리하는 것이 토큰의 본질입니다.

:root {
  --color-primary: #a78bfa;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
}

.button {
  background: var(--color-primary);
  color: var(--color-bg);
}

세 가지 핵심 토큰 묶음

토큰은 보통 세 영역으로 나눕니다. 처음에는 이 세 가지만 정리해도 화면이 눈에 띄게 단정해집니다.

• 색(color) — 주조색, 본문 텍스트, 흐린 보조 텍스트, 배경, 경계선처럼 역할별로 이름을 붙입니다.
• 타이포(typography) — 글자 크기와 굵기, 줄 간격을 단계로 정리합니다.
• 간격(spacing) — 여백과 요소 사이 거리를 일정한 배수로 통일합니다.

간격은 배수로 묶는다

여백을 5px, 7px, 13px처럼 제멋대로 쓰면 리듬이 깨집니다. 보통 4px를 기준 단위로 삼아 그 배수(4, 8, 12, 16, 24, 32)만 사용합니다. 이렇게 정해진 후보 안에서만 고르면 선택이 빨라지고 결과가 일관됩니다. 이런 '정해진 후보 묶음'을 스케일(scale)이라고 부릅니다.

타이포 스케일

글자 크기도 마찬가지로 단계를 정합니다. 예를 들어 본문 16px를 기준으로 제목은 24px, 큰 제목은 32px처럼 또렷이 구분되는 몇 단계만 둡니다. 단계가 너무 촘촘하면 위계가 흐려지므로, 차이가 분명한 4~5단계면 충분합니다.

토큰은 디자이너의 취향을 코드로 옮긴 약속입니다. 약속이 한곳에 모여 있으면, 나중에 누구든 그 약속만 바꿔 사이트 전체의 인상을 통째로 바꿀 수 있습니다.