[코딩기초] 무한스크롤 VS 페이지네이션

---

프로젝트 회의 할 때 우리 팀은 페이지네이션을 안 하고 무한스크롤을 사용한다고 해서 무슨 차이점이 있는지 궁금해서 공부해 봤다. 
우리 팀은 안드로이드 배포를 목표로 하고 있는데 금요일 전체 회의 때 한번 물어봐야겠다.

 

 

1. 무한스크롤(Infinite Scroll)?

: 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX, User Experience) 방식이다. 무한 스크롤은 Unsplash 등 이미지 스톡 사이트처럼 무거운 이미지 중심의 웹사이트나 모바일 환경에서 많이 사용된다고 한다.

(생각해 보면 우리 프로젝트는 안드로이드 배포를 목적으로 하고 있어서 무한스크롤을 사용하지 않나.. 싶다!)

 

 

2. 무한스크롤의 장, 단점?

• 무한 스크롤의 장점
  • 사용자 참여 및 콘텐츠 탐색이 쉽다.
     : 사용자가 웹 페이지에 더 오래 남아있을 수 있어서 참여도를 높일 수 있다고 한다.
    
    
  • 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공한다.
     : 클릭, 탭일 경우 각 콘텐츠를 보기 위한 추가 클릭이 필요한데, 스크롤은 그냥 스크롤만 하면 된다.
    
    
    

• 무한 스크롤의 단점
  • 페이지 성능이 느려진다.
     : 많은 콘텐츠가 업로드되면서 로딩 시간이 길어진다.
    
    
  • 특정 항목 검색 및 원래 위치로 돌아오기가 힘들다.
     : 사용자가 사이트에서 나갔다가 다시 들어와서 그 위치로 가려면 또다시 스크롤을 내려야 하는 불편함이 있다.
    
    
  • 스크롤 막대가 실제 데이터의 양을 반영하지 못한다.
     : 실제 사용 가능한 데이터의 양을 반영하지 못한다는 점이 있다.
    
    
  • 푸터를 찾기 어려워진다.
     : 피드를 무한 스크롤하면 하단에 도달할 때 더 많은 데이터가 로드되어 푸터는 시야 밖으로 밀려난다.

 

 

3. 페이지네이션(Pagination)

: 콘텐츠를 웹사이트의 또 다른 페이지들로 분리하는 방법이다. 페이지 하단에 있는 숫자 형식의 링크를 클릭하여 페이지들을 탐색할 수 있다. 각 포스트가 썸네일로 표시되며, 각 페이지에 나뉘어 배치된다. 다른 페이지로 이동하고 싶으면 하단의 번호가 매겨진 링크를 클릭하여 새로운 포스트로 넘어가면 된다.

 

 

4. 페이지네이션의 장, 단점?

• 페이지네이션의 장점
  • 사용자 의도에 맞게 페이지를 넘길 수 있다.
     : 사용자가 목록 내에서 특정 콘텐츠를 찾을 수 있다.
    
    
  • 통제감을 느낄 수 있다.
     : 사용자가 이용 가능한 결과의 수를 알고 원하는 정보가 그 페이지에 있는지 없는지도 쉽게 판단할 수 있다.
    
    
  • 특정 항목의 위치를 파악할 수 있다.
     : 만약 쇼핑몰에서 쇼핑을 한다고 가정하면, 내가 원하는 상품이 몇 번째 페이지에 있었는지 확인할 수 있다. 
    
    
    
• 페이지네이션의 단점
  • 페이지네이션은 추가적인 작업을 필요로 한다.
     : 페이지네이션은 버튼을 눌러 새로운 페이지로 가고, 새로운 페이지가 로드될 때까지 기다려야 한다.
  • 페이지네이션은 한 페이지에 제한된 내용만을 보여준다.
     : 무한스크롤은 계속 스크롤을 내려 콘텐츠를 볼 수 있는데 페이지네이션은 제한된 콘텐츠를 한 페이지에 담는다. 

 

---

 

프로젝트 덕분에 또 하나 배웠다.

내가 사용했던 경험을 봐도 모바일에서 인스타그램, 페이스북 등등 다 무한스크롤로 되어있었고, 웹페이지에서의 글을 볼 때는 페이지네이션이 되어있었다.

그리고 솔직히 백엔드 개발자로써 별로 신경을 안 썼던 UI / UX 쪽에서도 생각을 해보는 계기가 되었다.