brunch

라이킷 70 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김효진 Apr 04. 2021

UX : 무한 스크롤과 페이징

UX : Infinite Scrolling vs. Pagination

왼쪽: 페이징 / 오른쪽: 무한 스크롤

"표시할 콘텐츠가 많은데 내 콘텐츠에는 무한 스크롤? 페이징? 어떤 것을 사용하면 좋을까?" 일부 디자이너는 자신의 프로젝트에 어떤 방법을 선택해야 할지 확신하지 못한다. 이 글을 통해 두 가지 방법의 장, 단점을 간략하게 살펴보고 프로젝트에 맞게 적용시키면 좋을 것 같다.

무한 스크롤

(Infinite Scrolling)

무한 스크롤은 사용자가 마감선이 보이지 않는 상태에서 방대한 양의 콘텐츠를 스크롤할 수 있는 기술이다. 이 기술은 페이지를 아래로 스크롤할 때 페이지가 계속 새로 고침 된다.

좋은 방법처럼 보이지만 이 기술은 모든 사이트나 앱의 정답이 될 수는 없다.

무한 스크롤

장점#1 : 사용자 참여 및 콘텐츠 검색

스크롤을 데이터 탐색의 주요 방법으로 사용할 경우 웹 페이지에 더 오래 머물 수 있으므로 사용자 참여를 증가시킬 수 있다. 소셜 미디어의 인기로 엄청난 양의 데이터가 소비되고 있으며, 무한 스크롤은 추가 클릭 / 탭 없이 효율적으로 정보의 바다를 탐색할 수 있다.

무한 스크롤은 검색 인터페이스의 필수 기능이다. 사용자가 특정 항목을 검색하지 않는다면, 원하는 항목을 찾기 위해 많은 양의 항목을 볼 필요가 있다.

Pinterest의 핀 바다

Facebook 뉴스 피드를 예로 들면, 무한 스크롤의 이점을 확인할 수 있다. 콘텐츠가 너무 자주 업데이트되기 때문에 사용자는 피드의 모든 내용을 볼 수 없다. 그렇기 때문에 무한 스크롤을 통해 페이스북은 사용자에게 가능한 많은 정보를 노출시키고, 사용자는 이러한 정보의 흐름을 스캔하고, 소비하고 있다.

Facebook 뉴스 피드는 업데이트를 위해 사용자가 계속 스크롤하도록 한다.

장점#2 : 스크롤이 클릭보다 낫다.

스크롤은 클릭 / 탭 보다 인터랙션 비용이 낮다. 마우스 휠이나 터치 스크린을 사용하면 클릭하는 것보다 더 빠르고 쉽게 스크롤할 수 있으며, 무한 스크롤은 중독성이 있다. 튜토리얼과 같이 연속적이고 긴 콘텐츠의 경우 스크롤은 텍스트를 여러 개의 개별 화면이나 페이지로 자르는 것보다 무한 스크롤일 때 훨씬 더 나은 사용성을 제공한다.

*튜토리얼

튜토리얼은 개별 작업 단위보다 더 큰 목표를 달성하기 위한 방법을 보여준다. 일반적으로 튜토리얼은 각각 순차적 단계가 있는 여러 섹션으로 구성된다.

클릭/탭의 경우 : 각 콘텐츠 업데이트에는 추가 클릭과 페이지 로딩 시간이 필요하다. 스크롤의 경우 : 콘텐츠 업데이트를 위한 단일 스크롤 작업이다.

장점#3 : 스크롤은 모바일에 적합하다.

화면이 작을수록 스크롤이 길어진다. 모바일 브라우징(탐색)이 대중화됨에 따라 긴 스크롤의 또 다른 지지자가 되었다. 모바일 기기의 제스처 제어는 스크롤을 직관적이고 사용하기 편하게 한다. 그 결과 사용자들은 브라우징(탐색) 경험을 즐길 수 있는 더 좋은 기회를 갖게 되었다.

단점#1 : 페이지 성능 및 장치 리소스

