Chrome의 과도한 광고 개입 이해하기

Nour Nabil

Rowan Merewood

게시일: 2025년 9월 22일, 최종 업데이트: 2026년 1월 7일

사용자에게 갑자기 느려지거나 배터리를 소모하거나 월별 데이터 사용량을 고갈시키는 웹페이지보다 더 답답한 것은 없습니다. 때로는 시청하려는 콘텐츠가 문제가 아니라 백그라운드에서 실행되는 광고가 문제인 경우도 있습니다.

사용자 환경을 보호하기 위해 Chrome에서는 광고가 사용할 수 있는 리소스에 제한을 적용합니다. 광고가 이러한 한도를 초과하여 과부하 광고가 되면 Chrome에서 기기의 리소스를 확보하기 위해 광고를 언로드합니다.

이 문서에서는 이 개입의 작동 방식, 관련 특정 기준점, 광고가 원활하게 게재되도록 하는 데 사용할 수 있는 몇 가지 권장사항을 설명합니다.

과도한 광고 개입이란 무엇인가요?

과도한 광고 개입은 Chrome에서 광고 프레임의 리소스 사용량을 모니터링하는 메커니즘입니다. 광고가 과도한 대역폭이나 CPU 처리 능력을 사용하는 경우 Chrome에서 해당 광고 프레임을 언로드합니다.

광고 대신 광고가 삭제됨이라는 메시지가 표시된 회색 상자가 표시되며, 일반적으로 광고가 너무 많은 리소스를 사용했다는 세부정보 링크가 함께 표시됩니다.

리소스 한도를 초과하는 과도한 광고 대신 '광고가 삭제됨'이라는 라벨이 지정된 회색 상자와 '세부정보' 링크가 표시됩니다. — 삭제 후 광고의 샘플 뷰입니다.

광고가 무거운 것으로 간주되는 경우는 언제인가요?

Chrome은 세 가지 특정 기준에 따라 광고가 과도하다고 판단합니다. 사용자가 광고와 상호작용하지 않았으며 다음 기준 중 하나를 충족하는 경우 광고가 언로드됩니다.

네트워크 사용량: 광고가 4MB 이상의 네트워크 대역폭을 사용합니다.
최고 CPU 사용량: 광고가 30초 기간 내에 15초 넘게 기본 스레드를 사용합니다.
총 CPU 사용량: 광고가 기본 스레드를 총 60초 이상 사용합니다. 광고 프레임의 하위 iframe에서 사용되는 모든 리소스는 해당 광고에 대한 개입의 한도에 포함됩니다.

이 개입의 일반적인 트리거는 무엇인가요?

특정 유형의 광고 동작은 다른 유형보다 이러한 개입을 트리거할 가능성이 더 높습니다. 일반적인 원인은 다음과 같습니다.

압축되지 않은 미디어: 압축이 제대로 되지 않은 매우 큰 이미지를 로드합니다.
JavaScript 사용량이 많음: JavaScript를 사용하여 동영상 파일 디코딩과 같은 광범위한 작업을 실행합니다.
과도한 계산: 백그라운드에서 복잡한 계산을 실행합니다.
동작이 없는 동영상 콘텐츠: 사용자가 광고와 상호작용하기 전에 대용량 동영상 파일을 로드합니다.

광고가 삭제되면 어떻게 되나요?

Chrome에서 광고가 과도한 광고 기준을 초과한 것으로 감지되면 사용자의 기기 리소스를 보호하기 위해 즉시 조치를 취합니다.

사용자 환경

사용자 관점에서 보면 광고가 즉시 언로드됩니다. 대신 Chrome에 광고가 삭제됨이라는 메시지가 포함된 회색 상자가 표시됩니다. 사용자가 컨테이너 내에서 세부정보를 클릭하면 구체적인 설명이 표시됩니다.

개발자 환경

