Async React의 Action Props로 디자인 컴포넌트 구축 | Aurora… — 2026년 9주 디자인 시스템
UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 9-2026
article
Async React의 Action Props로 디자인 컴포넌트 구축 | Aurora Scharff
TAG: 컴포넌트
Aurora Scharff가 Async React에서 도입된 "action prop" 패턴을 활용해 재사용 가능한 디자인 컴포넌트 두 가지—TabList와 인라인 EditableText 필드—를 처음부터 구현하는 과정을 상세히 다룹니다. 각 컴포넌트는 useTransition과 useOptimistic을 통해 비동기 처리를 내부적으로 캡슐화하여, 사용하는 쪽에서는 값과 action 콜백만 전달하면 됩니다. TabList는 클릭 즉시 낙관적으로 탭을 전환하고 로컬 스피너를 표시하며 실패 시 자동으로 롤백합니다. EditableText는 낙관적 상태값을 인수로 받는 displayValue 포매터 함수를 지원하여, 통화 형식 등의 출력이 커밋 즉시 업데이트됩니다. 추가로 hideSpinner 이스케이프 해치와 Tailwind의 group-has-data-pending: 변형자를 조합해 주변 DOM에 커스텀 로딩 처리를 적용하는 방법도 소개합니다.
aria-haspopup는 생각대로 작동하지 않을 수 있다 - Manuel Matuzovic
TAG: 접근성
Manuel Matuzović는 내비게이션 버튼에서 aria-haspopup이 광범위하게 오용되고 있음을 지적합니다. ARIA 명세는 팝업 컨테이너에 menu, listbox, tree, grid, 또는 dialog 역할을 명시적으로 지정하도록 요구하지만, 대부분의 서브메뉴는 일반 list 요소를 사용합니다. navigation(링크 모음)과 menu(액션 항목)는 의미론적으로 명확히 구분됩니다. 이 불일치로 인해 JAWS는 "Space를 눌러 메뉴를 열고 화살표 키로 이동하세요"라고 안내하지만 list가 실제 menu 위젯이 아니어서 화살표 키가 동작하지 않습니다. VoiceOver, NVDA, Narrator, TalkBack은 각기 다른 방식으로 이 문제를 처리해 사용자에게 일관성 없는 접근 경험을 제공합니다. 올바른 해결책은 aria-haspopup을 제거하고 버튼에 aria-expanded를 토글하는 것입니다.
role=presentation은 aria-hidden=true의 대안이 아니다 - Manuel Matuzovic
TAG: 접근성
Manuel Matuzović의 #WebAccessibilityFails 시리즈에서 자주 혼동되는 두 속성의 차이를 명확히 설명합니다. aria-hidden="true"는 요소와 그 전체 서브트리를 접근성 트리에서 완전히 제거하지만, role="presentation"은 요소의 기본 role만 제거하며 자식 요소와 텍스트 콘텐츠는 여전히 노출됩니다. 접근 가능한 이름이 없는 SVG에 role="presentation"을 적용하면 VoiceOver, TalkBack, JAWS, NVDA가 무시하지만, aria-label을 추가하면 대부분의 스크린 리더가 이를 그대로 읽어버립니다. SVG 텍스트 노드도 예외 없이 읽힙니다. img 요소의 경우 빈 alt 속성이 유일하게 안정적인 방법이며, 그 외의 경우에는 aria-hidden="true"를 사용해야 합니다.
Martin Underhill은 alt 텍스트와 figcaption의 역할을 명확히 구분합니다. alt 텍스트는 이미지를 볼 수 없는 사용자를 위해 이미지의 의미를 대체하는 반면, figcaption은 이미지가 주변 콘텐츠에서 어떤 역할을 하는지 설명합니다. 단독 프로필 페이지에서는 alt만으로 충분하지만, 여러 인물이 등장하는 긴 글에서는 "Martin Underhill of tempertemper" 같은 figcaption이 인접 텍스트의 부담을 덜어줍니다. 여러 이미지를 하나의 캡션으로 묶는 방법, 여러 이슈에 걸쳐 번호로 참조하는 figure 활용, 그리고 title 요소로 설명 텍스트를 제공하는 인라인 SVG 활용법도 다룹니다. 핵심 규칙: alt와 caption은 절대 동일해서는 안 되며, 하나는 이미지를 대체하고 다른 하나는 이미지에 문맥을 부여합니다.
WCAG 규칙 몇 가지를 깨보자 - Elise Kristiansen - NDC London 2026
프론트엔드 개발자 Elise Kristiansen은 NDC London 강연을 의도적인 규칙 위반 시연으로 구성합니다. alt 텍스트 누락, 헤딩 계층 구조 부재, 색상만으로 전달되는 대비 오류, flex-direction:row-reverse로 인한 키보드 탭 순서 파괴, 키보드 트랩, 시간 제한, 자동 재생 애니메이션 등 WCAG A 및 AA 기준을 카테고리별로 위반한 뒤 실시간으로 수정하고 영향을 설명합니다. 주요 통계: 94.8%의 웹사이트가 AA 위반 사항을 하나 이상 가지고 있으며, 79.8%는 색상 대비가 부족합니다. 실용적인 도구로는 커맨드라인 감사를 위한 Pa11y와 파이프라인 통합을 위한 Pa11y CI를 권장합니다. 강연은 Mats Steen(Ibelin)의 이야기로 접근성 결여의 인간적 비용을 조명하며 시작하고, div에 onclick을 추가하는 패턴 대신 올바른 시맨틱 HTML 태그를 사용해야 한다고 강조하며 마무리합니다.
Intercom의 스태프 프로덕트 디자이너 Domingo는 Figma Code Connect를 통해 모든 Figma 컴포넌트를 코드베이스에 연결한 뒤, 디자이너가 단일 스크립트로 실제 프로덕션 디자인 시스템 컴포넌트를 활용해 바로 프로토타이핑할 수 있는 "design playground"를 구축한 과정을 소개합니다. Claude Code는 Intercom 전사 의무 AI 코딩 도구로, 커스텀 Claude Skills가 Figma MCP 위에 품질 검사, 컴포넌트 임포트 규칙, 빌드 배포 자동화를 추가해 Claude가 버튼과 다이얼로그를 새로 생성하는 대신 기존 컴포넌트를 임포트하도록 보장합니다. 배포 스킬은 단 하나의 명령으로 GitHub 드래프트 PR과 공유 가능한 experimental 빌드 URL을 생성합니다. 또한 Git 기초, 환경 설정, 각 워크플로우의 비디오 튜토리얼을 포함한 팀 내 가이드인 Prototyping Hub도 소개합니다.
Async React의 Action Props로 디자인 컴포넌트 구축 | Aurora Scharff
Aurora Scharff가 Async React에서 도입된 "action prop" 패턴을 활용해 재사용 가능한 디자인 컴포넌트 두 가지—TabList와 인라인 EditableText 필드—를 처음부터 구현하는 과정을 상세히 다룹니다. 각 컴포넌트는 useTransition과 useOptimistic을 통해 비동기 처리를 내부적으로 캡슐화하여, 사용하는 쪽에서는 값과 action 콜백만 전달하면 됩니다. TabList는 클릭 즉시 낙관적으로 탭을 전환하고 로컬 스피너를 표시하며 실패 시 자동으로 롤백합니다. EditableText는 낙관적 상태값을 인수로 받는 displayValue 포매터 함수를 지원하여, 통화 형식 등의 출력이 커밋 즉시 업데이트됩니다. 추가로 hideSpinner 이스케이프 해치와 Tailwind의 group-has-data-pending: 변형자를 조합해 주변 DOM에 커스텀 로딩 처리를 적용하는 방법도 소개합니다.
WCAG 규칙 몇 가지를 깨보자 - Elise Kristiansen - NDC London 2026
프론트엔드 개발자 Elise Kristiansen은 NDC London 강연을 의도적인 규칙 위반 시연으로 구성합니다. alt 텍스트 누락, 헤딩 계층 구조 부재, 색상만으로 전달되는 대비 오류, flex-direction:row-reverse로 인한 키보드 탭 순서 파괴, 키보드 트랩, 시간 제한, 자동 재생 애니메이션 등 WCAG A 및 AA 기준을 카테고리별로 위반한 뒤 실시간으로 수정하고 영향을 설명합니다. 주요 통계: 94.8%의 웹사이트가 AA 위반 사항을 하나 이상 가지고 있으며, 79.8%는 색상 대비가 부족합니다. 실용적인 도구로는 커맨드라인 감사를 위한 Pa11y와 파이프라인 통합을 위한 Pa11y CI를 권장합니다. 강연은 Mats Steen(Ibelin)의 이야기로 접근성 결여의 인간적 비용을 조명하며 시작하고, div에 onclick을 추가하는 패턴 대신 올바른 시맨틱 HTML 태그를 사용해야 한다고 강조하며 마무리합니다.
Intercom의 스태프 프로덕트 디자이너 Domingo는 Figma Code Connect를 통해 모든 Figma 컴포넌트를 코드베이스에 연결한 뒤, 디자이너가 단일 스크립트로 실제 프로덕션 디자인 시스템 컴포넌트를 활용해 바로 프로토타이핑할 수 있는 "design playground"를 구축한 과정을 소개합니다. Claude Code는 Intercom 전사 의무 AI 코딩 도구로, 커스텀 Claude Skills가 Figma MCP 위에 품질 검사, 컴포넌트 임포트 규칙, 빌드 배포 자동화를 추가해 Claude가 버튼과 다이얼로그를 새로 생성하는 대신 기존 컴포넌트를 임포트하도록 보장합니다. 배포 스킬은 단 하나의 명령으로 GitHub 드래프트 PR과 공유 가능한 experimental 빌드 URL을 생성합니다. 또한 Git 기초, 환경 설정, 각 워크플로우의 비디오 튜토리얼을 포함한 팀 내 가이드인 Prototyping Hub도 소개합니다.
aria-haspopup는 생각대로 작동하지 않을 수 있다 - Manuel Matuzovic
Manuel Matuzović는 내비게이션 버튼에서 aria-haspopup이 광범위하게 오용되고 있음을 지적합니다. ARIA 명세는 팝업 컨테이너에 menu, listbox, tree, grid, 또는 dialog 역할을 명시적으로 지정하도록 요구하지만, 대부분의 서브메뉴는 일반 list 요소를 사용합니다. navigation(링크 모음)과 menu(액션 항목)는 의미론적으로 명확히 구분됩니다. 이 불일치로 인해 JAWS는 "Space를 눌러 메뉴를 열고 화살표 키로 이동하세요"라고 안내하지만 list가 실제 menu 위젯이 아니어서 화살표 키가 동작하지 않습니다. VoiceOver, NVDA, Narrator, TalkBack은 각기 다른 방식으로 이 문제를 처리해 사용자에게 일관성 없는 접근 경험을 제공합니다. 올바른 해결책은 aria-haspopup을 제거하고 버튼에 aria-expanded를 토글하는 것입니다.
role=presentation은 aria-hidden=true의 대안이 아니다 - Manuel Matuzovic
Manuel Matuzović의 #WebAccessibilityFails 시리즈에서 자주 혼동되는 두 속성의 차이를 명확히 설명합니다. aria-hidden="true"는 요소와 그 전체 서브트리를 접근성 트리에서 완전히 제거하지만, role="presentation"은 요소의 기본 role만 제거하며 자식 요소와 텍스트 콘텐츠는 여전히 노출됩니다. 접근 가능한 이름이 없는 SVG에 role="presentation"을 적용하면 VoiceOver, TalkBack, JAWS, NVDA가 무시하지만, aria-label을 추가하면 대부분의 스크린 리더가 이를 그대로 읽어버립니다. SVG 텍스트 노드도 예외 없이 읽힙니다. img 요소의 경우 빈 alt 속성이 유일하게 안정적인 방법이며, 그 외의 경우에는 aria-hidden="true"를 사용해야 합니다.
Martin Underhill은 alt 텍스트와 figcaption의 역할을 명확히 구분합니다. alt 텍스트는 이미지를 볼 수 없는 사용자를 위해 이미지의 의미를 대체하는 반면, figcaption은 이미지가 주변 콘텐츠에서 어떤 역할을 하는지 설명합니다. 단독 프로필 페이지에서는 alt만으로 충분하지만, 여러 인물이 등장하는 긴 글에서는 "Martin Underhill of tempertemper" 같은 figcaption이 인접 텍스트의 부담을 덜어줍니다. 여러 이미지를 하나의 캡션으로 묶는 방법, 여러 이슈에 걸쳐 번호로 참조하는 figure 활용, 그리고 title 요소로 설명 텍스트를 제공하는 인라인 SVG 활용법도 다룹니다. 핵심 규칙: alt와 caption은 절대 동일해서는 안 되며, 하나는 이미지를 대체하고 다른 하나는 이미지에 문맥을 부여합니다.
이번 주 추천 아티클인 Aurora Scharff의 action prop 심층 분석은 Async React에서 성숙해가는 패턴을 보여줍니다. useTransition과 useOptimistic을 완전히 캡슐화한 재사용 가능한 TabList와 EditableText 컴포넌트로, 사용하는 측에서는 값과 콜백만 전달하면 됩니다. 이 패턴은 낙관적 업데이트와 롤백 로직을 컴포넌트 경계 안에 유지하여, 단순한 스타일 프리미티브를 넘어 진정으로 프레임워크를 인식하는 디자인 시스템에 한 발 더 가까워진 의미 있는 진전입니다.
접근성 이슈가 이번 주 나머지 의제를 채웠습니다. Manuel Matuzovic이 #WebAccessibilityFails 시리즈에 두 편의 정확한 분석을 기고했습니다. 첫 번째는 내비게이션 서브메뉴에서 aria-haspopup을 광범위하게 오용하는 문제를 다루며, 해결책은 aria-haspopup을 완전히 제거하고 대신 aria-expanded를 사용하는 것입니다. 두 번째는 role="presentation"이 요소 자신의 role만 제거하고 자식 요소는 유지하는 반면, aria-hidden="true"는 전체 서브트리를 제거한다는 점을 명확히 합니다. Martin Underhill은 alt 텍스트(이미지 대체)와 figcaption(이미지 맥락화)의 명확한 경계를 설명하는 세 번째 접근성 아티클을 추가했습니다.
마지막으로 Elise Kristiansen의 NDC London 강연은 모든 주요 WCAG AA 실패 유형을 실시간으로 시연했으며, 94.8%의 웹사이트가 하나 이상의 위반 사항을 가지고 있고 AI 코드 생성기가 올바른 시맨틱 HTML 대신 div-with-onclick을 선호해 격차를 악화시키고 있다고 지적했습니다. Intercom의 Domingo는 Figma Code Connect와 커스텀 Claude Skills가 전체 디자인 팀의 디자인-코드 루프를 어떻게 닫아주는지 상세히 설명했습니다.
Key Takeaways
Async React의 action prop 패턴은 디자인 시스템 컴포넌트가 모든 transition과 optimistic UI 로직을 소유하고, 사용하는 측에는 값과 콜백만 노출합니다.
