광고 슬롯에 미디에이션 포맷 분기 로직 추가

광고 슬롯 컴포넌트에 미디에이션 타입 분기 로직을 새로 추가한 작업이다.

왜 이 작업이 필요했나

블로그 같은 퍼블리셔 사이트에서 광고를 붙일 때, 보통 단일 광고 네트워크만 쓰지 않는다. 여러 광고 네트워크를 연결해서 경쟁 입찰이나 우선순위 기반으로 광고를 채우는 방식, 즉 미디에이션(mediation) 구조를 많이 쓴다. 이번 작업은 그 미디에이션 구조 안에서 mobon의 i-cover / m-cover 포맷을 지원하도록 AdSlot.astro를 확장한 것이다.

i-cover와 m-cover는 각각 데스크탑/모바일 환경에 최적화된 광고 포맷이다. 동일한 슬롯 컴포넌트 안에서 두 포맷을 분기 없이 그냥 렌더링하면, 잘못된 환경에 잘못된 크기의 광고가 노출되거나 스크립트가 꼬이는 문제가 생긴다. 그래서 미디에이션 타입을 명시적으로 받아서 처리하는 분기가 필요했다.

AdSlot 컴포넌트 입장에서 본 변경

AdSlot.astro는 블로그 전체에서 광고 삽입 지점을 담당하는 컴포넌트다. 이 파일 하나가 변경된 게 단순해 보이지만, 사실 이 컴포넌트를 쓰는 모든 페이지에 영향이 가는 구조다. 즉 핀포인트 수정이지만 파급 범위는 넓다.

이런 컴포넌트를 수정할 때 내가 항상 신경 쓰는 건 기존 슬롯에 대한 하위 호환이다. 새 타입을 추가하면서 기존 props 구조를 깨면 안 된다.

---
// 기존 props에 mediationType을 선택적으로 추가하는 패턴
interface Props {
  slotId: string;
  mediationType?: 'i-cover' | 'm-cover' | 'default';
}

const { slotId, mediationType = 'default' } = Astro.props;
---

{mediationType === 'i-cover' && (
  <!-- i-cover 렌더링 로직 -->
)}
{mediationType === 'm-cover' && (
  <!-- m-cover 렌더링 로직 -->
)}
{mediationType === 'default' && (
  <!-- 기존 슬롯 렌더링 -->
)}

실제 코드와 완전히 같진 않겠지만 이런 구조로 가는 게 맞다고 생각했다. mediationType에 기본값을 'default'로 두면 기존 슬롯은 건드리지 않아도 되고, 새 포맷을 붙이고 싶은 슬롯만 명시적으로 타입을 넘기면 된다.

미디에이션 타입 분기에서 자주 보이는 실수들

광고 미디에이션 쪽 작업을 할 때 보면 반복적으로 나오는 실수 패턴이 있다.

특히 스크립트 중복 로드는 광고 컴포넌트에서 진짜 흔한 문제다. 컴포넌트가 페이지에 여러 번 쓰이면, 각 인스턴스마다 <script> 태그가 삽입되면서 광고 SDK가 여러 번 초기화된다. Astro의 경우 is:inline 없이 <script> 태그를 쓰면 빌드 시 중복 제거가 되지만, 인라인으로 광고 스크립트를 직접 삽입하는 구조라면 이 부분을 명시적으로 방어해야 한다.

작업 회고

사실 이런 광고 슬롯 작업은 "쉬운 작업"으로 분류되는 경향이 있다. 근데 실제로는 생각보다 꼼꼼하게 봐야 하는 부분이 많다. 노출 환경 분기, 스크립트 로드 시점, 기존 슬롯 하위 호환, 그리고 광고 수익 지표에 바로 영향을 준다는 점.

팀에서 이 컴포넌트를 리뷰할 때도 "기존 슬롯은 영향 없는 거 맞지?" 하는 질문이 제일 먼저 나온다. 그게 맞는 리뷰 포인트다. 새 기능 추가보다 기존 동작 보존이 더 중요한 컨텍스트.

i-cover / m-cover 두 포맷을 하나의 컴포넌트 안에서 분기 처리하는 구조를 잡아뒀으니, 앞으로 다른 미디에이션 타입이 추가되더라도 같은 패턴으로 확장할 수 있다. 컴포넌트 설계 의도가 코드에 남는 게 중요하다고 생각하는 편이라, 이번 작업이 그 역할을 했으면 한다.

끝.

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

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

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