모달과 팝업, 정확히 알아야 하는 이유
한눈에 보는 UI 용어 A to Z(2)
배경
대부분의 디자이너가 가장 많이 헷갈리는 (UX) 개념 중 하나는 모달과 팝업입니다.
팀에서도 이 개념 하나로 뜨거운 토론? 이 벌어졌는데요. 실제로 기업마다 다르게 표현하다 보니 자료도 찾으면 찾을수록 끝없이 나왔습니다. 방대한 이 내용을 어떻게 정리할까 고민하다가 가이드로 가장 많이 참고하는 구글 머터리얼 가이드를 기준으로 정리했습니다.
※ 구글에서 기존에 만든 Google material design modal dialog 그래프와 Google material guide2를 참고했습니다. (현재 m3 버전까지 나온 상태이나, 모달에 관련해서는 상세하게 나오지 않아 2를 참고하였습니다.)
의미 정의
나무 위키 기준
・팝업 Popup : 팝업창은(Pop)하고 튀어나오는(up) 웹 페이지 표시 방법을 가리킵니다. 새 창을 표시하기 위해 기존 페이지 전환 방식이 아닌, 새로운 웹 브라우저 창을 하나 더 추가시키는 기능이라고 할 수 있습니다. 주 용도는 광고, 알림, 새로운 정보 갱신 등이 있습니다. 다만, 팝업은 트래픽을 증가시키기도 하고 메모리를 차지하는 일도 있기 때문에 요즘은 웹 브라우저에서 디폴트 값으로 팝업창 차단 기능을 지원합니다. 최근에는 새 창을 띄우지 않는 모달 창을 주로 사용합니다.
・모달 Modal : 웹에서 새 창을 띄우는 팝업창과는 달리 같은 브라우저 내부에서 상위 레이어를 띄우는 방식을 사용하는 창입니다. 모달 창이 띄워진 경우, 이 창을 종료하지 않는 이상 원래 창 화면을 작동할 수 없습니다. 따라서, 사용자의 이목을 집중시키기 때문에 신중히 사용할 필요가 있습니다. 특히, 애플에서는 모달을 최소화하여 사용하라고 이야기합니다. (하단 - 해외 아티클 참고)
・논 모달 Non-Modal : 모달과 내부에서 상위 레이어를 띄우는 방식은 동일합니다. 그러나 모달과 다르게 논 모달은 새로운 상위 레이어와 기존 페이지 동시에 작동할 수 있습니다.
현재
티그리스 홈페이지 팝업 화면결론적으로, 현재 팝업은 많이 없어지는 추세이며 대부분 모달과 논 모달 혹은 모달과 페이지로 표현하고 있습니다. 사실 모달이라는 용어 자체도 기업별로 다르게 사용하기도 합니다.
구글은 다이얼로그라는 용어를 사용하지만, 애플은 모달리티라는 용어를 사용합니다. 이러한 큰 기업들도 용어를 다르게 표현하다 보니 각 기업별로 통일해서 소통하는데 문제가 없다면 용어를 다르게 표기하는 건 문제 되지 않는 것 같습니다.
모달의 종류
출처 : 닐슨 노먼 그룹닐슨 노먼 그룹에서 제공한 그래프를 보면 크게 모달과 논 모달 2가지 형태로 나눠집니다. 모달은 유저가 기존 페이지를 작동시킬 수 없습니다. 모달 창에 뜬 행동을 완료해야 기존 페이지를 작동시킬 수 있습니다.
반면, 논 모달은 유저가 기존 페이지를 작동할 수 있습니다. 예를 들면, gmail에서 메일 쓰기를 클릭 시 오른쪽 하단으로 메일 쓰기 화면이 생깁니다. 레이어가 새로 띄워졌지만 기존 페이지(메일 리스트) 화면도 동시에 작동이 가능합니다. 이러한 화면을 논 모달이라고 부릅니다. 백그라운드는 어둡게 딤 처리된 화면인 경우도 있고, 딤 처리가 되지 않은 화면인 경우도 있습니다. 두 가지 경우 모두 모달과 논 모달 사용이 가능합니다.
출처 : Google material design modal dialog모달과 논 모달의 개념을 위에서 한 번 보고 구글에서 제공한 구글 머터리얼 디자인 모달 다이얼로그 그래프를 함께 보면 이해가 조금 더 쉽습니다.
오버레이 타입인 모달과 논 모달로 구분이 되고, 그 안에서 모달 혹은 논 모달이 가능한 형태들이 구분이 됩니다.
1) Dialog 다이얼로그(모달)
- Alert : 경고 대화 상자
- Simple : 간단한 대화 상자
- Confirmation : 확인 대화 상자
- Full-Screen : 전체 화면 대화 상자
2) Navigation Drawer : 내비게이션 드로워(모달 or 논 모달 혼용)
- Side : 측면 내비게이션
- Bottom : 하단 내비게이션
3) Sheet : 시트(모달 or 논 모달 혼용)
- Side : 측면 시트
- Bottom : 하단 시트
4) Snackbar : 스낵바(논 모달)
Banner : 배너
Menu : 메뉴
Tooltip : 툴팁
모달의 종류
UI용어는 1편에 이어 31번부터 시작합니다
31) Scrim
레이어 하단에 깔리는 배경으로 주로 어둡게 하거나 투명도를 조절해야 합니다.
비슷한 용어로 딤드(Dimmed)라고도 표현합니다.
Dialog
32) Alert Dialog
경고 대화 상자는 긴급 정보, 세부 정보를 표시합니다.
33) Simple Dialog
단순 대화 상자에는 선택 시 즉시 적용되는 항목 목록을 표시합니다.
34) Confirmation Dialog
확인 대화 상자를 사용하려면 대화 상자를 닫기 전에 사용자가 선택 사항을 확인해야 합니다.
35) Full-Screen Dialog
전체 화면 대화 상자는 중요한 작업이 포함된 전체 화면을 띄웁니다.
Navigation
36) Side Navigation
탐색 창은 대상 및 계정 전환과 같은 앱 기능에 대한 액세스를 제공합니다. 화면에 영구적으로 표시되거나 탐색 메뉴 아이콘으로 제어할 수 있습니다.
37) Bottom Navigation
하단 앱 바의 메뉴 아이콘에서 접근성을 높이기 위해 측면이 아닌 화면 하단에서 열립니다.
하단 햄버거 메뉴라고도 불립니다.
Sheet
38) Side Sheet
사이드 시트는 2가지 종류입니다.
・표준 사이드 시트(왼쪽) : 주로 태블릿, 데스크톱에서만 사용하며 화면의 주요 콘텐츠 보완, 상호작용이 가능합니다. (ex. 필터, 추가 콘텐츠 표시)
・모달 사이드 시트(오른쪽) : 모바일에서는 제한된 화면 공간으로 인해 표준 사이드 시트 대신 모달 사이드 시트를 사용합니다.
39) Bottom Sheet
하단 시트는 3가지입니다.
・표준 하단 시트(왼쪽) : 화면의 주요 콘텐츠를 보완하는 콘텐츠를 표시합니다.
・모달 하단 시트(오른쪽) : 하단 모달은 기존 화면과 관련된 추가 항목을 제공하거나 다양한 메뉴를 제공하는 경우 사용합니다. 기본 콘텐츠는 모달 창을 닫은 후 이동합니다.
40) Bottom Sheet
・확장 하단 시트 : 사용자가 주요 기능이나 작업에 액세스 하기 위해 확장할 수 있는 축소된 작은 표면을 제공합니다.
41) Snack bar
스낵바는 앱이 수행했거나 수행할 프로세스를 사용자에게 알려주고 일시적으로 화면 하단에 나타납니다.
42) Menu
메뉴는 사용자가 버튼, 작업 또는 기타 컨트롤과 상호 작용할 때 나타납니다.
다양한 요소, 가장 일반적으로 아이콘 버튼, 버튼 및 텍스트 필드에서 열 수 있습니다.
43) Banner
배너는 중요하고 간결한 메시지를 표시하고 사용자가 처리(또는 배너 해제)할 작업을 제공합니다.
해제하려면 사용자 작업이 필요합니다.
44) Tooltip
사용자가 요소 위에 마우스를 올리거나, 초점을 맞추거나, 탭할 때 정보 텍스트를 표시합니다.
툴팁은 이전 1편에도 등장했지만, 구글 모달 다이얼로그 그래프에 맞게 다시 한번 등장합니다.
페이지 이동
모달로 띄우기에 내용이 많고 사용자가 유심히 봐야 하는 내용은 주로 페이지로 이동합니다.
제품 페이지 혹은 법적 고지를 하는 내용 등 중요한 내용들이 이에 해당합니다.
마치며
항상 헷갈렸던 팝업과 모달 용어를 정리했습니다.
특히 모달(모달리티)의 개념은 오늘날 많은 앱들이 가장 많이 무시하는 UX 개념 중 하나라고 하는데요.
대부분 디자이너들이 구글 머터리얼 가이드와 애플 휴먼 가이드의 많은 양을 완벽하게 숙지하지 못했기 때문이 아닐까 생각했습니다.
이 글을 적는데 많은 도움을 받은 미디엄 글에서 작가님의 말이 생각납니다. 작가 Fabian Sebastian의 말에 의하면 많은 디자이너들이 직감을 기반으로 제품을 디자인한다고 합니다. 그리고 이젠 직감보다 공통 표준을 아는 것이 중요하다고 말합니다. 정확한 개념을 알아야 필요한 상황에 따라 그것을 깰 수도 있으니까요.
이번 모달을 시작으로 앞으로 구글 머터리얼 디자인과 애플 휴먼 가이드의 정확한 용어와 개념을 공부해야겠습니다.
이 글을 통해 모달과 팝업에 대해 조금이나마 도움이 되셨기를 바랍니다 :)
긴 글 읽어주셔서 감사합니다.
참고자료
국내
https://yozm.wishket.com/magazine/detail/1272/
https://tech.toktokhan.dev/2021/07/21/about-modal/
국외
https://uxplanet.org/modal-vs-page-a-decision-making-framework-34453e911129
1편
https://brunch.co.kr/@tigrisdesign/2
제작. 티그리스 디자인팀
궁금한 점이나 다양한 의견은 아래 메일로 연락 주세요.
design@tigrison.com
