모바일앱을 만들면서 모달이라는 개념을 처음 접하게 되서 어떤 상황에 모달을 쓰고 일반 화면을 쓸지 고민이 많이 되어서 관련 레퍼런스를 한번 정리해봤습니다.
Modal vs Non-Modal
Modal과 Non-Modal 두가지 다 앱 메인화면의 종속된 자식 뷰들이다.
가장 중요한 차이점은 모달화면은 메인화면의 접근을 막지만, 모달화면을 메인화면에 앞에 띄워줌으로 메인화면을 계속 볼 수 있다. 사용자는 모달화면과 상호작용해야 상위화면으로 돌아갈 수 있다.
웹의 모달 화면은 시각적으로 메인화면에 떠있는게 확인이 가능하기에 쉽게 정의된다.
그러나, 모바일의 경우 화면의 크기가 제한되있어서 다수의 모달화면이 기기의 전체화면을 차지하게 된다. 이런 이유에서 Non-Modal과의 구분을 어렵게 한다.
왼쪽 Modal의 경우 메인화면으로 돌아가기 전에 행동을 완성(예시에서는 글쓰기)하거나 취소하기를 요구한다.
오른쪽 Non-Modal은 간단히 상위화면으로 돌아갈 수 있다.
시각적으로 차이나는 부분은 Non-Modal의 경우 탭 바를 확인할 수 있다. 하위 페이지에 있더라도 탭네비게이션으로 이동 가능하다. 반면, Modal의 경우, 사용자가 네비게이션을 사용하기 전에 창을 닫아줘야한다.
이러한 차이를 대부분 앱에서 제대로 구분해 주지 않고 있다.
(관련 reference : Tab Bars are the new Hamburger Menus)
왜 모달을 사용해야할까?
모달화면은 간단한 문제를 해결해 준다.
사용자들은 쉽게 주의가 산만해지기 때문에 때로는 모든 집중력을 끌어내야한다. 모달 화면은 하나의 일에 계속 집중할 수 있게 해준다.
“Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view” — Apple
언제 모달을 사용해야할까?
상황마다 Modal과 Non-Modal을 구분하기는 쉽지 않지만, 필자는 개인적인 규칙을 하나 제안한다.
Use Modal Screens for self-contained processes, use Non-Modal Screens for everything else.
self-contained process는 모든 행위가 명확하게 시작(start)과 끝(end-point)이 있는것이다. 이 행위는 제한된 시간동안, 일반적인 사용자 흐름에서 벗어나 그 행위를 강제 시키고 다시 시작한 곳으로 데려간다.
“Critical information that requires a specific user task, decision, or acknowledgement” — Google
위와 같은 경우 모달을 사용하라고 구글은 얘기하고 있다.
실제로는 Modal과 Non-Modal은 종종 구분하기 애매하다.
예를들면, 비록 진행상황이나 dialog가 아님에도 이미지를 전체로 보는것은 대부분 앱에서 모달로 만들어진다.
또한, 모달화면은 종종 특별한 경우 집중하게 만들기 위해서 사용된다. 어떤 상세페이지의 경우 수정이나 댓글다는 행위는 아니지만, 모달을 사용한다.
그러나, 유저가 더 자세한 정보를 얻기 위해서 네비게이팅 하고 다양한 행동들이 추가적으로 필요한 경우 명확한 endpoint가 없기 때문에 main flow의 일부가 될것이다. 그러므로 이경우 Non-Modal이다.
Minimize the use of modality. Generally, people prefer to interact with apps in nonlinear ways. Consider creating a modal context only when it’s critical to get someone’s attention, when a task must be completed or abandoned to continue using the app, or to save important data. — Apple
어떻게 모달을 사용해야 할까?
- 상단 네비게이션 바에 항상 닫기 버튼을 보여줘라(혹은 취소, 버리기, 최소화 등)
- 닫기 버튼의 경우 대부분 화면 상단 왼쪽에 위치한다.
- 저장 버튼은 화면 오른쪽 상단에 기본적으로 위치하지만, 화면이 큰 기기의 경우 작동이 안될 수 도 있다. 그렇기 때문에 개인적으로 화면 최하단에 배치하는걸 추천한다.
중첩된 모달과 애니메이션에 대한 내용도 있었지만, 이 부분은 다음에 필요할때 참고할 예정이다.
위의 내용을 모든 부분 적용하진 않았지만, 프로젝트에서는 글쓰기화면과 노래추천 기능은 확실한 endpoint가 있다고 판단해 모달로 구현했다.
Reference
