페이지네이션이란? 무한 스크롤과의 차이가 무엇일까?

안녕하세요. 사랑받는 IT 프로덕트의 첫걸음, 똑똑한개발자입니다.

오늘의 인사이트 요약
페이지네이션은 긴 목록을 여러 페이지로 나누는 방식입니다.
더 보기와 무한 스크롤은 같은 화면에 결과를 이어 붙입니다.
목록으로 돌아왔을 때 위치와 검색 조건이 유지되는지도 중요합니다.

페이지네이션(pagination)은 게시물이나 검색 결과처럼 긴 목록을 여러 페이지로 나눠 보여주는 방식입니다. 목록 아래의 이전·다음 링크와 페이지 번호가 대표적인 예입니다. 한 번에 모든 항목을 불러오지 않고 필요한 묶음을 보여주면서, 사용자가 다른 페이지로 이동할 수 있게 합니다.

스크롤할수록 내용이 계속 붙는 화면은 무한 스크롤, 버튼을 눌렀을 때 추가되는 화면은 더 보기 방식입니다. 세 방식은 모두 긴 목록을 나누지만 사용자가 다음 내용을 여는 동작은 다릅니다. 오늘은 페이지네이션과 무한 스크롤의 차이, 화면에 맞는 선택 기준을 알아보겠습니다.

1. 페이지네이션은 어떻게 동작하나요?

목록에서 다음 페이지를 선택하면 다음 묶음의 데이터를 가져와 표시합니다. 예를 들어 한 페이지에 게시물을 20개씩 보여주는 목록이라면 첫 페이지와 두 번째 페이지는 서로 다른 묶음을 보여줍니다. 이는 설명을 위한 예이며, 페이지당 항목 수는 화면 크기와 데이터 특성에 따라 달라집니다.

페이지를 바꾼다고 반드시 화면 전체를 새로 불러오는 것은 아닙니다. 주소를 이동하는 방식도 있고 목록 부분만 갱신하는 방식도 있습니다. 사용자에게 보이는 페이지 번호와 서버에서 데이터를 나누는 방법도 구분할 수 있습니다. 서버는 몇 번째 항목부터 가져올지 지정하거나 마지막 항목을 기준으로 다음 묶음을 요청받을 수 있습니다.

현재 위치를 알려주는 번호와 링크

페이지 번호는 목록에서 현재 위치를 알아보는 단서입니다. 이전·다음 링크에 이동할 방향을 표시하고 현재 페이지를 구별하면 탐색하기 쉽습니다. 숫자가 많다면 일부를 줄여 보여줄 수도 있습니다. 현재 페이지 표시와 링크 구성을 구체적으로 살펴보고 싶다면 GOV.UK의 페이지네이션 컴포넌트를 참고해 보세요.

목록이 한 페이지로 끝나면 이동할 페이지가 없으므로 번호를 보여줄 이유도 줄어듭니다. GOV.UK 역시 콘텐츠가 한 페이지만 있을 때는 페이지네이션을 표시하지 않도록 안내합니다. 반대로 긴 목록이라고 무조건 나눌 필요는 없습니다. 읽기 흐름과 불러오는 시간을 함께 보고 나눴을 때 실제로 더 편해지는지 판단할 수 있습니다.

2. 더 보기·무한 스크롤과 무엇이 다른가요?

페이지네이션은 다른 묶음으로 이동하고, 더 보기는 버튼을 눌러 현재 목록 아래에 결과를 추가합니다. 무한 스크롤은 목록 끝에 가까워졌을 때 다음 결과를 자동으로 붙입니다. 차이는 추가 결과를 여는 동작과 이전 결과를 화면에 남기는 방식에 있습니다.

특정 항목을 찾아 비교하거나 전에 본 묶음으로 다시 가려는 경우에는 페이지 구분이 단서가 될 수 있습니다. 더 보기는 사용자가 추가로 읽을 시점을 직접 고르고, 무한 스크롤은 계속 훑어보는 흐름을 이어줍니다. 다만 어느 방식이든 상세 화면에서 목록으로 돌아오는 경험이 나쁘면 탐색을 다시 해야 합니다.

목록의 끝과 돌아올 위치

무한 스크롤은 내용이 자동으로 늘어나므로 끝을 예측하기 어렵고, 하단의 안내나 링크에 접근하려다 목록이 더 붙을 수 있습니다. GOV.UK 디자인 시스템은 키보드 사용자의 문제를 이유로 무한 스크롤을 피하도록 안내합니다. 해당 서비스의 설계 기준을 모든 화면에 똑같이 적용할 필요는 없습니다.

예를 들어 보겠습니다.
담당자가 주문 목록의 특정 고객을 찾고 상세 내역을 확인한 뒤 돌아온다고 가정합니다. 페이지 번호가 있더라도 검색 조건이 사라지면 같은 검색을 반복해야 합니다. 무한 스크롤에서도 목록과 위치를 복원하면 다시 찾는 부담을 줄일 수 있습니다.

3. 어떤 목록에 어떤 방식이 맞을까요?

업무 목록처럼 찾을 대상이 분명하고 다시 확인할 일이 많다면 위치와 조건을 복원하는 기능부터 살펴보는 편이 좋습니다. 페이지 번호만으로 특정 항목의 위치가 영구히 고정되지는 않습니다. 새 항목이 앞에 추가되거나 정렬 기준이 바뀌면 같은 페이지에 다른 항목이 나타날 수 있습니다.

콘텐츠를 연속해서 둘러보는 화면은 더 보기나 무한 스크롤을 검토할 수 있습니다. 이때는 불러오는 중인지, 실패했는지, 모든 결과를 봤는지 알려주는 목록 상태 안내도 필요합니다. 추가 로딩에 실패했다고 이미 읽던 결과까지 사라지면 사용자는 작업을 이어가기 어렵습니다. 새 결과가 붙은 뒤 키보드로 어떻게 이동하는지도 확인해 보세요.

검색엔진이 다음 내용에 접근하는 방법

공개 웹사이트라면 사람의 탐색과 검색엔진의 접근을 함께 고려할 수 있습니다. Google은 크롤러가 일반적으로 버튼을 클릭하거나 사용자 동작이 필요한 JavaScript를 실행하지 않는다고 설명합니다. 더 보기 버튼만 제공해 다음 결과를 여는 화면이라면 크롤링 가능한 연결을 별도로 검토해야 합니다. 구현 조건은 Google의 페이지네이션과 점진적 로딩 안내에서 더 자세히 보실 수 있습니다.

검색엔진의 접근을 허용해도 검색 순위나 노출이 보장되지는 않습니다. 화면을 고를 때도 유행하는 형식보다 사용자가 무엇을 찾는지가 출발점입니다. 한 항목을 확인하러 오는지, 여러 항목을 계속 둘러보는지에 따라 목록을 나누고, 상세 화면을 다녀온 뒤에도 탐색을 이어갈 수 있게 만드는 것이 좋습니다.

찾던 내용을 다시 이어볼 수 있도록

목록에 페이지 번호를 넣었는데도 사용자가 찾기 어렵다면 검색 조건이나 돌아오는 화면을 함께 살펴볼 수 있습니다. 똑똑한개발자는 프로덕트 기획·디자인·개발·운영을 연결해 웹과 앱의 사용 흐름을 설계합니다. 목록의 모양과 데이터 표시 방식이 실제 이용 목적에 맞는지 함께 검토할 수 있습니다.

서비스의 목록 탐색과 화면 흐름을 개선하고 싶다면 아래 똑똑한개발자 링크로 편하게 문의해 주세요. 감사합니다. :)