Webflow 카운트다운 타이머는 어디에 넣나

커스텀 코드는 Webflow 유료 기능이다

Webflow 는 관련 도움말 두 편을 같은 조건으로 시작합니다. Core·Growth·Agency·Freelancer 중 하나의 Workspace 를 쓰거나 사이트에 활성 Site plan 이 붙어 있으면, Site managers 와 Designers 가 커스텀 코드와 스크립트를 넣을 수 있다는 문장입니다. Code Embed 요소 문서에도 같은 문장이 그대로 적혀 있습니다. pricing 비교표는 같은 이야기를 반대쪽에서 합니다. Custom code 행이 무료 Starter site plan 과 무료 Starter Workspace 에서는 빠져 있고, Basic site plan 과 Core Workspace 부터 들어갑니다.

그래서 잠금을 푸는 길은 둘입니다. 지금 띄우려는 사이트 하나에 유료 Site plan 을 붙이거나, 앞으로 만들 것까지 덮는 유료 Workspace 를 쓰는 것. 둘 다 BootSignal 이 받는 돈이 아니고, Starter 사이트에서 맛만 보는 길은 없습니다. 입력란이 흐려져 있는 게 아니라 화면에 없습니다.

숫자가 줄어드는 걸 먼저 본다

shadow root 안에서 그려지는데, 손으로 만든 사이트보다 Webflow 에서 이 점이 더 중요합니다. 사이트 전체 스타일이 안으로 흘러들어 숫자 모양을 바꾸지 못하고, 위젯 쪽 CSS 도 레이아웃으로 새어 나오지 않습니다. 뒤에 깔린 배경을 읽어 밝은 팔레트와 어두운 팔레트 중 맞는 쪽을 고르고, 숫자를 브랜드 색으로 쓰고 싶으면 data-accent 에 CSS 색을 아무거나 넣으면 됩니다.

로더는 Footer code 로, 시계는 Code Embed 로

1. 등록 안 된 호스트네임에서는 아무것도 그려지지 않는다

   Webflow 는 발행 대상을 두 종류로 두고 Publish 창에서 따로 보여 줍니다. 프로젝트를 만든 날 함께 생기는 your-project.webflow.io 스테이징 주소와, 연결해 둔 커스텀 도메인입니다. 카운트다운은 숫자를 하나 그리기 전에 location.hostname 을 읽고, 그 호스트네임이 등록되어 있지 않으면 거기서 멈춥니다. 그래서 발행 대상이 무엇이든 그 주소가 먼저 대시보드에 있어야 합니다. 스테이징 주소부터 등록하세요. 고객보다 먼저 한참 지켜보고 싶은 위젯이 바로 타이머입니다. 라이브 도메인은 올라가는 날 추가하면 됩니다. 도메인을 저장하면 site id 가 나오는데, 사이트의 모든 위젯이 이 짧은 문자열 하나를 함께 씁니다. 그 값이 들어갈 자리가 2단계입니다.

2. 로더는 Site settings 한 곳에만 붙인다

   Site settings 로 가서 Custom code 탭을 열고, Footer code 칸에 로더를 넣고 Save changes 를 누릅니다. Webflow 는 로딩 속도를 이유로 스크립트 태그를 닫는 body 태그 바로 앞, 곧 이 칸에 두라고 권합니다. 설치에 필요한 스크립트는 이거 하나뿐입니다. 카운트다운이 하는 일은 전부 다음 단계에서 요소에 적는 속성으로 정합니다.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>

   복사

3. 시계가 앉을 자리에 Code Embed 를 놓는다

   Add 패널을 열고 타이머가 놓일 지점으로 Code Embed 를 끌어다 놓은 다음, 마운트 요소를 붙여 넣고 저장하고 모달을 닫습니다. 나중에 다시 열 때는 요소를 두 번 클릭하면 됩니다. 시계가 0 에 닿은 뒤 지면이 무슨 말을 할지도 이때 함께 정합니다.

   <div data-bootsignal="countdown"
        data-target="2026-12-31T23:59:59"
        data-expired="The sale has ended!"></div>

   복사

4. publish 한 다음 발행된 주소에서 확인한다

   Webflow 는 커스텀 코드의 효과가 preview 모드에서 보인다고 안내하지만, preview 로 열린 지면은 내가 등록한 도메인이 아니라 Webflow 주소에서 나옵니다. 그래서 거기서는 타이머가 그려지지 않습니다. 스테이징이나 라이브 도메인으로 publish 하고 그 주소를 여세요.

