시간을 전압처럼 보여주는 시계

디지털 시계는 정확하지만 시간이 움직인다는 느낌은 조금 약합니다. 반대로 오래된 전압계는 바늘 하나만 움직여도 작은 기계가 살아 있는 것처럼 보입니다. 시간을 전압처럼 보여주면 어떨까 싶어 브라우저 안에 시계를 만들었습니다.

세 가지 모습

기본 화면에는 시·분·초를 가리키는 계기판이 나란히 놓여 있습니다. 바늘이 부드럽게 움직이는 모습과 1초씩 끊어지는 모습을 바꿔볼 수 있습니다.

물시계 화면에서는 투명한 통 안의 물이 차오르며 시간을 보여줍니다. 시간이 넘어갈 때 물이 다음 통으로 이동하는 짧은 장면도 볼 수 있습니다. 기다리지 않아도 시험 버튼으로 움직임을 확인할 수 있게 했습니다.

도트 화면은 조금 더 장난스럽습니다. 작은 공방 안에서 바늘이 움직이고, 안쪽의 관리인이 상황에 따라 다른 반응을 보입니다. 오래 켜두면 가끔 예상하지 못한 장면이 나옵니다.

같은 시간을 서로 다른 값으로 바꾸기

세 화면이 읽는 원본은 모두 방문자 기기의 현재 시각입니다. 달라지는 것은 시간을 화면의 위치와 움직임으로 바꾸는 방법입니다.

• 전압계는 시·분·초를 각 다이얼의 범위로 나눈 뒤, 바늘이 움직일 104도 안의 각도로 환산합니다. 분침에는 현재 초를, 시침에는 현재 분을 조금씩 더해 부드럽게 이어지게 했습니다.
• 물시계는 시·분·초를 24·60·60으로 나눈 비율만큼 탱크를 채웁니다. 분과 시간이 바뀌는 순간에는 물이 다음 장치로 이동하는 장면을 덧붙였습니다.
• 도트 공방은 같은 비율을 계기와 캐릭터의 상태로 바꿉니다. 정확한 숫자보다 시간이 흐르고 있다는 분위기를 보여주는 화면입니다.

예를 들어 초가 30이라면 초 탱크는 절반 차고, 초 전압계 바늘도 이동 범위의 가운데를 가리킵니다. 표현은 달라도 입력과 비율은 같습니다.

계산은 각 단위의 최댓값으로 나눈 비율 하나에서 시작합니다.

비율 = 현재 값 / 단위의 전체 범위
바늘 각도 = 시작 각도 + 비율 × 104°
물 높이 = 비율 × 탱크의 표시 높이

부드러운 시침은 정수 시각만 쓰지 않습니다. 예를 들어 3시 30분이면 3 / 12가 아니라 3.5 / 12를 사용해 3과 4의 정확한 가운데를 가리킵니다. 분침도 현재 초를 더해 같은 방식으로 이어집니다. ‘1초씩’ 모드에서는 이 보간을 빼서 실제 계기판처럼 눈금마다 끊어지게 했습니다.

바늘 각도는 한 줄로 정해집니다

전압계는 한 바퀴를 도는 시계가 아닙니다. 실제 아날로그 계기처럼 왼쪽 끝에서 오른쪽 끝까지 부채꼴로만 움직입니다. 이 데모가 쓰는 구간은 104도이고, 계산은 이 한 줄이 전부입니다.

바늘 각도 = -52° + (현재 값 ÷ 그 단위의 최댓값) × 104°

-52°가 왼쪽 끝, +52°가 오른쪽 끝입니다. 초 다이얼(최댓값 60)에 넣어 보면 이렇게 나옵니다.

지금 초	비율	바늘 각도
0초	0.00	−52° (왼쪽 끝)
15초	0.25	−26°
30초	0.50	0° (정중앙)
45초	0.75	+26°
59초	0.98	+50.3°

30초에 정확히 가운데를 가리키는 이유가 세 번째 줄입니다. 데모를 열어 두고 초바늘이 한가운데를 지나는 순간을 보면 이 표가 그대로 확인됩니다.

뚝뚝 끊기지 않게 하려면 소수를 넣습니다

여기까지만 하면 바늘이 1초마다 계단처럼 점프합니다. 부드럽게 하려면 아직 다 안 지난 시간까지 소수로 넣어 줍니다. 분 다이얼에 현재 초를, 시 다이얼에 현재 분을 더하는 식입니다.

3시 30분일 때
  정수만 쓰면   3   ÷ 12  → 3시 눈금에 딱 붙음
  소수를 쓰면   3.5 ÷ 12  → 3시와 4시의 정확한 가운데

