제 워드프레스 포트폴리오 사이트에는 구글 애널리틱스 4(GA4), 허브스팟, 쿠키 동의 배너가 설치돼 있었습니다. 이 상태에서 모바일 PageSpeed 점수는 68이었습니다. 특히 최대 콘텐츠 렌더링 시간(LCP, 화면에서 가장 큰 요소가 표시되는 시간)이 7.8초로, 구글의 “좋음” 기준인 2.5초의 세 배가 넘었습니다.
원인은 대부분 서드파티 스크립트였습니다. 그래서 구글 태그 매니저(GTM)와 Cookiebot을 걷어내고, 모든 도구를 Cloudflare의 Zaraz로 옮겼습니다. 그 결과 모바일 PageSpeed 점수는 68에서 99로, LCP는 7.8초에서 1.9초로 개선됐습니다.
이 글에서는 다음 내용을 다룹니다.
- Zaraz가 무엇이고, 왜 빨라지는지
- GA4, 허브스팟, 쿠키 동의 배너를 Zaraz로 옮기는 방법
- 구글 동의 모드 v2가 제대로 작동하는지 확인하는 방법
- 전환 전후 측정 결과와 속도가 빨라진 원인
- 전환 전에 알아야 할 점
Zaraz란 무엇이고, 왜 빨라질까?
Zaraz는 Cloudflare가 제공하는 태그 관리 도구입니다. GTM과 하는 일은 같지만, 결정적인 차이가 하나 있습니다. 서드파티 스크립트를 방문자의 브라우저가 아니라 Cloudflare 서버에서 실행합니다.
GTM을 쓰면 방문자의 브라우저가 GTM 스크립트를 내려받습니다. 그다음 GTM에 설정된 GA4, 허브스팟 같은 스크립트를 하나씩 다시 내려받아 실행합니다. 스크립트가 늘어날수록 브라우저가 처리할 일이 늘고, 페이지도 그만큼 늦게 표시됩니다.
Zaraz는 브라우저에 작은 스크립트 하나만 넣습니다. 페이지뷰나 이벤트가 발생하면 이 스크립트가 정보를 Cloudflare로 보냅니다. GA4 등으로 데이터를 전송하는 일은 Cloudflare 서버가 처리합니다. 브라우저가 무거운 스크립트를 실행하지 않으니 페이지가 빨라집니다.
비용: 모든 Cloudflare 계정에 월 100만 이벤트가 무료로 제공되고, 이를 넘으면 100만 이벤트마다 월 5달러가 부과됩니다. 페이지뷰 1회,
zaraz.track()호출 1회가 각각 이벤트 1개입니다. (Cloudflare 공식 문서)
전환 전 사이트 상태
제 사이트는 워드프레스로 만든 개인 포트폴리오 사이트이고, Cloudflare를 거쳐 서비스합니다. 방문자 분석에는 GA4를, 문의 폼으로 들어온 연락처 관리에는 허브스팟을 씁니다. 방문자가 많지 않아서 Zaraz 무료 사용량으로 충분합니다.
전환 전에는 서드파티 코드가 세 가지 있었습니다.
| 용도 | 전환 전 | 전환 후 |
|---|---|---|
| 방문자 분석 | GA4 (GTM으로 설치) | Zaraz의 Google Analytics 4 도구 |
| 마케팅 자동화 | 허브스팟 추적 코드 | Zaraz의 HubSpot 도구 |
| 쿠키 동의 배너 | Cookiebot | Zaraz 동의 관리(CMP) |
Zaraz로 전환하는 방법
1단계: 기존 태그 목록 정리하기
GTM 컨테이너에 있는 태그와 트리거를 모두 적어 두세요. 전환 후 빠진 태그가 없는지 확인할 때 이 목록이 기준이 됩니다.
2단계: Zaraz에 GA4 추가하기
- Cloudflare 대시보드에서 Tag management → Zaraz → Tag Setup으로 이동합니다.
- Third-party tools → Add new tool을 선택합니다.
- 목록에서 Google Analytics 4를 고르고 Continue를 선택합니다.
- GA4 측정 ID(
G-XXXXXXX)를 입력합니다. - Actions에서 Pageviews를 켜고 저장합니다.
Zaraz는 Cloudflare를 거치는 페이지에 스크립트를 자동으로 넣습니다. 워드프레스에 따로 코드를 추가할 필요가 없습니다.
3단계: 허브스팟 추가하기
2단계와 같은 방법으로 Add new tool에서 HubSpot을 선택하고, 허브스팟 계정 ID(Hub ID)를 입력합니다.
전환하면서 가장 걱정한 부분은 허브스팟이 유입 경로를 제대로 기록하는지였습니다. 그래서 UTM 파라미터를 붙인 링크로 들어가 문의 폼을 직접 제출해 봤습니다.
mustbethecode.com/contact?utm_source=test&utm_medium=test&utm_campaign=zaraztest허브스팟에 생성된 연락처에는 다음과 같이 기록됐습니다.
| 속성 | 값 |
|---|---|
| Original Traffic Source | Other campaigns |
| Original Traffic Source Drill-Down 1 | zaraztest |
| Original Traffic Source Drill-Down 2 | test / test |
캠페인(zaraztest)과 소스/매체(test / test)가 그대로 남았습니다. Zaraz로 옮긴 뒤에도 허브스팟의 유입 경로 추적과 폼 연결은 정상적으로 작동합니다.
4단계: Cookiebot을 Zaraz 동의 관리(CMP)로 바꾸기
Zaraz에는 쿠키 동의 배너 기능이 들어 있어서 별도의 동의 관리 플랫폼(CMP)이 필요 없습니다.
- Tag management → Consent로 이동해 Enable Consent Management를 켭니다.
- Consent modal text에 배너 문구를 입력합니다. HTML도 쓸 수 있습니다.
- Purposes에서 Add new Purpose를 선택해 목적을 만듭니다. 저는 “분석”과 “마케팅”을 만들었습니다.
- Assign purpose to tools에서 GA4는 “분석”에, 허브스팟은 “마케팅”에 지정합니다.
- 저장하면 사이트에 동의 배너가 표시됩니다.
허브스팟을 “마케팅”으로 따로 나눈 이유가 있습니다. GA4는 익명으로 방문 통계를 내지만, 허브스팟 추적 쿠키는 방문 기록을 폼을 제출한 실명 연락처에 연결합니다. 성격이 다른 추적이라서, 방문자가 “통계는 허용하고 마케팅 추적은 거부”할 수 있게 했습니다. 대신 마케팅을 거부한 방문자는 폼을 제출해도 허브스팟에 유입 경로가 남지 않습니다.
주의: 새로 추가한 도구에는 목적이 자동으로 지정되지 않습니다. 목적이 없는 도구는 동의와 관계없이 실행됩니다. 도구를 추가할 때마다 Consent 페이지에서 목적을 지정하세요.
배너는 첫 방문 때만 표시됩니다. 방문자가 나중에 동의를 바꿀 수 있도록, 푸터 등에 동의 창을 다시 여는 링크를 넣어 두세요.
<a href="#" onclick="zaraz.showConsentModal(); return false;">쿠키 설정</a>구글 동의 모드 v2 설정하기
GA4나 구글 광고를 쓴다면 구글 동의 모드 v2(Consent Mode v2)도 함께 설정하세요. 유럽(EEA) 방문자가 있다면 필수입니다. 기본값은 코드 없이 설정할 수 있습니다.
- Tag management → Settings로 이동합니다.
- Set Google Consent Mode v2 state를 체크합니다. 모든
google_consent_default항목이denied(거부)로 설정됩니다.
이제 방문자가 동의하기 전까지 모든 항목이 거부 상태로 구글에 전달됩니다.
여기에 함정이 있습니다. 이 설정은 기본값만 정합니다. 방문자가 배너에서 동의해도 구글에 전달되는 상태는 바뀌지 않습니다.
배너에서 동의한 뒤 Zaraz 디버거에서 GA4 요청을 열어 보니, gcd 파라미터 값이 11p1p1p1p5였습니다. p는 “기본값 거부, 업데이트 없음”이라는 뜻입니다. 방문자는 동의했는데, 구글은 계속 거부 상태로 받고 있었습니다.
공식 문서에 따르면 동의 업데이트는 google_consent_update 속성으로 직접 보내야 합니다. 아래 코드를 사이트 푸터에 추가하세요. 워드프레스라면 WPCode 같은 코드 삽입 플러그인을 쓰면 됩니다.
<script>
function syncGoogleConsent() {
const analytics = zaraz.consent.get("분석_목적_ID") ? "granted" : "denied";
const marketing = zaraz.consent.get("마케팅_목적_ID") ? "granted" : "denied";
zaraz.set("google_consent_update", {
analytics_storage: analytics,
ad_storage: marketing,
ad_user_data: marketing,
ad_personalization: marketing,
});
}
// 페이지를 열 때마다 저장된 동의 상태를 반영
document.addEventListener("zarazConsentAPIReady", syncGoogleConsent);
// 방문자가 동의를 바꿀 때 반영
document.addEventListener("zarazConsentChoicesUpdated", syncGoogleConsent);
</script>분석_목적_ID와 마케팅_목적_ID는 실제 목적 ID로 바꾸세요. 목적 ID는 브라우저 콘솔에서 zaraz.consent.purposes를 실행하면 확인할 수 있습니다. 광고 관련 목적이 없는 사이트라면 marketing 줄을 지우고 광고 항목 3개를 "denied"로 고정해도 됩니다.
코드를 추가한 뒤 상황별로 gcd 값을 다시 확인했습니다. r은 “기본값 거부 → 업데이트로 허용”, q는 “기본값 거부 → 업데이트도 거부”라는 뜻입니다.
| 상황 | gcd 값 | 의미 |
|---|---|---|
| 기본값 설정만 켬 | 11p1p1p1p5 | 동의해도 업데이트가 전달되지 않음 |
| 업데이트 코드 추가, “분석” 목적만 있음 | 11q1r1q1q5 | 분석만 허용 |
| “마케팅” 목적 추가, 모두 동의 | 11r1r1r1r5 | 모든 항목 허용 |
| “마케팅” 목적 추가, 분석만 동의 | 11q1r1q1q5 | 분석만 허용, 광고 항목은 거부 |
이제 방문자의 선택이 구글 동의 모드에 그대로 전달됩니다. 분석만 동의했을 때는 Zaraz 디버거에 허브스팟 요청도 나타나지 않았습니다. gcd 값은 구글 쪽 동의 상태만 보여 주므로, 허브스팟 같은 다른 도구는 디버거에서 요청이 실제로 막혔는지 따로 확인하세요.
5단계: 기존 코드 제거하기
Zaraz 설정을 마쳤으면 기존 코드를 지우세요. 기존 코드와 Zaraz가 함께 실행되면 데이터가 중복으로 집계됩니다.
- GTM 스니펫 (테마의
header.php나 코드 삽입 플러그인에 넣은 코드) - 허브스팟 플러그인 또는 추적 코드
- Cookiebot 플러그인 또는 스크립트
- WP Consent API 플러그인 (Cookiebot 연동에만 쓰고 있었다면)
저는 GTM 스니펫과 허브스팟 추적 코드를 WPCode로 넣어 두었기 때문에, WPCode의 Code Snippets 목록에서 두 스니펫을 정리했습니다. 바로 삭제하지 않고 비활성화만 해 두면, 문제가 생겼을 때 다시 켜서 되돌릴 수 있습니다. 4단계의 동의 모드 업데이트 코드도 WPCode에 넣으면 코드를 한곳에서 관리할 수 있습니다.
Cookiebot 플러그인과 함께 WP Consent API 플러그인도 지웠습니다. WP Consent API는 Cookiebot의 동의 상태를 다른 플러그인에 전달하는 데만 쓰고 있었습니다. 그런데 전환 전 PageSpeed 보고서를 보니, 이 플러그인의 스크립트도 렌더링을 570ms 동안 막고 있었습니다. CMP를 바꿀 때는 기존 CMP와 함께 설치한 연동 플러그인이 남아 있지 않은지 확인하세요.
6단계: 제대로 작동하는지 확인하기
- Zaraz 디버그 모드: Tag management → Settings의 Web API 섹션에서 Debug Key를 복사합니다. 브라우저 콘솔에서
zaraz.debug("디버그키")를 실행하면 이벤트와 트리거 처리 과정을 팝업으로 볼 수 있습니다. 확인이 끝나면zaraz.debug()로 종료합니다. - GA4 실시간 보고서: 사이트에 접속한 뒤 내 방문이 잡히는지 확인합니다.
- 허브스팟 유입 경로: UTM 파라미터를 붙인 링크로 폼을 제출하고, 연락처의 Original Traffic Source에 캠페인이 기록되는지 확인합니다. (3단계 참고)
- 동의 배너: 시크릿 창에서 배너가 뜨는지, 거부하면 GA4와 허브스팟 요청이 나가지 않는지 확인합니다.
결과: 모바일 PageSpeed 68 → 99
| 지표 | 전 | 후 |
|---|---|---|
| 성능 점수 | 68 | 99 |
| First Contentful Paint | 2.4초 | 1.7초 |
| Largest Contentful Paint | 7.8초 | 1.9초 |
| Total Blocking Time | 130ms | 0ms |
| Cumulative Layout Shift | 0 | 0 |
| Speed Index | 5.1초 | 2.1초 |
가장 크게 바뀐 지표는 LCP입니다. 7.8초에서 1.9초로 줄어 구글의 “좋음” 기준(2.5초 이하)을 통과했습니다. 메인 스레드가 막힌 시간(TBT)도 130ms에서 0ms가 됐습니다.
측정 기준: PageSpeed Insights 모바일 측정값입니다. 실험실 측정이라 실제 방문자가 느끼는 속도와는 차이가 있을 수 있습니다. 실제 사용자 데이터(Search Console의 Core Web Vitals)는 약 28일 뒤에 반영됩니다.
왜 이렇게 빨라졌을까?
전환 전 PageSpeed 보고서의 진단 항목에서 원인을 찾을 수 있었습니다. 원인은 크게 두 가지였습니다.
1. 렌더링을 막던 Cookiebot 스크립트
“렌더링 차단 요청(Render-blocking requests)” 항목의 예상 절감 시간은 1,220ms였습니다. 가장 오래 걸린 스크립트는 Cookiebot의 uc.js로, 혼자서 1,200ms 동안 페이지 표시를 막았습니다. Cookiebot 플러그인의 연동 스크립트와 WP Consent API 플러그인의 스크립트도 각각 570ms씩 렌더링을 막았습니다.
| 렌더링 차단 스크립트 | 크기 | 차단 시간 |
|---|---|---|
Cookiebot uc.js | 37.2 KiB | 1,200ms |
| Cookiebot 플러그인 연동 스크립트 | 1.2 KiB | 570ms |
| WP Consent API 스크립트 | 1.5 KiB | 570ms |
쿠키 배너 스크립트는 동의를 받기 전에 다른 스크립트를 막아야 하므로 페이지에서 가장 먼저 실행됩니다. 이 스크립트가 끝날 때까지 화면이 표시되지 않았습니다.
2. 약 440 KiB의 서드파티 JavaScript
“사용하지 않는 JavaScript 줄이기” 항목에는 GTM과 Cookiebot이 내려받는 스크립트가 나와 있었습니다.
| 스크립트 | 전송 크기 | 사용하지 않는 코드 |
|---|---|---|
GTM gtm.js | 122.8 KiB | 60.0 KiB |
GA4 gtag/js (GTM이 불러옴) | 175.2 KiB | 73.2 KiB |
Cookiebot uc.js + cc.js | 141.8 KiB | 61.5 KiB |
| 합계 | 약 440 KiB | 약 195 KiB |
GTM은 컨테이너 스크립트(gtm.js)를 받은 뒤 GA4 스크립트(gtag/js)를 한 번 더 받습니다. PageSpeed는 모바일을 느린 4G 네트워크로 가정하고 측정하므로, 이 정도 용량을 내려받고 실행하는 데만 몇 초가 걸립니다.
Zaraz로 옮긴 뒤에는 이 스크립트가 모두 사라지고 작은 Zaraz 스크립트 하나만 남았습니다. 렌더링 차단 시간은 대부분 Cookiebot에서 나왔습니다. 그래서 속도 개선 효과는 GTM보다 Cookiebot을 걷어낸 쪽이 더 컸습니다.
LCP 요소는 쿠키 배너가 아니라 페이지의 이미지였습니다. 이미지는 그대로인데 LCP가 7.8초에서 1.9초로 줄었습니다. 이미지가 무거웠던 것이 아닙니다. 렌더링 차단 스크립트가 끝나기를 기다리고, 440 KiB의 스크립트와 네트워크를 나눠 쓰느라 늦게 표시됐던 것입니다.
전환 전에 알아야 할 점
Zaraz가 모든 사이트에 맞지는 않습니다. 직접 써 보며 확인한 주의할 점입니다.
- Cloudflare를 쓰는 사이트에 가장 잘 맞습니다. Cloudflare는 도메인을 Cloudflare 프록시(주황색 구름)로 연결하는 구성을 권장합니다. 프록시하지 않는 도메인에서도 쓸 수 있지만 설정이 더 복잡합니다.
- GTM의 기능을 모두 옮길 수는 없습니다. 주요 도구는 Zaraz와 기본으로 연동됩니다. 하지만 복잡한 트리거나 변수를 많이 쓰는 GTM 컨테이너는 옮기는 데 손이 많이 갑니다. Custom HTML 도구도 있지만, 이 도구는 브라우저에서 실행되므로 속도 이점이 줄어듭니다.
- GA4 수치가 이전과 다르게 나올 수 있습니다. 수집 방식이 바뀌기 때문입니다. 전환 직후 몇 주간은 이전 기간과 단순 비교하지 마세요.
- 동의 설정은 운영자가 직접 확인해야 합니다. Zaraz는 도구별 목적을 추천하거나 자동으로 지정하지 않습니다. GDPR 등 규정에 맞게 목적을 지정하는 것은 운영자의 몫입니다. 구글 동의 모드 v2도 업데이트가 제대로 전달되는지 직접 확인하세요.
이런 사이트에 추천합니다
- Cloudflare를 이미 쓰는 워드프레스 사이트, 개인 블로그, 포트폴리오, 소규모 비즈니스 사이트
- GA4, 허브스팟, 메타 픽셀처럼 널리 쓰는 도구 몇 개만 쓰는 사이트
- Cookiebot 같은 유료 CMP 비용을 줄이고 싶은 사이트
이런 사이트라면 신중하게 검토하세요
- GTM에 복잡한 트리거, 변수, 커스텀 태그가 많은 사이트
- 마케팅팀이 GTM으로 작업하는 데 익숙한 조직
마무리
GTM과 Cookiebot을 Zaraz로 옮긴 뒤 모바일 PageSpeed 점수는 68에서 99로, LCP는 7.8초에서 1.9초로 개선됐습니다. 속도를 늦추던 주범은 GTM보다 Cookiebot이었고, 동의 모드 v2는 기본값 설정만으로는 부족했습니다. 서드파티 도구가 몇 개뿐이고 Cloudflare를 쓰고 있다면, 들이는 노력에 비해 효과가 큰 속도 개선 방법입니다.
워드프레스 사이트 속도 개선이나 Zaraz 전환이 필요하다면 문의하기로 편하게 연락 주세요.