개요

HTML <dialog> 요소와 Popover API는 모달, 팝오버, 알림 등 오버레이 UI를 브라우저 네이티브로 구현할 수 있게 해주는 웹 표준입니다. 기존에는 서드파티 라이브러리나 복잡한 JavaScript가 필요했지만, 이제 HTML 속성 몇 개로 접근성과 키보드 지원이 완벽한 오버레이를 만들 수 있습니다.

Dialog는 모달과 비모달 대화상자를, Popover API는 툴팁, 드롭다운, 토스트 같은 가벼운 오버레이를 담당합니다. 2025년 현재 두 기능 모두 모든 주요 브라우저에서 지원됩니다.

핵심 개념

Dialog와 Popover는 각각 다른 사용 목적을 가지고 있습니다.

  • Dialog (modal): showModal()로 열면 배경을 비활성화하고, Esc 키로 닫히며, 포커스 트랩이 자동 적용됩니다.
  • Dialog (non-modal): show()로 열면 배경과의 상호작용이 가능합니다.
  • Popover (auto): popover="auto"로 설정하면 바깥 클릭 시 자동으로 닫히고, 한 번에 하나만 열립니다.
  • Popover (manual): popover="manual"은 프로그래밍 방식으로만 닫을 수 있으며, 여러 개가 동시에 열릴 수 있습니다.
  • ::backdrop: 모달 dialog 뒤에 자동 생성되는 배경 레이어를 CSS로 스타일링할 수 있습니다.

실전 예제

Dialog를 사용한 확인 모달과 Popover를 사용한 알림 팝오버 예제입니다.

<!-- 확인 모달 Dialog -->
<button onclick="confirmDialog.showModal()">삭제하기</button>

<dialog id="confirmDialog">
  <form method="dialog">
    <h2>정말 삭제하시겠습니까?</h2>
    <p>이 작업은 되돌릴 수 없습니다.</p>
    <div class="dialog-actions">
      <button value="cancel">취소</button>
      <button value="confirm" class="btn-danger">삭제</button>
    </div>
  </form>
</dialog>

<!-- Popover: HTML 속성만으로 동작 -->
<button popovertarget="notify-pop">알림 보기</button>

<div id="notify-pop" popover="auto" class="notification-popover">
  <h3>새 알림</h3>
  <ul>
    <li>새 댓글이 등록되었습니다.</li>
    <li>프로필이 업데이트되었습니다.</li>
  </ul>
</div>
/* Dialog 스타일 */
dialog {
  border: none;
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Dialog 열기/닫기 애니메이션 */
dialog[open] {
  animation: dialog-in 0.3s ease forwards;
}

@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Popover 스타일 */
.notification-popover {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  max-width: 320px;
}

/* Popover 열기/닫기 전환 */
[popover]:popover-open {
  animation: pop-in 0.2s ease;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

활용 팁

  • form method="dialog"를 사용하면 폼 제출 시 자동으로 dialog가 닫히며, dialog.returnValue로 어떤 버튼이 클릭되었는지 확인할 수 있습니다.
  • popovertarget 속성만으로 JavaScript 없이 팝오버를 토글할 수 있어 매우 편리합니다.
  • 접근성이 기본 내장되어 있습니다. dialog는 자동 포커스 관리와 ESC 닫기를, popover는 top layer 렌더링을 제공합니다.
  • 모달에는 dialog를, 가벼운 오버레이에는 popover를 사용하세요. 목적에 맞는 도구를 선택하는 것이 중요합니다.
  • :popover-open 의사 클래스와 @starting-style을 조합하면 부드러운 진입/퇴장 애니메이션을 구현할 수 있습니다.

마무리

HTML Dialog와 Popover API는 웹 표준만으로 강력한 오버레이 UI를 구현할 수 있게 해줍니다. 라이브러리 의존성을 줄이고, 접근성을 기본으로 확보하며, 코드량도 크게 줄일 수 있습니다. 새 프로젝트에서는 물론 기존 프로젝트에서도 점진적으로 도입을 고려해 보시기 바랍니다.