🔍 웹 애플리케이션 페이징 처리 완전 정복하기

안녕하세요! 오늘은 웹 개발을 하다 보면 피할 수 없는 페이징 처리에 대해 완벽하게 정리해보려고 합니다. 대량의 데이터를 효율적으로 보여주기 위한 페이징 처리는 어떻게 하면 될까요? 프론트엔드부터 백엔드, DB까지 전체 흐름을 살펴보고 최적화 방법까지 한 번에 알아보겠습니다.

📚 목차

1. 페이징 처리가 필요한 이유
2. 데이터베이스 페이징 구현하기
3. 웹 페이징 처리의 전체 흐름
4. 페이징 최적화 전략
5. 페이징 대안 기법들

페이징 처리가 필요한 이유

SNS 피드, 쇼핑몰 상품 목록, 게시판... 이런 서비스들의 공통점은 뭘까요? 바로 대용량 데이터를 다룬다는 점입니다.

예를 들어볼까요? 만약 쇼핑몰에 상품이 10,000개 있다면, 이걸 한 페이지에 다 보여준다고 상상해보세요. 😱

• 서버 부하: 10,000개 데이터를 한 번에 조회하고 전송하면 서버에 부담
• 네트워크 트래픽: 불필요하게 많은 데이터 전송으로 네트워크 낭비
• 사용자 경험: 한 페이지에 10,000개 상품이 로딩되는 동안 사용자는 기다려야 함
• 렌더링 부하: 브라우저가 10,000개 요소를 렌더링하느라 느려짐

이런 문제를 해결하기 위해 페이징 처리는 필수입니다.

데이터베이스 페이징 구현하기

LIMIT와 OFFSET의 마법 ✨

MySQL이나 PostgreSQL 같은 데이터베이스에서는 LIMIT와 OFFSET 구문으로 페이징을 구현합니다.

SELECT * FROM products ORDER BY id LIMIT 10 OFFSET 20;

이 쿼리는 무슨 의미일까요?

• LIMIT 10: 최대 10개 행만 가져와!
• OFFSET 20: 처음 20개는 건너뛰고 그 다음부터 가져와!

쉽게 생각하면:

• 1페이지(1~10번): LIMIT 10 OFFSET 0
• 2페이지(11~20번): LIMIT 10 OFFSET 10
• 3페이지(21~30번): LIMIT 10 OFFSET 20

이걸 수식으로 표현하면 이렇게 됩니다:

OFFSET = (페이지 번호 - 1) × 페이지 크기
LIMIT = 페이지 크기

데이터베이스별 페이징 구문

각 데이터베이스마다 페이징 구문이 조금씩 다릅니다:

MySQL/PostgreSQL

SELECT * FROM products ORDER BY id LIMIT 10 OFFSET 20;
-- 또는
SELECT * FROM products ORDER BY id LIMIT 10, 20; -- (LIMIT 개수, OFFSET)

Oracle

SELECT * FROM (
    SELECT rownum as rnum, p.*
    FROM products p
    WHERE rownum <= 30
) WHERE rnum > 20;

SQL Server

SELECT * FROM products
ORDER BY id
OFFSET 20 ROWS FETCH NEXT 10 ROWS ONLY;

웹 페이징 처리의 전체 흐름

페이징이 어떻게 동작하는지 전체 흐름을 따라가볼까요?

사용자 → 프론트엔드 → 백엔드 → DB → 백엔드 → 프론트엔드 → 사용자

1. 사용자 요청 단계 🧑‍💻

사용자가 페이지네이션 UI에서 "3페이지" 버튼을 클릭하면:

// Fetch API로 요청 보내기
fetch('/api/products?page=3&size=10')
  .then(response => response.json())
  .then(data => {
    // 받은 데이터로 화면 업데이트하기
    renderProducts(data.products);
    renderPagination(data.currentPage, data.totalPages);
  });

2. 백엔드 처리 단계 ⚙️

// 요청에서 페이지 정보 추출
int page = Integer.parseInt(request.getParameter("page"));
int size = Integer.parseInt(request.getParameter("size"));

// 유효성 검사 (음수나 너무 큰 값 방지)
if (page < 1) page = 1;
if (size < 1 || size > 100) size = 10;

// OFFSET 계산
int offset = (page - 1) * size; // 3페이지면 offset = 20

3. DB 쿼리 단계 💾

// 데이터 조회 쿼리
String query = "SELECT * FROM products ORDER BY id LIMIT ? OFFSET ?";
PreparedStatement stmt = connection.prepareStatement(query);
stmt.setInt(1, size);   // 10
stmt.setInt(2, offset); // 20

// 전체 상품 개수도 알아야 총 페이지 수를 계산할 수 있어요
String countQuery = "SELECT COUNT(*) FROM products";

4. 백엔드 응답 구성 단계 📦

// 데이터 가져오기
List<Product> products = new ArrayList<>();
while (rs.next()) {
    // ResultSet에서 상품 정보 추출
    Product product = new Product();
    product.setId(rs.getLong("id"));
    product.setName(rs.getString("name"));
    products.add(product);
}

// 전체 개수로 페이지 정보 계산
int totalItems = countRs.getInt(1);
int totalPages = (int) Math.ceil((double) totalItems / size);

// JSON 응답 구성
Map<String, Object> response = new HashMap<>();
response.put("products", products);
response.put("currentPage", page);
response.put("totalPages", totalPages);
response.put("totalItems", totalItems);

return ResponseEntity.ok(response);

5. 프론트엔드 결과 표시 단계 🎨

// 상품 목록 렌더링
function renderProducts(products) {
  const container = document.getElementById('products-container');
  container.innerHTML = '';
  
  products.forEach(product => {
    const productEl = document.createElement('div');
    productEl.className = 'product-item';
    productEl.innerHTML = `
      <h3>${product.name}</h3>
      <p>${product.price}원</p>
    `;
    container.appendChild(productEl);
  });
}

