웹사이트에 쿠키 동의 배너를 추가하는 방법

쿠키 동의 배너는 누군가 사이트에 처음 들어왔을 때 나타나 비필수 쿠키와 트래커에 동의하는지 묻는 작은 알림입니다. GDPR, UK PECR 규칙, 인도 DPDPA 같은 법에서 배너는 시스템에서 눈에 보이는 일부일 뿐입니다. 실제 작업은 그 아래에서 이뤄지는데, 애널리틱스, 광고 픽셀, 채팅 위젯 같은 비필수 스크립트는 방문자가 동의하기 전까지 실행되어서는 안 됩니다.

이 구분이 중요한 이유는 메시지만 보여 주면서 Google Analytics나 Meta 픽셀이 페이지 로드 시점에 실행되도록 두는 배너는 규정을 지키는 것이 아니기 때문입니다. 규제기관은 동의를 트래커가 로드된 뒤가 아니라 그 전에 받아야 한다는 점을 분명히 해 왔습니다. 그래서 배너를 추가하는 목적은 명확한 선택지를 보여 주는 것과 그 선택이 내려질 때까지 트래커를 차단하는 것, 이 두 가지를 동시에 이루는 데 있습니다.

배너를 추가하는 가장 빠른 방법은 HTML의 head에 스크립트 하나를 넣는 것입니다. ConsentX 대시보드에서 웹사이트를 생성하면 사이트 키가 포함된 embed.js를 참조하는 한 줄짜리 임베드 스니펫을 받게 됩니다. 다른 스크립트보다 먼저 로드되도록 head 안에서 가능한 한 위쪽에 붙여 넣으십시오.

애널리틱스와 광고 태그보다 위에 배치하십시오. 순서가 중요한 이유는 ConsentX가 먼저 등록되어야 그 아래의 트래커를 방문자가 결정할 때까지 붙잡아 둘 수 있기 때문입니다. 대시보드에서 트래커에 태그를 올바르게 지정하면 로더가 첫 방문 때 트래커를 차단 상태로 유지하고 동의가 이뤄지는 순간 실행을 허용합니다.

이 방법은 HTML head를 직접 제어할 수 있는 수작업 사이트, 정적 사이트 생성기, 프레임워크 어디에서나 동작합니다. 중간에 플러그인 계층이 없기 때문에 가장 깔끔한 방법이기도 합니다.

트래커를 이미 Google Tag Manager에서 관리하고 있다면 GTM을 통해 ConsentX를 추가할 수도 있습니다. 새 맞춤 HTML 태그를 만들어 임베드 스니펫을 붙여 넣고, 다른 모든 것보다 먼저 실행되도록 동의 초기화(Consent Initialization) 트리거에서 실행되게 설정하십시오.

더 깔끔한 방식은 배너를 Google Consent Mode와 함께 쓰는 것입니다. GTM 태그가 자유롭게 실행되도록 두는 대신 동의 상태에 따라 제어하고, 방문자가 선택하면 ConsentX가 그 상태를 업데이트합니다. 이렇게 하면 GTM 자체가 동의가 이뤄질 때까지 태그를 붙잡아 두는데, 이것이 바로 규제기관이 기대하는 동작입니다.

GTM으로 ConsentX를 로드하면서 애널리틱스 태그는 여전히 동의 확인 없이 모든 페이지(All Pages)에서 실행되도록 두는 흔한 실수는 피하십시오. 트래커가 제어되지 않으면 배너는 장식에 불과하고 위험은 그대로 남습니다.

WordPress에서는 무거운 플러그인이 필요하지 않습니다. 가장 간단한 방법은 헤더·푸터 코드 플러그인이나 테마의 사용자 지정 head 코드 입력란을 통해 임베드 스니펫을 테마 헤더에 추가하여 사이트 전체의 head에서 로드되게 하는 것입니다.

SEO나 캐싱 플러그인을 사용한다면, 동의 로더를 지연시키면 초기화 전에 트래커가 빠져나갈 수 있으므로 스니펫이 제거되거나 지연되지 않는 위치에 배치하십시오. 추가한 뒤에는 페이지 캐시를 비워 방문자가 새 head 마크업을 받도록 하십시오.

WordPress 사이트는 여러 플러그인이 동시에 트래커를 로드하는 경우가 많으므로, 배너에 의존하기 전에 대시보드의 트래커 탐지 기능으로 모든 스크립트를 찾아 태그를 지정하십시오.

Shopify에서는 theme.liquid를 편집해 head 요소 안 위쪽에 임베드 스니펫을 붙여 넣는 방식으로 테마에 추가하십시오. Shopify 테마는 여러 퍼스트파티 스크립트와 앱 스크립트를 로드하므로 로더를 head 위쪽에 두는 것이 중요합니다.

Shopify에는 스토어프론트용 고객 프라이버시 및 동의 API도 있습니다. 가능하다면 ConsentX를 그 신호에 연결해 Shopify 자체 픽셀도 다른 트래커와 함께 방문자의 선택을 따르도록 하십시오. 결제 페이지는 스토어프론트 페이지에는 없는 스크립트를 로드하는 경우가 있으므로 결제 흐름으로도 테스트하십시오.

테스트는 대부분의 팀이 건너뛰는 단계이지만 실제로 규정을 지키고 있는지를 결정하는 단계입니다. 새 시크릿 창에서 사이트를 연 다음, 브라우저 개발자 도구를 열고 페이지가 로드되는 동안 네트워크 탭을 지켜보십시오. 배너에서 아무것도 클릭하기 전에는 애널리틱스나 광고 도메인으로의 요청이 하나도 보이지 않아야 합니다.

다음으로 거부를 클릭하고 새로고침하십시오. 트래커는 계속 나타나지 않아야 하고 애플리케이션 또는 저장소 탭에 마케팅 쿠키가 생기지 않아야 합니다. 그런 다음 수락을 클릭해 이제 트래커가 로드되고 쿠키가 나타나는지 확인하십시오. 선택하기 전에 트래커가 실행된다면, 스크립트가 head에서 너무 아래에 있거나 해당 트래커가 차단 대상으로 태그되지 않은 것입니다.

이런 페이지는 추가 서드파티 스크립트를 불러오는 경우가 많으므로, 홈페이지, 제품 또는 콘텐츠 페이지, 채팅 위젯이나 삽입된 동영상이 있는 페이지 등 주요 페이지 유형 몇 가지에서 테스트를 반복하십시오.