AI + 토큰엔지니어와 에이전트를 위해 사양화한 디자인 시스템 구축
Evil Martians는 테스트 관측 플랫폼 Currents를 위해 AI 보조 감사(audit)를 활용하여 791개 파일을 분석하고, 단 7주 만에 완전한 디자인 시스템을 구축하였습니다. 감사 결과 236개의 고유 컬러와 1,413건의 사용, 중복된 폰트 시스템, 병렬 아이콘 라이브러리 등의 문제가 발견되었습니다. 신규 색상 체계는 elevation, content, UI, border 네 가지 시맨틱 토큰 그룹으로 통합되었으며, AI 에이전트가 팔레트를 예측 가능하게 확장할 수 있도록 OKLCH로 정의되었습니다. 타이포그래피는 여섯 가지 크기와 다섯 가지 토큰 그룹으로 정리되었으며, 버튼 레이블에는 단 하나의 올바른 토큰만 존재하는 UI 그룹이 포함됩니다. 아이콘은 AI가 90% 정확도로 생성한 매핑 테이블을 통해 Figura One 세트로 마이그레이션되었습니다. 해당 시스템은 Figma, Storybook, GitHub에 구현되어 엔지니어와 LLM 모두가 디자이너 없이도 활용할 수 있도록 설계되었습니다.
Read Articlearrow_forward Article · 접근성READ TIME: 6m
Design Token으로 색상 대비 자동화하기
이 글은 디자인 토큰 워크플로우 시리즈의 일부로, Style Dictionary와 colorjs.io를 활용해 빌드 타임에 WCAG 준수 색상 대비를 자동으로 생성하는 방법을 설명합니다. -background로 끝나는 토큰은 자동으로 -foreground-aa 및 -foreground-aaa 토큰을 생성하며, 흑백 중 대비가 높은 쪽을 선택해 AA 준수를 보장합니다. 개발자가 별도로 foreground 색상을 정의한 경우, 빌드 시 해당 대비 비율과 통과 여부가 CSS 주석으로 출력됩니다. transform은 backgroundTokenName과 foregroundTokenName을 커스터마이징할 수 있어 기존 네이밍 컨벤션에도 유연하게 적용할 수 있습니다. 검증 액션은 빌드 후 터미널에 결과를 보고하며, AA를 충족하지 못하는 선택된 foreground 색상에 대해서만 오류를 발생시킵니다. 출력 결과는 모든 브라우저와 프레임워크에서 호환되는 CSS 커스텀 속성입니다.
READ_FULL_LOGarrow_forwardArticle · 워크플로우READ TIME: 12m
제안부터 릴리스까지: 디자인 시스템 워크플로 설계
명확한 워크플로우가 없으면 디자인 시스템에는 중복 컴포넌트, 불일치한 품질, 팀 번아웃이 발생합니다. 이 글은 디자이너와 엔지니어가 동일한 progress bar 컴포넌트를 각자 독립적으로 개발하는 사례로 시작합니다. 저자는 건강한 디자인 시스템 워크플로우를 위한 여섯 가지 핵심 기둥을 제시합니다: 기여(Contribution), 검토 및 승인(Review and Approval), 문서화(Documentation), 커뮤니케이션(Communication), 반복(Iteration), 버전 관리와 지원 종료(Versioning and Deprecation)입니다. 컴포넌트 라이프사이클은 Ideation, Validation, Design, Review, Development, Testing, Documentation, Release로 이어지며, 단순 변경은 1~2주, 복잡한 컴포넌트는 8~12주가 소요됩니다. 디자이너-개발자 간 핸드오프 방식 대신 지속적인 협업을 강조하며, 시맨틱 버전 관리를 통한 예측 가능한 변경 관리의 중요성도 다룹니다.
READ_FULL_LOGarrow_forwardArticle · 거버넌스READ TIME: 10m
디자인 시스템 거버넌스 계획 수립법: 혼돈에서 일관된 UI로
이 가이드는 성숙한 디자인 시스템의 79%가 공식 거버넌스를 갖추고 있으며, 적절한 거버넌스가 디자인 드리프트(의도한 패턴과 실제 배포 간의 점진적인 괴리)를 방지하여 최대 60%의 ROI 향상을 가져온다고 주장합니다. 저자는 여섯 단계의 구현 프레임워크를 제시합니다: 거버넌스 팀 정의(Champion, Product Owner, Implementation Support, Stakeholder 역할을 포함한 코어 및 확장 레이어), 10단계 컴포넌트 요청 및 검토 프로세스 매핑, 유용성·고유성·다용도성을 기준으로 한 기여 가이드라인 설정, Slack 또는 GitHub를 활용한 변경 관리 워크플로우 구축, 시맨틱 버전 관리(major/minor/patch) 및 릴리스 주기 확립, 사용·기여·지원을 다루는 문서 구조 수립입니다. 의사결정 권한을 위한 RACI 매트릭스, 예외 처리 프로토콜, 그리고 컴포넌트 재사용 대비 커스텀 변형 비율을 추적하는 월간 거버넌스 검토도 권장합니다.
READ_FULL_LOGarrow_forwardArticle · StorybookREAD TIME: 13m
Storybook의 Mocking
Fotis Adamakis는 Storybook에서의 격리 컴포넌트 테스트를 위한 종합적인 모킹 전략을 다룹니다. 대상은 props, context provider, 커스텀 훅, 서드파티 라이브러리, API, GraphQL, 라우팅, 상태 저장소, 브라우저 API, 환경 변수에 이르기까지 광범위합니다. 커스텀 훅의 경우 Storybook의 네이티브 .mock.js 파일 패턴과 @storybook/test의 fn 유틸리티를 사용하며, API 요청은 msw 파라미터를 통해 MSW로 가로챕니다. Redux 스토어는 redux-mock-store 데코레이터를, Zustand는 훅 기반 구조상 .mock.js 방식을 사용합니다. window.matchMedia, IntersectionObserver, localStorage 같은 브라우저 API는 preview.tsx에서 Object.defineProperty와 fn()으로 전역 스텁을 설정합니다. play 함수를 이용한 인터랙션 테스트와, 스토리 간 상태 누수 및 과도한 모킹 같은 안티패턴도 다룹니다.
READ_FULL_LOGarrow_forwardArticle · TypeScriptREAD TIME: 3m
타입 안전한 다형성 React 컴포넌트
Kitty Giraudel은 Duna의 디자인 시스템 작업 중 발견한, TypeScript로 안전한 폴리모픽 React 컴포넌트를 구현하는 간결한 방법을 공유합니다. 목표는 as prop으로 span, a, time, data 등 임의의 HTML 요소를 렌더링하면서, 해당 요소에 유효한 props만 허용하는 Text 컴포넌트입니다. {as: E}와 React.ComponentProps<E>의 단순 교차 타입은 TypeScript가 E를 추론할 때 교차를 좁히지 않아 실패합니다. 작동하는 해결책은 ComponentProps<E>의 키를 명시적으로 매핑하는 방식으로, TypeScript가 E를 확정한 후 구체적인 객체 타입을 구체화하도록 강제합니다. 또는 ComponentProps<E>를 Omit으로 감싸면(존재하지 않는 키를 제외해도) 동일한 효과가 납니다. 저자는 매핑 타입 방식이 왜 동작하는지 완전히 이해하지 못한다고 인정하며 StackOverflow의 유사한 사례를 언급합니다.
READ_FULL_LOGarrow_forwardArticle · 접근성READ TIME: 10m
D/deaf 사용자를 위한 디자인
TetraLogical의 Ela Gorla는 D/deaf 사람들의 구체적인 디자인 요구사항을 다룹니다. Deaf(문화적·수어 사용 커뮤니티)와 deaf(후천적 청각 손실)를 구분하고, 단순히 자막 제공을 넘어선 접근을 제안합니다. 미디어 대안(자막, 텍스트 전사, 수어 통역)은 정확하고, 동기화되어 있으며, 중첩된 메뉴 속에 숨겨지지 않고 콘텐츠 근처에 배치되어야 합니다. 폼 설계 시 수어를 모국어로 사용하는 사람들의 철자 오류를 줄이기 위해 라디오 버튼이나 select 요소 같은 사전 정의 옵션을 우선시해야 합니다. 짧은 문장, 관용어 회피, 약어 전개 등 플레인 랭귀지 원칙도 이 사용자층의 이해도를 높입니다. 게임, XR, 앱의 오디오 알림은 시각적 또는 햅틱 대안을 제공해야 하며, 2024년 Fortnite가 시각화 사운드 이펙트를 기본 활성화한 것처럼 기본값으로 설정하는 것이 이상적입니다.
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
이번 주 디자인 시스템 관련 소식은 AI 툴링, 토큰 아키텍처, 거버넌스 성숙도의 교차점에 집중되었습니다. Evil Martians는 791개 파일에 대한 AI 감사를 통해 236개의 고유 컬러 1,413건 사용, 중복된 폰트 시스템, 병렬 아이콘 라이브러리를 발견하고 7주 만에 Currents를 위한 완전한 디자인 시스템을 구축하였습니다. 결과물은 AI 에이전트가 색상 이탈 없이 예측 가능하게 팔레트를 확장할 수 있도록 elevation, content, UI, border 네 가지 OKLCH 기반 시맨틱 토큰 그룹으로 정리되었습니다. 아이콘은 SVGR로 감싼 Figura One 세트와 AI 생성 매핑 테이블을 통해 90% 정확도로 마이그레이션되었으며, 전체 시스템은 Figma, Storybook, GitHub에서 디자이너 없이 LLM이 활용할 수 있도록 설계되었습니다.
거버넌스와 프로세스도 동등한 비중으로 다루어졌습니다. 상세한 워크플로우 가이드는 건강한 디자인 시스템 운영을 위한 여섯 가지 기둥 — 기여, 검토 및 승인, 문서화, 커뮤니케이션, 반복, 버전 관리와 지원 종료 — 을 제시하였으며, 컴포넌트 타임라인은 단순 변경의 1-2주부터 복잡한 작업의 8-12주까지 다양합니다. 거버넌스 관련 글은 성숙한 디자인 시스템의 79%가 공식 거버넌스를 갖추고 있으며, 이를 통해 디자인 드리프트를 방지함으로써 최대 60%의 ROI 향상을 달성한다고 언급하였습니다. RACI 매트릭스와 컴포넌트 재사용 대비 커스텀 변형 비율을 추적하는 월간 리뷰도 권장되었습니다.
컴포넌트 테스트 측면에서 Fotis Adamakis는 props, API 인터셉션을 위한 MSW, Redux를 위한 redux-mock-store 데코레이터, Zustand 및 커스텀 훅을 위한 .mock.js 패턴, window.matchMedia 및 IntersectionObserver 같은 브라우저 API를 위한 Object.defineProperty 스텁을 포함한 포괄적인 Storybook 모킹 가이드를 발표하였습니다. TetraLogical은 D/deaf 사용자를 위한 접근성을 다루며 콘텐츠 근처의 정확한 동기화 자막, 철자 오류 감소를 위한 사전 정의 폼 컨트롤, 오디오 알림의 기본 활성화 시각적·햅틱 대안을 강조하였습니다. Kitty Giraudel은 Duna 디자인 시스템 작업 중 발견한 typed polymorphic 컴포넌트를 위한 간결한 TypeScript 패턴을 공유하였으며, as prop이 확정된 후 TypeScript가 구체적인 props를 구체화하도록 mapped type을 활용하는 방식을 소개하였습니다.
Key Takeaways- Evil Martians는 791개 파일에 대한 AI 감사를 통해 Currents용 디자인 시스템을 7주 만에 구축하였습니다. OKLCH 토큰을 사용한 이유는 AI 에이전트가 색상 이탈 없이 예측 가능하게 팔레트를 확장할 수 있기 때문입니다.
- 공식 거버넌스(RACI 매트릭스, 10단계 컴포넌트 요청 프로세스, 시맨틱 버전 관리, 월간 드리프트 리뷰)는 성숙한 디자인 시스템에서 최대 60%의 ROI 향상과 상관관계가 있습니다.
- Storybook의 .mock.js 파일 패턴과 MSW를 조합하면 커스텀 훅, API 호출, Redux, Zustand, 브라우저 API를 포함한 디자인 시스템 컴포넌트의 전체 모킹 영역을 하나의 일관된 방식으로 커버할 수 있습니다.
