광고 슬롯에 미디에이션 타입 분기를 추가한 설계 결정

MobonSlot 컴포넌트에 mediation 분기를 추가했다. 기존엔 frameCode 기반 광고 슬롯만 처리하던 구조였는데, i-cover / m-cover 형태의 mediation 타입을 별도로 다뤄야 하는 요건이 생겼다.

왜 분기가 필요했나

광고 미디에이션(mediation)은 여러 광고 네트워크를 단일 슬롯에서 경합시켜 수익을 최적화하는 방식이다. 그런데 이 mediation 타입은 기존 frameCode 기반 슬롯과 동작 방식이 근본적으로 다르다. frameCode가 있는 슬롯은 Mobon 자체 코드가 렌더링을 주도하지만, mediation은 CDN에서 스크립트를 끌어다 써서 외부 네트워크 경합을 처리한다. i-cover / m-cover라는 커버 형태가 바로 이 경우였고, mediacategory.com CDN 경로를 통해 스크립트를 로드하는 방식으로 송출된다.

결국 컴포넌트 하나에서 "frameCode가 있는 경우"와 "frameCode 없이 type:mediation config로 동작하는 경우"를 깔끔하게 분리해야 했다. 처음에는 기존 슬롯 로직에 조건만 얹으면 되지 않을까 싶었는데, CDN 로드 방식과 DOM 초기화 타이밍이 달라서 그냥 if 하나 얹는 수준으로는 안 됐다.

작업 내용 — MobonSlot.astro 변경

변경은 src/components/MobonSlot.astro 단일 파일 안에서 이뤄졌다.

분기 구조를 대략 표현하면 이런 흐름이다.

---
const { frameCode, type, coverId } = Astro.props;
const isMediation = type === 'mediation';
---

{isMediation ? (
  <!-- mediacategory.com CDN 스크립트 + cover slot 렌더 -->
  <div id={coverId} class="mobon-cover" />
  <script src="https://cdn.mediacategory.com/..." async />
) : (
  <!-- 기존 frameCode 기반 슬롯 -->
  <div id={frameCode} />
  <script>/* Mobon frameCode 초기화 */</script>
)}

핵심은 type: "mediation" prop을 받아서 분기 진입점을 명확히 한 것이다. frameCode가 없다는 조건만으로 분기를 타면 나중에 실수가 생긴다 — frameCode를 빠뜨린 버그와 의도적인 mediation을 구분할 수 없게 된다. 명시적인 type 필드를 config에 두는 게 훨씬 안전하다.

팀 관점에서 본 이 분기

광고 슬롯 컴포넌트는 여러 페이지에서 재사용된다. 분기 추가가 단순해 보여도, 잘못 설계하면 나중에 슬롯 타입이 늘어날 때마다 컴포넌트 내부가 조건 덩어리로 오염된다. 그래서 이번엔 props 인터페이스를 먼저 정의하고, 분기 로직을 컴포넌트 상단에서 딱 한 번만 결정하도록 잡았다. 하위 렌더 영역에선 이미 결정된 변수만 쓰는 구조.

코드 리뷰 시 팀원한테도 이 부분을 강조했다. "분기가 늘어난다는 게 나쁜 게 아니라, 분기 결정을 여러 곳에 흩어두는 게 나쁜 것"이라고. 진입점을 한 곳에서 단일하게 처리하면, 나중에 type: "interstitial" 같은 타입이 추가돼도 기존 로직에 손댈 이유가 없다.

i-cover / m-cover 구분도 마찬가지다. 현재는 커버 타입에 따라 DOM id나 클래스 정도만 달라지지만, CDN 스크립트 파라미터가 달라질 수 있다는 가능성을 열어두고 설계했다. 지금 당장은 불필요한 확장처럼 보여도, 광고 슬롯 쪽은 외부 벤더 스펙이 조용히 바뀌는 경우가 많아서 방어적으로 잡아두는 편이 낫다.

Astro 컴포넌트 하나짜리 파일이지만, 광고 송출 인프라의 분기를 처음 추가하는 작업이라 설계 결정이 나중에 꽤 오래 살아남는다. 가볍게 보이는 feat 커밋일수록 인터페이스 설계를 꼼꼼히 잡는 게 맞다. 다음엔 이 mediation 슬롯이 실제 트래픽에서 어떤 fill rate를 보이는지 확인하면서, CDN 로드 실패 케이스에 대한 fallback도 챙겨볼 생각이다.

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

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

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