에이전시에서 일하다 보면 디자인 시스템이라는 말이 참 자주 나온다. 그런데 실제로 살아있는 디자인 시스템을 본 적은 드물다. 대부분 피그마 안에서만 존재하는 스타일 가이드다. 예쁘게 정리된 컬러 팔레트, 8배수 간격 규칙, 타이포 스케일. 그리고 코드를 열어보면 #f87172, margin: 23px 같은 값이 아무 데나 흩어져 있다.

토큰은 다리다

디자인 시스템이 사는 조건은 하나라고 생각한다. 디자인의 토큰과 코드의 변수가 1:1로 이어질 것. 피그마에서 accent라고 부르는 색이 코드에서도 --color-accent여야 한다. 디자이너가 간격을 space-4로 정의했으면 개발자도 gap-4를 쓴다. 이 연결이 끊기는 순간 시스템은 문서가 되고, 문서는 아무도 안 읽는다.

이 블로그를 만들 때 색을 CSS 변수 일곱 개로 못 박았다. bg, fg, muted, surface, surface-alt, accent, accent-dark. 새 컴포넌트를 만들 때 색 고민을 아예 안 한다. 고민이 없다는 건 결정이 시스템에 위임됐다는 뜻이다. 그게 시스템의 존재 이유다.

양쪽을 아는 사람의 토큰

디자이너만 토큰을 설계하면 코드에서 표현하기 어려운 구조가 나온다. 상태별 색이 전부 개별 값으로 정의돼 있어서 불투명도 변형으로 처리할 수 없다든가. 반대로 개발자만 설계하면 시각적 위계가 무너진다. 기술적으로는 깔끔한데 화면에서 구분이 안 되는 회색 네 단계 같은 것.

양쪽을 아는 사람이 설계하면 토큰의 개수부터 달라진다. 나는 회색 텍스트를 muted 하나와 fg/50, fg/70 같은 불투명도 변형으로 처리한다. 디자이너의 눈으로는 위계가 유지되고, 개발자의 손으로는 변수 하나로 관리된다. 이런 결정은 어느 한쪽의 언어만 알아서는 못 내린다.

그래서 퍼블리셔가 유리하다

퍼블리셔는 원래 이 경계에 서 있는 직군이다. 시안을 받아서 코드로 옮기는 일을 매일 하니까, 디자인의 의도와 코드의 제약을 동시에 본다. 디자인 시스템이라는 게 결국 그 번역 규칙을 명문화한 것이라면, 번역을 제일 많이 해본 사람이 규칙을 제일 잘 만든다.

디자인 시스템은 디자이너의 산출물이 아니라 디자인과 코드 사이의 계약이다. 계약서는 양쪽 언어를 다 아는 사람이 써야 한다.