디자인 토큰 (Design Token)
별칭: design token · design tokens · 디자인 토큰 · 스타일 토큰
색, 폰트, 간격, 둥글기 같은 디자인 값을 이름 붙여 재사용하는 최소 단위.
디자인 토큰은 #068FFF 같은 값을 blue, primary, card-radius처럼 의미 있는 이름으로 저장해 여러 화면에서 재사용하게 하는 방식이다. 수업의 "색 1개 · 폰트 1개 · 둥글기 1개"가 가장 작은 토큰 세트다.
정의
디자인 토큰은 디자인 시스템에서 반복해서 쓰는 값을 이름 붙여 저장한 최소 단위다. 색상, 글꼴, 글자 크기, 간격, 그림자, 둥글기 같은 값을 코드와 디자인 도구가 함께 이해할 수 있는 형태로 관리한다.
왜 중요한가
같은 파란색을 화면마다 직접 입력하면 나중에 색을 바꿀 때 모든 파일을 찾아 고쳐야 한다. 토큰으로 --primary-color처럼 이름을 붙이면 한 곳에서 바꾼 값이 여러 화면에 적용된다. AI에게도 "파란색은 이 토큰을 쓰라"고 말할 수 있어 결과가 흔들리지 않는다.
Semiclass에서의 의미
의식 2의 "민낯을 토큰으로"는 초보자가 디자인을 거창하게 시작하지 않아도 된다는 뜻이다. 색 1개, 폰트 1개, 둥글기 1개만 정해도 버튼, 카드, 입력창, 배지의 기준이 생긴다. 이후 프롬프트마다 색과 폰트를 다시 설명하지 않아도 된다.
주의할 점
여기서 말하는 디자인 토큰은 LLM의 토큰과 다르다. LLM 토큰은 모델이 텍스트를 쪼개는 단위이고, 디자인 토큰은 UI 스타일 값을 재사용하기 위한 이름 있는 값이다. 위키 자동링크에서도 "토큰" 단독 alias는 문맥 충돌이 생길 수 있으므로 주의해야 한다.