Read Original
#Frontend

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

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

Summary

마우스 없는 고객도 즐거운 쇼핑을, 쓱닷컴의 치열한 웹 접근성 개선기

디자인 시스템부터 AI 비서까지, 1등 이커머스가 접근성을 기본값으로 만드는 5가지 전략

단순한 규제 준수를 넘어 모든 사용자가 편리하게 이용할 수 있는 웹을 만들기 위해 SSG.COM 프론트엔드 팀이 수행한 기술적 여정을 다룹니다. 프레임워크 선택부터 자동화 파이프라인 구축, AI 도구 활용까지 실전적인 접근성 확보 노하우를 상세히 공유합니다.

  • 01Chakra UI v3를 활용한 일관된 포커스 링 관리 및 prefers-reduced-motion 대응
  • 02aria-live='polite'를 적용하여 스크린리더 흐름을 방해하지 않는 고도화된 OCR 결과 안내
  • 03n8n과 GitHub를 연동하여 매주 월요일 성능과 접근성 점검 보고서를 이슈로 자동 생성
  • 04WCAG 2.2 기준에 맞춘 AI PR 리뷰 스킬을 제작하여 개발 단계에서 접근성 결함 선제적 방어
  • 05스크린리더 없이도 접근 가능한 이름을 시각적으로 확인할 수 있는 북마클릿 도구 개발 및 배포

RECOMMENDATION

접근성을 '아픈 손가락'으로 여기는 서비스라면, 라이브러리 선정 단계부터 WAI-ARIA를 지원하는 도구를 선택하고 Lighthouse 측정을 자동화하여 정량적으로 관리할 것을 추천합니다.

The Problem

SSG.COM은 초기 개발 과정에서 웹 접근성을 우선순위에서 배제하여, 키보드 탐색이나 스크린리더 사용자가 상품 검색 및 결제 시 미로를 헤매는 듯한 불편함을 겪는 문제를 확인하였다.

The Solution

Chakra UI를 활용한 디자인 시스템 구축, aria-live 기반의 OCR 이미지 대체 텍스트 시스템 고도화, n8n과 Lighthouse를 결합한 접근성 지표 자동 측정, 그리고 AI 기반의 PR 리뷰 및 대체 텍스트 추천 도구를 도입하였다.

The Result

모바일 웹 접근성 지표를 85~93점 수준으로 안정화하였으며, 시맨틱 마크업 개선을 통해 렌더링 성능과 SEO 지표가 동반 상승하는 효과를 거두었다.

Trade-off

n8n 기반 자동화 시스템은 소스코드 저장소와 분리되어 관리가 파편화될 수 있으며, OCR 대체 텍스트의 경우 기술적 한계로 인해 실제 이미지 정보와 100% 일치하지 않을 수 있는 정확도 이슈가 존재한다.

03

Key Concepts

Concept · 01

WAI-ARIA

장애가 있는 사용자가 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는 기술 사양입니다.

  • aria-label과 aria-pressed를 활용하여 아이콘 버튼의 역할과 토글 상태를 스크린리더에 전달함
  • aria-live 속성을 사용하여 OCR 인식 상태 변화를 실시간으로 음성 안내함
Concept · 02

Lighthouse CI (LHCI)

웹 페이지의 성능, 접근성, SEO 등을 자동으로 측정하고 점검하는 자동화 도구입니다.

  • 매주 월요일 정기적으로 실행하여 접근성 점수 변동 추이를 추적함
  • 3회 반복 측정을 통해 네트워크 환경에 따른 데이터 편차를 최소화함
Concept · 03

prefers-reduced-motion

사용자가 운영체제 설정에서 애니메이션이나 움직임을 최소화하도록 선택했는지 확인하는 미디어 쿼리입니다.

  • 전정 장애 사용자를 위해 시스템 설정에 따라 서비스 내 모든 애니메이션을 자동으로 비활성화하는 전역 스타일 적용