법적으로 필요하고, 애드센스 요건이기도 한 쿠키 동의 배너.
HTML+CSS+JS로 직접 만들고, 색상과 위치도 내 마음대로 바꿔봐요.
법적 규정 + 애드센스 요건 + 사용자 신뢰 — 세 가지 이유가 있어요
쿠키(Cookie)는 웹사이트가 사용자 브라우저에 저장하는 작은 데이터 파일이에요. 로그인 상태 유지, 장바구니 기억, 방문 기록 저장 등에 사용돼요. Google Analytics와 애드센스도 쿠키를 사용해서 방문자를 추적해요.
GDPR(유럽 개인정보보호법)은 쿠키를 사용하기 전에 반드시 사용자 동의를 받도록 규정해요. 유럽 방문자가 한 명이라도 있다면 적용될 수 있어요. 한국의 개인정보보호법도 유사한 기준을 따르고 있어요. 게다가 Google 애드센스는 쿠키 동의 배너를 공식 요건으로 명시하고 있어요.
GDPR(유럽), CCPA(미국 캘리포니아), 한국 개인정보보호법 — 글로벌 방문자가 있다면 쿠키 동의는 필수예요.
구글은 개인 맞춤형 광고를 위해 쿠키 동의가 필요해요. 없으면 광고 수익에 영향을 줄 수 있어요.
쿠키 배너가 있으면 "이 사이트는 투명하게 운영된다"는 신뢰감을 줘요. 브랜드 이미지에도 도움돼요.
사용자의 동의 여부를 localStorage에 저장해서, 한 번 동의하면 다시 묻지 않게 구현할 수 있어요.
사이트 성격에 맞는 스타일을 골라보세요
화면 하단에 고정되는 얇은 바 형태. 콘텐츠를 많이 가리지 않아 UX가 가장 좋아요. 대부분의 사이트에서 사용하는 표준 형태예요.
화면 상단에 고정되는 형태. 즉시 눈에 띄어 동의율이 높지만, 헤더 네비게이션과 겹칠 수 있어요.
화면 코너에 작게 떠있는 팝업 형태. 콘텐츠를 전혀 가리지 않지만 놓치기 쉬워요. 재방문자에게 재표시할 때 적합해요.
localStorage에 동의 저장 + 재방문 시 배너 숨김까지 완성
<!-- 🍪 쿠키 동의 배너 --> <div id="cookie-banner" role="dialog" aria-label="쿠키 동의"> <p class="cookie-text"> 🍪 이 사이트는 서비스 개선과 맞춤 광고를 위해 쿠키를 사용해요. <a href="privacy.html">개인정보처리방침</a> </p> <div class="cookie-btns"> <button onclick="cookieDecline()">필수만 허용</button> <button class="accept" onclick="cookieAccept()">✓ 모두 동의</button> </div> </div> <style> #cookie-banner { display: none; /* JS로 표시 */ position: fixed; bottom: 0; left: 0; right: 0; background: #1e293b; border-top: 2px solid #4f46e5; padding: 14px 20px; z-index: 9999; align-items: center; gap: 16px; flex-wrap: wrap; } #cookie-banner.show { display: flex; } .cookie-text { flex: 1; font-size: .85rem; color: #cbd5e1; } .cookie-text a { color: #818cf8; } .cookie-btns { display: flex; gap: 8px; } .cookie-btns button { padding: 8px 16px; border-radius: 6px; font-size: .82rem; font-weight: 600; border: 1px solid #475569; background: transparent; color: #94a3b8; cursor: pointer; } .cookie-btns .accept { background: #4f46e5; border-color: #4f46e5; color: #fff; } </style> <script> (function() { if (localStorage.getItem('cookie-consent')) return; setTimeout(function() { document.getElementById('cookie-banner').classList.add('show'); }, 800); })(); function cookieAccept() { localStorage.setItem('cookie-consent', 'all'); hideBanner(); } function cookieDecline() { localStorage.setItem('cookie-consent', 'essential'); hideBanner(); } function hideBanner() { const b = document.getElementById('cookie-banner'); b.style.transition = 'opacity .3s'; b.style.opacity = '0'; setTimeout(function() { b.classList.remove('show'); b.style.opacity = ''; }, 320); } </script>
색상과 위치를 바꾸면 배너가 실시간으로 바뀌어요
"내 사이트에 쿠키 동의 배너를 추가해줘. 하단에 고정되는 다크 스타일로, '필수만 허용'과 '모두 동의' 버튼이 있어야 해. 동의하면 30일간 다시 안 물어봐야 해."
localStorage.getItem('cookie-consent')로 확인하고, 'essential'이면 GA 이벤트 전송을 막는 방식을 쓸 수 있어요.if (localStorage.getItem('cookie-consent') === 'all') { /* GA 코드 */ }
localStorage: 만료 기간 없음(수동 삭제 전까지), 서버로 전송 안 됨, 조작이 쉬움cookie-consent 항목을 삭제하면 돼요. 또는 아래 코드를 콘솔에서 실행하면 바로 배너가 다시 나와요.localStorage.removeItem('cookie-consent'); location.reload();