개발 slecs

광고 스크립트 조건부 로드 제거로 노출 누락 해결

목차

광고 라이브러리가 특정 조건에서만 로드되고 있었다. 그게 문제였다.

배경: 왜 "항상 로드"가 필요했나

Layout.astro는 사이트 전체 페이지의 공통 레이아웃 파일이다. 여기서 스크립트를 조건부로 넣었다는 건, 아마 특정 페이지나 특정 컴포넌트가 렌더될 때만 광고 라이브러리를 삽입하는 로직이 있었을 거라는 뜻이다.

처음에 그렇게 짠 의도는 이해한다. "광고 없는 페이지에서는 불필요한 스크립트를 로드하지 말자" — 퍼포먼스 관점에서 합리적인 판단이다. 근데 현실에서 이 접근이 잘 틀어지는 지점이 있다.

adsbygoogle 같은 광고 라이브러리는 단순히 스크립트 태그 하나가 아니라, 전역 객체를 초기화하고 페이지 렌더 사이클 전반에 걸쳐 동작한다. 라이브러리가 늦게 로드되거나, 일부 페이지에서만 로드되면 다음 같은 문제가 터진다.

  • 광고 슬롯이 렌더됐는데 window.adsbygoogle가 아직 없어서 에러
  • 클라이언트 사이드 라우팅(SPA처럼 동작하는 경우)에서 페이지 전환 후 광고가 뜨지 않음
  • Coupang Partners g.js 같은 제휴 스크립트는 특히 초기 바인딩 타이밍에 민감

결국 "조건부 로드"의 이점보다 "타이밍 이슈로 인한 광고 노출 실패" 비용이 더 컸다.

변경 내용

Layout.astro에서 광고 스크립트 삽입 로직을 조건 분기 밖으로 꺼내 항상 <head> 또는 <body> 최상단에서 로드되도록 고정했다.

<!-- Before: 조건부 로드 (예시) -->
{showAds && (
  <>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" />
    <script async src="https://ads-partners.coupang.com/g.js" />
  </>
)}

<!-- After: 항상 로드 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" />
<script async src="https://ads-partners.coupang.com/g.js" />

async 속성이 붙어 있으니 페이지 렌더 블로킹은 없다. 성능 우려는 사실상 크지 않다.

이런 패턴에서 자주 보이는 트레이드오프

접근 방식 장점 단점
조건부 로드 불필요한 요청 줄임 타이밍 이슈, 누락 발생 가능
항상 로드 안정적, 예측 가능 광고 없는 페이지에도 요청 발생
레이아웃 분리 정교한 제어 레이아웃 구조 복잡도 증가

팀 관점에서 "레이아웃 분리"도 고려했지만, 현재 프로젝트 구조에서 광고 레이아웃을 별도로 쪼개는 건 오버엔지니어링이다. 지금 규모에선 항상 로드하고 실제 슬롯 렌더 여부로 제어하는 게 훨씬 단순하고 유지보수하기 쉽다.

회고

사실 이 버그는 꽤 조용하게 지나갈 수 있었다. 광고가 안 뜨는 건 에러 로그로 잡히는 게 아니라 수익 하락으로 나중에 발견되는 류의 문제다. 다행히 직접 확인하다 잡았지만, 이런 "침묵하는 실패(silent failure)"가 가장 위험하다는 걸 다시 한번 체감했다.

Layout.astro 같은 공통 레이아웃 파일은 변경 임팩트가 전 페이지에 미친다. 건드릴 때마다 조심스러운 파일인데, 이번 수정은 오히려 복잡도를 낮추는 방향이라 코드리뷰 때도 이견 없이 바로 머지됐다.

외부 광고 라이브러리를 다룰 때는 "로드 조건"보다 "로드 타이밍과 전역 상태 의존성"을 먼저 따져야 한다는 게 이번 포인트였음.

끝.

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

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

이어보기

댓글 0

첫 댓글 달아줘.