전통적으로 모달이라함은 DOM 요소를 새로운 창처럼 꾸며서 화면상에 보여주는 것입니다. 그냥 꾸며진 DOM에 불과해서 미니 팝업처럼 보이지만 사실은 그냥 DOM 요소일 뿐이지요. 예전부터 웹 기반에서도 브라우저 히스토리의 뒤로가기/앞으로 가기와 따로 놀기 때문에 사용성에 대해서 문제는 계속 제기되어 왔지만, 자유자재로 요리할 수 있고 사이트 전체적인 룩앤필과도 매칭할 수 있어서 요즘은 안 쓰는 웹사이트를 찾기가 더 힘들 정도입니다.

모달의 예시. 출처:w3c school
< 모달의 예시. 출처:w3c school >

UX Problem on Mobile

모달창이 브라우저 히스토리와 따로노는 것은 사실 웹 상에서는, 넓은 오버레이(모달창 뒤에 반투명 검정으로 배경을 가려주는 레이어) 영역을 클릭해서 닫거나 큼직한 닫기버튼(X버튼)을 통해서 생각보다 나쁘지 않게 닫을 수 있었습니다. 그게 아니더라도 모달창에는 맥락상 필요한 정보가 들어갈 뿐 페이지의 핵심적인 내용이 담기지는 않았기에, 뒤로가기 했을 때 사라져도 큰 문제는 없었지요. 까짓거 사라지거나 말거나

그런데 모바일은 어떻게 하여도 모달창에서 오버레이 영역을 확보하기가 힘듭니다. 또한 웹에서는 흐름상에서 잠깐 나왔다가 닫히는 그 시각적 모달창의 무게가 모바일에서는 항상 전체화면에 가깝기 때문에 거의 페이지가 전환된 느낌처럼 무게있게 다가옵니다. 게다가 X버튼이 전통적인 좌상단/우상단으로 가게되면 파지한 손에서도 거리가 상당히 떨어지게 됩니다(잠깐 나왔다가 사라지는 것 치고는 닫기 과정이 좀 빡세지지요).

모바일에서의 모달창
< 모바일에서의 모달창 >

무엇보다 심각한 것은 모바일에서의 모달창을 닫는 경험은 웹에서의 닫는 버튼과도 동떨어져있습니다. 안드로이드의 경우에 모달이든 경고창이든 네이티브든 웹이든 셀렉트 옵션이든 뒤로가는 버튼을 누름으로써 닫는 게 일상적이며(뒤로가기 버튼은 모든 동작의 취소), iOS의 경우에는 안드로이드만큼 절대적이지는 않지만 어쨌든 사파리의 뒤로가기 버튼과 엣지 스와이프를 통한 뒤로가기가 주요한 경험이된다는 것이 문제지요.

Solution

모바일에서 뒤로가기를 누르는 경우 현재의 모달을 취소하는 액션으로써 닫히도록 처리를 하면 됩니다. 브라우저의 뒤로가기와 모달의 닫기를 연동하는 것이 문제의 해결점입니다. 닫기 버튼에도 단순히 모달요소를 가리거나 삭제하는 것을 바로 연결하지 말고, 브라우저의 뒤로가기를 발생시키도록 하고, 뒤로가기 이벤트에 실제 닫는 행위를 담아두면 될 것입니다.

아이폰에서 뒤로가기를 통한 닫기 예시, 엣지 스와이프를 통해서도 가능하다
< 아이폰에서 뒤로가기를 통한 닫기 예시, 엣지 스와이프를 통해서도 가능하다 >

Implementation

기존에는 #(hash)를 이용하였지만, 모바일 퍼스트로 하면서 pushState라는 HTML5 기술을 사용해보도록 합니다.

  1. 모달창이 띄워질 때 pushState를 발생시켜서 history에 모달의 변화를 추가
  2. 브라우저 뒤로가기/앞으로가기는 이벤트가 없으므로 location.href의 변화를 인지
  3. location.href의 주소형태에 따라 모달창인지, 리스트인지 구분
  4. 모달창인 경우에 모달을 닫아주는 액션 실행

Demo

아래는 자바스크립트로 간단하게 짠 모달의 닫기와 브라우저 히스토리를 연결한 예시입니다. 아래에서 모달창 열기 버튼을 누른 후에, 뒤로가기를 눌러서 닫는 동작을 해볼 수 있습니다.

Showcase

타일의 카드뉴스 둘러보기 페이지는 부담없이 각각의 카드를 열어볼 수 있도록, 모달의 형태로 컨텐츠가 제공되도록 하였습니다. 사용성 증대를 위해서 이 스크립트도 적용되어 있기에 모바일에서 뒤로가기 버튼에도 잘 반응합니다.

실제 작동하는 예시 : https://tyle.io/explorer