3원칙. 페이지에 머무르게 하라
author - 우뚝솟은비니 | UX 디자이너
Previous Brunch.
『리치 인터페이스 디자인』이라는 책의 6가지 디자인 원칙과 가이드라인을 바탕으로 최근의 모바일 인터페이스 사례를 살펴보고 있습니다.
*gif가 다량 포함되어있습니다. PC나 아이폰 브런치 앱에서만 재생이 되기 때문에 PC 혹은 아이폰 브런치 앱에 접속해서 읽어주시면 감사하겠습니다:)
제3원칙
페이지에 머무르게 하라
사용자의 몰입을 극대화하기 위해 시각적 인지가 계속되도록 만들어야 한다는 원칙
사용자가 어떤 행동을 할 때마다 페이지가 전환되거나 새로 불러와진다면 매번 시간적 간격이 생기고 몰입이 깨질 수밖에 없습니다. 사용자의 몰입을 극대화하기 위해서는 최대한 페이지에 머무르도록 하여 끊김 없는 몰입 기반의 경험과 시각적 인지를 제공해야 합니다.
사용자를 페이지에 머무르게 하는 네 가지 패턴
・오버레이: 새 페이지로 이동하는 대신 페이지 위를 덮는 가벼운 레이어로 작은 페이지 제공
・인레이: 새 페이지로 이동하는 대신 정보나 기능을 페이지 내에 삽입
・가상 페이지: 움직이는 콘텐츠나 애니메이션을 사용하여 페이지의 가상공간을 늘림
・프로세스 흐름: 페이지에서 페이지로 이동하는 대신 그 페이지 내에 프로세스 흐름을 만듦
위의 네 가지 패턴 중 가상 페이지에 대한 가이드라인이 재미있습니다.
가상 페이지
가상 페이지란, 현재 페이지를 유지하면서 더 큰 가상 페이지에 대한 환상을 만드는 것입니다.
쉽게 말해,
스크롤할수록 더 많은 데이터들을 불러오고(가상 스크롤)
목록 끝에 도착했을 때 ‘더보기’로 콘텐츠 영역을 확장시키고(인라인 페이징)
좌우 스와이프로 화면 내에 없었던 이미지를 끌어와서 보고(컨베이어 방식)
지도를 마음대로 줄였다 키웠다 하는 것(가상 패닝)
들을 가상 페이지라고 합니다.
이 중 개인적으로 의문이었던 가상 스크롤과 인라인 페이징을 비교해보려고 합니다.
가상 스크롤
가상 스크롤이란, 데이터를 나누는 인공적인 페이지 경계를 없애고 스크롤 시 자동으로 새로운 콘텐츠들이 생성되는 방식을 말합니다. 구글의 이미지 검색과 네이버의 이미지 검색이 가상 스크롤 방식을 이용하여 콘텐츠를 노출하고 있습니다.
구글 이미지 검색, 스크롤할수록 새 이미지들이 쭉쭉 로딩됩니다[가상 스크롤 가이드라인으로 보는 구글 이미지 검색]
01 사용자에게 현재 위치를 계속 알려주고, 스크롤하고 있는 데이터의 범위를 전달하라.
화면 우측 스크롤바의 위치를 통해 데이터 범위를 전달합니다. 로딩된 이미지 목록의 맨 끝에 도달했을 때, 스크롤바는 가장 아래에 위치해있다가 새로운 이미지 목록이 로딩되면 다시 화면 중간쯤으로 튕겨 올라갑니다.
새로 로딩된 이미지 목록만큼 튕겨져 올라가는 스크롤02 검색 결과를 스크롤하는 동안 가상공간을 확장하라.
모든 이미지들을 한 번에 로딩하는 것이 아니라, 스크롤 및 원하는 노출 시점에 도달할 때 로드하는 지연 로딩(Lazy loading-책에서는 '점진적 로딩'이라는 용어를 사용함)을 사용하였습니다. 이는 사용자 시점에서의 이미지 로딩 속도를 높일 뿐 아니라 데이터 트래픽까지도 절약할 수 있는 방법입니다.(위 이미지 ❷참고)
02 데이터를 불러오느라 사용자가 기다리는 동안에 피드백을 제공하라.
Placeholder(이미지가 위치해야 할 곳에 미리 다른 이미지를 배치하여 보여주는 것) 방식을 이용하여 로딩 화면을 빈 공간으로 두지 않고 컬러 이미지로 먼저 노출하여 곧 이미지가 뜬다는 피드백을 주고 있습니다.(위 이미지 ❸참고)
인라인 페이징
더보기 버튼이나 숫자 버튼을 사용해 페이지를 인위적으로 나누는 것입니다. 단, 콘텐츠 영역만 갱신하고 그 외의 UI 요소들은 그대로 유지하여 사용자가 여전히 같은 페이지에 머무르고 있는 것으로 인식하게 합니다. 구글의 통합검색이 더보기 버튼을 사용하고 있고, 네이버의 통합검색은 숫자 버튼(페이지네이션)을 사용하고 있습니다.
그렇다면, 왜 같은 검색 기능인데 앞서 살펴본 이미지 검색은 가상 스크롤 방식을, 통합검색은 인라인 페이징 방식을 사용하고 있는 걸까요? 이 질문에 대해 책에서는 의사 선택 시 고려해야 할 사항을 제시해줍니다.
가상 스크롤 VS. 인라인 페이징
・사용자가 데이터의 정렬 또는 소팅과 같은 기능을 이용하고자 할 때는 가상 스크롤을 고려하라.(실제 구글, 네이버의 이미지 검색은 검색창 하단에 상세 필터를 제공하고 있음)
・변화 가능성이 더 많은 데이터고, 더 많이 탐색할수록 관련성이 적어지는 데이터일 때는 인라인 페이징이 낫다.(통합 검색은 뒤로 갈수록 검색어와 검색 결과 간의 연관성이 떨어짐)
・사용자가 데이터 사이를 마구 돌아다녀도 상관없다면 가상 스크롤이 낫다.(예를 들어 이미지)
・콘텐츠 탐색 속도나 효율이 중요하다면 보통은 페이징이 최선의 선택이다.
・콘텐츠가 연속하는 속성을 가진다면, 페이징보다는 스크롤이 자연스럽다.
・페이지뷰로 수익이 발생한다면 스크롤 사용은 수익 모델에 적합하지 않다.
이 가이드라인을 읽고 십 년 묵은 궁금증이 풀렸습니다가상 스크롤할까 인라인 페이징 할까의 고민에 빠지게 되는 대표적인 서비스로는 막대한 상품 리스트를 보여줘야 하는 이커머스 플랫폼이 있습니다.
해외 직구 이커머스 G9의 검색 결과 화면G9는 가상 스크롤과 인라인 페이징 중, 가상 스크롤 방식을 사용하고 있습니다.
G9가 이미지 중심의 커머스라는 점과 상세검색･정렬 등의 소팅 기능을 제공한다는 점을 고려하면 가상 스크롤 방식을 사용한 것이 적합했다고 생각됩니다. 또한, G9는 앞서 살펴봤던 가상 스크롤의 가이드라인도 충실하게 지키고 있는데요, 스크롤바뿐 아니라 하단 리스트 넘버링을 통해서도 사용자에게 현재 위치 정보를 제공하고 있습니다.
Coming next.
4원칙. 유인 요소를 제공하라
5원칙. 전환 효과를 사용하라
6원칙. 즉각적으로 반응하라
Placeholder와 Lazy loading 관련 참고 글
https://jmperezperez.com/medium-image-progressive-loading-placeholder/
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
