페이지네이션 디자인 완전 정복: 클릭률 높이는 세련된 하단 버튼 CSS 5가지 실전 예제

페이지네이션(번호 매기기) 디자인 다음 글 보기를 유도하는 세련된 하단 버튼

클릭률 높이는 세련된 하단 버튼 CSS 5가지 실전 예제

페이지네이션 디자인을 제대로 적용하면 독자가 다음 글로 자연스럽게 이동하게 되고 블로그 전체 페이지뷰가 올라간다. 밋밋한 숫자 나열 대신 시각적으로 매력 있는 버튼을 만들면 클릭률이 확연히 달라진다.

페이지 하단에 오면 '다음 페이지'를 눌러야 하는데 버튼이 어딨는지도 모르겠고, 눌러도 반응이 없는 것처럼 보이는 블로그들이 있다. 반대로 버튼이 예쁘고 명확하면 굳이 안 눌러도 손이 간다. 이게 UX의 힘이다.

 

📋목차

• 페이지네이션이 SEO와 UX에 미치는 영향
• 기본 HTML 페이지네이션 구조
• CSS로 만드는 5가지 페이지네이션 스타일
• 현재 페이지 강조 표시 방법
• 이전/다음 버튼 화살표 추가하기
• 티스토리 블로그 페이지네이션 커스터마이징
• 반응형 페이지네이션 처리

📊 페이지네이션이 SEO와 UX에 미치는 영향

"페이지네이션 디자인"은 단순한 번호 나열이 아니다. 구글은 rel="next"와 rel="prev" 링크를 통해 페이지 간 관계를 파악한다. 페이지네이션이 올바르게 구현되어 있으면 크롤러가 블로그 전체 콘텐츠를 효율적으로 탐색할 수 있다.

UX 측면에서는 사용자가 현재 몇 페이지에 있는지, 전체 몇 페이지가 있는지를 직관적으로 파악할 수 있어야 한다. 이 정보가 명확할수록 독자의 탐색 의지가 높아진다.

🏗️ 기본 HTML 페이지네이션 구조

시맨틱 HTML로 페이지네이션을 구성할 때는 nav 태그를 사용하는 게 표준이다. 검색엔진이 이 영역을 내비게이션으로 인식할 수 있다.

<nav aria-label="페이지 내비게이션">
  <ul class="pagination">
    <li><a href="?page=1">&laquo;</a></li>
    <li><a href="?page=1">1</a></li>
    <li class="active"><a href="?page=2">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><a href="?page=3">&raquo;</a></li>
  </ul>
</nav>

 

aria-label은 접근성(accessibility)을 위해 추가하는 속성이다. 스크린 리더 사용자가 이 영역이 페이지 내비게이션임을 알 수 있다. 애드센스 승인 심사에서도 접근성은 중요한 기준 중 하나다.

🎨 CSS로 만드는 5가지 페이지네이션 스타일

바로 쓸 수 있는 "페이지네이션 디자인" 5가지 예제를 소개한다.

첫 번째, 라운드 버튼 스타일이다.

 

.pagination { list-style: none; display: flex; gap: 8px; padding: 0; }
.pagination li a {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: #f5f5f5; color: #333; text-decoration: none;
transition: all 0.2s;
}

.pagination li a:hover { background: #333; color: #fff; }
.pagination li.active a { background: #333; color: #fff; }

 

두 번째, 플랫 사각 스타일이다.

.pagination li a {
padding: 8px 14px; border: 1px solid #ddd;
background: #fff; color: #555; text-decoration: none;
transition: background 0.2s;
}

.pagination li.active a { background: #0070f3; color: #fff; border-color: #0070f3; }

 

세 번째, 언더라인 스타일이다. 버튼 느낌 없이 텍스트 기반으로 만들 때 쓴다.

.pagination li a {
padding: 8px 12px; color: #888; text-decoration: none;
border-bottom: 2px solid transparent; transition: all 0.2s;
}.pagination li a:hover { color: #333; border-bottom-color: #333; }
.pagination li.active a { color: #e63946; border-bottom-color: #e63946; }

 

네 번째, 그라디언트 강조 스타일이다.

.pagination li.active a {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff; border-radius: 6px;
}

다섯 번째, 아웃라인 스타일이다.

.pagination li a {
border: 2px solid transparent; border-radius: 6px; padding: 7px 14px;
color: #555; text-decoration: none;
}
.pagination li a:hover { border-color: #555; }
.pagination li.active a { border-color: #e63946; color: #e63946; }

✨ 현재 페이지 강조 표시 방법

현재 페이지가 어딘지 명확하게 보여주는 게 좋은 "페이지네이션 디자인"의 기본이다. active 클래스를 현재 페이지 li에 추가하고 CSS로 강조 표시를 준다.

색상 반전, 테두리 강조, 폰트 볼드 등 다양한 방법을 쓸 수 있다. 중요한 건 한눈에 '지금 여기 있다'는 게 보여야 한다는 것이다.

➡️ 이전/다음 버튼 화살표 추가하기

숫자 외에 이전/다음 버튼을 추가하면 내비게이션이 더 직관적이 된다. 특수문자나 CSS로 화살표를 만들 수 있다.

.pagination .prev::before { content: "←"; margin-right: 4px; }
.pagination .next::after { content: "→"; margin-left: 4px; }

유니코드 화살표(‹, ›, «, ») 또는 Font Awesome 아이콘을 써도 된다. 텍스트보다 아이콘이 더 직관적으로 인식되는 경우가 많다.

🏠 티스토리 블로그 페이지네이션 커스터마이징

티스토리의 기본 페이지네이션 클래스는 skin.html에서 확인할 수 있다. 보통 .paging이나 .paginate 같은 클래스가 붙어 있다. 개발자 도구(F12)로 구조를 확인한 뒤 해당 클래스에 원하는 스타일을 덮어씌우면 된다.

.paging { display: flex; justify-content: center; gap: 6px; margin: 30px 0; }
.paging a { width: 36px; height: 36px; display: flex; align-items: center;
justify-content: center; border-radius: 4px; background: #f0f0f0; }
.paging .active, .paging strong { background: #333; color: #fff; }

📱 반응형 페이지네이션 처리

모바일에서 페이지 번호가 너무 많으면 줄 바꿈이 생겨 레이아웃이 깨진다. 모바일에서는 현재 페이지 앞뒤 1~2개 정도만 보여주고 나머지는 숨기는 방식을 쓰는 게 일반적이다.

@media (max-width: 480px) {
.pagination li:not(.active):not(.prev):not(.next) {
display: none;
}
}

혹은 모바일에서는 이전/다음 버튼만 크게 보여주는 심플한 구성도 좋다.

---

출처 및 참고
- MDN nav: https://developer.mozilla.org/ko/docs/Web/HTML/Element/nav
- Google Search Pagination: https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading
- A11y Pagination: https://www.w3.org/WAI/ARIA/apg/patterns/