광고 슬롯과 제휴 박스 CSS를 레이아웃에서 분리한 리팩터링

레이아웃 파일 하나에서 광고 슬롯 마크업을 정리하고, CSS를 분리하는 리팩터링을 진행했다.

왜 이 작업이 필요했나

Post.astro는 글 하나를 렌더링하는 핵심 레이아웃 파일이다. 콘텐츠, 메타, 광고 슬롯, 제휴 링크 박스 등 다양한 관심사가 한 파일 안에 쌓이다 보면 어느 순간부터 "이 div가 왜 여기 있지?" 싶은 코드가 생긴다. 이번 케이스도 비슷했다. 광고 슬롯 마크업이 콘텐츠 마크업 사이에 직접 섞여 있었고, 제휴 박스(affiliate-box) 스타일은 레이아웃 파일 내 <style> 블록에 인라인으로 뭉쳐 있었다.

이 상태에서 광고 위치를 바꾸거나 제휴 박스 스타일을 손보려면 콘텐츠 마크업까지 같이 훑어야 해서 작업 범위가 불필요하게 넓어졌다. 리팩터링의 동기는 단순했다: 광고 슬롯은 광고 슬롯끼리, 스타일은 스타일끼리 분리하자.

작업 내용

크게 두 가지를 건드렸다.

1. 광고 슬롯 → ad-zone div로 래핑

기존에는 광고 스크립트나 슬롯 태그가 콘텐츠 사이에 직접 노출되어 있었다. 이걸 <div class="ad-zone"> 하나로 묶었다.

<!-- before -->
<article>
  <Content />
  <!-- 광고 코드 직접 삽입 -->
  <ins class="adsbygoogle" ...></ins>
  <script>...</script>
</article>

<!-- after -->
<article>
  <Content />
  <div class="ad-zone">
    <ins class="adsbygoogle" ...></ins>
    <script>...</script>
  </div>
</article>

래퍼 div 하나 추가가 별것 아닌 것처럼 보이지만, 이게 있으면:

• CSS에서 .ad-zone만 타깃팅해서 광고 영역 여백/숨김 처리 가능
• 나중에 광고 슬롯 교체 시 래퍼 안쪽만 수정, 바깥 레이아웃은 무관
• JS로 광고 존을 토글하거나 lazy load 처리할 때 단일 진입점 확보

실제로 광고 슬롯 관련 작업을 여러 번 해보면, 래퍼 없이 슬롯을 직접 레이아웃에 심어두면 나중에 뽑아내기가 생각보다 번거롭다.

2. affiliate-box CSS 분리

제휴 박스 스타일을 Post.astro 내부 <style> 블록에서 꺼냈다. Astro에서 컴포넌트 스코프 스타일을 분리할 때는 보통 별도 CSS 파일로 빼거나, 전용 컴포넌트로 쪼개는 두 가지 선택지가 있다.

이번엔 CSS 파일 분리 방향으로 정리했다. affiliate-box가 Post.astro 외 다른 레이아웃에서도 쓰일 가능성이 있고, 컴포넌트로 만들기엔 마크업이 단순해서 스타일만 빼는 게 적절한 트레이드오프였다.

회고

Post.astro 같은 레이아웃 파일은 프로젝트 초기에 빠르게 만들어놓고 오래 방치되는 경향이 있다. 기능은 잘 돌아가니까 손대기가 꺼려지는 파일이기도 하다. 근데 이런 파일일수록 마크업/스타일/광고 슬롯이 서서히 엉키면서 나중에 건드릴 때 리스크가 커진다.

이번 리팩터링은 변경 범위가 크지 않았지만, ad-zone이라는 명시적인 래퍼를 만들고 affiliate-box CSS를 분리함으로써 각 관심사의 경계를 명확히 했다. 기능 추가도 아니고, 버그 수정도 아닌 이런 작업이 팀 입장에서는 묵묵히 해줘야 하는 종류의 일이다. 눈에 잘 안 띄지만 이게 쌓여야 레이아웃 파일이 오래 건강하게 유지된다.

다음 작업에서 광고 위치를 바꾸거나 제휴 스타일을 손볼 일이 생기면, 이번 분리가 어느 정도 효과를 발휘할 거라 본다.

끝.

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

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

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