페이지 로딩 속도는 좋은 사용자 경험을 위한 모든 것이다. 여러 연구에 따르면 로딩 시간이 느릴 경우 사용자가 사이트를 떠나거나 앱을 삭제하는 것으로 나타났다. 무한 스크롤을 사용하는 사람들에게는 좋지 않은 소식이다. 많은 사용자가 페이지를 아래로 스크롤할수록 동일한 페이지에 콘텐츠가 보여야 하기 때문에 페이지 성능이 점점 느려지는 것은 자연스러운 일이다.

또 다른 문제는 사용자 장치의 제한된 리소스이다. 많은 무한 스크롤 사이트(특히 이미지가 많은 사이트)에서 리소스가 제한된 장치(예: 모바일 장치 또는 오래된 하드웨어가 있는 태블릿)는 보여줘야 할 많은 이미지 수 때문에 속도가 느려지기 시작할 수 있다.

*리소스(resource) = "자원"

사용할 수 있는 어떠한 항목을 이야기한다. 즉 우리가 무언가를 먹거나 자동차를 움직이게 할 때 밥이나 석유가 필요하듯 컴퓨터도 프로그램을 실행시키기 위해선 리소스라는 것이 필요하다. 우리가 사용하고 있는 컴퓨터는 일정량의 "리소스"라는 것을 가지고 있다.

프로그램이 무겁다 = 프로그램을 실행하는데 많은 리소스가 필요하다.

단점#2 : 항목 검색 및 위치

무한 스크롤의 또 다른 문제는 사용자가 특정 지점에 도달하게 되면 위치를 표시할 수 없고 나중에 그 지점으로 돌아올 수 없다는 점이다. 앱을 나가거나 현재 위치를 지나처 버린다면 다시 스크롤해서 원하는 위치로 돌아가야 한다. 이는 사용자에게 짜증이나 혼란을 야기할 뿐만 아니라 결과적으로 전체 사용자 경험을 해칠 수 있다.

2012년 Etsy라는 사이트는 무한 스크롤 인터페이스를 구현하였지만 새로운 인터페이스가 페이징만큼 성능이 좋지 않다는 것을 발견했다. 구매 금액은 거의 그대로였지만, 사용자가 참여하는 검색율은 감소하였다.

무한 스크롤이 가능한 Etsy의 검색 인터페이스, 현재 버전에는 페이지 매김으로 변경되었다.

단점#3 : 관련 없는 스크롤 바

스크롤 바가 실제 데이터 양을 반영하지 못한 다는 문제점을 가지고 있다. 만약 스크롤 바가 하단 가까이에 있다면 "이제 정보가 끝나는 군아"라는 생각을 하며 스크롤할 수 있다. 하지만 하단에 도착할 때쯤 스크롤 바가 다시 중간으로 가 있는 경우를 자주 보곤 한다. 이는 접근성 측면에서 스크롤 바 사용은 사용자에게 좋은 방법은 아니다.

스크롤 바에는 실제 페이지 길이를 반영해야 한다.

단점#4 : Footer까지 도달할 수 없다.

Footer가 있는 데는 이유가 있다. 사용자가 필요로 하는 콘텐츠가 포함되어 있을 수도 있고, 사용자가 무언가를 찾을 수 없거나 다른 페이지로 이동하려는 경우 종종 footer를 이용하기도 한다. 그러나 무한 스크롤이 적용되어 있다면 사용자가 하단에 도달하자마자 더 많은 데이터가 새로고침 되어 매번 footer가 보이지 않게 된다.

무한 스크롤을 구현하는 사이트는 footer을 고정하여 엑세스(진입) 할 수 있도록 하거나 링크를 상단 또는 사이드 바에 재배치해야 한다.

Facebook은 footer의 모든 링크를 Tab bar의 Hamburger bar로 이동하였다.

또 다른 설루션은 추가 로딩 버튼을 사용하여 요청 시 콘텐츠를 로딩하는 것이다. 새 콘텐츠는 사용자가 더 보기 버튼을 클릭할 때까지 자동으로 로딩되지 않는다. 이렇게 하면 사용자가 footer을 쫒아 갈 필요 없이 쉽게 footer로 이동할 수 있다.

2016 instagram은 사용자가 footer에 엑세스 할 수 있도록 '더보기' 버튼을 사용하였다.

