쇼핑몰 팝업·이벤트를 자동으로 관리하는 시스템을 만든 사례

쇼핑몰에서는 세일, 쿠폰, 신상품, 공지사항, 앱 설치 안내 등 다양한 이벤트를 팝업과 배너로 알립니다.

문제는 이벤트가 바뀔 때마다 스킨을 직접 수정해야 한다는 것입니다.

특히 이벤트가 자주 바뀌는 쇼핑몰이라면 개발자가 매번 팝업을 올리고 내리는 작업이 반복될 수 있습니다.

이번 사례에서는 쇼핑몰 스킨을 매번 수정하지 않고, 관리 화면에서 이벤트를 등록하면 정해진 시간에 자동으로 팝업과 배너가 노출되도록 하는 시스템을 구축했습니다.

관리자가 직접 이벤트를 등록하고, 시작 시간이 되면 자동으로 노출되며, 종료 시간이 지나면 자동으로 사라지는 방식입니다.

쇼핑몰 팝업과 이벤트를 자동화할 때 핵심은 다음과 같습니다.

처음에는 간단합니다.

스킨 HTML에 팝업 이미지를 넣고 이벤트가 끝나면 다시 삭제하면 됩니다.

하지만 이벤트가 많아지면 상황이 달라집니다.

예를 들어 다음과 같은 요청이 계속 발생할 수 있습니다.

이런 작업을 매번 스킨에서 수정하면 마케팅 담당자와 개발자 사이에 작업 요청이 계속 발생합니다.

이벤트가 끝난 후 팝업이 그대로 남아 있는 문제도 생길 수 있습니다.

따라서 이벤트가 자주 변경되는 쇼핑몰에서는 스킨에 직접 내용을 넣는 방식보다 관리 화면에서 이벤트를 관리하는 방식이 편리할 수 있습니다.

핵심은 팝업 내용을 스킨에 직접 입력하지 않는 것입니다.

먼저 별도의 관리 화면에서 이벤트를 등록합니다.

예를 들어 다음과 같은 정보를 입력할 수 있습니다.

쇼핑몰 스킨에는 팝업을 표시할 공통 영역만 한 번 만들어 둡니다.

이후 쇼핑몰이 관리 시스템의 설정을 읽어 현재 시간에 표시해야 하는 이벤트가 있는지 확인합니다.

조건에 맞는 이벤트가 있다면 팝업이나 배너를 표시합니다.

종료 시간이 지나면 자동으로 표시하지 않습니다.

이렇게 하면 이벤트가 변경될 때마다 스킨 코드를 수정하고 배포할 필요가 줄어듭니다.

가능합니다.

예를 들어 관리자가 다음과 같이 등록할 수 있습니다.

시작: 9월 20일 오전 10시

종료: 9월 22일 오후 11시 59분

그러면 시작 시간이 되기 전에는 팝업을 표시하지 않고, 시작 시간이 지나면 자동으로 표시합니다.

그리고 종료 시간이 지나면 자동으로 숨깁니다.

따라서 개발자가 이벤트가 시작될 때 직접 팝업을 열고, 이벤트가 끝났을 때 다시 삭제하는 작업을 줄일 수 있습니다.

이 기능은 특히 세일과 쿠폰 이벤트가 자주 바뀌는 쇼핑몰에서 유용합니다.

쇼핑몰에서는 여러 이벤트가 동시에 진행될 수 있습니다.

예를 들어,

가 동시에 등록되어 있을 수 있습니다.

이때 모든 팝업을 한꺼번에 띄우면 고객이 불편할 수 있습니다.

따라서 이벤트마다 우선순위를 설정할 수 있도록 만들 수 있습니다.

예를 들어 우선순위가 높은 이벤트를 먼저 표시하거나, 여러 이벤트를 정해진 순서대로 표시하도록 구성할 수 있습니다.

어떤 방식을 사용할지는 쇼핑몰 운영 방식에 따라 결정합니다.

가능합니다.

PC와 모바일의 화면 크기가 다르기 때문에 같은 팝업 이미지를 사용하는 것이 항상 적합한 것은 아닙니다.

관리 화면에서 다음처럼 구분할 수 있습니다.

또한 노출 페이지도 구분할 수 있습니다.

예:

이렇게 설정하면 같은 이벤트라도 필요한 화면에서만 보여줄 수 있습니다.

팝업을 닫을 때 고객이 오늘 하루 보지 않기를 선택하는 기능도 함께 만들 수 있습니다.

이 경우 고객의 브라우저에 해당 팝업을 일정 시간 동안 보지 않도록 정보를 저장합니다.

쿠키나 브라우저 저장 기능을 이용하는 방식이 일반적입니다.

다음 날 다시 접속하면 팝업을 다시 표시할 수 있습니다.

이 기능을 넣으면 같은 팝업이 고객에게 반복해서 나타나는 것을 줄일 수 있습니다.

쇼핑몰에는 이미 다양한 앱이나 스크립트가 설치되어 있을 수 있습니다.

예를 들어,

등이 같은 화면 영역을 사용할 수 있습니다.

이때 새로운 팝업 시스템을 추가하면 팝업이 두 개 동시에 나타나거나, 닫기 버튼이 겹치는 문제가 발생할 수 있습니다.

