# 하이퍼클래스에서 이탈 의도 팝업 만들기

이 글에서는 하이퍼클래스의 웹사이트 및 퍼널 빌더를 사용하여 이탈 의도 팝업(Exit-Intent Pop-Up)을 구축하고 설정하는 방법을 알려드립니다. 이탈 의도 팝업은 사용자가 페이지를 떠나기 전에 재참여를 유도하여 가입, 리드 수집 또는 특별 제안을 촉진하는 데 도움이 됩니다.

## 목차

* [이탈 의도 팝업이란?](#이탈-의도-팝업이란)
* [이탈 의도 팝업의 주요 이점](#이탈-의도-팝업의-주요-이점)
* [이탈 의도 팝업 만들기](#이탈-의도-팝업-만들기)
* [데스크톱 vs 모바일 동작 차이](#데스크톱-vs-모바일-동작-차이)
* [자주 묻는 질문](#자주-묻는-질문)

***

## 이탈 의도 팝업이란?

이탈 의도 팝업은 사용자의 커서 동작이 사이트를 떠날 것임을 나타낼 때(일반적으로 브라우저 바나 닫기 버튼 쪽으로 이동할 때) 트리거됩니다. 하이퍼클래스에서는 웹사이트나 퍼널 빌더 내에서 팝업을 디자인하고 이탈 의도에 따라 팝업이 트리거되도록 설정할 수 있습니다.

***

## 이탈 의도 팝업의 주요 이점

이탈 의도 팝업은 마지막 기회의 CTA를 제공하여 리드 수집과 전환율을 크게 향상시킬 수 있습니다. 다음과 같은 가치를 제공합니다:

* **이탈률 감소**: 사용자가 이탈하기 직전에 오퍼를 제시하여 아무런 참여 없이 떠나는 것을 방지합니다.
* **이탈하는 방문자 수집**: 사용자가 떠나기 전에 마지막 메시지나 인센티브로 리드 정보를 수집합니다.
* **전환율 향상**: 이탈 팝업은 시간 제한 거래나 특별 할인으로 망설이는 사용자를 리드로 전환시킬 수 있습니다.
* **커스텀 가능한 콘텐츠**: 브랜드에 맞게 팝업의 모양, 레이아웃, 폼 필드를 디자인합니다.
* **유연한 폼 연동**: 이메일, 전화번호 또는 기타 주요 데이터를 수집하기 위해 모든 하이퍼클래스 폼을 삽입할 수 있습니다.
* **퍼널 및 웹사이트 빌더 내 작동**: 서드파티 도구가 필요 없습니다. 이탈 의도 동작이 하이퍼클래스 편집기에 내장되어 있습니다.

***

## 이탈 의도 팝업 만들기

폼 생성부터 트리거 설정까지 이탈 의도 팝업을 구축하는 단계를 따라해보세요.

### 1단계: 팝업용 폼 만들기

폼은 팝업에서 사용자로부터 정보를 수집할 수 있게 해주는 요소입니다. 팝업에서 사용할 폼을 만들거나 찾는 것부터 시작하세요.

자세히 알아보기: 하이퍼클래스에서 연락처 폼 만들기

### 2단계: 팝업 만들기

이제 퍼널이나 웹사이트 빌더 페이지 내에서 팝업을 만들고 생성된 폼을 추가합니다.

* Sites(사이트) → Funnels(퍼널) 또는 Websites(웹사이트)로 이동하여 사용할 퍼널이나 웹사이트를 선택합니다
* 팝업을 추가할 특정 퍼널 단계나 페이지를 찾습니다. 파란색 **Edit(편집)** 버튼을 클릭하여 해당 웹사이트 페이지나 퍼널 단계를 빌더에서 엽니다
* 웹사이트 빌더의 상단 네비게이션 바에서 Pop-up Settings(팝업 설정)을 클릭합니다
* Add Row(행 추가), 그다음 Add Element(요소 추가)를 클릭하여 팝업에 Form(폼) 요소를 추가합니다. **폼 선택기**를 사용하여 원하는 폼을 선택하세요
* 브랜딩에 맞게 팝업 디자인을 커스터마이즈합니다
* (선택사항) **사이드바 드롭다운**을 사용하여 초기 폼을 추가한 후 선택된 폼을 변경할 수 있습니다

![팝업 설정 화면](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046637047/original/WI3gsmwvzlTxIFbcMWNeur4STbqmRt7vgg.jpeg?1747237666)

### 3단계: 팝업을 이탈 의도에서 트리거되도록 설정

사용자가 떠나려고 할 때 팝업이 나타나도록 하려면 올바른 설정을 구성해야 합니다.

* 팝업 상단에 있는 **톱니바퀴 아이콘**이 있는 **Pop Up Settings(팝업 설정)** 파란색 버튼을 클릭합니다
* 사이드바에서 "Show Pop-up On(팝업 표시 시점)"으로 스크롤합니다
* 드롭다운에서 Exit(이탈)을 선택합니다. "None(없음)"이나 "Delay(지연)"를 선택하면 의도된 동작이 비활성화되거나 변경됩니다

![팝업 트리거 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046636982/original/BqOxZQAZontEUwA4RxcSWbT7CKi3wh0MZg.jpeg?1747237609)

### 4단계: 팝업 테스트

저장하고 게시한 후, 팝업이 원하는 대로 작동하는지 테스트하세요.

* 페이지나 퍼널 단계를 미리보기합니다
* 커서를 브라우저 상단으로 이동시킵니다 (이탈하는 것처럼)
* 팝업이 나타나는지 확인합니다
* 필요에 따라 스타일링과 콘텐츠를 조정합니다

![팝업 테스트 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046636558/original/9FNJ9wtJ4QYuUc7hXkX9sVD0rCN-LcpRVg.gif?1747237311)

***

## 데스크톱 vs 모바일 동작 차이

이탈 의도 감지는 마우스 커서 추적을 사용하므로 데스크톱에서만 작동합니다. 터치스크린에는 커서가 없기 때문에 이 동작은 모바일에서 작동하지 않습니다.

모바일 참여 모범 사례는 다음 가이드를 참조하세요: *모바일 반응형 디자인 쉽게 만들기*

***

## 자주 묻는 질문

**Q: 하이퍼클래스가 아닌 웹사이트에서 이탈 의도 팝업을 사용할 수 있나요?** 아니요. 이탈 의도 팝업은 하이퍼클래스 내에서 구축된 퍼널과 웹사이트에서만 지원됩니다.

**Q: "Exit(이탈)" 대신 "None(없음)"이나 "Delay(지연)"를 선택하면 어떻게 되나요?** 팝업이 이탈 의도 프롬프트로 작동하지 않습니다. "None"은 비활성화하고, "Delay"는 커서 이탈 대신 시간 지연 후에 팝업을 표시합니다.

**Q: 다른 팝업에 서로 다른 폼을 사용할 수 있나요?** 네. 각 퍼널 단계나 페이지의 개별 팝업에 다른 폼을 할당할 수 있습니다.

**Q: 라이브로 전환하기 전에 팝업을 미리볼 수 있나요?** 네. 빌더 내의 페이지 미리보기 옵션을 사용하여 게시하기 전에 동작을 테스트할 수 있습니다.

**Q: 팝업 스타일링이 내 사이트와 일치하나요?** 팝업의 행, 컬럼, 배경, 폼 스타일을 사이트 브랜딩에 맞게 완전히 커스터마이즈할 수 있습니다.

***

*원문 최종 수정: Wed, 14 May, 2025 at 10:59 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/miscellaneous/how-to-create-an-exit-intent-pop-up-in-highlevel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.