TIL

Exit Intent 배너 직접 구현기 – 유료 배너에서 자체 구현으로 전환한 이유와 방법

아임실버 2025. 5. 26. 09:56

이탈 직전의 순간, 마지막 찬스를 제공하는 ‘Exit Intent 배너’를 직접 구현해봤습니다. 유료 솔루션을 걷어내고 우리 서비스에 맞게 최적화된 이탈 방지 배너 시스템을 만든 과정과 기술적 포인트를 정리해봅니다.

1. 왜 유료 배너에서 직접 구현으로 바꿨을까?

기존에는 ADN과 같은 외부 배너 광고 솔루션을 사용해 사용자 이탈을 막고 있었습니다. 하지만 시간이 갈수록 다음과 같은 고민이 커졌습니다.

  • 💰 광고 비용 증가: 유입이 많을수록 고정비 부담이 커짐
  • 🎨 디자인/기능 커스터마이징 한계
  • 🔗 페이지 연동이 복잡하고, 특정 조건에서만 띄우는 로직은 직접 짜야 하는 상황

그래서 우리는 결심했습니다.

Exit Intent 배너를 직접 만들자!

 

2. Exit Intent란?

‘Exit Intent’는 사용자가 브라우저 창을 닫기 직전, 즉 마우스 커서가 화면 위쪽으로 이동할 때 이를 감지해 배너를 띄우는 기술입니다.

주로 다음을 위해 사용됩니다:

  • 장바구니 이탈 방지
  • 쿠폰 제시
  • 유사 상품 추천

이번에 구현한 배너는 사용자가 사이트를 떠나려 할 때 "이런 상품은 어떠세요?" 라는 메시지와 함께 추천 상품 리스트를 보여주는 구조입니다.

 

3. 배너 표시 로직 – 마우스 이탈 감지

useEffect(() => {
  const handleMouseLeave = (e) => {
    if (e.clientY <= 0) {
      const cookieValue = getCookie(BANNER_PRODUCT_COOKIE_NAME);
      if (cookieValue === "false" || !cookieValue) {
        setShowBanner(true);
        window.scrollTo({ top: 0 });
      }
    }
  };
  document.addEventListener("mouseleave", handleMouseLeave);
  return () => document.removeEventListener("mouseleave", handleMouseLeave);
}, []);

 

  • e.clientY <= 0: 마우스가 브라우저 상단으로 이동했을 때만 반응
  • 쿠키 값이 없거나 "false"일 경우만 배너 노출
  • 동시에 페이지 최상단으로 스크롤 이동

 

4. 왜 쿠키로 제어했는가?

const handleClose = () => {
  setShowBanner(false);
  const expiryDate = new Date();
  expiryDate.setHours(expiryDate.getHours() + 2);
  setCookie(BANNER_PRODUCT_COOKIE_NAME, "true", {
    path: "/",
    expires: expiryDate,
  });
};

 

배너는 이탈 시점에 자동 노출되기 때문에, 사용자가 한 번 본 배너를 짧은 시간 내 반복해서 보게 되면 오히려 부정적인 경험이 될 수 있습니다.

그래서 우리는 쿠키를 이용한 노출 제한 방식을 도입했습니다.

✅ 쿠키를 사용하는 이유

  • 일정 시간 동안 반복 노출 방지: “2시간 동안 다시 띄우지 않음” 같은 제어가 가능
  • 브라우저 간 일관성 유지: 세션 스토리지나 로컬 스토리지보다 가볍고 직관적
  • SSR 환경에서도 확장 가능: 향후 서버사이드 처리 시에도 쿠키는 접근이 용이함

단순한 기술 선택이 아니라, 사용자 경험을 존중하고 컨트롤하기 위한 UX 중심 설계라고 볼 수 있습니다.

 

5. 추천 상품 연결 로직

사용자가 나가려 할 때, 특정 상품을 보여주고 싶었습니다. 그래서 dummyList.out_product로 전달된 pcode를 기반으로 데이터를 조회했습니다.

const { data: brandProducts } = useBrandProductsQuery({
  pcodeList: dummyList.out_product,
});
  • 이미지, 이름, 가격, 할인율까지 표시
  • 클릭 시 해당 상품 상세 페이지로 이동
  • 필요 시 pageOutData.link_url 기반 외부 이동도 가능

 

6. 구현 결과와 향후 계획

구현 후 얻은 장점

  • 비용 절감: 외부 광고 툴 제거
  • 정교한 사용자 제어: 페이지 조건, 쿠키 조건 등에 따른 유연한 대응
  • 디자인 자유도 확보: UI/UX 팀과 자유롭게 설계 가능

향후 계획

  • 최근 본 상품 기반 자동 추천
  • 장바구니 연동 → 관련 상품 제안
  • 페이지 카테고리 기반 자동 타겟팅

 

마무리

Exit Intent 배너는 단순히 “떠나지 마세요!”라는 메시지를 넘어서, 사용자에게 맞는 콘텐츠를 마지막 순간에 제안하는 중요한 마케팅 수단입니다.

유료 솔루션에 의존하지 않고, 우리 서비스에 최적화된 로직으로 구현하면 전환율을 높이면서도 사용자 경험을 해치지 않는 방향으로 운영할 수 있습니다.

작지만 강력한 변화, 직접 만들어보면 더 많은 가능성이 보입니다!!!