웹사이트에 카운트다운을 삽입하는 방법
Blogger, WordPress, Drupal 또는 이와 유사한 콘텐츠 관리 또는 블로그 소프트웨어를 사용하는 경우, embed 코드를 붙여넣을 때 반드시 HTML 모드에서 콘텐츠를 편집해야 합니다.
CountingDownTo.com의 카운트다운을 삽입하는 것은 YouTube.com과 같은 웹사이트에서 동영상을 삽입하는 것과 매우 비슷합니다.
- 카운트다운을 여세요. 새로 만들려면 페이지 상단 메뉴에서 웹사이트 카운트다운을 클릭하세요. 이전에 만든 카운트다운을 찾으려면 오른쪽 위의 계정 아이콘(사람 모양 아이콘)을 클릭한 다음 내 카운트다운을 클릭하세요.
- 카운트다운 아래의 삽입을 클릭하세요.
- 버튼 아래에 표시되는 코드를 복사하세요. 코드 옆에 Copy 버튼이 있으면 대신 그 버튼을 클릭해도 됩니다.
- 웹사이트나 블로그에서 카운트다운을 표시할 위치에 코드를 붙여넣으세요.
Notion과 Google Sites에는 코드 대신 링크가 필요합니다. 편집기는 코드 아래에 이 링크를 표시합니다. Canva에는 카운트다운의 공유 링크가 필요합니다. 이전 편집기에서는 먼저 공유를 클릭하여 공유 링크를 받으세요. 새 편집기에서는 Notion 및 Google Sites 링크 아래에 공유 링크가 표시됩니다.
이 페이지의 지침을 따랐지만 여전히 카운트다운을 삽입할 수 없다면 문의해 주세요.
어떤 플랫폼에서 실시간 카운트다운을 삽입할 수 있나요?
사용자 지정 HTML이나 iframe URL을 붙여넣을 수 있는 대부분의 사이트에서는 카운트다운이 실시간으로 표시되고 작동합니다. 일부 페이지 빌더 및 디자인 도구는 iframe을 완전히 차단합니다. 저희가 직접 확인한 내용은 다음과 같습니다. Canvas와 Schoology 행은 이 플랫폼의 많은 강의 사이트에서 카운트다운이 로드되는 것을 보여 주는 저희 로그와, Canvas의 경우 공식 가이드를 근거로 합니다:
| 플랫폼 | 실시간 카운트다운? | 참고 |
|---|---|---|
| WordPress (자체 호스팅) | 예 | 블록 편집기에서 Custom HTML 블록을 추가하고 embed 코드를 붙여넣으세요. |
| WordPress.com | 플랜에 따라 다름 | 무료 플랜은 iframe을 제거합니다. 유료 플랜에서는 사용자 지정 HTML이 작동하려면 "hosting features"를 활성화해야 합니다. 자세히 보기. |
| Squarespace | 예 (Core 플랜 이상) | Code 블록을 추가하고 embed 코드를 붙여넣으세요. Core 플랜 이상, 또는 이전 Business나 Commerce 플랜이 필요합니다. |
| Wix | 예 | 요소 추가 → Embed Code → Popular Embeds → Embed HTML을 사용하세요. 카운트다운이 잘리거나 스크롤바가 생기지 않도록 iframe의 너비와 높이를 카운트다운에 맞추세요. |
| Google Sites | 예 |
Insert → Embed를 사용하세요. Embed code
탭에 embed 코드를 붙여넣거나, By URL
탭에 embed 코드의 src="..."
안에 있는 주소를 붙여넣으세요. 주소가 .js로 끝나면 .js를 빼세요.
|
| Shopify | 예 (주의사항 있음) | 테마의 Custom Liquid 섹션을 사용하세요. 상품 설명 편집기는 테마에 따라 embed 코드를 유지하지 않으므로 상품 페이지에서도 Custom Liquid 섹션을 사용하세요. |
| Notion | 예 |
/embed을 입력하고 embed 코드의 src="..."
안에 있는 주소를 붙여넣으세요 (공유 링크가 아님). 주소가 .js로 끝나면 .js를 빼세요.
|
| Canva | 예, 온라인으로 볼 때 | Embed 앱을 추가하고 카운트다운의 공유 링크를 붙여넣으세요. 다운로드한 이미지, PDF, 동영상에서는 움직이는 카운트다운을 표시할 수 없습니다. |
| Canvas | 예 | Rich Content Editor에서 Insert → Embed를 선택하고 embed 코드를 붙여넣은 뒤 Submit을 클릭하고 페이지를 저장하세요. 이 단계는 Canvas 강사용 가이드에 나온 내용입니다. |
| Schoology | 예 (단계 미검증) | Schoology 사이트에서 카운트다운이 표시되지만 단계는 저희가 직접 검증하지 않았습니다. 편집기의 HTML 보기에서 embed 코드를 붙여넣으세요. |
| Blogger, Drupal, Weebly, Joomla! | 예 | embed 코드를 사용자 지정/원시 HTML로 붙여넣으세요 — 아래 플랫폼별 지침을 참조하세요. |
| Facebook, WhatsApp, YouTube | 아니요 | 이 플랫폼에서는 타사 iframe embed를 허용하지 않습니다. 대신 게시된 카운트다운 페이지 링크를 공유하세요. |
| 이메일 클라이언트 | 아니요 (GIF 사용) | 이메일 클라이언트는 iframe을 차단합니다. 대신 이메일 GIF 카운트다운을 사용하세요. |
WordPress에 카운트다운 삽입
자체 호스팅 WordPress: 블록 편집기에서 Custom HTML 블록(+ → "Custom HTML" 검색)을 추가하고 제공된 embed 코드를 붙여넣으세요. 블록 미리보기에 카운트다운이 보이지 않으면 게시된 페이지에서 확인하세요.
WordPress.com: 무료 WordPress.com 사이트는 iframe을 지원하지 않습니다 (자세히 보기). 유료 플랜에서는 Custom HTML 블록이 iframe을 렌더링하려면 hosting features를 먼저 활성화해야 합니다.
클래식 편집기 사용자: 이전 Visual/Text 편집기를 사용하는 경우, 붙여넣기 전에 Text (Visual이 아님)를 선택하세요.
Squarespace에 카운트다운 삽입
Squarespace는 사용자 지정 코드를 embed하려면 Core 플랜 이상, 또는 이전 Business나 Commerce 플랜이 필요합니다. 페이지를 편집하고 +를 클릭하여 블록을 추가한 다음 Code를 검색하고 Code 블록에 embed 코드를 붙여넣으세요. 저장하고 미리보기하세요. 게시된 페이지에서 카운트다운이 실시간으로 작동해야 합니다.
Wix에 카운트다운 삽입
Wix 편집기에서 요소 추가 → Embed Code → Popular Embeds → Embed HTML을 클릭하세요. Enter Code를 클릭하고 embed 코드를 붙여넣은 다음 Apply를 클릭하세요.
중요 — iframe 크기:
카운트다운이 잘리거나 스크롤바가 표시되면 embed 요소 설정을 열고 embed 코드의 크기에 맞게 너비와 높이를 설정하세요 (일반적으로
<iframe>
태그와 동일한 너비와 높이). Wix는 embed된 iframe 크기를 항상 자동으로 맞추지는 않습니다.
짧은 동영상 보기 — Wix에 카운트다운을 추가하는 방법.
Google Sites에 카운트다운 삽입
사이트 편집 중 Insert
→ Embed를 클릭하세요. Embed code
탭에서 제공된 embed 코드를 붙여넣으세요. 또는 By URL
탭에서 카운트다운의 embed 링크, 즉 embed 코드의 src="..."
안에 있는 주소를 붙여넣으세요. 주소가 .js로 끝나면 .js를 빼세요.
그런 다음 페이지에서 embed 상자 크기를 조정하여 전체 카운트다운이 보이도록 하세요.
Shopify에 카운트다운 삽입
테마의 Custom Liquid 섹션에 embed 코드를 추가하세요(온라인 스토어 → 테마 → 사용자 지정 → 섹션 추가). 배치한 페이지에서 카운트다운이 실시간으로 표시됩니다.
상품 설명: 상품 설명 편집기는 테마에 따라 embed 코드를 유지하지 않습니다. 대신 상품 페이지 템플릿에 Custom Liquid 섹션을 추가하세요.
Notion에 카운트다운 삽입
Notion 페이지에서 /embed을 입력하고 Enter를 누르세요. 카운트다운의 embed 링크를 붙여넣고 확인하세요. Notion에는 카운트다운만 표시되며 실시간으로 작동합니다.
embed 링크는 embed 코드의 src="..."
안에 있는 주소입니다. 예: https://countingdownto.com/w4/abc123
또는 https://w2.countingdownto.com/1234567. 코드가 script 태그라면 끝의 .js를 빼세요. 공유 링크나 embed 코드 전체를 붙여넣지 마세요. 블록 가장자리를 드래그하면 크기를 조정할 수 있습니다.
Canva에 카운트다운 삽입
Canva는 온라인으로 보는 디자인과 Canva 웹사이트에서 실시간 카운트다운을 표시할 수 있습니다. Canva 편집기에서 앱을 열고 Embed를 선택한 다음, 카운트다운의 공유 링크를 붙여넣으세요.
새 편집기로 만든 카운트다운 대신 정지된 미리보기 이미지가 보이면 그 embed 링크를 붙여넣으세요. embed 링크는 embed 코드의
src="..."
안에 있는 주소입니다. 이전 편집기로 만든 카운트다운은 공유 링크를 사용하세요. 그 embed 링크(w2.countingdownto.com)는 Canva에서 작동하지 않습니다. 다운로드한 이미지, PDF, 동영상에서는 움직이는 카운트다운을 보여 줄 수 없습니다.
Blogger에 카운트다운 삽입
게시물 편집기에서 embed 코드를 붙여넣기 전에 Compose view에서 HTML view로 전환하세요. 게시물을 편집하는 동안에는 카운트다운이 표시되지 않습니다. 게시하거나 미리보기할 때만 표시됩니다.
Drupal에 카운트다운 삽입
본문 필드 아래의 Text format 목록에서 Full HTML을 선택한 다음 embed 코드를 붙여넣으세요. 페이지를 편집하는 동안에는 카운트다운이 표시되지 않습니다. 페이지를 저장하거나 미리보기할 때만 표시됩니다.
Weebly에 카운트다운 삽입
Embed Code 요소를 페이지로 드래그하고 클릭한 다음 embed 코드를 붙여넣으세요. 카운트다운을 보려면 사이트를 게시하세요.
Joomla!에 카운트다운 삽입
기사 편집기 아래의 Toggle Editor를 클릭하여 일반 HTML을 편집하는 상태로 바꾼 다음, embed 코드를 붙여넣고 저장하세요.
Joomla의 기본 TinyMCE 편집기는 저장 시 iframe 태그를 제거할 수 있습니다. 카운트다운이 표시되지 않으면 편집기를 끈 상태에서 Custom 모듈에 embed 코드를 붙여넣거나, 사이트 관리자에게 TinyMCE 플러그인 설정에서 iframe을 허용해 달라고 요청하세요.
iframe embed를 지원하지 않는 플랫폼
다음 플랫폼은 어떤 embed 코드를 사용하더라도 실시간 iframe 카운트다운을 표시할 수 없습니다:
- Facebook — 대신 게시된 카운트다운 페이지 링크를 공유하세요.
- WhatsApp — 링크를 공유하세요. WhatsApp은 embed HTML을 렌더링하지 않습니다.
- YouTube — YouTube 채널 페이지 및 동영상 설명은 타사 iframe을 지원하지 않습니다.
- 이메일 클라이언트: Gmail, Outlook, Mailchimp 및 기타 이메일 앱은 보안상 iframe을 차단합니다. 대신 이메일 카운트다운을 사용하세요. 대부분의 이메일 앱에서 표시되는 애니메이션 이미지를 만듭니다.
이메일 카운트다운 삽입
이메일 앱은 iframe을 차단하므로 이메일 카운트다운은 애니메이션 GIF 이미지입니다. 이메일 카운트다운 페이지에서 만들고 내 이메일에 추가를 클릭하여 코드를 받으세요. Mailchimp, Constant Contact, AWeber, Kit (ConvertKit) 같은 이메일 마케팅 도구에서는 HTML 블록이나 코드 블록에 코드를 붙여넣으세요. Gmail이나 다른 개인 이메일 계정에서 카운트다운을 보내려면 같은 페이지의 이 카운트다운을 이메일로 보내기를 사용하고 받은 이메일을 전달하세요.
Kajabi를 사용하시나요? Kajabi 카운트다운 타이머 가이드를 참고하세요.
이미지는 불러온 순간의 남은 시간을 보여 줍니다. 일부 이메일 앱은 이미지를 미리 불러오므로 이전 시간이 표시될 수 있습니다. 날짜는 이메일 본문에도 적어 두세요.