▲

GN⁺: Popover API를 통한 팝오버 기능 구현

 (developer.mozilla.org)
2P by neo 4달전 | favorite | 댓글 1개

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를 사용할 때는 접근성 측면도 고려해야 함. 키보드로 팝오버를 제어할 수 있어야 하고, 스크린 리더 사용자를 위한 대체 텍스트도 제공되어야 함
▲
neo 4달전  [-]
Hacker News 의견

요약해보면 다음과 같음.

  • 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 등장에 감탄하는 반응.
답변달기