프론트엔드·

SSG.COM·2개월 전

쓱닷컴이 접근성을 대하는 방식

쓱닷컴(SSG.COM)이 Chakra UI와 함께 WAI-ARIA, WCAG 기준을 실무에 적용하고 Lighthouse CI + AI PR 리뷰로 접근성을 지속 관리하는 체계를 공유하는 사례. 시각·동작 민감성 사용자를 위한 구체적 구현 패턴부터 접근성 자동화 파이프라인까지, e-커머스 서비스에서의 실전 접근성 엔지니어링을 담는다.

핵심 포인트

Chakra UI 선택 이유: WAI-ARIA 속성(aria-label, role, aria-pressed 등) 내장으로 접근성 구현 부담 감소, 커스텀 컴포넌트에는 수동 ARIA 속성 추가
포커스 관리: :focus-visible로 키보드 사용자에게만 포커스 링 표시, tabindex="-1" + focus()로 동적 콘텐츠(모달, 토스트) 접근성 보장
모션 민감성: prefers-reduced-motion 미디어 쿼리로 애니메이션 비활성화 옵션 제공
동적 콘텐츠 알림: aria-live="polite"로 스크린리더 자동 알림 구현 (alert() 대체)
자동화 체계: Lighthouse CI + n8n 주간 자동 점수 측정 (현재 85-93점 구간), AI PR 접근성 리뷰 도구
보안 개선: innerHTML → textContent 교체로 XSS 공격 벡터 동시 제거

상세 정리

아이콘만 있는 버튼: aria-label로 버튼 목적 명시, 토글 상태는 aria-pressed로 스크린리더에 전달
이미지 대체 텍스트: OCR 기반 AI 도구로 alt 텍스트 자동 생성, 장식용 이미지는 빈 alt="" 처리
:focus-visible 효과: 마우스 클릭 시 포커스 링 숨기고 키보드 Tab 내비게이션 시에만 표시
tabindex="-1": 동적으로 열리는 모달이나 알림 영역에 프로그래밍 방식으로 포커스 이동
Lighthouse 점수 85-93 유지: 100점 추구보다 실용적 기준 설정, 주간 자동 측정으로 회귀 감지
AI PR 리뷰 파이프라인: PR 생성 시 AI가 자동으로 접근성 이슈 체크, 개발자 실수 사전 차단
n8n 활용: 주간 Lighthouse 스코어 자동 수집 및 알림 파이프라인 구축
prefers-reduced-motion: CSS 미디어 쿼리로 사용자 OS 설정 감지, 애니메이션 duration 0으로 처리
WCAG 기준: Tab/Enter/Arrow 키로 모든 인터랙션 가능 — 키보드 전용 내비게이션 완전 지원
innerHTML 제거 이유: 접근성 개선 과정에서 발견한 XSS 취약점, textContent로 교체해 동시 해결

왜 읽나React 기반 e-커머스 서비스에서 WAI-ARIA 표준을 Chakra UI와 함께 실무 적용하고, Lighthouse CI와 AI PR 리뷰로 접근성 품질을 지속 관리하는 구체적 패턴과 자동화 체계를 배울 수 있다.

SSG.COM 블로그

원문은 여기서 이어서 읽을 수 있어요

읽음 (0)

·takedown 요청

이 글과 비슷한