블로그 페이지네이션과 태그 레이아웃 개선하기

학습 주제

• 학습 주제: 블로그 페이지네이션 및 태그 레이아웃 문제 해결
• 학습 날짜: 2026년 7월 15일

탐구 과정

블로그에 글이 쌓이면서 페이지네이션 숫자가 너무 길게 나열되거나, 태그 목록이 서로 겹쳐서 디자인을 해치기 시작했습니다. 처음에는 단순히 CSS 스타일 문제라고 생각했는데, 코드를 자세히 살펴보니 두 가지 근본적인 문제가 있었습니다.

첫 번째는 상세 페이지에서 태그를 감싸는 컨테이너의 너비가 제한적이었는데, 태그 목록 자체가 줄바꿈(wrap)되지 않도록 설정되어 있었던 점입니다. 그래서 태그가 많아지면 자연스럽게 컨테이너를 넘어서 아래 내용과 겹치게 되었죠. 페이지네이션 버튼도 마찬가지로, 페이지 수만큼 버튼이 계속 늘어나면서 레이아웃을 망가뜨리고 있었습니다.

이 문제를 해결하기 위해 저는 먼저 Layout.astro 파일에서 컨테이너 너비를 확인하고, 태그 컴포넌트에 flex-wrap 옵션을 추가하여 태그들이 자동으로 줄바꿈되도록 수정했습니다. 페이지네이션 부분은 모든 페이지 숫자를 나열하는 대신, 현재 페이지 주변의 몇 개만 보여주고 나머지는 '...'으로 표시하는 방식으로 변경했습니다.

수정 후에는 개발 서버를 띄워놓고 실제 브라우저에서 어떻게 보이는지, 그리고 Playwright라는 도구를 이용해 다양한 화면 크기(데스크톱, 모바일)에서도 문제가 없는지 꼼꼼히 확인했습니다.

핵심 학습 내용

• 페이지네이션 문제:
  • 기존 방식: 전체 페이지 수만큼 버튼을 나열하여 페이지가 많아질수록 버튼이 무한정 길어짐.
  • 개선 방식: 현재 페이지를 중심으로 앞뒤 몇 개의 페이지와 '...'을 표시하는 창문형(windowed) 알고리즘 적용. (예: ← 1 … 20 21 22 … 42 →)
  • 추가 조치: flex-wrap을 추가하여 혹시 모를 오버플로우 방지.
• 태그 레이아웃 문제:
  • 근본 원인: 상세 페이지(post-detail page)의 태그 목록이 max-w-2xl 컨테이너 안에 있었지만, flex-wrap 속성이 없어 태그가 많아지면 컨테이너를 벗어나 겹치는 현상 발생.
  • 해결: 태그를 감싸는 div 요소에 flex-wrap 속성을 추가하여 태그가 자동으로 줄바꿈되도록 수정. (블로그 목록 페이지와 카드 컴포넌트는 이미 flex-wrap이 적용되어 있었음)

이해한 내용

가장 큰 문제는 바로 '유연하지 못한 레이아웃'이었습니다. 페이지가 많아지거나 항목(태그)이 많아질 때, 이를 수용할 수 있는 구조적인 처리가 부족했던 거죠.

페이지네이션의 경우, 단순히 모든 페이지 번호를 보여주는 것보다 사용자가 실제로 이동할 가능성이 높은 페이지 주변만 보여주는 방식이 훨씬 효율적이고 깔끔하다는 것을 알게 되었습니다. '창문형' 알고리즘 덕분에 페이지 수가 아무리 많아도 버튼 레이아웃은 항상 일정하게 유지됩니다.

태그 레이아웃은 CSS의 flex-wrap 속성이 얼마나 중요한지 다시 한번 깨닫게 된 계기였습니다. 아무리 많은 콘텐츠라도 이 속성 하나로 레이아웃 붕괴를 막을 수 있었습니다.

실전 적용

이 지식은 블로그뿐만 아니라, 사용자 목록, 상품 목록, 설정 항목 등 다양한 컴포넌트에서 페이지네이션이나 리스트 형태의 콘텐츠를 다룰 때 유용하게 적용될 수 있습니다.

특히, 태그나 카테고리처럼 사용자가 직접 생성하는 콘텐츠가 늘어날 수 있는 부분에 flex-wrap을 적용하는 것은 기본적이면서도 필수적인 개선 작업이라고 생각합니다.

추가 학습 계획

이번 작업으로 코드 배포 파이프라인이 중단되었던 문제도 함께 해결하고, CI/CD 설정까지 점검하는 과정이 있었습니다. 앞으로는 이런 배포 관련 문제도 좀 더 깊이 이해하고 싶습니다.

• GitHub Actions 워크플로우 설정 및 자동 배포 프로세스 심화 학습
• CI/CD 관련 에러 발생 시 디버깅 전략 연구
• 다양한 프론트엔드 프레임워크에서의 반응형 레이아웃 처리 기법 비교