시간을 전압처럼 보여주는 시계
브라우저의 같은 현재 시각을 아날로그 전압계, 물의 흐름, 도트 공방으로 다르게 표현했습니다. 시각을 각도와 높이로 바꾸는 방법과 실제 물시계가 아닌 시각적 은유라는 한계를 설명합니다.
목차
디지털 시계는 정확하지만 시간이 움직인다는 느낌은 조금 약합니다. 반대로 오래된 전압계는 바늘 하나만 움직여도 작은 기계가 살아 있는 것처럼 보입니다. 시간을 전압처럼 보여주면 어떨까 싶어 브라우저 안에 시계를 만들었습니다.
세 가지 모습
기본 화면에는 시·분·초를 가리키는 계기판이 나란히 놓여 있습니다. 바늘이 부드럽게 움직이는 모습과 1초씩 끊어지는 모습을 바꿔볼 수 있습니다.
물시계 화면에서는 투명한 통 안의 물이 차오르며 시간을 보여줍니다. 시간이 넘어갈 때 물이 다음 통으로 이동하는 짧은 장면도 볼 수 있습니다. 기다리지 않아도 시험 버튼으로 움직임을 확인할 수 있게 했습니다.
도트 화면은 조금 더 장난스럽습니다. 작은 공방 안에서 바늘이 움직이고, 안쪽의 관리인이 상황에 따라 다른 반응을 보입니다. 오래 켜두면 가끔 예상하지 못한 장면이 나옵니다.
같은 시간을 서로 다른 값으로 바꾸기
세 화면이 읽는 원본은 모두 방문자 기기의 현재 시각입니다. 달라지는 것은 시간을 화면의 위치와 움직임으로 바꾸는 방법입니다.
- 전압계는 시·분·초를 각 다이얼의 범위로 나눈 뒤, 바늘이 움직일 104도 안의 각도로 환산합니다. 분침에는 현재 초를, 시침에는 현재 분을 조금씩 더해 부드럽게 이어지게 했습니다.
- 물시계는 시·분·초를 24·60·60으로 나눈 비율만큼 탱크를 채웁니다. 분과 시간이 바뀌는 순간에는 물이 다음 장치로 이동하는 장면을 덧붙였습니다.
- 도트 공방은 같은 비율을 계기와 캐릭터의 상태로 바꿉니다. 정확한 숫자보다 시간이 흐르고 있다는 분위기를 보여주는 화면입니다.
예를 들어 초가 30이라면 초 탱크는 절반 차고, 초 전압계 바늘도 이동 범위의 가운데를 가리킵니다. 표현은 달라도 입력과 비율은 같습니다.
계산은 각 단위의 최댓값으로 나눈 비율 하나에서 시작합니다.
비율 = 현재 값 / 단위의 전체 범위
바늘 각도 = 시작 각도 + 비율 × 104°
물 높이 = 비율 × 탱크의 표시 높이부드러운 시침은 정수 시각만 쓰지 않습니다. 예를 들어 3시 30분이면 3 / 12가
아니라 3.5 / 12를 사용해 3과 4의 정확한 가운데를 가리킵니다. 분침도 현재 초를
더해 같은 방식으로 이어집니다. ‘1초씩’ 모드에서는 이 보간을 빼서 실제 계기판처럼
눈금마다 끊어지게 했습니다.
실제 물시계와 다른 점
물 화면은 물의 유량으로 시간을 측정하는 물리 시뮬레이션이 아닙니다. 브라우저 시각을 먼저 읽고, 그 값을 물 높이와 흐름 애니메이션으로 다시 그린 시각적 은유입니다. 탱크 모양, 파이프 길이, 물결 속도에는 실제 유체의 압력이나 유량 계산이 들어 있지 않습니다.
따라서 이 화면으로 기기의 시계가 정확한지 검증할 수는 없습니다. 기기 시간이 틀리면 세 화면도 똑같이 틀린 시간을 표시합니다. 브라우저 탭이 백그라운드에 있을 때 애니메이션이 잠시 느려져도, 다시 보이는 순간 현재 시각을 읽어 화면을 맞춥니다.
브라우저에서 그린 방법
아날로그 계기는 눈금과 바늘을 SVG로 만들고, 물시계와 도트 공방은 Canvas에 매 프레임 다시 그립니다. 복잡한 장면을 동영상으로 재생하는 대신 현재 시각에서 필요한 화면을 계산하므로 파일을 내려받거나 서버에 시간을 보낼 필요가 없습니다.
움직임이 불편한 사용자를 위해 운영체제의 동작 줄이기 설정을 확인해 물결과 기포 같은 반복 효과를 줄입니다. 계기에는 현재 값을 읽을 수 있는 접근성 설명을 붙였고, 마지막으로 선택한 화면과 바늘 동작 방식만 브라우저 저장소에 기억합니다.
브라우저 안에서만 흐르는 시간
현재 시각은 방문자의 기기에서 읽습니다. 별도 권한이나 계정은 필요하지 않고, 마지막으로 고른 화면만 브라우저에 기억해둡니다.
위의 데모 열어보기에서 같은 시간이 서로 다른 물건처럼 보이는 모습을 확인할 수 있습니다.
직접 비교해 볼 것
- 초가 30에 가까울 때 전압계와 물 탱크가 모두 절반 부근인지 봅니다.
- 부드러운 움직임과 1초씩 움직임을 바꿔 같은 입력이 다른 리듬으로 표현되는지 비교합니다.
- 동작 줄이기를 켠 환경에서는 물결·기포 같은 반복 장식이 줄어드는지 확인합니다.
- 다른 탭에 다녀온 뒤에도 누적 프레임 수가 아니라 현재 시각으로 다시 맞춰지는지 봅니다.
브라우저는 보이지 않는 탭의 애니메이션 호출을 늦추거나 멈출 수 있습니다. 그래서 프레임마다 1초를 더하는 방식이 아니라, 화면을 그릴 때마다 기기의 현재 시각을 새로 읽습니다. 탭이 잠들었다가 돌아와도 시간이 밀리지 않는 이유입니다.
