📚 독서 타이머 일정 생성 앱 기획서

https://embed.figma.com/proto/Wa8hJX1SwOvE7LfvQWs3RE/Untitled?node-id=1-2&p=f&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A2&embed-host=share

Figma

 

✅ 기본 UI

 

 

1. 개요

• 앱 이름(가제): 독서 타이머
• 목적:
  • 긴 책을 한 번에 읽기 어려운 사용자들이 정해진 시간 동안 읽을 수 있도록 돕는 앱
  • 사용자가 기간을 설정하고, 매일 일정한 시간 동안 독서할 수 있도록 계획을 제공
  • 달력을 통해 독서 진행 상황을 시각적으로 확인 가능

 

2. 주요 기능

1) 캘린더 기반 일정 관리

• 기능: 사용자의 독서 일정을 한눈에 볼 수 있는 캘린더 제공
• UI 요소:
  • 달력에서 기간별 독서 진행을 표시 (예: 특정 날짜 강조)
  • 독서 일정이 등록되면 해당 날짜에 책 정보 표시

2) 독서 일정 생성 (Sheet UI 활용)

• 트리거:
  • 사용자가 "일정 생성" 버튼을 누르면 하단에서 Sheet UI가 올라옴
• 입력 요소:
  • 책 선택: 사용자가 읽을 책 입력
  • 기간 설정: 독서를 진행할 기간(예: 3월 17일~3월 25일)
  • 시간 설정: 하루에 읽을 시간(예: 30분)
  • 색상 선택: 해당 일정의 색상 테마 선택 (시각적 구분을 위해)
• 완료 버튼:
  • 일정 생성 후 캘린더 화면에 추가

3) 일정 표시 및 진행 관리

• 생성된 일정은 캘린더에 표시
• 일정별 진행 상태를 체크리스트 또는 진행률 형태로 제공
• 특정 날짜를 선택하면 해당 날짜의 독서 계획 상세 정보 제공

 

3. 사용자 흐름 (User Flow)

1. 앱 실행 → 캘린더 화면 진입
2. "일정 생성" 버튼 클릭
3. Sheet UI에서 책, 기간, 시간, 색상 입력 후 "일정 생성 완료" 버튼 클릭
4. 입력한 일정이 캘린더에 반영됨
5. 사용자는 설정한 일정에 맞춰 독서를 진행하고 진행 상황을 확인

 

4. UI 구성 요소

📌 화면 1: 캘린더 화면 (기본 홈 화면)

• 구성 요소
  • 달력 (사용자가 선택한 일정이 표시됨)
  • 생성된 독서 일정 목록
  • "일정 생성" 버튼

📌 화면 2: 일정 생성 Sheet UI

• 구성 요소
  • 색상 선택 (각 일정별 색상 지정 가능)
  • 책 입력 필드
  • 기간 설정 필드
  • 하루 독서 시간 설정 필드
  • "일정 생성 완료" 버튼

📌 화면 3: 타이머 화면 

• 구성 요소
  • 설정한 타이머가 보이는 라벨
  • 타이머 시작 / 정지 버튼
  • 타이머 리셋 버튼 
  • 뒤로 가기 버튼 

 

5. 기술 스택 (예정)

• 언어 및 프레임워크: Swift + UIKit
• UI 구현:
  • UICalendarView을 활용한 캘린더 표시
  • UIViewController + Sheet Presentation으로 일정 생성 UI 구현
• 데이터 관리:
  • 로컬 데이터 저장: UserDefaults 또는 CoreData 사용 예정
  • 일정 알림 기능 추가 고려 (예: UserNotifications)

 

6. 기대 효과

✅ 사용자가 책을 계획적으로 읽을 수 있도록 도움
✅ 긴 책도 부담 없이 일정 기간 동안 나눠서 읽을 수 있음
✅ 시각적 캘린더 UI로 독서 진행 상태를 쉽게 확인 가능