CLS 문제 해결 완전 정복: 애드센스 승인 막는 레이아웃 흔들림 6가지 원인과 해결법

CLS(레이아웃 이동) 문제 해결 애드센스 승인을 방해하는 레이아웃 흔들림 잡기

  애드센스 승인 막는 레이아웃 흔들림 6가지 원인과 해결법

CLS(Cumulative Layout Shift) 점수를 0.1 이하로 낮추면 애드센스 승인 확률이 크게 올라가고, 사용자 경험도 눈에 띄게 개선된다. 페이지를 읽다가 갑자기 콘텐츠가 튀어 올라가거나 내려가는 현상, 바로 이 CLS가 주범이다.

원인 중 하나가 CLS였다. PageSpeed Insights로 확인해보니 점수가 0.4가 넘어있었다. 

 

📋목차

• CLS란 무엇이고 왜 중요한가
• CLS 점수 측정 방법
• 레이아웃 흔들림 6가지 주요 원인
• 이미지 크기 미지정으로 인한 CLS 해결
• 웹 폰트 로딩으로 인한 CLS 해결
• 광고와 임베드 콘텐츠 CLS 해결
• 티스토리 블로그 CLS 개선 체크리스트

📏 CLS란 무엇이고 왜 중요한가

"CLS"는 Cumulative Layout Shift의 약자로, 페이지가 로딩되는 동안 화면의 요소들이 예기치 않게 이동하는 정도를 수치로 나타낸 것이다. 구글이 정한 Core Web Vitals 지표 중 하나로, SEO와 직접적으로 연결된다.

좋은 CLS 점수는 0.1 이하다. 0.1~0.25는 개선이 필요한 수준이고, 0.25 이상은 나쁨 등급이다. 구글 애드센스 자동 승인 심사에서도 CLS는 중요한 품질 지표로 작용한다. 레이아웃 흔들림이 심한 사이트는 사용자 경험을 해친다고 판단해 승인을 거절하는 경우가 있다.

🔬 CLS 점수 측정 방법

가장 쉬운 방법은 구글 PageSpeed Insights를 이용하는 것이다. 블로그 URL을 입력하면 CLS 점수와 함께 어떤 요소가 문제인지 구체적으로 알려준다.

Chrome DevTools에서는 Performance 탭에서 페이지 로딩을 녹화하면 레이아웃 이동이 언제, 어디서 발생하는지 시각적으로 확인할 수 있다. Layout Shift 이벤트가 빨간색으로 표시되니 찾기 쉽다.

Google Search Console의 Core Web Vitals 리포트도 확인하자.

실제 사용자 데이터 기반으로 CLS 문제가 있는 페이지 목록을 제공한다.

🔍 레이아웃 흔들림 6가지 주요 원인

"레이아웃 흔들림"이 발생하는 주요 원인 6가지를 정리했다.

첫 번째는 크기가 지정되지 않은 이미지다. 이미지가 로드되면서 공간을 차지하면 아래 콘텐츠가 밀린다.

두 번째는 웹 폰트 로딩 지연이다. 시스템 폰트로 렌더링했다가 웹 폰트가 로드되면 글자 크기가 바뀌면서 레이아웃이 변한다.

세 번째는 동적으로 삽입되는 광고다. 광고가 로드되면서 갑자기 공간을 차지해 아래 내용을 밀어낸다.

네 번째는 YouTube나 지도 같은 임베드 콘텐츠다. iframe의 크기가 로딩 후 결정되면 레이아웃이 흔들린다.

다섯 번째는 애니메이션 효과다. transform이나 opacity가 아닌 top, left, width, height를 변경하는 애니메이션은 레이아웃을 유발한다.

여섯 번째는 동적으로 주입되는 콘텐츠다. JavaScript로 페이지 상단에 배너나 알림을 삽입하면 아래 내용이 밀린다.

🖼️ 이미지 크기 미지정으로 인한 CLS 해결

이미지에 width와 height 속성을 명시하면 브라우저가 이미지 로드 전에 공간을 미리 확보할 수 있다. 이게 CLS를 줄이는 가장 기본적인 방법이다.

<img src="photo.jpg" width="800" height="450" alt="설명">

실제 이미지 비율에 맞게 width와 height를 지정해야 한다. CSS로도 aspect-ratio를 활용할 수 있다.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

✍️ 웹 폰트 로딩으로 인한 CLS 해결

웹 폰트로 인한 "CLS" 해결 방법은 font-display 속성 조정이다. font-display: swap을 쓰면 폰트 로딩 중 시스템 폰트를 보여주다가 교체하는데, 이 교체 시 레이아웃 이동이 생길 수 있다.

font-display: optional을 쓰면 폰트가 빠르게 로드될 때만 적용하고, 느리면 시스템 폰트를 그대로 사용한다. CLS 관점에서는 optional이 가장 안전하다.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: optional;
}

📢 광고와 임베드 콘텐츠 CLS 해결

애드센스 광고로 인한 CLS를 줄이려면 광고가 들어올 공간을 미리 확보해두면 된다. min-height를 설정해서 광고 로드 전후에 레이아웃 변화가 없도록 하는 방법이다.

.ad-container {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

YouTube 임베드는 aspect-ratio로 비율을 고정하는 게 좋다.

.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
}
.video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

✅ 티스토리 블로그 CLS 개선 체크리스트

티스토리 블로그에서 CLS를 개선하기 위한 체크리스트다.

모든 이미지에 width와 height 속성을 추가한다. 광고 슬롯에 min-height를 설정한다. 구글 폰트 사용 시 preconnect 링크를 head에 추가한다. JavaScript로 동적 콘텐츠를 삽입할 때는 페이지 상단이 아닌 하단에 배치한다. CSS 애니메이션은 transform과 opacity만 사용하고 layout을 유발하는 속성은 피한다.

이 다섯 가지만 체크해도 CLS 점수가 눈에 띄게 개선된다. PageSpeed Insights로 적용 전후를 비교해보면 차이를 확인할 수 있다.

---

출처 및 참고
- Google Web.dev CLS: https://web.dev/articles/cls
- PageSpeed Insights: https://pagespeed.web.dev
- Google Search Console: https://search.google.com/search-console