Design System Tokens — semantic 토큰·티어드 컴포넌트·Storybook 배포
앱마다 색깔을 직접 칠하지 않고, "중앙 팔레트"에 색 이름표를 붙여 두고 앱은 그 이름표만 불러 쓰는 방법이에요. 그러면 나중에 브랜드 색을 바꿀 때 팔레트 한 곳만 고치면 온 화면이 한 번에 갈아입어요.
비유: 교실 물감 이름표 🎨
미술 시간에 친구 30명이 각자 "파란색"을 칠한다고 해봐요.
- 나쁜 방법 = 각자 물감통을 열어 눈대중으로 파랑을 섞어요. 나중에 선생님이 "우리 반 대표색을 초록으로 바꾸자!" 하면, 30명이 전부 다시 칠해야 해요. 😵
- 좋은 방법 = 큰 물감통 하나에 "대표색" 이라고 이름표를 붙여요. 모두 그 이름표만 보고 붓을 담가요. 대표색을 초록으로 바꾸고 싶으면? 그 물감통 하나만 초록으로 채우면 30명 그림이 동시에 초록이 돼요. 🌿
여기서 이름표(토큰) 가 핵심이에요. "파랑"(값)이 아니라 "대표색"(역할) 이라고 부르는 게 비결이에요. 이름은 그대로 두고 안에 담긴 색만 바꾸니까요.
이름표는 '역할'로 붙여요
색깔 이름(보라색)이 아니라, 그 색이 하는 일로 이름을 지어요.
- 버튼은 "대표색으로 칠해줘" 라고만 말해요. 무슨 색인지는 몰라요.
- 팔레트가 "대표색 = 파랑" 이라고 정해주면 파랑이 되고, "대표색 = 초록" 으로 바꾸면 초록이 돼요. 앱은 값을 몰라도 돼요.
낮과 밤을 스위치 하나로 (라이트·다크)
같은 이름표에 낮 값과 밤 값을 둘 다 적어둬요. 스위치를 누르면 팔레트가 안에 든 값만 밤 버전으로 바꿔치기해요.
똑똑한 약속 하나 더 — 바탕색과 그 위 글씨색은 항상 짝으로 정해요. "카드 바탕" 옆에는 꼭 "카드 글씨" 가 붙어다녀요. 그래서 바탕이 아무리 진해져도 글씨가 안 보이게 묻히는 사고가 안 나요.
트레이드오프 (쉽게)
- 처음엔 좀 귀찮아요. "그냥 파랑 칠하면 되는데 왜 이름표를 만들어?" 싶어요.
- 하지만 화면이 많아질수록 이득이 커져요. 리브랜딩·다크모드가 "한 곳 수정" 으로 끝나니까요. 화면 두세 개짜리 작은 앱이면 굳이 안 해도 돼요.
핵심만 다시
- 색을 앱에 직접 칠하지 말고, 중앙 팔레트에 이름표(토큰) 를 붙여요.
- 이름은 색깔이 아니라 역할로 — "대표색", "위험색", "배경색".
- 낮/밤·브랜드 교체는 팔레트 값만 바꾸면 온 화면이 동시에 바뀌어요.
- 바탕색과 글씨색은 짝 — 그래서 글씨가 안 묻혀요.
더 자세한 진짜 코드·설계는 옆의 개요 / Variants / Apply Recipe 탭에서 볼 수 있어요.