topic★★★★★난이도
Popover
'톡 튀어나오다' — 호버/클릭 시 나타나는 작은 오버레이.
#popover#팝오버#오버레이
Popover는 'pop(톡 튀어나오다) + over(위에)'의 합성어다. 책에서 팝업 북(pop-up book)을 펼치면 그림이 입체적으로 튀어나오듯, UI에서도 특정 요소 옆에 작은 정보 패널이 '톡' 나타난다. Tooltip보다 크고 Modal보다 가벼운 중간 단계의 오버레이다.
| 실제 사물 | UI 패턴 |
|---|---|
| 팝업 북의 입체 그림 | 클릭 시 나타나는 작은 패널 |
| 책을 닫으면 사라짐 | 바깥을 클릭하면 닫힘 |
| 본문 위에 겹쳐서 표시 | 트리거 요소 옆에 플로팅 |
사용 가이드라인: 간단한 설정, 미리보기, 추가 옵션 등 '모달을 띄울 정도는 아닌' 보조 콘텐츠에 쓴다. Tooltip과 달리 클릭으로 열리고, 폼 요소나 버튼 등 인터랙티브 콘텐츠를 포함할 수 있다. 화면 가장자리에서 잘리지 않도록 위치 자동 조정(flip/shift)이 필수다.