Chrome은 Reporting API를 사용하여 정확한 상황을 알리는 개입 보고서도 생성합니다. 이전에는 이러한 보고서가 광고 프레임 자체와 하위 프레임에만 전송되었습니다. 하지만 게시자는 자신의 페이지에 게재된 광고가 삭제되고 있다는 사실을 알 수 없는 경우가 많았습니다. 이 문제를 해결하기 위해 Chrome에서는 신고 메커니즘을 확장했습니다. 이제 광고 프레임 자체 외에도 삽입 프레임 (루트 광고 프레임의 상위 요소)으로 개입 보고서가 전송됩니다. 삽입 프레임으로 전송되는 보고서에는 하위 프레임의 ID와 광고 프레임 URL이 포함됩니다.

HTTP 보고서에 맞게 페이지를 구성하려면 응답에 Report-To 헤더가 포함되어야 합니다.

Reporting-Endpoints: default="https://example.com/reports"

트리거된 게시 요청에는 다음과 같은 보고서가 포함됩니다.

POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report

[{
 "type": "intervention",
 "age": 60,
 "url": "https://example.com/url/of/ad.html",
 "body": {
   "sourceFile": null,
   "lineNumber": null,
   "columnNumber": null,
   "id": "HeavyAdIntervention",
   "message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools"
 }
}]

삽입 프레임은 삽입 프레임 URL로 전송되는 유사한 보고서를 수신하지만 메시지에는 하위 프레임의 ID와 하위 프레임의 특정 URL이 추가로 포함됩니다.