페이징

(Pagination)

페이징은 콘텐츠를 별도의 페이지로 나누는 사용자 인터페이스 패턴이다. 페이지를 하단으로 스크롤하여 숫자 행을 보면 해당 숫자는 사이트 또는 앱의 페이지 표시이다.

장점#1 : 좋은 전환

페이징은 사용자가 단순히 콘텐츠를 검색하는 것이 아니라 결과 목록에서 특정 항목을 검색할 때 유용하다. "스크롤은 연속이고, 클릭은 결정이다." (Joshua Porter)

Google 검색을 예로 들면, 페이징의 이점을 확인할 수 있다. 사용자는 확인할 결과 페이지 수를 결정할 수 있다.

Google 검색 결과 데이터

장점#2 : 통제감

무한 스크롤은 끝없는 게임과 같다. 아무리 스크롤해도 끝이 없다. 사용자가 사용 가능한 결과의 수를 알 때 무한 스크롤 목록을 샅샅이 뒤지는 대신 정보에 입각한 결정을 내릴 수 있다. David Kieras의 인간 - 컴퓨터 상호 작용 심리학에 따르면 : "종료점에 도달하는 것은 통제력을 제공한다." 또한 사용자들은 제한적이지만 관련성 있는 결과를 가지고 있을 때, 원하는 것이 실제로 존재하는지 아닌지를 쉽게 판단할 수 있다는 것을 명확히 한다.

또한 사용자가 총 검색 결과의 수를 볼 때 (물론 총 데이터 양이 무한하지 않은 경우) 실제로 찾고 있는 것을 찾는 데 걸리는 시간을 예상할 수 있다.

장점#3 : 항목 위치

페이지가 매겨진 인터페이스를 사용하면 사용자는 항목의 위치를 확인할 수 있다. 정확한 페이지 번호를 알 필요는 없지만, 대략 어떤 페이지 인지 기억할 수 있으며, 페이지화 된 링크를 통해 페이지 수를 쉽게 파악할 수 있다.

페이징을 사용하면 사용자가 자신의 위치로 돌아가기 위해 클릭해야 할 페이지를 알기 때문에 탐색을 제어할 수 있다.

페이징은 전자 상거래 (E-commerce) 사이트 및 앱에 적합하다. 사용자는 온라인 쇼핑을 할 때 중단했던 곳으로 돌아와 쇼핑을 계속할 수 있기를 원한다.

MR Porter 사이트는 항목에 페이지 매김을 사용한다.

단점 : 추가 작업

페이징에서 다음 페이지로 이동하려면 사용자는 다음이라는 버튼을 찾고 그 위로 마우스를 가져간 다음 클릭하고 새 페이지가 로딩될 때까지 기다려야 한다.

여기서 가장 큰 문제는 대부분의 사이트가 사용자에게 단일 페이지 (예 : 페이지 당 10-20개 항목)로 매우 제한된 콘텐츠를 표시한다는 것이다. 로딩 속도를 저해시키지 않으면서 페이지를 더 길게 만들면 사용자는 페이지 당 더 많은 콘텐츠를 얻을 수 있으며 페이징 버튼을 많이 클릭하거나 탭할 필요가 없다.

무한 스크롤 / 페이징을 사용하는 경우

무한 스크롤이 효과적인 경우는 거의 없다. 무한 스크롤은 Twitter, Facebook, Pinterest, Instagram과 같이 사용자 생성 콘텐츠의 스트리밍 사이트 또는 앱에 가장 적합하다. 페이징은 사용자가 특정 항목을 찾는 목표지향 사이트 및 앱에 적합하다.

콘텐츠 유형에 따라 검색 방법을 선택하는 역할을 한다. 구글이 좋은 예시가 될 수 있다. 사용자는 텍스트보다 훨씬 빠르게 이미지를 스캔하고 처리하기 때문에 구글 이미지는 무한 스크롤을 사용한다. 반면 검색 결과를 읽는 데는 훨씬 오래 걸리기 때문에 구글 검색 결과는 여전히 전통적인 페이징 방법을 사용하고 있다.