S Clock - React Native + TypeScript (Expo)

1. 프로젝트 개요

이번 프로젝트는 S Ring 앱 개발이다.
하루의 시간을 보다 직관적으로 설계하고 관리할 수 있도록 하는 것을 목표로 진행했다.

단순한 일정 관리 앱이 아니라,

• 24시간을 시각적으로 이해할 수 있고
• 입력과 확인이 빠르며
• 하루 전체 흐름을 한눈에 볼 수 있는 구조

를 만드는 데 집중했다.

기존 리스트 기반 시간표의 한계를 개선하고, 원형 다이얼 기반 UI를 통해 시간 인지를 직관적으로 만드는 것이 핵심이다.

 

 

2. 개발 배경

기존 일정 관리 방식(캘린더 앱, 투두 리스트 등)은 다음과 같은 한계가 있었다.

• 하루 흐름이 단절되어 보임
• 시간 감각이 직관적이지 않음
• 입력 과정이 다소 복잡함

특히 “하루를 설계한다”는 느낌보다는 “할 일을 나열한다”는 느낌이 강했다.

그래서 “시간 자체를 시각적으로 구조화할 수 있는 앱을 만들자”는 생각으로 S Ring 프로젝트를 시작하게 되었다.

 

 

3. 주요 기능

이번 S Ring 앱에서 구현한 핵심 기능은 다음과 같다.

1) 원형 시간표 (Ring View)

• 24시간을 이중 링(0~12 / 12~24)으로 구성
• 스케줄을 호(arc) 형태로 시각화
• 터치 및 드래그로 일정 생성
• 현재 시간 바늘 표시로 실시간 위치 확인 가능

2) 리스트 조회 기능

• 날짜 기준 시간순 정렬
• 연도 → 월 → 일 3단계 그룹 구조
• Accordion 방식으로 필요한 데이터만 확장

3) 일정 상세/편집 기능

• 제목, 시작/종료 시간 입력
• 색상 선택 및 랜덤 색상 생성
• 메모 추가 및 수정 기능
• 삭제 기능 포함 (확인 다이얼로그 적용)

4) 데이터 내보내기

• JSON 형태로 전체 또는 기간별 export
• 파일 저장 및 공유 기능 지원

 

 

4. 사용 기술 스택

이번 프로젝트에서는 다음과 같은 기술을 사용했다.

• React Native + TypeScript (Expo)
• Zustand: 상태 관리
• expo-sqlite / MMKV: 로컬 데이터 저장
• react-native-svg: 원형 다이얼 렌더링
• react-native-reanimated: 애니메이션 처리
• gesture-handler: 터치 인터랙션
• date-fns: 날짜 처리
• expo-file-system / sharing: 파일 export

특히 SVG 기반으로 원형 UI를 직접 구현하여 외부 차트 라이브러리 없이 완전히 커스텀 구조로 설계한 것이 특징이다.

 

 

 

5. 개발하면서 느낀 점

1) “시간 UI”는 단순 리스트보다 훨씬 복잡하다

시간은 선형 데이터이지만, 이를 원형으로 표현할 때는
좌표 계산과 UX 설계가 동시에 필요했다.

2) 인터랙션 설계가 핵심이다

단순히 UI를 그리는 것보다

• 터치 위치 → 시간 변환
• 겹치는 일정 처리
• 드래그/탭 반응성

이 부분이 전체 완성도를 결정했다.

3) 시각화의 가치

리스트 기반보다 원형 UI가
“하루의 구조”를 훨씬 직관적으로 보여준다는 점을 확인했다.

 

6. 아쉬운 점

• SVG 기반 다이얼 로직이 복잡하여 유지보수가 어려운 구조
• 일정 겹침 처리 알고리즘 추가 개선 필요
• 핀치 줌 및 고급 인터랙션은 MVP 단계에서 제외됨
• 초기 설계 대비 애니메이션 완성도가 부족한 부분 존재

 

7. 향후 계획

• 일정 충돌 자동 정리 기능 개선
• 통계 기능 추가 (시간 사용 패턴 분석)
• 드래그 기반 일정 수정 UX 고도화
• iOS/Android 성능 최적화
• S Diary와 디자인 시스템 통합 (S 패밀리 앱 구조)

 

 

 

첫 진입시 오늘날짜, 현재 시간 기준이다 .

s clock 색상은 사용자의 취향것 바꿀 수 있고 첫 색상은 랜덤이다 .

설정 메뉴에서 바꿀 수 있다 .

 

 

 

 

 

 

다크모드 변경

 

 

 

 

 

 

 

 

 

오늘을 누를경우 datepicker가 왼 오른쪽 화살표는 어제 오늘순으로 -1 +1 된다.

 

 

 

 

 

 

 

 

일정추가.

1시간에 일정은 최대 3개로 제한했다. 시간대는 자유롭게 지정 가능하다. 

 

 

 

 

 

 

해당 시간을 누르면 '해당시각만 강조'해 볼 수있다. 

스케줄이 무수히 많아졌을때 ring에서 헷갈려하지않길 바랬다. 

스케줄 완료도 클릭가능.

편의상 완료된 스케줄은 뒤로 재정렬되고 완료도도 reload된다. 

 

 

 

 

 

 

오늘을 선택해서 다시한번 추가해보자. 

이번에는 다시보지않기 클릭

check할때마다 alert이 뜨지않는다 

 

 

 

 

 

 

오늘을 선택한 상태에서 설정 - 선택한 날짜 다운 - 확인

 

 

 

 

 

전체 날짜 다운 - 확인

 

 

 

 

 

 

로고 옆에 아이콘을 클릭하면 리스트 형태로도 볼수있다 .

첫 진입시 '오늘'을 기준으로 보여준다.

accordian을 닫았을때에서야 전체 데이터를 확인 할 수 있다. 

accordian을 열면 오늘을 기준으로 제한해 보여준다 .

하루하루 스케줄링앱임을 감안했다 .

 

 

 

 

 

 

 

 

 

 

 

현상태에서도 check기능 가능.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

마찬가지로 상세조회, 편집가능.

 

 

 

ring 모드에서도 checkbox를 피해 click하면 편집할 수 있다 .

 

 

 

 

 

 

 

다시 돌아와 삭제 테스트.

 

 

 

 

 

아까 다운받았던 '전체데이터'를 불러와 덮어쓰기를해 복원이 되는지 확인하자.

 

 

 

 

결과창 출력.

삭제했던 test3과 색상과 txt 수정을 했던 오늘 스케줄이 복원되었다. 

 

 

 

8. 마무리

이번 S Ring 프로젝트는 단순한 일정 앱 개발을 넘어

• 시간 구조를 시각적으로 재해석하고
• 원형 UI 기반 인터랙션을 설계하며
• 실제 사용 가능한 MVP까지 구현한 프로젝트이다.

특히 “시간을 어떻게 보여줄 것인가”라는 문제를 중심으로
UI와 데이터 구조를 함께 설계했다는 점에서 의미가 있다.

앞으로는 기능 확장보다는
사용성 개선과 완성도 고도화에 집중할 예정이다.