UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 28-2026
article
디자인 시스템 성숙도: 6차원 프레임워크
TAG: 성숙도
Nielsen Norman Group은 선형적 디자인 시스템 성숙도 모델 대신, 조직적 정렬(Organizational Alignment), 팀 효율성(Team Effectiveness), 인프라 견고성(Infrastructure Robustness), 거버넌스(Governance), 지원(Support), 도입(Adoption)의 6개 차원으로 구성된 다차원 평가 프레임워크를 제안합니다. 선형 모델은 성숙도의 퇴행, 조직별 맥락 차이, 그리고 도입이 결코 완성되지 않는다는 현실을 반영하지 못합니다. 각 차원은 1~5점으로 평가되어 육각형 레이더 차트에 프로파일로 표시됩니다. 프로파일의 면적, 대칭성, 골짜기, 스파이크는 각각 독립된 진단적 의미를 가지며, 거버넌스의 취약점이 견고한 인프라마저 약화시킬 수 있습니다. 분기별 재평가를 권장하며, 평가자 간 정렬 대화 자체가 점수보다 더 가치 있는 경우가 많다고 강조합니다.
WCAG의 단일 페이지, 특정 시점 기준의 적합성 모델은 서드파티 콘텐츠와 불가피한 버그를 포함한 대규모 동적 사이트에는 근본적으로 적합하지 않습니다. Deque는 ISO 9001과 연계되는 관리 표준인 EN 17161 Design for All이 이슈 레지스트리(issue registry), 근본 원인 분석(RCA), 시정 및 예방 조치(CAPA) 추적, 그리고 '2주 내 차단 이슈 해결'과 같은 측정 가능한 접근성 목표를 통해 이 격차를 해소한다고 주장합니다. WCAG 3.0은 최소 4년은 걸릴 전망이며 여전히 output 표준에 머물 것이기에, EN 17161이 현재 가장 실용적인 대안입니다. EN 17161은 유럽 접근성법(EAA)의 프로세스 요건에도 통합되고 있어, 유럽에서 운영하는 조직은 이미 준수가 필요할 수 있습니다.
Storybook Workbench: 바이브 코딩 UI를 감사하고 몇 시간 안에 숨은 버그 찾기
TAG: 스토리북
Evil Martians는 AI가 생성한 코드베이스에 누적되는 죽은 컴포넌트, 충돌하는 디자인 시스템, 숨겨진 컴포넌트 상태를 감사하기 위해 Claude Code 에이전트 스킬 집합인 Storybook Workbench(/sb. 접두사)를 개발했습니다. 469개의 컴포넌트 파일을 가진 vibe-coded 앱 하나를 감사한 결과, 31개의 dead 컴포넌트(그 중 19개는 폐기된 전체 페이지 플로우)와 실행 중인 앱에서는 보이지 않던 6개의 접근성 버그 — WCAG AA 기준인 4.5 미만의 대비율 3.87인 뱃지 변형과 broken combobox role을 가진 select 컴포넌트 포함 — 가 발견됐습니다. 스킬은 onboard, orchestrate, navigate, report의 4가지 역할로 나뉩니다. 각 스킬의 출력은 구조화된 JSON으로 Linear의 MCP에 공급해 티켓을 생성하거나 PDF 보고서로 내보낼 수 있습니다.
Storybook 10.3에는 @storybook/addon-mcp가 포함되어 http://localhost:6006/mcp에서 컴포넌트 라이브러리를 구조화된 MCP 서버로 노출합니다. 서버는 세 가지 툴셋에 걸쳐 6개의 도구를 제공합니다: 컴포넌트 검색과 prop 조회를 위한 docs 툴셋(list-all-documentation, get-documentation, get-documentation-for-story), 스토리 작성을 위한 dev 툴셋(get-storybook-story-instructions, preview-stories), 그리고 Vitest 기반 테스트를 실행하고 접근성 위반을 구조화된 결과로 반환하는 testing 툴셋(run-story-tests). MCP 없이 Claude Code는 기존 디자인 시스템을 무시한 263줄의 인라인 컴포넌트를 생성했지만, MCP 연결 후에는 188줄로 Button과 TextInput을 정확한 prop 계약에 맞게 가져오고, aria-invalid 및 aria-describedby 등 접근성 수정을 TextInput 컴포넌트에 자율적으로 적용했습니다.
이 튜토리얼은 shadcn/ui와 Shadcn Space 서드파티 레지스트리를 사용해 4가지 프로덕션 수준의 카드 컴포넌트를 구축하는 과정을 안내합니다: group hover 이미지 애니메이션(scale-125와 overflow-hidden 클리핑)을 가진 Preview Card, TypeScript 타입 props와 기본 데이터셋, 조건부 cn() 뱃지 색상을 갖춘 Analytics Card, @iconify/react Solar 아이콘과 last:border-e-0을 사용한 반응형 4열 Statistics Card, 그리고 named hover group(group/card, group/btn), rounded-full 요소의 scale-[20]을 통한 CSS 전용 리플 효과, useState 기반 size 선택기와 위시리스트 토글, 서수 배송 날짜를 위한 suppressHydrationWarning을 포함한 Ecommerce Product Variant Card. Shadcn Space 컴포넌트는 components.json에 레지스트리 URL을 등록한 후 npx shadcn@latest add @shadcn-space/card-XX 명령 하나로 설치됩니다.
코딩 에이전트는 조립할 디자인 시스템이 없으면 불일치한 UI를 생성합니다 — 거의 맞지만 틀린 버튼, 비슷하지만 어긋난 spacing, 다른 앱처럼 느껴지는 로딩 상태. 저자는 color, spacing, radius, typography의 테마 토큰과 Button, TextInput, Card 같은 기본 컴포넌트 및 변형/상태 정의를 포함한 디자인 시스템을 먼저 구축할 것을 권장합니다. 에이전트가 테마 파일, Storybook 스토리, 예제 사용법을 포함한 기반을 직접 구성할 수 있지만, spacing·line height·border radius에 대한 세심한 인간 검토는 여전히 필요합니다. 시스템이 갖춰지면 프롬프트가 구체적으로 변합니다: src/components/ui의 기존 컴포넌트를 사용하고, 진정으로 누락된 경우가 아니면 새 primitive를 만들지 말라고 지시할 수 있습니다.
NDC Copenhagen에서 Elise Kristiansen이 발표한 개발자들이 반복적으로 실수하는 실질적인 WCAG 이슈 강연입니다. 뒤센 근이영양증으로 World of Warcraft에서 풍부한 사회적 삶을 구축한 노르웨이 게이머 Mats Steen(Ibelin)의 이야기로 시작하여, 접근성을 개발자의 책임으로 정립합니다. 핵심 위반 사례로는 누락된 대체 텍스트 및 아이콘 레이블, 잘못된 시맨틱 HTML(제목과 링크에 div 사용), 제목 계층 오용, 색각 이상 예시를 통한 색상 단독 정보 전달, absolute positioning과 flex-direction: row-reverse로 인한 키보드 탐색 실패, 가시적 포커스 표시기 누락, 일시 정지/중지 없는 시간 제한, 점멸 콘텐츠, 연결되지 않은 폼 레이블이 포함됩니다. axe 또는 Pa11y 같은 스캐너를 CI에 추가하고, 스크린 리더로 직접 제품을 탐색하는 연습을 권장합니다.
Nielsen Norman Group은 선형적 디자인 시스템 성숙도 모델 대신, 조직적 정렬(Organizational Alignment), 팀 효율성(Team Effectiveness), 인프라 견고성(Infrastructure Robustness), 거버넌스(Governance), 지원(Support), 도입(Adoption)의 6개 차원으로 구성된 다차원 평가 프레임워크를 제안합니다. 선형 모델은 성숙도의 퇴행, 조직별 맥락 차이, 그리고 도입이 결코 완성되지 않는다는 현실을 반영하지 못합니다. 각 차원은 1~5점으로 평가되어 육각형 레이더 차트에 프로파일로 표시됩니다. 프로파일의 면적, 대칭성, 골짜기, 스파이크는 각각 독립된 진단적 의미를 가지며, 거버넌스의 취약점이 견고한 인프라마저 약화시킬 수 있습니다. 분기별 재평가를 권장하며, 평가자 간 정렬 대화 자체가 점수보다 더 가치 있는 경우가 많다고 강조합니다.
NDC Copenhagen에서 Elise Kristiansen이 발표한 개발자들이 반복적으로 실수하는 실질적인 WCAG 이슈 강연입니다. 뒤센 근이영양증으로 World of Warcraft에서 풍부한 사회적 삶을 구축한 노르웨이 게이머 Mats Steen(Ibelin)의 이야기로 시작하여, 접근성을 개발자의 책임으로 정립합니다. 핵심 위반 사례로는 누락된 대체 텍스트 및 아이콘 레이블, 잘못된 시맨틱 HTML(제목과 링크에 div 사용), 제목 계층 오용, 색각 이상 예시를 통한 색상 단독 정보 전달, absolute positioning과 flex-direction: row-reverse로 인한 키보드 탐색 실패, 가시적 포커스 표시기 누락, 일시 정지/중지 없는 시간 제한, 점멸 콘텐츠, 연결되지 않은 폼 레이블이 포함됩니다. axe 또는 Pa11y 같은 스캐너를 CI에 추가하고, 스크린 리더로 직접 제품을 탐색하는 연습을 권장합니다.
WCAG의 단일 페이지, 특정 시점 기준의 적합성 모델은 서드파티 콘텐츠와 불가피한 버그를 포함한 대규모 동적 사이트에는 근본적으로 적합하지 않습니다. Deque는 ISO 9001과 연계되는 관리 표준인 EN 17161 Design for All이 이슈 레지스트리(issue registry), 근본 원인 분석(RCA), 시정 및 예방 조치(CAPA) 추적, 그리고 '2주 내 차단 이슈 해결'과 같은 측정 가능한 접근성 목표를 통해 이 격차를 해소한다고 주장합니다. WCAG 3.0은 최소 4년은 걸릴 전망이며 여전히 output 표준에 머물 것이기에, EN 17161이 현재 가장 실용적인 대안입니다. EN 17161은 유럽 접근성법(EAA)의 프로세스 요건에도 통합되고 있어, 유럽에서 운영하는 조직은 이미 준수가 필요할 수 있습니다.
Storybook Workbench: 바이브 코딩 UI를 감사하고 몇 시간 안에 숨은 버그 찾기
Evil Martians는 AI가 생성한 코드베이스에 누적되는 죽은 컴포넌트, 충돌하는 디자인 시스템, 숨겨진 컴포넌트 상태를 감사하기 위해 Claude Code 에이전트 스킬 집합인 Storybook Workbench(/sb. 접두사)를 개발했습니다. 469개의 컴포넌트 파일을 가진 vibe-coded 앱 하나를 감사한 결과, 31개의 dead 컴포넌트(그 중 19개는 폐기된 전체 페이지 플로우)와 실행 중인 앱에서는 보이지 않던 6개의 접근성 버그 — WCAG AA 기준인 4.5 미만의 대비율 3.87인 뱃지 변형과 broken combobox role을 가진 select 컴포넌트 포함 — 가 발견됐습니다. 스킬은 onboard, orchestrate, navigate, report의 4가지 역할로 나뉩니다. 각 스킬의 출력은 구조화된 JSON으로 Linear의 MCP에 공급해 티켓을 생성하거나 PDF 보고서로 내보낼 수 있습니다.
Storybook 10.3에는 @storybook/addon-mcp가 포함되어 http://localhost:6006/mcp에서 컴포넌트 라이브러리를 구조화된 MCP 서버로 노출합니다. 서버는 세 가지 툴셋에 걸쳐 6개의 도구를 제공합니다: 컴포넌트 검색과 prop 조회를 위한 docs 툴셋(list-all-documentation, get-documentation, get-documentation-for-story), 스토리 작성을 위한 dev 툴셋(get-storybook-story-instructions, preview-stories), 그리고 Vitest 기반 테스트를 실행하고 접근성 위반을 구조화된 결과로 반환하는 testing 툴셋(run-story-tests). MCP 없이 Claude Code는 기존 디자인 시스템을 무시한 263줄의 인라인 컴포넌트를 생성했지만, MCP 연결 후에는 188줄로 Button과 TextInput을 정확한 prop 계약에 맞게 가져오고, aria-invalid 및 aria-describedby 등 접근성 수정을 TextInput 컴포넌트에 자율적으로 적용했습니다.
이 튜토리얼은 shadcn/ui와 Shadcn Space 서드파티 레지스트리를 사용해 4가지 프로덕션 수준의 카드 컴포넌트를 구축하는 과정을 안내합니다: group hover 이미지 애니메이션(scale-125와 overflow-hidden 클리핑)을 가진 Preview Card, TypeScript 타입 props와 기본 데이터셋, 조건부 cn() 뱃지 색상을 갖춘 Analytics Card, @iconify/react Solar 아이콘과 last:border-e-0을 사용한 반응형 4열 Statistics Card, 그리고 named hover group(group/card, group/btn), rounded-full 요소의 scale-[20]을 통한 CSS 전용 리플 효과, useState 기반 size 선택기와 위시리스트 토글, 서수 배송 날짜를 위한 suppressHydrationWarning을 포함한 Ecommerce Product Variant Card. Shadcn Space 컴포넌트는 components.json에 레지스트리 URL을 등록한 후 npx shadcn@latest add @shadcn-space/card-XX 명령 하나로 설치됩니다.
코딩 에이전트는 조립할 디자인 시스템이 없으면 불일치한 UI를 생성합니다 — 거의 맞지만 틀린 버튼, 비슷하지만 어긋난 spacing, 다른 앱처럼 느껴지는 로딩 상태. 저자는 color, spacing, radius, typography의 테마 토큰과 Button, TextInput, Card 같은 기본 컴포넌트 및 변형/상태 정의를 포함한 디자인 시스템을 먼저 구축할 것을 권장합니다. 에이전트가 테마 파일, Storybook 스토리, 예제 사용법을 포함한 기반을 직접 구성할 수 있지만, spacing·line height·border radius에 대한 세심한 인간 검토는 여전히 필요합니다. 시스템이 갖춰지면 프롬프트가 구체적으로 변합니다: src/components/ui의 기존 컴포넌트를 사용하고, 진정으로 누락된 경우가 아니면 새 primitive를 만들지 말라고 지시할 수 있습니다.
이번 주 디자인 시스템 분야는 AI 도구와 컴포넌트 거버넌스의 교차점이 주요 주제였습니다. Evil Martians가 Claude Code 에이전트 스킬 모음인 Storybook Workbench(/sb. 접두사)를 공개했습니다. vibe-coded 코드베이스 감사를 위해 개발된 이 도구는 실제 469개 컴포넌트로 구성된 앱에서 31개의 dead 컴포넌트(그 중 19개는 폐기된 전체 페이지 플로우)와 실행 중 앱에서는 보이지 않던 6개의 접근성 버그를 발견했습니다. 발견된 버그에는 WCAG AA 기준인 4.5에 미치지 못하는 대비율 3.87의 뱃지 변형과 broken combobox role의 select 컴포넌트가 포함되었습니다. 4가지 스킬(onboard, orchestrate, navigate, report)은 구조화된 JSON을 출력하며, Linear의 MCP에 연결해 티켓을 자동 생성하거나 PDF로 내보낼 수 있습니다. Storybook 10.3의 새로운 @storybook/addon-mcp는 http://localhost:6006/mcp에서 컴포넌트 라이브러리를 3가지 툴셋(docs, dev, testing)의 구조화된 MCP 서버로 노출하여, Claude Code가 인라인 기본 요소를 발명하는 대신 올바른 컴포넌트를 사용하도록 안내합니다.
Nielsen Norman Group은 선형적 디자인 시스템 성숙도 모델을 조직적 정렬, 팀 효율성, 인프라 견고성, 거버넌스, 지원, 도입의 6개 차원으로 구성된 프레임워크로 대체할 것을 제안했습니다. 각 차원은 1~5점으로 평가되어 육각형 레이더 차트로 시각화됩니다. 이 모델은 평가자 간의 논의 자체가 점수보다 더 가치 있는 경우가 많다고 강조합니다. 코딩 에이전트를 도입하기 전에 테마 토큰, 정의된 변형을 갖춘 기본 컴포넌트, 그리고 레이아웃 컨텍스트를 위한 Figma MCP 서버를 포함한 디자인 시스템 기반을 먼저 구축하고 에이전트 프롬프트는 한 번에 한 화면으로 제한하라는 실용적인 가이드도 제시됐습니다.
접근성 표준도 중요하게 다루어졌습니다. Deque는 이슈 레지스트리, RCA, CAPA 추적 기능을 갖춘 ISO 9001 방식의 관리 표준인 EN 17161 Design for All이 최소 4년은 걸릴 WCAG 3.0을 기다리는 것보다 WCAG의 실용적인 보완책이라고 주장했습니다. NDC Copenhagen 강연에서는 flex-direction: row-reverse로 인한 키보드 탐색 실패, 누락된 aria-invalid 연결 등 일반적인 WCAG 위반 사례가 시연되었습니다.
Key Takeaways
Storybook Workbench(Claude Code의 /sb. 스킬)는 469개 컴포넌트로 구성된 vibe-coded 앱에서 31개의 dead 컴포넌트와 대비율 3.87의 뱃지 포함 6개의 접근성 버그를 발견했습니다. 출력 결과는 Linear MCP에 연결해 자동으로 티켓을 생성할 수 있습니다.
Storybook 10.3의 @storybook/addon-mcp는 localhost:6006/mcp에서 컴포넌트 라이브러리를 노출합니다. 테스트에서 Claude Code는 발명된 인라인 컴포넌트로 이루어진 263줄 코드를 Button과 TextInput을 올바르게 임포트하고 접근성까지 자율 수정한 188줄 코드로 줄였습니다.
EN 17161 Design for All은 ISO 9001과 결합해 이슈 레지스트리, RCA, CAPA 추적 등 프로세스 수준의 접근성 거버넌스를 제공합니다. WCAG의 특정 시점 기준 적합성 모델이 제공하지 못하는 영역이며, 유럽 접근성법 준수 기한이 다가오는 상황에서 중요도가 높아지고 있습니다.
