애드센스 광고 도입 후 CLS 악화 방지하기

글을 읽는데 위에서 광고가 뜨면서 본문이 아래로 쑥 밀려나는 경험, 누구나 한 번쯤 해 봤을 것이다.

이런 화면 밀림은 불편함으로 끝나지 않는다. 코어 웹 바이탈 점수가 떨어져 검색 노출에 영향을 주고, 광고 주변에서 밀리면 방문자가 광고를 잘못 누르는 오클릭으로 이어질 수 있다.

이 글에서는 애드센스 광고를 붙일 때 화면 밀림(CLS)을 막는 방법과, 실제 방문자의 CLS가 나빠지는 순간을 빠르게 알아채는 방법을 정리했다. 페이지가 많은 사이트일수록 어디서 밀림이 생겼는지 눈으로 찾기 어려우니, 감지 방법까지 함께 챙겨 두면 좋다.

CLS란

CLS(Cumulative Layout Shift)란 화면이 예고 없이 밀리는 정도를 숫자로 측정한 것을 말한다.

구글은 CLS를 Core Web Vitals 지표 중 하나로 쓰고,
web.dev 문서에 따르면, 0.1 이하면 좋음, 0.25를 넘으면 나쁨이라고 한다.

광고로 화면이 밀리는 대표적인 유형

광고 때문에 화면이 밀리는 경우는 대부분 아래 중 하나다.

높이 0에서 시작하는 광고 칸: 광고가 도착하는 순간 그만큼 아래 콘텐츠를 밀어낸다.
예약 높이보다 큰 광고: 칸 높이를 잡아 둬도 더 큰 광고가 오면 그 차이만큼 밀린다.
빈 광고 칸 숨김: 광고가 안 채워진 칸을 숨기면 아래 콘텐츠가 그만큼 위로 당겨진다.

광고 칸 미확보로 버튼이 밀리는 GIF — 늦게 뜬 광고가 버튼을 밀어내 오클릭이 생기는 동작

광고 주변의 밀림은 점수와 별개로 0을 목표로 잡아야 한다.

광고 칸이 밀릴 경우 유저가 화면 스크롤 중에 광고가 삽입되고, 유저는 그 광고를 실수로 클릭하게 된다.

그렇게 생긴 오클릭은 무효 트래픽으로 이어질 수 있다.

유형별 원인

높이 0에서 시작하는 광고 칸
- 광고는 페이지보다 늦게 도착한다.
- 광고 칸에 높이를 정해 두지 않으면, 칸은 0으로 시작했다가 광고가 오는 순간 커진다.
예약 높이보다 큰 광고
- 한 광고 칸에는 크기가 다른 광고가 번갈아 들어온다.
- 칸 높이를 작은 광고에 맞춰 두면, 큰 광고가 올 때마다 그 차이만큼 밀린다.
빈 광고 칸 숨김
- 광고가 안 채워진 칸을 사이트 CSS로 숨기는 경우다. 애드센스도 빈 광고 칸 숨기기 도움말에서 data-ad-status="unfilled"로 빈 칸을 숨기는 방법을 소개한다.
- 그런데 애드센스가 스스로 접는 칸은 화면 밖의 빈 칸뿐이다. 화면 안의 빈 칸까지 display: none으로 숨기면, 그 순간 아래 콘텐츠가 올라오면서 CLS가 생긴다.

빈 광고 칸 접힘으로 본문이 당겨지는 GIF — 빈 광고 칸이 접히며 본문이 위로 당겨지는 동작

광고를 붙인 뒤 CLS가 나빠졌다고 해서 원인이 늘 광고인 것은 아니다.
크기를 정하지 않은 이미지, 늦게 불러오는 목록, 내용에 따라 높이가 바뀌는 영역도 레이아웃이 밀리는 경우가 있기 때문이다.

실제로 내 사이트에서 CLS를 광고 칸 상태별로 나눠 보니, 광고가 아예 없는 화면의 CLS가 가장 높았다. 광고가 아니라 다른 요소가 화면을 밀고 있었던 것이다.

