#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
Continue reading · same source
More from SSG
View all posts from SSG
돌아오지 않는 메모리를 찾아서
JVMKubernetesG1GC1개월 전
이상적인 구조가 빠른 성능은 아닙니다
MongoDBAPI PerformanceData Modeling2개월 전
“장보기 지원금이 곧 소멸돼요” 알림 뒤에서 일어난 일
Spring BatchDatabase ConnectionResource Optimization3개월 전
낯선 오타와 싸워서 이기고 싶은 마음
Deep LearningNLPTranslation Model4개월 전
“왜 노출이 안 될까?”를 한 번에 추적하는 방법
MSADistributed TracingKafka5개월 전
