모달 하나를 띄우려고 라이브러리 다섯 개를 부르던 시대
작은 회사 사이트에 안내 팝업 하나를 띄워달라는 요청이 들어오면, 개발자는 흔히 모달 라이브러리부터 검색한다. 부트스트랩 모달, sweetalert, micromodal, headless UI까지. 단순한 안내창 하나에 자바스크립트 수백 KB가 따라붙고, 그 라이브러리가 업데이트를 멈추는 순간 사이트도 함께 멈춘다.
2024년부터 모든 주요 브라우저가 안정 지원을 시작한 HTML popover 속성은 이 흐름을 정확히 거꾸로 돌린다. 모달, 드롭다운, 툴팁, 메뉴 같은 오버레이의 기본 동작을 브라우저가 직접 처리한다. 자바스크립트 없이, 단 두 줄의 HTML 속성만으로.
popover 속성이 무엇을 대신해 주는가
특정 요소에 popover 속성을 붙이면, 그 요소는 자동으로 최상위 레이어(top layer)에 그려진다. 부모 요소의 overflow: hidden이나 복잡한 z-index 싸움에서 자유로워진다는 뜻이다. 그리고 ESC 키로 닫히고, 외부를 클릭하면 닫히고, 다른 popover가 열리면 기존 것이 자동으로 닫히는 동작이 기본 제공된다.
버튼에는 popovertarget="notice"를, 띄울 요소에는 popover 속성과 같은 id를 붙이면 끝이다. 단 두 줄로 모달 라이브러리가 해주던 일의 80%를 대신한다.
auto와 manual, 두 가지 모드를 구분한다
popover="auto"는 가벼운 오버레이용이다. 외부 클릭이나 ESC로 자연스럽게 닫혀야 하는 드롭다운 메뉴, 알림창, 툴팁에 어울린다. 동시에 하나만 열린다는 점이 핵심이다.
popover="manual"은 사용자가 명시적으로 닫기 버튼을 눌러야 하는 오버레이용이다. 토스트 메시지나 알림 배너처럼 여러 개가 동시에 떠 있어야 하는 인터페이스에 맞다. 두 모드를 헷갈리면 UX가 어색해지므로, 콘텐츠가 사라져야 할 타이밍을 누가 결정하는지부터 정한 다음에 모드를 고르는 것이 좋다.
접근성과 키보드 동작이 무료로 따라온다
이 속성이 진짜 가치를 발휘하는 지점은 접근성이다. 직접 구현한 모달은 흔히 포커스 트랩, ESC 핸들러, 스크린 리더용 aria 속성 같은 디테일을 놓친다. 작은 회사 사이트일수록 이런 디테일은 더 자주 빠진다. popover는 이런 동작이 브라우저 차원에서 일관적으로 보장된다. 직접 만든 코드보다 더 잘 동작한다는 뜻이다.
지원 범위와 점진적 적용 전략
크롬, 엣지, 사파리, 파이어폭스 모두 최신 안정 버전에서 지원한다. 다만 1~2년 전 브라우저를 쓰는 일부 방문자도 고려해야 한다면, @supports selector(:popover-open)으로 분기를 두거나, 동작이 안 되는 환경에서도 콘텐츠가 평범한 영역으로 노출되도록 페이지를 설계하면 안전하다. 떠 있던 메뉴가 평범한 리스트로 보이는 정도의 차이라면, 사용자는 오히려 불편을 거의 못 느낀다.
지금 가장 먼저 바꿀 곳은 어디인가
새 사이트를 처음부터 다시 짜라는 이야기가 아니다. 자주 쓰면서 라이브러리 의존이 깊은 곳부터 바꿔 본다. 모바일 메뉴 패널, 상단 공지 모달, 사진 상세 보기 같은 곳이다. 이 한 군데만 자바스크립트를 걷어내도 첫 화면 로딩이 눈에 띄게 가벼워지고, 1년 뒤 라이브러리 호환성 문제로 사이트가 깨질 가능성도 함께 사라진다.
CYAN 에이전시는 작은 회사 사이트일수록 외부 라이브러리 의존을 줄여 6개월, 1년, 3년 뒤에도 같은 속도로 같은 모습으로 돌아가는 구조를 우선한다. popover는 그 방향성에 가장 잘 맞는 최근 표준이고, 새로 짜는 사이트라면 처음부터 이 위에 얹어두는 편이 안전하다.