이번 주는 디자인 시스템 거버넌스와 접근성이 핵심 주제였습니다. 워크플로우 가이드는 기여 소요 시간, 기여자 수, 팀 만족도(목표: 5점 중 4점 이상), 문서 완성도(80~95%), 의사 결정 속도(초기 피드백 3일 이내, 최종 결정 2주 이내), 채택률이라는 6가지 측정 가능한 건강… 개발자가 바로 활용할 수 있도록 정리했습니다.
aria-expanded 누락, 키보드 처리 부재 등 10가지 접근성 문제가 발견됐습니다. 2026년 WebAIM Million 조사에 따르면 여전히 95.9%의 페이지에 감지 가능한 WCAG 오류가 있으며 페이지당 평균 56.1개에 달합니다. 이 글은 접근성을 주기적인 감사 이벤트가 아니라 보안이나 관찰 가능성처럼 운영 역량으로 다뤄야 한다고 주장합니다. Radix UI·React Aria·Headless UI 같은 접근 가능한 프리미티브 활용, CI/CD에 eslint-plugin-jsx-a11y와 Pa11y 통합, 디자인 핸드오프 단계에서 포커스 순서와 ARIA 레이블 명시, Cursor rules나 Copilot instructions로 시맨틱 HTML을 강제하는 AI 제약이 실용적인 해법으로 제시됩니다.data-theme과 data-mode 두 개의 독립적인 HTML data 속성을 사용하는 것입니다. 각각 별도의 JavaScript 함수로 제어하고, CSS 커스텀 프로퍼티가 두 값을 모두 읽습니다. 이로써 특별한 예외 처리 없이 자동으로 동작하는 조합 행렬(레드 + 다크, 오렌지 + 라이트 등)이 만들어집니다. 디자인 시스템 규모에서 모드 레이어는 공유 추상화 계층이 되어, 유지보수 팀이 라이트/다크/고대비를 한 번 정의하면 모든 제품이 이를 상속합니다.
tr에 role="button"을 추가하면 VoiceOver와 NVDA에서 해당 행이 접근성 트리에서 완전히 사라집니다. tr을 button 요소로 교체하면 브라우저가 이를 테이블 밖으로 내보내 버립니다. tabindex="0"과 JavaScript 키 핸들러를 추가하면 키보드 사용자에게는 동작하지만, aria-label은 테이블 탐색 중이 아닌 Tab 이동 시에만 읽히므로 스크린 리더 사용자에게 상호작용 가능 여부를 전달할 수 없습니다. 올바른 해법은 td 안에 네이티브 button이나 anchor를 중첩하는 것입니다. ARIA role 재정의, tabindex, 추가 JavaScript가 필요 없습니다. 확장/축소 동작에는 첫 번째 셀에 aria-expanded를 가진 button을 배치하는 방식이 권장됩니다.
aria-expanded 누락, 키보드 처리 부재 등 10가지 접근성 문제가 발견됐습니다. 2026년 WebAIM Million 조사에 따르면 여전히 95.9%의 페이지에 감지 가능한 WCAG 오류가 있으며 페이지당 평균 56.1개에 달합니다. 이 글은 접근성을 주기적인 감사 이벤트가 아니라 보안이나 관찰 가능성처럼 운영 역량으로 다뤄야 한다고 주장합니다. Radix UI·React Aria·Headless UI 같은 접근 가능한 프리미티브 활용, CI/CD에 eslint-plugin-jsx-a11y와 Pa11y 통합, 디자인 핸드오프 단계에서 포커스 순서와 ARIA 레이블 명시, Cursor rules나 Copilot instructions로 시맨틱 HTML을 강제하는 AI 제약이 실용적인 해법으로 제시됩니다.data-theme과 data-mode 두 개의 독립적인 HTML data 속성을 사용하는 것입니다. 각각 별도의 JavaScript 함수로 제어하고, CSS 커스텀 프로퍼티가 두 값을 모두 읽습니다. 이로써 특별한 예외 처리 없이 자동으로 동작하는 조합 행렬(레드 + 다크, 오렌지 + 라이트 등)이 만들어집니다. 디자인 시스템 규모에서 모드 레이어는 공유 추상화 계층이 되어, 유지보수 팀이 라이트/다크/고대비를 한 번 정의하면 모든 제품이 이를 상속합니다.tr에 role="button"을 추가하면 VoiceOver와 NVDA에서 해당 행이 접근성 트리에서 완전히 사라집니다. tr을 button 요소로 교체하면 브라우저가 이를 테이블 밖으로 내보내 버립니다. tabindex="0"과 JavaScript 키 핸들러를 추가하면 키보드 사용자에게는 동작하지만, aria-label은 테이블 탐색 중이 아닌 Tab 이동 시에만 읽히므로 스크린 리더 사용자에게 상호작용 가능 여부를 전달할 수 없습니다. 올바른 해법은 td 안에 네이티브 button이나 anchor를 중첩하는 것입니다. ARIA role 재정의, tabindex, 추가 JavaScript가 필요 없습니다. 확장/축소 동작에는 첫 번째 셀에 aria-expanded를 가진 button을 배치하는 방식이 권장됩니다.이번 주는 디자인 시스템 거버넌스와 접근성이 핵심 주제였습니다. 워크플로우 가이드는 기여 소요 시간, 기여자 수, 팀 만족도(목표: 5점 중 4점 이상), 문서 완성도(80~95%), 의사 결정 속도(초기 피드백 3일 이내, 최종 결정 2주 이내), 채택률이라는 6가지 측정 가능한 건강 지표와 7가지 실패 패턴을 정리하였습니다. 핵심 원칙은 새 프로세스를 추가할 때 기존 프로세스를 제거해야 한다는 것입니다. 동반 기사에서는 브랜드 색상 팔레트를 담당하는 data-theme과 라이트/다크/고대비를 담당하는 data-mode를 독립적인 HTML 속성으로 구조적으로 분리해 특별한 처리 없이 모든 제품이 조합 행렬을 자동으로 상속하는 아키텍처를 주장하였습니다.
접근성도 날카롭게 검토되었습니다. Smashing Magazine 분석에서는 AI 보조 개발이 React 사이드바 코드 29줄에서 10가지 WCAG 위반을 생성하였고, WebAIM Million 2026 조사에서는 95.9%의 페이지에서 페이지당 평균 56.1개의 오류가 검출되었습니다. 해당 기사는 접근성을 운영 역량으로 취급하고, CI/CD에 eslint-plugin-jsx-a11y와 Pa11y를 통합하며, Radix UI, React Aria 같은 접근 가능한 프리미티브를 사용하고, Cursor rules나 Copilot instructions로 AI 코드 생성을 제한할 것을 권고합니다. 심층 기술 분석에서는 클릭 가능한 테이블 행이 보조 기술에서 보편적으로 오작동한다는 사실이 확인되었습니다. tr에 role="button"을 적용하면 VoiceOver와 NVDA에서 행이 접근성 트리에서 사라지며, 유일하게 올바른 패턴은 td 내부에 네이티브 버튼이나 앵커를 중첩하는 것입니다.
이번 주에는 UX 전략과 툴링 측면도 주목받았습니다. NNG 연구는 UX 팀이 SUS 점수 같은 활동 지표가 아닌 전환율, 지원 비용, 유지율 같은 비즈니스 성과를 보고해야 한다고 강조하였으며, Figma 영상에서는 디자인 모드 AI 에이전트가 커뮤니티 셰이더를 브라우저 코드로 내보낼 수 없고, Figma MCP 서버와 Opus 4를 활용한 Claude Code가 가장 정확한 구현을 제공함이 드러났습니다.