모비온 광고 슬롯 4종을 지면에 체계적으로 배치

모비온 광고 슬롯 4종을 실제 지면에 마커로 박은 작업이었다.

왜 이 타이밍에 광고 슬롯 표준화를 잡았나

콘텐츠 지면이 어느 정도 안정되면 광고 인벤토리를 정비하는 시점이 온다. 이번에는 모비온 4종 슬롯 — i-cover, m-cover, content-top-mob, bottom-mob — 을 admin_db id 99~102로 매핑하고 실제 렌더 위치에 마커를 박는 작업을 했음. 단순히 "광고 코드 붙이기"로 보일 수 있지만, 슬롯 ID 매핑 체계를 잡는 게 핵심이었다.

광고 슬롯을 무질서하게 하드코딩하면 나중에 슬롯 교체나 A/B 테스트할 때 파일 여러 군데를 뒤져야 하는 상황이 생긴다. 팀에서 반복적으로 겪는 고통 포인트였고, 이번에 컴포넌트 분리 + admin_db ID 기반 매핑으로 정리한 것.

변경 파일 구조가 말해주는 것

파일 분포를 보면 layout.tsx와 page.tsx에 마커가 나뉘어 있는 게 보인다. i-cover/m-cover처럼 전역 노출이 필요한 슬롯은 레이아웃 레벨에서 처리하고, 페이지 특화 슬롯은 해당 페이지에만 박는 구조. 이 분리가 안 되어 있으면 페이지가 늘어날수록 중복 코드가 쌓인다.

슬롯 컴포넌트 설계 방식

모비온 슬롯은 결국 특정 div에 데이터 속성을 심고 외부 스크립트가 그걸 읽어 광고를 채우는 방식이다. 이때 중요한 건 슬롯 ID를 어디서 관리하느냐.

// MobonSlot.tsx — 슬롯 ID를 admin_db 기반으로 매핑
const MOBON_SLOT_MAP = {
  'i-cover':          99,
  'm-cover':          100,
  'content-top-mob':  101,
  'bottom-mob':       102,
} as const;

type MobonSlotType = keyof typeof MOBON_SLOT_MAP;

interface MobonSlotProps {
  type: MobonSlotType;
  className?: string;
}

export function MobonSlot({ type, className }: MobonSlotProps) {
  const slotId = MOBON_SLOT_MAP[type];
  return (
    <div
      className={className}
      data-mobon-slot={slotId}
      data-mobon-type={type}
    />
  );
}

// explore/page.tsx — 페이지 레벨 슬롯 마커
<MobonSlot type="content-top-mob" className="ad-content-top" />
{/* ... 콘텐츠 ... */}
<MobonSlot type="bottom-mob" className="ad-bottom" />

이렇게 해두면 슬롯 ID가 바뀌어도 MOBON_SLOT_MAP 한 군데만 수정하면 된다. 코드 리뷰 때도 "이 숫자 뭐야?" 질문이 안 나온다. admin_db id와 슬롯 타입이 명시적으로 연결되어 있으니까.

광고 마커 작업에서 자주 놓치는 것들

이런 작업을 팀에서 처음 하거나, 광고 SDK에 익숙하지 않은 팀원이 붙으면 몇 가지 실수 패턴이 반복된다.

• SSR/CSR 혼용 환경에서 스크립트 타이밍 이슈: AdLoaders.tsx를 별도로 분리한 이유이기도 한데, 모비온 초기화 스크립트가 DOM이 준비되기 전에 실행되면 슬롯을 못 찾는다. 클라이언트 사이드에서만 로딩하도록 처리가 필요.
• 슬롯 중복 렌더 문제: 레이아웃에 박은 슬롯이 페이지 이동 시 재마운트되면서 광고가 여러 번 초기화되는 경우. 이 역시 AdLoaders.tsx에서 초기화 상태를 관리해야 함.
• 모바일 전용 슬롯인데 데스크탑에도 DOM에 존재하는 케이스: m-cover, bottom-mob 같은 mob 슬롯은 CSS로 숨기더라도 DOM에 있으면 광고 요청이 나갈 수 있다. 미디어 쿼리 수준이 아니라 렌더 자체를 조건부로 해야 하는 상황도 있음.

이번 작업에서 이 부분들을 같이 검토했고, AdLoaders.tsx가 그 처리를 담당하는 구조로 잡혔다.

매핑 연동까지 완료된 게 중요한 이유

admin_db id 99-102 매핑까지 함께 연동한 게 이번 작업의 완성 포인트였다. 마커만 박아두고 admin 연동이 안 되어 있으면 운영 단에서 슬롯별 on/off나 타겟팅 설정을 할 수가 없다. 프론트 작업과 admin 매핑을 한 번에 끊어낸 것. 이후에 슬롯 추가/변경이 생기면 이 패턴 그대로 확장하면 된다.

다음엔 슬롯별 노출 지표 트래킹 붙이는 작업이 될 것 같다.

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

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

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