// 페이지네이션 UI 렌더링
function renderPagination(currentPage, totalPages) {
  const paginationEl = document.getElementById('pagination');
  paginationEl.innerHTML = '';
  
  // 이전 페이지 버튼
  if (currentPage > 1) {
    addPageButton(paginationEl, currentPage - 1, '이전');
  }
  
  // 페이지 번호 버튼들 (현재 기준 좌우 2개씩)
  const startPage = Math.max(1, currentPage - 2);
  const endPage = Math.min(totalPages, startPage + 4);
  
  for (let i = startPage; i <= endPage; i++) {
    addPageButton(paginationEl, i, i.toString(), i === currentPage);
  }
  
  // 다음 페이지 버튼
  if (currentPage < totalPages) {
    addPageButton(paginationEl, currentPage + 1, '다음');
  }
}

페이징 최적화 전략

성능 최적화 🚀

1. 인덱스 활용하기

   -- id에 인덱스가 있어야 ORDER BY가 빠르게 동작합니다
   CREATE INDEX idx_products_id ON products(id);

2. 필요한 컬럼만 조회하기

   -- SELECT *보다 필요한 컬럼만 명시하는 게 좋아요
   SELECT id, name, price, thumbnail FROM products 
   ORDER BY id LIMIT 10 OFFSET 20;

3. 결과 캐싱하기

   // Redis 같은 캐시에 페이지 결과를 저장
   String cacheKey = "products:page:" + page + ":size:" + size;
   
   // 캐시에 있으면 바로 반환
   if (redisCache.hasKey(cacheKey)) {
       return redisCache.get(cacheKey);
   }
   
   // 없으면 DB에서 조회 후 캐시에 저장
   Map<String, Object> result = queryDatabase(page, size);
   redisCache.set(cacheKey, result, 5, TimeUnit.MINUTES);
   return result;

4. COUNT 쿼리 최적화

   // 모든 페이지 요청마다 COUNT 쿼리를 실행하는 건 비효율적
   // 캐싱하거나 첫 페이지에서만 실행하는 전략을 고려해보세요

에러 처리 🛡️

// 존재하지 않는 페이지 요청 시 (페이지 번호가 총 페이지 수보다 큰 경우)
if (page > totalPages && totalPages > 0) {
    // 1. 마지막 페이지로 리다이렉트
    return "redirect:/products?page=" + totalPages;
    
    // 또는 2. 빈 결과와 함께 유효한 페이지 범위 정보 제공
    Map<String, Object> response = new HashMap<>();
    response.put("products", Collections.emptyList());
    response.put("currentPage", page);
    response.put("totalPages", totalPages);
    response.put("error", "요청한 페이지가 범위를 벗어났습니다.");
    return ResponseEntity.ok(response);
}

페이징 대안 기법들

무한 스크롤 📜

인스타그램이나 페이스북처럼 스크롤을 내리면 계속 컨텐츠가 로드되는 방식입니다.

window.addEventListener('scroll', function() {
    // 페이지 하단에 도달하면
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) {
        if (!isLoading) {
            isLoading = true;
            
            // 다음 페이지 데이터 로드
            fetch(`/api/products?page=${currentPage + 1}&size=10`)
                .then(response => response.json())
                .then(data => {
                    // 기존 목록에 새 데이터 추가
                    appendProducts(data.products);
                    currentPage++;
                    isLoading = false;
                });
        }
    }
});

장점:

• 사용자가 클릭 없이 자연스럽게 컨텐츠를 계속 볼 수 있어요
• 모바일 환경에 특히 적합합니다

단점:

• 특정 페이지로 직접 이동이 어려워요
• 스크롤을 많이 내리면 메모리 사용량이 증가해요

커서 기반 페이징 👆

OFFSET 대신 마지막으로 본 항목의 ID나 타임스탬프를 기준으로 다음 데이터를 가져오는 방식입니다.

-- 첫 페이지
SELECT * FROM products
ORDER BY created_at DESC
LIMIT 10;

-- 다음 페이지 (마지막으로 본 항목의 created_at 값이 '2023-04-15 14:30:00'일 때)
SELECT * FROM products
WHERE created_at < '2023-04-15 14:30:00'
ORDER BY created_at DESC
LIMIT 10;

장점:

• 대용량 데이터에서 OFFSET보다 훨씬 효율적이에요
• 새 데이터가 추가되더라도 페이지 결과가 밀리지 않아요

단점:

• 특정 페이지 번호로 바로 이동할 수 없어요
• 구현이 상대적으로 복잡해요

마무리

오늘은 웹 애플리케이션에서 페이징 처리를 구현하는 방법에 대해 자세히 알아봤습니다. 페이징은 단순해 보이지만 실제로는 프론트엔드, 백엔드, 데이터베이스가 모두 연결된 복잡한 작업입니다.

기본적인 OFFSET/LIMIT 방식부터 최신 트렌드인 무한 스크롤과 커서 기반 페이징까지, 여러분의 서비스에 맞는 페이징 전략을 선택하시길 바랍니다. 무엇보다 사용자 경험과 서버 성능 사이의 균형을 잘 찾는 것이 중요합니다!

다음에는 더 심화된 페이징 기법이나 대용량 데이터 처리 방법에 대해 다루도록 하겠습니다. 궁금한 점이나 의견이 있으시면 댓글로 남겨주세요! 😊

---

참고 자료

• MySQL 공식 문서 - LIMIT 구문
• PostgreSQL 공식 문서 - OFFSET 구문
• Spring Data JPA Pagination
• React 무한 스크롤 구현하기