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 이며, 구독 하나로 카운트다운과 공지 바를 비롯한 카탈로그 전체를 쓸 수 있습니다. 지금 있는 유료 위젯 34개와 나중에 추가되는 위젯, 무료 브라우저 도구 33개까지 포함됩니다. 어느 항목도 페이지뷰에 따라 값을 매기지 않으므로 뉴스레터에 실려 트래픽이 몰린 랜딩 지면도 전날과 같은 값입니다. 청구서를 움직이는 숫자는 등록한 호스트네임 개수입니다. 출시 뒤에도 스테이징 주소를 켜 둔 프로젝트는 둘을 내고 있습니다.

트래픽이나 캠페인 개수에 따라 값이 오르는 타이머 도구와 비교하고 있다면, 대안 비교 섹션 에서 값이 표시된 비교를 볼 수 있습니다.

카운트다운은 얼마나 남았는지만 말한다

카운트다운만 두면 설명 없이 숫자만 보입니다. 대부분의 출시 지면에서는 그 숫자가 무엇을 뜻하는지 알려 주는 바와 짝을 이룹니다. 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 에 닿은 뒤에도 뜻이 통하는 유일한 부분입니다.