디자인 토큰(Design Token)

쉬운 설명

색상, 글자 크기, 간격처럼 반복되는 디자인 값을 이름으로 정의한 기준.

실제로는 이렇게 만나요

`color-primary`, `spacing-md`, `radius-card` 같은 이름을 CSS 변수나 Tailwind CSS 테마 값으로 연결할 수 있습니다.

• 이런 거 할 때 나와요 값을 직접 반복하지 않고 토큰을 사용하면 브랜드 색상이나 간격 기준을 한곳에서 바꾸고 여러 화면에 일관되게 적용할 수 있습니다.
• 이렇게 생겼어요 디자인 토큰(Design Token)은(는) Design System, CSS, Tailwind CSS 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
• 나오는 화면 예시 프로덕트 / 협업 작업을 하다가 Design System, CSS, Tailwind CSS를 확인하는 화면

헷갈리기 쉬운 점

이름이 실제 쓰임을 설명하지 못하거나 토큰 수가 지나치게 많으면 어떤 값을 써야 할지 더 어려워집니다.

왜 알아두면 좋을까요?

값을 직접 반복하지 않고 토큰을 사용하면 브랜드 색상이나 간격 기준을 한곳에서 바꾸고 여러 화면에 일관되게 적용할 수 있습니다.