jQuery 이미지 업로드에 따른 팝업 자동화

웹사이트를 운영하다 보면 공지사항이나 이벤트 안내를 위해 특정 이미지를 활용한 팝업창을 구현해야 할 때가 많습니다. 이번 글에서는 jQuery를 활용하여 서버에 이미지가 존재할 경우에만 자동으로 팝업창을 띄우고, 쿠키를 이용해 '오늘 하루 보지 않기' 기능을 완벽하게 처리하는 팝업 자동화 구현 방법에 대해 자세히 알아봅니다.

📌 목차

1. 팝업 자동화 구현 개요
2. HTML 및 CSS 레이아웃 구조
3. jQuery 및 쿠키 제어 스크립트 구현
4. 핵심 기능 포인트 정리

1. 팝업 자동화 구현 개요

이미지만 업로드하면 별도의 복잡한 수정 없이 조건에 따라 자동으로 팝업이 노출되도록 설계하는 것이 핵심입니다. JavaScript의 Image 객체를 활용하여 이미지 파일의 로딩 성공 여부를 실시간으로 체크한 뒤, 이미지가 정상적으로 존재할 때만 팝업 레이어와 배경 섀도우(shadow) 효과가 나타나도록 구성합니다.

또한 사용자가 '오늘만 이 창을 열지 않음' 옵션을 체크하고 닫기를 누르면, Cookie를 설정하여 지정된 시간 동안 팝업이 다시 뜨지 않도록 제어합니다.

2. HTML 및 CSS 레이아웃 구조

팝업창 본문 영역은 div 태그로 감싸며, 내부에는 이미지 링크와 닫기 버튼, 그리고 오늘 하루 보지 않기를 위한 체크박스(input:checkbox)를 배치합니다. 팝업이 떴을 때 뒷배경을 어둡게 처리해 주는 shadow 클래스를 함께 선언합니다.

<div class="shadow"></div>
<!-- 팝업 공지사항 -->
<div class="main_notice_pop" name="popup1" style="position:fixed; left:50px; top:63px; display:none; z-index:999;">
    <div><a id="link-url" href="https://www.speedauction.co.kr" target="_blank"><img id="pop-image"></a></div>         
    <input type="checkbox" name="today_close1" />오늘만 이 창을 열지 않음
    <a href="javascript:" class="btn_close">창 닫기</a>
</div> 

<style type="text/css">
/* 팝업 기본 디자인 */
.main_notice_pop .btn_close {
    position: absolute;
    right: 0;
    z-index: 1;
}
/* 쉐도우 효과 */
.shadow {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.12);
    width: 100%;
    height: 100vh;
    display: none;
}
</style>

3. jQuery 및 쿠키 제어 스크립트 구현

페이지가 로드되면($(document).ready) 지정된 경로의 이미지 존재 여부를 판별합니다. 쿠키가 존재하지 않고 이미지 로딩이 성공하면 popUpAction() 함수를 호출하여 이미지를 바인딩하고 팝업을 화면에 노출시킵니다.

$(document).ready(function () {
    // 팝업 이미지 객체 선언
    let popImg = new Image();

    // 팝업 이미지 경로 및 이동할 URL 설정
    let srcImage = "/20180821_loding.jpg";
    let linkUrl = "https://www.naver.com";

    // 쿠키 값을 확인하여 팝업 노출 여부 결정
    let popup1 = getCookie('popup1');

    popImg.onload = function(){
        if (!popup1) {
            popUpAction('popup1', srcImage, linkUrl);
            $(".shadow").show();
        }
    }
    popImg.onerror = function(){
        return false;
    }
    popImg.src = srcImage;
});

// 쿠키 가져오기 함수
function getCookie(name) {
    var nameOfCookie = name + "=";
    var x = 0;
    while (x <= document.cookie.length) {
        var y = (x + nameOfCookie.length);
        if (document.cookie.substring(x, y) == nameOfCookie) {
            if ((endOfCookie = document.cookie.indexOf(";", y)) == -1)
                endOfCookie = document.cookie.length;
            return unescape(document.cookie.substring(y, endOfCookie));
        }
        x = document.cookie.indexOf(" ", x) + 1;
        if (x == 0) break;
    }
    return "";
}

// 새벽 00:00 시 기준 쿠키 설정하기
function setCookie00(name, value, expiredays) {
    var todayDate = new Date(); 
    todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);

    if (todayDate > new Date()) {
        expiredays = expiredays - 1;
    }
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}

// 팝업 출력 함수
function popUpAction(name, src, url) {
    $("#pop-image").attr('src', src);
    $("#link-url").attr('href', url);
    $("div[name=" + name + "]").fadeIn();
}

// 닫기 버튼 클릭 이벤트
$('.btn_close').click(function () {
    $(this).parent('.main_notice_pop').fadeOut();
    $(".shadow").hide();

    // 오늘 하루 보지하기 체크 확인 후 쿠키 생성
    if ($("input:checkbox[name=today_close1]").is(":checked") == true) {
        setCookie00('popup1', "done", 1);
    }
});

4. 핵심 기능 포인트 정리

jQuery를 이용한 팝업 자동화 시스템 구축 시 기억해야 할 핵심 내용은 다음과 같습니다.

동적 이미지 로딩 검증: Image() 객체의 onload와 onerror 이벤트를 활용하여, 서버에 실제 이미지 파일이 없을 경우 불필요한 팝업 영역이 깨지는 현상을 방지합니다.
유연한 쿠키 관리: setCookie00 함수를 통해 단순 24시간 계산이 아닌 자정(00:00:00)을 기준으로 쿠키 만료일을 설정하여 사용자 편의성을 높였습니다.

모달 백드롭 효과: 팝업이 활성화되는 동시에 .shadow 요소를 제어하여 사용자 시선을 공지사항에 집중시키고 디자인 완성도를 높였습니다.

DEV.자료창고