바늘의 충돌과 물탱크의 연쇄 작동으로 시간의 경계를 보여줍니다.
BROWSER TIME INSTRUMENT · NO SERVER REQUIRED
빈티지 볼트메터 시계
전압계 바늘, 흐르는 물, 살아 있는 도트 공방으로 현재 시간을 관찰하세요. 같은 시각이 전혀 다른 세 가지 장치로 움직입니다.
--:--:--시간 장치 준비 중
CALIBRATING TIME VOLTAGE…
현재 기기의 시각만 사용하며 어떤 정보도 서버로 전송하지 않습니다.
시간대와 바늘 조합에 따라 관리인의 행동과 공방 조명이 달라집니다.
이 데모에 대하여
같은 시각을 세 가지 장치로
전압계 바늘, 물탱크, 도트 공방이 모두 같은 시각을 가리킵니다. 다른 것은 시간을 무엇으로 바꿔 보여주는가뿐입니다.
- ANALOG · WATER · DOT 중 장치를 고릅니다. 고른 장치는 브라우저에 저장돼 다음에 열 때도 그대로입니다.
- FULL SCREEN을 누르면 화면 전체가 시계가 됩니다.
- EVENT TEST를 누르면 특정 시간대에만 나오는 연출을 기다리지 않고 바로 볼 수 있습니다.
이 시계가 동작하는 방식
01
기기 시각을 그대로 씁니다.
서버에 시간을 물어보지 않고, 브라우저가 알려주는 이 기기의 시각을 50밀리초마다 읽어 그립니다. 날짜 표기는 Intl.DateTimeFormat으로 한국어 형식에 맞춥니다. 그래서 기기 시계가 틀어져 있으면 화면도 똑같이 틀어집니다.
02
시 · 분 · 초를 물리량으로 바꿉니다.
아날로그는 바늘의 각도로, 워터는 물탱크에 차오르는 높이로, 도트는 공방 안 장면으로 같은 숫자를 옮깁니다. 초가 넘어가는 순간이 눈에 보이도록 장치마다 다른 방식으로 경계를 표현합니다.
03
움직임을 줄일 수 있습니다.
수력식과 도트 화면은 requestAnimationFrame으로 canvas를 그리고, 부드러운 아날로그 바늘만 50밀리초 간격으로 시각을 갱신합니다. 다른 화면의 글자와 React 구성은 초 단위로만 갱신해 불필요한 작업을 줄였습니다. 운영체제에서 ‘동작 줄이기’를 켜 두면(prefers-reduced-motion) 이를 감지해 움직임을 줄입니다.
정밀 시계가 아닙니다.
이 페이지는 표준시에 맞추는 시간 동기화(NTP)를 하지 않고 기기 시각을 그대로 보여주는 장식용 시계입니다. 정확한 시각이 필요한 일에는 쓰지 마세요. 어떤 정보도 서버로 보내지 않으며, 마지막으로 고른 장치만 브라우저 로컬 저장소에 남고 사이트 데이터 삭제로 지울 수 있습니다. 밝은 화면을 전체화면으로 오래 켜 두면 전지가 빨리 닳습니다.
참고 자료MDN — Intl.DateTimeFormat ↗MDN — Fullscreen API ↗MDN — prefers-reduced-motion ↗
실험을 마쳤다면