웹사이트나 쇼핑몰 퍼블리싱을 진행할 때 가장 빈번하게 요구되는 기능 중 하나가 바로 ‘메인 페이지 이벤트 팝업창’입니다.
단순히 화면 중앙에 이미지를 띄우는 것은 CSS의 position: fixed만으로 간단히 해결되지만, 실무에서는 반드시 ‘오늘 하루 안 보기’ 또는 ‘일주일간 보지 않기’와 같은 세밀한 제어가 필요합니다. 사용자가 페이지를 이동할 때마다 동일한 팝업이 계속 노출된다면 심각한 UX(사용자 경험) 저하를 초래하기 때문입니다.
오늘은 브라우저의 쿠키(Cookie)를 활용하여 팝업 노출 주기를 제어하는 깔끔하고 가벼운 바닐라 자바스크립트(Vanilla JS) 코드를 정리해 드립니다.
1. 이벤트 팝업 풀 소스 코드 (HTML/CSS/JS)
VS Code 등의 에디터를 열고, 팝업이 노출될 페이지의 <body> 태그 최하단(또는 <script> 선언부 위)에 아래 코드를 삽입하세요.
<!-- 1. 팝업창 HTML 구조 -->
<div id="notice-popup" class="popup-overlay">
<div class="popup-content">
<!-- 이벤트 배너 이미지 -->
<a href="#이벤트링크">
<img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?q=80&w=600&auto=format&fit=crop" alt="여름 시즌 오프 할인 이벤트">
</a>
<!-- 하단 제어 영역 -->
<div class="popup-controls">
<label class="checkbox-label">
<input type="checkbox" id="chk-hide-today"> 오늘 하루 보지 않기
</label>
<button type="button" id="btn-popup-close" class="close-btn">닫기 ×</button>
</div>
</div>
</div>
<!-- 2. 팝업창 스타일링 (CSS) -->
<style>
/* 배경 딤(Dim) 처리 */
.popup-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: none; /* 초기 상태: 숨김 */
justify-content: center; align-items: center;
}
/* 팝업 컨테이너 */
.popup-content {
width: 90%; max-width: 420px; /* 반응형 대응 */
background-color: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
/* 배너 이미지 */
.popup-content img {
width: 100%; height: auto; display: block;
}
/* 하단 컨트롤 바 */
.popup-controls {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; background-color: #222; color: #fff;
}
.checkbox-label {
font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.close-btn {
background: none; border: none; color: #fff; font-size: 14px;
font-weight: 600; cursor: pointer; letter-spacing: 0.5px;
}
</style>
<!-- 3. 쿠키 제어 스크립트 (JS) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const popup = document.getElementById('notice-popup');
const btnClose = document.getElementById('btn-popup-close');
const chkHideToday = document.getElementById('chk-hide-today');
const popupName = 'mainEventPopup'; // 쿠키 식별자
// 쿠키 설정 함수
function setCookie(name, value, days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}
// 쿠키 확인 함수
function getCookie(name) {
let cookieArr = document.cookie.split(';');
for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split('=');
if(name === cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
// 1. 페이지 로드 시 쿠키 여부 확인하여 팝업 노출 결정
if (getCookie(popupName) !== 'hidden') {
popup.style.display = 'flex';
}
// 2. 닫기 버튼 클릭 이벤트
btnClose.addEventListener('click', function() {
if (chkHideToday.checked) {
// 체크박스 활성화 시 1일(24시간) 만료 쿠키 생성
setCookie(popupName, 'hidden', 1);
}
popup.style.display = 'none';
});
});
</script>2. 코드 커스텀 및 활용 팁
이미지 및 링크 교체
HTML 구조 내의 <img src="..."> 경로를 디자인된 배너 이미지로 변경해주시면 됩니다. 최근 디자인 트렌드에 맞춰 비비드한 컬러감이 돋보이는 키치(kitsch)한 스타일의 배너를 적용해 보시면 팝업 주목도를 훨씬 높일 수 있습니다. 클릭 시 이동할 이벤트 페이지 주소는 <a href="..."> 속성에 입력합니다.
UI 레이아웃 (닫기 버튼 위치)
모바일 환경에서의 사용성을 고려하여, 사용자의 엄지손가락이 가장 쉽게 닿을 수 있는 우측 하단에 ‘닫기’ 버튼을 배치했습니다. CSS의 justify-content: space-between 속성을 사용하여 체크박스와 닫기 버튼을 양 끝으로 깔끔하게 정렬했습니다.
자바스크립트 로직 이해하기
핵심은 document.cookie를 다루는 것입니다. 사용자가 ‘오늘 하루 보지 않기’를 체크하고 닫기를 누르면, setCookie 함수가 실행되어 브라우저에 mainEventPopup=hidden이라는 데이터가 저장됩니다. 이 데이터는 expires 속성에 의해 정확히 24시간 뒤에 소멸합니다. 페이지가 새로고침 될 때마다 getCookie 함수가 이 데이터의 존재 여부를 검사하여 팝업의 display 상태를 결정합니다.
복잡한 라이브러리 설치 없이 순수 HTML/CSS/JS만으로 구현된 가벼운 스크립트입니다. 프로젝트에 맞게 클래스명이나 CSS 스타일을 자유롭게 변형하여 사용하시기 바랍니다.
