HTML Popover API: top layer와 자동 닫힘의 동작
Popover API는 요소를 top layer에 표시하면서 DOM 위치는 유지하고, 선언형 속성이나 JavaScript로 열고 닫게 합니다. auto와 manual popover의 닫힘 차이, dialog와의 구분, 접근 가능한 호출자 구성을 설명합니다.
발행·오류 제보: infostoa · 편집 기준
이 글의 개별 작성자와 전문 검토자 정보는 제공되지 않습니다.
HTML Popover API는 메뉴나 도움말 같은 비모달 콘텐츠를 페이지 위에 표시하는 브라우저 기능입니다. popover 속성을 가진 요소는 표시될 때 top layer에 놓여 일반 stacking context의 일부 z-index 충돌을 피하면서도 DOM 트리에서는 원래 위치를 유지합니다. modal dialog처럼 배경과의 상호작용을 자동 차단하지 않으므로, 두 패턴은 서로 바꾸어 쓸 수 없습니다.
1. 선언형 popover와 호출자
popover 속성을 지정한 요소는 처음에 숨겨진 상태로 두고, 버튼에 popovertarget으로 대상 ID를 연결할 수 있습니다. 브라우저는 호출자와 popover의 관계를 알고 기본 표시 동작을 제공합니다. JavaScript에서는 showPopover(), hidePopover(), togglePopover()로 상태를 조작할 수 있습니다. 이 두 방법을 섞어 쓸 때는 앱의 상태와 실제 표시 상태가 어긋나지 않는지 확인합니다.
top layer에 표시돼도 요소가 DOM에서 복사되거나 다른 부모로 이동하는 것은 아닙니다. 문서의 소스 순서, 이벤트 경로, 접근성 관계는 계속 중요합니다. 팝오버 안의 포커스 가능 요소를 키보드로 탐색할 수 있게 하고, 화면 읽기 프로그램에 이름과 용도를 제공해야 합니다. 시각적으로 떠 있다는 이유만으로 접근성 대화상자가 되는 것은 아닙니다.
2. auto와 manual의 닫힘 규칙
popover=auto는 브라우저가 관리하는 닫힘 동작을 제공합니다. 일반적으로 바깥쪽을 누르거나 Escape 키를 누르는 light-dismiss를 지원하고, 표시를 여는 버튼과의 관계도 추적합니다. 페이지는 언제든 여러 auto popover가 독립적으로 떠 있을 것이라고 가정하지 말고, 열고 닫히는 순서와 중첩 관계를 설계해야 합니다. 실제 상호작용은 호출 방식과 문서의 다른 popover 상태에 영향을 받습니다.
popover=manual은 자동 light-dismiss를 원하지 않는 경우 사용할 수 있습니다. 브라우저가 바깥 클릭만으로 닫지 않으므로 페이지가 명시적으로 닫는 동작을 제공해야 합니다. 알림이나 여러 패널을 동시에 유지할 때 유용할 수 있지만, 닫기 버튼과 Escape 동작 등 사용자에게 예측 가능한 종료 방법을 마련해야 합니다. auto와 manual은 표시 모양만 다른 옵션이 아니라 상태 관리와 상호작용 정책을 바꿉니다.
3. popover와 modal dialog 구분
Popover는 비모달 overlay에 적합합니다. 사용자는 popover가 열린 동안에도 페이지의 다른 부분과 상호작용할 수 있습니다. 반면 modal dialog는 사용자 흐름을 잠시 가두고 배경과의 상호작용을 제한하는 목적을 가집니다. 정보 확인이나 간단한 메뉴를 popover로 만들 수 있지만, 반드시 결정을 요구하거나 배경 조작을 막아야 하는 흐름은 dialog 역할과 동작을 별도로 검토해야 합니다.
dialog element의 modal 방식과 popover API는 top layer를 공유할 수 있어 stacking order를 z-index 숫자만으로 예측하기 어렵습니다. 두 종류의 overlay를 함께 쓴다면 어떤 요소가 먼저 열리고 닫혀야 하는지 사용자 흐름으로 검증합니다. popover가 열렸다고 포커스를 자동으로 가두거나 배경을 비활성화한다고 기대하지 말고, 필요한 키보드 이동과 포커스 반환을 명시적으로 구성합니다.
4. 전문가 관점: 상태와 입력 흐름을 시험하기
WHATWG HTML 표준은 popover 속성과 auto·manual 상태, 호출자, top layer 및 show/hide 알고리즘을 규정합니다. MDN은 마크업과 JavaScript 제어, dialog와의 차이를 개발자 중심으로 설명합니다. 구현에서 중요한 질문은 표시 API 호출 여부만이 아니라, Escape·바깥 클릭·호출자 재클릭 뒤 상태가 의도대로 바뀌는지입니다.
키보드, 포인터, 터치, 확대 화면에서 같은 흐름을 확인합니다. auto popover는 light-dismiss가 필요한 짧은 메뉴나 도움말에 사용하고, manual popover는 직접 닫기 정책과 종료 버튼을 포함합니다. 복잡한 메뉴의 키보드 상호작용이나 modal 차단을 자동으로 제공한다고 가정하지 마십시오. 각 overlay의 역할, 이름, 포커스 이동을 테스트하면 top layer 시각 효과와 실제 접근 가능한 동작을 혼동하지 않게 됩니다.