UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 13-2026
article
React용 Storybook MCP
TAG: AI 도구
Storybook 10.3은 React용 MCP 서버를 도입하여 AI 에이전트가 컴포넌트 라이브러리를 구조적으로 파악할 수 있도록 합니다. 이를 통해 에이전트가 디자인 시스템과 충돌하는 패턴을 생성하는 것을 방지합니다. 애드온은 에이전트에게 story, API 문서, 사용 예시 등 컴포넌트 메타데이터를 제공하여 더 적은 토큰으로 기존 컴포넌트를 재사용할 수 있게 합니다. 에이전트는 MCP 서버를 통해 컴포넌트 및 접근성 테스트를 실행하고 오류를 자체적으로 수정하거나 인간의 판단이 필요할 때 개발자에게 에스컬레이션합니다. 라이브 story 미리보기가 에이전트 채팅 UI에 직접 임베드되어 도구를 전환하지 않고도 hover 상태와 인터랙션을 확인할 수 있습니다. Chromatic은 버전 관리와 인증을 포함한 MCP 서버의 원격 게시를 기본으로 지원합니다.
ADA Title II 웹 접근성 규정을 둘러싼 연방 검토 활동이 많은 추측을 낳고 있지만, 현재까지 준수 기한이나 요구사항에 대한 공식 변경은 발표되지 않았습니다. Deque는 확인된 사실과 소문을 구분합니다. 전면 철회는 가능성이 낮고, 지연이나 수정은 가능하지만, 주·지방 정부가 동등한 디지털 접근성을 제공해야 하는 기본 ADA 의무는 해당 규정 이전부터 존재했으며 일정 변경과 무관하게 DOJ 조사, 합의, 소송을 통해 집행됩니다. 이 글은 WCAG 2.1 AA 준수 유지, CI/CD 파이프라인의 자동화된 접근성 테스트 지속, 접근성이 처음부터 통합된 디자인 시스템 구축을 권장합니다. 접근성 작업을 중단해도 법적 위험이 줄지 않으며 오히려 증가합니다. 핵심은 기한 추격이 아닌 지속 가능하고 확장 가능한 접근성 역량 구축입니다.
Nielsen Norman Group은 누가 디자인 결정을 시작하는지에 따라 generative UI(genUI)와 vibe coding을 명확하게 구분합니다. genUI에서는 AI 시스템이 체크박스, 데이터 시각화, 명확화 위젯 등 시각적 또는 인터랙티브 요소가 텍스트 응답보다 사용자에게 더 유용하다고 자율적으로 판단합니다. vibe coding에서는 사용자가 소프트웨어 결과물 생성을 명시적으로 요청합니다. Vibe coding은 AI에게 대부분의 구조적 선택을 위임하는 단문 프롬프트부터 3열 레이아웃, Mapbox 커스텀 핀, drag-and-drop 타임라인, local storage 퍼시스턴스를 지정하는 상세한 프롬프트까지 넓은 명세 스펙트럼을 가집니다. GenUI는 실행 품질뿐만 아니라 인터페이스가 필요하다는 판단 자체에 대해 책임을 지므로 vibe coding보다 높은 디자인 책임을 요구합니다. 저자들은 AI 기반 커스터마이제이션이 명시적 프롬프트 없이 행동과 맥락에 따라 인터페이스를 적응시키는 invisible AI 개념을 소개합니다.
WCAG 2.2 성공 기준 1.4.4는 텍스트를 콘텐츠나 기능 손실 없이 최대 200%까지 확대할 수 있어야 한다고 규정하며, 모바일 사용자의 26%가 이미 이 기능을 기본으로 사용하고 있습니다. 이 글은 각 텍스트 스타일의 font-size와 line-height에 바인딩된 number 변수를 활용하여 Figma에서 폰트 확대를 시뮬레이션하는 10단계 프로세스를 설명합니다. 120%, 140%, 160%, 180%, 200%의 확대 비율을 다루며, 모든 프레임에 auto layout을 일관되게 적용하고 모든 텍스트 요소에 텍스트 스타일을 정의해야 합니다. 디자이너는 화면을 복사하고 변수 컬렉션을 교체하여 고정 컨테이너나 auto layout 미적용으로 인한 레이아웃 문제를 발견할 수 있습니다. 라이트/다크 모드 변수 세트를 이미 사용하는 디자인 시스템은 동일한 전환 패턴을 적용할 수 있습니다.
저시력은 연령 관련 시력 저하부터 녹내장, 망막색소변성증과 같은 질환까지 광범위한 스펙트럼을 포괄하며, 이 그룹의 대부분은 스크린 리더 대신 화면 확대 또는 브라우저 줌을 사용합니다. 이 가이드는 7가지 구체적인 디자인 고려사항을 다룹니다. 제목 레벨이 시각적으로 구조를 반영하는 명확한 타이포그래피 계층 유지, 배경색과 일관된 간격을 활용한 관련 콘텐츠 그룹화, 확대 사용자를 위한 Compose 버튼 등 핵심 컨트롤의 좌상단 배치, 200% 줌에서 콘텐츠가 넘치지 않도록 텍스트 컨테이너의 고정 높이 지양, 코너의 자동 사라지는 toast 알림 대신 트리거 액션 인접 배치 등이 포함됩니다. 400% 줌에서 뷰포트의 60%를 차지할 수 있는 sticky 헤더와 푸터는 문제가 있으며, Print 및 Export 기능은 모바일 레이아웃에서 제거되지 않아야 합니다.
테스트에서 data-testid 속성으로 요소를 찾는 방식은 접근성이 떨어지는 마크업이 테스트를 통과하도록 묵인하는 코드 냄새입니다. 버튼이 클릭 가능한 div로 교체되어도 data-testid를 사용하는 테스트는 계속 통과하지만, 해당 요소는 키보드 접근이 불가능하고 올바른 ARIA 역할도 없습니다. Testing Library나 Playwright의 내장 쿼리 API의 role 기반 셀렉터는 부작용으로 시맨틱 HTML을 강제합니다. getByRole이 요소를 찾지 못하면 스크린 리더와 키보드 사용자도 찾지 못한다는 의미입니다. 저자는 테스트 쿼리를 자연어 행동으로 구조화할 것을 권장하며, 시맨틱 HTML을 통한 암묵적 ARIA 역할 활용, 모든 폼 컨트롤에 visible 또는 visually-hidden 레이블 연결, Testing Playground 활용, 브라우저 DevTools의 Accessibility tree 활용 등 실용적인 팁을 제공합니다.
DesignCourse는 Figma의 업데이트된 MCP 서버와 skills 통합을 시연하며, 라이브 개발 서버와 Figma 파일 간의 양방향 워크플로우를 가능하게 합니다. Claude Code에서 use_figma 스킬을 사용하여 실행 중인 React 앱을 global CSS에서 추출한 디자인 토큰으로 Figma에 변환하고, 일치하는 Figma 변수를 생성하며, 모든 프레임을 해당 변수에 바인딩된 auto layout으로 구성합니다. 튜토리얼은 토큰 수준의 양방향 동기화를 보여줍니다. Figma에서 배경색 변수를 변경하면 바인딩된 모든 프레임이 즉시 업데이트되고, 새 토큰(navbar-bg: white)을 추가하면 디자인 시스템에 등록됩니다. Figma 디자인을 코드베이스로 되돌리는 과정은 LLM의 비결정적 특성으로 인해 재프롬프팅이 필요했으며, 첫 번째 시도에서 배경색 변경을 놓치고 제거된 stroke를 검은색으로 변환하는 문제가 발생했습니다.
Storybook 10.3은 React용 MCP 서버를 도입하여 AI 에이전트가 컴포넌트 라이브러리를 구조적으로 파악할 수 있도록 합니다. 이를 통해 에이전트가 디자인 시스템과 충돌하는 패턴을 생성하는 것을 방지합니다. 애드온은 에이전트에게 story, API 문서, 사용 예시 등 컴포넌트 메타데이터를 제공하여 더 적은 토큰으로 기존 컴포넌트를 재사용할 수 있게 합니다. 에이전트는 MCP 서버를 통해 컴포넌트 및 접근성 테스트를 실행하고 오류를 자체적으로 수정하거나 인간의 판단이 필요할 때 개발자에게 에스컬레이션합니다. 라이브 story 미리보기가 에이전트 채팅 UI에 직접 임베드되어 도구를 전환하지 않고도 hover 상태와 인터랙션을 확인할 수 있습니다. Chromatic은 버전 관리와 인증을 포함한 MCP 서버의 원격 게시를 기본으로 지원합니다.
DesignCourse는 Figma의 업데이트된 MCP 서버와 skills 통합을 시연하며, 라이브 개발 서버와 Figma 파일 간의 양방향 워크플로우를 가능하게 합니다. Claude Code에서 use_figma 스킬을 사용하여 실행 중인 React 앱을 global CSS에서 추출한 디자인 토큰으로 Figma에 변환하고, 일치하는 Figma 변수를 생성하며, 모든 프레임을 해당 변수에 바인딩된 auto layout으로 구성합니다. 튜토리얼은 토큰 수준의 양방향 동기화를 보여줍니다. Figma에서 배경색 변수를 변경하면 바인딩된 모든 프레임이 즉시 업데이트되고, 새 토큰(navbar-bg: white)을 추가하면 디자인 시스템에 등록됩니다. Figma 디자인을 코드베이스로 되돌리는 과정은 LLM의 비결정적 특성으로 인해 재프롬프팅이 필요했으며, 첫 번째 시도에서 배경색 변경을 놓치고 제거된 stroke를 검은색으로 변환하는 문제가 발생했습니다.
ADA Title II 웹 접근성 규정을 둘러싼 연방 검토 활동이 많은 추측을 낳고 있지만, 현재까지 준수 기한이나 요구사항에 대한 공식 변경은 발표되지 않았습니다. Deque는 확인된 사실과 소문을 구분합니다. 전면 철회는 가능성이 낮고, 지연이나 수정은 가능하지만, 주·지방 정부가 동등한 디지털 접근성을 제공해야 하는 기본 ADA 의무는 해당 규정 이전부터 존재했으며 일정 변경과 무관하게 DOJ 조사, 합의, 소송을 통해 집행됩니다. 이 글은 WCAG 2.1 AA 준수 유지, CI/CD 파이프라인의 자동화된 접근성 테스트 지속, 접근성이 처음부터 통합된 디자인 시스템 구축을 권장합니다. 접근성 작업을 중단해도 법적 위험이 줄지 않으며 오히려 증가합니다. 핵심은 기한 추격이 아닌 지속 가능하고 확장 가능한 접근성 역량 구축입니다.
Nielsen Norman Group은 누가 디자인 결정을 시작하는지에 따라 generative UI(genUI)와 vibe coding을 명확하게 구분합니다. genUI에서는 AI 시스템이 체크박스, 데이터 시각화, 명확화 위젯 등 시각적 또는 인터랙티브 요소가 텍스트 응답보다 사용자에게 더 유용하다고 자율적으로 판단합니다. vibe coding에서는 사용자가 소프트웨어 결과물 생성을 명시적으로 요청합니다. Vibe coding은 AI에게 대부분의 구조적 선택을 위임하는 단문 프롬프트부터 3열 레이아웃, Mapbox 커스텀 핀, drag-and-drop 타임라인, local storage 퍼시스턴스를 지정하는 상세한 프롬프트까지 넓은 명세 스펙트럼을 가집니다. GenUI는 실행 품질뿐만 아니라 인터페이스가 필요하다는 판단 자체에 대해 책임을 지므로 vibe coding보다 높은 디자인 책임을 요구합니다. 저자들은 AI 기반 커스터마이제이션이 명시적 프롬프트 없이 행동과 맥락에 따라 인터페이스를 적응시키는 invisible AI 개념을 소개합니다.
WCAG 2.2 성공 기준 1.4.4는 텍스트를 콘텐츠나 기능 손실 없이 최대 200%까지 확대할 수 있어야 한다고 규정하며, 모바일 사용자의 26%가 이미 이 기능을 기본으로 사용하고 있습니다. 이 글은 각 텍스트 스타일의 font-size와 line-height에 바인딩된 number 변수를 활용하여 Figma에서 폰트 확대를 시뮬레이션하는 10단계 프로세스를 설명합니다. 120%, 140%, 160%, 180%, 200%의 확대 비율을 다루며, 모든 프레임에 auto layout을 일관되게 적용하고 모든 텍스트 요소에 텍스트 스타일을 정의해야 합니다. 디자이너는 화면을 복사하고 변수 컬렉션을 교체하여 고정 컨테이너나 auto layout 미적용으로 인한 레이아웃 문제를 발견할 수 있습니다. 라이트/다크 모드 변수 세트를 이미 사용하는 디자인 시스템은 동일한 전환 패턴을 적용할 수 있습니다.
저시력은 연령 관련 시력 저하부터 녹내장, 망막색소변성증과 같은 질환까지 광범위한 스펙트럼을 포괄하며, 이 그룹의 대부분은 스크린 리더 대신 화면 확대 또는 브라우저 줌을 사용합니다. 이 가이드는 7가지 구체적인 디자인 고려사항을 다룹니다. 제목 레벨이 시각적으로 구조를 반영하는 명확한 타이포그래피 계층 유지, 배경색과 일관된 간격을 활용한 관련 콘텐츠 그룹화, 확대 사용자를 위한 Compose 버튼 등 핵심 컨트롤의 좌상단 배치, 200% 줌에서 콘텐츠가 넘치지 않도록 텍스트 컨테이너의 고정 높이 지양, 코너의 자동 사라지는 toast 알림 대신 트리거 액션 인접 배치 등이 포함됩니다. 400% 줌에서 뷰포트의 60%를 차지할 수 있는 sticky 헤더와 푸터는 문제가 있으며, Print 및 Export 기능은 모바일 레이아웃에서 제거되지 않아야 합니다.
테스트에서 data-testid 속성으로 요소를 찾는 방식은 접근성이 떨어지는 마크업이 테스트를 통과하도록 묵인하는 코드 냄새입니다. 버튼이 클릭 가능한 div로 교체되어도 data-testid를 사용하는 테스트는 계속 통과하지만, 해당 요소는 키보드 접근이 불가능하고 올바른 ARIA 역할도 없습니다. Testing Library나 Playwright의 내장 쿼리 API의 role 기반 셀렉터는 부작용으로 시맨틱 HTML을 강제합니다. getByRole이 요소를 찾지 못하면 스크린 리더와 키보드 사용자도 찾지 못한다는 의미입니다. 저자는 테스트 쿼리를 자연어 행동으로 구조화할 것을 권장하며, 시맨틱 HTML을 통한 암묵적 ARIA 역할 활용, 모든 폼 컨트롤에 visible 또는 visually-hidden 레이블 연결, Testing Playground 활용, 브라우저 DevTools의 Accessibility tree 활용 등 실용적인 팁을 제공합니다.
이번 주 디자인 시스템 논의는 두 방향으로 전개되었습니다. 디자인 워크플로우에서 AI의 역할 확대와, 접근성의 절대적인 요구사항이 그것입니다. Storybook 10.3은 React용 MCP 서버를 출시하여 AI 에이전트가 story, API 문서, 사용 예시 등 컴포넌트 메타데이터를 구조적으로 인식하고 기존 디자인 시스템 컴포넌트를 재사용할 수 있도록 했습니다. Chromatic은 버전 관리와 인증을 포함한 MCP 서버의 원격 게시를 지원합니다. 별도로, Claude Code의 use_figma 스킬을 통해 시연된 Figma의 업데이트된 MCP 서버와 skills 통합은 양방향 디자인 토큰 워크플로우를 구축했습니다. CSS 전역값이 Figma 변수로 흘러들어가고 디자인 변경사항이 코드로 되돌아오는 구조이지만, LLM의 비결정적 특성으로 인해 역방향 패스에서 재프롬프팅이 필요했습니다.
접근성도 이번 주 중요한 주제였습니다. Deque는 ADA Title II 상황을 명확히 했습니다. 연방 검토 활동에도 불구하고 공식 준수 기한 변경은 발표되지 않았으며, 주·지방 정부에 대한 기본 ADA 의무는 규정 수정과 무관하게 DOJ를 통해 집행 가능합니다. WCAG 2.1 AA 준수를 유지하고 접근성을 CI/CD 파이프라인에 내재화할 것을 권장합니다. Tetralogical의 저시력 사용자를 위한 디자인 가이드는 텍스트 컨테이너에 고정 높이 금지, 핵심 컨트롤의 좌상단 배치, 400% 줌에서 sticky 내비게이션을 햄버거 메뉴로 전환하는 등의 구체적인 규칙을 제시했습니다.
테스팅과 디자인 방법론도 주목받았습니다. data-testid 셀렉터가 접근성 문제의 신호라는 Dominik Dorfmeister의 주장과, AI가 인터페이스 필요성을 판단하는 genUI와 사용자가 결과물을 요청하는 vibe coding의 명확한 구분을 제시한 Nielsen Norman Group의 분석이 소개되었습니다.
Key Takeaways
Storybook 10.3의 MCP 서버는 AI 에이전트가 코드 생성 전에 컴포넌트 메타데이터(story, API 문서)를 조회할 수 있게 하여 AI 보조 개발에서 디자인 시스템과의 불일치를 줄입니다.
ADA Title II의 기본 법적 의무는 주·지방 정부에 대해 규정 이전부터 존재하며 연방 일정 변경과 무관하게 유효합니다. 접근성 작업을 중단하면 법적 위험이 증가합니다.
data-testid 셀렉터는 접근성 문제의 신호입니다. Testing Library와 Playwright의 role 기반 쿼리는 부작용으로 시맨틱 HTML을 강제하여 접근성이 낮은 마크업이 테스트를 실패하게 만듭니다.
