번호 생성기 페이지에 광고 인터리브 배치 적용한 과정

번호 생성기 페이지에 광고 인터리브 배치를 직접 손댔다.

PC에서 4개, 모바일에서 4개 — 같은 숫자처럼 보이지만 레이아웃 전략은 완전히 달랐던 작업이다.

왜 인터리브 방식이었나

광고를 그냥 상단/하단에 덩어리로 두는 건 쉽다. 그런데 번호 생성기처럼 콘텐츠가 반복적으로 나열되는 구조에서는 인터리브(interleave), 즉 콘텐츠 사이사이에 광고를 끼워 넣는 배치가 노출률과 클릭률 측면에서 훨씬 유리하다. 사용자 스크롤 흐름을 자연스럽게 타기 때문이다.

모비온 광고 스크립트를 단순히 붙이는 게 아니라, 몇 번째 아이템 이후에 광고 슬롯을 삽입할지 설계하는 게 이번 작업의 핵심이었음.

PC 4개 + 모바일 4개, 근데 배치는 다르다

PC는 한 화면에 들어오는 콘텐츠 밀도가 높으니 일정 간격으로 흩어두는 방식이 자연스럽고, 모바일은 뷰포트가 좁아서 광고가 너무 자주 튀어나오면 UX를 해친다. 같은 4개라도 간격 계산은 전혀 다르게 가져가야 했다.

generator.astro 한 파일에서 이 두 가지 분기를 처리하다 보니 조건 분기가 좀 늘었다. Astro 특성상 빌드 타임에 HTML 구조가 결정되기 때문에, CSS 미디어 쿼리로 숨기고 보이게 하는 방식과 실제 DOM에 슬롯을 다르게 찍는 방식 중 어느 걸 택할지도 잠깐 고민했음.

결국 선택한 건 — CSS visibility 분기. 광고 요청 자체를 모바일/PC 각각 따로 보내는 건 오버엔지니어링이라고 판단했다. 광고 슬롯은 동일하게 마크업하되, 어느 위치에서 보이느냐를 미디어 쿼리로 제어하는 게 유지보수 측면에서도 훨씬 낫다.

<!-- 인터리브 광고 슬롯 예시 패턴 -->
{items.map((item, index) => (
  <>
    <LottoCard item={item} />
    {(index + 1) % interval === 0 && (
      <div class="ad-slot ad-interleave">
        <!-- 모비온 광고 스크립트 -->
      </div>
    )}
  </>
))}

실제 interval 값을 얼마로 잡느냐가 체감 UX에 꽤 영향을 준다. 너무 촘촘하면 광고 페이지가 되고, 너무 드문드문하면 광고 효율이 떨어진다. 이번엔 콘텐츠 블록 기준으로 계산했다.

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

이런 작업을 팀에서 처리할 때 코드리뷰 포인트로 자주 짚는 부분들이 있다.

• 레이아웃 쉬프트(CLS): 광고 슬롯에 min-height 를 잡지 않으면 로딩 후 콘텐츠가 밀리면서 Core Web Vitals 지표가 튄다. 꼭 사전에 공간 확보할 것
• 광고 중복 노출 방지: 같은 페이지에서 동일 슬롯 ID를 여러 번 렌더링하면 광고 정책 위반이 될 수 있음. 슬롯 ID 유니크 처리 확인
• 빈 광고 슬롯 처리: 광고가 채워지지 않았을 때 빈 공간이 떡하니 남는 경우가 있다. 광고 미노출 시 해당 슬롯 영역을 collapse 처리하는 로직도 같이 챙겨야 함
• 모바일 터치 영역 침범: 광고가 버튼이나 주요 인터랙션 요소 바로 위아래에 붙으면 오터치가 발생한다. 여백 마진 꼭 확인

generator.astro 한 파일 변경이지만, 광고가 붙는 순간부터 퍼포먼스 지표와 UX, 수익 지표가 동시에 엮이는 구조가 된다. 단순 마크업 작업이 아니라는 걸 팀원들한테도 늘 강조하는 편이다.

다음 스텝은 인터리브 간격 A/B 테스트 정도가 되지 않을까 싶다.

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

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

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