나를 위한 글(12): 인피니티 스크롤 vs 페이지네이션

 

"리스트 화면을 그려야 하는 데 인피니티 스크롤이 편할까 아니면 페이지네이션이 편할까?

왠지 인피니티 스크롤이 뭔가 있어 보이는 데.."

 

모바일 환경에서 VOD 리스트나 게시글 리스트 화면을 구현할 때 머리 속에서 고민되는 부분입니다.

몇몇 기획자나 디자이너들도 이런 고민을 가끔 하리라 생각합니다. 

 

각각의 구현 방식마다 장점과 단점을 갖고 있습니다.

이번 글에서 인피니티 스크롤과 페이지네이션의 장, 단점을 살펴봄으로써,

사이트를 기획하거나 디자인할 때 더 적합한 방식을 적용하려 합니다. 

 

---

인피니티 스크롤링

 

인피니티 스크롤링은 정해진 마지막 영역 없이 게속 스크롤하면 수많은 컨텐츠들이 새로 로드되는 방식입니다. 

이 방식은 스크롤 할 때마다 리스트가 새로 불러지는 방식이지만, 모든 사이트와 앱에 적용할만큼 만사형통의 기술은 아닙니다. 

 

 

어디가 끝인지 시험해보고 싶다....

장점 1: 유저의 참여를 이끌고 더 쉽게 컨텐츠 탐색이 가능하다

 

인피니티 스크롤 방식은 유저가 더 오래 사이트를 머물게 하고 더 많은 참여를 기대할 수 있다는 장점이 있습니다. 

장점인지 아닌지 햇갈리긴 하지만 언제 페이지가 끝날지 모르기 때문에 더 오랜 시간 자신이 원하는 정보를 찾기 위해 오래 머물러야 합니다. 그리고 계속 스크롤링을 해야하죠.

이 방식은 유저가 정보의 바다에서 클릭이나 터치하는 추가 행동 없이 컨텐츠를 탐색하고 검색하는 데 효과적인 방식입니다.

 

이런 장점을 잘 활용하고 있는 예시는 페이스북의 뉴스 피드입니다.

순식간에 새로운 글이 자주 업데이트 되기 때문에 페이스북은 인피니티 스크롤링을 활용하여 끝없이, 최대한 많은 정보를 노출시키고, 그 가운데서 사용자가 원하는 정보를 찾도록 유도합니다.

 

 

장점 2: 스크롤링은 클릭보다 더 편하다

 

유저 입장에서 스크롤링은 클릭이나 터치 방식보다 더 편합니다. 그저 화면만 밀면 되니까요.

마우스 가운데에 있는 휠이나 더치스크린은 클릭하는 행동 보다 스크롤링을 더 편하게 만들어주었습니다. 

 

 

장점 3: 스크롤링은 모바일에 최적화되었다

 

스크린이 작으면 작을수록, 스크롤은 더욱 길어집니다. 

모바일 환경의 대중화 덕분에 이미 사용자들은 스크롤에 익숙해져있습니다.

그렇기 때문에 스크롤링은 익숙하면서, 사용하기에 쉬운 제스쳐가 되었고, 스크롤링함으로써 사용자들은 상호작용적인 경험을 얻는다고 느낍니다. 

 

 

 

 

(치명적인) 단점 1: 퍼포먼스가 낮아지고 자원을 많이 잡아 먹는다

사이트나 페이지 속도는 좋은 UX를 갖추고 있느냐 없느냐의 척도입니다. 

수많은 연구 결과가 입증하듯이 느린 사이트는 사용자가 빠르게 이탈하거나 앱을 삭제하는 데 큰 영향을 끼칩니다.

인피니티 스크롤링을 사용하면 여러분의 사이트나 페이지에 방문한 사용자가 그렇게 행동할 것입니다.

 

스크롤을 내릴 때마다 새로운 페이지가 쌓이고 쌓여서 결국엔 엄청난 양의 컨텐츠가 노출될거고

처음에 빠르던 로딩 속도가 점점 느려지게 됩니다. 

 

또한 구형의 모바일 디바이스를 갖춘 유저가 이미지가 엄청나게 많은 사이트를 방문해서 인피니티 스크롤링을 계속한다면 워낙 하드웨어 자체가 구리기 때문에 매우 느린 속도를 체감하게 될 것입니다. 