1초씩 모드는 이 소수를 일부러 빼서 실제 계기판처럼 눈금마다 끊기게 만든 것입니다. 두 모드를 번갈아 누르면 같은 입력이 어떻게 달라 보이는지 바로 비교할 수 있습니다.

화면은 보통 초당 60번 다시 그립니다. 프레임 사이 간격이 약 16.7ms라서 사람 눈에는 연속으로 흐르는 것처럼 보입니다.

실제 물시계와 다른 점

물 화면은 물의 유량으로 시간을 측정하는 물리 시뮬레이션이 아닙니다. 브라우저 시각을 먼저 읽고, 그 값을 물 높이와 흐름 애니메이션으로 다시 그린 시각적 은유입니다. 탱크 모양, 파이프 길이, 물결 속도에는 실제 유체의 압력이나 유량 계산이 들어 있지 않습니다.

따라서 이 화면으로 기기의 시계가 정확한지 검증할 수는 없습니다. 기기 시간이 틀리면 세 화면도 똑같이 틀린 시간을 표시합니다. 브라우저 탭이 백그라운드에 있을 때 애니메이션이 잠시 느려져도, 다시 보이는 순간 현재 시각을 읽어 화면을 맞춥니다.

브라우저에서 그린 방법

아날로그 계기는 눈금과 바늘을 SVG로 만들고, 물시계와 도트 공방은 Canvas에 매 프레임 다시 그립니다. 복잡한 장면을 동영상으로 재생하는 대신 현재 시각에서 필요한 화면을 계산하므로 파일을 내려받거나 서버에 시간을 보낼 필요가 없습니다.

움직임이 불편한 사용자를 위해 운영체제의 동작 줄이기 설정을 확인해 물결과 기포 같은 반복 효과를 줄입니다. 이 배려가 왜 필요한지는 W3C 의 애니메이션 지침에 설명돼 있습니다. 계기에는 현재 값을 읽을 수 있는 접근성 설명을 붙였고, 마지막으로 선택한 화면과 바늘 동작 방식만 브라우저 저장소에 기억합니다.

브라우저 안에서만 흐르는 시간

현재 시각은 방문자의 기기에서 읽습니다. 별도 권한이나 계정은 필요하지 않고, 마지막으로 고른 화면만 브라우저에 기억해둡니다.

위의 데모 열어보기에서 같은 시간이 서로 다른 물건처럼 보이는 모습을 확인할 수 있습니다.

초침이 튀지 않게 만드는 값

부드럽게 도는 바늘을 만들려면 화면을 얼마나 자주 갱신해야 하는지부터 정해야 합니다. 이 시계는 시각을 50 밀리초마다 다시 읽습니다. 초당 20 번인데, 이 값이 어디서 나왔는지 적어 둡니다.

초침이 한 바퀴 도는 데 60 초가 걸리므로 1 초에 6 도씩 움직입니다. 갱신 간격이 50 밀리초면 한 번에 0.3 도씩 도는 셈입니다. 지름이 300 픽셀인 계기에서 0.3 도는 바늘 끝이 1 픽셀 조금 못 되게 움직이는 거리라, 사람 눈에는 이어진 움직임으로 보입니다.

간격을 더 줄여도 화면에 보이는 차이는 거의 없고 배터리만 더 씁니다. 반대로 간격을 늘리면 어느 지점부터 바늘이 한 칸씩 건너뛰는 것이 보이기 시작합니다. 눈이 구분하지 못하는 지점 바로 앞까지만 자주 그리는 것이 이런 화면에서 비용을 줄이는 방법입니다.

숫자와 날짜 표시는 이 주기를 따르지 않습니다. 어차피 1 초에 한 번만 바뀌는 값이라 같은 주기로 다시 그리면 아무 소득 없이 작업만 늘어납니다. 그래서 부드러워야 하는 부분과 아닌 부분을 나눠 각자 다른 주기로 갱신합니다.

직접 비교해 볼 것

1. 초가 30에 가까울 때 전압계와 물 탱크가 모두 절반 부근인지 봅니다.
2. 부드러운 움직임과 1초씩 움직임을 바꿔 같은 입력이 다른 리듬으로 표현되는지 비교합니다.
3. 동작 줄이기를 켠 환경에서는 물결·기포 같은 반복 장식이 줄어드는지 확인합니다.
4. 다른 탭에 다녀온 뒤에도 누적 프레임 수가 아니라 현재 시각으로 다시 맞춰지는지 봅니다.

브라우저는 보이지 않는 탭의 애니메이션 호출을 늦추거나 멈출 수 있습니다. 그래서 프레임마다 1초를 더하는 방식이 아니라, 화면을 그릴 때마다 기기의 현재 시각을 새로 읽습니다. 탭이 잠들었다가 돌아와도 시간이 밀리지 않는 이유입니다.