디자인 시스템이라고 하면 큰 회사의 거창한 문서를 떠올립니다. 1인 팀에는 사치처럼 들립니다. 그런데 사실은 작은 팀일수록 더 필요합니다.
토큰이 뭐길래
디자인 토큰은 색·간격·글자 크기 같은 결정을 이름 붙여 한곳에 모아 둔 것입니다. '파란색' 대신 '주요색', '16px' 대신 '기본 간격'처럼 부릅니다. 값을 한 번만 바꾸면 화면 전체가 따라 바뀌어 줍니다.
Color
색 12~20개
주요·강조·배경·경계·텍스트 정도면 충분하다. 더 늘리면 오히려 일관성이 깨진다.
Spacing
간격 스케일
4px의 배수로 4·8·16·24만 정해도 여백이 들쭉날쭉하지 않는다.
Component
컴포넌트 3개
버튼·입력칸·뱃지 세 개만 규칙을 잡아도 화면 대부분이 일관된다.
AI 시대엔 더 필요하다
AI에게 코드를 맡기면 화면이 빠르게 늘어납니다. 그런데 기준이 없으면 AI는 매번 조금씩 다른 색과 간격을 씁니다. 그렇게 쌓인 화면은 어느 순간 손쓸 수 없이 들쭉날쭉해지죠. 토큰은 그 흔들림을 잡아 주는 안전벨트입니다.
어스큐리도 색과 간격을 토큰으로 묶어 두고, 거기서만 값을 가져다 씁니다. 덕분에 1인이 여러 화면을 만들어도 한 손에서 나온 듯 보입니다.
디자인 시스템은 규모의 문제가 아닙니다. 같은 결정을 반복하지 않으려는 작은 팀의 도구입니다. 색 스무 개부터 정해 보세요.
참고
- What are design tokens — UXPin
- The Design System Guide — design tokens
