웹사이트 한 페이지를 들여다보면 작은 띄움창이 의외로 많습니다. 헤더의 알림 드롭다운, '문의하기' 버튼이 띄우는 모달, 가격표 옆의 툴팁, 사진을 누르면 펼쳐지는 라이트박스까지. 같은 일을 하는 코드를 사이트마다 새로 짜고 있다면, HTML 표준이 그 짐을 덜어주기 시작했다는 사실을 챙겨볼 때가 됐습니다.
모달 하나 만들자고 라이브러리를 끌어다 썼던 이유
모달을 직접 구현해 본 분이라면 압니다. 외부 클릭으로 닫기, ESC 키로 닫기, 포커스 가두기, 배경 스크롤 잠그기, 닫힐 때 포커스를 트리거 버튼으로 되돌리기. 단순해 보이는 띄움창에 따라붙는 일이 한두 가지가 아닙니다. 그래서 작은 사이트일수록 무거운 UI 라이브러리를 통째로 들여오거나, 검증이 안 된 자바스크립트 코드 200줄을 사이트마다 복사해 붙이는 일이 반복돼 왔습니다.
Popover API, 두 줄의 속성으로 끝난다
2024년부터 모든 메이저 브라우저가 지원하기 시작한 Popover API는 HTML 자체에 '띄움창' 개념을 도입했습니다. 핵심은 단 두 가지 속성입니다.
- popover: 어떤 요소든 띄움창으로 만들어 주는 속성
- popovertarget: 그 띄움창을 여는 버튼에 붙이는 속성
버튼과 div에 두 속성을 붙이는 것만으로 ESC 키로 닫히고, 외부를 클릭하면 사라지며, 화면 위에 자동으로 떠오르는 띄움창이 완성됩니다. 자바스크립트 한 줄도 필요 없습니다.
자바스크립트 없이 따라오는 다섯 가지 기본기
Popover API의 진짜 가치는 사용자 경험에 필수적인 동작들을 브라우저가 표준으로 챙겨준다는 점에 있습니다.
- 최상위 레이어: 부모의 overflow나 z-index에 가려지지 않습니다. 어디에 마크업해도 화면 위로 떠오릅니다.
- ESC 키 자동 처리: 띄움창이 열린 상태에서 ESC를 누르면 자동으로 닫힙니다.
- 외부 클릭으로 닫기: 기본 모드에서는 바깥을 누르면 닫힙니다.
- 포커스 복원: 닫히면 포커스가 트리거 버튼으로 자연스럽게 돌아갑니다. 키보드 사용자에게 결정적인 부분입니다.
- ::backdrop 의사 클래스: 모달 형태로 쓸 때 CSS만으로 어두운 배경막을 입힐 수 있습니다.
무엇을 Popover로 옮길 수 있을까
실무에서 가장 빠르게 효과를 보는 영역은 네 가지입니다.
- 문의하기 모달: 가장 흔한 쓰임. ::backdrop으로 배경막까지 깔리면 별도 라이브러리가 필요 없습니다.
- 헤더 드롭다운 메뉴: 모바일 햄버거 메뉴와 사용자 프로필 메뉴를 가볍게 만들 수 있습니다.
- 가격표·기능표의 툴팁: '?' 아이콘 옆에 떠오르는 설명창을 자연스럽게 연결합니다.
- 알림 토스트: manual 모드로 두고, 닫기 버튼이나 타이머로 사라지게 합니다.
도입 전에 챙겨야 할 두 가지
- 브라우저 지원: 크롬, 엣지, 사파리, 파이어폭스 모두 지원하지만, 사내 시스템처럼 구형 브라우저가 남아 있는 환경이라면 폴리필을 함께 검토해야 합니다.
- 접근성 기본기: 포커스 관리는 표준이 해 주지만, aria-label이나 의미 있는 제목 같은 의도 전달은 사람의 몫입니다. 시맨틱 HTML과 함께 갈 때 진짜 가치가 나옵니다.
코드는 줄이고, 사용자 경험은 더 챙기는 길
웹사이트의 코드량은 곧 유지보수 비용이고, 외부 라이브러리 하나는 곧 의존성과 보안 점검 항목 하나입니다. Popover API처럼 표준이 챙겨주는 부분을 영리하게 활용하면, 사이트는 가벼워지고 사용자 경험은 오히려 더 정교해집니다.
저희 CYAN 에이전시에서는 새로 만드는 사이트뿐 아니라 운영 중인 사이트의 UI를 점검할 때, 표준만으로 해결할 수 있는 부분을 먼저 솎아내는 일부터 시작합니다. 사이트가 무거워졌다는 느낌이 든다면, 무엇을 덜어낼 수 있는지부터 같이 들여다봐 드립니다.