brunch

매거진 UX 디자인의 모든 것

라이킷 91 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Oct 04. 2016

무한스크롤링VS 페이지네이션 적용 UX 원칙

UX 디자인 배우기 #45

Today UX 아티클

UX Planet에 올라온 Nick Babich의 글 UX: InfiniteScrolling vs. Pagination를 전문 번역한 글입니다.

UX: Infinite Scrolling vs. Pagination

by Nick Babich

uxplanet.org

“콘텐츠를 보여주기 위해 무한 스크롤링(Infinite Scrolling)을 이용해야 하는가? 아니면 페이지네이션(Pagination)을 이용해야 하는가?” 일부 디자이너들은 자신의 프로젝트에 이 둘 중 어느 방법을 적용해야 할지 줄다리기를 하고 있습니다. 둘 다 각각의 강점과 약점을 가지고 있는데 이번 글에서는 두 방법을 개괄적으로 살펴보고 자신의 프로젝트에 어떤 걸 써야 할지 결정해보겠습니다.

무한 스크롤링

무한 스크롤링은 유저가 거대한 양의 콘텐츠를 끝없이 스크롤하면서 볼 수 있게 해주는 테크닉입니다. 스크롤해서 내릴 때마다 계속해서 페이지를 새로고침 해주는 테크닉입니다. 매력적으로 들리긴 하지만, 이 테크닉은 모든 사이트나 앱에 두루 적용할 수 있는 해결책은 아닙니다.

무한 스크롤링

장점 1. 유저 인게이지먼트(user engagement)와 내용 찾기

스크롤링을 주요 데이터 탐색 방법으로 사용하게 되면, 유저가 웹 페이지에 좀 더 오래 머물게 할 수 있으며 그에 따라 인게이지먼트도 증가할 수 있습니다. 소셜 미디어의 인기와 함께, 엄청난 양의 데이터가 소비되고 있으며, 무한 스크롤링은 페이지가 로드될 때까지 기다릴 필요 없이 이런 정보의 바다를 탐색할 수 있는 효율적인 방법을 제공합니다.

무한 스크롤링은 탐색 인터페이스(discovery interfaces)에는 거의 꼭 있어야 하는 기능이 되었습니다. 유저는 구체적인 무언가를 검색하지 않으면 자신이 좋아하는 한 가지를 찾기 위해 많은 항목을 봐야 합니다.

핀터레스트 핀(pin)의 바다

페이스북 뉴스 피드의 사례로 무한 스크롤링의 이점을 측정할 수 있을 겁니다. 암묵적 합의에 따르면 유저는 자신이 피드에 있는 모든 것을 보지 않으리란 걸 알고 있습니다. 콘텐츠가 너무 자주 업데이트되기 때문입니다. 무한 스크롤링을 써서 페이스북은 유저에게 최대한 많은 정보를 노출하는 데 최선을 다하고 있고 유저는 이런 정보의 흐름을 훑어보고 소비하게 됩니다.

페이스북 뉴스피드는 유저가 콘텐츠 업데이트를 위해 더 많은 스크롤링을 하게 합니다.

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

유저는 클릭이나 탭을 하는 것 보다 스크롤링으로 더 나은 경험을 한다고 합니다. 마우스 휠이나 터치스크린은 스크롤링을 클릭하는 것보다 더 빠르고 쉽게 할 수 있게 해주었습니다. 연속적이고 긴 콘텐츠(예: 튜토리얼 등)의 경우, 여러 스크린이나 페이지에 텍스트를 쪼개서 나누는 것 보다 스크롤링이 더 낫습니다.

클릭이나 탭의 경우, 매번 콘텐츠 업데이트를 하려면 추가적인 클릭 액션을 하고 페이지가 뜰 때까지 기다려야 합니다. 스크롤링의 경우, 한 번의 스크롤링 액션으로 콘텐츠를 업데이트할 수 있습니다.

장점 3. 스크롤링은 모바일 디바이스에 적합하다

스크린이 작을수록 스크롤은 더 길어집니다. 모바일 브라우징의 인기는 긴 스크롤링을 써야 하는 또 다른 중요한 이유가 됩니다. 모바일 디바이스의 제스처 컨트롤(gesture controls)은 스크롤링을 직관적이면서 사용하기 쉽게 해줍니다. 그 결과, 유저는 어떤 기기를 이용하든지 진정한 반응형 경험을 즐기게 됩니다.

Source: Dribbble

단점 1. 페이지 퍼포먼스와 디바이스 리소스

페이지 로딩 속도는 좋은 사용자 경험에서 매우 중요합니다. 많은 연구자들이 느린 로딩 속도는 사람들이 사이트를 떠나거나 앱을 삭제하게 만들어 결국 전환율을 떨어트린다는 연구 결과를 내놓고 있습니다. 이는 무한 스크롤링을 적용한 사람들에겐 나쁜 뉴스입니다. 유저가 더 많은 페이지를 스크롤해 내릴수록 같은 페이지에서 로드해야 할 콘텐츠는 더 많아집니다. 그 결과, 페이지 퍼포먼스는 점점 더 느려질 겁니다.

