Pop-up / Modal / Non-Modal

팝업: 화면 위에 새로운 화면을 띄우는 것

 1. 기존 브라우저 위에 독립적인 브라우저를 갖는 것 (새로운 레이어가 올라가는 것)

 2. 브라우저 옵션에서 컨트롤 할 수 있는 것

 

모달: 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것

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

❗️주의. 모달(Modal)은 UI의 이름이 아니라, UI를 분류하는 기준 중 하나

모달에는 시작(모달을 진입하게 하는 컴포넌트)과 끝(Cancel, Send, Save, OK, X etc.)이 존재한다.

따라서, 모달(자식)에 진입한 사용자는 서비스 흐름에서 벗어나, 모달 내 컨텐츠에 집중한 후, 모달을 벗어나는 순간 다시 원래 컨텐츠(부모)의 위치로 돌아갈 수 있어야 한다.

 

논모달: 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것

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

보통 모달은 부모 화면을 사용자가 컨트롤할 수 없고, 모달 내 컨텐츠를 완료하거나 닫아야 다시 부모 화면에 접근할 수 있는 반면에, 

논모달은 부모 화면을 사용자가 컨트롤 할 수 있다.

 

 

모달-논모달의 차이점을 쉽게 아래의 도표로 이해할 수 있다.

google material design의 항목들을 Modal과 Non-modal로 구분한 다이어그램

 

 

 

---

참조한 문서. 구글 머터리얼 디자인, 똑똑한 개발자