디자인 토큰으로 디자인과 코드 동기화하기

스타트업에서 디자인 시스템을 만들면 오히려 속도가 느려질 때가 있습니다. 디자이너가 수정한 값을 개발자가 다시 코드로 옮기며 발생하는 지루한 반복 작업 때문입니다. 이 과정을 자동화해야 팀이 본질적인 제품 고민에 집중할 수 있습니다.

토큰으로 디자인 언어 통일하기

디자인 툴의 값을 코드 변수로 일일이 매핑하지 마십시오. 디자인 토큰을 도입하면 이 연결 고리가 데이터로 바뀝니다.

1. 프리미티브 토큰: blue-500과 같이 원시 컬러 값을 정의합니다.
2. 시맨틱 토큰: action.primary.bg처럼 실제 사용처를 명시하고 위 프리미티브를 참조합니다.
3. CSS 변수 매핑: 시맨틱 토큰을 CSS 변수로 저장합니다.

이렇게 설정하면 디자이너가 컬러 값을 바꿔도 개발자는 코드를 건드릴 필요가 없습니다. 시스템이 알아서 CSS 파일을 업데이트합니다. 폰트 스케일도 Penpot의 토큰 패널에서 Base와 Ratio를 입력해 수학적으로 정의하십시오. $Size_{n} = Base \times Ratio^{n}$ 공식을 쓰면 디자인의 일관성이 강제로 유지됩니다.

Penpot과 GitHub 연동 자동화

디자인 수정 사항을 개발자가 수동으로 확인하는 건 비효율적입니다. Penpot은 W3C 디자인 토큰 표준을 따르므로 파이프라인 구축이 가능합니다.

1. Penpot API 키를 생성합니다.
2. 프로젝트 루트에 penpot-export.config.js 파일을 만듭니다. 여기서 추출할 토큰과 저장 경로를 설정합니다.
3. @penpot-export/cli 패키지를 설치한 뒤 npx penpot-export 명령어를 실행합니다.

수백 개의 토큰 값이 순식간에 코드베이스로 들어옵니다. 수동 입력 시 발생하는 휴먼 에러가 사라집니다. Shopify 같은 대규모 서비스도 이런 토큰 기반 워크플로우를 활용해 코드 수정 없이 즉각적으로 디자인을 업데이트합니다.

Git 리뷰로 디자인 변경 의도 파악하기

디자인 변경 사항을 슬랙 메시지나 구두로 전달하지 마십시오. 개발자에게 가장 익숙한 Git으로 관리합니다.

1. .github/workflows/design-sync.yml 파일을 작성해 디자인 토큰 추출을 자동화합니다.
2. peter-evans/create-pull-request 액션으로 변경 사항이 포함된 PR을 자동으로 생성합니다.
3. PR이 올라오면 style(tokens) 커밋 메시지를 확인하고 코드 리뷰 과정에서 diff를 봅니다.

개발자는 어떤 값이 왜 바뀌었는지 PR에서 즉시 파악합니다. 왜 바뀌었는지 물어보러 다니는 시간을 아낍니다.

레거시 코드와 공존하기

모든 코드를 한 번에 바꾸려 하지 마십시오. 기존 CSS와 신규 토큰을 섞어 쓰는 폴백 기술이 현실적입니다.

1. src/styles/tokens 디렉토리에 자동 생성된 토큰 파일을 놓습니다.
2. 기존 CSS에서 var(--new-token, #legacy-value) 형식을 사용합니다.

토큰이 아직 정의되지 않은 컴포넌트는 기존 값을 그대로 유지합니다. UI가 깨질 걱정 없이 시스템을 조금씩 현대화할 수 있습니다. 작은 컬러 토큰 하나를 파이프라인에 연결하는 것부터 시작하십시오. 미래에 발생할 거대한 기술 부채를 지금 막는 방법입니다.