따라서 개발 전에 현재 쇼핑몰에 설치된 앱과 스킨 스크립트를 확인해야 합니다.

이번 사례에서는 기존 앱으로 충분히 처리할 수 있는 단순 공지는 기존 기능을 유지하고, 일정과 우선순위 관리가 필요한 이벤트만 새로운 시스템에서 관리하는 방식으로 범위를 나누었습니다.

모든 기능을 하나의 시스템으로 옮기는 것이 항상 좋은 방법은 아닙니다.

팝업 이미지의 크기와 비율이 제각각이면 모바일 화면에서 문제가 생길 수 있습니다.

예를 들어,

등의 문제가 발생할 수 있습니다.

그래서 관리 화면에 권장 이미지 크기와 비율을 안내하고 등록 전에 미리보기 기능을 제공할 수 있습니다.

실제 쇼핑몰에 적용하기 전에는 PC와 모바일에서 모두 확인하는 것이 좋습니다.

단순히 팝업이 표시되는지만 확인해서는 부족합니다.

실제 운영 상황을 기준으로 테스트해야 합니다.

예를 들어 다음과 같은 상황을 확인합니다.

이런 시나리오를 확인해야 실제 이벤트 기간에 발생할 수 있는 문제를 줄일 수 있습니다.

가장 큰 변화는 마케팅 담당자가 이벤트 일정을 직접 관리할 수 있다는 것입니다.

기존에는,

마케팅 요청 → 개발자가 스킨 수정 → 테스트 → 배포

과정이 필요했다면,

자동화 시스템에서는,

마케팅 담당자가 이벤트 등록 → 정해진 시간에 자동 노출 → 종료 후 자동 종료

방식으로 운영할 수 있습니다.

따라서 이벤트가 자주 변경되는 쇼핑몰에서는 개발자의 반복 작업을 줄일 수 있습니다.

특히 주 단위로 세일이나 프로모션을 진행하는 쇼핑몰이라면 이런 차이가 커질 수 있습니다.

그렇지는 않습니다.

이벤트가 한 달에 한두 번 정도이고 팝업 변경도 많지 않다면 기본 쇼핑몰 기능이나 팝업 앱을 사용하는 것이 더 간단할 수 있습니다.

반대로 다음과 같은 쇼핑몰이라면 자동화 시스템을 검토할 수 있습니다.

즉, 팝업이 있다는 이유만으로 개발할 필요는 없습니다.

반복되는 운영 작업이 많을 때 자동화의 필요성이 커집니다.

기술적으로는 확장할 수 있습니다.

예를 들어 다음과 같은 기능을 추가할 수 있습니다.

다만 이런 기능을 처음부터 모두 넣으면 개발 범위가 크게 늘어납니다.

따라서 이번 사례에서는 이벤트 일정과 노출 관리, 팝업 충돌 방지를 먼저 구현했습니다.

추가적인 개인화나 쿠폰 자동 발급은 실제 운영 필요성이 확인된 후 단계적으로 확장할 수 있도록 구성했습니다.

팝업 자동화는 단순히 팝업 하나를 만드는 작업이 아닙니다.

실제 운영에서 중요한 것은 다음과 같습니다.

1. 이벤트를 쉽게 등록할 수 있는 관리 화면

2. 시작·종료 시간 자동 관리

3. PC·모바일 노출 구분

4. 페이지별 노출 설정

5. 여러 이벤트의 우선순위 관리

6. 오늘 하루 보지 않기

7. 기존 앱과 스킨의 충돌 방지

8. 이미지 크기와 모바일 화면 대응

9. 이벤트 시작·종료 시나리오 테스트

이 부분을 함께 설계해야 실제 쇼핑몰에서 안정적으로 사용할 수 있습니다.

옴니어스24는 단순히 팝업 관리 기능만 만드는 방식으로 접근하지 않습니다.

먼저 현재 쇼핑몰에서 팝업과 이벤트가 어떻게 운영되고 있는지 확인합니다.

예를 들어,

등을 확인합니다.

이벤트가 많지 않다면 기본 기능이나 기존 앱으로 해결하는 방법을 먼저 검토할 수 있습니다.

반대로 이벤트가 자주 변경되고 개발자에게 반복적으로 스킨 수정을 요청하고 있다면 관리 화면 + 쇼핑몰 스킨 + 서버/API 구조를 이용한 자동화를 검토할 수 있습니다.

필요한 기능만 먼저 만들고, 쿠폰 발급이나 회원 등급별 노출과 같은 기능은 이후 단계에서 확장하는 방식으로 개발 범위를 조정할 수 있습니다.

쇼핑몰 팝업 자동화의 핵심은 팝업 디자인이 아니라 이벤트를 누가, 어떻게, 언제 관리할 것인지입니다.

이벤트가 자주 바뀐다면 관리 화면에서 일정을 등록하고 자동으로 노출·종료되도록 만들면 반복적인 스킨 수정 작업을 줄일 수 있습니다.

반대로 이벤트가 많지 않다면 기본 팝업이나 앱을 사용하는 것이 더 적합할 수 있습니다.

따라서 쇼핑몰의 이벤트 횟수와 현재 운영 방식을 먼저 확인한 후 필요한 범위만 자동화하는 것이 좋습니다.