광고 슬롯 사이즈 오선언으로 CPM 손실 수정

광고 슬롯 사이즈를 잘못 붙여놓은 걸 뒤늦게 발견하고 수정했다.

배경

본문 영역 PC 광고가 300x250 — 이른바 미디엄 렉탱글(Medium Rectangle) 사이즈로 붙어 있었다. 근데 이 슬롯(mobonslot-above-content)은 원래 970x250 가로 배너(빌보드/슈퍼 배너 계열)로 설계된 자리였다. 즉 슬롯이 넓게 비어 있는데 광고는 작게 들어오고 있었던 셈이다.

이런 불일치는 보통 두 가지 상황에서 발생한다.

• 초기 세팅 때 광고 플랫폼 측이 제공한 코드 스니펫을 그대로 붙여넣는 과정에서 사이즈 파라미터를 깜빡하거나
• 다른 페이지에서 쓰던 슬롯 코드를 복붙하면서 사이즈를 바꾸지 않는 경우

이번은 두 번째 케이스에 가까웠다. index.astro와 salary.astro 양쪽에 같은 패턴으로 잘못 들어가 있었다는 게 그 방증이다.

변경 내용

슬롯 이름 자체는 바뀌지 않았고, 사이즈 파라미터만 교정한 핀포인트 수정이다. 변경 라인 수도 많지 않았을 거라 예상되는데, 이런 작은 수정이 실은 수익 관점에서는 꽤 의미 있는 변경일 수 있다.

광고 사이즈 불일치가 왜 문제인가

광고 네트워크는 슬롯에 선언된 사이즈 기준으로 입찰(bidding)을 붙인다. 300x250으로 선언해두면 해당 사이즈 인벤토리에 대한 입찰자들이 붙는 거고, 970x250으로 선언하면 가로 배너 인벤토리 입찰자들이 붙는 구조다. 두 사이즈는 광고주 풀 자체가 다르기 때문에, 잘못된 사이즈로 선언하면:

• 실제 슬롯 공간에 비해 훨씬 작은 광고가 노출되어 레이아웃이 어색해지거나
• 슬롯 의도에 맞는 광고주들이 아예 입찰에 참여하지 못하거나
• 최악의 경우 광고 플랫폼에서 사이즈 불일치로 광고 노출 자체를 줄이는 상황이 생기기도 한다

특히 970x250 가로 배너는 PC에서 본문 상단에 올라갔을 때 시인성이 좋아 CPM이 상대적으로 높은 포맷이다. 이걸 300x250으로 받고 있었다면 그냥 돈을 덜 받고 있었던 거다.

회고

이런 류의 버그는 코드만 봐서는 잘 안 보인다. 실제 페이지를 띄워서 개발자 도구로 광고 엘리먼트 사이즈를 확인하거나, 광고 플랫폼 대시보드에서 슬롯별 노출/수익 현황을 봐야 눈에 띈다. 이번에 어느 쪽으로 발견했는지는 커밋만으론 알 수 없지만, 어쨌든 "슬롯 정의와 실제 선언 사이즈가 맞는가"를 주기적으로 점검하는 루틴이 있어야 한다는 교훈은 남는다.

멀티 페이지 서비스에서 광고를 붙일 때는 슬롯 코드를 컴포넌트로 추출해서 사이즈를 props로 명시적으로 주입하는 방식이 실수를 줄이는 데 유리하다.

---
// AdSlot.astro
const { slotId, width, height } = Astro.props;
---
<div id={slotId} style={`width:${width}px; height:${height}px;`}></div>

이렇게 해두면 복붙할 때 사이즈를 빠뜨리면 바로 티가 나고, 슬롯별 사이즈 현황을 한 곳에서 관리할 수 있다. 지금 구조에서 당장 리팩터링하는 게 우선순위는 아니었으니 일단 fix만 했는데, 슬롯이 더 늘어나는 시점이 오면 컴포넌트 분리를 고려해볼 만하다.

작은 수정이지만 맥락을 알면 무시하기 어려운 변경이었다. 끝.

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

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

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