본문 바로가기
FE/Web

Pagination vs Infinite Scroll

by ideal_string 2022. 9. 28.

게시글이 많아지면 당연히 다음 페이지를 넘어가는 번호가 뜬다. 우린 이게 당연한 줄 알고 살았다 웹이 나온 후로 계속. 그러나 무한 스크롤이라는 새로운 페이지 업데이트 방법이 나타나며, 우리는 두 가지 선택지를 얻었다. 페이지네이션(Pagination), 무한 스크롤(Infinite Scroll) 장단점을 정리해봤다.

페이지네이션

우리가 보는 페이지 넘기는 모든 방식이 페이지네이션이다. 숫자든 화살표든 그 원리는 같다. 전체 게시물 수에서 해당 페이지에 보여줄 게시물 만큼씩 제외하면 해당 페이지 갯수가 나온다. 

 

장점

  • 현재 페이지를 알 수 있고, 원하는 페이지를 찾아갈 수 있다.
  • 마지막 페이지를 가늠할 수 있어, 시간과 정보량에 대한 감을 느낄 수 있다.
  • 특정 항목의 페이지를 파악할 수 있다.

단점

  • 일일이 다음 페이지 혹은 특정 페이지 번호를 눌러야 한다.
  • 한 페이지 내에서 제한된 정보만 표출한다.

 

 

무한 스크롤

숫자나 화살표 모양 없이 마지막 게시물에 도달하기 전, 사용자가 인지하기도 전에 다음 페이지를 보여주는 모든 방식을 무한 스크롤 방식이라 부른다. 끝 없는 정보의 흐름을 마주한다.

 

장점

  • 스크롤만 내리면 되기에 콘텐츠 탐색이 쉽다.
  • 모바일의 경우 클릭하는 것보다 더 나은 사용자 경험을 제공한다.

 

단점

  • 한 페이지에 많은 게시물을 불러와 페이지 성능이 느려진다.
  • 특정 항목을 다시 찾기 어렵다.
  • 게시물이 매우 많다면 푸터를 만나기 어렵다.
  • 양을 가늠할 수 없어 언제 원하는  항목이 나올 지 예상할 수 없다.
  • 상단으로 다시 이동하기 어렵다.
  • 구글 크롤러의 경우 첫화면만 크롤링하기에 전체 게시물 색인이 어려울 수 있다.

 

마무리

비교하게 되는 것 중 무조건 어느 것이 좋다고 할 수 있는게 없다. 여기도 마찬가지다. 페이지네이션이 무조건 좋고, 무한 스크롤이 무조건 나쁘다 이럴 수 없다. 우리 주변 UI만 봐도 두 개가 공존한다. 다만, 우선하거나 선호하는 분야는 있는 듯하다. 검색, 쇼핑과 같이 특정 항목을 찾아야하는 곳은 페이지네이션이, SNS, OTT와 같이 킬링타임으로 시간을 보내는 곳은 무한 스크롤이 우세하다. 이는 서비스 중인 웹이 사용자에게 어떻게 쓰이느냐를 고민한 결과라고 본다. 이 둘을 적절하게 섞은 듯한 'load more'버튼 방식도 있다. 페이지네이션이냐 무한스크롤이냐를 단순히 비교할 게 아니라 이 서비스를 사용자가 어떻게 사용할 지 먼저 시뮬레이션을 돌려보며 정하는 게 좋은 듯하다.

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)

'FE > Web' 카테고리의 다른 글

token, XSS, CSRF  (1) 2022.10.25
Browser’s Rendering Process  (0) 2022.10.24
권한 분기  (0) 2022.10.23
Cookie, Session, Local Storage  (0) 2022.10.12
NoSQL vs SQL  (0) 2022.10.11