웹페이지에 플립 시계 임베드하기: iframe 하나면 충분하다

어떤 웹사이트에든 붙여 넣을 수 있는 코드입니다. 붙여 넣으면 그 페이지에 실제로 움직이는 플립 시계가 생깁니다.

플러그인 설치도, 테마 파일 수정도, 계정 가입도, 결제도 필요 없습니다.

아래에서는 네 가지를 다룹니다. 추가하는 방법, 스타일의 종류, 쓸 만한 상황, 내 사이트에 어울리게 만드는 방법입니다.

I. 3분 만에 사이트에 추가하기

먼저 임베드 생성기를 엽니다. 왼쪽에서 스타일, 시간대, 색상을 고르면 오른쪽 미리보기가 바로 바뀝니다. 마음에 들면 "코드 보기"를 눌러 복사합니다.

그다음 사이트에 붙여 넣습니다. 붙이는 위치는 플랫폼마다 다릅니다.

저장하고 새로 고치면 시계가 나옵니다.

자주 막히는 지점이 몇 군데 있습니다. WordPress 클래식 편집기는 "비주얼"이 아니라 "텍스트" 모드여야 합니다. Elementor 같은 페이지 빌더에는 "HTML" 위젯이 있습니다. Notion은 주소만 받기 때문에 시계 아래의 작은 출처 링크는 나타나지 않습니다.

II. 두 가지 스타일 중 고르기

왼쪽이 플립, 오른쪽이 숫자만. 둘 다 진짜이고, 둘 다 움직이고 있습니다.

플립은 옛 기차역과 공항의 출발 안내판을 흉내 냅니다. 숫자마다 가로 이음매로 위아래가 갈라져 있고, 숫자가 바뀔 때 위쪽 절반이 앞으로 넘어갑니다. 존재감이 있어서 페이지 상단, 이벤트 페이지, 사람들의 시선을 끌고 싶은 곳에 어울립니다.

숫자만은 큰 글씨 한 줄입니다. 조용하고 읽기 쉬워서 사이드바, 글 중간, 대시보드에 맞습니다. 시계를 감상하는 게 아니라 시간을 읽는 자리입니다.

한마디로, 시계 자체가 장식이면 플립, 시간만 보이면 숫자만입니다.

자주 쓰는 크기는 세 가지입니다.

이보다 좁게 주면 시계 전체가 축소됩니다. 잘리지는 않지만 글씨가 작아집니다.

III. 어떤 상황에 쓸 수 있나

같은 코드, 네 가지 상황. 색과 크기만 다르고 코드 차이는 매개변수 몇 개뿐입니다.

이벤트 페이지. 발표회, 개업, 결혼식 초대, 연말 페이지. 움직이는 시계는 정지 화면보다 무게가 있습니다.

영업시간. 카페, 식당, 작업실 사이트라면 "평일 9:00–18:00"이라고 적는 것보다 현지 시각을 보여주는 시계가 직관적입니다. 지금 문을 열었는지 한눈에 보입니다.

원격 팀. 대시보드에 고객사 도시의 시계를 두면 회의 전에 시차를 암산하지 않아도 됩니다.

포트폴리오와 개인 블로그. 작게 움직이는 요소는 비용이 거의 없는데 페이지가 템플릿처럼 보이지 않게 됩니다.

랜딩 페이지와 제품 페이지. 푸터나 구석에. 내용을 방해하지 않으면서 페이지가 살아 있는 느낌을 줍니다.

안 맞는 경우는 카운트다운이 필요한 곳입니다. "공개까지 3일"은 이 시계가 하는 일이 아닙니다. 보여주는 것은 현재 시각이지 남은 시간이 아닙니다.

IV. 사이트 색에 맞추기

기본값에는 배경이 없습니다. 투명합니다. 그래서 마치 원래 그 자리에 있던 것처럼 페이지에 얹힙니다. 흰 판때기도, 검은 구멍도 생기지 않습니다.

하지만 투명하다는 것은 페이지가 무슨 색인지 모른다는 뜻이기도 합니다. 밝은 페이지라면 기본 라이트 테마가 맞지만, 어두운 페이지라면 알려줘야 합니다.

방법은 두 가지.

하나, 테마. 생성기에서 "다크" 또는 "라이트"를 고르면 됩니다. 맞춰 놓은 두 벌의 색이고, 바꾸는 것은 클릭 한 번입니다.

둘, 직접 색 지정. 매개변수 세 개.

• bg — 전체 배경. 기본값은 투명
• card — 플립 카드의 색
• ink — 숫자의 색

카드를 호박색으로 바꿨습니다. 뒤의 어두운 판은 이 글의 것이고 시계의 것이 아닙니다. 시계 자체는 배경을 갖지 않습니다.

생성기에 색상 선택기가 있어서 매개변수 이름을 외우지 않고 클릭만으로 됩니다.

V. 시간과 내용

