레이아웃 변경 최소화

레이아웃 변경은 페이지에 표시되는 요소의 위치나 크기가 변경되면 주위의 콘텐츠 위치에 영향을 줍니다. 사용자 작업에 따라 컨테이너가 확장되는 경우와 같이 전환을 의도하는 경우도 있습니다. 하지만 광고의 동적 특성으로 인해 예상치 못한 레이아웃 변경이 발생할 수 있으며, 이로 인해 사용자 환경에 부정적인 영향을 미치고 심각한 사용성 문제가 발생할 수 있습니다.

이 가이드에서는 Google 게시자 태그 (GPT)를 사용할 때 레이아웃 변경을 측정하고 최소화하는 방법을 설명합니다.

광고가 레이아웃 변경을 초래하는 방식

광고는 일반적으로 페이지 로드 중이나 로드 후에 비동기식으로 요청되며 페이지에 콘텐츠를 동적으로 추가합니다. 광고를 가져오는 동안 페이지의 나머지 부분이 계속 로드되며 광고가 아닌 콘텐츠가 사용자에게 표시될 수 있습니다. 로드되는 광고를 위한 공간을 충분히 확보하지 않으면 광고가 페이지에 표시될 때 보이는 비광고 콘텐츠가 대체될 수 있습니다.

Google 게시자 태그를 사용할 때 광고 수명 주기에서 레이아웃이 변경될 수 있는 몇 가지 시점이 있습니다.

  1. display()가 호출될 때 슬롯은 구성된 방법에 따라 확장되거나 축소될 수 있습니다.
  2. 광고 콘텐츠가 렌더링될 때 유동적인 광고가 게재되거나 공간이 부족한 경우 슬롯의 크기를 조절할 수 있습니다. 슬롯은 구성 방법에 따라 이 시점에서 확장되거나 축소될 수도 있습니다.
  3. 광고 콘텐츠가 렌더링된 후 일부 광고 소재 유형은 페이지에 표시된 후에 확장되도록 디자인됩니다.

광고 슬롯이 표시 영역 내에서 높은 위치에 있을수록 대체될 가능성이 있는 콘텐츠가 많아집니다. 초기 표시 영역 상단 (스크롤 없이 볼 수 있는 부분)의 슬롯을 사용할 때는 특히 주의하세요. 이러한 슬롯은 광고 콘텐츠가 로드될 때 표시될 가능성이 높기 때문에 과도하게 많은 레이아웃 변경을 일으킬 수 있습니다.

레이아웃 변경 측정

레이아웃 변경 횟수 (CLS)는 실험실 및 현장 모두에서 레이아웃 변경이 사이트에 미치는 영향을 수치화하는 데 사용할 수 있는 코어 웹 바이탈 측정항목입니다.

실험실

실험실 도구는 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;
  }
}

자바스크립트로 공간을 예약하면 스크립트가 로드될 때 레이아웃이 변경될 수 있으므로 예약하지 않는 것이 좋습니다. CSS에 공간을 예약하면 이러한 위험을 방지할 수 있습니다.

유동적인 광고 슬롯

유동적인 광고 슬롯은 지원하는 고정된 크기 집합을 지정하지 않습니다. 대신 이러한 슬롯은 게재된 광고 소재 콘텐츠에 맞게 자동으로 크기가 조절되므로 크기가 지정되지 않은 광고 소재를 지원할 수 있습니다. 따라서 광고 콘텐츠를 요청하기 전에 이러한 슬롯을 위한 공간을 예약할 수 없으며 유동적인 크기의 광고는 항상 레이아웃 변경을 야기합니다.

유동적인 광고 슬롯을 사용할 때 레이아웃 변경의 영향을 완화하려면 다음을 권장합니다.

  • 스크롤해야 볼 수 있는 부분의 슬롯에만 fluid 크기를 사용합니다.
  • 유동 슬롯을 최대한 빨리 가져와서 슬롯의 크기가 조절되기 전에 사용자가 스크롤하여 뷰로 스크롤할 가능성을 최소화합니다.

광고 슬롯 축소 및 확장

collapseEmptyDivs() 메서드를 사용하면 표시할 광고 콘텐츠가 없을 때 페이지의 공간을 차지하지 않도록 광고 슬롯 div를 축소할 수 있습니다. 그러나 이 기능은 의도하지 않은 레이아웃 변경이 발생할 수 있으므로 주의해서 사용해야 합니다. 이전 섹션의 설명처럼 광고 슬롯을 축소하거나 펼치면 광고 수명 주기의 서로 다른 두 시점에서 레이아웃이 변경될 수 있습니다.

이 기능을 사용해야 하는 경우 Ad Manager 보고의 이전 채우기 데이터를 사용하여 다음 권장사항을 구현함으로써 레이아웃 변경의 영향을 줄일 수 있습니다.

  • 채워질 가능성이 있는 슬롯은 항상 확장된 상태로 시작해야 합니다.
  • 채울 가능성이 낮은 슬롯은 항상 접힌 상태로 시작해야 합니다.

구현 예는 빈 광고 슬롯 접기 샘플을 참고하세요.

이전
광고 권장사항
다음
실적 모니터링