Storybook 10.3: MCP, 접근성 개선, 워크플로 업그레이드 — 2026년 15주 디자인 시스템
이번 주 헤드라인은 React용 MCP 통합을 도입한 Storybook 10.3이었습니다. AI 에이전트가 실제 컴포넌트, 스토리, 문서, 테스트에 직접 구조적으로 접근할 수 있게 해, 환각 없이 프로덕션 수준의 UI를 구축할 수 있습니다. 툴셋은 Dev(UI 상태 가시화),… 개발자가 바로 활용할 수 있도록 정리했습니다.
calendar_todaysummarize2026년 15주차
article
태그: 스토리북읽기_시간: 4분
Storybook 10.3: MCP, 접근성 개선, 워크플로 업그레이드
Storybook 10.3은 React용 MCP를 도입하여 AI 에이전트가 실제 컴포넌트, 스토리, 문서, 테스트에 직접 접근하고 프로덕션 수준의 UI를 빌드할 수 있도록 합니다. MCP 툴셋은 세 가지 레이어로 구성됩니다. Dev 툴셋은 주요 UI 상태를 시각적으로 보여주고, Docs 툴셋은 디자인 시스템 컴포넌트를 재사용하며, Test 툴셋은 컴포넌트 및 접근성 테스트를 통한 자기 수정 기능을 제공합니다. 이번 릴리스는 ARIA 시맨틱 개선, 키보드 내비게이션, 고대비 지원, reduced-motion 개선 등 대대적인 접근성 개편도 포함합니다. CSF Factories는 Vue, Angular, Web Components로 확장되었으며, Vite 8, Next.js 16.2, Angular 21, 그리고 Vike·Astro 커뮤니티 통합도 새롭게 추가되었습니다.
이 글은 동일한 Modal 컴포넌트가 Checkout, Onboarding, Settings, Growth 팀에서 각기 다른 duration prop으로 구현되는 실제 다팀 발산 문제를 진단하고, 모션 토큰을 구조적 해결책으로 제시합니다. 해결 방법은 5단계 duration 스케일(50ms–800ms)과 이징 어휘를 CSS 커스텀 프로퍼티로 명명한 후, --motion-enter, --motion-exit, --motion-hover, --motion-spring, --motion-feedback 같은 시맨틱 인텐트 레이어를 쌓는 것입니다. 이 시맨틱 레이어는 진입/퇴장 비대칭 규칙(퇴장은 진입의 약 60% 시간, ease-in vs. ease-out)을 코드화하며, 개발자가 밀리초를 직접 조정하는 대신 인텐트 토큰을 사용하도록 유도합니다. Framer Motion의 AnimatePresence 사용 시점(DOM에서 제거되는 경우에만), 스프링 이징의 긍정적 피드백 의미론, 그리고 루트 레벨의 prefers-reduced-motion 처리도 다룹니다.
Netguru의 Silk는 Figma Community에서 무료로 배포되는 모바일 및 반응형 웹 디자인 시스템으로, Phosphor 아이콘 셋과 함께 사용합니다. 토큰 구조는 12단계 색상 램프 형태의 프리미티브 위에 Accent, Neutral, Semantic 시맨틱 별칭을 계층화하여, 하나의 프리미티브 변수를 변경하면 모든 컴포넌트가 자동으로 업데이트됩니다. 타이포그래피는 데스크탑, 태블릿, 모바일 모드별 Figma 변수로 font-family, font-size, font-weight, letter-spacing을 제어합니다. 꿀 노란색이나 밝은 청록색 같은 까다로운 색상 처리 방법, 팔레트 교체 후 colors/text·colors/surface·colors/border 기능 변수 그룹 조정법, WCAG 2.2 AA 대비 기준(텍스트 4.5:1, 인터랙티브 요소 3:1), kebab-case/camelCase 네이밍 규칙 등 컴포넌트 제작 지침도 상세히 다룹니다.
브라우저 내장 Intl API는 Moment.js(295 kB), date-fns(77 kB), Luxon(82 kB), numeral.js를 번들 비용 없이 대체할 수 있습니다. Polypane의 Kilian Valkhof는 8가지 포매터를 심층적으로 다룹니다. Intl.DateTimeFormat(dateStyle/timeStyle 옵션과 formatToParts), Intl.RelativeTimeFormat('어제' 같은 친근한 상대 시간), Intl.DurationFormat(나노초까지의 디지털·장문 형식 시간), Intl.NumberFormat(숫자, 통화, 단위, 컴팩트 표기), Intl.ListFormat(conjunction/disjunction/unit 목록 유형), Intl.PluralRules(아랍어의 6가지 형식을 포함한 언어별 복수형), Intl.Segmenter(일본어와 이모지 리가처를 올바르게 처리하는 자소·단어·문장 분절), Intl.Collator(숫자·감도·전화번호부 정렬 옵션 포함 로케일 인식 정렬). 모든 포매터는 한 번 생성 후 재사용하는 공통 패턴을 공유합니다.
Nielsen Norman Group은 디지털 인터페이스를 통해 목표를 추구하는 AI 에이전트가 이제 우리가 설계하는 제품의 기능적 사용자가 되었으며, 이는 '사용자'라는 단어의 근본적인 재정의를 요구한다고 주장합니다. 에이전트가 현재 사용하는 세 가지 상호작용 방식—스크린샷 기반 비전 모델(토큰 비용이 높고 오류 발생 가능성 높음), 접근성 트리 파싱(브라우저의 구조적 HTML 표현 활용, 비용 저렴하고 신뢰성 높음), MCP 같은 표준을 통한 직접 API 접근—을 분류합니다. 시맨틱 HTML, 명확한 레이블링, 일관된 내비게이션 패턴, 시각적 정보 구조 최소화 등 인간과 에이전트를 동시에 지원하는 디자인 관행을 제시하고, 접근성 투자가 이제 명확한 비즈니스 근거를 갖게 되었다고 강조합니다.
TetraLogical의 Ela Gorla는 사별, 재정적 어려움, 폭력 생존자 등 취약한 참여자를 대상으로 사용자 리서치를 수행할 때의 실무 프레임워크를 제시합니다. 가이드는 네 가지 영역을 다룹니다. 첫째, 필요성—취약한 참여자를 모집하는 것이 리서치 질문에 꼭 필요한 경우에만 수행합니다. 둘째, 프라이버시—데이터 수집을 최소화하고, 접근을 제한하며, GDPR을 준수하고, 세션 시작 시 구두로 동의를 재확인합니다. 셋째, 트라우마 인식 진행—민감한 주제를 사전에 고지하고, 'friend'나 'suffers from a disability' 같은 자극적 단어를 피하며, 참여자에게 중단 권리를 명확히 부여합니다. 넷째, 리서처 웰빙—진행자가 해당 주제에 편안함을 느끼고 적절한 교육과 멘토링을 받을 수 있도록 합니다.
Syntax 호스트 Wes Bos와 Scott Tolinski는 엄격한 디자인 시스템이 있어도 AI 도구가 일관되게 좋지 않은 CSS와 UI 디자인을 생성하는 이유를 논의합니다. 핵심 문제는 모델이 전역 시스템 규칙 대신 로컬 패치를 선호하고, 네이티브 CSS 중첩 같은 최신 기능에 뒤처지며, Codex CLI 헤더처럼 그라디언트와 '표현적 폰트'를 강제하는 숨겨진 시스템 프롬프트가 사용자 지시를 무시한다는 것입니다. 실용적인 해결책으로 디자인 시스템 규칙을 skill 또는 vibe-rules 패키지로 배포하거나, AI 에이전트에게 렌더링된 HTML 대신 마크다운으로 문서를 반환하는 방법, 기술 면접에서 '적당히 부족한' AI 모델을 사용해 시스템적 사고력을 갖춘 지원자를 선별하는 방법도 다룹니다.
Storybook 10.3은 React용 MCP를 도입하여 AI 에이전트가 실제 컴포넌트, 스토리, 문서, 테스트에 직접 접근하고 프로덕션 수준의 UI를 빌드할 수 있도록 합니다. MCP 툴셋은 세 가지 레이어로 구성됩니다. Dev 툴셋은 주요 UI 상태를 시각적으로 보여주고, Docs 툴셋은 디자인 시스템 컴포넌트를 재사용하며, Test 툴셋은 컴포넌트 및 접근성 테스트를 통한 자기 수정 기능을 제공합니다. 이번 릴리스는 ARIA 시맨틱 개선, 키보드 내비게이션, 고대비 지원, reduced-motion 개선 등 대대적인 접근성 개편도 포함합니다. CSF Factories는 Vue, Angular, Web Components로 확장되었으며, Vite 8, Next.js 16.2, Angular 21, 그리고 Vike·Astro 커뮤니티 통합도 새롭게 추가되었습니다.
Syntax 호스트 Wes Bos와 Scott Tolinski는 엄격한 디자인 시스템이 있어도 AI 도구가 일관되게 좋지 않은 CSS와 UI 디자인을 생성하는 이유를 논의합니다. 핵심 문제는 모델이 전역 시스템 규칙 대신 로컬 패치를 선호하고, 네이티브 CSS 중첩 같은 최신 기능에 뒤처지며, Codex CLI 헤더처럼 그라디언트와 '표현적 폰트'를 강제하는 숨겨진 시스템 프롬프트가 사용자 지시를 무시한다는 것입니다. 실용적인 해결책으로 디자인 시스템 규칙을 skill 또는 vibe-rules 패키지로 배포하거나, AI 에이전트에게 렌더링된 HTML 대신 마크다운으로 문서를 반환하는 방법, 기술 면접에서 '적당히 부족한' AI 모델을 사용해 시스템적 사고력을 갖춘 지원자를 선별하는 방법도 다룹니다.
이 글은 동일한 Modal 컴포넌트가 Checkout, Onboarding, Settings, Growth 팀에서 각기 다른 duration prop으로 구현되는 실제 다팀 발산 문제를 진단하고, 모션 토큰을 구조적 해결책으로 제시합니다. 해결 방법은 5단계 duration 스케일(50ms–800ms)과 이징 어휘를 CSS 커스텀 프로퍼티로 명명한 후, --motion-enter, --motion-exit, --motion-hover, --motion-spring, --motion-feedback 같은 시맨틱 인텐트 레이어를 쌓는 것입니다. 이 시맨틱 레이어는 진입/퇴장 비대칭 규칙(퇴장은 진입의 약 60% 시간, ease-in vs. ease-out)을 코드화하며, 개발자가 밀리초를 직접 조정하는 대신 인텐트 토큰을 사용하도록 유도합니다. Framer Motion의 AnimatePresence 사용 시점(DOM에서 제거되는 경우에만), 스프링 이징의 긍정적 피드백 의미론, 그리고 루트 레벨의 prefers-reduced-motion 처리도 다룹니다.
Netguru의 Silk는 Figma Community에서 무료로 배포되는 모바일 및 반응형 웹 디자인 시스템으로, Phosphor 아이콘 셋과 함께 사용합니다. 토큰 구조는 12단계 색상 램프 형태의 프리미티브 위에 Accent, Neutral, Semantic 시맨틱 별칭을 계층화하여, 하나의 프리미티브 변수를 변경하면 모든 컴포넌트가 자동으로 업데이트됩니다. 타이포그래피는 데스크탑, 태블릿, 모바일 모드별 Figma 변수로 font-family, font-size, font-weight, letter-spacing을 제어합니다. 꿀 노란색이나 밝은 청록색 같은 까다로운 색상 처리 방법, 팔레트 교체 후 colors/text·colors/surface·colors/border 기능 변수 그룹 조정법, WCAG 2.2 AA 대비 기준(텍스트 4.5:1, 인터랙티브 요소 3:1), kebab-case/camelCase 네이밍 규칙 등 컴포넌트 제작 지침도 상세히 다룹니다.
브라우저 내장 Intl API는 Moment.js(295 kB), date-fns(77 kB), Luxon(82 kB), numeral.js를 번들 비용 없이 대체할 수 있습니다. Polypane의 Kilian Valkhof는 8가지 포매터를 심층적으로 다룹니다. Intl.DateTimeFormat(dateStyle/timeStyle 옵션과 formatToParts), Intl.RelativeTimeFormat('어제' 같은 친근한 상대 시간), Intl.DurationFormat(나노초까지의 디지털·장문 형식 시간), Intl.NumberFormat(숫자, 통화, 단위, 컴팩트 표기), Intl.ListFormat(conjunction/disjunction/unit 목록 유형), Intl.PluralRules(아랍어의 6가지 형식을 포함한 언어별 복수형), Intl.Segmenter(일본어와 이모지 리가처를 올바르게 처리하는 자소·단어·문장 분절), Intl.Collator(숫자·감도·전화번호부 정렬 옵션 포함 로케일 인식 정렬). 모든 포매터는 한 번 생성 후 재사용하는 공통 패턴을 공유합니다.
Nielsen Norman Group은 디지털 인터페이스를 통해 목표를 추구하는 AI 에이전트가 이제 우리가 설계하는 제품의 기능적 사용자가 되었으며, 이는 '사용자'라는 단어의 근본적인 재정의를 요구한다고 주장합니다. 에이전트가 현재 사용하는 세 가지 상호작용 방식—스크린샷 기반 비전 모델(토큰 비용이 높고 오류 발생 가능성 높음), 접근성 트리 파싱(브라우저의 구조적 HTML 표현 활용, 비용 저렴하고 신뢰성 높음), MCP 같은 표준을 통한 직접 API 접근—을 분류합니다. 시맨틱 HTML, 명확한 레이블링, 일관된 내비게이션 패턴, 시각적 정보 구조 최소화 등 인간과 에이전트를 동시에 지원하는 디자인 관행을 제시하고, 접근성 투자가 이제 명확한 비즈니스 근거를 갖게 되었다고 강조합니다.
TetraLogical의 Ela Gorla는 사별, 재정적 어려움, 폭력 생존자 등 취약한 참여자를 대상으로 사용자 리서치를 수행할 때의 실무 프레임워크를 제시합니다. 가이드는 네 가지 영역을 다룹니다. 첫째, 필요성—취약한 참여자를 모집하는 것이 리서치 질문에 꼭 필요한 경우에만 수행합니다. 둘째, 프라이버시—데이터 수집을 최소화하고, 접근을 제한하며, GDPR을 준수하고, 세션 시작 시 구두로 동의를 재확인합니다. 셋째, 트라우마 인식 진행—민감한 주제를 사전에 고지하고, 'friend'나 'suffers from a disability' 같은 자극적 단어를 피하며, 참여자에게 중단 권리를 명확히 부여합니다. 넷째, 리서처 웰빙—진행자가 해당 주제에 편안함을 느끼고 적절한 교육과 멘토링을 받을 수 있도록 합니다.
이번 주 헤드라인은 React용 MCP 통합을 도입한 Storybook 10.3이었습니다. AI 에이전트가 실제 컴포넌트, 스토리, 문서, 테스트에 직접 구조적으로 접근할 수 있게 해, 환각 없이 프로덕션 수준의 UI를 구축할 수 있습니다. 툴셋은 Dev(UI 상태 가시화), Docs(컴포넌트 재사용), Test(접근성 검사를 통한 자기 수정)의 세 레이어로 구성됩니다. 이번 릴리스는 더 타입 안전한 CSF Factories 형식을 React를 넘어 Vue, Angular, Web Components로 확장하고, ARIA 시맨틱, 키보드 내비게이션, 고대비 지원을 포함한 Storybook 자체 UI의 대대적인 접근성 개편도 포함합니다. 에코시스템에는 Vite 8, Next.js 16.2, Angular 21이 추가됐습니다.
Netguru는 모바일 및 반응형 웹을 위한 무료 Figma Community 디자인 시스템인 Silk의 상세 문서를 공개했습니다. Silk의 토큰 구조는 12단계 기본 색상 램프 위에 Accent, Neutral, Semantic 별칭을 계층화해 단일 기본 변경이 모든 컴포넌트에 자동 전파됩니다. 텍스트 4.5:1, 인터랙티브 요소 3:1의 WCAG 2.2 AA 대비 기준을 목표로 하며, 모든 토큰 컬렉션에 kebab-case/camelCase 명명 규칙을 사용합니다. 또한 모션 토큰에 관한 실용적인 글에서는 5단계 duration 스케일(50ms–800ms)과 --motion-enter, --motion-exit 같은 시맨틱 인텐트 토큰으로 팀 간 애니메이션 차이를 제거하는 방법을 소개했습니다.
디자인 시스템 논의는 두 가지 광범위한 UX 관점으로 더욱 풍부해졌습니다. Nielsen Norman Group은 AI 에이전트를 우리가 설계하는 제품의 실제 사용자로 재정의하며, 시맨틱 HTML, 명확한 레이블링, 일관된 내비게이션이 이제 접근성 트리 파싱을 통해 명확한 비즈니스 근거를 가진다고 주장했습니다. Wes Bos와 Scott Tolinski의 Syntax 팟캐스트 에피소드는 AI 도구가 CSS에서 일관되게 성능이 저하되는 이유를 분석했습니다. 모델이 전역 규칙 대신 로컬 패치를 선호하고, 네이티브 CSS 중첩 같은 기능에 뒤처지며, Codex CLI의 그라디언트 강제 같은 숨겨진 시스템 프롬프트가 사용자 의도를 재정의하는 것이 원인입니다.
핵심 요점
Storybook 10.3의 MCP 통합은 Dev, Docs, Test의 세 레이어를 통해 AI 에이전트에게 실제 컴포넌트에 대한 구조적 접근을 제공하여 환각 없이 프로덕션 수준의 UI를 생성할 수 있게 합니다.
Netguru의 Silk 디자인 시스템은 12단계 기본 색상 램프와 Accent/Neutral/Semantic 별칭을 사용하여 하나의 토큰 변경으로 모든 컴포넌트가 업데이트되며, WCAG 2.2 AA 대비 비율을 목표로 합니다.
Nielsen Norman Group은 AI 에이전트가 이제 접근성 트리 파싱을 통해 UI를 소비한다고 주장하며, 시맨틱 HTML과 명확한 레이블이 접근성 규정 준수만이 아닌 직접적인 비즈니스 투자임을 강조합니다.
