쿠키 1줄로 끝내는 JS 공지 팝업, 오늘만 안 보기 구현법

공지 팝업창을 만들 때 가장 신경 쓰이는 부분이 "오늘 하루 보지 않기" 기능입니다. 방문자가 팝업을 닫고 다시 사이트에 들어왔을 때 또 같은 창이 뜨면 짜증이 나기 때문이죠. 이 기능을 구현하는 가장 간단한 방법은 쿠키(Cookie)를 활용하는 겁니다. 쿠키 하나만 제대로 설정하면 페이지가 새로고침돼도, 사이트를 다시 방문해도 팝업이 다시 나타나지 않게 할 수 있습니다.

사실 쿠키를 직접 다루는 코드는 어렵지 않습니다. document.cookie 속성을 이용해 키-값 쌍을 저장하고, 만료일을 지정하면 되는데, 이때 만료일을 "오늘 23:59"로 설정하면 하루 동안만 유효한 쿠키가 됩니다. 아래에서 실제 코드와 함께 동작 원리를 자세히 정리했습니다.

공지 팝업을 쿠키로 제어하는 기본 원리

웹사이트에 접속했을 때 팝업을 띄울지 말지를 결정하려면, 먼저 "이 사용자가 이미 오늘 팝업을 닫았는가"를 확인해야 합니다. 이 판단 기준이 바로 쿠키의 존재 여부입니다.

쿠키는 브라우저에 저장되는 작은 텍스트 파일로, 이름-값 쌍 형태로 데이터를 기록합니다. 공지 팝업의 경우 popupDisplayed라는 이름의 쿠키를 만들어 값을 true로 저장해두면, 다음에 페이지를 열 때 이 쿠키가 있는지 확인해서 팝업을 띄우지 않으면 됩니다.

중요한 건 쿠키의 만료 시간입니다. "오늘 하루 보지 않기"이므로 쿠키의 만료 시각을 오늘 자정(23:59:59)으로 설정해야 합니다. 만약 만료일을 지정하지 않으면 브라우저를 닫는 순간 쿠키가 사라져서, 다시 방문하면 팝업이 또 뜨게 됩니다.

// 오늘 자정에 만료되는 쿠키 설정 함수
function setTodayCookie(name, value) {
    var today = new Date();
    today.setHours(23, 59, 59, 0); // 오늘 23:59:59로 설정

    document.cookie = name + "=" + value + "; expires=" + today.toUTCString() + "; path=/";
}

위 함수를 보면 setHours(23, 59, 59, 0)로 시간을 오늘 자정 직전에 맞췄습니다. path=/는 도메인 내 모든 페이지에서 이 쿠키에 접근할 수 있도록 해주는 속성인데, 공지 팝업처럼 사이트 전체에서 적용해야 하는 기능이라면 꼭 필요합니다.

쿠키를 읽고 팝업 표시 여부를 결정하는 코드

