콘텐츠 서비스에 Mobon 광고 슬롯 5개 연동한 과정
목차
사내 콘텐츠 서비스에 Mobon 광고 슬롯 5개를 새로 붙인 작업이다.
광고 연동은 "그냥 스크립트 태그 하나 심으면 되는 거 아냐?" 라는 인식이 팀 안에 은근히 있는데, 실제로 해보면 레이아웃 세 군데를 동시에 건드려야 하고, 슬롯별로 동작 맥락이 전부 다르다. 이번에도 그랬다.
왜 지금, 왜 Mobon인가
광고 플랫폼 선택은 항상 트레이드오프다. CPM 단가, 국내 광고주 풀, SDK 안정성, 그리고 우리 서비스 트래픽 패턴과의 궁합. 이번에 Mobon을 선택한 건 국내 콘텐츠 버티컬 특성상 국내 광고주 매칭률이 더 유리하다는 판단이었고, 팀에서 이미 다른 지면에서 일부 검증이 끝난 상태였다. 완전 신규 도입보다는 "검증된 플랫폼을 새 지면으로 확장"하는 성격에 가까웠다.
슬롯 수를 5개로 잡은 것도 임의가 아니다. 페이지당 광고 밀도가 너무 높으면 Core Web Vitals에 직격탄이 오고, 너무 낮으면 수익화 효율이 안 나온다. 콘텐츠 길이와 스크롤 깊이 데이터를 보고 상단 1, 본문 중간 2, 하단 2 배치로 초안을 잡았다.
파일 세 개를 동시에 건드린 이유
| 파일 | 역할 | 이번 변경 의미 |
|---|---|---|
src/layouts/Post.astro |
개별 글 상세 페이지 레이아웃 | 본문 내 슬롯 + 하단 슬롯 삽입 |
src/pages/c/[category].astro |
카테고리 목록 페이지 | 목록형 지면 슬롯 삽입 |
src/pages/index.astro |
메인(홈) 페이지 | 홈 지면 슬롯 삽입 |
Astro 기반 SSG 구조에서 레이아웃과 페이지가 분리되어 있다 보니, 광고 슬롯을 "레이아웃에만 박으면 되는 거 아닌가" 싶을 수 있다. 근데 카테고리 페이지와 홈 페이지는 Post 레이아웃을 쓰지 않는 독립 페이지라 각각 직접 건드려야 했다. 레이아웃 상속 구조를 더 정교하게 뽑았으면 공통화할 수 있었겠지만, 지금 구조에서는 세 파일 모두 수정이 맞는 선택이었다.
이런 작업에서 주의할 점은 슬롯 ID 중복이다. Mobon 같은 광고 플랫폼은 페이지 내 동일 슬롯 ID가 두 번 렌더링되면 둘 중 하나가 비거나 오류가 난다. Astro는 SSG라 빌드 타임에 잡히지 않고 런타임에서 조용히 실패하는 케이스가 있어서, 배포 전에 실제 브라우저 DevTools로 슬롯별 렌더 여부를 직접 확인했다.
<!-- Post.astro 내 슬롯 삽입 예시 패턴 -->
<script async src="https://ad.mobon.net/..."></script>
<ins class="mobon-ad"
data-ad-unit="슬롯ID_본문중간"
style="display:block">
</ins>
<script>(mobon=window.mobon||[]).push({});</script>
스크립트를 <head>에 글로벌로 한 번만 로드하고, 슬롯 렌더링 <ins> 태그는 각 위치에서 개별로 찍는 구조가 표준 패턴이다. 글로벌 스크립트를 각 슬롯마다 중복 삽입하면 광고 라이브러리가 여러 번 초기화되면서 슬롯 충돌이 생긴다. 이 부분은 팀원들이 나중에 비슷한 광고 연동 작업할 때 자주 실수하는 포인트라 코드 리뷰 때 따로 짚어뒀다.
회고
광고 연동 작업은 변경 자체가 복잡하지 않아서 PR 우선순위가 뒤로 밀리는 경향이 있다. 근데 실제로는 수익 파이프라인 직결 작업이라 QA를 가장 꼼꼼하게 해야 하는 케이스다. 슬롯이 활성화되지 않으면 바로 노출 손실이고, 잘못 붙으면 레이아웃 깨짐이 사용자에게 그대로 보인다.
이번에 세 파일을 한 커밋에 묶은 건, 부분 배포 상태에서 슬롯이 일부 페이지에만 붙어 있는 "중간 상태"를 만들지 않기 위해서였다. 광고 플랫폼 쪽에서 지면별 통계를 잡기 시작하는 시점이 있는데, 일부 페이지만 활성화된 채로 시간이 지나면 초기 지면 퍼포먼스 데이터가 오염된다. 그래서 "전부 준비되면 한 번에" 배포 전략을 택했다.
퍼포먼스 영향은 다음 스프린트 때 CLS/LCP 수치 변화랑 같이 볼 예정이다.
다음 단계는 슬롯별 CTR 비교해서 배치 최적화 여부 판단.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.