Popover 라이브러리 35KB → 브라우저 네이티브 API 0KB로 배포 크기 절감

Context

기존 웹 앱에서 tooltip과 popover 구현 시 Floating UI(35KB), event listeners, resize observer, IntersectionObserver를 조합했다. DOM hierarchy와 무관하게 뷰포트 경계에서 위치 재조정하며 z-index 관리와 light dismiss 로직을 직접 구현했다.

Technical Solution

• 에 popovertarget 속성 추가 → JavaScript 없이 popover 토글 가능
• :popover-open pseudo-class 적용 → CSS만으로 상태 기반 스타일링 가능
• CSS Anchor Positioning으로 위치 지정 → anchor() 함수로 기준점 연결
• position-try-fallbacks: flip-block, flip-inline → 자동 위치 재조정

Impact

Popover 라이브러리 의존성 제거로 번들 크기 22~35KB 감소. JavaScript event listener 3개 이상 제거.

Key Takeaway

브라우저 Baseline API는 라이브러리의 버그 부담 없이 동일 기능을 제공하며, 점진적 enhancement로 기존 기능 완전 대체 가능.