# 퍼널에서 카운트다운 타이머 사용하는 방법

카운트다운 타이머는 마감일까지 시각적으로 시간을 세어줌으로써 방문자가 행동을 취하도록 동기를 부여합니다. 번개 세일, 한정 시간 오퍼, 이벤트 등록 등에 완벽한 도구입니다. Hyperclass에서는 나만의 카운트다운 타이머를 디자인하고 퍼널이나 웹사이트에 쉽게 추가할 수 있습니다.

***

**목차**

* [카운트다운 타이머란?](#카운트다운-타이머란)
* [카운트다운 타이머의 주요 장점](#카운트다운-타이머의-주요-장점)
* [카운트다운 타이머 만드는 방법](#카운트다운-타이머-만드는-방법)
* [퍼널에 카운트다운 타이머 추가하기](#퍼널에-카운트다운-타이머-추가하기)
* [HTML 카운트다운 타이머 요소 사용하기](#html-카운트다운-타이머-요소-사용하기)
* [코드 블록 카운트다운 타이머 요소 사용하기](#코드-블록-카운트다운-타이머-요소-사용하기)
* [자주 묻는 질문](#자주-묻는-질문)
* [관련 문서](#관련-문서)

***

## 카운트다운 타이머란?

카운트다운 타이머는 특정 이벤트나 마감일까지 남은 시간을 시각적으로 추적합니다. Hyperclass에서는 이런 타이머를 여러 사이트에서 재사용하고, 브랜드에 맞게 스타일링하며, 목표에 따라 다르게 동작하도록 설정할 수 있습니다. 런칭 시 급박감을 조성하거나, 오퍼 만료 알림, 이벤트 등록 등에 활용할 수 있습니다.

***

## 카운트다운 타이머의 주요 장점

* **급박감과 희소성**: 실시간 카운트다운으로 즉각적인 행동을 유도합니다.
* **다양한 타이머 유형**: 고정형, 반복형, 동적 타이머로 다양한 캠페인 스타일을 지원합니다.
* **재사용 가능한 디자인**: 여러 페이지와 퍼널에서 다시 만들지 않고 타이머를 사용할 수 있습니다.
* **스타일 제어**: 글꼴, 크기, 색상, 표시할 시간 단위를 브랜드에 맞게 조정할 수 있습니다.

***

## 카운트다운 타이머 만드는 방법

퍼널에 추가하기 전에 먼저 마케팅 섹션에서 카운트다운 타이머를 디자인하고 만들어야 합니다.

* `Marketing(마케팅) > Countdown Timers(카운트다운 타이머)`로 이동합니다. 파란색 + New 버튼을 클릭하여 새 카운트다운 타이머를 만듭니다.

![카운트다운 타이머 생성](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685542/original/uIc7oQLLEHuYh1gYwzW-iiHDwYTDmXBHiQ.jpeg?1748969391)

* 카운트다운 타이머 템플릿을 선택하고 Continue with Template을 클릭합니다.

![템플릿 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685558/original/tASA6958sBULL4WOCdoC7HjQawLZSnNNVQ.jpeg?1748969410)

* 왼쪽 상단의 General 탭에서 타이머 유형을 선택합니다:
  * **Fixed(고정형)** – 특정 날짜와 시간에 끝납니다.
  * **Recurring(반복형)** – 정기적인 간격으로 재설정됩니다(예: 매일, 매주).
  * **Dynamic(동적)** – 연락처 상호작용에 따라 조정됩니다(이메일에 이상적).
* Timer End Date(타이머 종료 날짜)를 설정하고, Time Zone(시간대)를 선택하며, Redirect URL을 정의합니다.

![타이머 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685616/original/gbs-h3v-4ULU4kxxQAyH1tCKIij6C2P99A.jpeg?1748969539)

* 왼쪽의 Style 탭에서 표시할 시간 단위(예: 시간, 분, 초)를 토글하고, 스타일 컨트롤을 사용해 타이머의 글꼴, 크기, 색상을 커스터마이징합니다.

![스타일 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685687/original/6wdIaZzsKVgWQki4i9uFOTwrvx8Oi7kejA.jpeg?1748969612)

***

## 퍼널에 카운트다운 타이머 추가하기

퍼널에 카운트다운 타이머를 추가하는 방법은 두 가지입니다: HTML 카운트다운 타이머 요소를 사용하거나 코드 블록 요소를 사용하는 것입니다. 카운트다운 타이머 요소는 Hyperclass 내에서 빠른 드래그 앤 드롭 사용에 이상적이고, 코드 블록 방법은 써드파티 플랫폼에 더 적합합니다.

### HTML 카운트다운 타이머 요소 사용하기

드래그 앤 드롭 퍼널 편집기를 사용해 Hyperclass에서 완전히 작업하는 사용자에게 최적입니다.

* `Sites(사이트) > Funnels(퍼널)`로 이동합니다.
* 원하는 사이트를 선택한 후, 업데이트하려는 퍼널 단계에서 Edit Page를 클릭합니다.
* 빌더 왼쪽 상단의 플러스(+) 아이콘을 클릭해 Add Element 패널을 엽니다. Countdown Timers 요소를 선택합니다.

![카운트다운 타이머 요소 추가](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685471/original/AJ-RilGvSf8lQG1y6IBEg5Yptca3mzdouA.jpeg?1748969293)

* 이전에 만든 타이머 목록에서 선택합니다. 선택한 타이머를 페이지의 적절한 섹션으로 드래그합니다.

### 코드 블록 요소 사용하기

코드를 사용해 카운트다운 타이머를 삽입하는 방법으로, 써드파티 플랫폼에 추가할 때 유용합니다. 카운트다운 타이머에서 코드를 복사하는 방법에 대한 자세한 정보는 [여기를 클릭하세요.](/hyperclass-docs/marketing/trigger-links-overview/how-to-use-the-copy-code-feature-in-countdown-timers.md)

* `Marketing(마케팅) > Countdown Timers(카운트다운 타이머)`로 이동하여 사용하려는 타이머를 클릭합니다.
* 오른쪽 상단의 Copy Code 버튼을 클릭합니다. 그런 다음 팝업에서 파란색 Copy 버튼을 클릭합니다.

![코드 복사](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685346/original/WDGurI-ibhc732v-8R5oKUYp4LM7AqDItg.jpeg?1748969187)

* `Sites(사이트) > Funnels(퍼널)`에서 퍼널을 엽니다.
* 왼쪽 상단의 플러스(+) 아이콘을 클릭해 요소 패널을 엽니다.
* Code 요소를 선택하고 타이머가 나타나길 원하는 곳으로 드래그합니다.

![코드 요소 추가](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685405/original/Gx7OGkQSy3Z0a5fpEKOuNWEeGP-F6NLHxA.jpeg?1748969241)

* 코드 블록을 클릭해 편집기를 열고, 앞서 복사한 커스텀 코드를 붙여넣습니다.

![코드 편집](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047685437/original/xYGRJCDEJp6pfJoa5M7J_g2tYOkbWmrFVA.jpeg?1748969271)

***

## 자주 묻는 질문

**Q: 고정형, 반복형, 동적 타이머의 차이점은 무엇인가요?**

고정형 타이머는 특정한 전역 날짜/시간에 끝납니다. 반복형 타이머는 정의된 간격 후에 재설정됩니다(예: 매일 오전 9시). 동적 타이머는 연락처가 이메일을 열거나 페이지를 방문할 때 시작되는 개인화된 카운트다운입니다.

**Q: 타이머를 여러 퍼널에서 사용할 수 있나요?**

네, 타이머를 한 번 만들면 어떤 방법을 사용하든 모든 퍼널이나 웹사이트에서 재사용할 수 있습니다.

**Q: 써드파티 웹사이트 빌더에서 타이머를 사용할 수 있나요?**

네. Copy Code 기능을 사용해서 선호하는 플랫폼에 코드 스니펫을 붙여넣으면 됩니다.

**Q: 기존 퍼널에서 깨뜨리지 않고 타이머를 업데이트할 수 있나요?**

네. 타이머에 대한 모든 업데이트는 배치된 모든 곳에 자동으로 반영됩니다. 카운트다운 타이머를 업데이트하려면 `Marketing(마케팅) > Countdown Timers(카운트다운 타이머)`로 이동하여 업데이트할 타이머에서 Edit을 클릭하세요.

## 관련 문서

* [이메일에서 카운트다운 타이머 사용하는 방법](/hyperclass-docs/marketing/trigger-links-overview/how-to-use-countdown-timer-in-emails.md)
* [카운트다운 타이머 시작하기](/hyperclass-docs/marketing/trigger-links-overview/getting-started-with-countdown-timer.md)
* [이메일과 퍼널에서 카운트다운 타이머 동기화하기](/hyperclass-docs/marketing/trigger-links-overview/sync-your-countdown-timer-in-email-and-funnels.md)
* [카운트다운 타이머의 "코드 복사" 기능 사용하는 방법](https://help.gohlighlevel.com/en/support/solutions/articles/155000003103)

***

*원문 최종 수정: Tue, 3 Jun, 2025 at 12:14 PM* *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/marketing/trigger-links-overview/how-to-use-countdown-timers-in-funnels.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.