본문으로 건너뛰기
Mera News

퍼블리셔 가이드, 5장

광고

마지막 검토: 2026년 11월

광고는 보도를 위한 비용을 대지만, 독자가 뉴스 사이트에서 싫어하는 것의 상당 부분도 만들어 냅니다. Coalition for Better Ads는 자체 기준에 미치지 못하는 형식의 목록을 발표합니다. 이 장에서는 그 목록, 모든 슬롯의 공간을 확보하는 방법, 화면별 광고 배치를 다룹니다.

피해야 할 형식

Better Ads Standards는 데스크톱 형식 6개와 모바일 형식 10개를 지목합니다. 숏폼 동영상과 모바일 앱에는 별도의 목록이 있습니다.

형식데스크톱모바일
팝업 광고해당해당
소리와 함께 자동 재생되는 동영상해당해당
프레스티셜 광고카운트다운이 있는 경우카운트다운 유무와 관계없이
큰 고정 광고화면의 30% 초과화면의 30% 초과
광고 밀도50% 초과30% 초과
고정 동영상 광고가 있을 때의 밀도30% 초과해당 없음
깜박이는 애니메이션 광고해당 없음해당
카운트다운이 있는 포스티셜 광고해당 없음해당
전체 화면 스크롤오버 광고해당 없음페이지의 30% 초과
고정형 팝아웃 동영상 광고해당 없음해당
큰 인라인 광고(300x600 이상)와 함께 있는 고정 동영상해당 없음해당

밀도를 측정하는 방법

밀도는 주요 콘텐츠 안에 있는 모든 광고의 높이를 합한 값을 주요 콘텐츠의 전체 높이로 나눈 것입니다. 뷰포트가 아니라 주요 콘텐츠를 기준으로 측정합니다.

  • 헤더, 푸터, 사이트 탐색은 제외되며, 여기에는 관련 기사도 포함됩니다.
  • 주요 콘텐츠 아래의 광고는 계산하지 않습니다.
  • 고정 광고와 인라인 광고를 포함해 모든 형식을 계산합니다.
  • 고정 광고의 높이는 각각 한 번만 계산합니다.
  • 데스크톱에서는 사이드 레일의 광고도 계산합니다.
  • 페이지와 관련 있는 동영상의 프리롤과 미드롤 광고는 측정하지 않습니다.

예를 들어 주요 콘텐츠의 높이가 5,000픽셀인 모바일 기사를 생각해 보세요. 30% 이하로 유지하려면 광고 높이의 합이 1,500픽셀을 넘을 수 없습니다.

실제 페이지를 확인하려면 브라우저 콘솔에 다음을 붙여넣으세요. 선택자는 템플릿에 맞게 바꾸고, article 밖에 있는 고정 광고나 사이드 레일 광고의 높이는 따로 더하세요.

const main = document.querySelector('article');
const slots = [...main.querySelectorAll('.ad-slot')];
const adHeight = slots.reduce((sum, ad) => sum + ad.getBoundingClientRect().height, 0);
console.log((adHeight / main.getBoundingClientRect().height * 100).toFixed(1) + '%');

모든 슬롯의 공간 확보하기

web.dev는 광고를 레이아웃 이동의 가장 큰 원인 중 하나로 꼽습니다. 공간은 CSS로 확보하세요. Google은 JavaScript로 확보하지 말라고 경고하는데, 스크립트가 로드될 때 이동이 일어날 수 있기 때문입니다.

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

더 큰 크리에이티브도 들어갈 수 있도록 min-height를 사용하세요. 크기가 여러 가지인 슬롯에 대해 Google Publisher Tag 가이드는 세 가지 방법을 제시합니다.

확보할 공간장점단점
가장 큰 크기이동 없음작은 크리에이티브 아래에 빈 공간이 생김
가장 작은 크기빈 공간 없음더 큰 크리에이티브가 게재되면 이동이 생김
가장 자주 게재되는 크기둘의 균형약간의 이동과 약간의 빈 공간

