무한 스크롤 VS 페이지네이션

서비스 디자인을 하다보면 사용자가 ‘콘텐츠를 어떻게 탐색하게 할 것 인가’ 하는 문제와 만나게된다.

브런치에 UX컨설턴트 전민수님의 좋은 번역 자료가 있어 예전에 이 문제로 고민했던 경험과 인사이트를 바탕으로 생각을 정리하였다.
원문 https://brunch.co.kr/@ebprux/99



infinite scroll 무한 스크롤

장점

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

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

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

본문 발췌

사용자가 특정 키워드로 검색하지 않아도, 볼만한 콘텐츠를 계속 노출할 수 있다는 점에서 많은 소셜 미디어 서비스들이 무한 스크롤을 사용하고 있다.
훑어보는 방식은 많은 콘텐츠를 가지고 있는 서비스들이 사용자에게 흥미를 유발하는 수단으로
사용자는 최대한 많은 정보에 노출되며 클라이언트는 이를 통해 체류시간 증가 효과와
사용자 취향등의 정보 수집을 동시에 할 수 있다.

‘들여다보지’ 않고 ‘훑어보는’ 방식은 이미 널리 퍼져있기 때문에
이제는 방식에서 → 주제로 내용이 옮겨저‘무엇을 훑어볼것인가’ 에 대한 고민이
이어지고 있다. 이로인해 ‘개인화된 콘텐츠’에 대한 요구가 높아져있는 상태.


훑어보는 중인 사용자들은 어떤 행동을 할지 아직 결정하지 않은 상태로
‘스크롤’ 제스쳐를 사용하게되는데, 이때 특정 목적이 발생하면
‘선택/재생’등의 액션으로 다음 행동에 대한 결정을 하게된다.

만약 내용이 긴 연속적인 콘텐츠를 소비하는 경우라면,
흐름을 끊지 않고 연속적으로 정보를 탐색할 수 있으며
로딩에 대한 추가 액션 없이 스크롤링만으로 다음 콘텐츠를 로딩할 수 있다는 장점이 있다.

https://dribbble.com/shots/6775003-Posts-on-Instagram?utm_source=Clipboard_Shot&utm_campaign=milossubotic&utm_content=Posts%20on%20Instagram&utm_medium=Social_Share

단점

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

2. 아이템 검색 및 위치

3. 사라진 스크롤바

4. 푸터의 부재

본문 발췌

본문에서도 언급했듯 여러가지 단점도 명확하다.
무한 스크롤 방식은 이전내용으로 돌아가 내용을 복기하는데 어려움이 있고,
의식하지 않고 스크롤을 내리기 때문에 데이터를 많이 사용하게 된다.
또한 사용자가 콘텐츠 수량이 얼마나 되는지 알 수 없다는 점, 콘텐츠가 부족한 서비스에서는 금방 끝이 나버린다는 단점이 있다.
하지만 이 경우는 서비스마다 단점이 될 수 있고, 장점이 될 수도 있으니 서비스의 성격에 맞춰 사용하는것이 좋을 것 같다.


Pagenation 페이지네이션

장점

1. 전환율이 좋다

2. 통제감 (Sense of control)

3. 콘텐츠의 위치 파악

본문 발췌

단점

1. 추가 액션 필요

본문 발췌

무한스크롤과 페이지네이션 레퍼런스를 몇가지 첨부한다.
인피니트 스크롤이 적용되는 레퍼런스로는 유투브, 구글 이미지검색, 인스타그램, 네이버 이미지 검색등에 적용되어있다.

두가지 레퍼런스를 보면, 유투브 검색결과는 키워드 기반으로 하는 콘텐츠 추천까지 표시하고 있어 무한 스크롤로 사용자가 원하는 콘텐츠가 나올때 까지 정보를 표시한다.

다음 레퍼런스는 구글의 검색결과 화면이다. 전체탭의 경우 결과 ‘결과 더보기’로 페이지네이션 기능을 간접적으로 사용하고있으며, (전체 탭의 경우
이미지 탭의 경우 키워드와 관련된 이미지까지 모두 표시하므로 무한 스크롤이 적용된다.

구글의 경우 검색결과를 콘텐츠의 성격에 따라 탭으로 구분하여 표시하는데,
페이지 구분을 하는 경우와 하지않는 경우 어떻게 구분되어있는지 확인해보았다.

네이버도 마찬가지로 콘텐츠 성격에 따라 페이지를 구분하거나, 무한 스크롤을 사용하는 두가지 방식을 사용하고 있다.
눈여겨볼것은 페이지 구분을 두가지 방식으로 사용하고 있다는점인데, 쇼핑의 경우 페이지에 숫자를 표시하여 검색결과 페이지 수량을 알 수 있도록 되어있고 지식백과, 뉴스는 더보기 개수를 표시하고 있으며, 실시간 결과의 경우 더보기 텍스트 + 새로고침을 제공하고있다.

두가지 탐색 방식을 혼용하며 필요한 경우를 어떻게 구분하고있는지 참고할 것.



두가지 방식은 모두 장단점이 있으며,
사용자의 목표와 컨텐츠의 성격에 따라 두가지 방식을 적절히 사용해야한다.
무한 스크롤은 사용자가 특별한 목적 없이 탐색할 때 콘텐츠를 추천을 위한 형태로 적합하고, 페이지네이션의 경우 특정 목적을 가지고 탐색하는 경우 적합하다고 생각한다.

개인적으로는 모바일 경험이 늘어남에 따라 웹사이트가 콘텐츠 숫자를 제한하여 페이지네이션 하여 숫자를 매기던 방식은 이제 오래된 방식처럼 느껴졌다.
하지만 UI는 개인의 취향이나 가정으로 접근해서는 안된다는것을 다시한번 깨닫는다.

위와 관련된 링크 첨부

페이지네이션 컨트롤 원칙 9가지 -전민수님
https://brunch.co.kr/@ebprux/93
무한 스크롤 vs 페이지네이션 vs ‘더보기’ 버튼 – 정윤선님
https://brunch.co.kr/@blackindigo-red/13


예전 프로젝트에서 메인 피드에 가로 스크롤이 되는 무한 스크롤 페이지를 설계했던 경험이 있는데, 결과적으로 보면 성공적이지는 못했다.
이부분을 정리하여 언젠가는 가로스크롤에 대한 이야기도 정리해봐야겠다.


댓글 남기기

워드프레스닷컴으로 이처럼 사이트 디자인
시작하기