용어 사전 coding 용어 페이지
포커스 트랩
모달 내부에 포커스를 가둬 키보드 이동을 제어하는 접근성 패턴
핵심 아이디어
포커스 트랩은 모달, 다이얼로그처럼 일시적으로 집중해야 하는 UI 안에서 키보드 포커스가 바깥으로 빠져나가지 않도록 잡아 두는 기법입니다. 사용자가 Tab을 눌렀을 때 현재 상호작용 중인 영역 안에서만 이동하게 만드는 것이 핵심입니다.
이 패턴이 필요한 이유는 마우스를 쓰지 않는 사용자도 길을 잃지 않아야 하기 때문입니다. 모달이 열려 있는데 포커스가 뒤쪽 페이지로 이동해 버리면 화면상 상태와 키보드 초점이 어긋나서 접근성이 크게 나빠집니다.
이 블로그에서의 역할
Mathbong에서는 접근성 실습에서 모달을 다룰 때 포커스 이동과 함께 포커스 트랩을 설명합니다. 키보드 내비게이션과 tabindex를 실제 UI 설계로 연결하는 개념입니다.