장례 도메인 레이아웃의 광고 슬롯 구조화와 법적 고지 문구 개선

레이아웃 파일 하나에 광고 슬롯 마크업 정리 + 법적 고지 문구를 도메인에 맞게 교체하는 작업을 했다.

왜 이 작업이 필요했나

Post.astro는 포스트 페이지 전체의 골격을 담당하는 레이아웃 컴포넌트다. 광고 슬롯(ad-zone)이 여러 군데 흩어져 있었는데, 각각이 그냥 날것의 div로 떠 있는 상태였음. 스타일 수정이나 슬롯 위치 조정이 생길 때마다 "이게 어디서 끝나고 어디서 시작하는지" 파악하는 데 괜한 시간이 들었다.

광고 관련 마크업은 특성상 레이아웃 파일 안에서 비교적 찾기 어려운 위치에 박혀 있는 경우가 많다. 컴포넌트 경계도 애매하고, 주석도 없으면 처음 보는 사람은 "이 div가 광고야, 콘텐츠야?" 바로 판단을 못 한다. 특히 팀원이 Post 레이아웃을 건드릴 일이 생길 때 이 혼란이 실수로 이어지기 쉽다.

그래서 이번에 ad-zone div들을 명시적인 그룹 래퍼로 묶고, 그 의도를 코드에서 바로 읽을 수 있게 정리했다.

작업 내용

<!-- Before: 낱개로 흩어진 슬롯 -->
<div class="ad-zone ad-top" data-slot="top" />
<!-- 콘텐츠 ... -->
<div class="ad-zone ad-mid" data-slot="mid" />

<!-- After: 그룹 래퍼로 묶음 -->
<div class="ad-group ad-group--top">
  <div class="ad-zone" data-slot="top" />
</div>
<!-- 콘텐츠 ... -->
<div class="ad-group ad-group--mid">
  <div class="ad-zone" data-slot="mid" />
</div>

패턴 자체는 단순하다. 슬롯 하나하나를 그루핑 wrapper로 감싸고, 클래스 네이밍에 위치 의미를 실어주는 것. 나중에 광고 슬롯 주변 여백이나 배경을 제어할 때 wrapper를 통해 일괄 처리할 수 있다는 부수 효과도 있다.

disclaimer 텍스트 교체가 이번 커밋의 또 다른 축이었다. 기존 disclaimer는 일반적인 "광고 포함 콘텐츠"류 문구였는데, 이 포스트 레이아웃은 장례 관련 도메인을 다루는 섹션에 쓰이고 있었다. 도메인이 장례인데 disclaimer만 덩그러니 무관한 언어로 쓰여 있으면, 독자 입장에서는 맥락이 뚝 끊기는 느낌을 받는다.

리팩터링이지만 리뷰 포인트는 따로 있다

이런 류의 변경은 "기능 없는 리팩터링"처럼 보이기 때문에 코드 리뷰에서 슬쩍 넘어가는 경향이 있다. 근데 레이아웃 파일은 팀 전체가 건드리는 공유 자산이라 오히려 더 꼼꼼히 봐야 한다고 생각한다.

특히 확인해야 할 포인트는 이렇다:

• 래퍼 div 추가로 인한 CSS 셀렉터 깨짐 여부 — > .ad-zone 같은 직계 자식 셀렉터를 쓰고 있었다면 묶는 순간 스타일이 날아간다
• 광고 스크립트가 셀렉터를 직접 쿼리하는 방식이라면, 클래스명 변경 시 광고가 렌더링 안 되는 사고로 이어짐
• disclaimer 문구 변경은 법무나 운영 정책 확인이 필요한 경우도 있음. 특히 장례처럼 민감한 도메인이라면 문구 하나가 민원 포인트가 될 수 있다

이번에는 그 지점들을 미리 확인하고 작업했지만, 이런 리팩터링을 PR 올릴 때 "기능 변경 없음"이라고 한 줄만 써버리는 경우를 종종 본다. 레이아웃 파일 리팩터링은 그냥 "정리"가 아니라 렌더링 트리와 스타일 영향 범위가 얽힌 작업이라는 걸 팀 내에서 공유해 두는 게 중요하다.

총괄 입장에서는 이런 핀포인트 정리 작업이 쌓일수록 새 팀원 온보딩 속도가 올라간다고 본다. Post.astro를 처음 열었을 때 "광고 슬롯이 여기 모여 있고, 이 도메인에 맞는 안내 문구가 붙어 있다"는 걸 한눈에 읽을 수 있게 되는 것. 기능 티켓보다 조용하지만, 코드베이스 장기 건강에는 이쪽이 더 영향을 준다고 생각한다.

끝.

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

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

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