📚 Reference

• 공식 문서 1
• GitHub 1

📜 Chapter

‣

Floating UI

• Floating UI
• 웹 페이지에서 툴팁(Tooltip), 팝오버(Popover), 드롭다운(Dropdown) 같은 '떠 있는(floating)' 요소들을 원하는 위치에 정확하게 배치해주는 JavaScript 라이브러리이다.
• 과거에 유명했던 Popper.js의 후속 버전으로, 훨씬 가볍고 성능이 뛰어나며 다양한 기능을 제공한다.

특징

1. 스마트한 위치 계산: 화면 끝에서 요소가 잘리지 않도록 자동으로 반대편으로 뒤집어주거나(Flip), 화면 안으로 밀어넣어주는(Shift) 등 복잡한 계산을 자동으로 처리해준다.
2. 프레임워크 독립성: 바닐라 자바스크립트는 물론, React, Vue, React Native 등 다양한 환경에서 사용할 수 있다.
3. 매우 가벼움: 필요한 기능만 골라 쓸 수 있도록 설계되어 있어 웹사이트의 로딩 속도에 거의 영향을 주지 않는다.
4. 강력한 상호작용 (React용): 단순히 위치만 잡아주는 것을 넘어, 호버(Hover) 시 열기, 클릭 시 닫기, 키보드 내비게이션 등 접근성(Accessibility)을 고려한 복잡한 인터랙션을 쉽게 구현할 수 있는 도구를 제공한다.

사용하는 이유

• CSS만으로 툴팁이나 메뉴의 위치를 잡으려고 하면, 부모 요소의 overflow: hidden 설정 때문에 메뉴가 잘리거나, 스크롤을 내릴 때 위치가 어긋나는 등 까다로운 문제가 많다.