모바일에서의 모달 닫기 UX에 대해

UI를 개발하면 항상 마주하는 녀석이 있습니다.

모달과 팝업

화면의 레이어를 무시하면서 나타나는 이 UI들은 디자인적 요소 외에도 UX적으로 고려해야 할 아주 중요한 요소가 있습니다.

바로 어떻게 닫을 것인가에 대한 처리입니다.

1. 모달을 닫는 방법#

모달 및 팝업(이하 모달로 통일하여 칭합니다)의 닫기 처리에 대해서 안드로이드/iOS 유저별로 대중적으로 학습되어 있는 상태가 다르기 때문인데요.

그 전에 우선 모바일에서 모달을 닫는 방법을 보면 흔히 아래 3개 정도가 있습니다.

1과 2는 애플리케이션에서 제공하는 기능이기에 OS환경이 다르더라도 웹뷰에서 동일한 로직으로 처리 가능하여 크게 신경쓸 필요는 없지만

문제가 되는 것이 3입니다. OS별 '뒤로가기' 기능에 대해 관점이 다르기 때문인데요.

뒤로가기에 해당하는 기능인 안드로이드의 하드백키와 iOS의 스와이프백이 대중적으로 녹아있는 모습을 보면

안드로이드 유저는 하드백키를 누르면 모달은 닫고 페이지는 유지하는 것이 학습되어 있고,

iOS 유저는 스와이프백을 하면 모달도 닫고 페이지까지 같이 뒤로가는 것이 학습되어 있습니다.

💡 물론 네이티브단에서 모달이 떠 있을 때에는 스와이프백 동작 자체를 허락하지 않게 하는 케이스도 있으나, 여기서는 순전히 웹뷰의 입장에서만 고려합니다.

즉, 우리는 웹뷰에서 모달을 구현할 때 유저의 경험을 존중하여 두 OS를 분기하여 로직을 작성해주어야 할 필요가 있습니다.

모달을 띄울 때 ‘상태’로 처리하는 것은 iOS/안드로이드 모두 똑같지만 안드로이드의 경우에는 히스토리를 하나 쌓아두어야 하는 셈이죠.

따라서 이 로직을 공통적으로 처리하기 위해서 전역상태를 통해 모달 리스트를 관리하되, 안드로이드인 경우에만 pushState를 통해 보이지 않는 히스토리를 하나 추가해줍니다.

그리고 브라우저 뒤로가기 버튼이나 history api의 back으로 인해 pushState되었던 히스토리가 스택에서 제거되고

동시에 이로 인해 트리거될 popstate 이벤트를 두어 전역상태 모달 리스트에서 가장 마지막에 떠있는 모달을 제거하는 방식으로 로직을 구성합니다. 

이미 구현해본 사람들에게 크게 어려운 내용은 아닐 수 있으나, 웹뷰를 다뤄본 경험이 없는 프론트엔드 엔지니어라면 놓치고 지나갈 수 있는 부분인데요.

설계 초반에 반드시 공통 로직화하여 잡고가야 프로젝트가 진전되었을 때 피곤하지 않은 UX 기능이 되므로 꼭 참고하시길 바랍니다. 

저또한 현업에서 최근 모달UX 개선에 대한 필요성을 느껴 위 로직을 적용 시도하고 있는데 파일체인지가 상당하여 검증에 신중함을 기하고 있습니다. 최초에 설계를 잘해두었으면 어땠을까? 하는 생각이 들곤하네요 ㅎㅎ

이만 마무리하겠습니다.