접근성AI 시대의 접근성 - TetraLogical
TetraLogical의 Ela Gorla는 AI가 접근성에 양날의 검이라고 주장합니다. 일상 워크플로에 접근성 검사를 내재화할 수 있지만, 2026년 WebAIM Million은 감지된 오류와 WCAG 적합성 실패가 모두 증가하여 수년간의 점진적 개선 추세가 역전되었음을 발견했습니다. 원인으로는 코딩 기술 부족으로 품질 검토가 불가능한 바이브 코딩, 이미 접근성이 낮은 공개 사이트로 학습되어 그 결함을 그대로 복제하는 AI 지원 코드 생성, 그리고 인간 전문성 없이 접근성을 처리한다는 착각을 주는 AI 에이전트가 있습니다. 이 글은 도구 중심이 아닌 가치 중심 접근을 권장합니다. 고부가가치 자동화 기회를 발굴하고, WCAG 2.2 Level AA 기준을 참조하는 상세한 프롬프트를 작성하며, AI가 생성한 수정 사항이 프로덕션에 반영되기 전 필수 인간 검토 체크포인트를 구축해야 합니다. 무엇보다 접근성 전문가는 대체 불가능하며, 정확한 프롬프트 작성, 복잡한 컴포넌트 검토, 장애인 대상 사용성 테스트에는 여전히 전문 지식이 필수입니다.
Read Articlearrow_forward Article · 접근성READ TIME: 9m
aria-expanded 사용 사례
이 Piccalilli의 심층 분석은 모든 접이식 위젯 패턴을 aria-expanded가 실제로 필요한 경우와 웹 플랫폼이 이를 불필요하게 만드는 경우로 구분하여 매핑합니다. 저자는 패턴을 접이식 섹션(공개 위젯, 아코디언)과 접이식 인터랙티브 요소(내비게이션, 메뉴, 트리 뷰, 콤보 박스)로 나누며, 각각 고유한 ARIA 요구사항이 있습니다. 플라이아웃 내비게이션은 aria-expanded만 필요하지만, 진정한 메뉴 버튼은 aria-haspopup과 aria-activedescendant도 필요합니다. 네이티브 요소도 충분히 다뤄집니다. 단순 공개 위젯은 <details>/<summary>를 사용해야 하고, 모달은 인보커 커맨드와 함께 <dialog>를 사용해야 하며, 툴팁은 이제 Popover API(popover="auto")와 command="toggle-popover"를 사용해 JavaScript 없이 라이트 디스미스와 ESC 닫기 기능을 제공할 수 있습니다. APG 패턴은 프로덕션 템플릿이 아닌 ARIA 사용의 예시이며, 네이티브든 커스텀이든 모든 솔루션은 보조 기술로 테스트해야 한다고 경고합니다.
READ_FULL_LOGarrow_forwardArticle · 디자인 시스템READ TIME: 11m
디자인 시스템 계약: 컴포넌트는 Figma에도 코드에도 없다
Christine Vallaure는 디자인 시스템 계약 모델을 소개합니다. 이는 컴포넌트별 단일 JSON 또는 YAML 파일로 Figma와 코드 사이에 위치하며, 어느 쪽도 정식 소스로 취급되지 않습니다. Figma 라이브러리와 코드베이스 모두 해당 파일에서 생성되고, 검사기가 세 가지 산출물이 여전히 일치하는지 검증합니다. 이 모델은 최근 Figma에 합류한 TJ Petri가 설립한 Southleft가 대중화했으며, 오픈소스 개념 검증 프로젝트는 Shoelace, Mantine, Carbon, Polaris를 대상으로 검증되었습니다. 긴박성은 실용적입니다. Southleft의 A/B 테스트에서 계약 없이 작업한 AI는 존재하지 않는 옵션을 만들고 색상을 하드코딩하며 컴포넌트 스타일을 임의로 변경해 100점 중 69점을 받은 반면, 계약에 의해 제약된 동일한 AI는 100점 만점을 기록하며 환각 대신 실제 격차를 지적했습니다. Vallaure는 범위를 솔직하게 밝힙니다. 계약은 구성과 토큰 매핑을 고정하지만, 드래그·타입어헤드·모션과 같은 세부 구현은 다루지 않으며 ARIA 시맨틱은 포함되어 있어 기분 좋은 놀라움이었다고 합니다. 결정적으로 Code Connect나 UXPin Merge와 달리 계약은 Figma도 코드도 우선시하지 않아, 디자이너의 의사결정 권한을 보존합니다.
READ_FULL_LOGarrow_forwardArticle · 접근성READ TIME: 9m
HTML, CSS, 최소한의 JavaScript로 접근 가능한 모달과 팝업 만들기
Jabo Landry는 현대 HTML 프리미티브를 활용해 접근 가능한 오버레이를 구축하는 방법을 안내합니다. 팝업은 popover와 popovertarget 속성을 사용해 기본 제공 Escape 닫기와 라이트 디스미스를 지원하며, 모달은 <dialog> 요소에 트리거 버튼의 command="show-modal"과 닫기 버튼의 command="close"를 사용하여 JavaScript 없이 선언적으로 구현합니다. command/commandfor 브라우저 지원이 불확실한 경우 showModal() 메서드가 대안입니다. 이 글은 두 가지 실용적인 주의사항을 강조합니다. popover나 <dialog>에 직접 display: flex 또는 grid를 적용하면 기본 display: none이 재정의되어 항상 표시되므로 :popover-open이나 dialog[open] 선택자를 대신 사용해야 합니다. 또한 모달이 열린 상태에서 배경 스크롤은 html:has(dialog[open]) { overflow: hidden; }으로 억제할 수 있습니다. CSS 앵커 포지셔닝(position-anchor, anchor-name)은 팝업을 순수 CSS로 트리거에 고정할 수 있게 해주지만, 프로덕션 사용 전 브라우저 지원 확인이 필요합니다.
READ_FULL_LOGarrow_forwardArticle · 생태계READ TIME: 6m
아니요, 사람들은 AI를 더 원하지 않습니다 — Smashing Magazine
Vitaly Friedman은 AI 기능에 대한 기업의 야망과 실제 사용자의 욕구 사이의 간극을 조명하며, IBM의 2026년 AI 도입 격차 연구와 AI 챗봇이 오류 확인 의지를 약화시킨다는 닐슨 노먼 그룹 연구를 인용합니다. 핵심 주장은 AI 기능이 기존 워크플로에서 사람들을 이탈시키는 부가물이며, AI 출력을 검증하는 비용 — 훑어보기, 핵심 포인트 식별, 논리 확인, 수정 사항 명확화, 재검토 — 이 절약되는 시간을 초과하는 경우가 많다는 것입니다. 사용자들은 AI를 인간 대안과 비교하지 않고 기능을 기능과 비교하며, 기술에 관계없이 신뢰할 수 없는 기능은 신뢰할 수 있는 것에 패배합니다. 실용적인 처방은 AI 세컨드 설계입니다. 기존 멘탈 모델에 깊이 통합된 조용하고 차분한 방식으로, 창의적이거나 판단 집약적인 작업을 대체하기보다 진정으로 지루한 작업을 자동화하는 것입니다. Friedman은 Bo Young Lee의 널리 공유된 표현을 인용합니다. 사람들은 AI가 자신을 소모시키는 육체적·정신적 노동을 처리해줌으로써 인간만이 할 수 있는 일과 관계에 더 많은 시간을 쏟을 수 있기를 원합니다.
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
29주차는 AI가 프런트엔드 스택 전반을 재편하는 시점에서 접근성과 디자인 시스템 무결성을 집중 조명합니다. 2026년 WebAIM Million 보고서는 냉정한 사실을 전합니다. 수년간의 점진적 개선 추세가 뒤집히며 감지된 오류와 WCAG 적합성 실패가 모두 증가했으며, TetraLogical 팀은 그 원인을 개발 워크플로에서 거버넌스 없이 AI를 사용한 결과로 봅니다.
컴포넌트 저작 측면에서는 두 편의 글이 웹 플랫폼이 얼마나 조용히 접근 가능한 위젯 구현을 쉽게 만들었는지 보여 줍니다. aria-expanded는 이제 네이티브 <details>, <dialog>, Popover API, 인보커 커맨드를 포함하는 더 풍부한 도구 중 하나일 뿐이며, 이러한 패턴들은 JavaScript 부담을 줄이면서 보조 기술 호환성을 높여 줍니다. freeCodeCamp 워크스루도 command/commandfor 패턴과 ::backdrop 의사 요소를 통해 같은 요점을 구체적으로 보강합니다.
Christine Vallaure의 디자인 시스템 계약 글은 Figma 대 코드 드리프트 논쟁을 재구성합니다. 단일 JSON/YAML 계약이 중간에 위치하고, Southleft의 A/B 테스트에서 계약에 의해 제약된 AI는 100점을 기록한 반면 계약 없이 작업한 AI는 69점에 그쳤습니다 — 스키마 기반 거버넌스의 구체적인 증거입니다.
Vitaly Friedman은 사용자 리서치 관점으로 이슈를 마무리합니다. 사람들은 AI를 더 원하는 것이 아니라 지루한 작업을 AI가 흡수해 인간의 일이 더 보람 있게 느껴지길 원한다는 것으로, 모든 디자인 시스템 팀이 다음 AI 기능을 출시하기 전에 적용해야 할 시각입니다.
Key Takeaways- 2026년 WebAIM Million은 접근성 오류와 WCAG 실패가 모두 증가하여 수년간의 개선 추세가 역전되었음을 발견했습니다. 거버넌스 없는 AI 지원 개발이 유력한 원인입니다.
- 네이티브 HTML 요소(
<details>, <dialog>, Popover API, 인보커 커맨드)는 이제 기존에 커스텀 aria-expanded 연결과 복잡한 JavaScript가 필요했던 많은 패턴을 대체합니다. - Figma와 코드 사이에 위치한 JSON/YAML 디자인 시스템 계약은 AI 유발 드리프트를 줄입니다. Southleft 테스트에서 계약에 의해 제약된 AI는 100점, 계약 없는 AI는 69점을 기록했습니다.
