웹사이트에 시계를 넣으세요
스타일을 고르고, 시간대를 정하고, 코드 한 줄을 복사하면 끝입니다. 시계는 iframe 안에서 돌아가므로 페이지의 CSS나 스크립트를 건드리지 않습니다. 가입도 설치도 필요 없습니다.
플립 카드
숫자만
넣는 방법
- 1
코드 복사
위의 버튼을 사용하세요. 평범한 HTML이라 빌드 도구도, 설치할 패키지도 없습니다.
- 2
페이지에 붙여넣기
원본 HTML을 쓸 수 있는 곳이면 어디든 됩니다. 사용자 정의 HTML 블록, 코드 블록, 테마 템플릿 파일 등.
- 3
저장하고 새로고침
시계가 바로 나타납니다. 따로 설정할 것도, 나중에 업데이트할 것도 없습니다.
사용 가능한 플랫폼
사용자 정의 HTML 블록을 쓰거나 텍스트 위젯에 붙여넣으세요.
페이지에 Code Block을 추가하고 그 안에 붙여넣으세요.
/embed를 입력한 뒤 코드 전체가 아니라 iframe 주소만 붙여넣으세요.
페이지를 느리게 만들지 않는 시계 위젯
대부분의 시계 위젯은 JavaScript 라이브러리와 웹 폰트를 불러오고, 외부 서버에 요청까지 한 번 보냅니다. 이 위젯은 HTML 파일 하나뿐이고, 압축하면 약 5 KB이며 스타일과 로직이 모두 인라인으로 들어 있습니다. iframe으로 로드되기 때문에 페이지의 CSS를 바꿀 수도, 스크립트를 막을 수도, 방문자가 입력한 내용을 읽을 수도 없습니다.
스타일은 두 가지입니다. 플립 카드는 옛 기차역 출발 안내판 같은 분할 플랩 표시를 재현하며, 각 숫자가 그림자와 함께 앞으로 넘어갑니다. 숫자만 스타일은 카드를 없애고 큰 등폭 숫자로 보여 주어 글 페이지와 대시보드에 더 잘 어울립니다. 둘 다 같은 기준으로 확대·축소되므로 서로 바꿔도 레이아웃이 밀리지 않습니다.
시간대는 원하는 IANA 이름으로 고정할 수도 있고 방문자의 현지 시간을 따르게 할 수도 있습니다. 서머타임은 브라우저에 내장된 시간대 데이터가 처리하므로, Europe/London으로 설정한 시계는 영국 서머타임 전환을 그대로 따라갑니다. 저희 쪽에서 갱신할 것은 없습니다.
이 임베드는 무료이며 계속 무료입니다. iframe 안에 계정도, 워터마크도 없습니다.
자주 묻는 질문
이 시계 위젯은 정말 무료인가요?+
네. 계정도 결제도 워터마크도 없고, 몇 개를 넣든 제한이 없습니다. 시계 아래 링크만 남겨 주시면 충분합니다.
Clockhub 링크를 꼭 남겨야 하나요?+
강제하지 않으며 지워도 시계는 작동합니다. 다만 이 프로젝트의 수입원이 이것 하나뿐이라 남겨 주시길 부탁드립니다. 복사하는 코드에 이미 포함되어 있습니다.
iframe 때문에 페이지가 느려지지 않나요?+
임베드 전체가 압축해서 약 5 KB로 사진 한 장보다 작습니다. 게다가 loading="lazy"가 지정되어 있어 화면 근처로 스크롤되기 전에는 브라우저가 불러오지 않습니다.
WordPress, Squarespace, Notion에서도 되나요?+
WordPress와 Squarespace는 됩니다. 사용자 정의 HTML 블록이나 Code Block에 붙여넣으세요. Notion은 방식이 달라 HTML이 아니라 URL을 넣기 때문에, /embed 블록에는 iframe 주소만 붙여넣습니다. 이 경우 저작자 표시 링크는 나타나지 않습니다.
다른 시간대를 보여 줄 수 있나요?+
네. 설정 화면에서 시간대를 고르면 코드에 tz 파라미터가 들어갑니다. Asia/Seoul이나 America/New_York처럼 IANA 이름이면 무엇이든 됩니다.
방문자 기기의 시계가 틀려도 정확한 시간이 나오나요?+
아니요. 방문자 기기의 시간을 읽어 선택한 시간대로 환산하기 때문에, 기기 시계가 틀리면 표시도 틀립니다. 정확한 시간을 받으려면 페이지를 불러올 때마다 서버에 요청해야 하는데, 5 KB라는 가벼움을 지키려고 일부러 그렇게 하지 않았습니다.