스킬 자체의 표현으로
하나의 브랜드 색상을 완전한 token 세트로 변환하는 디자인 시스템 툴킷. design_token_generator.py는 hex 색상과 modern, classic, playful 중 하나의 프리셋을 입력받아 색상, 타이포그래피, 8pt 간격, 크기, 테두리, 그림자, 애니메이션, 브레이크포인트, z-index 레이어를 json, css, scss 또는 요약 형태로 반환합니다.
이어지는 4개의 워크플로는 atom부터 template까지의 컴포넌트 아키텍처, clamp() 유동 타입을 활용한 반응형 브레이크포인트, WCAG 대비 검증, 그리고 React CSS 변수, Tailwind 설정, styled-components로의 개발자 핸드오프와 Tokens Studio를 통한 Figma 동기화를 다룹니다. 빌드 팀을 위해 token과 컴포넌트를 문서화해야 하는 시니어 UI 디자이너를 대상으로 합니다.
산출물
- props, variant 옵션, 상태, 접근성 요구사항을 다루는 컴포넌트 API 문서.
- CSS 변수를 활용한 React, Tailwind 테마 설정, styled-components에 대한 연동 코드 스니펫.
- 자체 대비 색상을 함께 가지는 시맨틱 색상 token.
작동 방식
- 01브랜드 색상 지정하기
이 워크플로는 브랜드 primary 색상을 식별하는 것으로 시작하며, 생성되는 모든 카테고리가 이 색상에서 파생되므로 파일은 이를 hex 형식으로 요구합니다.
- 02Token Generator 실행하기
스크립트를 한 번 호출하면 전체 시스템이 생성되며, 색상, 스타일 프리셋, 출력 형식이 이 스크립트가 받는 세 가지 인자입니다.
- 03토큰을 컴포넌트 계층 구조에 매핑하기
컴포넌트는 atoms, molecules, organisms, templates로 구성되며, 각 컴포넌트는 사용하는 토큰 그룹과 연결됩니다.
- 04브레이크포인트와 유동 타이포그래피 설정하기
여섯 개의 브레이크포인트가 xs부터 2xl까지 이어지며, 유동 타이포그래피는 최소 크기와 최대 크기 사이의 clamp 공식으로 표현됩니다.
- 05토큰을 코드베이스에 연결하기
핸드오프 워크플로에서는 토큰 파일을 직접 불러오는 방식, JSON으로부터 구성한 Tailwind 테마, 토큰 키를 읽는 styled-components 테마를 보여줍니다.
- 06Figma와 동기화하고 승인 완료하기
토큰은 Tokens Studio 플러그인을 통해 Figma로 들어가며, 핸드오프 체크리스트는 파이프라인, 컴포넌트 라이브러리, 문서화가 모두 완료되었는지 확인합니다.