시간대. 기본값은 방문자 컴퓨터의 시간을 보여줍니다. 도시에 고정하려면 도시 이름을 씁니다. Asia/Tokyo, Europe/London, America/New_York 같은 식입니다. 서머타임도 자동으로 따라가므로 일 년에 두 번 손댈 필요가 없습니다.

12시간제인지 24시간제인지. 숫자 하나만 바꾸면 됩니다. format=12 또는 format=24.

초. 초가 계속 움직이는 게 산만하면 끄면 됩니다.

날짜와 도시 이름. 숫자만 스타일에만 있습니다. 날짜 줄을 넣거나 "TOKYO" 같은 도시 라벨을 붙일 수 있습니다.

클릭 시 이동. 기본값에서는 시계를 클릭하면 Clockhub가 열립니다. 방문자를 페이지에 붙잡아 두고 싶으면 끄면 됩니다.

모두 생성기의 스위치입니다. 체크하면 코드가 저절로 바뀌므로 직접 고칠 필요가 없습니다.

VI. 사이트가 느려지지 않나

웹페이지에 들어가는 보통 사진은 200KB 안팎. 이 시계는 3.6KB입니다.

느려지지 않습니다.

압축하면 3.6KB, 요청은 하나입니다. 비교하자면 웹페이지의 보통 사진이 200KB 정도이니, 이 시계는 그 56분의 1이 안 됩니다.

React도, 웹폰트도, 아이콘 라이브러리도 불러오지 않습니다. 글꼴은 기기에 원래 있는 것(애플 SD 고딕 네오, 맑은 고딕, Helvetica)을 쓰므로 내려받을 것이 없습니다.

게다가 기본이 지연 로딩입니다. 방문자가 그 위치까지 스크롤하지 않으면 아예 불러오지 않습니다.

유일하게 늘어나는 것은 분석 스크립트인데, 얼마나 많은 사이트가 쓰는지 알기 위한 것입니다. 페이지가 한가해진 뒤에 시작하므로 콘텐츠와 대역폭을 뺏지 않습니다. 로컬 미리보기에서는 보내지 않습니다.

VII. 자주 묻는 질문

유료인가요? 가입해야 하나요?

아닙니다. 계정도, 워터마크도, "프로로 업그레이드"도 없습니다.

광고가 들어가나요?

시계에 광고는 없고 팝업도 없습니다. ClockHub 본사이트는 광고로 운영하지만, 임베드된 시계에는 광고를 넣지 않습니다.

모바일에서 깨지지 않나요?

깨지지 않습니다. 지정한 틀에 맞춰 자동으로 확대·축소되므로 세로든 가로든 잘리지 않고 채워집니다.

한 페이지에 여러 개 놓을 수 있나요?

얼마든지 놓을 수 있습니다. 각각 다른 시간대로 지정해도 됩니다. 도쿄·런던·뉴욕을 나란히 둔 팀 페이지는 흔한 사용법입니다.

다른 플랫폼에서도 되나요?

HTML이나 iframe을 넣을 수 있는 플랫폼이면 됩니다. 위 표에 대표적인 것들을 적었습니다. 주소만 받는 경우(Notion 등)에는 코드 전체가 아니라 주소만 붙여 넣으세요.

표시되는 시간이 제 컴퓨터와 달라요.

시간대 매개변수를 확인하세요. 지정하지 않으면 방문자의 현지 시간, 지정하면 그 도시의 시간으로 고정됩니다.

SEO에 나쁜가요?

아닙니다. iframe 안의 내용은 내 페이지 내용으로 집계되지 않습니다. 반대로 말하면 "시간" 관련 키워드를 이것으로 보강하려고 생각하지 마세요. 페이지를 느리게 만들지도 않습니다. 3.6KB에 지연 로딩입니다.

상업적으로 써도 되나요?

됩니다. 개인 사이트도 상업 사이트도, 신청도 출처 표시도 필요 없습니다.

코드 끝에는 기본으로 작은 "Clockhub" 링크가 붙습니다. 남기기 싫으면 그 줄을 지우세요. 시계는 그대로 작동합니다.

VIII. 코드 받으러 가기

위의 시계들은 모두 진짜이고 스크린샷이 아닙니다. 곧 받게 될 파일과 한 글자도 다르지 않은 것이 돌아가고 있습니다.

임베드 생성기로 가세요. 스타일과 시간대를 고르고 색을 조정하면 코드가 만들어집니다. 복사해서 붙이면 끝. 1분도 걸리지 않습니다.

시간 말고도 설정 서랍, 글꼴, 음력, 전체 화면까지 원한다면 사이트 안의 플립 시계입니다. 더 완전하지만 남의 페이지로 이사할 수는 없습니다.

임베드하는 쪽은 한 가지만 합니다. 당신 페이지 구석에서 조용히, 1초에 한 번 넘길 뿐입니다.