Dialog, Modal의 명시적 응답 요구 버전

한 줄로

사용자의 응답을 요구하는 모달 형태의 작은 윈도우입니다. 어원은 그리스어 "대화(dialogos)"입니다.

어디서 왔나

그리스어 dialogos는 "두 사람 사이의 말"을 뜻합니다. 컴퓨터 분야에서는 1970년대 Xerox PARC에서 처음 등장했습니다. 시스템이 사용자와 "대화"하듯 정보를 묻거나 알리는 작은 윈도우입니다.

Modal과의 차이

엄밀히 구분하면 다음과 같습니다.

Modal: 화면 위에 떠 있는 모든 종류의 윈도우. 사용자 흐름을 막습니다.
Dialog: Modal의 일종. 사용자에게 명시적 응답을 요구합니다.

실제로는 거의 같은 의미로 쓰입니다. HTML에 <dialog> 태그가 2022년 표준화되면서 dialog가 더 공식 용어가 됐습니다.

종류

Alert dialog: 정보 알림. "저장됐습니다." OK 버튼만.
Confirm dialog: 확인 요청. "삭제하시겠습니까?" OK와 Cancel.
Prompt dialog: 입력 요청. "이름을 입력하세요"와 텍스트 필드.

HTML5 dialog

<dialog open>
  <p>정말 삭제하시겠습니까?</p>
  <button>확인</button>
  <button>취소</button>
</dialog>

open 속성으로 표시 여부를 제어하고, showModal() 메서드로 띄웁니다.

접근성

좋은 dialog의 조건은 다음과 같습니다.

Focus trap: 포커스가 dialog 안에서만 움직입니다.
Escape 닫기: 키보드로 닫기가 가능합니다.
첫 인터랙티브 요소에 자동 포커스가 됩니다.
aria-labelledby로 제목을 연결합니다.

바이브 메이커가 챙길 한 가지

<dialog> 네이티브 HTML 태그가 2022년부터 모든 브라우저에서 지원됩니다. 직접 모달을 구현하는 대신 이걸 쓰면 접근성과 키보드 처리가 자동으로 됩니다.

관련

Modal · Popover · ARIA