레이아웃 변경은 페이지의 표시된 요소가 위치나 크기를 변경하여 주변 콘텐츠의 위치에 영향을 미칠 때 발생합니다. 사용자 작업의 결과로 컨테이너가 확장되는 경우와 같이 의도적으로 변경되는 경우도 있습니다. 그러나 광고의 동적 특성으로 인해 예상치 못한 레이아웃 전환이 발생할 수 있으며, 이는 사용자 환경에 부정적인 영향을 미치고 심각한 사용성 문제를 일으킬 수 있습니다.
이 가이드에서는 Google 게시자 태그 (GPT)를 사용할 때 레이아웃 변경을 측정하고 최소화하는 방법을 설명합니다.
광고로 인해 레이아웃이 변경되는 방식
광고는 일반적으로 비동기식으로 요청되며 페이지 로드 중 또는 후에 페이지에 콘텐츠를 동적으로 추가합니다. 광고를 가져오는 동안 페이지의 나머지 부분은 계속 로드되며 광고가 아닌 콘텐츠가 사용자에게 표시될 수 있습니다. 로드되는 광고에 충분한 공간을 확보하지 않으면 광고가 페이지에 추가될 때 표시되는 광고 이외의 콘텐츠가 삭제될 수 있습니다.
Google 게시자 태그를 사용할 때 광고 수명 주기 중 레이아웃 전환이 발생할 수 있는 몇 가지 지점이 있습니다.
display()가 호출될 때 슬롯은 구성 방식에 따라 확장되거나 접힐 수 있습니다.- 광고 콘텐츠가 렌더링될 때 유동형 광고가 게재되거나 사용 가능한 공간이 부족한 경우 슬롯 크기가 조절될 수 있습니다. 구성된 방식에 따라 이 시점에서 슬롯이 확장되거나 접힐 수도 있습니다.
- 광고 콘텐츠가 렌더링된 후 특정 광고 소재 유형은 페이지에 표시된 후 확장되도록 설계되었습니다.
광고 슬롯이 표시 영역 내에서 더 높은 위치에 있으면 더 많은 콘텐츠를 덮을 수 있다는 점에 유의하세요. 초기 표시 영역 상단 (스크롤 아래)에 있는 슬롯에는 각별히 주의하세요. 이러한 슬롯은 광고 콘텐츠가 로드될 때 표시될 가능성이 높으므로 불균형한 레이아웃 전환을 일으킬 수 있습니다.
레이아웃 변경 측정
누적 레이아웃 이동 (CLS)은 실험실과 현장에서 모두 레이아웃 이동이 사이트에 미치는 영향을 수치화하는 데 사용할 수 있는 Core Web Vitals 측정항목입니다.
실험실
실험실 도구는 CLS를 합성적으로 측정합니다. 즉, 실제 사용자 상호작용에 의존하지 않으므로 연속 통합 및 로컬 개발 워크플로에 사용하기에 적합합니다. 그러나 이러한 도구는 일반적으로 페이지 로드 중에만 성능을 측정하며 시뮬레이션할 수 있는 조건이 제한되어 있으므로 보고된 값이 실제 사용자가 경험하는 값보다 낮을 수 있습니다.
Lighthouse 게시자 광고 감사는 GPT 광고로 인한 CLS를 측정하는 데 사용할 수 있는 도구입니다. 자세한 내용은 광고 관련 레이아웃 변경 줄이기 감사 문서를 참고하세요.
사이트를 탐색할 때 레이아웃 전환을 강조 표시하도록 Chrome DevTools를 구성할 수도 있습니다. 이를 통해 페이지의 광고 슬롯 근처에서 발생하는 레이아웃 전환을 수동으로 식별할 수 있습니다.
현장에서
필드 도구는 실제 사용자가 사이트와 상호작용할 때 경험하는 CLS를 측정합니다. 이 프로세스를 일반적으로 실제 사용자 모니터링(RUM)이라고 합니다. RUM을 사용하면 기기 기능, 네트워크 상태, 사용자 상호작용, 페이지 맞춤설정과 같은 실제 요소가 CLS에 미치는 영향을 관찰할 수 있습니다. 이러한 요소는 종종 합성 테스트로 시뮬레이션하기 어렵거나 불가능합니다.
레이아웃 변경 최소화
레이아웃 전환을 방지하는 유일한 방법은 CSS를 사용하여 지정된 광고 슬롯에 충분한 공간을 예약하는 것입니다. 광고 슬롯 div에서 직접 고정 높이와 너비를 설정하는 것이 가장 효과적인 방법입니다. 하지만 정적 고정 크기 광고 슬롯에는 이 방법이 잘 작동하지만 더 복잡한 시나리오에는 더 세부적인 접근 방식이 필요할 수 있습니다. 다음 섹션에서는 몇 가지 일반적인 시나리오를 설명합니다.
여러 크기의 광고 슬롯
여러 크기를 허용하는 광고 슬롯의 경우 다음 접근 방식 중 하나를 사용하는 것이 좋습니다.
- 게재되도록 구성된 최대 크기의 공간을 예약합니다.
- 게재되도록 구성된 가장 작은 크기의 공간을 예약합니다.
- Google Ad Manager 보고의 이전 채우기 데이터를 검토하여 게재될 가능성이 가장 높은 크기의 공간을 예약합니다.
적절한 접근 방식 선택
게재되도록 구성된 가장 큰 크기의 공간을 예약하는 것이 레이아웃 전환을 제거하는 가장 효과적인 방법입니다. 그러나 이 방법을 사용하면 예약된 크기보다 작은 광고 소재가 게재되는 경우 광고 주위에 여백이 더 생길 수 있습니다. 게재된 광고 소재의 크기에 맞게 광고 슬롯을 축소하면 추가 레이아웃 전환이 발생하므로 이 작업은 피하는 것이 좋습니다. 대신 세로 및 가로 가운데 정렬을 사용하여 여백이 너무 많을 때의 시각적 효과를 줄일 수 있습니다.
반면에 게재되도록 구성된 가장 작은 크기의 공간을 예약하면 광고 주변에 여백이 너무 많이 생기지 않습니다. 광고 슬롯이 일반적으로 더 작은 광고 소재로 채워지거나 슬롯에서 지원하는 모든 크기가 비슷한 경우에 이 옵션이 적합할 수 있습니다. 그러나 이 방법을 사용하면 예약된 크기보다 큰 광고 소재가 게재될 때 레이아웃이 전환됩니다. 이러한 전환은 일반적으로 공간을 전혀 예약하지 않는 것보다 작습니다.
빈 공간과 레이아웃 이동 간에 균형을 맞추려면 광고 슬롯에 '평균' 크기의 공간을 예약하면 됩니다. 예를 들어 100px을 세로로 예약하면 320x50 광고 소재가 게재될 때 약간의 공백이 발생하지만, 공간을 전혀 예약하지 않은 것보다 CLS 점수가 감소합니다. 사이트에 가장 적합한 균형을 찾으려면 다양한 크기를 실험해 보세요.
특정 슬롯에 예약할 공간의 양을 결정할 때 Google Ad Manager 보고서의 이전 게재 데이터를 검토하면 더 정확한 결정을 내릴 수 있습니다. 이는 몇 가지 예를 살펴보면 가장 잘 알 수 있습니다.
예시 1
| 광고 크기 (게재됨) | 광고 서버 노출수 (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
이 경우 제공되는 광고 소재의 대부분이 300x250이므로 세로로 250px를 예약하면 CLS를 크게 줄일 수 있습니다.
예시 2
| 광고 크기 (게재됨) | 광고 서버 노출수 (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
이 경우 대부분의 광고는 높이가 최대 90px이므로 세로로 90px를 예약하면 대부분의 경우 레이아웃 전환을 방지할 수 있습니다.
공간을 예약하는 방법
min-height 및 min-width CSS 속성을 통해 광고 슬롯의 크기를 지정하여 이 문제를 해결하는 것이 좋습니다.
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
min-height 및 min-width 속성을 사용하면 광고 슬롯에 최소한의 공간을 확보하면서도 브라우저가 필요에 따라 컨테이너 크기를 늘릴 수 있습니다. 이렇게 하면 더 큰 광고 소재가 게재되는 경우 콘텐츠가 잘리지 않습니다.
이 기법을 CSS 미디어 쿼리와 결합하여 다양한 화면 크기에 서로 다른 최솟값을 지정할 수 있습니다.
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
JavaScript로 공간을 예약하면 스크립트가 로드될 때 레이아웃이 전환될 수 있으므로 이를 피해야 합니다. CSS로 공간을 예약하면 이러한 위험을 방지할 수 있습니다.
유동적인 광고 슬롯
유동형 광고 슬롯은 지원하는 고정된 크기 집합을 지정하지 않습니다. 대신 이러한 슬롯은 게재되는 광고 소재 콘텐츠에 맞게 자동으로 크기가 조절되므로 크기가 불확실한 광고 소재를 지원할 수 있습니다. 따라서 광고 콘텐츠를 요청하기 전에 이러한 슬롯의 공간을 예약할 수 없으며 유동 크기 광고는 항상 레이아웃 변경을 일으킵니다.
유동 광고 슬롯을 사용할 때 레이아웃 전환의 영향을 완화하려면 다음을 권장합니다.
- 접힌 아래 슬롯에만
fluid크기를 사용하세요. - 슬롯 크기가 조절되기 전에 사용자가 스크롤하여 슬롯을 볼 가능성을 최소화하기 위해 최대한 빨리 유동 슬롯을 가져옵니다.
광고 슬롯 접기 및 펼치기
collapseEmptyDivs() 메서드를 사용하면 표시할 광고 콘텐츠가 없을 때 광고 슬롯 div가 페이지에서 공간을 차지하지 않도록 접을 수 있습니다. 하지만 이 기능은 의도치 않은 레이아웃 전환이 발생할 수 있으므로 주의해서 사용해야 합니다. 이전 섹션에서 설명한 대로 광고 슬롯을 접고 펼치면 광고 수명 주기의 두 지점에서 레이아웃이 전환될 수 있습니다.
이 기능을 사용해야 하는 경우 Ad Manager 보고의 이전 채우기 데이터를 사용하여 다음 권장사항을 구현하여 레이아웃 전환의 영향을 줄일 수 있습니다.
- 채워질 가능성이 있는 슬롯은 항상 펼쳐진 상태로 시작해야 합니다.
- 채워질 가능성이 낮은 슬롯은 항상 접힌 상태로 시작해야 합니다.
구현 예는 빈 광고 슬롯 접기 샘플을 참고하세요.