또 다른 문제는 유저가 가진 디바이스의 제한된 리소스입니다. 많은 무한 스크롤링 사이트에서, 특히 그중에서도 이미지가 많은 사이트의 경우, 아이패드처럼 리소스가 제한된 디바이스는 이미 로드한 내용만으로도 느려지기 시작할 겁니다.

단점 2. 아이템 검색 및 위치

무한 스크롤링의 또 다른 이슈는 유저가 전체 흐름에서 특정 위치로 가려고 할 때, 그 위치를 북마크 해 뒀다가 나중에 돌아올 수 없다는 겁니다. 유저가 사이트를 떠나면, 지금까지 봤던 정보를 잃게 되어 다음에 돌아왔을 때 똑같은 지점으로 돌아가려면 전부 다시 내려야 합니다. 이렇게 유저가 스크롤링 위치를 설정할 수 없다는 건 유저를 짜증 나게 하거나 헷갈리게 할 뿐만 아니라 결과적으로 전반적인 사용자 경험도 망칠 것입니다.

2012년 Etsy는 인터페이스에 무한 스크롤링을 적용하는 데 시간을 쏟았지만 이 새로운 인터페이스가 페이지네이션만큼 효과적이지 않다는 것을 알게 되었습니다. 전체 구매량은 거의 비슷했지만, 유저의 인게이지먼트가 떨어지기 시작한 겁니다 – 이제 사람들은 ‘검색’ 기능을 그닥 많이 이용하지 않는다고 합니다.

Etsy의 무한 스크롤을 적용한 검색 인터페이스. 지금 버전은 페이지네이션을 이용힙니다

Dmitry Fadeyev 은이렇게 지적합니다: “사람들은 방금 보았던 아이템을 아래쪽 리스트에서 발견한 다른 아이템과 비교해서 확인하기 위해 검색 결과 리스트를 앞으로 넘겨보고 싶어 한다. 무한 스크롤링은 이러한 다이나믹을 끊을 뿐만 아니라, 리스트 위아래로 내려가면서 보는 것을 어렵게 만든다. 특히 나중에 리스트로 돌아왔을 때 리스트 상단이 보이면서 다시 한번 스크롤해서 내려가면서 로드되길 기다려야 한다면 더 찾기 어려워진다. 이런 경우 무한 스크롤링이 들어간 인터페이스는 페이지네이션이 들어간 페이지보다 더 느려진다.”

단점 3. 상관 없어진 스크롤바

또 다른 불편한 점은 스크롤바에 ‘볼 수 있는 데이터의 실제 양’이 반영되지 않았다는 겁니다. 이제 거의 끝까지 봤다고 생각하고 신나서 스크롤을 내렸더니 (실제로 스크롤바가 짧으면 좀 더 스크롤해보게 되는 경향도 있음) 지금까지 본 것보다 두 배는 더 많이 남았다는 걸 알게 될 때도 있습니다. ‘접근성’의 관점에서 봤을 때, 유저가 아는 스크롤바의 용도를 위반하는 것은 상당히 좋지 않습니다.

스크롤바는 실제 페이지 길이를 보여줘야 합니다.

단점#4. 푸터(Footer)의 부재

푸터도 존재 이유가 있습니다: 유저가 때때로 필요로 하는 내용이 포함되어 있는 곳입니다. 만일 유저가 무언가 찾을 수 없거나 추가 정보가 필요하다면, 보통 푸터로 내려가 봅니다. 하지만 피드 스크롤이 무한대로 이어지면, 유저가 바닥에 닿자마자 많은 데이터가 뜨게 되고 푸터는 매번 보이지 않는 곳으로 밀려나게 됩니다.

링크드인이 2012년 무한 스크롤링 도입했을 때, 유저는 푸터를 보기 위해 새로운 스토리가 로드되기 전에 스크린을 저장해야 했습니다

무한 스크롤링을 적용한 사이트는 푸터를 고정시키거나 푸터에 있는 링크를 사이드바나 상단으로 재배치시켜 접근 가능하게 만들어야 합니다.

페이스북은 푸터의 모든 링크(‘정책’, ‘채용’ 등)를 우측 사이드바로 옮겼습니다.

또 다른 해결책은 ‘더 보기(Load More)’ 버튼을 요구에 따라 콘텐츠를 더 불러오는 것입니다. 새로운 콘텐츠는 유저가 이 버튼을 누를 때까지 자동으로 뜨지 않는 겁니다. 이렇게 하면 유저는 끝까지 내릴 필요 없이 쉽게 푸터를 볼 수 있습니다.

인스타그램은 유저가 푸터에 접근할 수 있도록‘더 보기(load more)’ 버튼을 이용합니다.

페이지네이션

페이지네이션은 콘텐츠를 여러 페이지로 나누는 유저 인터페이스 패턴입니다. 유저가 페이지 하단까지 스크롤을 내려서 한 줄로 늘어진 숫자를 보게 되면, 바로 이 숫자가 그 사이트나 앱의 페이지네이션입니다.

장점 1. 전환율이 좋다

