쓱닷컴, 웹 접근성 개선 여정 공개

쓱닷컴 WEB개발팀은 Chakra UI를 기반으로 디자인 시스템의 접근성을 강화하는 전략을 채택했습니다. Chakra UI는 WAI-ARIA 명세를 준수하여 버튼 컴포넌트의 ARIA 역할과 다이얼로그의 포커스 관리를 기본적으로 제공합니다. 이를 통해 개발팀은 각 컴포넌트마다 접근성 속성을 수동으로 추가하는 부담을 줄이고, 키보드 포커스 시 외부에 포커스 링을 표시하는 `focusVisibleRing` 속성으로 일관된 사용자 경험을 보장했습니다. 또한, `:focus`와 `:focus-visible`을 분리하여 마우스 사용자에게는 불필요한 시각적 단서를 제거하고 키보드 사용자에게는 명확한 포커스 위치를 제공하는 방식으로 시각적 접근성을 개선했습니다. 아이콘 버튼의 경우 `aria-label`과 `aria-pressed` 속성을 동적으로 사용하여 스크린리더 사용자에게 버튼의 역할과 상태 정보를 명확히 전달하는 점도 주목할 만합니다. 이는 데이터 격리 아키텍처(Data Isolation Architecture)를 적용하여 각 컴포넌트의 접근성 로직을 캡슐화하고 재사용성을 높이는 효과를 가져왔습니다.

상품 상세 이미지의 텍스트 정보를 스크린리더 사용자가 인지할 수 있도록 OCR(Optical Character Recognition) 기술을 활용한 대체 텍스트 생성 기능을 고도화했습니다. 기존의 `alert()` 방식은 스크린리더 사용자의 콘텐츠 흐름을 방해하는 문제를 야기했습니다. 이를 해결하기 위해 `aria-live="polite"` 속성을 가진 숨김 영역을 도입하여, 현재 읽고 있는 내용을 방해하지 않고 자연스럽게 변경된 OCR 결과를 안내하도록 개선했습니다. 또한, 결과가 표시되는 영역에 `tabindex="-1"`을 적용하고 JavaScript에서 `.focus()`를 호출하여, OCR 처리 완료 즉시 스크린리더 사용자가 결과 영역으로 포커스를 이동할 수 있도록 하여 사용자 경험(User Experience)을 향상시켰습니다. 이 과정에서 `innerHTML` 대신 `textContent`를 사용하여 XSS(Cross-Site Scripting) 공격 위험을 제거하고, 결과값 캐싱을 통해 서버 부하를 감소시키는 등 안정성과 효율성도 함께 확보했습니다.

접근성 작업이 성능에 미치는 영향을 객관적으로 증명하기 위해 Lighthouse CI를 활용한 자동화 테스트 환경을 구축했습니다. 기존 GitHub Actions 기반의 자동화는 설정 변경 시 워크플로우 파일 수정 및 PR 프로세스가 필요했지만, n8n을 도입하여 GUI 기반으로 워크플로우를 분리함으로써 측정 주기 및 대상 페이지 변경의 유연성을 확보했습니다. 이 구조는 GitHub 서버의 공용 리소스와 독립적으로 실행되어 다른 CI 작업에 영향을 주지 않습니다. 매주 월요일 자동으로 실행되는 워크플로우는 lhci autorun을 통해 모바일과 데스크탑 환경에서 각 페이지를 3회씩 측정하여 신뢰도를 높인 대표값을 선정합니다. 측정 결과는 GitHub Pages로 서빙되는 HTML 보고서와 AI가 요약한 GitHub Issue로 자동 등록되어 팀원들이 성능 및 접근성 지표 변화를 쉽게 추적할 수 있게 합니다. 이 자동화는 시맨틱 HTML 구조 개선이 렌더링 성능에 긍정적인 영향을 줄 수 있음을 숫자로 보여주며, 접근성 점수 향상이 SEO 점수 상승과도 연관됨을 시사합니다.

쓱닷컴 WEB개발팀은 2022년부터 KWCAG(한국형 웹 콘텐츠 접근성 지침)을 기반으로 한 접근성 가이드라인 문서를 Confluence에 축적해왔습니다. Confluence는 별도 인프라 없이 즉시 사용 가능하고 콘텐츠 수정이 용이하며 팀 내 피드백을 쉽게 반영할 수 있다는 장점이 있었습니다. 하지만 시간이 지남에 따라 직군별 분리된 정보 제공의 어려움, 라이브 데모 미지원, 직관적이지 않은 검색 기능 등 구조적인 한계가 드러났습니다. 이에 따라 팀은 네이버 NULI와 같이 검색 가능하고, 코드 예제 복사 및 라이브 데모 확인이 가능한 접근성 전용 사이트 구축을 목표로 하고 있습니다. 현재는 Confluence 가이드라인을 지속적으로 다듬고 외부 레퍼런스를 연결하는 한편, 문서화만으로는 부족한 접근성 이슈를 개발 과정에서 자동으로 잡아주는 도구 개발을 병행하며 실질적인 개선을 추구하고 있습니다.

개발 및 QA 과정에서 접근성 이슈를 조기에 발견하고 해결하기 위해 AI 기반 도구 개발에 집중하고 있습니다. PR(Pull Request) 접근성 리뷰 스킬은 GitHub Enterprise와 gh CLI를 연동하여 WCAG 2.2 AA 및 KWCAG 2.2 기준에 맞춰 시맨틱 HTML 구조, ARIA 속성 사용, 키보드 접근성, 색상 대비 등을 자동으로 검토하고 한국어로 상세한 피드백을 제공합니다. 이는 팀의 평균적인 접근성 수준을 높이고 학습 도구로 활용될 수 있습니다. 또한, 콘텐츠 등록 시점의 접근성 누락을 방지하기 위해 AI 기반 대체 텍스트 자동 추천 기능을 개발 중입니다. 이미지를 업로드하면 AI가 분석하여 적절한 alt값을 추천하고 담당자가 쉽게 적용할 수 있도록 하여, 접근성 이슈 발생 진입점 자체를 줄이는 것을 목표로 합니다. 이 외에도 Alt Text Checker, 대체 텍스트 검사 북마클릿, 포커스 대체 텍스트 토스트 북마클릿 등 스크린리더 없이도 기본적인 접근성 상태를 점검할 수 있는 다양한 보조 도구를 개발하여 운영 중입니다.