Cloudflare Zaraz CMP로 애드센스 GDPR 동의 관리 5분 만에 설정하기

애드센스를 새로 등록하는 과정에서 유럽 동의 관리 요건이 나왔다.
찾아보니 Cloudflare Zaraz에 CMP가 내장되어 있었다.

들어가며

블로그에 애드센스를 새로 등록하려고 절차를 밟고 있었다. 그런데 등록 과정에서 "EEA, 영국 및 스위스에서 광고를 게재하기 위한 동의 관리 요건"이라는 항목이 있었다. 요약하면 이렇다.

• 2024년 1월 16일부터 EEA/영국, 2024년 7월 31일부터 스위스 적용
• 인증된 CMP(Consent Management Platform)를 사용해야 맞춤 광고 게재 가능
• CMP는 IAB TCF(Transparency & Consent Framework)와 통합되어야 함

한국어 블로그라서 유럽 트래픽이 많진 않겠지만, 등록 요건에 포함되어 있으니 넘어갈 수 없다. 어차피 해야 할 일이면 제대로 하자.

CMP란 무엇인가

CMP는 웹사이트 방문자에게 쿠키/데이터 수집에 대한 동의를 요청하고 관리하는 도구다. 유럽 사이트에서 흔히 보는 "이 사이트는 쿠키를 사용합니다" 팝업을 띄워주는 플랫폼이라고 보면 된다.

Google이 요구하는 "인증된 CMP"는 다음 조건을 충족해야 한다.

대표적인 인증 CMP로는 Cookiebot, OneTrust, Quantcast Choice 등이 있다. 그리고 Cloudflare Zaraz CMP도 여기에 포함된다.

왜 Zaraz CMP인가

이 블로그는 이미 Cloudflare 위에서 돌아간다. 별도 서드파티 CMP를 추가하면 외부 스크립트가 하나 더 붙는다. Zaraz CMP를 선택한 이유는 간단하다.

• Cloudflare 내장이라 추가 스크립트 로딩이 없다
• 무료 플랜에서도 사용 가능하다
• 2024년 3월부터 IAB TCF 호환이다 (CMP ID: 433)
• Google Consent Mode v2 신호를 지원한다

이미 Cloudflare를 쓰고 있으면 Zaraz CMP가 가장 깔끔한 선택이다.

설정 과정

1. Zaraz Consent Management 활성화

Cloudflare 대시보드에서 Zaraz > Consent로 가면 활성화할 수 있다. API로도 된다.

핵심 설정은 다음과 같다.

{
  "consent": {
    "enabled": true,
    "defaultLanguage": "ko",
    "tcfCompliant": true,
    "cookieName": "zaraz-consent"
  }
}

• enabled: 동의 관리 활성화
• defaultLanguage: 기본 언어를 한국어로
• tcfCompliant: IAB TCF 호환 모드 활성화. Google 애드센스 요건 충족에 필수

2. 동의 목적(Purpose) 설정

사용자에게 보여줄 동의 카테고리를 정의한다. 최소 두 가지면 충분하다.

다국어 지원도 설정해서 한국어/영어 모달 텍스트를 각각 넣었다. 유럽 사용자에게는 영어로, 한국 사용자에게는 한국어로 표시된다.

3. 도구 추가 및 목적 할당

Zaraz에 GA4와 AdSense를 도구로 등록하고, 각각의 목적에 할당한다.

{
  "tools": {
    "googleAnalytics": {
      "component": "google-analytics-4",
      "type": "component",
      "defaultPurpose": "analytics",
      "vendorId": 755,
      "vendorName": "Google Advertising Products",
      "settings": {
        "ga4MeasurementID": "G-XXXXXXXXXX"
      }
    },
    "googleAdsense": {
      "component": "google-adsense",
      "type": "component",
      "defaultPurpose": "marketing",
      "vendorId": 755,
      "vendorName": "Google Advertising Products",
      "settings": {
        "adClient": "ca-pub-XXXXXXXXXXXXXXXX"
      }
    }
  }
}

여기서 주의할 점이 몇 가지 있다.

• type은 반드시 "component"여야 한다. "library"로 넣으면 validation 에러가 난다.
• vendorId: 755는 Google Advertising Products의 IAB TCF Global Vendor List ID다.
• defaultPurpose로 목적에 할당하면, 사용자가 해당 목적에 동의하지 않으면 도구가 로드되지 않는다.

4. IAB TCF 호환 모달

tcfCompliant: true를 켜면 동의 모달이 IAB TCF 표준에 맞게 동작한다. 이게 Google이 요구하는 "인증된 CMP + TCF 통합" 조건을 충족시키는 핵심이다.

5. EU 지역에만 모달 표시

여기서 한 가지 문제가 있다. Zaraz CMP는 기본적으로 모든 방문자에게 동의 모달을 띄운다. 한국 사용자에게까지 쿠키 동의 팝업을 보여줄 필요는 없다.

Zaraz Consent API와 Cloudflare의 Geo IP 변수를 조합하면 지역별 분기가 가능하다.

먼저 config에서 모달 자동 표시를 끈다.

{
  "consent": {
    "hideModal": true
  }
}

그다음 Custom HTML 도구를 추가해서, EU 국가일 때만 모달을 띄우고 나머지는 자동 동의 처리한다.

