작은 회사 웹사이트에 '쿠폰 받기' 버튼을 눌렀을 때 뜨는 팝업 하나를 넣는다고 해봅시다. 예전이라면 모달 라이브러리를 설치하고, 클릭 이벤트를 붙이고, 바깥을 누르면 닫히게 코드를 짜고, 다른 요소에 가려지지 않게 z-index 숫자를 올렸다 내렸다 했습니다. 버튼 하나 띄우자고 자바스크립트 수십 줄과 외부 라이브러리가 따라붙던 셈입니다. 이제는 브라우저가 이 일을 직접 해줍니다.
Popover API가 바꾼 것
2024년부터 주요 브라우저에 기본 탑재된 Popover API는 팝업·드롭다운 메뉴·툴팁·알림 배너 같은 '떠 있는 요소'를 자바스크립트 없이 HTML 속성만으로 다루게 해줍니다. 띄울 요소에 popover 속성을 주고, 버튼에 popovertarget으로 그 요소를 가리키기만 하면 클릭에 맞춰 열리고 닫힙니다. 별도의 이벤트 코드가 필요 없습니다.
작은 회사가 체감하는 세 가지 이점
1. 라이브러리가 사라진다
모달·드롭다운을 위해 깔던 외부 스크립트가 통째로 빠집니다. 그만큼 페이지가 가벼워지고, 모바일에서 화면이 뜨는 속도가 빨라집니다. 작은 회사일수록 로딩 1초가 이탈률을 좌우합니다.
2. z-index 전쟁이 끝난다
Popover로 띄운 요소는 최상위 레이어(top layer)에 그려져 다른 어떤 요소에도 가려지지 않습니다. 헤더에 가려진 메뉴, 슬라이드 뒤에 숨은 팝업 같은 고질적인 'z-index 숫자 올리기' 문제가 원천적으로 사라집니다.
3. 닫기 동작이 공짜로 따라온다
바깥 영역을 클릭하거나 ESC 키를 누르면 자동으로 닫히는 '가벼운 닫기(light dismiss)'가 기본 제공됩니다. 고객이 기대하는 자연스러운 동작을, 코드 한 줄 없이 얻는 셈입니다.
접근성도 함께 챙겨준다
직접 만든 팝업이 가장 자주 놓치는 부분이 키보드와 스크린리더 대응입니다. Popover API는 포커스 이동과 화면낭독기 안내를 브라우저가 표준에 맞춰 처리합니다. 키보드만 쓰는 고객, 시각장애 고객까지 자연스럽게 포괄되므로 접근성 리스크가 크게 줄어듭니다.
지금 도입해도 괜찮을까
크롬·엣지·사파리·파이어폭스 최신 버전이 모두 지원하므로 실무 도입 단계에 들어섰습니다. 다만 오래된 브라우저를 쓰는 고객이 많은 업종이라면, 핵심 기능은 기존 방식으로 두고 보조적인 안내 팝업부터 적용하는 점진적 도입이 안전합니다. CSS Anchor Positioning과 함께 쓰면 버튼 옆에 딱 붙는 메뉴·툴팁까지 자바스크립트 없이 완성할 수 있습니다.
가벼움은 결국 신뢰가 된다
새 기술을 무조건 먼저 쓰는 것이 답은 아닙니다. 하지만 라이브러리를 줄이고, 페이지를 가볍게 하고, 접근성까지 표준으로 챙기는 변화라면 작은 회사일수록 이득이 큽니다. CYAN은 이런 웹 표준의 흐름을 실제 고객 사이트에 어디까지, 어떤 순서로 적용할지 업종과 방문자 환경에 맞춰 설계합니다. 화려한 기능보다, 고객이 끊김 없이 끝까지 둘러보는 가벼운 사이트가 결국 문의로 이어진다고 믿기 때문입니다.