내가 뜻한 순간에 끝나는 타깃을 적는다

실제로 잘못 나가는 자리가 여기입니다. data-target 은 브라우저 날짜 파서가 읽는데, 사람들이 잘 모르는 규칙이 하나 있습니다. 끝에 시간대가 없는 타임스탬프는 내 시계가 아니라 방문자 시계의 시각입니다. 평범하게 적어 두면 새해 카운트다운이 서울에서 23:59:59 에 0 이 되고, 아홉 시간 뒤 런던에서 한 번 더 0 이 됩니다.

<!-- Local: 23:59:59 on whatever clock the visitor is using -->
<div data-bootsignal="countdown" data-target="2026-12-31T23:59:59"></div>

<!-- Fixed: one instant for everyone, written in UTC -->
<div data-bootsignal="countdown" data-target="2026-12-31T23:59:59Z"></div>

<!-- Fixed: the same instant as the line above, written in Seoul time -->
<div data-bootsignal="countdown" data-target="2027-01-01T08:59:59+09:00"></div>

마감이 실제로 무슨 뜻인지 보고 고릅니다. 손님이 어디에 살든 그 지역 자정에 닫는 상점이라면 로컬 형태가 맞습니다. 제품 출시나 티켓 오픈, 웨비나처럼 모두가 같은 순간에 0 을 봐야 한다면 시간대를 명시합니다. 여기서는 지역 이름보다 오프셋이 낫습니다. 서머타임을 견디기 때문인데, 오늘 적용되는 오프셋이 아니라 그 날짜에 적용되는 오프셋을 쓰세요.

작은 함정이 둘 있습니다. 2026-12-31 처럼 날짜만 적은 값은 보기와 달리 그 지역 자정을 뜻하지 않습니다. 시간이 없으면 파서가 UTC 자정으로 읽어서, 방문자가 어디 있느냐에 따라 그날 오후나 전날 저녁에 떨어집니다. 그리고 숫자는 기기 시계를 기준으로 줄어듭니다. 노트북 시계가 이틀 빠른 방문자에게는 남은 시간이 그만큼 짧게 보입니다. 브라우저에서 도는 타이머로는 이건 못 고칩니다.

0 이 되어도 사라지지 않는다

타깃이 지나면 숫자가 있던 자리에 data-expired 의 문구가 들어갑니다. 요소는 자기 박스를 그대로 들고 있어서, 시계가 있던 구멍을 메우려고 지면이 다시 흐르지 않습니다. 속성을 빼면 위젯이 자기 문구를 data-lang 이 가리키는 언어로 보여 줍니다.

그 문구는 누가 지면을 고칠 때까지 남으니, 다음 주에 읽어도 맞는 말을 적으세요. "봄 기수 접수는 마감했습니다. 다음 기수는 3월에 엽니다." 는 한 달 뒤에도 읽히지만, "서두르세요, 오늘 밤 마감!" 이 그대로 얼어 있으면 곤란합니다. 엉뚱한 곳을 파기 전에 알아 둘 동작이 하나 더 있습니다. 브라우저가 data-target 을 아예 읽지 못하면 위젯은 불러오는 순간부터 마감 문구를 보여 줍니다. 방금 만든 타이머가 publish 하자마자 마감 문구를 띄운다면, 지난 날짜가 아니라 형식이 깨진 타임스탬프입니다.

카운트다운이 읽는 속성 전부

마지막 줄이 이 설치와 Webflow 댓글 위젯 편의 차이입니다. 댓글·평점·투표는 지면 하나 몫의 데이터가 옆 지면과 섞이지 않도록 data-thread-id 가 필요합니다. 카운트다운은 데이터가 없으니, 한 지면에 여러 개를 두는 일은 타깃이 다른 마운트 요소를 여러 개 두는 것에 지나지 않고, 로더 하나가 그 전부를 찾아냅니다.

CMS 가 날짜를 들고 있으면 출시가 Designer 를 기다리지 않는다

Collection page 템플릿에서는 타깃이 리터럴일 필요가 없습니다. Code Embed 는 속성 값 안에 CMS 필드를 받을 수 있고, 그러면 템플릿 하나가 앞으로 발행할 출시 지면과 행사 지면, 모집 마감 지면 전부가 됩니다.

컬렉션에 일반 텍스트 필드를 하나 더하고 이름을 Countdown Target 정도로 두고, 시간대 접미까지 붙은 완전한 ISO 타임스탬프를 담습니다. 그다음 템플릿의 Code Embed 를 열어 data-target 의 따옴표 사이에 커서를 두고, 필드 선택기에서 그 필드를 넣습니다.

