다크모드 어떻게 하냐구요? 디자인 토큰 쓰세요

디자인 토큰이란 무엇인가?

---

디자인 토큰은 디자인 결정을 저장하는 작은 데이터 조각입니다. 색상, 간격, 글꼴 크기 같은 디자인 요소를 `primary-color: #3B82F6` 같은 이름-값 쌍으로 정의해 두는 것이죠.
비유하자면, 레고 설명서 같은 겁니다. "빨간 블록 2개, 파란 블록 4개"라고 적혀있으면 어떤 나라에서든 똑같은 결과물을 만들 수 있겠죠? 디자인 토큰도 마찬가지입니다. 한 번 정의해 두면 웹, 앱, 심지어 마케팅 자료까지 모든 플랫폼에서 동일한 디자인을 구현할 수 있습니다.
 
 
 

왜 디자인 토큰이 필요한가?

---

문제 1: 개발자마다 다른 파란색

디자이너가 Figma에서 만든 버튼은 `#3B82F6`인데, 개발자 A씨는 `#3B82F6`을 쓰고, 개발자 B씨는 "비슷해 보이는" `#4A90E2`를 쓰고, 개발자 C씨는 "대충 blue"라고 적어버립니다. 결과는? 같은 서비스인데 페이지마다 미묘하게 다른 파란색 버튼들이 나타납니다.

미묘하게 다른 파란 버튼들

 

문제2: 디자인 변경의 악몽

팀원이 "브랜드 컬러를 파란색에서 초록색으로 바꿔야 해요"라고 합니다. 그럼 이제 뭘 해야 할까요? 코드 전체를 뒤져서 `#3B82F6`을 찾아 바꿔야 합니다. 100개 파일에서, 500군데를. 하나라도 놓치면? "왜 여기만 파란색이에요?"하는 버그 리포트가 날아옵니다.
 

문제3: 다크모드, 반응형, 접근성...

요즘 웹사이트는 라이트/다크 모드를 둘 다 지원해야 하고, 모바일/태블릿/데스크탑에서 각각 다르게 보여야 하며, 시각 장애인을 위한 고대비 모드도 필요할 수 있습니다. CSS 변수로 이걸 다 관리하려면? 지옥입니다.
 
디자인 토큰은 이 모든 문제를 해결합니다. 한 곳에서 색상을 정의하면 모든 플랫폼, 모든 테마에 자동으로 적용되죠.
 
 
 

디자인 토큰의 구조와 계층

---

디자인 토큰에는 세 가지 레벨이 있습니다. 집을 짓는 것에 비유해 볼까요?
 

1단계: 기초 토큰

건축에 비유하자면 건축 자재입니다. 벽돌, 시멘트, 나무 같은 원자재죠.

blue-500: #3B82F6
gray-100: #F3F4F6
spacing-4: 16px
font-size-lg: 18px

큰 의미는 없습니다. 그냥 "이런 값들이 있다"는 선언일 뿐이죠.
 

2단계: 의미 토큰

자재로 만든 부품입니다. 문, 창문, 계단 같은 것들입니다.

color-primary: {blue-500}
color-background: {gray-100}
size-button-padding: {spacing-4}
text-heading: {font-size-lg}

이제 의미가 생겼습니다. "primary는 브랜드 색상이다", "background는 배경색이다"라고요.
 

3단계: 컴포넌트 토큰

실제로 사용하는 방입니다. 거실, 침실, 주방처럼 구체적인 용도가 있는 공간이죠.

button-primary-background: {color-primary}
button-primary-text: {color-white}
card-background: {color-background}
card-padding: {size-button-padding}

이제 "버튼에 쓸 색", "카드에 쓸 배경"처럼 아주 명확해졌습니다.
 
왜 이렇게 나눌까요? 한 번에 한 층만 수정하면 되기 때문입니다.
브랜드 색상을 파란색에서 초록색으로 바꾼다면? 1단계만 수정하면 끝입니다:

blue-500: #22C55E  // 이 한 줄만 바꾸면 됨!

 
다크모드를 추가한다면? 2단계만 수정하면 됩니다:

