조회수를 세는 카운트다운 위젯과 세지 않는 위젯

움직이는 부품은 이게 전부다

마감 시각이 고정된 카운트다운은 지면에 인쇄할 수 있을 만큼 작습니다. 아래 코드는 목표를 읽고, 1초에 한 번 돌고, 남은 시간을 일·시·분·초로 적고, 0 이 되면 문구를 남긴 뒤 스스로 멈춥니다. 돈을 받는 위젯이 이보다 더 잘 세지는 못하는데, 더 잘 세는 방법이 없기 때문입니다.

const end = Date.parse("2026-12-31T23:59:59+09:00"); // offset on purpose, see below
const el = document.getElementById("countdown");

function tick() {
  const left = end - Date.now();
  if (left <= 0) {
    el.textContent = "The sale has ended!";
    return;
  }
  const s = Math.floor(left / 1000);
  const parts = [Math.floor(s / 86400), Math.floor(s / 3600) % 24, Math.floor(s / 60) % 60, s % 60];
  el.textContent = parts.map((n) => String(n).padStart(2, "0")).join(":");
  setTimeout(tick, 1000);
}

tick();

함정이 든 줄은 첫 줄뿐입니다. 저 문자열에는 오프셋이 붙어 있어서, 모든 방문자가 같은 순간이 오는 것을 봅니다. 오프셋을 빼면 브라우저는 그것을 방문자 시계의 시각으로 읽으니, 신년 세일이 서울과 런던에서 아홉 시간 어긋나 끝나고도 아무도 버그로 신고하지 않습니다. 각자에게는 멀쩡해 보였으니까요.

마흔 줄로 안 되는 순간은 셋이다

직접 쓰는 쪽이 결벽증은 아니고, 유효 기간이 있는 판단입니다. 뒤집히는 자리는 이렇습니다.

• 배포하지 않는 사람이 날짜를 쥔다. 출시를 이틀 미루는 마케터가 그 일로 pull request 와 빌드와 캐시 비우기를 거칠 필요는 없습니다. 코드보다 날짜가 더 자주 바뀌는 순간부터 나는 관리 화면을 유지보수하는 중이고, 그게 모든 카운트다운 제품에서 값이 비싼 절반입니다.
• 지면 열두 곳에 들어가야 한다. 한 곳이면 스크립트 태그입니다. 마감이 열두 개인 지면 열두 곳은 데이터 모델이고, 벤더가 이미 만들어 둔 것보다 나쁜 모델을 새로 짓게 됩니다.
• 테마 업데이트를 넘겨야 한다. Shopify 에서 테마 파일에 넣은 수정은 테마가 올라갈 때 내가 다시 넣는 몫입니다. Wix 나 Squarespace 같은 빌더에서는 지면 안 HTML 임베드가 샌드박스에 들어가는 일이 흔해서, 내 스크립트가 애초에 내 도메인에서 돌지 않습니다. 템플릿에 붙여넣은 코드는 나중에 다시 붙여넣을 코드입니다.

조용한 네 번째가 하나 더 있습니다. 세는 일 말고 카운트다운이 하는 나머지 전부입니다. 반복, 방문자별 타이머, 대상 지정, 0 이 된 뒤 내용 바꿔 넣기, 누가 봤는지 아는 일. 하나하나는 작습니다. 합쳐 놓으면 그게 제품입니다.

청구서를 정하는 질문: 이 벤더는 조회수를 세는가

Elfsight 가 가장 깔끔한 사례인데, 그 원리를 숨기지 않고 문서에 적어 두었기 때문입니다. 도움말 센터가 단위를 이렇게 정의합니다. "A view is counted each time someone loads the page with your widget." 상호작용도 아니고 화면에 들어온 노출도 아닙니다. 지면 로드입니다. 사이트 공통 헤더에 타이머를 하나 두면 사이트가 받는 모든 페이지뷰에 값이 붙습니다.

무너지는 방식도 문서에 있고, 이 축이 어떤 기능보다 중요한 이유가 그것입니다. "If you exceed the view limit, the widget on your website will be deactivated. It will no longer be visible to your site visitors, appearing as though it was never installed." 이 문장을 내가 실제로 원하는 상황 옆에 놓고 읽어 보세요. 예상보다 훨씬 많은 트래픽이 몰린 출시 지면입니다. 허용량은 그 앱의 위젯 전부와 내 웹사이트 전부에 걸쳐 함께 쓰이고, 한 지면에 둘을 두면 두 번 세어집니다. 랜딩 지면에서 터진 카운트다운은 조회수로 값을 받기에 가장 나쁜 물건에 가깝습니다. 효과가 나는 순간 값이 오르고, 상한이 토요일에 도착하면 그 지면을 끌고 가던 시계가 조용히 사라집니다.

