플립 시계

플립 시계는 20세기 중반의 클래식 기계식 플립 시계에서 영감을 받은 카드 전환 애니메이션으로 시간을 표시하는 디지털 시계입니다. 이 상징적인 시계들은 독특한 시각적 매력과 향수적인 매력으로 인기를 끌었으며, 물리적으로 뒤집히는 카드를 사용하여 변화하는 숫자를 표시했습니다.

이 도구는 각 자릿수가 변경될 때마다 사실적인 페이지 넘김 애니메이션으로 클래식 플립 시계 효과를 완벽하게 재현합니다. 다운로드 없이 브라우저에서 직접 실행되며, 전체 화면 모드, 12/24시간 형식 전환, 선택적 초 표시 기능을 갖추고 있습니다.

용도: 데스크 시계, 사무실 장식, 라이브 스트리밍 배경, 프레젠테이션 타이머, 포모도로 기법, 대형 화면 등. 모든 시간 계산은 로컬에서 수행되어 개인정보를 보호합니다.

각 자릿수 카드는 현재 값을 표시하는 상단 절반과 다음 값을 표시하는 하단 절반으로 분리되며, X축을 중심으로 0deg에서 -180deg까지 회전하는 세 번째 절대 위치 레이어가 있습니다. 부모 요소에 perspective: 600px이 적용되어 회전이 수직 축소가 아닌 3D 깊이감으로 인식되고, 회전 레이어에 backface-visibility: hidden이 설정되어 거울상의 뒷면이 비치지 않습니다. will-change: transform이 설정되면 브라우저가 해당 레이어를 자체 합성 표면으로 승격하므로, 매 프레임마다 텍스트를 다시 그리는 대신 GPU에서 플립이 실행됩니다.

시간 자체는 Unix 에포크 이후 밀리초 단위의 Date.now()에서 가져오지만, 단순한 setInterval(fn, 1000)은 타이머가 최선 effort 스케줄링으로 실행되어 누적 편차가 발생합니다. 대신 다음 틱을 1000 - (Date.now() % 1000)으로 계산하여 실제 시계의 초 경계에 정확히 맞추고, requestAnimationFrame으로 플립 전환을 처리하므로 탭이 포커스를 잃거나 모니터가 절전 상태일 때 애니메이션이 자동으로 일시정지됩니다. Page Visibility API(document.visibilityState)가 visibilitychange 이벤트에서 표시 자릿수를 재동기화하므로, 사용자가 몇 분 후 돌아왔을 때 오래된 값이 표시되는 것을 방지합니다.

표시 형식은 hourCycle 옵션('h23'은 24시간제, 'h12'는 오전/오후 12시간제)과 함께 Intl.DateTimeFormat에서 브라우저 로케일을 읽어옵니다. 일광 절약 시간 전환은 getHours() 같은 Date 메서드가 이미 오프셋 시프트를 포함한 로컬 시간을 반환하므로 암묵적으로 처리되어, 봄에는 02:00에서 03:00으로 건너뛰고 가을에는 01:00이 두 번 표시됩니다.