팝업, 모달, 논모달 뭐가 다른걸까?
"팝업 말고 모달로 처리할게요."
"이건 모달 말고 논모달로 처리하는 게 어떨까요?"
프로젝트 진행 중 이런 요청 사항을 들어본 경험이 있으신가요?
대부분의 디자이너들이 가장 많이 헷갈리는 개념 중 하나가 팝업과 모달이라고 하는데요. 오늘은 이 팝업, 모달의 차이가 무엇인지. 그리고 더 나아가 논모달은 또 무엇인지 알아보려고 합니다.
1. 팝업과 모달
먼저 팝업과 모달의 공통점은 무엇일까요? 이 둘은 서비스를 사용중인 사용자들을 의도적으로 방해하여 시선을 사로잡는 역할을 합니다. 하지만 이를 제외하면 이 둘의 사용방식과 매커니즘은 완전히 다릅니다.
1) 팝업창의 특징
- 브라우저 위에 또다른 '브라우저'를 띄우는 방식
- 기존에 열려있던 브라우저와 독립적인 관계
- 브라우저 자체 옵션을 통해 열리지 않게 설정 가능
2) 모달창의 특징
- 브라우저 위에 '레이어'를 띄우는 방식
- 기존에 열려있던 브라우저와 종속관계로, 모달창을 종료하지 않는 이상 기존 화면을 작동할 수 없음
- 브라우저 자체 옵션을 통해 설정 불가
3) 팝업 VS 모달
"그럼 둘 중 하나만 써야 한다면 무엇을 쓰는 게 좋을까요?"라고 묻는다면, 당연히 '모달' 이라고 답할 것입니다. 현재 팝업창은 많이 사용하지 않는 추세입니다. 그 이유는 위 팝업창 특징 중 하나인 '브라우저 자체 옵션을 통해 컨트롤이 가능'하다는 점 때문인데요. 팝업창이 서비스의 트래픽을 증가 시키는 원인이 되기도 하며 메모리를 잡아먹는 일도 있기 때문에 브라우저 자체에서 '팝업창 차단 기능'을 지원하고 있습니다. 또 대부분의 사용자들은 원치 않는 광고창 또는 악성 팝업을 방지하기 위해 이 기능을 사용하고 있습니다. 때문에 사용자에게 꼭 필요한 정보를 노출 시켜야 할 때는 팝업이 아닌 '모달창'을 사용해야 합니다.
2. 논모달은 또 뭐지?
논모달은 말그대로 모달이지만 모달이 아닌 것입니다. 무슨 말이냐고요? 모달과 동일한 모습과 기능을 하고 있지만 딱 한 가지 다른 특징이 있다는 뜻이죠.
위에서 모달의 특징 중 '모달창을 종료하지 않는 이상 기존 화면을 작동할 수 없다'는 특징이 있었죠? 이와 반대로 논모달은 모달창을 종료하지 않아도 기존 화면을 작동할 수 있습니다!
논모달의 대표적인 예시인 Gmail을 살펴보면 완벽히 이해가 될 것입니다. 구글 메일에서 ‘메일 쓰기’를 클릭하면 우측 하단 논모달에서 메일 작성이 가능함과 동시에 기존 화면인 메일함도 클릭이 가능합니다. 메일 작성창이 열려있는 상태로 다른 메일도 탐색이 가능한 것이죠.
모바일에서 사용되는 스낵바도 논모달이라고 할 수 있습니다. 기존 화면 위로 새로운 레이어가 뜨지만 기존 화면도 탐색할 수 있으니까요!
3. 모달의 종류
원본 : https://www.nngroup.com/articles/popups/위에서 말한 것 외에도 모달과 논모달의 백그라운드가 어둡게 딤 처리되었는지 여부에 따라 라이트 박스와 논라이트 박스로 나누어 지기도 합니다. 이를 모두 고려하여 '닐슨 노먼 그룹'에서 모달의 종류를 하나의 이미지로 정리해주었는데요. 개념이 헷갈릴 때 참고하면 좋을 것 같습니다.
마치며
지금까지 흔히 헷갈려 하는 개념인 팝업과 모달 그리고 논모달까지 알아보았습니다. 모달은 잘 쓰면 편리하고 유용하지만 절대 남용해서는 안되는 요소 중 하나 입니다. 모달은 의도적으로 사용자의 흐름을 방해하고 이목을 집중 시키기 때문이죠. 따라서 꼭 필요한 경우에만 '적절한' 모달을 '신중히' 사용할 수 있기를 바랍니다.
출처
모달과 팝업, 정확히 알아야 하는 이유
https://brunch.co.kr/@tigrisdesign/3
이거도 모달, 저거도 모달, 이게 모람
https://tech.toktokhan.dev/2021/07/21/about-modal/
Modality Is the One UX Concept That Most Designers Don’t Fully Understand
