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

Nour Nabil
Nour Nabil
LinkedIn
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 컬렉션을 참고하고 Web Vitals에 관한 자세한 정보를 살펴볼 수도 있습니다.

네트워크 사용량

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

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

페이지 하단의 전송된 값은 전체 페이지에 전송된 양을 보여줍니다. 광고와 관련된 요청만으로 요청을 제한하려면 상단의 필터 입력을 사용합니다.

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

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

요청의 전체 목록을 크기별로 정렬하는 것은 지나치게 큰 리소스를 찾는 좋은 방법입니다. 일반적인 원인은 최적화되지 않은 이미지와 동영상입니다.

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

또한 이름별로 정렬하는 것도 반복되는 요청을 찾는 좋은 방법이 될 수 있습니다. 개입을 트리거하는 단일 대용량 리소스가 아니라 제한을 점진적으로 초과하는 많은 반복 요청일 수 있습니다.

CPU 사용량

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

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

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

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

하단의 Bottom-Up, 호출 트리, 이벤트 로그 탭을 살펴봅니다. 이러한 열을 자체 시간 및 총 시간 으로 정렬하면 코드의 병목 현상을 식별하는 데 도움이 됩니다.

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

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

소스 패널에 실행 시간이 표시됩니다.
소스 패널에 표시된 실행 시간

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

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

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