빈티지 볼트메터 시계

01

기기 시각을 그대로 씁니다.

서버에 시간을 물어보지 않고, 브라우저가 알려주는 이 기기의 시각을 50밀리초마다 읽어 그립니다. 날짜 표기는 Intl.DateTimeFormat으로 한국어 형식에 맞춥니다. 그래서 기기 시계가 틀어져 있으면 화면도 똑같이 틀어집니다.

02

시 · 분 · 초를 물리량으로 바꿉니다.

아날로그는 바늘의 각도로, 워터는 물탱크에 차오르는 높이로, 도트는 공방 안 장면으로 같은 숫자를 옮깁니다. 초가 넘어가는 순간이 눈에 보이도록 장치마다 다른 방식으로 경계를 표현합니다.

03

움직임을 줄일 수 있습니다.

수력식과 도트 화면은 requestAnimationFrame으로 canvas를 그리고, 부드러운 아날로그 바늘만 50밀리초 간격으로 시각을 갱신합니다. 다른 화면의 글자와 React 구성은 초 단위로만 갱신해 불필요한 작업을 줄였습니다. 운영체제에서 ‘동작 줄이기’를 켜 두면(prefers-reduced-motion) 이를 감지해 움직임을 줄입니다.

04

같은 값을 세 번 다르게 그립니다.

세 장치는 서로 다른 프로그램이 아니라 같은 시각 값을 받아 각자의 방식으로 표현합니다. 시간을 읽어 오는 부분과 그리는 부분을 나눠 두었기 때문에 장치를 하나 더 만들 때 시간 계산을 다시 쓸 필요가 없습니다. 화면을 바꿔도 표시되는 시각이 서로 어긋나지 않는 것도 이 구조 덕분입니다.

05

고른 장치를 기억합니다.

마지막으로 고른 장치는 브라우저에 저장해 두었다가 다음에 열 때 그대로 보여줍니다. 시계처럼 반복해서 여는 도구에서 매번 다시 고르게 하면 번거롭기 때문입니다. 저장하는 값은 이 하나뿐이고 서버로 보내지 않으며, 사이트 데이터를 지우면 함께 사라집니다.

06

연출을 기다리지 않고 확인합니다.

특정 시각에만 나타나는 장면이 있는데, 그것을 보려고 그 시각까지 기다릴 수는 없습니다. 그래서 바로 실행해 볼 수 있는 버튼을 따로 뒀습니다. 만드는 쪽에서도 확인이 필요한 기능이라 개발 중에 쓰던 장치를 그대로 화면에 남긴 것입니다.

07

표기는 지역 형식을 따릅니다.

날짜와 요일 표기는 브라우저가 제공하는 형식 기능을 써서 한국어 표기에 맞춥니다. 직접 문자열을 조립하면 자릿수나 요일 이름을 손으로 관리해야 하고 그 과정에서 어긋나기 쉽습니다. 표준 기능에 맡기면 그런 실수가 줄어듭니다.

08

그리는 방식을 나눠 씁니다.

부드럽게 움직여야 하는 부분은 화면 갱신 주기에 맞춰 그리고, 숫자와 글자처럼 초 단위로만 바뀌는 부분은 그 주기에 맞춰 갱신합니다. 전부를 가장 빠른 주기로 그리면 배터리만 쓰고 눈에 보이는 차이는 없습니다. 시계처럼 오래 켜 두는 화면에서는 이 구분이 실제로 체감됩니다.

09

장식이 목적입니다.

정확한 시각을 알려면 이미 기기에 시계가 있습니다. 이 화면이 하는 일은 같은 정보를 다른 방식으로 보여주는 것이고, 그 자체가 목적입니다. 그래서 정밀도를 높이는 대신 보는 재미와 눈에 편한 움직임을 우선했습니다.

10

전체 화면을 전제로 만들었습니다.

남는 화면을 세워 두고 시계로 쓰는 상황을 생각하며 만들었습니다. 그래서 전체 화면에서 요소가 커지고 불필요한 조작 버튼이 사라집니다. 작은 창에서 보는 것보다 그 상태에서 봐야 의도한 모양이 나옵니다.

11

서버와 통신하지 않습니다.

시각도 기기에서 읽고 그림도 브라우저에서 그리므로 어디에도 요청을 보내지 않습니다. 인터넷이 끊긴 상태에서도 동작하고 사용 기록이 남지도 않습니다. 시계 하나 보여주는 데 통신이 끼어들 이유가 없어서 처음부터 그렇게 만들었습니다. 대신 표준시와 맞추는 과정도 없으므로 기기 시계가 정확해야 화면도 정확합니다. 요즘 기기는 대부분 자동으로 맞춰지므로 실사용에서는 문제가 되지 않습니다.