모비온 광고 확대

광고 레이아웃 개편 작업이었다. 모비온 광고 자리를 패키지 A 기준으로 확대하고, 기존에 있던 쿠팡 carousel 위치를 이동시키는 것.

왜 이 작업이 생겼나

광고 수익 구조를 조정하면서 모비온 쪽 계약 패키지가 바뀌었다. 패키지 A 기준으로 광고 슬롯을 더 넓게 가져가야 했고, 그에 따라 기존 레이아웃에서 자리를 차지하고 있던 쿠팡 carousel이 밀려나게 됐다. "이동"이라는 표현이지만 실제론 우선순위 재정렬에 가깝다. 어떤 광고가 어느 포지션을 점유하느냐는 단순 디자인 문제가 아니라 수익 구조와 직결되기 때문에, 이 변경은 꽤 조심스럽게 접근해야 했다.

변경이 들어간 파일을 보면 범위가 꽤 넓다.

Layout.astro에서 공통 처리를 다 해결하면 좋겠지만, 페이지마다 광고 슬롯 위치가 미묘하게 다르다. 콘텐츠 길이, 계산 결과가 노출되는 위치, 사용자 인터랙션 패턴 등이 다 다르기 때문에 개별 페이지에서도 손을 댈 수밖에 없었다.

광고 레이아웃 변경에서 주의할 것들

이런 류의 작업은 기능 구현보다 부수 효과 관리가 더 중요하다. 실제로 내가 이번에 가장 신경 쓴 부분도 거기였다.

• CLS(Cumulative Layout Shift) 유발 가능성: 광고 슬롯 크기나 위치가 바뀌면 렌더링 중 레이아웃이 흔들릴 수 있다. 모비온 광고 자리를 "확대"하는 경우 특히 높이가 늘어나면서 아래 콘텐츠가 밀리는 현상이 생길 수 있음.
• carousel 이동 후 클릭률 변화: 쿠팡 carousel이 기존보다 하단으로 내려가면 노출 자체는 유지되더라도 클릭률이 떨어질 수 있다. 이 부분은 데이터로 트래킹해야 하는 영역.
• 모바일/데스크탑 분기 처리: 광고 슬롯이 반응형으로 다르게 동작하는 경우, 변경이 한쪽에만 적용됐는지 꼭 확인해야 한다.

코드 패턴 자체는 단순하다. Astro 컴포넌트 기준으로 보면 대략 이런 식이다.

---
// 페이지별 광고 슬롯 설정
const adConfig = {
  top: 'mobion-package-a',
  mid: 'coupang-carousel',
};
---

<Layout>
  <AdSlot id={adConfig.top} size="large" />
  <main>
    <!-- 계산기 콘텐츠 -->
  </main>
  <AdSlot id={adConfig.mid} />
</Layout>

실제 구조가 이렇게 깔끔하면 좋겠지만, 페이지마다 계산 결과 섹션과 광고 슬롯이 섞여 있어서 좀 더 지저분하다. 이번 작업을 하면서 "광고 슬롯도 컴포넌트 단위로 더 추상화해두면 다음 패키지 변경 때 훨씬 수월하겠다"는 생각이 들었다.

팀 관점 회고

변경 파일이 5개 페이지 + 공통 레이아웃으로 퍼져 있다는 건, 코드리뷰 때 주의가 필요하다는 신호다. 리뷰어 입장에서는 각 페이지의 변경 의도가 일관되는지, 특정 페이지만 빠진 건 의도적인지 아닌지를 확인해야 한다. 이번엔 내가 직접 다 작업했지만, 팀원이 이런 광고 슬롯 변경 작업을 할 때 "어떤 페이지에 어떤 슬롯이 있는지" 문서화가 안 돼 있으면 누락이 생기기 쉽다.

광고 관련 작업은 기술적 난이도보다 비즈니스 맥락 파악이 더 어렵다. 어떤 패키지가 어떤 슬롯 규격을 요구하는지, carousel이 이동했을 때 계약상 노출 기준을 충족하는지 같은 부분은 코드 밖에서 결정이 나고 코드는 그 결정을 구현하는 역할이다. 팀장 입장에서는 이 맥락을 커밋 메시지에라도 남겨두는 게 낫다고 생각해서, "패키지 A"라는 키워드를 명시적으로 적었다. 나중에 패키지 B가 나왔을 때 히스토리 추적이 되도록.

끝.

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

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

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