Dialog vs Modal

최근에 tailwind 와 DaisyUI 라이브러리, 시맨틱 태그 dialog 를 사용해 다이얼로그를 구현할 일이 있었다. 그 중에 DaisyUI가 제공하는 class가 modal, modal-box 인데 반해 사용하는 엘리먼트 태그는 dialog인 점, 이를 랩팽한 컴포넌트 명을 ~Dialog로 할지 ~Modal로 할지 고민하다가 알게 된 내용을 정리한다.

<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">모달 제목</h3>
    <p>모달 내용</p>
    <form method="dialog">
      <button class="btn">닫기</button>
    </form>
  </div>
</dialog>

• 시맨틱 태그 <dialog>를 사용함으로써 스크린리더가 이를 명확히 인식할 수 있다.
• showModal()을 이용하면 자동 포커스 이동과 포커스 트랩 기능을 일부 제공한다.
• 키보드 접근성도 HTML 표준에 따라 어느 정도 보장된다.
• <form method="dialog">와 같은 네이티브 닫기 방식도 제공된다.

1. Dialog와 Modal의 의미

모든 모달은 다이얼로그이지만, 모든 다이얼로그가 모달인 것은 아니다.

dialog.show()

• 비모달 다이얼로그
• 다이얼로그는 보이지만, 사용자는 여전히 페이지 내 다른 요소와 상호작용 가능
• 포커스는 자동 이동하지 않음
• 접근성이 필요한 경우 수동으로 ARIA 속성과 포커스 제어를 구현해야 함

dialog.showModal()

• 모달 다이얼로그
• 화면의 나머지 부분은 자동으로 비활성화됨
• 포커스가 자동으로 다이얼로그로 이동 (포커스 트랩 필수 요소 중 일부 충족)
• 스크린리더도 더 자연스럽게 인식 가능

모달(modal)

정의:
모달은 애플리케이션에서 일시적으로 사용자와의 상호작용을 차단하고, 해당 모달과의 상호작용이 완료될 때까지 다른 인터페이스 요소와의 상호작용을 막는 UI 요소이다.

주요 특징:
메인 인터페이스와의 상호작용을 차단하여 사용자가 모달의 내용에 집중하도록 유도하는 역할을 한다.

일반적인 사용 사례:

• 삭제 확인과 같은 확인 프롬프트
• 경고 또는 오류 메시지
• 로그인 화면과 같은 인증 다이얼로그
• 진행 전에 필수적인 옵션 선택

예시:
문서를 편집하는 중 ‘변경 사항을 저장하시겠습니까?‘와 같은 메시지가 나타나고, 사용자가 ‘예’, ‘아니오’, ‘취소’ 중 하나를 선택해야만 다른 작업을 계속할 수 있는 경우가 이에 해당한다.

다이얼로그(dialog)

정의:
다이얼로그는 사용자와의 정보 교환이나 의사 결정을 위한 UI 요소로, 모달일 수도 있고 아닐 수도 있는 요소이다.

주요 특징:
반드시 메인 인터페이스와의 상호작용을 차단하지는 않는다. 즉, 다이얼로그가 열려 있어도 다른 애플리케이션 부분과의 상호작용이 가능한 경우도 존재한다.

일반적인 사용 사례:

• 검색 또는 설정과 같은 사용자 입력 요청
• 정보 표시 (예: 오류 메시지, 알림)
• 복잡한 양식이나 다단계 프로세스

예시:
워드 프로세서에서 글꼴 크기나 서식을 지정하는 다이얼로그 박스가 열려 있으면서도, 동시에 다른 메뉴나 도구와 상호작용이 가능한 경우이다.

주요 차이점

상호작용 차단 여부:

• 모달은 닫히기 전까지 메인 인터페이스와의 상호작용을 차단한다.
• 다이얼로그는 모달일 수도 있고 아닐 수도 있으며, 비모달 다이얼로그의 경우 메인 인터페이스와의 상호작용이 가능하다.

사용 목적:

• 모달은 사용자의 집중이 필요한 중요한 결정, 경고 또는 작업에 사용된다.
• 다이얼로그는 정보 제공, 양식 제출, 옵션 선택 등 다양한 상호작용에 사용되며, 메인 인터페이스와의 상호작용 차단 여부는 상황에 따라 다르다.

https://dev.to/doccaio/modal-vs-dialog-2bb2