해결 방법

1. 광고 칸 높이 사전 확보

광고 칸 높이는 자바스크립트가 아니라 CSS min-height로 지정한다.
그래야 페이지가 처음 그려질 때부터 그 자리를 미리 예약할 수 있다.

광고 칸 높이 확보로 버튼이 유지되는 GIF — 광고 칸 높이를 미리 확보해 버튼 위치가 유지되는 동작

높이를 얼마나 잡을지는 구글이 Publisher Tag 문서에서 세 가지 기준으로 설명한다.

예약 기준	장점	단점
가장 큰 광고	밀림 없음	빈 여백
가장 작은 광고	여백 최소	큰 광고에서 밀림
가장 자주 오는 광고	균형	일부 밀림·여백

화면 위쪽 칸일수록 밀렸을 때 점수가 커지니, 맨 위 칸은 가장 큰 광고 기준으로 잡는 편이 안전하다.

2. 광고 코드를 감싼 상자에 높이 지정

애드센스 광고 코드(<ins> 요소)를 div 하나로 감싸고, 높이는 광고 코드가 아니라 감싸는 div에 준다.
광고 코드 자체에 높이를 주면, 광고가 안 채워져 광고 코드가 접힐 때 잡아 둔 높이도 함께 사라진다.

광고 코드는 이렇게 div로 한 번 감싼다.

html

<div class="ad-seat">          <!-- 높이는 여기에 -->
  <ins class="adsbygoogle" ...></ins>
</div>

높이는 감싸는 div의 CSS에 지정하고, 화면 폭에 따라 광고 크기가 달라지면 폭별로 나눠 준다.

css

/* 높이 값은 예시 - 실제 광고 높이 분포로 정한다 */
.ad-seat {
  min-height: 280px;   /* 안쪽 광고 코드가 접혀도 이 상자가 높이를 유지 */
  display: flow-root;  /* 안쪽 여백이 상자 밖으로 새지 않게 */
}

@media (max-width: 600px) {
  .ad-seat { min-height: 320px; }
}

실제로 이렇게 바꾼 뒤, 휴대폰의 CLS '나쁨' 기록이 하루 82건에서 3건으로 줄었다.

3. 빈 광고 칸의 자리 유지

화면 안의 빈 광고 칸은 숨기지 않는다.
빈 여백이 신경 쓰이면, 칸 높이는 그대로 두고 같은 크기의 자체 배너나 안내 문구로 채운다.

4. 광고 밖 요소의 크기 지정

광고 말고도 늦게 그려지는 요소는 같은 방식으로 자리를 잡는다.

이미지·iframe: width·height 속성이나 CSS aspect-ratio로 크기를 준다.
결과·평점·추천 목록: 서버 HTML부터 자리를 잡고, 데이터가 다 준비된 뒤에 한 번에 보인다.
애니메이션: width, height, margin 대신 transform과 opacity만 움직인다.

원인 추적 방법

광고를 붙인 뒤 CLS 경고가 떴다면, 짐작으로 고치기 전에 실제 방문자 데이터부터 모은다.

1. 실사용자 CLS 수집

web-vitals 라이브러리의 attribution 빌드를 쓰면, CLS 값과 함께 가장 크게 밀린 요소(largestShiftTarget)를 받을 수 있다.
여기에 광고 칸 상태를 붙여 GA4로 보내면, 광고가 채워진 화면에서 밀리는지를 바로 가를 수 있다.

import { onCLS } from "web-vitals/attribution";

onCLS(({ name, value, delta, id, attribution }) => {
  const ad = document.querySelector("ins.adsbygoogle"); // 첫 광고 칸
  gtag("event", name, {
    value: delta,
    metric_id: id,
    metric_value: value,
    debug_target: attribution.largestShiftTarget, // 가장 크게 밀린 요소
    load_state: attribution.loadState,
    ad_filled: ad ? ad.dataset.adStatus || "pending" : "none", // 광고 칸 상태
  });
});