[R.N] 아날로그 시계만들기

 

React Native 아날로그 시계 애니메이션 구현기 (RN Animated API)

React Native + TypeScript로 “아날로그 시계(시·분·초침 + 숫자 + 센터 점)”를 직접 그려서 애니메이션까지 완성한 기록.
깃허브 커밋 타임라인을 그대로 정리하고, 핵심 구현 아이디어와 수학식을 간단히 메모.

 

https://github.com/heesangs/Analog-Clock-Animation

GitHub - heesangs/Analog-Clock-Animation: tutorial

 

1) 무엇을, 왜 만들었나

• 완성 결과: 실시간 시계 애니메이션
  • 시·분·초침이 현재 시간에 맞춰 부드럽게 회전
  • 1~12 숫자 다이얼 표시
  • 하단에 디지털 시계(AM/PM) 표기
• why? : 시간관련 앱을 기획 디자인 하고 있는데 실제 프로그래밍을 하면 얼마나 어려울지 테스트 삼아 제작해봤다. 
• 함께한 AI들 : 커서(메인-클루드4.5), GPT, Gemini, Claude4.5,  + 유튜브 무료 강좌 (바이브코딩 아님)

2) 결과 미리보기 (추가 예정 섹션

3) 기술 스택 & 구조

 

• 언어/런타임: TypeScript, React Native (CLI) 
• 폴더 포인트: animation/AnalogClock.tsx 내 시계 렌더 및 애니메이션 로직 집중.
• 최종 커밋에서 Animated API 사용과 디지털 시계 상태 관리(useState) 확인. 

 

4) 핵심 구현 아이디어

4-1. 각도 계산 (필수 수학식)

• 시침: hours % 12 기준 30° 단위 + 분 보정 0.5°/분
• 분침: 6°/분 + 초 보정 0.1°/초
• 초침: 6°/초

 

실제 코드에서도 같은 공식으로 hourDeg, minuteDeg, secondDeg를 계산해 Animated 값에 주입합니다. 

 

4-2. Animated API 운용

• useRef(new Animated.Value(0))로 각 침별 회전 상태를 보관
• Animated.timing(... { duration: 500, easing: Easing.linear, useNativeDriver: true }) 로 부드럽게 갱신
• transform에 rotate: ${deg}deg`` 적용 (침 뷰에 스타일 바인딩)
• 상단 setDigitalTime으로 AM/PM 디지털 표기까지 동기 업데이트 

 

4-3. 페이스 구성 요소

• 숫자 다이얼(1~12): 전용 렌더 함수(renderNumber) 추가 커밋으로 분리 관리. 
• 센터 점(Center Dot): 별도 커밋에서 중앙 포인트 추가로 디자인 완성도 보강. 

5) 커밋 내용 정리 (타임라인)

 

2025-10-12 — Complete analog clock

 

• Animated API로 시·분·초침 회전 완성, 디지털 시간(AM/PM) 표기 포함
• animation/AnalogClock.tsx 대거 업데이트(+124/-4) 

 

2025-10-12 — Add renderNumber

 

• 시계 숫자(1~12) 렌더 전용 함수 추가로 페이스 가독성 향상 

 

2025-10-11 — Add Center Dot

 

• 중앙 점 추가로 시각적 기준점 확보 

 

2025-10-10 — Add analog clock animation

 

• Animated 기반 회전 애니메이션 초안 도입(침별 Animated.Value / rotate 적용 시작) 

 

2025-10-10 — Initial commit

 

• RN CLI 템플릿으로 프로젝트 셋업(기본 App, iOS/Android 네이티브 구성) 

 

6) 마치며 (간단 회고)

 

이 프로젝트는 “숫자·눈금·침을 전부 벡터로 직접 그려서 시간의 진행을 애니메이션으로 전달한다”는 점이 핵심.

Animated의 timing + rotate 조합만으로도 충분히 자연스러운 결과를 낼 수 있고, 작은 델타(분/초 보정)만 더해도 아날로그 특유의 미세한 움직임을 재현할 수 있었습니다. 다음 단계에서는 눈금 디테일과 Reanimated/Skia 기반의 매끄러운 스위핑을 시도해볼 예정.