카운트다운 블록
출시, 세일, 마감일을 위한 실시간으로 카운트되는 타이머입니다 — 서버 측에서 애니메이션 GIF로 렌더링되며, Outlook을 포함한 모든 주요 이메일 클라이언트에서 실제로 계속 카운트다운을 이어갈 수 있는 유일한 기법입니다.
작동 방식
CSS 애니메이션이나 자바스크립트로 시계를 처음부터 애니메이션할 만큼 신뢰성 있게 실행하는 이메일 클라이언트는 없으므로, 카운트다운 블록은 그런 시도를 하지 않습니다: 대신 서버에서 렌더링된 애니메이션 GIF를 가리키는 일반 <img>를 삽입합니다. 요청이 들어올 때마다 MailInApp은 설정된 마감일까지 남은 시간을 계산해 "DD:HH:MM:SS" 형식의 디지털시계 이미지를 처음부터 새로 인코딩합니다(래핑된 라이브러리가 아니라 처음부터 직접 만든 GIF89a 인코더입니다). 프레임당 1초씩 60프레임을 그린 다음 마지막 프레임에서 멈추므로, 이미지는 열린 후 1분 동안은 눈에 보이게 카운트되다가 이후 멈춥니다. 이미지는 발송 시점에 한 번 미리 렌더링되는 것이 아니라 요청 시점에 실제 마감일로부터 다시 생성되므로, 수신자가 언제, 몇 번을 열든 정확합니다. 엔드포인트는 no-cache 헤더도 함께 보내므로, Gmail 같은 이미지 프록시도 오래된 캐시 프레임을 재사용하지 않고 열람할 때마다 다시 가져옵니다.
이미지 URL 자체는 HMAC 서명되어 있어(마감일 타임스탬프와 색상이 서명 안에 담겨 있습니다), MailInApp이 아닌 누구도 이를 독립형 GIF 카운트다운 렌더러로 이용할 수 없습니다. 엔드포인트는 인터랙션 및 열람 추적 엔드포인트와 마찬가지로 공개되어 있지만, 서명 요청받은 내용만 제공합니다.
캐러셀이나 아코디언처럼 메일과 라이브 뷰가 갈라지는 지점이 없습니다 — 두 맥락 모두 동일한 이미지 엔드포인트를 삽입합니다. 메일은 절대 URL을 사용하고(이메일에는 상대 경로를 풀어낼 페이지 원점이 없습니다), 라이브 뷰는 원점 상대 URL을 사용합니다.
이미지 자체를 넘어서는 별도의 "폴백 티어"도 없습니다. GIF를 애니메이션할 수 없는 클라이언트도 첫 프레임은 표시합니다 — 이는 자리 표시자가 아니라 남은 시간을 보여주는 의미 있고 정확한 스냅샷입니다. 블록의 대체 텍스트와 이메일의 일반 텍스트 파트 모두 같은 남은 시간을 문장으로 담고 있으므로(예: "제안 마감까지 2일 4시간"), 이미지를 완전히 꺼두어도 마감일은 그대로 읽힙니다.
마감일이 지나면 블록은 더 이상 GIF를 렌더링하지 않고 일반 텍스트의 종료 상태로 전환됩니다 — 더 이상의 이미지 요청도, 오래된 "00:00:00:00"이 남아 있는 일도 없습니다.
설정 가능한 필드:
- 라벨 — 카운트되는 이미지 위에 표시되는 텍스트입니다. 예: "혜택 마감까지".
- 마감 시각 — 날짜와 시간으로 지정하는 마감일입니다.
- 색상 — 숫자/텍스트 색상으로, 렌더링된 GIF와 종료 상태 텍스트 양쪽에 사용됩니다.
- 글꼴 크기(px) — 카운트다운 중일 때 라벨의 글꼴 크기입니다.
- 종료 후 글꼴 크기(px) — 마감일이 지난 후 표시되는 "이 혜택은 종료되었습니다" 메시지의 글꼴 크기입니다.
카운트다운은 이미지나 텍스트 블록처럼 순수한 콘텐츠입니다 — 탭하거나 제출할 것이 없으므로 인터랙션 이벤트를 절대 생성하지 않으며, 응답 대시보드, CSV 내보내기, 프로젝트 웹훅에 절대 나타나지 않습니다.
예시
Subject
Our biggest sale of the year starts now
24시간 마감을 가진 플래시 세일 이메일이 대표적인 사용 사례입니다: 눈에 보이게 카운트다운되는 것 자체가 한눈에 긴박감을 전달합니다. 수신자가 이메일이 도착한 지 1분 만에 열든, 세일이 이미 끝난 이틀 후에 열든 정확성은 그대로 유지되며, 후자의 경우 얼어붙은 거짓 정보 대신 올바르게 종료 상태를 보여줍니다. 한정 재고 상품 출시는 상품 블록과 카운트다운을 함께 배치해 시계와 재고 수 양쪽이 함께 긴박감을 전달하도록 할 수 있습니다. 전체 패턴은 이커머스 & 상품 출시를 참고하세요. 행사 등록 리마인더는 행사 자체가 아니라 등록 마감일까지 카운트다운할 수 있습니다(행사 자체는 캘린더에 추가의 몫입니다) — 마감이 다가올수록 망설이는 사람들을 행동하게 만듭니다.
정적 폴백의 모습
<div style="margin:12px 0">
<p style="margin:0 0 6px;font-size:16px;font-weight:700;color:#111827">Offer ends in</p>
<img
src="https://mailinapp.com/api/countdown?t=1753401600000&c=111827&s=9f2a...&"
width="207" height="34"
alt="Offer ends in 2d 4h"
style="display:block;max-width:100%;height:auto"
>
</div>
이를 넘어서는 별도의 "폴백 마크업"은 없습니다: 모든 클라이언트가 동일한 <img> 태그를 렌더링합니다. 다른 점은 그 클라이언트가 GIF를 애니메이션하는지(대부분 그렇습니다) 아니면 첫 프레임에서 멈추는지(일부 구형 클라이언트)뿐이며, 두 경우 모두 정확한 남은 시간을 보여줍니다.