페이지네이션(Pagination) 학습

페이지네이션(Pagination)은 방대한 양의 데이터를 한꺼번에 보여주지 않고, 일정한 단위로 나누어 여러 페이지에 걸쳐 보여주는 사용자 인터페이스입니다. 책의 페이지 번호처럼 현재 위치와 전체 흐름을 직관적으로 이해할 수 있게 돕습니다.

이미지

페이지네이션 UI 예시 이미지

설명

1. 페이지네이션의 UX/UI 목적

  • 성능 최적화 (Performance): 데이터가 많을 때 10개/20개씩 나눠 로딩하면 초기 속도가 훨씬 빨라집니다.
  • 사용자 인지 부하 감소: 현재 위치와 전체 양을 알려줘서 압도감을 줄이고 탐색 안정감을 줍니다.
  • 접근성 (Accessibility): "3페이지쯤"처럼 위치 기억이 쉬워 재탐색에 유리합니다. 무한 스크롤보다 추적성이 좋습니다.

2. UI 디자인 체크리스트

  • 현재 페이지 표시(Active State): 눈에 띄는 색상/굵기로 명확하게 강조합니다.
  • 이전/다음 버튼: 한 페이지씩 이동하는 기본 네비게이션을 제공합니다.
  • 처음/끝 버튼: 데이터가 많을 때 맨 앞/맨 뒤 이동 버튼이 탐색 효율을 높입니다.
  • 충분한 클릭 영역: 모바일에서도 누르기 쉽도록 간격과 패딩을 넉넉하게 둡니다.

4. 페이지네이션 vs 무한 스크롤 (Infinite Scroll)

적합 콘텐츠 페이지네이션: 상품/게시판/정보성 글, 무한 스크롤: SNS 피드/갤러리
장점 페이지네이션: 위치 찾기/푸터 접근 용이, 무한 스크롤: 몰입감/모바일 친화
단점 페이지네이션: 클릭 필요로 흐름 단절, 무한 스크롤: 특정 위치 재탐색이 어려움

교수님의 실전 팁

"검색 결과나 정교한 데이터 확인이 필요한 사이트(쇼핑몰, 블로그)는 페이지네이션이 유리하고, 인스타그램처럼 연속 소비가 목적이면 무한 스크롤이 적합합니다. 최근에는 1~5페이지 + 더보기 버튼을 결합한 혼합 방식도 많이 사용됩니다."

코드

HTML

<nav class="pagination-container">
  <ul class="pagination">
    <li class="page-item"><a href="#" class="page-link prev">이전</a></li>
    <li class="page-item active"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link next">다음</a></li>
  </ul>
</nav>

CSS

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}
.page-item {
  margin: 0 5px;
}
.page-link {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: background 0.3s;
}
.page-link:hover {
  background-color: #f0f0f0;
}
.page-item.active .page-link {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
.prev, .next {
  background-color: #f8f9fa;
  font-weight: bold;
}

jQuery (동작 제어)

$(document).ready(function() {
  $('.page-link').on('click', function(e) {
    e.preventDefault();

    if (!$(this).hasClass('prev') && !$(this).hasClass('next')) {
      $('.page-item').removeClass('active');
      $(this).parent('.page-item').addClass('active');

      let pageNum = $(this).text();
      console.log(pageNum + "페이지로 이동합니다.");
    }
  });
});

실행