이번 주 디자인 시스템 툴링은 여러 방면에서 발전하였습니다. Storybook 10.4는 한 번에 최대 10개 컴포넌트의 mock 구성, 스토리 작성, 인터랙션 테스트를 자동화하는 AI 기반 설정 기능을 출시하였으며, 코드 diff에 대해 new, modified, related 스토리를… 개발자가 바로 활용할 수 있도록 정리했습니다.
calendar_todaysummarize2026년 21주차
article
태그: 컴포넌트읽기_시간: 5분
Storybook 10.4
Storybook 10.4는 AI 기반 자동 설정 기능을 도입하여 목(mock) 구성, 스토리 작성, 최대 10개 컴포넌트에 대한 인터랙션 테스트를 수동 작업 없이 완료할 수 있습니다. 새로운 사이드바 변경 감지 필터는 코드 diff와 관련된 스토리를 new, modified, related로 분류하여 에이전트 작업 결과물 리뷰를 보다 체계적으로 지원합니다. Quick Sharing 기능은 PR이나 CI 없이 로컬 Storybook을 Chromatic에 버튼 클릭 한 번으로 공유할 수 있게 해줍니다. @storybook/tanstack-react를 통해 TanStack React의 타입 안전 라우팅 및 서버 함수가 제로 설정으로 지원됩니다. 실험적인 react-component-meta 분석기는 Volar와 TypeScript 언어 서버를 기반으로 react-docgen 및 react-docgen-typescript를 대체하며 더 빠른 업데이트와 높은 컴포넌트 감지율을 제공합니다.
React Server Components를 위한 Component Architecture
Aurora Scharff는 useEffect 로컬 페칭부터 React Query, 라우트 레벨 로더를 거쳐 React Server Components(RSC)까지의 진화를 추적하며, RSC가 두 가지 장점을 모두 달성한다고 주장합니다. 컴포넌트를 로더의 데이터 형태에 종속시키지 않고 서버 사이드 데이터 페칭이 가능하다는 것입니다. 각 비동기 서버 컴포넌트는 최소한의 식별자를 통해 필요한 데이터만 가져오므로, prop drilling이나 중복된 로더 로직 없이 페이지 간 컴포넌트를 재사용할 수 있습니다. React의 cache()는 컴포넌트 트리 전반에서 동일한 요청당 페칭을 중복 제거합니다. 페이지는 로딩 시퀀스를 설계하기 위해 의도적인 Suspense 경계를 배치하는 동기적 컴포지터가 됩니다. 단순성을 위한 단일 경계, 독립적 스트리밍을 위한 세분화된 경계를 선택하며, 레이아웃 이동 방지를 위해 컴포넌트와 스켈레톤을 같은 파일에서 함께 내보냅니다. 이 글은 클라이언트 사이드 Server Function 변경을 위한 useOptimistic, 기능별 폴더 구조, 그리고 동일한 아키텍처가 cacheComponents를 사용하는 Next.js 16 Partial Prerendering에 어떻게 매핑되는지도 다룹니다.
ARIA 명세의 'Name prohibited' 섹션은 div와 span의 기본 역할인 generic 역할을 이름을 부여할 수 없는 요소로 명시적으로 열거합니다. Manuel Matuzovic은 8가지 스크린 리더 및 브라우저 조합에서 aria-label을 div, span, 커스텀 요소에 적용하여 테스트한 결과 일관되지 않은 동작을 확인했습니다. macOS의 VoiceOver는 레이블과 함께 'group'을 읽는 반면, Chrome의 JAWS와 NVDA는 레이블을 완전히 무시하고 텍스트 내용만 읽습니다. 두 가지 예외가 있는데, section 요소는 레이블을 부여하면 region 랜드마크 역할을 갖게 되어 레이블 적용이 적절하며, popover 속성을 가진 div는 group 역할을 취해 기술적으로 레이블이 유효합니다. 실무적으로 디자인 시스템 마크업 가이드라인에서 generic 요소에 aria-label을 사용하면 예측할 수 없는 AT 발표를 초래하므로 피해야 합니다.
효과적인 대체 텍스트는 컨텍스트에 크게 의존합니다. 동일한 그림 이미지도 에세이에서는 풍부한 설명이 필요하지만, 내비게이션 링크 안에 있을 때는 기능적인 대상 레이블만 있으면 됩니다. 이 글은 WCAG 2.2의 POUR 원칙을 이미지 카테고리별로 구체적으로 매핑합니다. 필수 콘텐츠 이미지, 링크나 버튼 안의 이미지, 빈 alt 속성이 필요한 장식용 이미지, 텍스트 이미지, 긴 alt 문자열보다 보조 목록이나 설명이 적절한 차트 같은 복잡한 시각적 요소가 그 대상입니다. HTML alt 속성은 이미지 로딩 실패 시 대체 텍스트 역할을 하지 않는 aria-label이나 aria-labelledby보다 표준 방식으로 권장됩니다. CKEditor의 AI Quick Actions 기능은 이미지 내용을 바탕으로 대체 텍스트를 자동 생성할 수 있지만, 출판 전에 정확성과 맥락 적합성에 대한 인간의 검토가 필요하다고 강조합니다.
제15회 세계 접근성 인식의 날(GAAD)을 맞이하여 Deque는 APAC, 유럽, 북미에 걸쳐 세 가지 무료 디지털 접근성 기초 세션을 개최했으며, 30개국 이상, 30개 이상의 직군에서 수천 명의 참가자가 등록했습니다. 핵심 실용 지침으로는 Patrick Sturdivant의 alt 텍스트가 없는 것보다 어떤 alt 텍스트든 더 낫다는 조언과 Michael Harshbarger의 접근성을 보안이나 성능과 동등한 지속적인 운영 규율로 바라보는 관점이 있었습니다. AI 측면도 직접 다루어졌는데, 개발자는 AI가 생성한 코드가 접근성 기준을 충족하는지 여전히 책임져야 한다고 강조했습니다. APAC 세션에서는 해당 지역에 6억 9천만 명의 장애인이 거주한다는 사실을 강조하며 문제의 규모를 부각했습니다. Deque의 목표는 GAAD 인식을 개발 및 디자인 팀 전반에 걸친 지속적인 행동으로 전환하는 것입니다.
Laura Klein은 디자인 산출물을 두 가지로 구분합니다. 이해관계자를 위한 deliverable과 디자이너 스스로 생각을 정리하기 위해 만드는 '디자인 disposable', 즉 러프 스케치, 초안 태스크 플로우, 빠른 프로토타입, 초기 리서치 플랜입니다. 핵심 논지는 모든 산출물을 검토 가능한 deliverable로 취급하면 매몰 비용의 오류를 유발해 탐색이 비싸게 느껴지고 반복 작업이 억제된다는 것입니다. Disposable은 의도적으로 불완전하고 폐기 가능하며, 그 가치는 모호한 생각을 외부화하는 데 있습니다. AI 도구는 이 역학을 복잡하게 만드는데, 실제 문제 해결이 일어나는 만들기의 생산적인 마찰을 제거하며 몇 초 만에 초안 태스크 플로우를 생성할 수 있습니다. Klein은 AI를 산출물 생성 속도를 높이는 데 활용하되 결과물을 엄격하게 평가하고 검토해야 한다고 권장합니다. Disposable은 사고를 이끌어야 하며, 그것을 대체해서는 안 됩니다.
Descript의 디자인 책임자 John은 9명 규모의 팀이 FigJam과 Notion에서 사용하는 디자인 의식과 운영 시스템을 소개합니다. 핵심은 디자인 크릿을 위한 '2문장 입장료' 규칙입니다. 누군가 피드백을 주기 전에 그룹 전체가 먼저 두 가지 명확화 질문을 해야 하며, 이를 통해 실행 방식을 비평하기 전에 참가자들이 프로젝트 컨텍스트를 이해했는지 확인합니다. 디자이너 전용 크래프트 크릿, 크로스 기능 작업 진행 리뷰, go/no-go 디자인 리뷰의 세 가지 범위가 구분된 리뷰 유형은 전략적 대화와 품질 대화가 서로 섞이지 않게 합니다. Descript의 Crit Hub는 분위기, 책임, 진행자 규칙을 Notion에 문서화합니다. 보완 의식으로는 디자이너가 제한 시간 내에 제품을 직접 사용하여 실제 불편 사항을 발굴하는 creator challenge, 매주 FigJam 활기 체크인, 그리고 디자인 시스템 컬러 팔레트 업데이트와 같은 팀 레벨 결정을 위한 Catalyst 비동기 제안 프레임워크가 있습니다.
Storybook 10.4는 AI 기반 자동 설정 기능을 도입하여 목(mock) 구성, 스토리 작성, 최대 10개 컴포넌트에 대한 인터랙션 테스트를 수동 작업 없이 완료할 수 있습니다. 새로운 사이드바 변경 감지 필터는 코드 diff와 관련된 스토리를 new, modified, related로 분류하여 에이전트 작업 결과물 리뷰를 보다 체계적으로 지원합니다. Quick Sharing 기능은 PR이나 CI 없이 로컬 Storybook을 Chromatic에 버튼 클릭 한 번으로 공유할 수 있게 해줍니다. @storybook/tanstack-react를 통해 TanStack React의 타입 안전 라우팅 및 서버 함수가 제로 설정으로 지원됩니다. 실험적인 react-component-meta 분석기는 Volar와 TypeScript 언어 서버를 기반으로 react-docgen 및 react-docgen-typescript를 대체하며 더 빠른 업데이트와 높은 컴포넌트 감지율을 제공합니다.
Descript의 디자인 책임자 John은 9명 규모의 팀이 FigJam과 Notion에서 사용하는 디자인 의식과 운영 시스템을 소개합니다. 핵심은 디자인 크릿을 위한 '2문장 입장료' 규칙입니다. 누군가 피드백을 주기 전에 그룹 전체가 먼저 두 가지 명확화 질문을 해야 하며, 이를 통해 실행 방식을 비평하기 전에 참가자들이 프로젝트 컨텍스트를 이해했는지 확인합니다. 디자이너 전용 크래프트 크릿, 크로스 기능 작업 진행 리뷰, go/no-go 디자인 리뷰의 세 가지 범위가 구분된 리뷰 유형은 전략적 대화와 품질 대화가 서로 섞이지 않게 합니다. Descript의 Crit Hub는 분위기, 책임, 진행자 규칙을 Notion에 문서화합니다. 보완 의식으로는 디자이너가 제한 시간 내에 제품을 직접 사용하여 실제 불편 사항을 발굴하는 creator challenge, 매주 FigJam 활기 체크인, 그리고 디자인 시스템 컬러 팔레트 업데이트와 같은 팀 레벨 결정을 위한 Catalyst 비동기 제안 프레임워크가 있습니다.
React Server Components를 위한 Component Architecture
Aurora Scharff는 useEffect 로컬 페칭부터 React Query, 라우트 레벨 로더를 거쳐 React Server Components(RSC)까지의 진화를 추적하며, RSC가 두 가지 장점을 모두 달성한다고 주장합니다. 컴포넌트를 로더의 데이터 형태에 종속시키지 않고 서버 사이드 데이터 페칭이 가능하다는 것입니다. 각 비동기 서버 컴포넌트는 최소한의 식별자를 통해 필요한 데이터만 가져오므로, prop drilling이나 중복된 로더 로직 없이 페이지 간 컴포넌트를 재사용할 수 있습니다. React의 cache()는 컴포넌트 트리 전반에서 동일한 요청당 페칭을 중복 제거합니다. 페이지는 로딩 시퀀스를 설계하기 위해 의도적인 Suspense 경계를 배치하는 동기적 컴포지터가 됩니다. 단순성을 위한 단일 경계, 독립적 스트리밍을 위한 세분화된 경계를 선택하며, 레이아웃 이동 방지를 위해 컴포넌트와 스켈레톤을 같은 파일에서 함께 내보냅니다. 이 글은 클라이언트 사이드 Server Function 변경을 위한 useOptimistic, 기능별 폴더 구조, 그리고 동일한 아키텍처가 cacheComponents를 사용하는 Next.js 16 Partial Prerendering에 어떻게 매핑되는지도 다룹니다.
ARIA 명세의 'Name prohibited' 섹션은 div와 span의 기본 역할인 generic 역할을 이름을 부여할 수 없는 요소로 명시적으로 열거합니다. Manuel Matuzovic은 8가지 스크린 리더 및 브라우저 조합에서 aria-label을 div, span, 커스텀 요소에 적용하여 테스트한 결과 일관되지 않은 동작을 확인했습니다. macOS의 VoiceOver는 레이블과 함께 'group'을 읽는 반면, Chrome의 JAWS와 NVDA는 레이블을 완전히 무시하고 텍스트 내용만 읽습니다. 두 가지 예외가 있는데, section 요소는 레이블을 부여하면 region 랜드마크 역할을 갖게 되어 레이블 적용이 적절하며, popover 속성을 가진 div는 group 역할을 취해 기술적으로 레이블이 유효합니다. 실무적으로 디자인 시스템 마크업 가이드라인에서 generic 요소에 aria-label을 사용하면 예측할 수 없는 AT 발표를 초래하므로 피해야 합니다.
효과적인 대체 텍스트는 컨텍스트에 크게 의존합니다. 동일한 그림 이미지도 에세이에서는 풍부한 설명이 필요하지만, 내비게이션 링크 안에 있을 때는 기능적인 대상 레이블만 있으면 됩니다. 이 글은 WCAG 2.2의 POUR 원칙을 이미지 카테고리별로 구체적으로 매핑합니다. 필수 콘텐츠 이미지, 링크나 버튼 안의 이미지, 빈 alt 속성이 필요한 장식용 이미지, 텍스트 이미지, 긴 alt 문자열보다 보조 목록이나 설명이 적절한 차트 같은 복잡한 시각적 요소가 그 대상입니다. HTML alt 속성은 이미지 로딩 실패 시 대체 텍스트 역할을 하지 않는 aria-label이나 aria-labelledby보다 표준 방식으로 권장됩니다. CKEditor의 AI Quick Actions 기능은 이미지 내용을 바탕으로 대체 텍스트를 자동 생성할 수 있지만, 출판 전에 정확성과 맥락 적합성에 대한 인간의 검토가 필요하다고 강조합니다.
제15회 세계 접근성 인식의 날(GAAD)을 맞이하여 Deque는 APAC, 유럽, 북미에 걸쳐 세 가지 무료 디지털 접근성 기초 세션을 개최했으며, 30개국 이상, 30개 이상의 직군에서 수천 명의 참가자가 등록했습니다. 핵심 실용 지침으로는 Patrick Sturdivant의 alt 텍스트가 없는 것보다 어떤 alt 텍스트든 더 낫다는 조언과 Michael Harshbarger의 접근성을 보안이나 성능과 동등한 지속적인 운영 규율로 바라보는 관점이 있었습니다. AI 측면도 직접 다루어졌는데, 개발자는 AI가 생성한 코드가 접근성 기준을 충족하는지 여전히 책임져야 한다고 강조했습니다. APAC 세션에서는 해당 지역에 6억 9천만 명의 장애인이 거주한다는 사실을 강조하며 문제의 규모를 부각했습니다. Deque의 목표는 GAAD 인식을 개발 및 디자인 팀 전반에 걸친 지속적인 행동으로 전환하는 것입니다.
Laura Klein은 디자인 산출물을 두 가지로 구분합니다. 이해관계자를 위한 deliverable과 디자이너 스스로 생각을 정리하기 위해 만드는 '디자인 disposable', 즉 러프 스케치, 초안 태스크 플로우, 빠른 프로토타입, 초기 리서치 플랜입니다. 핵심 논지는 모든 산출물을 검토 가능한 deliverable로 취급하면 매몰 비용의 오류를 유발해 탐색이 비싸게 느껴지고 반복 작업이 억제된다는 것입니다. Disposable은 의도적으로 불완전하고 폐기 가능하며, 그 가치는 모호한 생각을 외부화하는 데 있습니다. AI 도구는 이 역학을 복잡하게 만드는데, 실제 문제 해결이 일어나는 만들기의 생산적인 마찰을 제거하며 몇 초 만에 초안 태스크 플로우를 생성할 수 있습니다. Klein은 AI를 산출물 생성 속도를 높이는 데 활용하되 결과물을 엄격하게 평가하고 검토해야 한다고 권장합니다. Disposable은 사고를 이끌어야 하며, 그것을 대체해서는 안 됩니다.
이번 주 디자인 시스템 툴링은 여러 방면에서 발전하였습니다. Storybook 10.4는 한 번에 최대 10개 컴포넌트의 mock 구성, 스토리 작성, 인터랙션 테스트를 자동화하는 AI 기반 설정 기능을 출시하였으며, 코드 diff에 대해 new, modified, related 스토리를 표시하는 사이드바 변경 감지 필터도 추가되었습니다. Quick Sharing은 PR이나 CI 없이 Chromatic에 원클릭 배포를 가능하게 하고, @storybook/tanstack-react를 통해 TanStack React가 최초로 공식 지원됩니다. Volar 기반의 실험적 react-component-meta 분석기는 react-docgen과 react-docgen-typescript를 대체합니다.
디자인 시스템의 접근성도 큰 주목을 받았습니다. 8가지 스크린 리더·브라우저 조합에 걸친 Manuel Matuzovic의 연구는 div, span 같은 일반 요소에 aria-label을 사용하면 AT 동작이 일관되지 않음을 확인하였습니다. VoiceOver는 레이블과 "group"을 함께 읽지만 Chrome의 JAWS와 NVDA는 완전히 무시합니다. 마크업 가이드라인에서 금지되어야 합니다. CKEditor는 WCAG 2.2의 POUR 원칙에 따른 alt text 모범 사례를 정리하며 콘텐츠 이미지, 링크 이미지, 장식 이미지, 복잡한 시각 요소의 컨텍스트별 요구사항을 구분하였습니다. 제15회 세계 접근성 인식의 날(GAAD)은 AI 생성 코드라도 개발자의 접근성 책임은 면제되지 않는다는 점을 재확인하였습니다.
디자인 프로세스 사고도 주목받았습니다. Laura Klein은 실제 문제 해결이 일어나는 만들기의 생산적인 마찰을 AI가 제거할 수 있다고 경고하며 모호한 생각을 외부화하는 러프 스케치와 빠른 프로토타입 등 '디자인 disposable'을 보호할 것을 주장하였습니다. Aurora Scharff는 요청별 중복 제거를 위한 React의 cache(), 컴포넌트와 함께 배치된 Suspense 경계와 스켈레톤, Server Function 변경을 위한 useOptimistic을 활용하는 React Server Components 아키텍처를 상세히 설명하고, Next.js 16 Partial Prerendering과의 매핑도 다루었습니다.
핵심 요점
Storybook 10.4의 AI 기반 설정은 최대 10개 컴포넌트의 mock 구성, 스토리 작성, 인터랙션 테스트를 한 번에 자동화합니다. 에이전틱 코드 리뷰 병목을 직접 겨냥합니다.
div와 span에 aria-label을 사용하는 것은 ARIA 명세상 명시적으로 금지되어 있으며, JAWS, NVDA, VoiceOver 전반에서 예측할 수 없는 스크린 리더 출력을 유발합니다. 디자인 시스템 마크업 가이드라인에서 제거하십시오.
React의 cache()를 이용한 요청별 중복 제거와 컴포넌트와 함께 배치된 Suspense 경계를 갖춘 React Server Components가 이제 Next.js 16 Partial Prerendering 프로젝트의 데이터 페칭 권장 아키텍처입니다.
