모달인데, 모달이 아닙니다.
모달리스(Modaless), 논모달(Non-modal)이란?
지난 포스트에서 모달(modal)의 종류에 대해 알아보았다. 이번 포스트는 모달인데 모달이 아닌 '모달리스 혹은 논모달'이라 불리는 창에 대해 알아보자.
지난 글은 아래 링크를 클릭
https://brunch.co.kr/@minakoro/157
앞서 정리한 것을 다시 짚어보면, 모달(Modal)은 사용자에게 정보를 보여주거나 추가 작업을 유도하는데 사용하며, 사용자의 주의를 집중시키기 위한 목적을 가진다. 모달 창이 떠 있는 동안은 배경 창(부모 창)의 제어가 불가능한 특징을 가진다. 그런데 외형은 이 모달과 같지만 동작 방식은 모달이 아닌 것이 있는데, 그게 바로 모달리스(Modaless)다.
모달인데, 모달이 아닙니다.
모달리스(Modaless) 혹은 논모달(Non-modal)이란, 형태는 모달과 같지만 동작 방식이 모달이 아닌 것을 말한다. 모달은 창이 열린 동안 기존 창을 제어하지 못하는 반면에 모달리스(논모달)는 창이 열린 상태에서도 기존 창 제어가 가능한 것이다.
지메일에 로그인 후 왼쪽 상단의 새 메일 쓰기 버튼을 누르면 메일 리스트 위로 새 메일 쓰기 창이 하나 더 뜬다. 이 창이 모달리스(Modaless)로 메일 탐색과 메일 작성을 동시에 진행 할 수 있다.
지메일의 새 메일 쓰기 창 ©드로우 나미그럼 언제 어떤 상황에서 써야 할까?
아래 그림처럼 모달은 웹/앱 서비스 내에 매우 많은 부분을 차지하는 구성요소다. 이 다이어그램을 통해 모달과 모달리스의 종류에 대해 파악할 수 있다.
google material design의 항목들을 Modal과 Non-modal(Modaless)로 구분한 다이어그램 그렇다면 어떤 상황에 써야 하는지를 판단하려면 어떻게 해야할까? 그때는 아래의 프레임워크를 참고해서 판단하면 된다. 본문은 영어인데 한국어로 번역해 둔 것을 가져왔다. (출처 표기는 하단 링크로)
UX Plant Framwork참고
https://tech.toktokhan.dev/2021/07/21/about-modal/
늘 해보고 싶었던 B2C 서비스 디자인인데, 혼자서 처음을 시작하려니 알아야 할 것들이 참 많다. 그래도 하고 싶은 일이니까 꼭 잘 마무리되서 서비스 오픈을 할 수 있으면 좋겠다. 오늘도 화이팅이다.
