이벤트 안내, 쿠폰 발급, 개인정보 동의창처럼 작은 회사 웹사이트에도 '팝업'은 꼭 한두 개씩 필요합니다. 그런데 막상 이 팝업 하나를 띄우려고 무거운 자바스크립트 라이브러리를 통째로 설치하는 경우가 많습니다. 화면을 어둡게 덮고, 가운데에 창을 띄우고, 바깥을 누르면 닫고, 키보드로도 닫을 수 있게 하는 이 모든 동작을 직접 만들기가 까다롭기 때문이죠. 그런데 이 일을 브라우저가 기본으로 해주는 시대가 왔습니다. 바로 HTML의 dialog 태그입니다.
왜 직접 만든 팝업은 늘 말썽인가
div 박스를 화면 위에 띄워 팝업처럼 보이게 만드는 방식은 오랫동안 표준이었습니다. 하지만 제대로 작동하게 하려면 손볼 곳이 한둘이 아닙니다. 팝업이 떠 있는 동안 뒤쪽 화면이 스크롤되지 않게 막아야 하고, 키보드의 Tab 키가 팝업 바깥으로 새어 나가지 않게 가둬야 하며, ESC 키로 닫히게 하고, 화면 낭독기를 쓰는 고객에게도 '지금 창이 떴다'고 알려야 합니다. 이 처리를 빠뜨리면 팝업은 떠 있는데 뒤 페이지가 같이 움직이거나, 키보드만 쓰는 고객이 팝업 안에 갇히는 사고가 납니다.
dialog 태그는 무엇이 다른가
dialog 태그는 위에서 나열한 골치 아픈 동작들을 브라우저가 알아서 처리합니다. 개발자는 창의 내용과 여닫는 버튼만 만들면 됩니다.
showModal() 한 줄로 화면을 덮는 팝업을 띄우고, close()로 닫는다. 뒤 배경을 어둡게 덮는 막(::backdrop)도, ESC 키 닫기도, 키보드 가두기도 기본으로 따라온다 — 핵심은 이것입니다.
창을 띄우면 브라우저가 자동으로 뒤 화면을 비활성화하고, 키보드 초점을 팝업 안에 묶어두며, ESC 키 입력을 받아 닫아줍니다. 화면 낭독기에도 '대화 상자'라고 올바르게 전달됩니다. 예전 같으면 수십 줄의 자바스크립트로 흉내 내야 했던 일들이, 이제는 태그 하나에 담겨 있습니다.
작은 회사 웹사이트에 주는 실질적 이득
- 사이트가 가벼워집니다: 팝업 하나 때문에 무거운 외부 라이브러리를 싣지 않아도 되니, 페이지가 빨리 뜨고 모바일에서도 매끄럽습니다.
- 접근성이 기본으로 챙겨집니다: 키보드 사용자와 화면 낭독기 사용자까지 자연스럽게 배려되어, 별도 비용 없이 문턱이 낮아집니다.
- 유지보수가 단순해집니다: 라이브러리 버전이 바뀌어 팝업이 깨지는 일이 없습니다. 브라우저 표준 기능이라 오래도록 안정적입니다.
- 보안 위험이 줄어듭니다: 외부 코드를 덜 끌어다 쓸수록, 그 코드를 통해 들어오는 취약점 걱정도 줄어듭니다.
도입할 때 알아둘 점
dialog 태그는 2022년 이후 크롬·사파리·파이어폭스 최신 버전에서 모두 지원되어, 지금은 안심하고 쓸 수 있는 표준 기능입니다. 다만 아주 오래된 브라우저를 쓰는 고객 비중이 높은 업종이라면, 팝업이 뜨지 않더라도 안내 내용 자체는 페이지 안에서 읽히도록 대비해두는 점진적 적용 방식을 권합니다. 또 팝업은 편리한 만큼 남용하기 쉬운 도구입니다. 접속하자마자 여러 개가 연달아 뜨면 고객은 내용을 읽기도 전에 창을 닫고 떠납니다. 꼭 필요한 한 가지만, 적절한 순간에 띄우는 절제가 기능보다 중요합니다.
정리
팝업 하나를 위해 무거운 도구를 끌어오던 시대에서, 브라우저에 내장된 표준 기능으로 가볍고 안전하게 해결하는 시대로 넘어가고 있습니다. dialog 태그는 작은 회사 웹사이트가 적은 비용으로 더 빠르고 더 친절한 팝업을 갖게 해줍니다. CYAN은 이렇게 화면에 보이지 않는 부분까지 표준에 맞춰 단단하게 만드는 웹사이트를 지향합니다. 무거운 플러그인에 의존하지 않고도 충분히 좋은 사이트를 만들 수 있습니다.