확인한 시점의 Elfsight Single App 사다리는 무료 구간 조회 200 에서 시작해 5,000, 50,000, 150,000, 300,000, 600,000, 1.2M 을 지나 최상위 Enterprise 에서 무제한으로 끝났습니다. Essential 의 Shopify 앱도 조회를 셉니다(무료 1,000, 그다음 10,000, 50,000, 최상위 무제한). Common Ninja 의 Shopify 리스팅도 셉니다(무료 300, 그다음 2,000, 100,000, 3M). 이 둘은 상한에 닿았을 때 어떻게 되는지를 적지 않았으니, Elfsight 처럼 동작한다고 단정하지도, 그러지 않는다고 단정하지도 마세요.

반대쪽에는 Hextom 의 리스팅과 Common Ninja 직판 플랜이 있습니다. 조회 상한을 아예 공개하지 않습니다. Common Ninja 는 글로 못박아 두었습니다. "Unlimited monthly pageviews on every paid plan, no view caps or throttling." 같은 문장에 정반대의 셈이 붙은 셈이고, Common Ninja 가 어느 문으로 들어가느냐에 따라 두 모델을 다 판다는 사실은 알아 둘 값이 있습니다.

POWR 는 예외이고 한 단락이 필요합니다. 자기 카운트다운 앱 지면과 요금 지면에서 파는 플랜에는 조회나 노출 수치가 어디에도 없고, 아래 표의 그 행이 그렇게 적힌 이유가 그것입니다. 다만 POWR 도움말 센터의 한 문서는 두 번째 모델을 페이지뷰로 값을 매겨 팝니다. 월 250 무료, 그다음 2,500 에서 50,000 까지 구간이 이어지고, 결과는 이렇게 적혀 있습니다. "If you reach your pageviews limit, your app will be hidden on your website." 이 모델에는 주의 세 가지가 함께 붙고, 그 문서에 닿은 페이지뷰 상한 비교 지면이 셋을 다 들고 있습니다. 이 모델의 1차 출처가 그 문서 하나뿐이고, POWR 의 라이브 요금 데이터에는 페이지뷰 구간이 없으며, 새 고객이 지금도 그 플랜을 살 수 있는지는 확인되지 않았습니다. 그래도 분명해지는 것이 하나 있습니다. 두 모델 중 어느 쪽에 올라타는지 묻지 않고 POWR 를 정액으로 분류할 수는 없습니다.

판을 가르는 축에 놓고 본 후보들

다시 시작하는 타이머: 다들 팔고, 아무도 주의를 달지 않는다

여기 나오는 벤더는 전부 다시 시작하는 타이머를 팝니다. POWR 는 "Automatically Repeat Timer" 와 "Countdown Timer per Visitor", "Countdown Number per Visitor" 를 유료 등급 뒤에 둡니다. Hextom 은 "one-time, auto-recurring, daily & weekly timer" 를 내걸고 일간·주간·반복 타이머를 Premium 에 넣습니다. Elfsight 는 그 모드를 Personal Countdown 이라 부르는데, 방문자마다 따로 도는 타이머가 방문을 넘겨서도 계속 흐릅니다. 템플릿 지면 한 곳에서는 상시적인 희소성 심리를 만든다는 이야기까지 합니다. Essential 은 예약 타이머와 반복 타이머를 Starter 등급부터 줍니다.

판정이 아니라 그냥 관찰로 적어 둘 것이 있습니다. 살펴본 벤더 지면 중 그 기능들 옆에 속이는 급함을 두고 주의나 안내를 단 곳은 한 곳도 없었습니다. 그게 문제인지는 각자의 판단이고 각자의 관할 법입니다. 기계적인 쪽은 더 단순합니다. 방문자별 타이머는 브라우저 저장소에 사니, 그걸 지우거나 사생활 보호 창을 여는 방문자는 새 마감을 받습니다. 그러니 그건 실은 마감이 아닙니다. BootSignal 카운트다운은 시각 하나를 받아 거기까지 세고, 그 지면을 보는 모든 사람이 같은 숫자를 봅니다.

정액을 설치하는 쪽에서 보면

저것을 만드는 것은 두 줄입니다. 지면에 한 번 올라가서 앞으로 추가하는 모든 위젯을 돌리는 로더, 그리고 시계가 놓일 자리의 마운트 요소. 카운트다운은 thread id 를 받지 않는데, 지면별로 저장하는 것이 없기 때문입니다.

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

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

