모달 광고 충돌 해결로 쿠팡 carousel만 단독 렌더링

모달 광고 영역에서 예상치 못한 충돌이 터졌다. 원인은 모비온 본문 광고와 동일 레이어에 쿠팡 carousel이 함께 렌더링되면서 생기는 간섭이었고, 수정 방향은 명확했다 — 모달 안에서는 쿠팡 carousel 하나만 남기자.

배경: psy gate 모달과 광고 레이어 충돌

심리적 게이트(psy gate) 패턴은 콘텐츠 일부를 보여주다가 특정 시점에 모달을 띄워 사용자 행동을 유도하는 구조다. 이 모달 안에 광고를 함께 배치하는 건 꽤 흔한 수익화 전략이기도 하다. 문제는 광고 공급사가 여러 개일 때 발생한다.

이번 케이스는 모달 레이어 내부에 두 가지 광고가 공존하는 상황이었다.

모비온 본문 광고는 원래 콘텐츠 페이지 본문 흐름 안에서 동작하도록 설계된 광고다. 그걸 모달이라는 별도 레이어로 끌어올리면 z-index 문제, 스크롤 컨텍스트 불일치, 스크립트 초기화 타이밍 등 여러 간섭 포인트가 생긴다. 모비온 광고 스크립트 자체가 DOM에서 자신의 위치를 기준으로 사이즈와 렌더링을 계산하기 때문에, 모달 위에 올라가면 계산이 틀어지는 거다.

수정 내용: 모달에서 모비온 제거, 쿠팡만 유지

src/layouts/Base.astro와 src/pages/t/[slug]/index.astro 두 파일이 변경됐다. Base.astro는 전체 레이아웃 레벨에서 광고 스크립트 로드 순서나 광고 슬롯 선언을 관리하는 파일이고, [slug]/index.astro는 개별 콘텐츠 페이지 — 즉 psy gate가 실제로 발동하는 페이지다.

두 파일을 함께 건드렸다는 건 단순히 컴포넌트 한 줄 지운 게 아니라, 레이아웃 레벨 광고 선언과 페이지 레벨 렌더링 조건 양쪽을 모두 정리했다는 의미다. 어느 한쪽만 막으면 다른 쪽에서 다시 올라오거나, 스크립트는 로드됐는데 슬롯이 없어서 콘솔 에러가 쏟아지는 상황이 생긴다.

<!-- 수정 전: 모달 안에 두 광고 병존 -->
<PsyGateModal>
  <CoupangCarousel />
  <MobionContentAd />   <!-- 본문 컨텍스트 기반 → 모달에서 깨짐 -->
</PsyGateModal>

<!-- 수정 후: 쿠팡 carousel 만 -->
<PsyGateModal>
  <CoupangCarousel />
</PsyGateModal>

carousel 형태의 광고는 자체 컨테이너 안에서 크기와 레이아웃을 완결시키는 구조라 모달 위에 올려도 비교적 안전하다. 반면 본문 광고는 페이지 스크롤, 뷰포트 감지, IntersectionObserver 같은 맥락 의존도가 높아서 별도 레이어에선 신뢰하기 어렵다.

회고

사실 이런 충돌은 "두 광고를 같이 써보자"는 결정 시점에 이미 예견할 수 있었던 문제였다. 광고 스크립트는 서드파티 코드고, 각 공급사는 자기 스크립트가 어떤 DOM 컨텍스트에 올라갈지 보장하지 않는다. 새 광고를 추가할 때 "이 광고가 모달이나 오버레이 위에서도 동작하는가"를 먼저 체크하는 습관이 필요하다.

팀 관점에서 보면, 이런 광고 조합 변경은 QA 리소스를 꽤 잡아먹는다. 모달 발동 조건, 디바이스별 렌더링, 광고 스크립트 로드 타이밍까지 경우의 수가 많기 때문이다. 앞으로 psy gate나 오버레이 안에 광고 슬롯을 넣을 때는 "자기완결형 광고(carousel, 배너)"만 허용하고 "컨텍스트 의존형 광고(본문 네이티브, 인피드)"는 배제한다는 룰을 팀 내 공유해두는 게 낫겠다는 생각이 들었다.

작은 수정처럼 보이지만, 두 파일에 걸쳐 레이아웃과 페이지 레벨을 동시에 정리한 건 나름 꼼꼼한 작업이었다. 핀포인트 수정일수록 임팩트 범위를 더 넓게 보고 들어가야 한다.

끝.

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

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

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