계산기 5개 페이지 광고 중복 노출 제거

광고 stacking 위반을 정리했다. 한 화면에 여러 광고가 동시에 노출되는 구조를 걷어내고, "한 화면 1광고" 룰을 사이트 전반에 적용한 작업이다.

왜 이게 문제였나

페이지별로 광고 컴포넌트를 자유롭게 배치하다 보면 어느 순간 stacking 이 발생한다. Layout.astro 에 레이아웃 수준의 광고가 이미 들어가 있는데, 각 페이지 파일에서 또 광고를 박아 넣으면 한 화면에 광고가 중첩된다. 처음엔 "페이지마다 맥락이 다르니까" 라는 이유로 개별 배치를 허용했는데, 그게 쌓이면서 결국 레이아웃 광고 + 페이지 광고가 동시에 뜨는 상황이 됐다.

이런 구조는 보통 두 가지 경로로 생긴다.

• 레이아웃 파일에 글로벌 광고를 넣은 사람과 페이지 파일에 광고를 넣은 사람이 다른 경우 — 서로 인지 없이 각자 작업
• 초기엔 레이아웃 광고가 없었는데, 나중에 글로벌로 추가하면서 기존 페이지 광고를 청소하지 않은 경우

이번엔 후자였다. Layout.astro 에 공통 광고 슬롯을 나중에 밀어 넣으면서, 기존에 각 페이지가 직접 가지고 있던 광고 코드를 그대로 방치했다. 결과적으로 annual-leave, car-tax, earned-income-tax, hourly, income-tax 다섯 페이지 모두 stacking 상태로 서비스되고 있었다.

어떻게 정리했나

구조를 다시 잡는 방향은 단순했다. 광고의 진실 공급원(source of truth)을 Layout.astro 하나로 고정하고, 각 페이지에서 개별적으로 광고를 삽입하는 코드를 제거하는 것.

변경 파일 구조로 보면 이렇다.

페이지 쪽은 전부 제거 방향이고, 레이아웃 쪽에서 한 번 관리하는 구조로 수렴시켰다.

코드 패턴으로 보면 대략 이런 흐름이다.

<!-- Before: income-tax.astro 같은 페이지에 광고 직접 박혀 있음 -->
<Layout title="소득세 계산기">
  <AdBanner slot="top" />   <!-- 여기서도 광고 -->
  <Calculator />
</Layout>

<!-- Layout.astro 안에도 이미 광고 있는 상황 -->
<slot name="top" />
<DefaultAdBanner />  <!-- 레이아웃 글로벌 광고 -->
<slot />

<!-- After: 페이지에서 광고 제거, 레이아웃이 단독 관리 -->
<Layout title="소득세 계산기">
  <Calculator />
</Layout>

<!-- Layout.astro: 여기서만 광고 -->
<AdBanner />
<slot />

회고

사실 이런 stacking 이슈는 "광고 정책 위반"이라고 하면 다들 심각하게 듣는데, 실제로는 레이아웃 설계 원칙의 문제다. 글로벌 컴포넌트가 생겼을 때 기존 코드를 같이 청소하지 않으면 이런 중복이 남는다. 광고 뿐 아니라 네비게이션, 푸터, 분석 스크립트 같은 글로벌 요소에서도 똑같이 발생하는 패턴이다.

이번에 다섯 페이지를 한꺼번에 정리하면서 느낀 건, 레이아웃 파일을 건드릴 때는 영향 받는 페이지 전수 확인이 필수라는 거다. Layout.astro 는 모든 페이지의 부모니까, 여기에 뭔가를 추가하는 순간 사이트 전체에 즉시 적용된다. 추가할 때 신중한 만큼, 기존에 같은 역할을 하던 코드가 페이지 레벨에 남아 있지 않은지도 함께 훑어야 한다.

앞으로 광고 슬롯을 바꾸거나 추가할 때는 Layout.astro 한 곳만 건드리면 된다. 페이지 파일들이 광고를 직접 알 필요가 없는 구조가 됐으니, 유지보수 부담이 꽤 줄었다.

끝.

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

• 모니터암 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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