토큰Design Token 워크플로 18부: DTCG Color Module에서 색상이 작동하는 방식
이 시리즈의 18편은 DTCG Color Module을 심층적으로 다루며, 구조화된 색상 토큰이 단순 hex 문자열보다 우수한 이유를 설명합니다. 해당 스펙은 각 색상을 colorSpace(sRGB, OKLCH, HSL, Display P3 등), 0~1로 정규화된 components, 선택적 alpha, 그리고 레거시 hex 폴백을 포함하는 typed 객체로 감쌉니다. 저자는 2026년 제작 공간으로 OKLCH를 강력히 권장하며, Material Design 3, Carbon, Parity를 도입 사례로 제시합니다. 동일한 lightness 증감이 시각적으로도 균등하게 느껴지기 때문에 자동화된 색상 ramp 생성이 안정적입니다. Style Dictionary transform 예제를 통해 색상 ramp 자동 생성, 빌드 타임에 WCAG AA/AAA 기준 텍스트 색상 도출, 단일 토큰에서 여러 플랫폼 포맷 출력 방법을 실질적으로 보여줍니다.
Read Articlearrow_forward Article · 거버넌스READ TIME: 10m
디자인 시스템 워크플로 구축: Ritual과 Template
이 실용적인 가이드는 이론을 넘어 디자인 시스템 팀이 실제로 운영되도록 하는 구체적인 의식, 템플릿, 거버넌스 구조를 설명합니다. 기여 제안을 위한 RFC 템플릿, 고정 일정으로 회의하는 4~6명의 Design System Council, 구조화된 Slack 채널(#design-system-announcements, #design-system-proposals 등), 그리고 조직의 기억 역할을 하는 Architecture Decision Record를 다룹니다. 문서화는 완료 기준의 필수 조건으로 취급되며, 문서가 완성되기 전에는 컴포넌트가 출시되지 않습니다. 저자는 감사, 설계, 파일럿 실행, 개선, 출시, 분기별 반복의 단계적 구현 과정을 안내하며, 마이그레이션 가이드(codemod 포함)를 포함한 시맨틱 버전 관리로 변경 관리 방법도 설명합니다.
READ_FULL_LOGarrow_forwardArticle · AI 에이전트READ TIME: 8m
Open Design System Format: 디자인 시스템을 Agent에게 넘기기
Sascha Becker는 Open Design System Format(ODSF)을 소개합니다. 이는 Google의 Open Knowledge Format(OKF)의 strict profile로, 디자인 시스템을 코딩 에이전트가 읽을 수 있는 markdown, HTML, CSS의 자립형 번들로 패키징합니다. 핵심 인사이트는 에이전트가 UI를 작성할 때 브랜드 색상이 약간 다르거나 간격이 맞지 않는 등 그럴듯하지만 잘못된 결과물을 지속적으로 생성한다는 것입니다. 디자인 시스템의 머신이 읽을 수 있는 형식이 생성 시점에 제공되지 않기 때문입니다. ODSF는 각 토큰을 frontmatter에 한 번 작성하고 이를 CSS custom properties로 기계적으로 투영하여 설명과 실행 가능한 값을 동기화 상태로 유지함으로써 이 문제를 해결합니다. Claude Code, Cursor, Codex, Windsurf용 odsf skill이 번들 전체의 토큰 편집 ripple-check를 자동화합니다.
READ_FULL_LOGarrow_forwardArticle · 접근성READ TIME: 3m
ARIA, Anti-pattern, 그리고 당신
David Bushell은 ARIA Authoring Practices Guide(APG)를 LLM에게 그대로 입력하여 접근 가능한 UI 코드를 생성하는 증가하는 트렌드에 대해 강한 경고를 보냅니다. APG는 브라우저와 보조 기술 구현 전반에 걸쳐 ARIA 스펙이 작동함을 증명하기 위해 설계된 것이지, 프로덕션 사이트를 위한 모범 사례 참고서가 아닙니다. 이 가이드 자체의 마크업에는 실제 코드에서 절대 나타나서는 안 되는 div role="button" 예시가 포함되어 있습니다. WebAIM Million 연구를 인용하며 Bushell은 ARIA 사용 증가가 더 많은 접근성 오류와 상관관계가 있음을 지적합니다. W3C의 ARIA 첫 번째 사용 규칙은 명확히 말합니다: 필요한 시맨틱을 가진 네이티브 HTML 요소가 있다면 그것을 사용하라고.
READ_FULL_LOGarrow_forwardArticle · 모노레포READ TIME: 11m
Monorepo에서 확장 가능한 디자인 시스템 구축하기
Vineeth Pawar는 Turborepo를 사용하여 다중 패키지 디자인 시스템을 구축하는 방법을 안내합니다. 패키지를 계층적 사다리 구조로 구성하는데, 기반에는 tokens, 그 위에 primitives, layouts, screens, navigators가 위치합니다. tokens 패키지는 colors, spacing, typography를 위한 typed TypeScript 상수를 내보내고, primitives 패키지는 이를 소비하여 variant와 size prop을 가진 Button 같은 React 컴포넌트를 만듭니다. turbo.json은 tokens가 primitives보다 먼저 컴파일되도록 빌드 파이프라인을 구성합니다. Microsoft Fluent UI, IBM Carbon, Shopify Polaris, Atlassian Atlaskit, MUI가 실제 사례로 제시됩니다. 단일 제품 팀, 릴리즈 주기가 크게 다른 경우, 이종 언어 스택 등 모노레포가 적합하지 않은 경우도 솔직하게 다룹니다.
READ_FULL_LOGarrow_forwardArticle · 접근성READ TIME: 5m
읽기 장애가 있는 사람을 위한 디자인
TetraLogical의 Grace Snow는 난독증, 과독증, 실독증 등 읽기 장애를 가진 사람들을 위한 콘텐츠와 UI를 위한 실용적인 디자인 가이드를 제시합니다. 이 글은 여섯 가지 구체적인 영역을 다룹니다: 학술적 표현 대신 평이한 언어 사용, 왼쪽 정렬과 70-80자 줄 길이로 읽기 흐름 최적화, 브랜드 폰트보다 명확한 자형과 높은 x-height를 우선시하는 타이포그래피, Hemingway 같은 도구로 9-11세 수준의 읽기 수준 목표, 첫 사용 시 약어 풀어쓰기, 디지털 문해력이 낮은 사용자를 위한 아이콘 병행 사용과 명확한 링크 레이블이 그것입니다. 이 가이드는 포용적 읽기 디자인이 제2언어 독자, 바쁜 사용자 등 모든 사람에게 유익하며, 편집자·카피라이터·디자이너의 공동 책임임을 강조합니다.
READ_FULL_LOGarrow_forwardArticle · 컴포넌트READ TIME: 3m
spartan/ui 1.0 발표
약 3년간의 신중한 알파 과정 끝에 spartan/ui가 안정적인 1.0을 출시하였습니다. 55개 이상의 프로덕션 준비 완료 Angular 컴포넌트를 제공하며, signals 기반으로 구축되었고 zoneless-ready이며 SSR도 기본 지원됩니다. 라이브러리의 핵심 아키텍처는 두 레이어 분리 구조를 유지합니다: spartan/ui/brain은 ARIA, 키보드 네비게이션, 포커스 관리를 유지 관리되는 의존성으로 처리하고, spartan/ui/helm은 스타일링 레이어를 소비자 프로젝트에 직접 복사하여 라이브러리와 씨름 없이 완전한 소유권과 커스터마이제이션을 제공합니다. 1.0 릴리스는 정렬, 필터링, 선택 기능을 갖춘 Data Table, Sidebar, Calendar, Date Picker, Carousel, Autocomplete, Pagination, Breadcrumb을 추가하여 원래 30개 컴포넌트의 거의 두 배로 늘렸습니다. 이 라이브러리는 MIT 라이선스이며 인프라는 Zerops의 후원을 받고 있습니다.
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
이번 주 디자인 시스템은 색상 토큰 표준, 거버넌스, AI 에이전트가 시스템을 읽을 수 있게 만드는 새로운 과제에 집중했습니다. DTCG Color Module 시리즈(18편)는 Material Design 3, IBM Carbon, Parity의 도입 사례를 들어 2026년 제작 색상 공간으로 OKLCH를 강력히 권장했습니다. 지각적으로 균일한 lightness 증감 덕분에 자동화된 color ramp 생성이 안정적이기 때문입니다. Style Dictionary transform 예제를 통해 색상 ramp 자동 생성, 빌드 타임에 WCAG AA/AAA 기준 텍스트 색상 도출, 단일 토큰을 여러 플랫폼 포맷으로 출력하는 방법을 실질적으로 보여줬습니다.
Sascha Becker는 Claude Code, Cursor, Codex, Windsurf 같은 AI 코딩 에이전트가 읽을 수 있는 markdown, HTML, CSS 번들로 디자인 시스템을 패키징하는 Open Design System Format(ODSF)을 소개했습니다. 핵심 통찰은 생성 시점에 머신이 읽을 수 있는 디자인 시스템이 없어 에이전트가 그럴듯하지만 잘못된 UI를 만들어낸다는 것입니다. spartan/ui는 3년간의 알파 과정 끝에 1.0을 출시했으며, signals 기반으로 구축된 55개 이상의 Angular 컴포넌트를 zoneless-ready, SSR 호환 방식으로 제공합니다. ARIA 로직과 스타일링을 분리하는 brain/helm 2계층 아키텍처를 채택합니다.
두 편의 거버넌스 글이 이번 주를 마무리했습니다. 디자인 시스템 리추얼에 대한 실용적인 가이드는 RFC 템플릿, 4~6명의 Design System Council, 구조화된 Slack 채널, Architecture Decision Record를 다루며 컴포넌트 출시 전 문서화를 필수 게이트로 설정했습니다. Turborepo 모노레포 안내서는 tokens, primitives, layouts, screens, navigators를 계층적으로 구성하는 방법을 Microsoft Fluent UI, Shopify Polaris, IBM Carbon을 실제 사례로 들어 설명했습니다.
Key Takeaways- DTCG Color Module의 OKLCH 우선 typed 토큰 객체는 Material Design 3와 IBM Carbon이 채택했으며, 빌드 타임에 WCAG AA/AAA 텍스트 색상 도출과 신뢰할 수 있는 자동 color ramp 생성을 가능하게 합니다. hex 문자열로는 불가능한 기능입니다.
- Open Design System Format(ODSF)은 AI 에이전트 UI의 핵심 문제를 해결합니다. 에이전트가 잘못된 색상과 간격으로 UI를 생성하는 이유는 생성 시점에 머신이 읽을 수 있는 디자인 시스템이 없기 때문이며, ODSF는 토큰을 CSS custom properties로 기계적으로 투영되는 frontmatter로 번들링합니다.
- spartan/ui 1.0의 brain/helm 분리 아키텍처, 즉 ARIA와 키보드 로직을 유지 관리되는 의존성으로, 스타일링은 소비자 프로젝트에 복사하는 방식은 접근성 보장을 유지하면서 라이브러리 종속에서 벗어나는 실용적인 아키텍처 패턴입니다.
