페이지네이션(Pagination)과 스크롤링(Scrolling)

페이지네이션(Pagination)과 스크롤링(Scrolling)은 웹 애플리케이션이나 모바일 애플리케이션에서 콘텐츠를 표시하는 방식의 차이를 말합니다. 두 방식은 데이터가 많은 경우 사용자가 원하는 정보를 쉽게 찾을 수 있도록 하는 데 도움을 주지만, 사용자 경험과 구현 방식에 차이가 있습니다.

1. 페이지네이션(Pagination)

페이지네이션은 데이터가 여러 페이지로 나뉘어 한 번에 일정 수의 데이터만 표시되는 방식입니다. 사용자가 페이지 번호를 선택하거나 "다음" 버튼을 눌러 이동할 수 있습니다.

특징

• 고정된 데이터 양: 한 페이지에 표시되는 데이터 수가 고정되어 있어, 서버의 부담이 적습니다.
• 명확한 위치: 사용자는 현재 몇 페이지에 있는지 명확히 알 수 있고, 원하는 페이지로 이동이 가능합니다.
• 구현의 용이성: 페이지네이션은 일반적으로 구현이 쉽고, 사용자가 많은 데이터를 정리해서 보기에 좋습니다.
• SEO 친화적: 각 페이지에 고유한 URL을 부여할 수 있어 검색 엔진 최적화에 유리합니다.

예시

• 전자 상거래 웹사이트의 상품 목록 페이지.
• 블로그 게시물 목록 페이지.

페이지네이션 구현 시, 데이터베이스에서 데이터를 분할하여 가져오는 방법은 주로 두 가지입니다: 오프셋 기반과 키셋 기반(Keyset Pagination) 방식입니다. 각 방식은 페이지네이션에서 성능에 영향을 미치며, 특히 대규모 데이터셋에서 차이가 큽니다.

1. 오프셋 기반 페이지네이션 (Offset Pagination)

오프셋 기반 페이지네이션은 데이터의 시작 위치(오프셋)를 지정하여 데이터를 가져오는 방식입니다. 주로 SQL의 OFFSET과 LIMIT을 사용하여 구현됩니다.

SELECT * FROM posts
ORDER BY created_at DESC
LIMIT 10 OFFSET 20;

위 쿼리는 posts 테이블에서 created_at을 기준으로 최신순으로 정렬하고, 21번째 데이터부터 10개의 데이터를 가져옵니다.

특징

• 구현이 간단하며, 페이지 번호와 데이터 수를 사용하여 SQL 쿼리의 OFFSET과 LIMIT 값만 변경하면 됩니다.
• 성능 이슈가 있습니다. 오프셋이 큰 경우, 데이터베이스는 지정된 위치까지 데이터를 스캔해야 하기 때문에 성능이 저하됩니다. 특히, 데이터가 수천에서 수백만 건에 이를 경우 성능 문제가 심각해질 수 있습니다.
• 일관성 문제: 데이터가 추가되거나 삭제될 때 오프셋이 변경되므로, 정확한 위치를 보장하기 어려울 수 있습니다. 예를 들어, 사용자가 페이지를 이동하는 동안 새로운 데이터가 추가되면 동일한 오프셋이 이전과 다른 데이터를 반환할 수 있습니다.

2. 키셋 기반 페이지네이션 (Keyset Pagination)

키셋 기반 페이지네이션은 데이터의 고유 키나 특정 컬럼의 값을 기준으로 페이지네이션하는 방식입니다. 이 방식은 OFFSET 없이 WHERE 조건을 이용하여 마지막으로 가져온 항목 이후의 데이터를 가져옵니다.

SELECT * FROM posts
WHERE created_at < '2023-10-01 00:00:00'
ORDER BY created_at DESC
LIMIT 10;

위 쿼리는 created_at이 '2023-10-01 00:00:00' 이전인 데이터 중 최신 10개를 가져옵니다. 다음 페이지를 요청할 때는 마지막으로 가져온 created_at 값을 사용해 더 이전의 데이터를 가져옵니다.

특징

• 성능 최적화: 오프셋이 아닌 인덱스나 고유 키를 사용하여 조건을 설정하므로, 데이터베이스의 인덱스가 효과적으로 사용되고 성능이 크게 향상됩니다.
• 일관성 유지: 데이터 추가/삭제가 이루어져도, 고유 키나 특정 컬럼을 기준으로 가져오기 때문에 일관성을 유지하기 쉽습니다.
• 구현의 복잡성: 다음 페이지의 기준 값을 저장하고, 이를 기반으로 쿼리를 구성해야 하므로 오프셋 방식에 비해 구현이 조금 더 복잡할 수 있습니다.

오프셋과 키셋 비교 요약

특징	오프셋 기반 페이지네이션	키셋 기반 페이지네이션
성능	오프셋이 클수록 성능 저하 발생	인덱스를 사용하여 빠른 조회 가능
일관성	데이터 추가/삭제 시 일관성 유지 어려움	데이터 추가/삭제와 무관하게 일관성 유지
구현 난이도	구현이 간단	마지막 값 저장과 조건 추가로 복잡해질 수 있음
적합한 상황	데이터가 적고, 단순한 페이지네이션에 적합	데이터가 많고 성능 최적화가 필요한 경우 적합

요약: 데이터의 양이 적다면 오프셋 방식이 편리하고 구현이 쉬운 반면, 데이터가 많고 성능이 중요한 경우 키셋 기반 페이지네이션이 더 적합합니다.

---

2. 스크롤링(Scrolling)

 

스크롤링 방식은 사용자가 페이지를 아래로 내리면서 새로운 데이터를 자동으로 불러오는 방식입니다. 이를 "무한 스크롤" 또는 "Infinite Scrolling"이라고 부르기도 합니다.

특징

• 끊김 없는 탐색: 사용자가 별도의 페이지 이동 없이도 스크롤을 계속 내리며 콘텐츠를 탐색할 수 있어 몰입감이 높습니다.
• 데이터 로딩 방식: 데이터는 사용자가 스크롤할 때마다 추가로 불러오기 때문에 초기에 로딩되는 데이터 양이 적습니다.
• 구현의 복잡성: 페이지네이션에 비해 구현이 복잡하며, 특히 모바일 환경에서 최적화가 필요합니다.
• SEO 제한: URL을 페이지 단위로 나누기 어렵기 때문에 검색 엔진 최적화에 불리할 수 있습니다.

예시

• SNS 피드(예: 인스타그램, 페이스북)
• 뉴스 피드나 댓글 리스트

페이지네이션과 스크롤링 비교 요약

특징	페이지네이션	스크롤링
데이터 로딩	고정된 데이터 양만 로드	스크롤 시 추가 데이터 로드
사용자 경험	명확한 위치 표시, 사용자가 페이지 이동 가능	끊김 없는 탐색, 몰입감이 좋음
SEO	SEO 친화적	SEO에 불리
구현 난이도	구현이 비교적 쉬움	구현이 복잡하고, 성능 최적화 필요
적합한 상황	정적 콘텐츠 목록(상품 리스트, 게시판)	동적 피드(SNS, 뉴스)

두 방법은 사용자가 콘텐츠를 탐색하는 방식에 큰 영향을 미치기 때문에, 애플리케이션의 특성에 맞는 방식을 선택하는 것이 중요합니다.