GN⁺ 2024-05-11 | parent | ★ favorite | on: Popover API를 통한 팝오버 기능 구현(developer.mozilla.org)
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 등장에 감탄하는 반응.