[해피CGI][cgimall] Floating UI - 최신 Tooltip / Popover 위치 제어 JavaScript 라이브러리
해피CGI윤실장
2026. 7. 8. 09:06
Floating UI는 Tooltip, Popover, Dropdown Menu, Context Menu, Select Box 등 화면 위에 떠 있는 다양한 UI 요소의 위치를 자동으로 계산하고 배치해주는 최신 JavaScript 라이브러리입니다. 기존 Popper.js의 후속 개념으로 개발되었으며 최근 React, Vue, Vanilla JavaScript 환경에서 많이 사용되고 있습니다.
스크롤 영역 안쪽이나 모바일 화면, 브라우저 가장자리 등 복잡한 환경에서도요소가 화면 밖으로 잘리지 않도록 자동으로 위치를 보정해주며 Tooltip, Dropdown, Popover 같은 인터페이스를 매우 안정적으로 구현할 수 있습니다.
특히 화면 충돌 감지(Collision Detection), 자동 방향 변경(Flip), 위치 이동(Shift), 화살표(Arrow) 위치 계산, 스크롤 대응 등의 기능을 기본 제공하여 직접 복잡한 좌표 계산을 구현할 필요가 없습니다.
React, Vue, Vanilla JS 환경을 모두 지원하며 필요한 기능만 선택적으로 사용할 수 있는 모듈 구조(Tree-shaking)를 제공해 가볍고 빠르게 사용할 수 있습니다. MIT License 기반으로 상업적 프로젝트에서도 무료로 사용할 수 있습니다.
