모비온 광고 미디에이션 분기와 CDN 전역 로드 구조 정리
목차
모비온(Mobon) 광고 연동을 붙이면서 mediation 분기 로직과 CDN 스크립트 로드 두 군데를 동시에 손댔다.
왜 이 작업이 필요했나
광고 수익화 스택을 구성할 때 단일 네트워크에만 의존하는 건 리스크가 크다. 특정 네트워크가 fill rate가 낮아지거나, 단가가 떨어지거나, SDK 장애가 나면 그 즉시 수익이 0으로 수렴한다. 그래서 보통 mediation 레이어를 두고 — "이 슬롯은 A 네트워크 먼저 시도, 못 채우면 B로 폴백" — 같은 식으로 분기를 태운다.
이번에 모비온을 추가하면서 기존 광고 흐름 위에 mediation 분기를 얹는 작업이 필요해졌다. 단순히 스크립트 태그 하나 박는 게 아니라, 어느 조건에서 모비온을 호출할지, 다른 네트워크와 충돌은 없는지, CDN 스크립트는 어디서 불러올지를 설계해야 했다.
파일별로 뭘 했나
| 파일 | 역할 | 이번 변경 포인트 |
|---|---|---|
src/components/MobonSlot.astro |
모비온 슬롯 렌더링 컴포넌트 | mediation 분기 로직 수용, 슬롯 파라미터 처리 |
src/layouts/Base.astro |
전체 페이지 레이아웃 베이스 | mediacategory CDN 스크립트 전역 주입 |
MobonSlot.astro는 슬롯 단위 컴포넌트다. 광고 슬롯 컴포넌트를 따로 분리해두는 건 팀 입장에서 꽤 중요한 결정이다. 나중에 슬롯별 A/B 테스트를 하거나, 특정 슬롯만 네트워크를 교체하거나, 슬롯 렌더링 조건을 수정할 때 영향 범위가 이 파일 하나로 좁혀지기 때문이다. 전체 레이아웃 파일에 광고 로직이 산재해 있으면 나중에 찾기도 힘들고 사이드이펙트도 예측하기 어렵다.
Base.astro에 CDN을 박은 이유는 mediacategory 스크립트가 전역으로 필요하기 때문이다. 슬롯 컴포넌트 안에서 <script> 태그를 중복 삽입하면 동일 스크립트가 페이지 내 슬롯 개수만큼 반복 로드되는 문제가 생긴다. 이걸 베이스 레이아웃에서 한 번만 로드하도록 처리하는 게 맞다. Astro에서는 <head> 관리가 레이아웃 레벨에서 이뤄지니 자연스러운 위치이기도 하다.
mediation 분기를 어떻게 구성하나
mediation 분기는 크게 두 가지 방식으로 구현된다.
- 클라이언트 사이드 waterfall: 첫 번째 네트워크에 bid 요청 → 타임아웃/no-fill 시 다음 네트워크로 폴백. 구현이 단순하지만 레이턴시가 누적된다.
- 헤더 비딩 / 서버 사이드 mediation: 여러 네트워크에 동시에 bid 요청 → 가장 높은 단가 선택. 레이턴시는 짧지만 구현 복잡도가 높다.
이번 모비온 연동은 클라이언트 사이드 분기 수준으로, 조건에 따라 모비온 슬롯을 노출하거나 기존 네트워크를 유지하는 방식으로 처리했다. 컴포넌트 레벨에서 분기를 태우는 코드 패턴은 대략 아래와 같다.
---
// MobonSlot.astro
const { network, slotId, mediaCategory } = Astro.props;
const useMobon = network === 'mobon' || network === 'mediation';
---
{useMobon ? (
<div class="ad-slot" data-slot={slotId} data-category={mediaCategory}>
<!-- 모비온 광고 슬롯 -->
</div>
) : (
<!-- 기존 네트워크 슬롯 폴백 -->
)}
Base.astro에서 CDN은 조건부 로드보다 무조건 로드 쪽을 택했다. 페이지마다 조건을 평가해서 스크립트 유무를 결정하는 게 미세하게 더 "최적화"처럼 보이지만, 실제로는 조건 로직이 복잡해지고 캐시 활용도가 떨어지는 부작용이 있다. 브라우저 캐시를 한 번 타면 CDN 스크립트 로드 비용은 거의 0이니, 전역 로드가 현실적으로 더 낫다.
회고하며
이런 광고 연동 작업은 코드 자체는 길지 않아도 판단 포인트가 많다. CDN을 어디에 박을지, 슬롯 컴포넌트를 어떻게 추상화할지, mediation 분기 조건을 props로 뺄지 환경변수로 뺄지. 하나하나가 나중에 유지보수 비용을 결정한다.
팀 리뷰 때 항상 강조하는 게 "광고 코드는 특히 사이드이펙트 범위를 좁게 잡아라"다. 광고 스크립트는 외부 의존성이 강하고, 어느 날 갑자기 CDN이 느려지거나 스크립트 구조가 바뀌는 일이 실제로 일어난다. 영향을 한 컴포넌트 안으로 가두는 습관이 나중에 장애 대응 속도를 결정한다.
다음 작업은 슬롯별 fill rate 측정 추가 예정.
끝.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.