JavaScript 없이 모달 만들기? 🤯 HTML Popover API 만나기!

Source: Dev.to

HTML Popover API란?

HTML Popover API를 사용하면 JavaScript를 전혀 작성하지 않고도 완전한 모달을 만들 수 있습니다. 표준 HTML 요소에 몇 가지 속성만 추가하면 브라우저가 표시·숨김 및 “라이트 디스미스”(바깥 클릭 또는 Esc 키) 동작을 모두 처리합니다.

아래 예제를 CodePen에 복사‑붙여넣기 하면 동작을 확인할 수 있습니다.

Open Modal

  
## Modal Title

  
This is a modal built with the Popover API.

  Close

어떻게 동작하나요? (세부 설명)

• popover 속성 – 모달 역할을 할 요소(\<dialog\>)에 추가합니다. 브라우저는 이 요소를 팝업으로 인식하고 트리거될 때까지 숨겨 둡니다.
• popovertarget="magic-modal" – 트리거(예: 버튼)에 배치합니다. 트리거와 모달의 id를 연결해 브라우저에 어떤 팝업을 열어야 하는지 알려줍니다.
• ::backdrop (CSS) – 모달이 활성화될 때 뒤에 어두운 혹은 흐릿한 오버레이를 만들기 위해 스타일링할 수 있는 의사 요소입니다.
• 자동 해제 – 모달 외부를 클릭하거나 Esc 키를 누르면 자동으로 닫히며, JavaScript가 전혀 필요하지 않습니다.

장점, 단점, 그리고 “왜 이제서야 알게 되었을까?”

✅ 장점 (왜 좋아할까요)

• JavaScript 전혀 없음 – useState도, 토글 함수도, 추가 번들 크기도 없습니다.
• z‑index 전쟁 없음 – 팝오버는 브라우저의 “최상위 레이어”에 렌더링되어 자동으로 모든 콘텐츠 위에 표시됩니다.
• 내장 접근성 – “라이트 디스미스”(바깥 클릭)와 Esc 키 처리가 기본 제공되어 별도의 이벤트 리스너가 필요 없습니다.

❌ 단점 (여전히 JavaScript가 필요한 경우)

• 브라우저 지원 – 최신 기능이므로 구형 브라우저에서는 폴리필이나 대체 방법이 필요합니다. 프로덕션에 적용하기 전에 반드시 Can I use… 를 확인하세요.
• 애니메이션 구현 난이도 – CSS만으로 간단한 페이드‑인은 쉽지만, 요소가 DOM에서 제거되기 전에 부드럽게 페이드‑아웃하려면 JavaScript 없이 구현하기가 까다롭습니다.
• 복잡한 상호작용 로직 – 모달을 닫지 못하도록 해야 하는 경우(예: 부분적으로 입력된 폼)에는 해제를 가로채기 위해 여전히 JavaScript가 필요합니다.

결론

무거운 React 모달 라이브러리를 네이티브 HTML Popover API로 대체할 준비가 되었나요, 아니면 여전히 JavaScript가 팝업의 절대적인 왕이라고 생각하시나요? 댓글로 여러분의 생각을 공유해주세요! 🥊👇