...
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools (id=123;url=http://example2.com/pre-redirect-ad-url.html)"
...

JavaScript API는 개입에서 제공된 콜백을 트리거하는 데 사용할 수 있는 observe() 메서드를 ReportingObserver에 제공합니다. 디버깅에 도움이 되는 추가 정보를 보고서에 첨부하려는 경우에 유용합니다.

// callback that will handle intervention reports
function sendReports(reports) {
  for (let report of reports) {
    // Log the `report` json using your own reporting process
    navigator.sendBeacon('https://report.example/your-endpoint', report);
  }
}

// create the observer with the callback
const observer = new ReportingObserver(
  (reports, observer) => {
    sendReports(reports);
  },
  { buffered: true }
);

// start watching for interventions
observer.observe();

개입으로 iframe 페이지 (예: 광고)가 언로드되므로 pagehide 이벤트를 사용하여 페이지가 사라지기 전에 보고 콜백이 개입 보고서를 캡처하도록 합니다.

window.addEventListener('pagehide', (event) => {
  // pull all pending reports from the queue
  let reports = observer.takeRecords();
  sendReports(reports);
});

JavaScript에서 생성된 JSON은 POST 요청에서 전송된 JSON과 유사합니다.

[
  {
    type: 'intervention',
    url: 'https://example.com/url/of/ad.html',
    body: {
      sourceFile: null,
      lineNumber: null,
      columnNumber: null,
      id: 'HeavyAdIntervention',
      message:
        'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
    },
  },
];

개발자를 위한 권장사항

광고가 과도한 광고 배너에 포함되지 않도록 하려면 다음 권장사항을 고려하세요.

무거운 콘텐츠에 사용자 상호작용 필요: 개입 기준은 사용자가 상호작용하지 않은 광고에 적용됩니다. 사용자가 광고를 클릭하거나 탭하면 리소스 한도가 더 이상 적용되지 않습니다. 동영상 또는 리치 미디어 환경의 경우 사용자가 동작('재생하려면 클릭' 등)을 할 때까지 대용량 애셋을 로드하지 마세요.
이미지 및 동영상 최적화: 이미지가 압축되고 동영상이 웹에 맞게 최적화되어 있는지 확인합니다. 대용량 동영상 파일을 자동으로 로드하지 마세요. 대신 사용자가 참여할 때까지 경량 자리표시자를 사용하세요.
CPU 사용량 감사: 연속 레이아웃 및 페인트를 트리거하는 복잡한 애니메이션이나 JavaScript 작업은 CPU 사용량을 급증시킬 수 있습니다. 도구를 사용하여 기본 스레드를 장시간 사용 중인 상태로 유지할 수 있는 코드의 병목 현상을 식별합니다.
하위 프레임 모니터링: 리소스 수에는 광고의 iframe 내에 있는 모든 항목이 포함됩니다. 광고가 서드 파티 추적 픽셀 또는 하위 프레임을 로드하는 경우 해당 리소스 사용량이 한도에 포함됩니다.
광고 외 콘텐츠 격리: 광고 외 콘텐츠 프레임을 필터 목록 제공업체의 정책에서 광고 도메인으로 간주하지 않을 가능성이 높은 다른 도메인이나 인식 가능한 패턴으로 분리합니다.

개입의 원인을 디버그하고 진단하는 방법

과도한 광고 개입을 효과적으로 해결하려면 먼저 Chrome의 감지 로직이 콘텐츠를 광고로 식별하는 방식을 이해한 다음 내장 개발자 도구를 사용하여 삭제를 유발한 특정 리소스 트리거를 감사해야 합니다.

Chrome은 광고의 존재를 어떻게 감지하나요?

Chrome은 필터 목록에 대해 리소스 요청을 일치시켜 콘텐츠를 광고로 태그합니다. 감지 로직은 iframe 내 콘텐츠에 적용됩니다. 광고 스크립트가 포함되어 있더라도 기본 페이지 프레임은 광고와 관련된 것으로 간주되지 않습니다. 필터 목록과 일치하는 리소스에서 로드된 iframe은 다른 비광고 콘텐츠도 해당 프레임에서 로드되더라도 광고로 간주됩니다. 예를 들어 광고로 태그된 iframe에 로드된 동영상 플레이어가 광고가 아닌 콘텐츠도 로드할 수 있습니다.

광고 감지를 확인하는 방법

개발자는 Chrome DevTools를 사용하여 Chrome에서 콘텐츠를 광고로 성공적으로 감지했는지 시각적으로 확인할 수 있습니다.

광고 프레임 강조 표시: 렌더링 패널에서 광고 프레임 강조 표시를 선택합니다. 그러면 감지된 광고 프레임이 화면에 빨간색으로 색상 코딩됩니다.
요소 주석: 요소 패널에서 감지된 광고 iframe은 여는 <iframe> 태그 옆에 광고 주석을 표시합니다.
네트워크 활동: 네트워크 패널에서 Is ad-related 불리언을 기반으로 요청을 필터링합니다.
광고 상태: 프레임 섹션 아래의 애플리케이션 패널에서 광고 태그가 지정된 프레임에는 Ad Status 속성이 포함됩니다.

개입의 원인을 진단하는 방법

Chrome은 웹페이지의 품질과 성능을 감사하고 개선하는 도구를 제공합니다. Chrome DevTools에서 Lighthouse를 실행하여 페이지 성능에 관한 보고서를 확인합니다. web.dev/fast 컬렉션을 참고하여 핵심 웹 바이털에 관해 자세히 알아볼 수도 있습니다.

네트워크 사용량

Chrome DevTools에서 네트워크 패널을 표시하여 광고의 전체 네트워크 활동을 확인합니다. 반복 로드 시 일관된 결과를 얻으려면 캐시 사용 중지 옵션을 선택합니다.

Chrome DevTools의 네트워크 패널에 '캐시 사용 중지' 옵션이 사용 설정된 상태로 기록된 네트워크 활동이 표시되어 있습니다. — DevTools의 네트워크 패널

페이지 하단의 전송된 값에는 전체 페이지에 대해 전송된 금액이 표시됩니다. 광고와 관련된 요청만으로 제한하려면 상단의 필터 입력을 사용하세요.

광고의 초기 요청(예: iframe의 소스)을 찾은 경우 요청 내의 이니시에이터 탭을 사용하여 트리거되는 모든 요청을 확인합니다.

특정 광고 프레임에 의해 트리거된 리소스 요청의 순서를 보여주는 DevTools의 이니시에이터 탭 — 요청의 시작자 탭입니다.

크기별로 전체 요청 목록을 정렬하면 지나치게 큰 리소스를 쉽게 파악할 수 있습니다. 일반적으로 최적화되지 않은 이미지와 동영상이 원인인 경우가 많습니다.

개발자 도구 네트워크 패널 목록이 응답 크기별로 정렬되어 있어 최적화되지 않은 대형 미디어 파일을 식별할 수 있습니다. — 응답 크기별로 요청을 정렬합니다.

또한 이름으로 정렬하면 반복되는 요청을 쉽게 파악할 수 있습니다. 개입을 트리거하는 단일 대규모 리소스가 아니라 한도를 점진적으로 초과하는 반복 요청이 많을 수 있습니다.

CPU 사용량

DevTools의 성능 패널은 CPU 사용량 문제를 진단하는 데 도움이 됩니다. 캡처 설정 메뉴를 엽니다. CPU 드롭다운을 사용하여 CPU를 최대한 느리게 만듭니다. CPU 개입은 고급 개발 머신보다 성능이 낮은 기기에서 트리거될 가능성이 훨씬 높습니다.

CPU 제한 드롭다운이 선택되어 6배 느린 저전력 하드웨어를 시뮬레이션하는 DevTools의 성능 패널 캡처 설정 — 성능 패널에서 네트워크 및 CPU 제한을 사용 설정합니다.

그런 다음 녹화 버튼을 클릭하여 활동 녹화를 시작합니다. 긴 트레이스는 로드하는 데 시간이 오래 걸릴 수 있으므로 녹화 시점과 녹화 시간을 실험해 보는 것이 좋습니다. 녹화 파일이 로드되면 상단 타임라인을 사용하여 녹화 파일의 일부를 선택할 수 있습니다. 스크립팅, 렌더링, 페인팅을 나타내는 그래프의 노란색, 보라색 또는 녹색 영역에 집중합니다.

DevTools의 성능 추적 요약으로, 로드, 스크립팅, 렌더링, 페인팅과 같은 다양한 활동에 소요된 시간을 시각화하는 원형 차트가 있습니다. — 성능 패널의 트레이스 요약입니다.

하단의 Bottom-Up, Call Tree, Event Log 탭을 살펴봅니다. 자체 시간 및 총 시간을 기준으로 이러한 열을 정렬하면 코드의 병목 현상을 파악할 수 있습니다.

성능 패널의 하향식 탭이 '자체 시간'을 기준으로 정렬되어 특정 병목 현상을 파악합니다. — Bottom-Up 탭에서 Self Time을 기준으로 정렬합니다.

연결된 소스 파일도 여기에 링크되어 있으므로 소스 패널을 통해 각 행의 비용을 검사할 수 있습니다.

여기서 찾아야 하는 일반적인 문제는 연속 레이아웃 및 페인트를 트리거하는 최적화되지 않은 애니메이션 또는 포함된 라이브러리 내에 숨겨진 비용이 많이 드는 작업입니다.

잘못된 개입을 신고하는 방법

광고가 아닌 콘텐츠가 광고로 태그된 경우 필터링 규칙과 일치하지 않도록 코드를 변경하거나 EasyList 관리자에게 직접 문의하여 필터링 규칙을 변경하는 것이 좋습니다. 과도한 광고 개입은 사용자 동작이 있는 프레임에는 영향을 미치지 않으므로 콘텐츠를 로드하기 전에 재생 버튼을 클릭하도록 요구하여 동영상을 제외할 수 있습니다. EasyList가 콘텐츠와 일치하지 않고 Chrome에서 콘텐츠를 광고 관련으로 잘못 분류한 경우 이 템플릿을 사용하여 Chrome에 문제를 제기할 수 있습니다. 문제를 제기할 때는 캡처된 개입 보고서의 예시와 문제를 재현할 수 있는 샘플 URL을 포함하세요.