PC 광고 슬롯을 모비온으로 교체하며 챙긴 것들

광고 슬롯 교체 작업을 했다. 규모로 보면 '핀포인트 수정'에 가깝지만, 이런 류의 작업이 은근히 신경 써야 할 포인트가 많아서 짧게라도 기록해 둔다.

배경

메인 페이지(index.astro)와 급여 정보 페이지(salary.astro) 하단에 PC 환경에서 노출되던 300×250 배너가 쿠팡 제휴 슬롯으로 붙어 있었다. 이걸 모비온 슬롯으로 교체하는 작업이었는데, 조건이 하나 있었다. 모바일은 기존 슬롯 그대로 유지. 즉 단순 전체 교체가 아니라 디바이스 분기 처리가 포함된 작업이었음.

광고 슬롯 교체는 개발 난이도 자체는 낮은 편이다. 그런데 "PC만 바꾸고 모바일은 그대로" 같은 조건이 붙는 순간, 분기 처리 방식을 어떻게 할지 결정해야 한다. CSS 미디어 쿼리로 숨기는 방식, JS로 뷰포트 감지해서 조건부 렌더링하는 방식, 서버사이드에서 User-Agent 기반으로 처리하는 방식 등 선택지가 여러 개다.

이번 케이스처럼 Astro 기반 정적/SSG 환경에서는 빌드 타임에 UA를 알 수 없으므로, 현실적으로는 CSS 미디어 쿼리 또는 JS 감지 방식 중 하나를 고르게 된다. 광고 슬롯 특성상 "로드는 되되 숨긴다"는 것과 "아예 마운트 안 한다"는 것의 차이가 실제 광고 노출 집계에 영향을 줄 수 있어서, 선택 근거를 명확히 해두는 게 중요하다.

작업 내용

변경된 파일은 src/pages/index.astro, src/pages/salary.astro 두 곳. 두 페이지 모두 구조가 비슷하게 하단에 광고 슬롯 영역이 있고, 거기서 PC 조건에 해당하는 슬롯 코드만 교체했다.

<!-- Before: 쿠팡 PC 300x250 -->
<div class="ad-slot pc-only">
  <!-- 쿠팡 파트너스 스크립트 -->
</div>

<!-- After: 모비온 PC 300x250 -->
<div class="ad-slot pc-only">
  <!-- 모비온 슬롯 스크립트 -->
</div>

<!-- 모바일 슬롯: 변경 없음 -->
<div class="ad-slot mobile-only">
  <!-- 기존 슬롯 유지 -->
</div>

pc-only / mobile-only 클래스 기반으로 이미 분기가 되어 있는 구조였기 때문에, 해당 영역 안의 스크립트 코드만 교체하면 됐다. 기존 구조 덕분에 작업 자체는 깔끔하게 끝났는데, 이게 가능했던 건 애초에 광고 슬롯 영역이 디바이스 분기를 명확히 구분해놓은 구조로 관리되고 있었기 때문이다. 이런 구조가 안 잡혀 있었다면 이번 교체 작업에서 분기 로직까지 새로 짜야 했을 것.

회고

광고 슬롯 교체는 빈번하게 발생하는 작업이다. 제휴 정책 변경, 수익률 비교, 광고주 교체 등 이유도 다양하고. 그런데 이런 '간단한 작업'에서 자주 사고가 나는 이유가 몇 가지 있다.

• 슬롯 ID 오타: 광고 스크립트는 슬롯 ID 하나만 틀려도 노출이 안 됨. 복붙 과정에서 발생하기 쉬움
• PC/모바일 분기 실수: "PC만 바꾸세요"를 "전체 바꿨는데 CSS로 모바일 숨김"으로 잘못 처리하면 모바일에서 의도치 않은 슬롯이 실행될 수 있음
• 기존 슬롯 미제거: 새 슬롯 추가만 하고 기존 슬롯을 주석으로 남겨두는 케이스. 나중에 어떤 게 실제 동작하는지 혼란 생김
• 두 페이지 중 하나 누락: 이번처럼 동일한 패턴의 슬롯이 여러 페이지에 있을 때 한 곳만 바꾸는 실수

팀에서 이런 작업을 다른 사람에게 넘길 때도 "두 파일 다 바꿔야 함", "모바일은 그대로" 이 두 조건을 PR description에 명시적으로 적어두는 게 코드리뷰 누락 방지에 도움이 된다. 변경 자체는 단순해도 context가 없으면 리뷰어가 의도를 파악하기 어렵다.

이번엔 두 파일 모두 정확하게 반영됐고, 모바일 슬롯은 건드리지 않았음을 확인하고 머지했다.

끝.

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

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

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