카테고리 페이지 너비 통일하기

카테고리 페이지와 홈 페이지의 콘텐츠 영역 너비가 달랐다. 사용자가 홈에서 카테고리로 이동하면 갑자기 레이아웃이 좌우로 신축하는 느낌을 받는 상황이었다. 이번에 래퍼 요소의 max-width 제약을 제거하고 960px 고정 너비로 맞춰서 일관된 경험을 만들었다.

문제 상황

Astro 프로젝트에서 [category].astro 동적 라우팅 페이지를 사용하고 있었는데, 이 페이지의 index-wrap 컨테이너가 홈 페이지와 다르게 구성되어 있었다. 홈 페이지는 한 번에 960px 너비로 정해져 있는데, 카테고리 페이지에선 max-width 제약이 걸려 있었던 것 같다. 결과적으로 같은 사이트를 오가는데도 시각적 리듬이 안 맞는 경험이 생겼다.

이런 레이아웃 불일치는 생각보다 사용자 신뢰에 영향을 미친다. "혹시 다른 페이지인가?" 같은 미묘한 위화감이 쌓이기 때문이다. 특히 이커머스나 콘텐츠 사이트에서는 사용자가 자주 오가는 경로인 만큼, 일관된 컨테이너 너비가 정말 중요하다.

수정 내용

index-wrap의 max-width: auto (또는 제약값)을 max-width: none으로 설정하고, 본 콘텐츠 너비를 명시적으로 960px로 통일했다. 간단하지만 효과는 크다.

Astro 페이지에서 이 방식을 쓰면, 모든 라우트가 동일한 컨테이너 규칙을 따르므로 나중에 새로운 페이지를 추가할 때도 자동으로 맞춰진다. 한 번의 정의가 전역 레이아웃으로 작동하는 구조인 셈이다.

일반적인 레이아웃 일관성 유지법

이런 문제는 생각보다 자주 나타난다. 여러 페이지를 점진적으로 개발하다 보면 각각 다른 조건에서 스타일을 덧붙이게 되고, 어느 순간 "왜 이 페이지만 다르지?" 같은 상황이 생기곤 한다. 내가 배운 패턴:

• 공통 래퍼 컴포넌트 정의: 모든 페이지가 사용하는 기본 컨테이너를 한 곳에서 관리
• max-width는 최대값, 유동성은 padding으로: 컨테이너 자체는 제약을 풀고, 내부 여백으로 반응성 확보
• 특수한 full-width 페이지는 명시적으로: "이 페이지는 전체 너비를 쓴다"라고 주석과 함께 별도 처리

이번 경우 960px라는 기준이 이미 정해져 있었으니, 모든 페이지를 그쪽으로 수렴시키는 게 가장 간단했다.

회고

작은 수정처럼 보이지만, 이런 일관성 이슈는 팀 규모가 커질수록 더 중요해진다. 초기에 "좌우 마진 어떻게 할까"를 결정하고 문서화해두면, 나중에 누군가 새 페이지를 만들 때 고민이 줄어든다. 코드리뷰할 때도 "이 래퍼, 960px 기준에 맞춰야 함" 정도로 체크포인트를 명확히 할 수 있다.

Astro처럼 파일 기반 라우팅을 쓰면 페이지가 쌓일수록 일관성 관리가 까다로워지니, 초기부터 "모든 페이지가 따를 기본값"을 설정하고 정기적으로 훑어보는 습관이 정말 도움이 된다.

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

• 27인치모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →

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