UI: modal과 dialog
그게 뭐죠?
모든 디자이너들이 각종 UI 엘리먼트들을 정확하게 이해하고 있을까?
다만 나는 누군가가 나에게 모달과 다이얼로그가 뭐냐고 물어보았을때 제대로 설명하지 못했다.
두루뭉실하게 알고 있어서 정확하게 설명을 할수 없었다.
제대로 알기 위해 공부하면서 이해하게 된 개념들을 글로 남겨두려고 한다.
UI 디자이너로 입문 하시는 분들께 도움이 되는 기록이면 좋겠다.
MUI dialog 캡쳐 이미지https://mui.com/components/dialogs/
bootstrap coreui modal 캡쳐 이미지https://coreui.io/docs/components/bootstrap/modal/
내가 참고했던 MUI components와 Bootstrap coreUI components를 보면
modal 과 dialog 는 거의 같은 모양을 하고 있다.
게다가 팝업창, 얼럿 이라는 용어들도 혼용 된다.
비개발자들이 봤을때는 다 똑같은거 아니야? 할 수 있지만 왜 각각 다르게 부르는걸까..
모달이란?
개발과 UI디자인에 대한 지식이 순수한 일반인 - "화면 위에 뜨는 네모 창"
Google - "특정 사용자 작업, 결정 또는 승인이 필요한 중요 정보"
Apple - "모달리티는 사람들이 작업을 완료하거나 메시지 또는 보기를 닫을 때까지 다른 일을 하지 못하도록 하여 초점을 만듭니다."
위키피디아 - "모달 창은 응용 프로그램의 기본 창 위에 있는 요소입니다. 기본 창을 비활성화하지만 그 앞에 모달 창을 자식 창으로 표시하는 모드를 만듭니다. 사용자는 상위 응용 프로그램으로 돌아가기 전에 모달 창과 상호 작용해야 합니다."
정리하면,
버튼을 눌러 다음 시나리오로 넘어 가기 전 사용자의 결정 또는 승인이 필요한 경우 사용자의 동작을 멈추고 다른일 보다 우선적으로 인지할 수 있도록 하기 위한 네모 창.
다이얼로그라는 언어가 가진 뜻 그대로 “대화” 라는 의미를 생각해보면
프로그램과 사용자간의 소통을 위한 도구라고 생각하면 된다.
확인 및 취소 또는 정보 입력 등 모달창으로 제공해주는 페이지를 통해 프로그램에 명령을 내리며 대화 하는 거다!
모달과 다이얼로그는 MUI 와 Bootstrap components 에서 보이는 것 처럼 같은 UI 모양을 가지고 있듯이
같은 역할을 한다.
아주 미세하게나마 있는 차이점을 설명하자면 모달이 다이얼로그보다 상위 개념이다.
실제 업무에서는
"이 버튼을 클릭했을때 다이얼로그로 처리해주세요"
"이 버튼을 클릭했을때 모달로 처리해주세요"
는 같은말로 이해해도 무관하다.
"이 버튼을 클릭했을때 모달 (또는 다이얼로그 또는 팝업)로 처리할게요!"
라고 먼저 제안 할때는 그냥
위에서도 설명하였듯이 사용자의 동작을 멈추게 하므로 흐름을 끊어버리는 것이니
아주 중요한 결정이나 아주 중요한 알림 사항일 경우에 사용해야 한다는
본질적인 부분만 기억하면 될것 같다.