// 라이트 모드
color-background: {gray-100}

// 다크 모드
color-background: {gray-900}

 
버튼 디자인을 바꾼다면? 3단계만 건드리면 됩니다.
 

실전 예시

간단한 "로그인" 버튼 하나를 만든다고 가정합시다. 디자인 토큰 없이 만들면:

.login-button {
  background: #3B82F6;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
}

보기에는 꽤나 괜찮습니다. 근데 문제는 이 코드를 쓴 개발자 본인만 기억한다는 것입니다. 다른 개발자가 회원가입 버튼을 만들 때 이 값들을 기억하고 똑같이 쓸까요? 절대 아닙니다. 그래서 비슷하지만 미묘하게 다른 버튼들이 사방에 생깁니다 (물론 React, Vue.js 같은 프레임워크(또는 라이브러리)에서 컴포넌트 단위로 모듈화를 하겠지만, 그렇게 해도 이 문제가 완벽하게 해결되지는 않습니다.).
 
디자인 토큰으로 만들면:

.login-button {
  background: var(--button-primary-background);
  color: var(--button-primary-text);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  font-size: var(--text-button);
  border-radius: var(--radius-medium);
}

이제 회원가입 버튼을 만드는 개발자도 같은 토큰을 쓰게 됩니다. 자동으로 일관성이 생기는 거죠. 더 좋은 건, 나중에 "모든 버튼을 좀 더 둥글게 만들어야겠다"고 하면 `--radius-medium` 하나만 바꾸면 된다는 점입니다.
 
 
 

디자인 토큰 vs CSS 변수, 뭐가 다른가?

---

많은 분들이 헷갈려 하는 부분입니다. CSS 변수도 `--primary-color` 같은 이름으로 값을 저장합니다. 그럼 디자인 토큰이랑 뭐가 다른가요?
 
CSS 변수는 "구현체"입니다.
 
CSS 변수는 브라우저에서만 작동합니다. 웹에서만 쓸 수 있다는 거죠. iOS 앱 개발자는 Swift로, Android 개발자는 Kotline으로 똑같은 색상을 다시 정의해야 합니다. 그 과정에서 실수가 생길 수 있죠.

/* 웹 개발자가 작성 */
--primary-color: #3B82F6;

// iOS 개발자가 다시 작성 (오타 발생!)
let primaryColor = UIColor(hex: "#3B82E6")  // E6이 아니라 F6인데...

 
디자인 토큰은 "설계도" 입니다.
 
디자인 토큰은 플랫폼에 독립적입니다. 보통 JSON이나 YAML 같은 중립적인 형식으로 저장하고, 거기서 CSS, Swift, Kotlin, React Native 등 필요한 형식으로 자동 변환합니다.

{
  "color": {
    "primary": {
      "value": "#3B82F6",
      "type": "color"
    }
  }
}

이 한 파일에서:

/* 웹용으로 자동 생성 */
--color-primary: #3B82F6;

// iOS용으로 자동 생성
static let colorPrimary = UIColor(hex: "#3B82F6")

// Android용으로 자동 생성
val colorPrimary = Color(0xFF3B82F6)

한 곳에서 정의하고, 어디서든 쓸 수 있습니다. 실수도 줄고, 유지보수도 쉬워집니다.
 
 
 

도구 추천: Color Palette MCP로 시작하기

---

디자인 토큰이 좋은 건 알겠는데, "브랜드 컬러 하나로 50~900 스케일의 팔레트를 어떻게 만들지?" 고민이 되시나요?

 
제가 만든 Color Palette MCP를 소개합니다! 

 
Claude나 Cursor와 연결해서, 브랜드 컬러 하나만 입력하면 조화로운 색상 팔레트 전체를 자동으로 생성해 줍니다. Figma Tokens 뿐만 아니라 CSS Variables, Tailwind Config, SCSS Variables도 만들 수 있습니다.
 
GitHub: https://github.com/ppower-dev/color-palette-mcp

GitHub - ppower-dev/color-palette-mcp: An MCP server that generates harmonious CSS color palettes from a single brand color inpu