문서
드래그 앤 드롭은 사실 편한 UX가 아니다?
황수재 · 토스 · 토스 기술 블로그
소개
드래그 앤 드롭은 장애를 가진 사용자에게는 불편한 UX가 되기도 해요. 오늘은 “나눠모으기 통장” 서비스의 접근성 설계 단계부터 개발 과정까지 소개하고 접근성을 챙길 수 있는 간단한 방법을 알려드릴게요.
AI 핵심 요약
터치 조작이 어렵거나 시각적 변화만으로 상태를 파악하기 힘든 사용자도 계좌 순서를 바꿀 수 있도록, 토스뱅크는 디자이너·접근성 컨설턴트·개발자가 함께 대안을 설계했습니다. 드래그 앤 드롭과 탭 기반 조작을 마련하고, aria-pressed와 aria-label, aria-live를 적용해 상태와 변경 결과를 스크린 리더에 전달했습니다. 바텀시트가 열리고 닫힐 때 focus API로 초점을 적절히 이동·복원했으며, iOS와 Android의 스크린 리더 동작 차이를 여러 기기에서 확인해 대응했습니다. 접근성은 ARIA 속성만 추가하는 일이 아니라 기본 HTML 의미를 살리고 실제 환경에서 검증하는 과정이라는 점을 보여줍니다.
- 드래그 앤 드롭만 제공하지 말고 버튼 조작처럼 대체 가능한 순서 변경 방식을 함께 설계하세요.
- 포커스는 동작의 맥락에 맞게 이동시키고, 작업이 끝나면 원래 항목으로 돌려보내세요.
- aria-live="polite"를 활용하면 순서 변경 결과를 스크린 리더에 전달할 수 있습니다.
- ARIA 속성의 지원 여부와 동작은 브라우저·운영체제·버전에 따라 달라지므로 실제 기기에서 검증하세요.
- 기본 HTML 요소와 lang, alt, label, fieldset 같은 속성부터 올바르게 사용하는 것이 접근성 개선의 출발점입니다.
