디자인 토큰 파이프라인 — Figma에서 CSS 변수까지

디자인 토큰은 문서가 아니라 배포 가능한 코드가 될 때 힘이 생긴다. 컬러, 간격, radius를 하나의 JSON에서 출발시키고 CSS 변수와 Tailwind preset으로 나눴다.

토큰 이름 짓기

먼저 측정 가능한 기준을 정했습니다. 감으로 빠르다거나 편하다고 말하기보다, 응답 시간, 실패율, 유지보수 비용처럼 팀이 반복해서 볼 수 있는 지표를 앞에 뒀습니다.

:root {
  --color-bg: 0 0% 100%;
  --radius-card: 8px;
}

테마별 override

작게 도입한 뒤 한 주 동안 운영 데이터를 모았습니다. 예상보다 좋았던 부분은 개발 경험이었고, 예상보다 까다로웠던 부분은 예외 상황의 디버깅이었습니다.

리뷰 자동화

마지막 체크리스트는 단순합니다. 되돌릴 수 있는가, 실패를 관찰할 수 있는가, 팀원이 같은 결정을 다시 설명할 수 있는가. 이 세 가지가 통과되면 도입 리스크는 꽤 낮아집니다.