모달을 써야 할까 페이지를 써야 할까?
상세 페이지를 Full Screen Modal로 사용하게 된 이유
들어가며
Modal(모달)은 UX 디자인에서 가장 많이 사용하는 컴포넌트 중 하나이다.
모달은 사용자의 시선을 집중시키기 위할 때 사용하는 컴포넌트로 예를 들어 메일을 삭제하는 것과 같이 유저의 특정 행위 이후에 기존의 데이터를 더 이상 복구하거나 볼 수 없는 경우 모달을 사용하여 사용자에게 다시 한번 행위의 대한 진행 여부를 물어본다.
네이버 메일에서 휴지통을 비우려 할 때 나오는 모달모달은 단순히 유저 액션에 대한 진행 여부, 알람 등을 제공하는 것 이외에도
디테일한 정보를 제공하는 경우에도 사용된다.
네이버 스토어팜에서 제품 정보를 모달로 제공하는 화면사실 일반 유저들은 모달과 팝업을 구별하지 못할 수 있다.
그리고 디테일한 정보들이 페이지로 제공되는지 모달 형태로 제공되는지에 아예 관심이 없을 수 있다.
하지만 내가 이 정보를 보고 탐색하는 것이 편한 가는 유저에게 중요하다.
그래서 UX 디자이너는 정보 전달에 있어서
1) 페이지 형태로 정보를 제공할 것인가
2) 모달로 제공할 것인가
3) 팝업으로 제공할 것인가
를 고민하며 Flow를 설계/디자인한다.
처음 NFT의 디테일 정보를 제공함에 있어 나는 페이지 형태로 UX 디자인을 하였다.
디테일한 정보는 알람 성으로 보여주는 정보가 아니라 서비스의 주요 흐름에 해당되는 부분이기 때문이다.
하지만 무한 스크롤로 유저가 여러 NFT들을 탐색하고 클릭하여 디테일한 정보를 확인하고 이전 단계로 돌아감에 있어 로딩 속도라는 문제가 발생하였다.
이를 해결하기 위해서는 페이지가 아닌 모달 형태로 정보를 제공하거나 페이지 네이션을 통해 무한 스크롤을 막는 방법이 옵션으로 화두 되었는데, 나는 이 문제를 해결하기 위해 모달에 대해 다시 한번 정의하고 다른 서비스들을 참고하여 해결 방안을 마련하기로 하였다.
그렇다면 나는 NFT 디테일 페이지를 최종적으로 어떻게 구성했을까?
오늘은 이 문제가 발생했던 배경부터 해결 과정까지를 차근차근 적어보려 한다.
1. ISSUE 발생
정보를 확인하고 다시 이전 페이지로 돌아가는데 내가 봤던 페이지가 바로 나오지 않는다...(로딩 시간 이슈)
서비스가 아직 준비 중이기 때문에 우리의 서비스를 첨부할 수는 없지만
이와 관련한 레퍼런스로 이슈를 설명해 보려 한다.
1) 디테일 페이지를 페이지 형태로 디자인할 때
처음 NFT의 상세 정보를 디자인할 때 페이지를 사용했다. 제품의 정보는 유저 플로우에서 중요한 정보이기에 모달로 제공하는 것이 적합하지 못하다고 생각했고 모바일의 경우 모달 창에 정보가 많기 때문에 스크롤이 발생하기 때문이었다.
하지만 여기에 로딩 문제가 발생하게 된다.
Rarible을 보면 라리블 또한 NFT 상세 정보를 페이지로 제공한다.
이로 인해 발생하는 이슈가 우리 서비스에도 동일하게 발생했다.
Rarible의 탐색 Flow유저 플로우(User Flow)
1. 유저가 무한 스크롤로 여러 NFT를 탐색하다 마음에 드는 NFT를 발견한다.
2. NFT를 클릭하여 디테일 페이지에서 정보를 확인한다.
3. 정보 확인 후 다시 이전 검색 화면으로 돌아온다
위 플로우 중 3번에서 이슈가 발생하는데, 유저가 이전 화면으로 돌아갈 때 빠르게 유저가 보았던 페이지로 위치로 돌아오지 못하고 로딩 시간이 걸리는 것이다. 무한 스크롤 형식으로 많은 콘텐츠들을 지나왔기 때문에 전체 데이터를 먼저 받아 온 후 위치를 찾는 과정에 상당 시간이 소요되는 것이다.
이 시간을 기다리지 못하고 유저가 다른 구간을 클릭하거나 특정 행위를 하면 페이지는 다시 처음으로 돌아가 유저가 이전 위치를 스스로 찾아가야 하는 문제가 생긴다.
조금만 로딩 시간이 걸려도 답답함을 느끼는 유저가 이 로딩 시간을 견딘다는 것은 어려우며 이 행위를 통해 실제 수익이 발생하기 때문에 이 로딩 시간에 대한 이슈를 가벼이 넘길 수 없었다.
2) 모달로 구성할 때
AZUKI의 경우에는 제품 정보를 모달로 제공한다.
모달로 제공하기 때문에 유저는 모달 창을 껐을 때 바로 이전 클릭했던 위치로 바로 돌아갈 수 있다.
모달은 페이 지위에 새로운 레이어를 더 올리면서 정보를 보여주는 형식이기에 해당 위치를 벗어나지 않기 때문이다.
AZUKI NFT 탐색 유저 플로우모달을 사용할 경우 빠르게 유저가 자신이 들어왔던 위치로 빠르게 돌아갈 수 있다는 장점이 있으나
많은 양의 정보를 모달로 제공하는 것이 맞는 것인가?라는 것과 PC에서는 괜찮다고 하더라도 모바일에서도 모달 형태로 보여주는 것이 과연 맞는 것인가라는 질문에 대한 명확한 해답을 얻지 못했다.
2. 개념 정리
- Modal(모달)이란?
Modality - Human Interface Guidlines
https://developer.apple.com
Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. Presenting content modally can:
- Help people focus on a self-contained task or set of closely related options- Ensure that people receive and, if necessary, act on critical information
모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면 전환 기법으로 이목을 집중시켜야 하는 경우 화면을 다른 화면 위로 띄워 표현하는 방식이다.
"Modality creates focus by preventing people form doing other things until they complete a task or dismiss a mesage or view"
모달은 유저를 하나의 콘텐츠에 집중시켜 다른 테스트를 수행하지 못하도록 하고 해당 모달 창을 끄기 위해서는 Clsoe 버튼을 누르거나 어떠한 화면을 누른다거나 하는 식의 특정 선택을 해야 한다.
중요한 User Flow에서는 모달을 사용하지 않으며 무언가를 추가하거나 수정, 코멘트 작성 등 특정 타임/구간에 제한된 액션을 하는 곳에서 모달을 사용한다. 따라서 모달은 정보의 흐름을 가지고 화면을 이동한다기보다 꼭 이목을 끌어야 하는 화면에서 사용한다.
그래서 모달로 보이는 화면은 되도록 단순하고 사용자가 빠르게 처리할 수 있는 내용을 표현하는 것이 좋다. 서비스의 흐름에 벗어나는 것이 아니라 주요 서비스 흐름의 일부분은 페이지를 사용해야 한다.
이러한 모달을 자주 사용하다 보면 유저는 온전히 서비스에 집중하지 못하고 피곤함을 느낄 수 있다. 또한 특정 이슈에 이목을 끌기 위해 사용하는 모달의 기능을 잃게 만들 수 있다. 실제 유저들은 팝업과 모달을 구별하지 못하기 때문에 모달 또한 지속적인 광고성/스팸 팝업으로 인식하여 정보를 보지 않고 닫을 수 있다.
"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은 특정한 경우 외에 모달을 최소화하는 것을 권장한다.
*함께 보면 좋은 글
https://yozm.wishket.com/magazine/detail/706/
3. 그렇다면 언제 모달과 페이지를 사용해야 할까?
Modal을 사용해야 하는지 페이지를 사용해야 하는지에 대한 고민은 비단 나만의 고민이 아닌 여러 UX 디자이너가 공통적으로 갖게 되는 질문이다. 이에 UX Planet은 아래와 같은 가이드를 제공한다.
*원본은 https://uxplanet.org/modal-vs-page-a-decision-making-framework-34453e911129
이나 한글로 번역해주신 글의 이미지를 가져왔습니다.
이미지 출처 https://tech.toktokhan.dev/2021/07/21/about-modal/위의 가이드라인대로 생각해보면 NFT 디테일 페이지는 페이지로 구성하는 것이 맞다.
하지만 페이지를 그대로 쓸 경우 로딩 속도 문제는 여전히 해결되지 못한다.
그렇다고 모달로 구성하게 된다면 모바일에서 문제가 발생하게 되는데 우리 팀은 PC에서 표현하는 모달을 모바일에서는 bottom sheet로 표현하기로 규정해 놓았기 때문에 많은 양의 정보를 담게 되어 바텀 시트 안에 스크롤이 생기게 된다. 또한 바텀 시트가 화면 전체에 차게 되는 경우가 발생하게 된다.
이럴 경우 이게 과연 모달이라고 할 수 있을까?라는 또 다른 질문이 생기게 된다.
4. 결론
- PC는 Modal, Mobile Full Screen Modal로
위 모달에 대한 정의와 사용법을 보면 Detail 부분을 이전과 같이 페이지로 구성하는 것이 좋아 보인다.
하지만 실제로 비슷한 다른 서비스를 사용해보면 모바일 환경에서 모달을 사용하는 것이 사용성이 더 편리했다. 그 이유는 모달로 빠르게 정보를 확인하고 엑스 버튼 하나로 이전에 내가 보았던 위치로 쉽게 돌아갈 수 있었기 때문이었다.
아래와 같이 여러 콘텐츠를 보여주는 넷플릭스, 앱스토어 서비스에서도 모바일 환경에서 Full Screen Modal 형태로 콘텐츠 디테일을 보여준다.
여러 콘텐츠들을 보여주는 해당 서비스에서도 특정 콘텐츠를 클릭했을 때 보여주는 디테일 페이지가 모달로 구성되어 있다. 하지만 여기서 특이한 점은 이 모달이 마치 페이지와 같이 느껴지는 Full Screen Modal이라는 것이다.
실제 유저는 이 페이지가 모달인지 페이지인지 구별하지 못한다. 오히려 팝업/모달과 같은 형태가 아닌 페이지로 인식하게 되며 이로써 서비스의 흐름이 끊어지지 않는다.
하지만 실제 개발적으로는 모달 형태이기 때문에 유저가 해당 모달 창을 껐을 때 클릭했던 위치로 빠르게 돌아갈 수 있다.
정확한 이유를 알 수는 없지만 이러한 이유로 셀 수 없이 많은 콘텐츠를 제공하는 넷플릭스와 애플에서 Full Screen Modal을 사용하는 것으로 보였다.
" Full Screen Modal은 Modal의 사용자의 이목을 집중시키고, 빠르게 이전 페이지로 돌아갈 수 있는 장점이 있으면서도 유저는 이를 Page로 인식하기 때문에 서비스 흐름이 끊어지지 않는다 "
이러한 이유로 NFT Detail 부분을 모바일에서는 Full Screen Modal, PC에서는 Modal로 구성하여 유저가 서비스를 이용함에 있어 이탈할 수 있는 포인트를 최소화하기로 했다.
이렇게 되면 유저는 이전 탐색했던 화면으로 빠르게 돌아갈 수 있을뿐더러 서비스를 이용하는데 끊김 없이 자유롭게 탐색할 수 있게 된다.
정리하며
UX 디자인을 할 때 항상 유저 중심으로 생각하고자 하지만 어떨 때는 정해진 규칙 안에서 이때에는 모달을 이때에는 페이지를 이라고 생각하며 자동적으로 디자인하는 경우가 있다.
이번 경우에도 만약 로딩 속도 문제를 발견하지 못했다면 여전히 뒤로 가기 버튼을 상단에 그린 페이지 형태로 NFT 디테일 페이지를 제공했을 것이다.
쉽게 넘어갈 수 있는 부분들도 다시 한번 개념을 정리하며 여러 레퍼런스를 찾고, 사용해보는 것은 유저의 경험을 향상하고 나 또한 다시 한번 유저 중심의 UX를 디자인하게 한다.
여러분들도 평소에 헷갈리거나 더 연구해보고 싶지만 시간에 쫓겨 미쳐 조사해보지 못했던 부분들이 있으신가요? 함께 나누고 스터디해보면 좋을 것 같습니다 :)
혼자보다는 여럿이 머리를 맞댈 때 더 좋은 아이디어들이 나오니까요 ^^!
