[UX/UI 디자인] 팝업, 모달, 논모달의 개념 및 비교

RPE-VIEW

- 오늘은 팝업, 모달, 논모달에 대해 얘기해 보겠습니다. 일반인의 관점에서는 팝업이나 모달이나 크게 신경 쓰지 않을 것입니다. 그걸 몰라도 충분히 서비스를 이용가능하기 때문입니다. 그러나 Maker들의 입장에서는 어떤 컴포넌트를 썼느냐에 따라서도 의사소통을 하기 때문에 분명히 고려해야 할 사항입니다. 그러나 모달의 경우 기업마다 부르는 명칭이 다르며, 그 종류 역시 다양하기 때문에 보다 정확히 파악할 필요가 있습니다. 오늘의 아티클의 아티클을 통해 한 번 알아보겠습니다.

아티클 소개

https://brunch.co.kr/@8eaf677337d14e8/14?utm_source=oneoneone

팝업, 모달, 논모달 뭐가 다른걸까?

저자 정보

저자: 비이크

https://be-c.kr/

Be:C | Be Creative Digital Agency

 

- UX컨설팅 & UI디자인, 소프트웨어 개발 및 공급 등, 디지털 온라인 마케팅 및 플랫폼 구축에 필요한 모든 서비스를 제공하는 디지털 에이전시

 

핵심 내용 요약

POP-UP

브라우저 위 또 다른 브라우저입니다. 즉 팝업 브라우저는 메인 브라우저의 서비스와 관계없는 상호 독립적인 브라우저입니다. 때문에 브라우저 옵션을 통해 열리지 않게 설정이 가능합니다.

예시로 게임의 경우 게임 플레이에 영향을 미치지 않고 화면에 뜨는 공지 사항 등이 있으며, 웹 pop-up의 경우 '7일간 다시 보지 않음' 등으로 설정하는 광고 알림 등이 있습니다. 

 

MODAL

메인 브라우저에 종속된 레이어입니다. 모달창을 종료하지 않는 이상 기존 브라우저 화면을 작동시킬 수 없고, 따라서 pop-up처럼 옵션을 통한 차단 설정이 불가합니다. 이를 통해 pop-up과 달리 메인 브라우저와 관계가 있는 것을 알 수 있습니다. 또한 모달은 시작과 엔드포인트가 명확히 있으며, 엔드포인트에 도달할 경우 메인서비스로 복귀합니다.

역시 예시로 게임 중 인게임 화면에서 벗어나 아이템 등을 교체하는 UI 등은 교체 중 인게임 플레이을 할 수 없기 때문에 모달로 분류할 수 있습니다.

 

공통점 및 사용

공통점: 서비스를 사용 중인 사용자들을 의도적으로 방해하여 시선을 사로잡는 역할을 합니다.

사용: 팝업창의 트랙픽 증가 및 차단 설정 가능성 때문에, 꼭 필요한 정보 노출 시 모달창을 사용합니다. 팝업 창의 경우 현업에서 사용 빈도가 점점 감소하고 있습니다.

 

NON-MODAL

모달창을 종료하지 않아도 기존 화면을 작동할 수 있는 모달입니다. 즉 모달과 메인 서비스를 동시에 이용 가능하며, 게임에서 퀵 메뉴 등을 말합니다.

END

아래의 토스의 상단 알림이 팝업, 하단 알림이 모달 등의 예시입니다. 또한 아래의 글을 통해 모달의 종류에 대해 심화학습할 수 있으니 참고 부탁드립니다.

https://brunch.co.kr/@tigrisdesign/3

모달과 팝업, 정확히 알아야 하는 이유