PoMoToDo(3) - 포모도로 타이머 + 투 두 리스트 - 기획 중간완성

PoMoToDo 기획서

---

기능설명 & 자료

메인페이지 기능 설명

　　　　　　　　　　　　　　　　　　　　　　　　　

상세기록페이지 기능 설명

사이드 페이지 기능 설명

 

색상 모음

 

---

현재 나에게 가장 필요한 서비스가 무엇인가?

1. 공부를 좀 더 효율적으로 하기 위해 매시간 체크하는 pomodoro타이머
2. 명확한 목표를 설정하기 위한 TodoList
3. 나의 안좋은 습관을 체크하고 고치기 위한 Not TodoList
4. 공부하는데 도움이 되는 음악이나 소리들
이 네가지를 한 화면에서 관리 할 수 있는 프로그램을 만들고 싶었음.
매일 직접 사용하고 있는 프로그램들이기에 사용자의 시선에서 좀 더 냉정하게 평가할 수 있고,
공부했던 내역이 남는다면 많은 도움이 될 것이라고 판단했음.

---

어떻게 디자인할까?

1. 전체적인 레이아웃, 버튼은 뉴모피즘 디자인을 사용
2. 레이아웃을 제외한 뉴모피즘 디자인 위에 또 뉴모피즘 디자인을 사용하는 중첩을 피하기위해 버튼은 플랫하게 표현
3. 투두리스트, 낫투두리스트는 플랫디자인, 머티리얼 디자인 사용
4. 모달창은 머티리얼 디자인 사용

---

구현 예정 기능

Main Page

  - Pomodoro Timer

1. 누르면 시작, 한번 더 누르면 일시정지
2. 아래에 3가지 버튼 배치 (강제종료, 시간조절, 작업시간 / 휴식시간 스위칭)
3. 각 pomo마다 종료시(시간종료, 강제종료) 아래에 시간 자동입력, 간단한 메모가 가능하도록 구현

 

  - ToDoList(Not-ToDoList)

- 사용자가 색상을 선택하고 목록을 작성
- 제한적인 범위 내에서 목록의 순서를 조작하도록 구현
- 목록의 내용을 수정할 수 있도록 구현하기
- 체크시 자동으로 색변경하고 아랫단에 정렬하도록 구현
   (예: Todo = 색->무채색 / NotTodo = 붉은색 -> 초록색)
- 삭제버튼 클릭하면 한번더 확인 후 삭제처리

 

  - 다양한 소리

- 다양한 소리를 아이콘형식으로 시각화

 

  - 우측상단에 위치한 Side Page, Record Page로 갈 수 있는 네비게이션 버튼

 

 

Record Page

(상세기록 페이지)

-깃헙 잔디심기에서 얻은 아이디어
  (달력과 색깔을 통해 현재까지 공부한 일자와 시간을 시각적으로 표시하기)
  (마우스를 올리면 날짜, Pomo갯수 볼 수 있게 구현하고 클릭하면 우측에 과거의 상세한 기록을 볼 수 있도록 구현)
- 아래에는 pomodoro, ToDoList, NotToDoList 내역 제공
- 우측상단에 위치한 Side Page, Main Page로 갈 수 있는 네비게이션 버튼

 

Side Page

- 작은화면에 간단하게 표시하는 페이지
  (ToDoList와 NotToDoList는 해야할 일만 표시하기)
  (할 일 추가는 +버튼 누르면 뜨는 모달창에서 입력받기)
- 상단에 버튼을 통해 음악을 고르고 켤 수 있는 기능 추가
- 우측 상단에 위치한 Main Page, Record Page로 갈 수 있는 네비게이션 버튼

 

개발목표

- 기존에 있던 기능들을 묶어서 내가 필요한 프로그램 만들기 (기본기능에 충실한 프로그램)

- 깔끔하고 직관적인 프로그램 개발하기 (최소한의 텍스트와 이모티콘 사용)

- 통일성있는 레이아웃디자인, 폰트, 컬러를 사용

- 적당한 입체감 표현하기(뉴모피즘 디자인, 머티리얼 디자인)

- 다양한 상호작용을 통해 사용자와 소통하는 프로그램 제작하기 (마우스이벤트, 소리, 애니메이션 등등)

- 사용자의 입장에서 이용하기 편리한 프로그램 만들기

(ex.  당연히 있어야 할 곳에 버튼을 배치하거나,
         상세내역에서 그래프를 누르면 새 창으로 보여주거나,
         다른창으로 넘어갔다가 돌아와도 데이터가 유지되거나,
         일자가 바뀌면 자동으로 저장되고 초기화되도록하기)

- 과거의 기록을 통해 지속적인 피드백을 스스로 할 수 있는 프로그램 만들기

- 작은 보상을 얻을 수 있도록 개발하기 (PoMoDoRo달력채우기, 과거기록 확인)

- 다양한 사이즈로 제공하기 (메인페이지, 사이드페이지 등등)

- 다양한 플랫폼을 통해 배포하기 (웹어플리케이션, 크롬확장프로그램 등등)

 

목표기간

  3달 (개발,배포,시연영상 촬영 및 발표 등 포함기간)

 

추가기능

  크롬 확장프로그램과 연동하기 (설치되어있으면 바로 이동하고 미설치상태면 설치화면으로 이동하기)