# 디지털 시계 디자인 컬렉션 > Clean Markdown view of GeekNews topic #31504. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=31504](https://news.hada.io/topic?id=31504) - GeekNews Markdown: [https://news.hada.io/topic/31504.md](https://news.hada.io/topic/31504.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-07-17T06:33:31+09:00 - Updated: 2026-07-17T06:33:31+09:00 - Original source: [clocks.dev](https://clocks.dev) - Points: 1 - Comments: 1 ## Topic Body - **Clocks.dev**는 현재 시각과 날짜를 다양한 방식으로 표현한 디지털 시계 디자인을 한곳에서 탐색할 수 있는 사이트임 - 기하학적 형태, 숫자 배열, 단어 조합, 시곗바늘, 원형 다이얼, LCD 등 서로 다른 **시각 표현 방식**을 비교해 볼 수 있음 - `All time`, `This week`, `Newest` 기준으로 디자인을 살펴보고, **새 시계 디자인**도 직접 만들 수 있음 - `number-field`, `word-field`, `binary-signal`, `swiss-railway`, `corner-date`처럼 이름에서 표현 방식이나 스타일이 드러나는 시계가 포함됨 - 등록된 **모든 시계가 오픈소스**여서 디자인 감상은 물론 구현 아이디어를 참고하는 데도 활용할 수 있음 --- ### 다양한 시간 표현 탐색 - [Clocks.dev](https://clocks.dev/)는 여러 디지털 시계 디자인을 모아 제공함 - `All time`, `This week`, `Newest` 필터로 목록을 탐색할 수 있으며, [Create new clock](https://clocks.dev/create)에서 새 시계를 만들 수 있음 - ## 형태와 시곗바늘 - [geometric-proof](https://clocks.dev/clock/geometric-proof): 기하학적 형태를 활용함 - [three-lines](https://clocks.dev/clock/three-lines): 세 개의 선으로 시계를 구성함 - [precision-dial](https://clocks.dev/clock/precision-dial): 정밀 다이얼 형태를 사용함 - [figure-hands](https://clocks.dev/clock/figure-hands), [veiled-hands](https://clocks.dev/clock/veiled-hands), [floating-hands](https://clocks.dev/clock/floating-hands): 시곗바늘을 각기 다른 방식으로 표현함 - [minimal-disc](https://clocks.dev/clock/minimal-disc), [radial-field](https://clocks.dev/clock/radial-field): 원형을 기반으로 시간을 나타냄 - ## 숫자와 단어 - [binary-signal](https://clocks.dev/clock/binary-signal): 이진 신호를 이용한 디자인임 - [number-field](https://clocks.dev/clock/number-field): 1~12와 1~60의 **숫자 필드**로 시간을 구성함 - [word-field](https://clocks.dev/clock/word-field): `FIVE`, `TEN`, `QUARTER`, `HALF`, `PAST`, `TO` 등의 **단어 조합**으로 시간을 표시함 - [mint-rounded](https://clocks.dev/clock/mint-rounded), [lock-screen](https://clocks.dev/clock/lock-screen), [second-tilt](https://clocks.dev/clock/second-tilt): 숫자 기반의 시각 표시를 서로 다른 스타일로 구성함 - ## 날짜와 부가 정보 - [day-mood](https://clocks.dev/clock/day-mood): `It’s slow evening o’clock 22°`처럼 시간대와 온도를 문장으로 표시함 - [corner-date](https://clocks.dev/clock/corner-date), [orbit-date](https://clocks.dev/clock/orbit-date): 날짜를 시각과 함께 보여줌 - [색상 시계](https://clocks.dev/clock/f01669caf9ec): 하루 86,400초를 16,777,216개 색상 가운데 하나와 연결해 현재 색상 코드를 표시함 - [Galactic Standard Time](https://clocks.dev/clock/7a020b0fa4b6): 구역·트랙 정보와 함께 시각을 나타냄 - [Digital Quartz LCD](https://clocks.dev/clock/c0cd68836a80): `1983`, 요일, `24H`, 알람·신호·조명·시작 표시를 포함한 **디지털 LCD** 스타일임 - ## 개별 콘셉트 - [temporal-exposure](https://clocks.dev/clock/temporal-exposure): 시간의 노출을 이름으로 삼은 디자인임 - [swiss-railway](https://clocks.dev/clock/swiss-railway): Swiss Railway 스타일을 적용함 ### 오픈소스와 제작자 - 등록된 모든 시계는 **오픈소스**로 제공됨 - 사이트는 [Lev Miseri](https://x.com/miserilev)가 제작함 ## Comments ### Comment 61932 - Author: neo - Created: 2026-07-17T06:33:32+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=48923380) - 재미로 **아날로그 시계들로 구성된 디지털 시계**를 만들어 봤음: [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를 뜻한다면 전반적인 스타일을 개선할 여지가 큼 **두 가지 색상과 서로 다른 크기**, 더 적절한 글꼴을 사용하면 나아질 듯함