튜토리얼2026년 10월 16일 | FlexyConsent

동의 전에 스크립트를 차단하는 방법: 세 가지 방식 비교

문제: 너무 일찍 실행되는 태그

동의 배너는 그 뒤에 있는 태그가 방문자의 선택을 존중할 때만 작동합니다. 가장 흔한 실패는 단순합니다. 배너는 표시되지만, 아무도 클릭하기 전에 분석 및 광고 스크립트가 이미 로드되어 식별자를 설정해 버리는 것입니다. 이를 바로잡으려면 동의가 이루어질 때까지 스크립트를 차단해야 합니다. 실용적인 방법은 세 가지입니다.

방식 1: 스크립트 타입 재작성

브라우저는 script 요소의 type이 JavaScript 타입일 때만 실행합니다. type을 text/plain으로 바꾸면 브라우저는 그 스크립트를 무시합니다. 그런 다음 스크립트가 어느 동의 카테고리에 속하는지 기록하는 데이터 속성을 추가합니다.

적합한 경우: 템플릿에 있는 소수의 알려진 인라인 또는 외부 스크립트. 주의할 점: 다른 스크립트가 주입하는 스크립트는 템플릿을 거치지 않으므로 재작성되지 않습니다.

방식 2: 태그 관리자에서 태그 제어

태그가 Google Tag Manager 같은 도구에 있다면, 컨테이너를 페이지에 그대로 두고 동의를 인식하는 트리거로 실행을 제어할 수 있습니다. 각 태그에 동의 요건을 지정하면, 태그 관리자는 해당 동의 상태가 허용될 때만 태그를 실행합니다. 큰 장점은 중앙 집중식 제어입니다. 마케팅 팀이 템플릿을 건드리지 않고 태그를 추가할 수 있고, 규칙이 태그와 함께 따라갑니다.

적합한 경우: 마케팅 태그가 많은 사이트. 주의할 점: 컨테이너 밖에 하드코딩된 스크립트와, 자체적으로 다른 스크립트를 추가로 로드하는 사용자 지정 HTML 태그.

방식 3: 동의 시 스크립트를 동적으로 로드

이 방식에서는 페이지에서 script 태그를 완전히 제거하고, 동의 이벤트 이후에만 이를 주입하는 함수를 작성합니다. 싱글 페이지 애플리케이션과 완전한 제어를 원하는 개발자에게 가장 깔끔한 선택입니다.

  1. CMP의 동의 콜백을 수신합니다.
  2. 어떤 카테고리가 허용되었는지 확인합니다.
  3. script 요소를 만들고 소스를 설정한 뒤 문서에 추가합니다.
  4. 스크립트의 load 핸들러에서 초기화 코드를 실행합니다.

적합한 경우: 빌드 단계가 있는 최신 애플리케이션. 주의할 점: 재방문 방문자 처리를 잊는 것. 저장된 선택은 새로운 클릭 없이도 페이지 로드 시 로딩을 트리거해야 합니다.

동의 철회 처리

동의 전에 차단하는 것은 절반의 일일 뿐입니다. 방문자가 나중에 동의를 철회하면 도구 호출을 중단하고, 식별자를 계속 읽거나 쓰지 않도록 해야 합니다. 페이지에서 스크립트를 제거해도 이미 메모리에 있는 코드는 사라지지 않으므로, 철회 후 새로고침하는 것이 가장 간단하고 확실한 방법인 경우가 많습니다.

어떤 방식을 선택해야 할까요?

테스트 방법

  1. 캐시를 비운 시크릿 창을 엽니다.
  2. 페이지를 로드하기 전에 브라우저 개발자 도구의 Network 및 Application 탭을 엽니다.
  3. 페이지를 로드하고 배너는 건드리지 않습니다. 분석이나 광고 요청이 전송되지 않고 관련 쿠키나 저장 항목이 나타나지 않는지 확인합니다.
  4. 하나의 카테고리만 수락하고 해당 스크립트만 로드되는지 확인합니다.
  5. 모두 거부하고 새로고침한 다음 첫 번째 확인을 반복합니다.
  6. 동의를 철회하고 위에서 설명한 동작을 확인합니다.

FlexyConsent의 역할

FlexyConsent는 IAB TCF 2.4와 Google Consent Mode v2를 지원하며 Google 인증 CMP(CMP ID 317)입니다. 어떤 차단 방식을 선택하든, 배너의 역할은 방문자가 무엇을 선택했는지에 대한 명확한 신호를 코드에 전달하는 것입니다. 모든 스크립트가 그 신호를 따르도록 하는 것은 여러분의 몫입니다.

핵심 요약

← 블로그 전체 읽기 →