단골에게 여름 휴무를 알리는 공지창 하나. 첫 방문 손님에게 10% 쿠폰을 내미는 이벤트 배너 하나. 작은 회사 홈페이지에서 이런 '잠깐 떠오르는 창'은 늘 필요합니다. 그런데 지금까지 이 작은 창 하나를 띄우려고, 우리는 자바스크립트 라이브러리를 통째로 불러오고 수십 줄의 코드를 붙여 왔습니다. 그리고 그 코드 뭉치가 로딩을 늦추고, 모바일에서 어긋나고, 어느 날 조용히 멈추곤 했죠. 이 오래된 번거로움을 브라우저가 직접 걷어내기 시작했습니다.
팝업 하나가 왜 그렇게 무거웠나
화면 위에 떠오르는 창은 겉보기보다 손이 많이 갑니다. 열고 닫는 버튼을 연결하고, 바깥을 클릭하면 닫히게 하고, ESC 키에도 반응하게 하고, 다른 요소 위에 확실히 겹쳐 보이도록 z-index 싸움을 벌여야 합니다. 이걸 직접 짜기 번거로우니 대부분 외부 라이브러리에 기댔고, 그 대가로 홈페이지는 쓰지도 않는 기능까지 잔뜩 짊어졌습니다. '팝업 하나'의 진짜 비용은 언제나 그 뒤에 딸려오는 무게였습니다.
팝오버(Popover) API — 브라우저가 팝업을 알아서 연다
이제는 HTML 속성 두 개면 끝납니다. 떠오를 요소에 popover 속성을 붙이고, 그 창을 여는 버튼에 popovertarget으로 대상만 지정하면, 자바스크립트 한 줄 없이 팝업이 열리고 닫힙니다. 브라우저가 나머지를 대신 처리해 주기 때문입니다.
- 바깥 클릭·ESC 자동 처리: 창 밖을 누르거나 ESC를 누르면 알아서 닫힙니다(가벼운 닫힘, light dismiss). 손으로 짤 필요가 없습니다.
- 겹침 순서 걱정 끝: 팝오버는 화면 최상단 레이어(top layer)에 떠서, z-index를 아무리 만져도 다른 요소에 가리던 고질적 문제가 사라집니다.
- 배경 어둡게도 CSS로: ::backdrop 하나로 뒤 배경을 흐리거나 어둡게 덮을 수 있습니다.
진짜 '모달'이 필요하면 dialog 요소
확인·취소를 반드시 눌러야 넘어가는 결제 확인창처럼, 뒤쪽 조작을 막아야 하는 창이라면 dialog 요소가 짝입니다. 열면 키보드 포커스가 창 안에 갇히고(포커스 트랩), 뒤 배경이 잠기며, 접근성에 필요한 처리가 기본으로 따라옵니다. 예전에는 이 모든 걸 손으로 구현하다 놓치기 일쑤였던 부분입니다.
작은 회사 홈페이지에 특히 잘 맞는 이유
규모가 작은 사이트일수록 이 변화의 이득이 큽니다. 공지 팝업, 이벤트 배너, 간단한 문의 안내창 정도라면 무거운 라이브러리를 걷어내도 됩니다. 코드가 줄면 로딩이 빨라지고, 의존하는 외부 파일이 없으니 어느 날 갑자기 멈출 일도 줄고, 브라우저 기본 동작을 쓰니 모바일·키보드·화면 낭독기까지 자연스럽게 대응됩니다. 관리하는 사람이 적은 회사일수록, '알아서 되는' 기능은 그 자체로 유지보수 비용을 아껴 줍니다.
도입 전에 짚어 둘 것
팝오버 API와 dialog 요소는 2024년을 지나며 크롬·사파리·파이어폭스 최신 버전에 모두 자리 잡았습니다. 다만 아주 오래된 브라우저를 쓰는 손님을 위해 간단한 대비책은 남겨 두는 것이 안전합니다. 그리고 무엇보다, '띄울 수 있으니 띄운다'는 유혹을 경계해야 합니다. 화면에 들어서자마자 팝업이 시야를 가리면 손님은 내용을 보기도 전에 창을 닫습니다. 기술이 쉬워질수록, 정말 필요할 때만 절제해서 쓰는 판단이 더 중요해집니다.
CYAN 에이전시는 이런 새 표준을 홈페이지에 반영할 때, '최신이라서'가 아니라 '이 사이트에 정말 이득이 되는가'를 먼저 따집니다. 불필요한 라이브러리는 덜어내고 브라우저 기본기를 살려, 가볍고 오래가는 홈페이지를 만드는 것 — 눈에 잘 띄지 않지만, 오래 두고 쓸수록 값을 하는 방식이라고 믿습니다.