호스팅형 위젯은 남의 CDN 에 요청을 한 번 보내는 일이고 아닌 척하면 반칙이니, 저 로더 태그의 성질 두 가지를 적어 둡니다. defer 를 달고 있어서 렌더를 붙잡지 않고, 위젯을 몇 개 얹든 스크립트는 하나로 남습니다. 위젯마다 태그가 하나씩 붙지 않습니다. 위쪽의 마흔 줄은 요청을 아예 늘리지 않으니, 세게 튜닝하는 랜딩 지면에 그 코드를 남겨 두는 편이 온당한 선택일 수 있습니다.

직접 쓰면 손으로 짜야 하는 꾸미기는 속성으로 끝납니다. 밝게·어둡게는 data-theme, 숫자를 내 색과 맞추는 강조색은 CSS 색을 아무거나 받는 data-accent, 화면 언어는 한국어·영어·일본어·중국어 간체·중국어 번체를 받는 data-lang 입니다. 만료 뒤 이야기의 답은 data-expired 입니다. 요소가 사라져 레이아웃이 튀는 대신 숫자 자리가 그 문구로 바뀝니다. 값은 등록 도메인 하나에 월 $20 또는 연 $200, 모든 위젯 포함이고 도메인을 더 쓰려면 대시보드에서 따로 추가합니다. 트래픽이 튀어도 청구서에는 나타나지 않고, 시계를 끌 수도 없습니다.

Shopify 는 다른 진열대이고, 보이는 것보다 좁다

마감이 제품 지면에 놓일 자리라면 플랫폼 앱은 시계가 아니라 놓이는 자리로 값을 합니다. Essential 은 제품 지면, 상단 바, 랜딩 지면, 장바구니, 이메일 타이머를 덮고, 중간 등급에서 지역 타게팅과 태그 기반 타게팅을 더하며, 살펴본 것 중 공개된 실적이 가장 두텁습니다. 리뷰 1,607건에 5.0 입니다. Hextom 은 같은 생각의 더 싼 모양입니다. 등급 둘, 계량기 없음, Premium 에서 활성 바 무제한, 그리고 별도 데이터베이스가 아니라 Shopify Markets 에 물린 지역 타게팅입니다. 둘 다 Shopify 를 통해 청구되니 두 번째 벤더 계정이 생기지 않습니다.

내주는 것은 뻔합니다. 둘 중 어느 것도 WordPress, Webflow, Squarespace, 순수 HTML 사이트에는 도움이 되지 않으니, 스토어에 마케팅 사이트까지 있으면 두 번 사게 됩니다. Essential 은 최상위 전까지 조회를 세고, Hextom 은 아예 세지 않습니다. 그리고 이건 전수 조사가 아니라 짧은 후보 목록으로 보세요. Shopify 카운트다운 범주는 훨씬 넓고, 이 둘은 살아 있고 리뷰가 많은 대표로 골랐습니다. 스토어 설치 절차는 Shopify 카운트다운 위젯 가이드에, 빌더 쪽 대응은 Webflow 카운트다운 위젯 가이드에 있습니다.

5분쯤 걸리는 결정

1. 마감 하나, 지면 하나, 그리고 배포할 수 있는 사람이 나. 마흔 줄을 쓰고 시각에 오프셋을 넣으면 끝이고, 그건 내 것입니다.
2. 날짜를 쥔 사람이 따로 있다. 에디터를 사는 겁니다. 그게 값을 치르는 대상이니 숫자가 아니라 관리 화면을 저울에 올리세요.
3. 트래픽이 얼마나 올지 모르겠다. 계량기가 붙은 쪽을 후보에서 빼거나, 무제한 등급 값을 지금 계산하고 싼 등급은 없는 것으로 여기세요.
4. 스토어이고 제품 지면과 상단 바에 함께 놓고 싶다. Shopify 앱에서 시작하세요. 거기서는 놓이는 자리가 진짜 제품입니다.
5. 카운트다운이 이 사이트의 세 번째나 네 번째 위젯이다. 카운트다운 값 계산은 그만두고 합계를 계산하세요. 앱마다 붙는 등급은 빠르게 쌓이고, 묶음 상품과 통합 구독이 존재하는 이유가 그것입니다.

어느 쪽으로 가든, 카드를 꺼내기 전에 벤더 지면에서 읽어 둘 것이 넷입니다. 비교표가 정확히 뭉개 버리는 항목들이기 때문입니다. 그 벤더가 조회 1회를 어떻게 정의하는지, 상한에 닿으면 무슨 일이 생기는지, 화면의 값이 프로모션인지, 벤더 브랜딩을 지우는 것이 유료 기능인지. 이 지면의 순서를 바꾼 것은 기능 목록이 아니라 이 네 가지 답이었습니다.