대형 데이터 그리드의 가상 스크롤 성능과 키보드·보조기기 접근성을 함께 지키는 설계입니다.
왜 이 문제가 생길까
기업용 테이블은 수만 행을 보여 주기 위해 화면 근처 행만 렌더링하는 가상화를 씁니다. 그런데 화면에서 사라진 행이 DOM에서도 사라지면 키보드 포커스가 튀거나 스크린리더가 현재 위치를 잃을 수 있습니다. 빠른 스크롤과 접근성은 별개 기능이 아니라 같은 상태 모델을 공유해야 합니다.
시스템은 무엇을 구분해야 할까
행의 고유 ID, 전체 순서, 현재 선택, 포커스된 셀을 렌더링 범위와 분리해 관리합니다. 키보드 이동으로 보이지 않는 행에 도달하면 먼저 스크롤 범위를 이동하고 해당 셀을 렌더링한 뒤 포커스를 옮깁니다. 표가 단순 읽기용이면 네이티브 table을 우선 검토하고, 셀 단위 편집·화살표 이동이 필요할 때 grid 패턴을 사용합니다. 전체 행 수와 현재 위치를 보조기기가 알 수 있도록 적절한 행 인덱스 정보를 제공합니다.
현장에서 적용하면
사용자가 50번째 행에서 아래 화살표를 눌러 51번째 행으로 이동하는 순간 50번째 행이 DOM에서 제거될 수 있습니다. 포커스가 body로 떨어지지 않도록 상태를 먼저 갱신하고 새 셀에 안정적으로 연결합니다. 필터를 바꾸면 이전 포커스 ID가 사라질 수 있으므로 결과 첫 행이나 필터 컨트롤로 이동하는 규칙을 정해야 합니다.
도입할 때 놓치기 쉬운 점
`role=grid`만 붙이면 접근성이 생기는 것은 아닙니다. 정렬 상태, 선택 상태, 편집 모드 진입·종료까지 키보드 동작이 일관돼야 합니다. 10만 행을 한 페이지에 모두 접근 가능하다고 과장하기보다 검색·필터·페이지 이동도 제공해 실제 탐색 비용을 낮춰야 합니다.
시작 전 점검할 세 가지
- 가상화 경계에서도 포커스가 유지되는가
- 전체 행 수·현재 행 위치를 보조기기가 파악하는가
- 정렬·필터·편집을 키보드만으로 완료할 수 있는가
참고 자료: W3C ARIA Authoring Practices의 Grid 패턴
#웹접근성 #데이터그리드 #가상스크롤 #키보드접근성 #스크린리더 #ARIA #기업용웹 #프론트엔드 #UX #테이블성능
