🧩 가상 스크롤( Virtualized List ) 환경에서 광고 배치 이슈 & 해결 전략 기록

🚨 문제 상황

• viewport 밖 요소 → unmount

• 다시 들어오면 → remount

• remount 시 → 광고 재요청 발생

💥 실제로 발생하는 리스크

• CTR 하락

• RPM 하락

• Google Ads 품질 신호 악화 가능성

• 비정상 요청 패턴 감지 가능성

• 최악의 경우 → 계정 리스크

🧠 왜 이런 문제가 발생할까?

🎯 목표 정의

• 광고 DOM은 항상 마운트 상태 유지

• 가상 스크롤 생명주기의 영향을 받지 않도록 분리

• 광고 재요청 완전 차단

🛠 시도했던 해결 방안

• viewport 밖 영역까지 DOM 유지

• 유저 스크롤 범위 예측 불가

• 빠른 스크롤 시 여전히 unmount 발생

• 근본 해결 불가

2️⃣ DOM KeepAlive

• 광고 컴포넌트 강제 유지

• 내부적으로 광고 재요청 발생

• React 레벨 유지 ≠ 광고 시스템 유지

• DOM 이동 / 제거 자체가 문제

✅ 최종 해결 전략

광고를 가상스크롤 리스트 아이템으로 취급하지 않는다.

1. Spacer 배치 (리스트 내부)

• 리스트 내부 광고가 배치되어야 할 공간에 동일 크기의 빈 div를 삽입한다

• 삽입된 div는 다음 역할을 수행하게 된다
• 레이아웃 공간 확보
• 가상 스크롤 계산 유지
• 광고 DOM과 분리

1. 광고 독립 렌더링 (리스트 외부)

• 광고 컴포넌트를 리스트 외부에 배치하고 position 값으로 absolute 를 설정한다.

• 외부에 배치가 됨으로 리스트의 랜더링 라이프사이클 영향을 받지 않는 상태가 되며, 이는 DOM이 유지되어 광고재요청 발생을 방지 할 수 있게 된다.

1. 좌표 계산 & 동기화

• 외부에 배치한 광고를 스크롤시 자연스럽게 이동되도록 하기 위한 spacer 위치와 동기화 작업을 진행한다.
positionIndex * virtualRowHeight:
• 가상 스크롤은 모든 row가 동일 높이(virtualRowHeight)라고 가정하고 좌표를 계산한다:

아이템 위치 = index * rowHeight

• 이 index는 실제 DOM index가 아니라, 가상 리스트 기준 논리적 순서(positionIndex) 이다.
• 몇 번째 위치에 광고 spacer가 존재하는가? 리스트내 어떤 순서에 삽입되는가? 를 의미한다.
heightCorrection:
• 높이 차이로 인해 발생하는 누적 보정값
• 기본적 각 row 요소들의 위치는 positionIndex * virtualRowHeight 로 계산하면 충분하다.
• 하지만 광고 같은 외부 삽입 요소는 일반 row와 달리 높이가 더 클 수 있기 때문에 추가 보정이 필요하다.
예를 들어:
• 일반 row 높이 = 72px (virtualRowHeight),
• 광고 높이 = 250px,
• 리스트 내부 spacer(광고자리) = 250px
• 가상 스크롤은 row를 72px로 계산하며 쌓아 올리는데, 실제 레이아웃은 광고가 들어간 지점부터 추가 높이(250-72) 만큼 더 밀리게 된다.
광고 spacer가 실제 높이를 정확히 차지하고 있음에도 불구하고, react-window의 위치 계산 모델에서는 여전히 virtualRowHeight 기준으로만 offset이 계산된다
그 결과 광고가 삽입된 이후부터 가상 계산 위치와 실제 레이아웃 사이에 (adHeight - virtualRowHeight)
이 오차를 보정하기 위한 값이 바로 heightCorrection 다.

✅ 최종 결과

• 광고 unmount 발생 없음

• 광고 재요청 제거

• 최초 로드 광고 유지

• CTR, RPM 영향 없음