메인 페이지 섹션 폭 제한과 카드 그리드 풀폭 레이아웃 개선

사이트 메인 레이아웃에서 section 컨테이너 폭 제한과 카드 그리드 풀폭 처리를 동시에 손봤다.

배경 — "왜 지금 이걸 고쳤나"

디자인 리뷰를 하다 보니 메인 페이지 섹션들이 viewport 너비에 따라 이상하게 늘어지는 케이스가 눈에 들어왔다. 텍스트 헤더는 중앙 정렬되어 있는데, 카드 그리드가 그 컨테이너 폭을 무시하고 풀폭으로 터져 나오는 상황. 혹은 반대로 카드 그리드까지 max-width에 묶여서 넓은 화면에서 여백이 어색하게 남는 경우도 있었다.

레이아웃 규칙이 CSS 두 파일(public/styles.css, styles.css)에 분산된 채로 관리되다 보니 어느 쪽이 실제로 적용되는지 추적하는 것 자체가 살짝 번거로운 상태였다. 빌드 결과물로 나가는 public/styles.css와 소스 styles.css가 병렬로 존재하는 구조에서 자주 있는 일이다. 이번 수정은 양쪽 모두 건드려야 했다.

작업 내용 — max-width 컨테이너와 그리드 풀폭의 관계

핵심 아이디어는 간단하다. 섹션 자체는 1180px로 막되, 그 안의 카드 그리드는 해당 컨테이너 폭을 꽉 채운다는 것.

/* 섹션 공통 컨테이너 */
.site-main section {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* 카드 그리드는 컨테이너 폭 100% 활용 */
.site-main section .card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

max-width + margin-inline: auto 조합이 섹션의 수평 중앙 정렬을 담당하고, 카드 그리드는 그 안에서 width: 100%로 주어진 공간을 전부 쓴다. 이렇게 하면 큰 화면에서도 카드들이 1180px 범위 안에서 균등하게 배치되고, 작은 화면에선 자연스럽게 viewport에 맞게 줄어든다.

문제는 기존 코드에서 그리드 wrapper에 별도의 max-width나 음수 마진이 걸려 있거나, 섹션 padding이 누적되어 카드가 의도보다 좁게 보이는 케이스였다. 이번에 그 잔재들을 걷어내고 컨테이너 → 그리드 → 카드 순서로 책임을 명확히 나눴다.

회고 — CSS 두 파일 분산 문제

변경 파일이 public/styles.css와 styles.css 두 개인 게 이번 작업에서 계속 신경 쓰였다. 소스를 수정하고 빌드를 돌리면 public/이 덮어씌워지는 구조라면 괜찮지만, 수동으로 두 파일을 동기화하는 방식이라면 언제든 불일치가 생긴다.

팀 리뷰에서도 이 부분을 지적했다. CSS 레이아웃 버그가 "어느 파일 기준으로 보면 맞고, 다른 파일 기준으로 보면 틀린" 상황이 반복되면 원인 추적 비용이 배로 든다. 단기적으로는 두 파일 모두 수정하고, 중기적으로는 빌드 파이프라인에서 public/을 소스에서 자동 생성하도록 정리하는 방향을 제안해둔 상태다.

레이아웃 관련 CSS 수정은 이런 식으로 "작아 보이는데 손이 많이 가는" 류의 작업이다. 변경 줄 수는 적더라도, 실제로는 여러 화면 크기에서 QA를 돌리고, 다른 섹션에 사이드 이펙트가 없는지 확인하는 시간이 훨씬 길다. 그래서 CSS 파일 관리 체계가 명확하지 않으면 이런 핀포인트 수정도 생각보다 리스크가 커진다.

이번 수정으로 메인 페이지 섹션들의 폭 기준이 통일됐고, 카드 그리드가 컨테이너 안에서 의도대로 채워지는 것 확인했다. 다음 CSS 정리 이슈 때 파일 분산 문제도 같이 털어낼 것.

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

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

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