HTML <dialog> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

<dialog> 태그는
사용자가 작업을 수행하거나 정보를 확인하기 위해 일시적으로 상호작용하는, 열고 닫을 수 있는 작은 창 형태의 대화 상자를 나타냅니다.

<dialog>의 "dialog"라는 단어는 영어로 "대화" 또는 "대화 상자"를 의미합니다.

<dialog> 태그는 다음과 같은 상황에서 자주 사용됩니다.

사용자에게 중요한 정보, 경고, 확인 메시지 등을 표시하는 알림창
사용자 입력 또는 설정 제어를 위한 화면 위에 팝업 형태나 그렇지 않은 비팝업 대화 상자
자동 또는 수동으로 열고 닫을 수 있는 창 형태의 대화 상자

알아두세요!
모든 HTML 요소와 마찬가지로 다른 유형의 컨트롤을 표현할 때 <dialog> 태그를 사용하는 것은 적합하지 않습니다. 예를 들어 컨텍스트 메뉴, 툴팁, 팝업 목록 상자는 대화 상자가 아니므로 이러한 패턴을 구현하기 위해 <dialog> 태그를 남용하는 것은 잘못된 것입니다.

기본 구조

<dialog> 태그는 기본적으로 화면에 표시되지 않습니다.
아래처럼 단순히 마크업만 하면 아무것도 보이지 않습니다. 숨겨져 있기 때문입니다.

왜 안 보일까요?

브라우저의 기본 스타일시트에서 <dialog> 태그는 open 속성이 없으면 display: none 상태로 처리하기 때문입니다.

보이게 하려면?

<dialog>를 화면에 표시하려면 open 속성을 추가해야 합니다.

open 속성은 부울 속성(boolean attribute)입니다. 이 속성이 존재하면 대화 상자가 화면에 표시됩니다. 없으면 기본적으로 숨겨져 있습니다.

이제 대화 상자가 화면에 표시됩니다.

브라우저의 기본 스타일시트에서 <dialog> 태그는 open 속성이 있으면 display: block 상태로 처리하기 때문입니다.

속성

<dialog> 태그는 모든 글로벌 속성을 사용할 수 있습니다.

하지만, tabindex 속성은 지정하지 말아야 합니다.
<dialog> 태그는 자바스크립트의 showModal() 메서드로 열릴 경우, 자동으로 포커스를 받는 메커니즘을 내장하고 있습니다. 이때 tabindex 속성으로 인위적으로 포커스를 조정하면 이 메커니즘이 깨질 수 있으므로 삼가야 합니다. 따라서 <dialog> 자체에는 tabindex를 지정하지 않고, 포커스가 필요한 버튼이나 입력 요소에만 autofocus 속성을 사용하는 것이 권장됩니다.

`open` 속성

대화 상자가 표시되고 있는지 여부를 지정합니다.
부울 속성(boolean attribute)입니다. 이 속성이 존재하면 화면에 표시되고, 없으면 숨겨집니다.

`closedby` 속성

주의하세요!
closedby 속성은 명세서에서는 규정하고 있으나 브라우저 호환이 제한될 수 있습니다. 최신 브라우저 호환성 표를 참조하세요!

사용자가 어떤 동작으로 대화 상자를 닫을 수 있는지를 지정하는 속성입니다.
이 속성에 대한 자세한 설명은 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby를 참조하세요.

대화 상자 표시 버튼

open 속성으로 페이지가 로드될 때 대화상자가 열린 상태로 <dialog> 태그를 표시할 수 있지만, 대화 상자 표시 버튼을 만들어서 화면에 표시하거나 숨길 필요가 있습니다.

이 버튼을 구현하기 위해서는 자바스크립트를 사용해야 합니다. <dialog> 태그에는 다음과 같은 세 가지 주요 메서드가 제공됩니다.

세 가지 주요 메서드
`showModal()`	대화 상자를 화면 위에 팝업 형태, 즉 모달 형식으로 엽니다. 이때 대화 상자 뒤로 배경 레이어가 생성되며, 이 레이어는 CSS의 `::backdrop` 가상 요소로 지정할 수 있습니다.
`show()`	대화 상자를 비 팝업 형태로 엽니다.
`close()`	열려 있는 대화 상자를 닫습니다.

예제

HTML

<dialog id="my-dialog">  
    <p>이것은 대화 상자입니다.</p>
    <button id="close-btn" type="button" autofocus>대화 상자 닫기</button>
</dialog>
<button id="open-btn" type="button">대화 상자 열기</button>

JavaScript

const dialog = document.getElementById("my-dialog");
const showButton = document.getElementById("open-btn");
const closeButton = document.getElementById("close-btn");

// "대화 상자 열기" 버튼을 클릭하면 대화 상자가 모달 형식으로 엽니다. 
showButton.addEventListener("click", () => {
    dialog.showModal();
});

// "대화 상자 닫기" 버튼을 클릭하면 대화 상자를 닫습니다.
closeButton.addEventListener("click", () => {
    dialog.close();
});

접근성 고려사항

<dialog> 태그는 접근성을 고려하여 설계된 요소입니다. 특히 showModal() 메서드를 사용할 때 접근성 기능이 제대로 작동합니다.

포커스 관리

showModal()을 사용하면 대화 상자가 열릴 때 포커스가 자동으로 대화 상자 내부로 이동합니다. 대화 상자가 닫히면 포커스는 이전 위치로 되돌아갑니다.

`Esc` 키 지원

showModal()로 열린 대화 상자는 키보드의 Esc 키를 누르면 자동으로 닫힙니다.

`autofocus` 사용 권장

대화 상자가 열릴 때 사용자가 가장 먼저 조작해야 할 요소에 autofocus 속성을 지정하는 것이 좋습니다. 예를 들어 입력 필드가 있다면 그 필드에, 그렇지 않다면 닫기 버튼에 지정할 수 있습니다.

`<dialog>` 자체는 포커스 대상이 아님

<dialog> 요소는 인터랙티브 요소가 아니므로, tabindex 속성을 추가로 지정해서 포커스를 주는 방식은 피해야 합니다. 포커스는 대화 상자 내부의 버튼이나 입력 요소에만 적용해야 합니다.

기술적인 문법 요약

datalist 태그의 구문 형식
암시적인 `role` 속성 값	`dialog`
허용된 `role` 속성 값	`alertdialog`

브라우저 호환성

마지막 업데이트 정보: 2025-07-15

dialog 태그의 브라우저 호환성
태그	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<dialog>`	37	79	98	15.4
`open`	37	79	98	15.4
`closedby`	134	134	141	지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

dialog 태그의 명세서 사양
명세서 사양
`<dialog>`	HTML #the-dialog-element

참고문헌

MDN - <dialog>: The Dialog element