1인 개발자를 위한 완벽한 개인정보처리방침 및 쿠키 동의 배너 만들기 (Jekyll, GDPR 대응)

개인 프로젝트나 작은 토이 프로젝트를 운영할 때, 우리는 종종 ‘개인정보처리방침’을 간과하곤 합니다. 하지만 우리가 사이트에 광고나 방문자 분석 도구를 추가하는 순간, 우리는 전 세계 사용자들의 데이터를 처리하게 되며, 이는 한국의 개인정보 보호법뿐만 아니라 유럽의 GDPR, 미국의 CCPA 등 강력한 법률의 적용을 받게 됩니다.

조금 복잡해 보이지만, 걱정 마세요. 이 글에서는 Jekyll 같은 정적 사이트에서도 법적 요구사항을 충족하고 사용자의 신뢰를 얻을 수 있는 개인정보처리방침과 쿠키 동의 배너 시스템을 구축한 전체 과정을 A부터 Z까지 공유합니다.

1단계: 정책의 뼈대 만들기 - 무엇을 알려야 하는가?

가장 먼저 할 일은 우리 사이트가 어떤 정보를, 왜, 어떻게 처리하는지를 투명하게 설명하는 문서를 만드는 것입니다. 수많은 논의 끝에, 우리는 다음과 같은 필수 조항을 포함하는 국문/영문/중문 정책의 최종본을 완성했습니다.

필수 포함 조항

  1. 총칙: 이 문서가 누구(사이트 운영자)에게 적용되는지 명확히 합니다. 실명을 넣는 것이 어색할 수 있지만, 이는 정보 처리의 주체를 명확히 하는 법적 의무이자 신뢰의 시작입니다.
  2. 수집 항목 및 목적: 어떤 정보를 어떤 목적으로 수집하는지 설명합니다. 제 경우, 이메일 문의에 답변하기 위한 목적 외에는 정보 수집을 최소화했습니다.
  3. 쿠키 사용 안내: 맞춤형 광고(Monetag 등)나 방문자 분석(Google Analytics 등)을 위해 쿠키를 사용한다는 사실과 거부 방법을 안내합니다.
  4. 보유 기간: 수집한 정보(이메일 등)는 목적 달성 후 즉시 파기하는 것을 원칙으로 하되, 법적 분쟁 발생 시 해결 시점까지 보관할 수 있다는 예외 조항을 둡니다.
  5. 제3자 제공 및 위탁: 직접 제3자에게 정보를 제공하지 않는다는 점과, 호스팅(GitLab)이나 광고(Monetag) 등 어떤 외부 서비스를 이용하는지 명시합니다.
  6. 정보주체의 권리: 이용자가 자신의 정보 삭제를 요청할 수 있는 권리가 있음을 알립니다.
  7. 미성년자 보호: 만 16세 미만 아동의 정보를 의도적으로 수집하지 않음을 명시합니다.
  8. 안전성 확보 조치: 수집된 정보를 안전하게 관리하기 위한 최소한의 관리적/기술적 조치(예: 담당자 한정, 신뢰할 수 있는 이메일 서비스 사용 등)를 설명합니다.

이러한 내용을 바탕으로 완성된 개인정보처리방침을 참고하세요.

2단계: 쿠키 동의 배너 기술 구현, 어떻게 동의를 받는가?

정책을 만드는 것만큼 중요한 것이 ‘적법한 방식’으로 동의를 받는 것입니다. 특히 GDPR은 ‘사전 동의(Prior Consent)’를 요구하는데, 이는 이용자가 ‘동의’ 버튼을 누르기 전까지는 광고나 분석 스크립트가 실행되어서는 안 된다는 의미입니다.

이를 Jekyll 사이트에서 유연하고 관리하기 쉽게 구현하기 위해, 우리는 _config.yml 파일을 적극적으로 활용하는 시스템을 구축했습니다.

1. _config.yml에 모든 설정 통합하기

먼저, 배너의 문구, 버튼 텍스트, 그리고 동의를 받아야 할 모든 스크립트를 _config.yml에서 관리하도록 설정합니다. 이렇게 하면 나중에 스크립트나 문구를 수정할 때 HTML 파일을 건드릴 필요가 없습니다.

# _config.yml

# 쿠키 동의 배너 설정
cookie_consent:
  enabled: true  # false로 바꾸면 배너 기능 전체가 꺼집니다.
  banner_message: "사이트의 원활한 운영 및 맞춤형 광고를 위해 쿠키를 사용합니다."
  accept_button_text: "확인"
  decline_button_text: "거부"

