UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 3-2026
article
Web Almanac 2025: 접근성
TAG: 접근성
HTTP Archive의 1,700만 개 사이트 데이터를 기반으로 한 2025 Web Almanac 접근성 챕터에 따르면, 중앙값 Lighthouse 접근성 점수는 2024년 대비 1% 상승한 85%를 기록했습니다. 색상 대비는 여전히 가장 큰 문제로, 모바일 사이트 중 WCAG 최소 요건을 충족하는 곳은 31%에 불과합니다. 2025년에는 사이트의 67%가 기본 포커스 아웃라인을 명시적으로 제거했으며(2024년 대비 14% 증가), :focus-visible 적용이 대안으로 늘고 있습니다. 유럽 접근성 법(EAA)이 2025년 6월 28일 발효됐음에도 유럽 사이트 데이터에서 눈에 띄는 컴플라이언스 급증은 나타나지 않아 이행 지연이 확인됩니다. 주목할 만한 발견으로, .ai 도메인이 .gov, .edu를 제외한 모든 도메인 유형을 접근성 점수에서 앞지른 것으로 나타났습니다. 챕터에는 LLM이 alt 텍스트 생성과 코드 스캐너 측면에서 접근성에 미치는 영향을 다루는 새로운 AI 섹션도 포함됩니다.
Interfere의 design engineer가 AI 툴링에 대한 워크플로우 중심의 관점을 공유합니다. 핵심은 시행착오를 가속화하는 것이지, 창의적 판단을 대체하는 것이 아닙니다. 그의 일상적인 스택은 Claude Opus 4.5를 탑재한 Cursor, UI 스캐폴딩을 위한 Figma MCP, 그리고 LLM의 학습 데이터에서 종종 오래된 정보를 제공하는 라이브러리 문서를 최신 상태로 가져오는 context7로 구성됩니다. 프로젝트 시작 전 animation 성능, template literal 대신 cn 유틸리티 사용, design system 컨벤션 등을 다루는 코드베이스 rules를 설정해 에이전트가 반복적인 프롬프팅 없이 일관된 컨텍스트를 갖추도록 합니다. 특히 Figma MCP는 복잡한 멀티 컴포넌트 화면 스캐폴딩을 충분히 빠르게 생성해 수동 폴리싱과 애니메이션이 인간의 의미 있는 기여로 남는 전환점을 만들었습니다. 기사는 에이전트에게 사고를 아웃소싱하면 보이지 않는 부채가 쌓이며, 진입 장벽이 낮아진 시대에 장인 정신과 UX 품질이 진정한 차별화 요소가 된다는 경고로 마무리됩니다.
Vitaly Friedman은 UX 및 프로덕트 디자이너가 2026년에 프로젝트 사이를 수동적으로 떠다니는 대신 커리어를 주도적으로 설계하기 위한 실용적인 프레임워크를 소개합니다. 그는 성공, 두려움, 위임 가능한 업무, 3가지 성장 우선순위를 점검하는 연간 회고를 방향 설정의 기반으로 권장합니다. 두 가지 구체적인 도구도 소개됩니다: 즐거움 대 자신감을 매핑하는 20~30분짜리 Figma 템플릿인 Maigen Thomas의 UX Skills Self-Assessment Matrix와, Junior부터 Staff까지 전략·거버넌스·체계적 사고 역량을 제시하는 Javier Cuello의 Design System Teams 커리어 레벨 프레임워크입니다. Friedman은 시니어리티를 곧 관리직으로 등치하는 잘못된 통념을 경계하며, Jason Mesut의 수평 이동 모델을 대안으로 제시합니다. 2026년 가장 주목받는 스킬은 AI 경험 설계이지만, 핵심은 AI 자동화가 아니라 사람이 이해하고 신뢰할 수 있는 인터페이스를 만드는 역량임을 강조합니다.
TetraLogical이 자사의 "일반적인 접근성 오해" 시리즈 전체를 한곳에 정리한 인덱스 페이지를 공개했습니다. 장애, 스크린 리더, WCAG, 접근성 구현, 테스트 등 다섯 가지 주제 영역을 다룹니다. 이 시리즈는 WCAG가 실제로 적용되는 대상과 준수해야 할 적합성 수준, 스크린 리더의 동작 원리와 개발자 지원 방법, AI 도구와 overlay가 왜 적절한 design system 수준의 접근성 작업을 대체할 수 없는지 등의 오해를 바로잡습니다. 테스트 섹션에서는 접근성 테스트의 책임 소재와 가장 효과적인 방법론을 설명합니다. 전 세계 약 13억 명이 장애를 가진 것으로 공식 집계되고 있으며, 일시적·상황적 제한까지 포함하면 그 수는 더 많습니다. 각 주제는 심화 학습을 위한 개별 포스트로 연결됩니다.
MDS는 Anthropic의 Claude 인터페이스 아이콘의 정교한 hover 애니메이션을 Figma의 Smart Animate로 재현하는 방법을 단계별로 설명합니다. 브라우저 인스펙터에서 SVG 코드를 직접 추출해 Figma에 붙여넣은 뒤, 각 아이콘(new chat, chats, projects, artifacts, code)을 default와 hovered 두 가지 variant를 가진 컴포넌트로 구성합니다. hover 애니메이션은 의도적으로 극소 수준으로 설계됩니다—채팅 버블은 1px씩 벌어지고, 폴더는 0.5px 축소되며 종이는 5° 회전하고, 코드 브라켓은 1px씩 바깥으로 이동합니다. 핵심 구조적 인사이트는 5개 아이콘을 하나의 컴포넌트에 variant 매트릭스(총 10개: 5 아이콘 × 2 상태)로 통합함으로써 Smart Animate가 인스턴스 스왑이 아닌 단일 컴포넌트 내 상태 변화를 감지할 수 있도록 하는 것입니다. 프로토타입 연결에는 "While Hovering" 트리거, Smart Animate, 150ms, ease-out을 사용합니다.
쇼핑 데드: 실시간 동적 웹 콘텐츠를 접근 가능하게 만들기 — NDC Copenhagen 2025
핀란드 국가 우편 서비스 Posti의 lead design systems developer인 Daniel Yuschick은 좀비 테마의 e-commerce 데모를 통해 ARIA live region이 동적이고 새로 고침 없는 웹 페이지의 핵심 스크린 리더 문제를 어떻게 해결하는지 시연합니다. 핵심 인사이트는 페이지 어디든 포커스를 이동할 수 있는 시각적 "자유 탐색"과, 7~10초 만에 사라지는 toast 메시지에 제때 도달하지 못할 수 있는 스크린 리더의 "카세트 테이프" 방식 선형 탐색의 대비입니다. live region을 생성하는 세 가지 메커니즘을 다룹니다: aria-live(원시 속성, 값: off/polite/assertive), HTML role(role="alert"→assertive, role="status"→polite), 그리고 장바구니 합계 등 숫자 업데이트에 활용 가능한 <output> 요소입니다. 검색 결과 case study에서는 live region이 모든 결과를 한 번에 쏟아낼 수 있어 역효과를 낳을 수 있으며, "검색 결과: 7개" 헤딩으로 프로그래밍 방식으로 포커스를 이동하는 것이 더 우수한 경험을 제공한다는 점도 설명합니다.
HTTP Archive의 1,700만 개 사이트 데이터를 기반으로 한 2025 Web Almanac 접근성 챕터에 따르면, 중앙값 Lighthouse 접근성 점수는 2024년 대비 1% 상승한 85%를 기록했습니다. 색상 대비는 여전히 가장 큰 문제로, 모바일 사이트 중 WCAG 최소 요건을 충족하는 곳은 31%에 불과합니다. 2025년에는 사이트의 67%가 기본 포커스 아웃라인을 명시적으로 제거했으며(2024년 대비 14% 증가), :focus-visible 적용이 대안으로 늘고 있습니다. 유럽 접근성 법(EAA)이 2025년 6월 28일 발효됐음에도 유럽 사이트 데이터에서 눈에 띄는 컴플라이언스 급증은 나타나지 않아 이행 지연이 확인됩니다. 주목할 만한 발견으로, .ai 도메인이 .gov, .edu를 제외한 모든 도메인 유형을 접근성 점수에서 앞지른 것으로 나타났습니다. 챕터에는 LLM이 alt 텍스트 생성과 코드 스캐너 측면에서 접근성에 미치는 영향을 다루는 새로운 AI 섹션도 포함됩니다.
MDS는 Anthropic의 Claude 인터페이스 아이콘의 정교한 hover 애니메이션을 Figma의 Smart Animate로 재현하는 방법을 단계별로 설명합니다. 브라우저 인스펙터에서 SVG 코드를 직접 추출해 Figma에 붙여넣은 뒤, 각 아이콘(new chat, chats, projects, artifacts, code)을 default와 hovered 두 가지 variant를 가진 컴포넌트로 구성합니다. hover 애니메이션은 의도적으로 극소 수준으로 설계됩니다—채팅 버블은 1px씩 벌어지고, 폴더는 0.5px 축소되며 종이는 5° 회전하고, 코드 브라켓은 1px씩 바깥으로 이동합니다. 핵심 구조적 인사이트는 5개 아이콘을 하나의 컴포넌트에 variant 매트릭스(총 10개: 5 아이콘 × 2 상태)로 통합함으로써 Smart Animate가 인스턴스 스왑이 아닌 단일 컴포넌트 내 상태 변화를 감지할 수 있도록 하는 것입니다. 프로토타입 연결에는 "While Hovering" 트리거, Smart Animate, 150ms, ease-out을 사용합니다.
쇼핑 데드: 실시간 동적 웹 콘텐츠를 접근 가능하게 만들기 — NDC Copenhagen 2025
핀란드 국가 우편 서비스 Posti의 lead design systems developer인 Daniel Yuschick은 좀비 테마의 e-commerce 데모를 통해 ARIA live region이 동적이고 새로 고침 없는 웹 페이지의 핵심 스크린 리더 문제를 어떻게 해결하는지 시연합니다. 핵심 인사이트는 페이지 어디든 포커스를 이동할 수 있는 시각적 "자유 탐색"과, 7~10초 만에 사라지는 toast 메시지에 제때 도달하지 못할 수 있는 스크린 리더의 "카세트 테이프" 방식 선형 탐색의 대비입니다. live region을 생성하는 세 가지 메커니즘을 다룹니다: aria-live(원시 속성, 값: off/polite/assertive), HTML role(role="alert"→assertive, role="status"→polite), 그리고 장바구니 합계 등 숫자 업데이트에 활용 가능한 <output> 요소입니다. 검색 결과 case study에서는 live region이 모든 결과를 한 번에 쏟아낼 수 있어 역효과를 낳을 수 있으며, "검색 결과: 7개" 헤딩으로 프로그래밍 방식으로 포커스를 이동하는 것이 더 우수한 경험을 제공한다는 점도 설명합니다.
Interfere의 design engineer가 AI 툴링에 대한 워크플로우 중심의 관점을 공유합니다. 핵심은 시행착오를 가속화하는 것이지, 창의적 판단을 대체하는 것이 아닙니다. 그의 일상적인 스택은 Claude Opus 4.5를 탑재한 Cursor, UI 스캐폴딩을 위한 Figma MCP, 그리고 LLM의 학습 데이터에서 종종 오래된 정보를 제공하는 라이브러리 문서를 최신 상태로 가져오는 context7로 구성됩니다. 프로젝트 시작 전 animation 성능, template literal 대신 cn 유틸리티 사용, design system 컨벤션 등을 다루는 코드베이스 rules를 설정해 에이전트가 반복적인 프롬프팅 없이 일관된 컨텍스트를 갖추도록 합니다. 특히 Figma MCP는 복잡한 멀티 컴포넌트 화면 스캐폴딩을 충분히 빠르게 생성해 수동 폴리싱과 애니메이션이 인간의 의미 있는 기여로 남는 전환점을 만들었습니다. 기사는 에이전트에게 사고를 아웃소싱하면 보이지 않는 부채가 쌓이며, 진입 장벽이 낮아진 시대에 장인 정신과 UX 품질이 진정한 차별화 요소가 된다는 경고로 마무리됩니다.
Vitaly Friedman은 UX 및 프로덕트 디자이너가 2026년에 프로젝트 사이를 수동적으로 떠다니는 대신 커리어를 주도적으로 설계하기 위한 실용적인 프레임워크를 소개합니다. 그는 성공, 두려움, 위임 가능한 업무, 3가지 성장 우선순위를 점검하는 연간 회고를 방향 설정의 기반으로 권장합니다. 두 가지 구체적인 도구도 소개됩니다: 즐거움 대 자신감을 매핑하는 20~30분짜리 Figma 템플릿인 Maigen Thomas의 UX Skills Self-Assessment Matrix와, Junior부터 Staff까지 전략·거버넌스·체계적 사고 역량을 제시하는 Javier Cuello의 Design System Teams 커리어 레벨 프레임워크입니다. Friedman은 시니어리티를 곧 관리직으로 등치하는 잘못된 통념을 경계하며, Jason Mesut의 수평 이동 모델을 대안으로 제시합니다. 2026년 가장 주목받는 스킬은 AI 경험 설계이지만, 핵심은 AI 자동화가 아니라 사람이 이해하고 신뢰할 수 있는 인터페이스를 만드는 역량임을 강조합니다.
TetraLogical이 자사의 "일반적인 접근성 오해" 시리즈 전체를 한곳에 정리한 인덱스 페이지를 공개했습니다. 장애, 스크린 리더, WCAG, 접근성 구현, 테스트 등 다섯 가지 주제 영역을 다룹니다. 이 시리즈는 WCAG가 실제로 적용되는 대상과 준수해야 할 적합성 수준, 스크린 리더의 동작 원리와 개발자 지원 방법, AI 도구와 overlay가 왜 적절한 design system 수준의 접근성 작업을 대체할 수 없는지 등의 오해를 바로잡습니다. 테스트 섹션에서는 접근성 테스트의 책임 소재와 가장 효과적인 방법론을 설명합니다. 전 세계 약 13억 명이 장애를 가진 것으로 공식 집계되고 있으며, 일시적·상황적 제한까지 포함하면 그 수는 더 많습니다. 각 주제는 심화 학습을 위한 개별 포스트로 연결됩니다.
이번 주 디자인 시스템 이슈는 두 가지 상호 보완적인 주제를 연결합니다. AI 도구가 건너뛸 수 없는 접근성의 어렵고 비화려한 작업, 그리고 디자인 엔지니어링 워크플로에서 AI 에이전트와 함께 일하는 새로운 규율입니다. 피처드 기사인 2025 Web Almanac 접근성 챕터는 1,700만 개 사이트를 분석합니다. 중앙값 Lighthouse 점수 85%라는 수치는 지속적인 실패를 가립니다. 모바일 사이트의 31%만이 최소 색상 대비를 충족하고, 67%의 사이트가 포커스 아웃라인을 명시적으로 제거했습니다(전년 대비 14% 증가). 유럽 접근성 법 발효에도 준수율 급증은 없었습니다. 주목할 만한 이상치로, .ai 도메인이 접근성 점수에서 거의 모든 도메인 카테고리를 앞지르고 있습니다.
TetraLogical의 오해 시리즈와 Daniel Yuschick의 ARIA live region NDC 발표는 실행 가능한 깊이로 데이터를 보완합니다. aria-live, role="alert", 그리고 잘 사용되지 않는 <output> 요소가 시각적 자유 탐색과 스크린 리더의 선형 탐색 사이의 근본적인 불일치를 해결한다는 Yuschick의 핵심 통찰은, live region보다 "검색 결과: 7개" 헤딩으로의 포커스 이동이 더 나은 경험을 제공하는 시나리오로 구체화됩니다. AI 툴링 측면에서 Interfere의 design engineer는 Claude Opus 4.5를 탑재한 Cursor와 Figma MCP를 활용한 규율 있는 워크플로를 공유합니다.
두 가지 추가 아이템이 AI와 디자인 렌즈를 더욱 선명하게 합니다. Vitaly Friedman은 2026년 가장 주목받는 스킬이 AI 경험 설계라고 주장하며, 자동화가 아닌 사람이 이해하고 신뢰할 수 있는 인터페이스 구축에 초점을 맞춥니다. MDS의 Claude 아이콘 hover 애니메이션 Figma 재현 튜토리얼은 1px 이동, 5° 회전, 150ms ease-out 등 마이크로 스케일 모션과 모든 아이콘 변형을 단일 컴포넌트로 통합하는 구조적 통찰의 정밀한 실용적 시연입니다.
Key Takeaways
2025 Web Almanac에 따르면 접근성 점수 중앙값은 85%에서 정체되어 있으며, 모바일 사이트 69%에서 색상 대비 문제가 지속되고 있습니다. 유럽 접근성 법의 2025년 6월 기한은 측정 가능한 준수율 급증을 이끌어내지 못했습니다.
ARIA live region(aria-live, role="alert", <output>)은 스크린 리더/토스트 메시지 타이밍 문제를 해결하지만, 검색 결과에서는 역효과를 낼 수 있습니다. 결과 헤딩으로 프로그래밍 방식으로 포커스를 이동하는 것이 더 나은 경우가 많습니다.
AI 코딩 워크플로는 첫 번째 프롬프트 전에 코드베이스 규칙을 설정할 때 가장 빠르게 성숙합니다. Cursor + Figma MCP를 사용한 design engineer는 이를 통해 인간의 기여가 스캐폴딩이 아닌 폴리싱과 애니메이션으로 이동함을 발견했습니다.
