[토이프로젝트] 가계부 1주차 : 기획

1. 주제 선정

현장실습으로 일하고 있는 곳에서 간단한 미니 프로젝트를 한달동안 개발하라는 미션이 주어졌다.

그래서 내가 필요하고 관심있는 주제를 선정하기로 결심했다.

다양한 아이디어가 나왔다.

• 소금빵 맛집 추천 (요즘 소금빵에 빠졌다)
• 집중력 상승 뽀모도로 
• 뉴스레터 보내주는 서비스
• 물 먹는 하마 (하루에 물을 얼마나 마셨는지 체크하는 서비스)
• 간단하지만 원하는 기능만 있는 가계부

나는 고심 끝에 가계부 어플리케이션을 만들기로 결정했다.

경제 습관을 형성해야겠다는 생각에 가계부 어플을 사용해봤지만 너무 많은 기능들에 휩싸여 본질적인 가계부 역할을 하는 어플이 거의 없었기 때문이었다.

그래서 정말 기본(입출금 내역)을 살리면서 내가 원하는 기능을 추가한 심플 가계부를 개발하기로 결정한 것이다.

 

2. 기획

1. Skill

• React.js
• Javascript (향후 Typescript로 바꿀 예정)
• Recoil 
• HTML
• Styled-Component
• Git
• yarn
• (배포) github-pages
• (디자인) Figma
• (추가) Electron

2. 기능

• 입출금 내역 등록 및 관리(삭제, 수정) --> 삭제만 구현
• 알림 설정 (청약, 적금 알림 +목표치 모았을 때, 모으기 어렵다고 느낄 때 알림)
• 그래프로 월별/주별/일별 그래프 보여줌 -> 출금별/입금별 그래프로 변경
• (추가) 경제 기사 추천
• (추가) 알림, 목표 알람 실시간 검색어처럼 움직이게 변경
• (추가) 항목별 원형 그래프 추가 

 

3. 레이아웃

 - 피그마를 사용하여 레이아웃을 구성했다.

디자인 참고 사이트 

• https://dribbble.com/shots/14645248-Investment-Management-App 
• https://velog.io/@sypear/React-%EA%B0%80%EA%B3%84%EB%B6%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-My-Pocket
• https://velog.io/@eunjin/Javascript-Toy-Project-Expense-Tracker-%EA%B0%80%EA%B3%8[…]%EB%B9%84-%ED%86%A0%EC%9D%B4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8

 

4. 일정

1주차 (11/07 ~ 11/11)	주제 선정, 기획 / 레이아웃, 디자인 / 기초 세팅 /레이아웃 잡는 간단한 퍼블리싱
2주차 (11/14 ~ 11/18)	입출금 내역 등록 및 관리(삭제, 수정) / 알림 설정 (청약, 적금 알림) 기능 개발
3주차 (11/21 ~ 11/25)	월별/주별/일별 지출 그래프 기능 개발
4주차 (11/28 ~ 12/02)	디자인 마무리 하는 퍼블리싱
5주차 (12/05 ~ 12/09)	리팩토링 및 추가 기능 개발
6주차 (12/12 ~ 12/16)	리팩토링 및 추가 기능 개발