(function() {
  var isEU = "{{ system.device.location.isEUCountry }}" === "1";
  var consentCookie = document.cookie.split(";").some(function(c) {
    return c.trim().startsWith("zaraz-consent=");
  });

  if (!consentCookie) {
    if (isEU) {
      zaraz.consent.modal = true;        // EU → 모달 표시
    } else {
      zaraz.consent.setAll(true);        // 비EU → 전체 동의
      zaraz.consent.sendQueuedEvents();  // 대기 중인 이벤트 전송
    }
  }
})();

{{ system.device.location.isEUCountry }}는 Cloudflare가 방문자 IP로 판별하는 EU 국가 여부 변수다. 별도 GeoIP 서비스 없이 Cloudflare 자체적으로 제공한다.

6. 커스텀 CSS로 모달 디자인 맞추기

Zaraz CMP 기본 모달은 무채색에 시스템 폰트를 쓰는 밋밋한 디자인이다. 블로그 디자인과 동떨어져 보이니까 customCSS 필드로 스타일을 덮어씌웠다.

Zaraz 모달의 주요 CSS 셀렉터는 다음과 같다.

이 블로그는 Pretendard 폰트에 파스텔 퍼플 톤을 쓰고 있어서, 모달도 같은 톤으로 맞췄다.

/* 핵심 오버라이드만 발췌 */
.cf_modal {
  font-family: "Pretendard Variable", system-ui, sans-serif;
  border-radius: 16px;
  background-color: #faf9fb;
  color: #1e1b2e;
  border: 1px solid #e8e3f0;
}

.cf_button--accept {
  background-color: #7c6aef;
  color: #ffffff;
  border-radius: 8px;
}

.cf_button--reject {
  background-color: transparent;
  color: #7c7494;
  border: 1px solid #e8e3f0;
}

.cf_button--save {
  background-color: #ede8fd;
  color: #4a3d8f;
}

.cf_label {
  color: #7c6aef;
  background-color: #ede8fd;
  padding: 1px 6px;
  border-radius: 4px;
}

.cf-checkbox {
  accent-color: #7c6aef;
}

customCSS에 넣은 스타일은 기본 스타일 뒤에 추가(append)되므로, 바꾸고 싶은 속성만 선언하면 된다. 전체를 다시 작성할 필요가 없다.

공식 문서에 셀렉터 목록이 안 나와 있어서, 실제로 모달을 띄워보고 브라우저 개발자 도구로 구조를 확인해야 했다. cf_modal, cf_button, cf_consent- 접두사 패턴만 알면 대부분 커버할 수 있다.

동작 흐름

flowchart TD
    A[사용자 방문] --> B{EU 국가?}
    B -->|Yes| C[동의 모달 표시]
    B -->|No| D[자동 전체 동의]
    C --> E{사용자 선택}
    E -->|모두 수락| F[GA4 + AdSense 로드]
    E -->|분석만 동의| G[GA4만 로드]
    E -->|모두 거부| H[도구 미로드]
    D --> F
    F --> I[맞춤 광고 게재]
    G --> J[비맞춤 광고 게재]
    H --> K[광고 없음]

한국을 포함한 비EU 지역에서는 모달 없이 기존과 동일하게 동작한다. EU 지역에서 접속할 때만 동의 모달이 표시된다.

삽질 기록

API 토큰 권한

Cloudflare MCP로 Zaraz 설정을 하려고 했는데 10000: Authentication error가 떴다. 기존 API 토큰에 Zaraz 권한이 없었다. Zone > Zaraz > Edit 권한이 포함된 별도 토큰을 만들어서 해결했다.

tool type 필드

처음에 type: "library"로 넣었다가 invalid or missing 'type' value 에러를 만났다. Zaraz API 스키마를 확인해보니 type: "component"가 올바른 값이었다. 대시보드에서 만들면 자동으로 설정되는 값인데, API로 직접 넣을 때는 이런 부분을 놓치기 쉽다.

모달이 한국에서도 뜬다

설정 후 확인해봤더니 한국에서도 동의 모달이 떴다. Zaraz CMP는 기본적으로 전 세계 모든 방문자에게 모달을 표시한다. EU 지역만 표시하려면 hideModal: true로 자동 팝업을 끄고, Consent API + isEUCountry 변수로 직접 분기해야 한다.

system trigger 중복

Custom HTML 도구를 추가하면서 새로운 system: "pageload" 트리거를 만들었더니 there may be only 1 system trigger 에러가 났다. Zaraz는 system 트리거를 하나만 허용한다. 기존 Pageview 트리거의 firingTriggers에 연결해서 해결했다.

커스텀 CSS 셀렉터가 문서에 없다

Zaraz 모달의 CSS를 커스터마이징하려면 셀렉터를 알아야 하는데, 공식 문서에 셀렉터 목록이 전혀 없다. 실제로 모달을 띄워서 브라우저 개발자 도구로 HTML 구조를 직접 확인해야 했다. cf_modal, cf_button, cf_consent- 접두사 패턴을 파악한 뒤에야 스타일링을 시작할 수 있었다.

정리

Cloudflare를 이미 쓰고 있다면 Zaraz CMP가 가장 간단한 선택이다. 별도 스크립트 로딩 없이, 무료로, IAB TCF + Google Consent Mode v2를 모두 충족한다.

유럽 트래픽이 적더라도 설정해두면 맞춤 광고 차단으로 인한 수익 손실을 막을 수 있다. API로 하면 5분이면 끝나는 작업이다.

참고자료

• Cloudflare Zaraz Consent Management 공식 문서
• IAB Europe — Transparency & Consent Framework (TCF)
• Google AdSense — EEA·영국 동의 메시지 요건
• Google Consent Mode v2 개요
• Cloudflare Zaraz REST API 레퍼런스