웹 서비스에서 모달(Modal) 팝업을 구현할 때 z-index가 꼬이거나 배경 스크롤이 멋대로 움직이는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 여전히 z-index: 99999 같은 임시방편 스크립트를 남발하거나 중량 라이브러리를 설치해서 해결하려 한다. 이번에는 최신 HTML5 표준 요소인 dialog 태그와 showModal() 메서드가 정확히 무엇인지, 왜 필요한지, 그리고 실무 모달 컴포넌트에 어떻게 적용하는지 완벽하게 정리해서 소개하겠다.

과거에는 모달을 만들려면 div 태그에 position: fixed와 z-index를 부여하고, JavaScript로 display 속성을 바꾸는 방식을 썼다. 하지만 페이지 구조가 복잡해지면 CSS의 Stack Context(쌓임 맥락) 때문에 부모 요소의 z-index나 overflow: hidden 속성에 갇혀 모달이 다른 요소 뒤로 숨는 문제가 자주 발생했다.

HTML5의 <dialog> 태그는 브라우저 엔진 레벨에서 관리하는 최상위 레이어(Top Layer)에 요소를 띄운다. DOM 위치와 상관없이 항상 최상단에 렌더링되므로 z-index 값을 비현실적으로 올릴 필요가 없다.

dialog 태그는 단순 표시를 위한 show()와 차단형 모달을 위한 showModal() 두 가지 메서드를 제공한다. 실무 모달에는 반드시 showModal()을 사용해야 배경 조작을 막고 브라우저 차원의 모달 혜택을 받을 수 있다.

dialog 태그로 모달을 띄우는 과정은 매우 단순하다. HTML 구조를 정의한 뒤 JavaScript에서 showModal()과 close() 함수를 호출하기만 하면 된다.

기존 div 기반 방식과 HTML5 dialog 기반 방식을 비교해서 코드의 깔끔함과 안정성을 확인해보자.

CSS z-index 싸움이 벌어지고 배경 스크롤 방지를 위해 body에 overflow: hidden을 수동으로 토글해야 했다.

<!-- 잘못된 예: div 기반 구현 -->
<div id="oldModal" class="modal-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,0.5);">
  <div class="modal-content" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:20px;">
    <h2>기존 모달</h2>
    <p>부모 요소를 벗어나지 못하거나 z-index가 꼬일 수 있습니다.</p>
    <button onclick="document.getElementById('oldModal').style.display='none'">닫기</button>
  </div>
</div>

z-index 지정 없이 깔끔하게 최상위 레이어로 작동하며, CSS ::backdrop 가상 요소로 어두운 배경을 완벽히 제어한다.

<!-- 올바른 예: HTML5 dialog 요소 활용 -->
<button id="openBtn" class="btn">모달 열기</button>

<dialog id="myModal" class="custom-dialog">
  <div class="dialog-body">
    <h2>표준 모달 팝업</h2>
    <p>Top Layer에 렌더링되므로 z-index 꼬임 현상이 전면 차단됩니다.</p>
    <form method="dialog">
      <button class="btn btn-close">확인 닫기</button>
    </form>
  </div>
</dialog>

<style>
.custom-dialog {
  border: none;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  width: 90%;
}

/* 어두운 배경 처리 */
.custom-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
</style>

<script>
const modal = document.getElementById('myModal');
const openBtn = document.getElementById('openBtn');

openBtn.addEventListener('click', () => {
  modal.showModal();
});
</script>

위 코드를 실행하면 모달이 열리는 순간 화면 배경에 블러 효과가 적용된 어두운 레이어가 생성된다. ESC 키를 누르면 JavaScript 코드를 별도로 작성하지 않아도 자동으로 모달이 닫힌다.

dialog 태그 사용 시 자주 놓치는 두 가지 핵심 실수를 정리했다.

✗ dialog를 단순 show()로 열고 배경 스타일이 왜 적용 안 되냐고 묻는 경우
show()로 호출하면 ::backdrop 가상 요소가 생성되지 않고 Top Layer로 이동하지도 않는다. 모달 팝업 형태로 쓰려면 반드시 showModal()을 사용해야 한다.

✓ 외부 배경 클릭 시 모달 자동 닫기 구현법
기본적으로 dialog는 외부 클릭 닫기를 지원하지 않는다. e.target과 dialog의 위치를 측정하여 바깥 영역 클릭을 감지하도록 구현해야 한다.

// 모달 바깥 영역(backdrop) 클릭 시 닫기
modal.addEventListener('click', (e) => {
  const dialogBounds = modal.getBoundingClientRect();
  const isClickOutside = (
    e.clientX < dialogBounds.left ||
    e.clientX > dialogBounds.right ||
    e.clientY < dialogBounds.top ||
    e.clientY > dialogBounds.bottom
  );

  if (isClickOutside) {
    modal.close();
  }
});

HTML5 dialog 태그와 showModal() 방식은 모달 팝업 구현 시 발생하던 z-index 꼬임과 스크롤 제어 문제를 근본적으로 해결해주는 웹 표준 기술이다. 복잡한 CSS 편법이나 라이브러리에 의존하던 기존 습관에서 벗어나는 작은 변화가 모여서 훨씬 깔끔하고 유지보수하기 쉬운 코드베이스를 만든다는 점을 잊지 말자. 이 글의 예제 코드를 참고해 기존 모달 컴포넌트를 표준 dialog 태그로 리팩토링해보면, 버그 없는 직관적인 UI 환경을 얻을 수 있을 것이다.