카테고리 페이지 레이아웃 가운데 정렬 깨짐 수정

레이아웃 가운데 정렬이 특정 카테고리 페이지에서만 깨져 있던 걸 발견하고, cat-section wrapper 를 씌워서 복원했다.

배경: 왜 카테고리 페이지만 틀어졌나

메인 피드나 개별 포스트 페이지는 정렬이 멀쩡한데, /c/[category] 경로로 들어가면 post-grid 가 좌측으로 붙어버리는 현상이 있었다. 처음엔 CSS 캐시 문제인가 싶어서 빌드를 다시 돌려봤지만 달라지지 않았고, 마크업을 직접 열어보니 구조적인 차이가 원인이었다.

다른 페이지들은 콘텐츠 영역을 감싸는 section 혹은 wrapper 가 존재해서 Flexbox/Grid 의 margin: auto 나 justify-content: center 가 제대로 먹히는 반면, [category].astro 는 post-grid 가 페이지 루트 바로 아래 노출되는 구조였다. wrapper 없이 grid 컨테이너를 바로 두면, 부모의 정렬 컨텍스트를 못 받아서 가운데 정렬이 무너진다. 이건 Astro 특유의 문제라기보다 어느 컴포넌트 기반 프레임워크에서도 똑같이 발생하는 구조적 함정이다.

작업 내용: cat-section wrapper 추가

변경 파일은 src/pages/c/[category].astro 단 하나. stat 이 명시되지 않았으니 추가 라인 수가 아주 크진 않겠지만, 핀포인트 수정답게 의도가 명확했다.

<!-- Before -->
<Layout>
  <PostGrid posts={posts} />
</Layout>

<!-- After -->
<Layout>
  <section class="cat-section">
    <PostGrid posts={posts} />
  </section>
</Layout>

cat-section 이라는 이름을 쓴 건 단순히 "카테고리 페이지 전용 wrapper" 라는 의미를 스타일시트에서도 명시적으로 드러내기 위해서다. 범용 .container 나 .wrapper 로도 해결은 되지만, 나중에 카테고리 페이지에 헤더 타이틀이나 필터 UI 를 붙일 가능성이 있을 때 .cat-section 이 있으면 스코프 잡기가 훨씬 편하다. 이런 작은 네이밍 선택이 나중에 코드리뷰 때 "왜 여기만 다른 클래스야?" 라는 질문을 줄여준다.

이런 류의 정렬 버그가 자주 터지는 이유

카테고리/태그 같은 동적 라우팅 페이지는 개발 초기에 "일단 리스트만 뿌리자" 는 마음으로 빠르게 짜는 경우가 많다. 그러다 보면 다른 정적 페이지들에는 공통 wrapper 패턴이 정착돼 있는데, 동적 라우팅 쪽만 빠져 있는 상황이 생긴다.

이번 케이스는 첫 번째 행이었다. Layout 을 건드리지 않고 해당 페이지 파일 하나만 수정해서 범위를 최소화한 게 포인트다. 공통 Layout 을 건드리면 다른 페이지에 사이드 이펙트가 생길 수 있어서, 영향 범위를 좁히는 게 맞다고 판단했다.

회고

솔직히 이런 버그는 "왜 이게 안 됐지?" 보다 "왜 이걸 빠뜨렸지?" 가 맞는 질문이다. 동적 라우팅 페이지를 추가할 때 공통 레이아웃 패턴을 체크리스트로 만들어두지 않으면, 이런 걸 나중에 하나씩 줄줄이 잡게 된다. 특히 Astro 처럼 파일 기반 라우팅에서 페이지 템플릿을 개별 파일로 관리할 때는, 새 라우트 추가 시 "다른 페이지의 마크업 구조와 일관성이 맞는지" 를 반드시 확인하는 습관이 필요하다. 팀이 커지면 이런 걸 PR 체크리스트나 공통 페이지 스켈레톤 템플릿으로 강제화하는 것도 방법이다.

끝.

🛒 이 글과 어울리는 추천 상품

• 모니터암 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.