Cookie Guard: GDPR/CCPA 동의 관리자 (의존성 없음, 12.8 kB, 22개 언어)

Source: Dev.to

죄송합니다만, 번역할 텍스트가 제공되지 않았습니다. 번역을 원하시는 본문을 그대로 복사해서 알려주시면, 요청하신 대로 소스 링크는 그대로 유지하고 한국어로 번역해 드리겠습니다.

Overview

Cookie Guard 🛡️는 가볍고 의존성이 없는 GDPR/CCPA 동의 관리 도구입니다. 22개 언어에 걸쳐 쿠키 동의를 처리하기 위한 간단하고 맞춤형 솔루션을 제공하며, 완전 반응형이며 모바일‑우선 UI를 갖추고 있습니다.

Features

• 법적 준수 – 완전한 GDPR/CCPA 준수 워크플로우 (2026 표준).
• 하이브리드 모드 – 전체 제3자 동의와 정보 제공 “쿠키 없음” 모드 지원.
• 스마트 실행 – 분석/마케팅 스크립트를 자동 활성화 (type="text/plain" 처리).
• 의존성 없음 – 순수 바닐라 JavaScript; jQuery나 외부 라이브러리 불필요.
• 프라이버시 버튼 – 설정을 다시 열 수 있는 선택적 고정 플로팅 버튼.
• 법적 약관 – 선택적 동의 및 법적 URL 처리.
• 글로벌 지원 – 자동 브라우저 감지를 통한 22개 언어 (LTR 및 RTL) 지원.
• 성능 – 초경량 (~12.8 kB 압축).
• 접근성 – 스크린 리더를 위한 ARIA 표준 구현.
• 캡슐화 – 전역 네임스페이스 오염을 방지하기 위해 IIFE 내부에 구축.
• 맞춤 설정 – 만료, 링크 색상, 버튼 테두리 반경 등 유연한 구성 가능.
• 개발자 API – 외부 제어를 위한 공개 toggle, open, reset 메서드.

설치

압축된 스크립트를 닫는 </body> 태그 앞에 추가하고 초기화합니다:

<script src="cookie-guard.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => CookieGuard.init());
</script>

구성 옵션

기본 설정 (JavaScript)

const defaults = {
    locale: 'auto',
    consent: true,
    url: null,
    reopen: true,
    radius: 12,
    delay: 800,
    link: "#3b82f6",
    hover: "#10b981",
    separator: "•",
    expiration: 365,
};

사용 예시

기본 초기화 (영어, 사용자 정의 색상)

document.addEventListener('DOMContentLoaded', () => 
    CookieGuard.init({
        locale: 'en',
        url: "/legal",
        link: "#ff0000",   // red links
        radius: 8,         // button radius
    })
);

정보‑전용 모드 (언어 자동 감지, 제3자 쿠키 없음)

document.addEventListener('DOMContentLoaded', () => 
    CookieGuard.init({
        locale: 'auto',
        consent: false,
    })
);

스크립트 관리

Cookie Guard가 스크립트를 제어하도록 하려면 type="text/plain"을 설정하고 data-cg-category (analytics | marketing)를 추가합니다.

<script type="text/plain" data-cg-category="analytics">
    console.log('Analytics script executed');
</script>

<script type="text/plain" data-cg-category="marketing">
    console.log("Facebook pixel is legally enabled.");
    fbq('init', '123456789');
    fbq('track', 'PageView');
</script>

API 메서드

• Toggle – 동의 모달을 열거나 닫기:

  <a href="javascript:void(0)" onclick="CookieGuard.toggle()">Privacy</a>

• Open – 모달을 직접 열기:

  <a href="javascript:void(0)" onclick="CookieGuard.open()">Open Privacy</a>

• Reset – 동의 상태를 초기화 (단축키: CTRL + SHIFT + X):

  <a href="javascript:void(0)" onclick="CookieGuard.reset()">Reset Privacy</a>

Live Demo

Cookie Guard를 실제로 사용해 보세요: Cookie Guard Demo – 동의 처리, 언어 지원 및 제3자 스크립트 차단을 확인하세요.

❤️와 함께 만든 Joseba Mirena