# Popover API를 통한 팝오버 기능 구현

> Clean Markdown view of GeekNews topic #14753. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=14753](https://news.hada.io/topic?id=14753)
- GeekNews Markdown: [https://news.hada.io/topic/14753.md](https://news.hada.io/topic/14753.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-05-11T09:58:43+09:00
- Updated: 2024-05-11T09:58:43+09:00
- Original source: [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- Points: 2
- Comments: 1

## Topic Body

### Popover API의 주요 내용 요약

#### Popover API 소개
- Popover API는 개발자에게 페이지 콘텐츠 위에 팝오버 콘텐츠를 표시하기 위한 표준적이고 일관되며 유연한 메커니즘을 제공함
- 팝오버 콘텐츠는 HTML 속성을 사용하여 선언적으로 제어하거나 JavaScript를 통해 제어할 수 있음

#### Popover의 특징과 사용 방법
- 팝오버는 Modal과 Non-modal 두 가지 방식으로 나뉘며, Popover API로 생성된 팝오버는 항상 Non-modal임
  - Modal은 팝오버가 표시되는 동안 페이지의 나머지 부분이 비대화형으로 렌더링되는 것을 의미함
  - Non-modal은 팝오버가 표시되는 동안 페이지의 나머지 부분과 상호 작용할 수 있음을 의미함
- 팝오버의 일반적인 사용 사례로는 액션 메뉴, 사용자 정의 "토스트" 알림, 폼 요소 제안, 콘텐츠 선택기 또는 교육 UI 등이 있음
- 팝오버는 HTML 속성을 통해 선언적으로 생성하거나 JavaScript API를 통해 생성할 수 있음

#### Popover API 관련 HTML 속성
- `popover`: 요소를 팝오버 요소로 변환하는 전역 속성
- `popovertarget`: `<button>` 또는 `<input>` 요소를 팝오버 제어 버튼으로 변환
- `popovertargetaction`: 제어 `<button>` 또는 `<input>`에 의해 제어되는 팝오버 요소에서 수행할 작업 지정

#### Popover API 관련 CSS 기능
- `::backdrop`: 팝오버 요소 바로 뒤에 배치되는 전체 화면 요소로, 원하는 경우 팝오버 뒤의 페이지 콘텐츠에 효과를 추가할 수 있음
- `:popover-open`: 팝오버 요소가 표시 상태일 때만 일치하는 의사 클래스로, 팝오버 요소가 표시될 때 스타일을 지정하는 데 사용할 수 있음

#### Popover API 관련 인터페이스와 확장
- `ToggleEvent`: 팝오버 요소의 상태가 표시와 숨김 사이에서 전환될 때 사용자에게 알리는 이벤트를 나타냄
- `HTMLElement.popover`, `HTMLButtonElement.popoverTargetElement`, `HTMLInputElement.popoverTargetElement`, `HTMLButtonElement.popoverTargetAction`, `HTMLInputElement.popoverTargetAction` 등의 인스턴스 속성이 추가됨
- `HTMLElement.hidePopover()`, `HTMLElement.showPopover()`, `HTMLElement.togglePopover()` 등의 인스턴스 메서드가 추가됨 
- `beforetoggle`, `toggle` 이벤트가 추가됨

### GN⁺의 의견
- Popover API는 웹 개발자에게 팝오버 UI를 쉽게 구현할 수 있는 표준화된 방법을 제공한다는 점에서 의미가 있음. 기존에는 이를 위해 라이브러리를 사용하거나 직접 구현해야 했음
- 다만 Popover API가 아직 실험적 기능이고 브라우저 지원 범위가 제한적이라는 점은 고려해야 함. 프로덕션 환경에서 사용하기 위해서는 폴리필이나 기존 라이브러리와 병행 사용을 검토해 볼 필요가 있음
- 유사한 기능을 제공하는 라이브러리로는 Bootstrap의 Popover 컴포넌트, Tippy.js 등이 있음
- Popover API를 사용할 때는 접근성 측면도 고려해야 함. 키보드로 팝오버를 제어할 수 있어야 하고, 스크린 리더 사용자를 위한 대체 텍스트도 제공되어야 함

## Comments



### Comment 25144

- Author: neo
- Created: 2024-05-11T09:58:43+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=40317740) 
요약해보면 다음과 같음.

- CSS Anchor Positioning이 도입되면 Popover API와 결합하여 커스텀 툴팁이나 컨텍스트 메뉴를 선언적인 방식으로 구현할 수 있게 되어 PopperJS 같은 라이브러리가 필요 없어질 것임.
- 모달 다이얼로그를 원한다면 `<dialog>` 요소도 사용 가능함.
- 현재 팝오버는 브라우저 윈도우 경계를 넘어갈 수 없는 등 호스트 OS 윈도잉 시스템과 잘 연동되지 않아 구현에 한계가 있음. 이를 제대로 구현하려면 Win32에서는 팝오버마다 별도 HWND가, macOS에서는 NSView가 필요할 것임. 
- 브라우저에 팝업 차단기가 있는데 이런 API를 만드는 것이 아이러니하긴 함. 90년대 후반~2000년대 초반의 팝업/팝언더 광고 전쟁이 떠오름.
- Popover API를 사용하면 익스텐션으로 타겟팅해 차단하기 쉬워질 것임. 마케팅 CTA나 침입적인 지원 채팅 등 사용자가 싫어하는 용도로 주로 쓰일 것임.
- Popover를 모달로 만들고 싶다면 `<dialog>` 요소를 쓰라고 하는데, 배경을 흐리게 하는 등의 경우라면 팝오버를 모달로 만드는 게 맞는 유즈케이스임. `<popover modal=true>`가 더 나은 방식 아닐까?
- Stimulus + Popper로 커스텀 구현한 예시 코드 공유됨.
- Popover가 뭔지 보여주는 이미지가 페이지에 없다는 지적.
- 팝오버 API 등장에 감탄하는 반응.