모달의 굴레에서 벗어나는 법
Source
중첩 모달(nested modal)이란?
모달(modal)은 화면의 주요 컨텐츠를 가린 후 사용자로 하여금 특정 행동을 하도록 강요하는 다이얼로그(dialog, 대화상자)를 의미한다. 중첩(nested) 모달은 두 개 이상의 모달이 쌓인 형태 혹은 상황을 의미한다.
중첩 모달을 줄여야 하는 이유
1. 사용 흐름이 복잡해져 길을 잃게 된다.
사용자의 사용 경험의 통제권은 반드시 사용자에게 있어야 한다. 중첩 모달은 서로 다른 정보들이 쌓여감에따라, 사용자가 '비상구'(emergency exit)을 찾지 못하게 만든다. 일반적으로 중첩 모달에 묻혀버린 사용자는 모달을 하나하나 다 클릭해가면서 다시 원하는 위치로 되돌아가야한다. 이러한 사용 흐름은 사용상 관련이 별로 없는 화면들을 보도록 강요하게 되면서 복잡하고 불필요한 경험을 하도록 만든다.
비상구(emergency exit): 사용자가 실수로 원치 않은 상태로 진입했을 때, 원래의 사용 흐름으로 돌아갈 수 있는 인터페이스를 의미함
2. 불확실성을 야기한다.
중첩모달은 화면에 복잡한 층(layer)을 만들게 되고, 이 각각의 층들이 어떤 관계 혹은 반응을 발생시킬지 모르기 때문에 사용자가 예측을 하지 못하게 만든다.
예를 들어, 사용자가 첫 번째 보라색 배경의 게시글을 클릭한다.
[첫 번째 모달 발생] 게시글이 브라우저에서 모달 형태로 뜨게 되고, 사용자는 게시글에 대한 상세 정보를 조회하기 위해 우측의 버튼을 클릭한다.
[중첩 모달 발생] 게시글 조회 모달 위에 게시글 상세 정보를 띄우는 모달이 나타난다.
[흐름 꼬임 발생] 혼란한 사용자는 브라우저의 '뒤로 가기' 버튼을 눌렀으나, 게시글 상세 모달은 남아있고 게시글 조회 모달은 사라졌다. 이런 상황이 발생하면, 사용자는 해당 모달을 꺼보려고 흐림(dimmed) 처리된 배경을 클릭하거나 모달 닫기 버튼을 찾는 등의 행위를 해야한다.
3. 공간 낭비가 발생한다.
블로그 글이 이관되었습니다. 전문은 아래에서 확인해주세요.
https://mustache-pm.blog/escaping-nested-modals-ux-patterns/