# 동의 기반 스크립트 설정
consent_scripts:
  monetag: |
    (function(s,u,z,p) ... document.documentElement)
  google_analytics: |
    // 여기에 Google Analytics 스크립트 내용을 붙여넣으세요.

2. 레이아웃 파일(_layouts/default.html) 수정

다음으로, _config.yml에 정의된 스크립트들을 자동으로 페이지에 추가하는 for 루프를 만듭니다. 이 코드는 동의를 받아야 할 스크립트를 type="text/plain"으로 비활성화시켜 페이지에 먼저 삽입합니다.

</head> 태그가 닫히기 전 적절한 위치에 아래 코드를 추가합니다.

{% for script_item in site.consent_scripts %}
  {% if script_item[1] and script_item[1] != "" %}
    <script type="text/plain" data-consent-script>
      {{ script_item[1] }}
    </script>
  {% endif %}
{% endfor %}

그리고 </body> 태그 바로 위에는 배너의 HTML과 이 모든 것을 제어할 JavaScript 파일을 불러오는 코드를 추가합니다.

{% if site.cookie_consent.enabled %}
  <div id="cookie-banner">
    <p>{{ site.cookie_consent.banner_message | escape }}</p>
    <div>
      <button id="consent-accept">{{ site.cookie_consent.accept_button_text | escape }}</button>
      {% if site.cookie_consent.decline_button_text and site.cookie_consent.decline_button_text != "" %}
        <button id="consent-decline">{{ site.cookie_consent.decline_button_text | escape }}</button>
      {% endif %}
    </div>
  </div>
  <script src="{{ '/assets/js/consent.js' | relative_url }}"></script>
{% endif %}

3. 핵심 로직 (assets/js/consent.js) 작성

마지막으로, 실제 동의를 처리하고 비활성화된 스크립트를 활성화시키는 JavaScript 코드입니다. 이 코드는 사용자의 선택을 localStorage에 저장하여 반복적으로 배너가 뜨는 것을 방지합니다.

// assets/js/consent.js
document.addEventListener('DOMContentLoaded', function() {
  const banner = document.getElementById('cookie-banner');
  const acceptBtn = document.getElementById('consent-accept');
  const declineBtn = document.getElementById('consent-decline');

  function loadConsentScripts() {
    const consentScripts = document.querySelectorAll('script[type="text/plain"][data-consent-script]');
    consentScripts.forEach(script => {
      const newScript = document.createElement('script');
      for (let i = 0; i < script.attributes.length; i++) {
        const attr = script.attributes[i];
        if (attr.name.toLowerCase() !== 'type') {
            newScript.setAttribute(attr.name, attr.value);
        }
      }
      if (script.innerHTML) {
        newScript.innerHTML = script.innerHTML;
      }
      document.body.appendChild(newScript);
    });
  }

  acceptBtn.addEventListener('click', function() {
    loadConsentScripts();
    localStorage.setItem('cookie_consent', 'true');
    banner.style.display = 'none';
  });

  if (declineBtn) {
    declineBtn.addEventListener('click', function() {
      localStorage.setItem('cookie_consent', 'false');
      banner.style.display = 'none';
    });
  }

  const consent = localStorage.getItem('cookie_consent');
  if (consent === 'true') {
    loadConsentScripts();
  } else if (consent === 'false') {
    banner.style.display = 'none';
  } else {
    if (banner) {
        banner.style.display = 'block';
    }
  }
});

(CSS 코드는 각자의 디자인에 맞게 자유롭게 추가하시면 됩니다.)

결론: 신뢰를 구축하는 과정

이제 우리는 법적 요구사항을 충족하는 다국어 개인정보처리방침과, 사용자의 선택을 존중하는 유연한 쿠키 동의 시스템을 모두 갖추게 되었습니다. 이 과정은 단순히 법을 지키는 것을 넘어, 우리 웹사이트를 방문하는 사용자들에게 ‘당신의 정보를 소중히 다루고 있다’는 신뢰의 메시지를 전달하는 과정이었습니다.

물론, 마지막 단계는 전문가에게 법률 검토를 받는 것입니다. 이 가이드가 여러분의 프로젝트에 투명성과 신뢰성을 더하는 첫걸음이 되기를 바랍니다.