<div data-bootsignal="countdown"
     data-target="[Countdown Target]"
     data-expired="Enrollment for this session has closed."></div>

Designer 는 넣은 필드를 위의 대괄호 글자가 아니라 색이 있는 토큰으로 보여 줍니다. 대괄호는 자리를 표시하려고 적어 둔 것입니다. 날짜 필드보다 일반 텍스트 필드를 쓰세요. 날짜 필드는 내가 고른 표시 형식대로 나오고, 파서는 사람 눈보다 까다롭습니다. 어느 쪽을 골랐든 발행된 항목 하나를 열어 마감 문구가 아니라 숫자가 줄어드는지 확인하세요.

얻는 것은 날짜를 누가 옮길 수 있느냐입니다. 필드가 시계를 움직이게 해 두면 출시를 한 주 미루는 데 CMS 항목 하나만 고치면 됩니다. Workspace 자리를 쥔 사람이 Designer 를 열어 사이트 전체를 다시 발행할 일이 없습니다.

청구서가 둘인데 하나만 우리 쪽이다

Webflow 는 커스텀 코드를 열어 주는 요금제에 값을 매깁니다. BootSignal 은 등록 도메인 단위로 월 $20 또는 연 $200 이고, 그 구독 하나가 카운트다운과 공지 바를 비롯한 카탈로그 전체를 덮습니다. 지금 있는 유료 위젯 31개에 나중에 추가되는 것까지, 그리고 무료 브라우저 도구 31개까지요. 어느 항목도 페이지뷰로 값을 매기지 않으니, 뉴스레터에 실려 트래픽이 몰린 랜딩 지면도 전날과 똑같은 값입니다. 청구서를 움직이는 숫자는 등록해 둔 호스트네임 개수입니다. 출시 뒤에도 스테이징 주소를 켜 둔 프로젝트는 둘을 내고 있습니다.

트래픽이나 캠페인 개수에 따라 값이 오르는 타이머 도구와 견주는 중이라면, 대안 비교 섹션에 값이 붙은 비교가 있습니다.

시계는 얼마 남았는지만 말한다

카운트다운 하나만 두면 문장이 붙지 않은 숫자입니다. 대부분의 출시 지면에서는 그게 무엇인지 말해 주는 바와 짝을 이루고, Footer code 에 로더가 이미 있으니 Code Embed 하나만 더 놓으면 됩니다.

<div data-bootsignal="announce"
     data-message="Early-bird pricing ends Friday"
     data-link="/pricing" data-link-text="See plans"
     data-id="launch-1"></div>

이쪽도 thread id 를 받지 않습니다. data-id 는 닫기 기록용 키일 뿐입니다. 바를 닫은 독자는 그 선택을 자기 브라우저에 기억하고, id 를 올리면 다음 공지에 바가 다시 나타납니다.

거의 항상 호스트네임 아니면 타임스탬프다

• 아무것도 안 그려진다: 지면이 등록된 도메인에 없습니다. Designer preview 와 Webflow preview 주소는 내 도메인이 아니니 스테이징이나 라이브로 먼저 publish 하세요.
• publish 하는 순간 마감 문구가 뜬다: 타깃을 읽지 못했습니다. 날짜와 시간 사이의 T 를 포함해 ISO 형태와 맞는지 보세요.
• 마감이 한 시간 어긋난다: 서머타임입니다. 적던 날 적용되는 오프셋이 아니라 타깃 날짜에 적용되는 오프셋을 쓰세요.
• Designer 캔버스에 자리표시 상자가 있다: 정상입니다. 거기서는 iframe 과 style 내용만 미리 보입니다.
• 스테이징에서는 되다가 커스텀 도메인을 연결하니 멈췄다: 새 호스트네임도 등록하세요. 검사는 Webflow 사이트가 아니라 호스트네임을 봅니다.
• Code Embed 가 붙여 넣기를 조용히 거부한다: Webflow 는 커스텀 코드 안의 html·body·head 태그를 거부하고, 칸마다 50,000자로 제한합니다.

지면이 무엇을 중심에 두든, 마감은 속성에만 넣지 말고 본문에도 시간대까지 풀어 적으세요. "금요일 밤 11:59 KST 에 문을 닫습니다" 는 방문자가 달력에 옮길 수 있는 부분이고, 시계가 0 에 닿은 뒤에도 뜻이 통하는 유일한 부분입니다.