쿠키를 설정하는 함수를 만들었으니, 이제 저장된 쿠키를 읽는 함수가 필요합니다. document.cookie 문자열을 분리해서 원하는 이름의 값을 찾는 방식입니다.

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');

    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1, c.length);
        }
        if (c.indexOf(nameEQ) == 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

이 함수는 쿠키 목록을 세미콜론 기준으로 나눈 뒤, 앞에 붙은 공백을 제거하고 원하는 이름으로 시작하는 쿠키를 찾습니다. 쿠키가 없으면 null을 반환하므로, 이 값을 기준으로 팝업을 띄울지 결정할 수 있습니다.

실제 동작하는 공지 팝업 HTML 구조

쿠키 함수가 준비됐다면, 이제 팝업창 자체를 만들어야 합니다. 팝업이 떠 있을 때 배경을 어둡게 처리하려면 오버레이(overlay) 레이어를 하나 더 추가하는 방식이 일반적입니다.

<!-- 팝업 오버레이 배경 -->
<div id="popupOverlay" class="popup-overlay" style="display:none;"></div>

<!-- 공지 팝업창 -->
<div id="popup" class="popup-box" style="display:none;">
    <div class="popup-content">
        <h3>공지사항</h3>
        <p>새로운 이벤트가 시작되었습니다. 자세한 내용은 공지사항을 확인해 주세요.</p>
        <button id="closePopup">닫기</button>
        <label>
            <input type="checkbox" id="todayClose"> 오늘 하루 보지 않기
        </label>
    </div>
</div>

팝업창은 기본적으로 숨겨두고, 페이지 로드 시 쿠키를 확인한 뒤 표시 여부를 결정합니다. 오버레이와 팝업창을 동시에 보여주면 화면이 자연스럽게 어두워지면서 팝업에 집중하게 됩니다.

오늘 하루 보지 않기 체크박스와 쿠키 연동하기

사용자가 "오늘 하루 보지 않기" 체크박스를 체크하고 닫기 버튼을 누르면, 쿠키를 생성하고 팝업을 숨기는 로직이 실행되어야 합니다.

// 페이지 로드 시 실행
window.onload = function() {
    var popup = document.getElementById('popup');
    var overlay = document.getElementById('popupOverlay');

    // 오늘 본 쿠키가 없으면 팝업 표시
    if (!getCookie('popupToday')) {
        popup.style.display = 'block';
        overlay.style.display = 'block';
    }

    // 닫기 버튼 클릭 이벤트
    document.getElementById('closePopup').onclick = function() {
        var isChecked = document.getElementById('todayClose').checked;

        if (isChecked) {
            setTodayCookie('popupToday', 'true');
        }

        popup.style.display = 'none';
        overlay.style.display = 'none';
    };
};

핵심은 체크박스가 체크된 상태에서 닫기를 눌렀을 때만 쿠키를 저장하는 것입니다. 체크하지 않고 닫으면 쿠키를 만들지 않으므로, 페이지를 새로고침하면 팝업이 다시 나타납니다.

팝업창 디자인을 위한 CSS 스타일링

기능이 동작하려면 팝업창과 오버레이가 화면에 자연스럽게 배치되어야 합니다. 오버레이는 화면 전체를 덮는 반투명 검정색으로 처리하고, 팝업창은 화면 중앙에 정렬하는 방식이 가장 깔끔합니다.

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.popup-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    z-index: 9999;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.popup-box .popup-content {
    text-align: center;
}

.popup-box button {
    margin-top: 15px;
    padding: 8px 20px;
    border: none;
    background: #333;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

position: fixed를 사용해 스크롤 위치와 관계없이 항상 화면 중앙에 팝업이 보이도록 처리했습니다. 반응형으로 만들고 싶다면 max-width: 90%처럼 너비 제한을 걸어두면 모바일에서도 문제없이 표시됩니다.

개발자 도구에서 쿠키가 잘 저장됐는지 확인하는 방법

구현을 마친 뒤 실제로 쿠키가 잘 생성되는지 확인하려면 브라우저의 개발자 도구를 사용하면 됩니다. 크롬 기준으로 F12를 누르고 상단 탭에서 Application을 선택한 뒤, 왼쪽 메뉴에서 Cookies를 클릭하면 현재 사이트에 저장된 모든 쿠키를 볼 수 있습니다.

여기서 popupToday라는 이름의 쿠키가 생성됐는지, 만료 시간이 오늘 자정으로 설정됐는지 확인할 수 있습니다. 만료일이 표시된 시간이 지나면 쿠키는 자동으로 삭제되므로, 다음 날 다시 방문하면 팝업이 정상적으로 나타납니다.

이 방식을 활용하면 쿠키 하나로 공지 팝업의 반복 노출을 막을 수 있고, 사용자 경험을 크게 개선할 수 있습니다. 공지사항이 아닌 이벤트 배너나 안내 문구를 띄울 때도 동일한 구조를 응용할 수 있으니, 필요에 따라 맞게 수정해서 사용해 보시기 바랍니다.