자동화 slecs

Featured 영역 정렬 버그 수정, 여백 제거

목차

Featured 콘텐츠 섹션에서 불필요한 빈 공간(void)이 생겨 레이아웃이 흐트러지던 버그를 고쳤다. 단순한 여백 조정 같지만, 프론트엔드 배포에서 자주 마주치는 전형적인 문제 유형이다.

문제 상황

Featured 영역은 대부분의 콘텐츠 플랫폼에서 눈에 띄는 자리다. 홍보 콘텐츠를 배치하고, 사용자 시선을 가장 먼저 사로잡는 공간이기도 하다. 근데 이 영역에서 왜 여백이 생길까?

일반적으로 몇 가지 원인이 있다:

  • 콘텐츠 높이 불일치: 텍스트(제목, 설명)와 이미지, 메타데이터(예: 게시 날짜)가 다른 높이를 가질 때, flexbox/grid 레이아웃이 한쪽을 stretch하면서 빈 공간이 생김
  • 세로 정렬 규칙 누락: align-items, justify-content 같은 속성이 명확하지 않으면, 일부 요소가 부모 상자 중앙이 아닌 상단/하단에 고정됨
  • 날짜 같은 메타 요소 배치: 작은 텍스트 요소는 기본값으로 라인 높이를 충분히 차지하지 않아, 콘텐츠 블록 사이에 공백을 만들 수 있음

이번 경우, 세로중앙 정렬을 명확히 하고, 날짜 요소를 콘텐츠 근처에 배치해서 시각적 응집력을 높였다.

CSS와 레이아웃 템플릿 수정

변경 파일이 public/styles.css와 src/layouts/Base.astro라는 건 흥미롭다. 스타일 규칙(CSS)과 실제 마크업 구조(템플릿)를 함께 손봤다는 뜻이다.

보통 이런 작업은:

/* Before: 부정확한 정렬 */
.featured {
  display: flex;
  gap: 1rem;
}

.featured-content {
  /* align-items 미지정 → 요소가 제멋대로 정렬됨 */
}

/* After: 명확한 세로중앙 정렬 */
.featured {
  display: flex;
  align-items: center;  /* 세로 중앙 */
  gap: 1rem;
}

.featured-meta {
  margin: 0;  /* void 제거 */
  font-size: 0.875rem;
}

동시에 Base.astro 같은 레이아웃 템플릿에서 DOM 순서나 요소 구조를 정리했을 가능성도 높다. 날짜 메타데이터를 콘텐츠 바로 옆에 배치해서, CSS만으로는 해결 안 되는 구조적 문제까지 함께 처리한 것 같다.

프론트엔드 배포와 캐시 관리

커밋 메시지 끝에 cache v20260622b라고 명시한 부분이 중요하다. 이건 CSS 캐싱 문제 때문에다.

웹사이트에서 스타일시트는 브라우저와 CDN에 의해 오래 캐시된다. 사용자의 브라우저가 예전 CSS를 계속 사용하면, 새로운 정렬 규칙이 적용되지 않는다. 특히 featured 같은 눈에 띄는 영역은 버그가 즉시 보이므로, 캐시 무효화가 필수적이다.

일반적으로:

  • 파일 이름 버저닝: styles.css?v=20260622b 또는 styles-v20260622b.css 방식
  • 빌드 도구의 hash 기반 캐시: webpack, Vite 같은 번들러가 변경 시 자동 hash 붙임
  • CDN 캐시 헤더: Cache-Control: max-age=... 그리고 수동 purge

이 커밋에서 명시적으로 버전을 기록한 건, 배포 과정에서 "이 날짜의 CSS는 이 버전"이라는 추적 기록을 남기려는 의도다. 만약 문제가 재현되면, 이 메시지만으로도 어느 배포에서 버그가 고쳐졌는지 빠르게 파악 가능하다.

팀 입장에서의 회고

한 두 줄 커밋처럼 보이지만, 실제로는 여러 단계를 거친다:

  1. 발견: featured 영역이 깨져 있다는 사용자 리포트 또는 QA 검수
  2. 진단: 개발자 도구로 레이아웃 분석 → 정렬/높이 문제 파악
  3. 수정: CSS 규칙 + 마크업 구조 동시 개선
  4. 캐시 전략: 버전 명시로 배포 추적성 확보
  5. 검증: 실제 브라우저에서 여백 제거 확인

코드 리뷰 입장에서는, 이런 디자인 버그를 볼 때:

  • 단순히 "CSS 고쳤네"가 아니라, 마크업 구조까지 함께 검토해야 함
  • flexbox/grid의 기본값이 의도와 일치하는지 확인
  • 캐시 무효화 전략이 명확한지 체크

팀원들에게 코드리뷰나 피드백할 때도, "왜 이 영역에서 여백이 생기는가"라는 일반적 디버깅 접근법을 함께 공유하면 좋다. 그래야 다음 프로젝트에서 비슷한 실수를 반복하지 않는다.

다음.

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

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

이어보기

댓글 0

첫 댓글 달아줘.