페이지네이션은 특히 유저가 단순히 정보의 흐름을 훑어보거나 소비할 때만 아니라 결과 리스트 내에서 무언가를 검색(searching)하는 경우에 좋습니다.

페이지네이션의 장점은 구글 검색을 예로 들어 측정해볼 수 있을 것입니다. 최고의 검색 결과를 찾는 것은 검색에 몇 초 혹은 몇 시간이 걸릴 것입니다. 지금 구글의 포맷 내에서 검색하기를 멈추기로 결정하면, 몇 번째 검색 결과까지 봤는지 알 수 있습니다. 어디서 검색을 멈출 것인지 얼마나 많은 결과를 볼 것인지 결정할 수 있습니다.

구글의 검색 결과 데이터

장점 2. 통제감(Sense of Control)

무한 스크롤링은 끝이 없는 게임과 같습니다 – 얼마나 많이 스크롤하든 상관없이, 절대 끝에 도달할 수 없다고 느끼게 됩니다. 유저는 볼 수 있는 결과의 수를 알 때, 무한대로 스크롤링할 수 있는 리스트를 샅샅이 내려보는 대신, 보다 정보를 기반으로 한 의사결정을 내릴 수 있게 됩니다.

David Kieras의 연구, ‘인간-컴퓨터 인터랙션의 심리학’에 따르면 “끝나는 지점에 도달하는 것은 통제감을 느끼게 해준다”라고 합니다. 또한 이 연구에 따르면 유저는 제한되지만 적절한 결과를 얻을 때, 자신이 찾는 것이 거기에 이는지 없는지 쉽게 판단할 수 있게 된다고 합니다.

또한 유저에게 결과의 총수를 보여줄 때 (물론 총데이터의 총수가 무한대이지 않을 때), 유저는 자신이 실제 찾고 있는 것을 찾는 데 시간이 얼마나 걸릴지 추정할 수 있다고 합니다.

장점 3. 아이템의 위치

페이지네이션을 적용한 인터페이스는 유저가 특정 아이템의 위치를 마음속에 그리게 됩니다. 페이지의 정확한 숫자를 꼭 알 필요는 없지만, 몇 번이었는지 대략적으로 기억할 것이고, 페이지가 적힌 링크를 통해 쉽게 그 위치로 이동할 수 있을 겁니다.

페이지네이션을 쓰면 유저는 탐색의 통제권(control of navigation)을 가지게 됩니다. 이전에 있던 곳으로 돌아갈 때 어떤 페이지를 클릭해야 할지 알기 때문입니다.

페이지네이션은 이커머스 사이트 및 앱에 적합합니다. 유저는 온라인으로 쇼핑을 할 때, 자신이 떠났던 지점으로 돌아갈 수 있기를 원하며 쇼핑을 연결해서 하고 싶어 합니다.

MR Porter 사이트에서는 아이템을 보여주는 데 페이지네이션을 이용하고 있습니다.

단점: 추가 액션

페이지네이션에선 다음 페이지로 가기 위해 유저는 링크 타깃(예: “다음” 버튼)을 찾아서, 마우스를 올리고, 클릭한 후에 새로운 페이지가 뜨기를 기다려야 합니다.

콘텐츠 클릭해서 보기

여기서 중요한 문제는 대부분의 사이트에서 유저에게 매우 제한된 양의 콘텐츠를 한 페이지로 보여준다는 겁니다. 로딩 속도의 저하 없이 페이지를 길게 만들면 페이지 당 콘텐츠는 많아질 것이고 그러면 페이지네이션 버튼을 그렇게 많이 클릭하거나 탭 하지 않아도 될 겁니다.

무한 스크롤링과 페이지네이션은 언제 사용해야 할까?

무한 스크롤링을 효과적으로 사용할 수 있는 사례는 많지 않습니다. 유저가 만들어내는 콘텐츠를 자랑하는 앱과 사이트(트위터, 페이스북) 혹은 비주얼 콘텐츠를 자랑하는 앱이나 사이트(핀터레스트, 인스타그램)에 가장 적합합니다. 반면, 페이지네이션은 안전한 선택으로, 유저의 목적 지향적인 활동을 충족시켜주는 사이트와 앱에 적합한 솔루션입니다.

이런 점에 있어서 좋은 경험은 잘 보여주는 것입니다. 구글 이미지는 무한 스크롤을 사용합니다. 유저가 텍스트보단 이미지를 훨씬 빠르게 훑어보고 처리할 수 있기 때문입니다. 이는 구글 검색 결과에서 여전히 전통적인 페이지네이션 테크닉을 사용하고 이는 이유이기도 합니다.

결론

디자이너는 무한 스크롤링과 페이지네이션의 장단점을 잘 달아봐야 합니다. 선택은 디자인의 맥락과 콘텐츠가 전달되는 방법에 따라 달라질 거입니다. 일반적으로 무한 스크롤은 트위터같이 유저가 특별히 찾는 것 없이 끝없이 흘러드는 데이터의 흐름을 소비할 때 적합한 반면, 페이지네이션 인터페이스는 유저가 구체적인 아이템을 찾거나 이전에 봤던 모든 아이템의 위치가 중요한 검색 결과 페이지에 적합합니다.