툴팁은 보기엔 사소한 UI 요소지만, 막상 구현해보면 키보드 네비게이션, 스크린 리더 지원, 포커스 관리 등 예상치 못한 복잡성에 직면하게 됩니다. 오랫동안 우리는 이 문제를 서드파티 자바스크립트 라이브러리로 해결해왔죠. 하지만 이제 브라우저 자체에 Popover API라는 강력한 기본 기능이 도입되면서 상황이 바뀌고 있습니다. 이 글은 수년간 라이브러리에 의존하던 툴팁 로직을 네이티브 API로 전환하며 깨달은 핵심 인사이트를 공유합니다. 자세한 내용은 근거자료에서 확인할 수 있어요.
라이브러리 vs 네이티브: 무엇이 달라졌나?
기존 라이브러리 방식은 툴팁의 모든 생명주기를 자바스크립트로 수동 관리해야 했습니다. 반면 Popover API는 선언적(Declarative) 접근을 가능하게 합니다.
<!-- 기존 라이브러리 방식 (의사 코드) -->
<button class="tooltip-trigger" data-tooltip="#my-tooltip">도움말</button>
<div id="my-tooltip" class="tooltip" role="tooltip" hidden>
도움이 되는 설명 텍스트입니다.
</div>
<script>
// 수많은 이벤트 리스너, 상태 관리, ARIA 동기화 코드...
</script>
<!-- Popover API 방식 -->
<button popovertarget="my-popover">도움말</button>
<div id="my-popover" popover>도움이 되는 설명 텍스트입니다.</div>
<!-- 자바스크립트 0줄! -->
위 코드만 봐도 차이가 명확합니다. popover 속성 하나로 브라우저가 요소를 툴팁으로 인식하고, popovertarget로 트리거와 연결합니다. 가장 큰 변화는 책임의 이동입니다. 이제 툴팁의 기본 동작(열기/닫기, Esc 키 처리, 접근성 트리 관리)은 제 코드가 아닌 브라우저가 담당하게 되었죠.
실무 적용 시 고려할 세 가지 포인트
Popover API가 모든 것을 해결해주진 않습니다. 실전에서 마주친 세부 사항을 정리해봤어요.
- 타이밍 제어는 여전히 필요해요: 네이티브 팝오버는 즉시 열리고 닫힙니다. 하지만 사용자 경험을 위해 호버 시 약간의 딜레이를 주거나, 포인터가 툴팁 영역 안으로 들어왔을 때 닫히지 않게 하는 로직은 여전히 약간의 자바스크립트가 필요합니다. 다만, 이제 그 로직은 '기본 동작을 개선'하는 수준이지, '기본 동작 자체를 구현'하는 것이 아니게 되었죠.
popover="manual"과 포커스 관리:manual모드에서는 팝오버를 닫을 때 트리거로 포커스를 되돌리는 작업을 명시적으로 해줘야 합니다. 이는 브라우저가 모든 상황을 추론할 수 없기 때문에 개발자의 의도가 필요한 명확한 경계선입니다.- 아직 라이브러리가 필요한 경우: 대규모 디자인 시스템, 매우 복잡한 위치 지정 요구사항(중첩 스크롤 컨테이너 내 정교한 충돌 감지 등), 혹은 팀 내 접근성 전문 지식이 부족한 경우에는 검증된 라이브러리가 더 나은 선택일 수 있습니다.
결론: 더 이상 시뮬레이션이 아닌 진짜 툴팁
Popover API의 진정한 가치는 코드 줄 수 감소가 아니라 걱정거리의 감소에 있습니다. 키보드 지원, Esc 처리, ARIA 상태 동기화 같은 '웹 플랫폼이 당연히 제공해야 할' 기본 동작들을 이제 더 이상 내가 만들고 테스트하고 유지보수하지 않아도 된다는 것이죠.
시작은 작게 해보세요. 기존 프로젝트의 툴팁 하나만 골라 Popover API로 교체해보는 거죠. 그 과정에서 사라지는 코드와 해결되는 이슈들을 직접 확인해보면, 이 기술이 단순한 새 기능이 아니라 우리가 웹을 만드는 방식을 근본적으로 바꿀 수 있는 도구임을 느끼게 될 겁니다. 이제 툴팁은 우리가 자바스크립트로 시뮬레이션하는 것이 아니라, 브라우저가 이해하는 진짜 요소가 되었습니다.