모달, 논모달 그리고 팝업의 차이

회사 업무를 진행하면서 '모달과 팝업' 차이를 그때 당시에는 누군가를 가르칠정도로 제대로 알지 못했기에 항상 갈증났었는데 이번 포스팅을 통해서 정리해볼까 한다.

결과적으로 대부분 모달을 많이 사용되고 있다. 
메인 서비스와 상관이 없는 독단적인 내용이라면 팝업, 서비스를 통해서 진행되는 것은 모달이라고 부른다. 
모달의 제일 큰 특징으로는 시작(진입 컨퍼넌트)하여 끝(OK, Save, Done...)을 낼 수 있으며, 모달에서 다시 제자리(메인)로 이동할 수 있다는 것이다. 이부분만 알아도 모달을 바로 알 수 있다. 

구글 머테리얼 디자인에서도 모달과 논-모달의 정의를 볼 수 있는데 아래 그래프가 더 설명하기 좋을 것 같아서 가져오게 되었다.
이 그래프를 보면 또 떠오르는 질문 '논-모달은 무엇일까?'.

 

Google material design modal dialog

 

모달과 논-모달의 차이를 쉽게 설명한다면, 모달은 dim처리(모달을 제외한 뒷배경이 어두워지면서 액션이 없음) 가 되지만, 논-모달은 dim이 없다. 그렇기 때문에 논-모달은 부모 서비스와 모달을 같이 사용할 수 있다.예로는 구글 이메일, 로봇이 아닙니다 아래에 나오는 작은 모달과 같은 예시를 들수 있다. 대부분 논-모달은 부모 페이지에 같이 나와도 방해가 되지 않는 선에서 사용되고 있다. 

 

팝업 Pop-up

1. 기존 브라우저 위에 독립적인 브라우저를 갖는 것 (새로운 레이어가 올라가는 것)
2. 브라우저 옵션에서 컨트롤 할 수 있는 것

모달 Modal

1. 브라우저 위에 브라우저를 띄울 수 있는 것 (대부분 부모-자식 관계)
2. 브라우저 옵션과 관계없이 띄울 수 있는 것 
3. Dim처리가 있어 부모 페이지는 사용할 수 없는 것 

논-모달 Non-Modal

1. 브라우저 위에 브라우저를 띄울 수 있는 것 (대부분 부모-자식 관계)
2. Dim처리 없이 부모 페이지도 같이 사용할 수 있는 것

페이지 Page

1. 명확하게 마침표 없을때 사용하는 것 
2. 서비스가 흘러가는 과정이거나 일부일 경우에 사용하는 것 

처음에는 이론적으로 이해하더라도 행동으로 옮겨서 사용하기가 어렵지만, 계속해서 익숙해지면 쉬워질 수 있다. 그리고 어떤 것이든 정확한 정답은 없기 때문에 계속해서 탐구하고 시도해보면서 알아가는 방법도 나쁘지 않다고 생각이 든다. 
꼭 외우지 않아도 돼! 나중에 또다시 헷갈리는 순간이 올때 이 포스팅을 다시 보면 좋을 것 같다.

 

 

참고 : https://www.nngroup.com/articles/popups/, https://uxplanet.org/modal-vs-page-a-decision-making-framework-34453e911129, https://material.io/components