모든 사람들이 최신의 기기를 쓸거라는 착각을 버려야 합니다(아직까지 IE8, AOS 5.X 등을 쓰는 사람들이 많다는....)

 

 

단점 2: 원하는 컨텐츠를 찾는데 불편하다.

 

또 다른 단점은 사용자들이 원하는 리스트의 특정 지점으로 다시 돌아가고 싶을 때 그 위치로 다시 돌아가기가 쉽지 않다는 점입니다. 만일 사이트를 이탈하고 다시 접속한다면 맨 처음부터 다시 모든 컨텐츠를 탐색해야만 합니다.

이는 결과적으로 UX를 헤치는 것이며 유저들에게 짜증남과 혼란을 제공합니다.

 

 

Another issue with infinite scrolling is that when users get to a certain point in the stream, they can’t bookmark their location and come back to it later. If they leave the site, they’ll lose all their progress and will have to scroll down again to get back to the same spot. This inability to determine the scrolling position of the user not only causes annoyance or confusion to the users but also hurts the overall user experience, as a result.

In 2012 Etsy had spent time implementing an infinite scroll interface and found that the new interface just didn’t perform as well as a pagination. Although the amount of purchases stayed roughly the same, user engagement has gone down — now people weren’t using the search so much.

 

 

 

페이지네이션

 

 

 

장점 1: 빠른 전환과 특정 컨텐츠를 찾기가 쉽다.

 

사용자가 특정한 컨텐츠를 리스트에서 찾고자 할 때 페이지네이션은 인피니티스크롤링보다 더 편합니다.

우리가 PC에서 흔히 볼 수 있는 페이지네이션은 구글 검색에서도 쉽게 찾아볼 수 있습니다.

페이지네이션만으로도 몇 개의 컨텐츠가 있는지 쉽게 유추가 가능합니다.

 

 

장점 2: 원하는 것을 찾기 쉽다.

 

페이지네이션은 사용자가 찾고자 하는 아이템의 위치를 짐작하게 할 수 있어 원하는 것을 찾기가 쉽습니다.

정확한 페이지를 모르더라도 어느정도에 있을 것이라 추측할 수 있게 하기에 

원하는 아이템을 찾는 것이 더 용이합니다. 

이 장점은 쇼핑몰 사이트나 앱에 유용합니다. 사용자가 온라인에서 쇼핑할 때 상품 상세에서 원하는 내용을 확인한 후

이전에 있던 위치로 돌아가 다시 다른 목록을 살펴보길 원하는 데, 이럴때야 말로 페이지네이션이 강점을 발휘합니다.

 

 

단점 1: 추가 행동을 해야한다.

 

페이지를 이동하기 위해선 마우스 클릭이나 터치와 같은 추가 행동이 필요하다는 점이 페이지네이션의 단점입니다.

그리고 추가 행동을 한 후 페이지가 새로 로드되기 때문에 그 짧은 시간을 기다려야 하기도 하죠.

 

 

---

그럼 언제 인피니티 스크롤을 쓰고 언제 페이지네이션을 써야할까?

 

사실 인피니티 스크롤은 그다지 좋은 UX를 제공하진 않습니다. 

인피니티 스크롤을 사용하고자 한다면 수많은 컨텐츠를 사용자가 만들어내는 소셜 미디어 서비스에 사용하는 것이 적합합니다. 이와는 다르게 페이지네이션은 사용자가 무엇인가를 탐색하고 찾길 바라는 목적 지향적인 사이트에 활용하는 것이 적합합니다. 

 

또한 어떤 컨텐츠 타입으로 구성되어 있는지도 중요합니다.

만일 대부분의 컨텐츠가 이미지 위주라면 인피니티 스크롤링이 적합합니다. 왜냐면 이미지는 텍스트처럼 읽을 필요가 없기 때문에 사용자들이 빠르게 스캔하면서 원하는 것을 찾을 수 있기 때문이죠. 

구글 이미지 페이지가 인피니티 스크롤링을 사용하는 것도 이 이유 때문입니다.

이와 반대로 텍스트가 많다면 페이지네이션이 적합합니다. 텍스트를 읽는 건 이미지를 스캔하는 것보다 더 오래 걸리기 때문이죠. 구글 검색이 전통적인 페이지네이션을 고집하는 이유도 바로 이 때문이라 볼 수 있습니다. 

 

 

---

 

원문출처: https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

UX: Infinite Scrolling vs. Pagination