팝업 슬라이드는 어떻게 만들까? Swiper와 localStorage로 ‘오늘 하루 보지 않기’ 구현하기
기술정보 26.09.03 조회 20팝업 슬라이드는 어떻게 만들까? Swiper와 localStorage로 ‘오늘 하루 보지 않기’ 구현하기
웹사이트를 제작하다 보면 이벤트, 공지사항, 프로모션 등의 내용을 팝업으로 안내해야 하는 경우가 있습니다.
팝업이 하나라면 단순한 레이어 팝업으로 구현할 수 있지만,
여러 개의 이벤트나 배너를 동시에 노출해야 한다면 슬라이드 형태의 팝업을 활용하는 방법이 편리합니다.
이번 글에서는 Swiper를 이용해 팝업 슬라이드를 구현하는 방법과 함께,
실무에서 자주 사용하는 ‘오늘 하루 보지 않기’ 기능을 추가하는 방법까지 알아보겠습니다.
➰➰➰
✅ 팝업 슬라이드란?
팝업 슬라이드는 하나의 팝업 영역 안에서 여러 개의 콘텐츠를 슬라이드 형태로 보여주는 UI입니다.
예를 들어 홈페이지에서 다음과 같은 내용을 하나의 팝업으로 구성할 수 있습니다.
· 진행 중인 이벤트 및 공지사항
· 신규 서비스 안내
· 할인 프로모션
각 콘텐츠를 개별 팝업으로 띄우는 대신 하나의 팝업 안에 여러 개의 슬라이드를 구성하면 사용자가 좌우로 넘기면서 다양한 내용을 확인할 수 있습니다.
특히 이벤트나 공지사항이 여러 개 있는 홈페이지에서는 하나의 팝업 영역을 효율적으로 활용할 수 있다는 장점이 있습니다.
✅ Swiper를 이용해 팝업 슬라이드 만들기
팝업 슬라이드는 여러 가지 방법으로 구현할 수 있지만, 웹사이트에서 슬라이드 UI를 구현할 때 많이 사용하는 라이브러리 중 하나가 Swiper입니다.
Swiper를 이용하면 기본적인 슬라이드 기능뿐만 아니라 다음과 같은 기능도 간편하게 구현할 수 있습니다.
· 이전·다음 버튼
· 페이지네이션
· 자동 재생
· 무한 반복
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="popup"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href=""> </a> </div> </div> </div> <div class="status-bar"> <button type="button" class="popup-hide" id="popup-hide"><span class="ic-check"><i data-feather="check"></i></span>1일간 보지 않기</button> <button type="button" class="popup-close" id="popup-close"> 닫기</button> </div> </div> | cs |
✅ 팝업의 ‘닫기’와 ‘오늘 하루 보지 않기’의 차이는 무엇일까?
단순한 ‘닫기’ 버튼은 현재 페이지에서 팝업을 숨기는 역할을 합니다.
반면 ‘오늘 하루 보지 않기’는 사용자의 선택을 브라우저에 저장해두었다가 다음에 홈페이지를 방문했을 때도 일정 시간 동안 팝업을 보여주지 않는 기능입니다.
따라서 ‘오늘 하루 보지 않기’를 구현하려면 단순히 팝업을 숨기는 것에서 끝나는 것이 아니라 사용자가 선택했다는 정보를 저장해야 합니다.
✅ ‘오늘 하루 보지 않기’ 기능은 어떻게 구현할까?
이 기능은 브라우저에 값을 저장할 수 있는 localStorage를 이용해서 구현할 수 있습니다.
날짜 객체 데이터를 활용해 다음 날 자정까지의 만료 시간을 계산하고, localStorage에 저장하여 ‘오늘 하루 보지 않기’ 기능을 구현합니다.
· 9월 3일 오전 10시 클릭 → 9월 4일 00:00까지 숨김
· 9월 3일 오후 11시 클릭 → 9월 4일 00:00까지 숨김
1 2 3 4 5 6 7 8 9 10 11 | $('.hide-popup').on('click', function () { const now = new Date(); const expireTime = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 1 ).getTime(); localStorage.setItem('popupHideTime', expireTime); $('#popup').hide(); }); | cs |
✨ localStorage란 무엇인가요?
localStorage는 웹 브라우저에 데이터를 저장할 수 있는 기능입니다.
localStorage에 저장된 데이터는 브라우저에 남아 있기 때문에 페이지를 새로고침하거나 브라우저를 다시 실행해도 유지됩니다.
다만 사용자가 직접 브라우저의 저장 데이터를 삭제하거나 개발자 도구에서 해당 값을 제거하면 저장된 데이터도 함께 사라집니다.
✨ localStorage는 어떻게 데이터를 저장할까?
localStorage는 기본적으로 키(key)와 값(value)을 한 쌍으로 저장합니다.
1 | localStorage.setItem('popupHideTime', expireTime); | cs |
저장한 데이터는 다음과 같이 다시 가져올 수 있습니다.
1 | const hideTime = localStorage.getItem('popupHideTime'); | cs |
· setItem() → 데이터 저장
· getItem() → 저장된 데이터 가져오기
· removeItem() → 저장된 데이터 삭제
즉, 사용자가 ‘오늘 하루 보지 않기’ 버튼을 클릭한 시간을 기준으로 만료 시간을 계산한 뒤 localStorage에 저장하고,
이후 홈페이지에 다시 방문했을 때 저장된 시간을 확인하여 팝업을 보여줄지 결정합니다.
✅ 페이지에 다시 접속했을 때 팝업 확인하기
사용자가 ‘오늘 하루 보지 않기’를 선택한 뒤 팝업을 닫았더라도 홈페이지를 새로 방문하면 팝업이 다시 나타날 수 있습니다.
따라서 페이지가 로드될 때 저장된 시간을 확인해야 합니다.
1 2 3 4 5 6 | const hideTime = localStorage.getItem('popupHideTime'); if (hideTime && Date.now() < Number(hideTime)) { $('#popup').hide(); } else { localStorage.removeItem('popupHideTime'); } | cs |
localStorage에 저장된 시간이 있는지 확인 -> 저장된 시간이 현재 시간보다 미래인가?
· YES → 팝업 숨김
· NO → 저장된 값 삭제 후 팝업 표시
✅ ‘오늘 하루 보지 않기’와 ‘24시간 보지 않기’는 무엇이 다를까?
· 24시간 보지 않기
사용자가 버튼을 클릭한 시점부터 정확히 24시간 동안 팝업을 숨깁니다.
예를 들어 오후 3시에 버튼을 클릭했다면 다음 날 오후 3시까지 팝업이 표시되지 않습니다.
· 오늘 하루 보지 않기
일반적으로는 사용자가 버튼을 클릭한 시점부터 그날 자정까지 팝업을 숨기는 방식으로 구현할 수 있습니다.
예를 들어 오후 3시에 클릭했다면 다음 날 0시 이후 다시 팝업이 표시됩니다.
따라서 실제 기능과 버튼의 문구가 일치하도록 만드는 것이 중요합니다.
클릭 시점부터 24시간 동안 숨기는 기능이라면 ‘24시간 보지 않기’처럼 정확한 문구를 사용하는 것이 좋습니다.
✅ 자주 묻는 질문
Q. 팝업 슬라이드는 Swiper로 만들 수 있나요?
A. 네. 팝업 내부의 각각의 콘텐츠를 swiper-slide로 구성하면 Swiper를 이용해 슬라이드 형태의 팝업을 구현할 수 있습니다.
Q. ‘24시간 보지 않기’는 어떻게 구현하나요?
A. 쿠키 또는 localStorage 등에 사용자가 선택한 시간을 저장한 뒤, 다음 페이지 방문 시 현재 시간과 저장된 만료 시간을 비교하는 방식으로 구현할 수 있습니다.
Q. ‘오늘 하루 보지 않기’와 ‘24시간 보지 않기’는 같은 기능인가요?
A. 아닙니다. 24시간 보지 않기는 일반적으로 클릭한 시점부터 24시간을 기준으로 하며, 오늘 하루 보지 않기는 당일 자정까지 숨기는 방식으로 구현할 수 있습니다.
Q. 팝업을 다시 표시하려면 어떻게 해야 하나요?
A. 개발 과정에서는 브라우저의 개발자 도구에서 저장된 localStorage 값을 삭제하거나 초기화하면 팝업을 다시 표시할 수 있습니다.
➰➰➰
작은 팝업 하나라도 사용자 경험을 고려해 설계한다면 이벤트 안내부터 공지사항, 프로모션까지 훨씬 효율적으로 전달할 수 있습니다.
디자인과 퍼블리싱 단계에서 이러한 인터랙션을 적절히 활용하면 단순한 이미지 팝업을 넘어 사용자가 편리하게 정보를 확인할 수 있는 홈페이지 UI를 만들어 보세요!
