디지털 시계 디자인 컬렉션

 (clocks.dev)
1P by GN⁺ | ★ favorite | 댓글 1개
  • Clocks.dev는 현재 시각과 날짜를 다양한 방식으로 표현한 디지털 시계 디자인을 한곳에서 탐색할 수 있는 사이트임
  • 기하학적 형태, 숫자 배열, 단어 조합, 시곗바늘, 원형 다이얼, LCD 등 서로 다른 시각 표현 방식을 비교해 볼 수 있음
  • All time, This week, Newest 기준으로 디자인을 살펴보고, 새 시계 디자인도 직접 만들 수 있음
  • number-field, word-field, binary-signal, swiss-railway, corner-date처럼 이름에서 표현 방식이나 스타일이 드러나는 시계가 포함됨
  • 등록된 모든 시계가 오픈소스여서 디자인 감상은 물론 구현 아이디어를 참고하는 데도 활용할 수 있음

다양한 시간 표현 탐색

오픈소스와 제작자

  • 등록된 모든 시계는 오픈소스로 제공됨
  • 사이트는 Lev Miseri가 제작함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 재미로 아날로그 시계들로 구성된 디지털 시계를 만들어 봤음: https://mikespeed.com/clock

  • AI 붐 이전에 SVG와 JavaScript로 실험적인 워치 페이스를 모두 직접 만들었음
    대단한 작품은 아닐지 몰라도, 디자이너로서 기초 코딩을 독학해 완성했다는 점이 자랑스러움: https://watchface.netlify.app/
    제작 과정도 글로 정리했음: https://72mena.medium.com/designing-watch-faces-using-svgs-a...

    • 이 작품을 보니 다시 하드웨어와 PCB 제작에 뛰어들어 벽에 걸 물건을 만들고 싶어짐
      워치 페이스가 작동하는 페이지에서 시간을 직접 입력해 모습을 확인할 수 있으면 더 좋겠음
    • Tokyoflash 디자인을 이야기하려고 들어왔는데 여기서 보니 반가움

  • HN의 시계 애호가들을 모아 옛날식 웹링을 만들어도 좋을 시점임
    Lock Screen은 속이 빈 숫자를 아래부터 물로 채워 초를 나타내는 내 Filling Digit 시계와 비슷함
    꽤 재미있는 Alphabetical Clock도 HN에서 화제가 됐으며, 웹링의 개념은 Wikipedia에서 볼 수 있음

  • 처음 사용해 본 Svelte로 Voutilainen Vingt-8 ISO를 재현해 봤음: https://clocks.dev/clock/3b254b2789ec

    • 처음 접한 개념이지만 금방 익숙해질 듯하며, 이런 손목시계를 갖고 싶어짐

  • Chrome 150.0.7871.115와 Windows에서 페이지의 약 3분의 2 지점부터 스크롤바가 사라지고 더 이상 스크롤할 수 없음

    • 지금은 수정했지만, 더 근본적인 성능 문제는 추가 조사가 필요함
    • 브라우저의 기본 스크롤 동작을 건드리는 건 웹 개발에서 큰 금기라고 봄
    • Windows 11의 Firefox 152.0.5에서도 같은 문제가 발생함

  • Number Field가 숫자 시계를 공간적으로 표현하는 가장 좋은 방식처럼 느껴짐
    완벽하려면 24시간제로 바꿔야 하지만 작은 수정에 불과하며, 12열 구조 덕분에 한눈에 대략적인 시간을 파악하기 쉬움

  • 일본식 주판을 이용한 Soroban 시계를 만들었지만 CSS 기반 애니메이션을 사용해 컬렉션에는 추가하지 못했음: https://soroban-clock.netlify.app

  • John Maeda의 12 o’clocks도 함께 볼 만함
    1996년 작품을 통해 시간이 그래픽으로 표현되는 방식을 새롭게 보게 됐으며, MoMA 소장품으로도 확인할 수 있음
    특히 부드럽게 움직이는 작품들 때문에 1초마다 멈추는 초침을 싫어하게 되어, 집 안 모든 시계의 무브먼트를 연속 초침 방식으로 교체했음

  • 이진 시계는 8의 자리 왼쪽을 일반적인 16의 자리가 아니라 10의 자리로 취급하는 듯함
    그래서 10시는 1010이 아니라 00010000으로 표시되고, 23시는 00100011이라 이진수로 해석하면 35가 되어 이상해 보임

    • 시간을 하나의 이진수로 바꾸는 게 아니라 십진수 각 자릿수를 4비트씩 변환하는 방식임
      즉 23 → 2 3 → 0010 0011 → 00100011이 됨

  • 일부 시계에는 미묘하게 어긋난 부분이 보임
    주황색 Number Field는 12:10과 10:12를 구별하기 어려워 보이고, Word Field는 사용하지 않는 문자를 X로 표시해 원본 Word Clock에서 단어가 나타날 때의 신비감이 줄어듦
    Temporal Exposure는 흐린 영역의 띠가 중심에서 벗어나 있으며, Figure Hands는 텍스트가 그림 영역 밖으로 튀어나옴

    • Number Field에서는 시간이 항상 맨 윗줄에만 놓이므로 12:10과 10:12는 서로 다르게 표시됨
    • Figure Hands를 뜻한다면 전반적인 스타일을 개선할 여지가 큼
      두 가지 색상과 서로 다른 크기, 더 적절한 글꼴을 사용하면 나아질 듯함
답변달기
GeekNews BeeBS 게시판 오픈! 자유로운 이야기와 소소한 일상을 함께 나눠보세요.