Modal과 Dialog의 차이점은?

모달은 사용자가 반드시 상호작용해야만 다른 작업으로 돌아갈 수 있는 **“차단형 UI 창”**을 말한다.

  • 특징
    • 배경의 콘텐츠는 비활성화되고 흐리게 처리됨.
    • 사용자가 모달 내의 동작(확인, 취소 등)을 마치기 전까지 다른 화면 조작 불가.
    • 강제적인 성격이 있음 → 사용자의 흐름을 끊고 특정 작업을 완료하도록 요구.
  • 예시
    • “정말 삭제하시겠습니까?“와 같은 확인 창
    • 로그인/회원가입 창

Dialog

다이얼로그는 사용자에게 정보를 전달하거나 선택지를 제공하는 대화 상자를 통칭하는 개념이다.

  • 특징
    • 모달 다이얼로그: 사용자의 입력을 강제하는 형태 (즉, 모달의 한 종류).
    • 모달리스(non-modal) 다이얼로그: 열려 있어도 사용자가 다른 화면을 계속 조작할 수 있음.
    • 목적: 단순 안내, 선택 옵션 제공, 사용자와의 상호작용을 위한 가벼운 UI.
  • 예시
    • 저장 여부 묻는 알림창
    • “업데이트가 있습니다” 알림
    • 툴에서 띄우는 옵션 설정 창

Modal과 Dialog의 관계

  • Modal ⊂ Dialog
  • 즉, 모달은 다이얼로그의 한 형태이다.
  • 모든 모달은 다이얼로그이지만, 모든 다이얼로그가 모달은 아니다.

정리

  • Dialog: 사용자와 정보를 주고받는 “대화 상자” → 일반적인 상위 개념
  • Modal: 그 중에서도 사용자의 다른 동작을 막고 특정 입력을 강제하는 “차단형 대화 상자”