같은 가이드와 web.dev의 규칙이 두 가지 더 있습니다.

  • fluid 슬롯은 폴드 아래에 두세요. 크리에이티브에 맞춰 크기가 바뀌므로 항상 이동을 일으킵니다.
  • 광고가 없는 슬롯을 접지 마세요. 확보한 공간을 없애면 콘텐츠를 끼워 넣는 것만큼 페이지가 움직일 수 있습니다. 대신 자리 표시자를 보여 주고, 채워질 가능성이 낮은 슬롯만 접은 상태로 시작하세요.

화면별 배치

모바일에서

  • 모바일 한도가 더 낮으므로 밀도는 휴대폰 레이아웃에서 계산하세요.
  • 고정 광고는 화면의 30% 아래로 유지하세요. 하단에 붙는 낮은 앵커형이 일반적입니다.
  • 기사 위에 떠 있는 광고와, 스크롤이나 탭을 해야 넘어갈 수 있는 전체 화면 유닛은 피하세요.
  • 첫 광고는 헤드라인과 첫 문단 아래에 두어 LCP 요소를 아래로 밀어내지 않게 하세요.

데스크톱에서

  • 사이드 레일 광고도 밀도 합계에 포함하세요.
  • 고정 유닛은 화면의 30% 아래로 유지하세요.
  • 동영상은 음소거로 시작하고, 소리는 독자가 선택하게 하세요.
  • 기사 열의 크기를 먼저 정해, 사이드 레일 슬롯이 로드되어도 기사가 움직이지 않게 하세요.

속도와 접근성

  • 첫 뷰포트 밖의 광고는 광고 태그 자체 설정이나 직접 관리하는 iframe의 loading="lazy"로 지연 로딩하세요.
  • 각 iframe에는 자체 메인 스레드가 있으므로, INP를 검토할 때 느린 상호작용이 어느 프레임에서 시작되었는지 확인하세요.
  • 동의가 필요한 곳에서는 독자가 동의한 뒤에만 광고 태그를 로드하세요. 자세한 내용은 팝업 장에 있습니다.
  • 스크린 리더 사용자가 알아보고 건너뛸 수 있도록 광고 영역에 라벨을 붙이세요.
  • WCAG 성공 기준 2.2.2에 따라, 저절로 시작되어 5초 넘게 이어지고 다른 콘텐츠와 함께 실행되는 움직이는 콘텐츠에는 일시정지, 중지, 숨기기 방법이 필요합니다. 이는 애니메이션 광고에 해당합니다.
<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

현재 상태 확인하기

Search Console의 광고 경험 보고서는 Better Ads Standards를 위반하는 광고 경험을 보여 줍니다. 검토 결과 사이트의 상태가 “실패”로 나오면 보고서에 Google이 발견한 내용이 나열되는데, 모든 문제가 담기지 않을 수도 있습니다. 지적된 부분을 고친 뒤 새 검토를 요청하세요. 검토는 도메인 전체에 적용됩니다.

체크리스트

  • 광고 운영팀과 함께 형식 표를 데스크톱과 모바일 기준으로 점검하세요.
  • 팝업, 모바일의 프레스티셜, 카운트다운 광고를 제거하세요.
  • 가장 긴 기사 템플릿과 가장 짧은 기사 템플릿의 밀도를 휴대폰에서 측정하세요.
  • 모든 고정 유닛이 화면의 30% 아래인지 확인하세요.
  • 모든 슬롯의 공간을 CSS의 min-height로 확보하세요.
  • fluid 슬롯을 폴드 아래로 옮기세요.
  • 페이지가 움직이는 곳에서는 빈 슬롯 접기를 자리 표시자로 바꾸세요.
  • 첫 뷰포트 밖의 광고를 지연 로딩하세요.
  • 각 광고 영역에 라벨을 추가하세요.
  • 광고 경험 보고서를 데스크톱과 모바일 모두 확인하세요.

출처