드디어 내 인생 첫 프로젝트를 시작하려 한다. 리액트를 어느 정도 찍먹해봤기 때문에 나머지 기능들이나 공부는 직접 만들면서 필요할 때마다 덧붙여나가는게 좋다고 생각했다. 사실 더 이상 미룰 핑계도 없기도 하며, 계속 미뤘던 이유는 '혼자' 무언가를 만드는 게 매우 어색하고 경험이 없었기 때문에 어떻게 해야하는지도 감을 못잡겠다는 겁에서 비롯됐다. 뭐가 됐건 일단 시작해보자고 마음 먹은 지금도 사실 막막하긴 매한가지이지만, 무섭다고 미루는 내 모습을 보는게 더 싫기 때문에 무작정 해보려고 한다. 얼마가 걸리든 일단 내가 여태까지 거쳐왔던 경험과 기억을 되살리고 모를 땐 구글에 물어보면서 꾸역꾸역 해보련다.
우선 지금 토이프로젝트를 하기 위해서 간단한 계획을 세워보기로 했다. 이 글을 참고하여 6가지 단계로 나눠 내가 구현하고자 하는 서비스가 무슨 기능이 필요한지, 이 기능들을 구현하려면 어떤 기술 스택을 사용해야할 지 등을 파악해보았다.
1. 어떤 것을 만들고 싶나요?
어쨌든 내 인생 첫 토이프로젝트인 만큼 평소에 내가 제일 자주 사용하는 것들 중에서 만들어볼만한 것들을 생각해보았다. 그것은 바로 '운동기록' 앱이었고, 마침 투두리스트 만들기 튜토리얼을 진행했기 때문에 이를 가져다 변형시키는 방식으로 하고자 하였다.
2. 어떤 기술을 사용할 것인가요?
우선 리액트로 전반적인 인터페이스를 구현하고, 백엔드는 이전에 수강했던 노마드코더 유튜브 클론코딩 강좌에서 다뤘던 Node.js, MongoDB, Express를 사용할 생각이다.
어떤 기술을 사용할 지 선택하는 건 아직 내가 판단할 수 있는 영역이 아니라고 느끼기 때문에.. 이 부분은 계속해서 추가하는 형세가 될 것 같다.
3. 어떤 기능들이 포함되나요?
우선 시장조사를 먼저 했다. 앱스토어에 등록돼있는 '운동기록' 어플들을 살펴보면서 어떤 기능들을 탑재하고 있는지 아래에 정리해놓았다.
우선 홈 화면 구성을 2단으로 하여 일주일 단위 캘린더 + 오늘의 운동 스케줄과 같은 인포메이션 박스로 구성하는 것이 일반적이었다. 처음에 홈 화면을 어떻게 구성할 지 고민이었는데 아무래도 일반적인 구성이 제일 깔끔하고 흡입력있는 것 같아 나도 그렇게 구성해보려 한다.
그 외에는 달력 페이지, 오늘 운동 계획짜기 페이지, 운동 기록 통계 페이지, 개인 설정 페이지 등이 있겠다. 많은 기능들을 끼워넣기 보다는 최대한 간결하고 심플하게 만들고 싶기 때문에 꼭 필요한 기능들만 골라 넣으려 한다. 하단 네비게이션 바의 경우엔 필리그램 앱의 그것을 참고하여 만들고자 한다. 버튼 5개가 제일 깔끔하고 군더더기 없는 배치인 것 같다.
4. 어떤 기능을 꼭 포함해야 하나요?
프로젝트 계획하기 글에서 기능 구현 이전에 각 기능의 중요도를 파악하기 위한 지표로 다음과 같은 질문을 스스로 해보라 한다.
- 이 프로그램을 친구에게 공유할 때, 어떤 기능이 확실하게 실행되면 좋을까?
- 어떤 기능을 만드는데 가장 흥미가 생길까?
- 어떤 기능이 이 프로그램에서 가장 독특한 기능일까?
- 어떤 기능을 구현할 때 가장 많이 배우게 될까?
- 현재 나의 기술 레벨과 너무 동떨어진 기능은 없을까?
이후에 3단계에서 파악했던 기능 목록을 중요도 순서대로 정렬하거나 기능에 순위를 매겨보자.
홈 화면('밀리그램' 어플 참조)(P2)
- 일주일 캘린더(P2)
- 오늘의 운동 체크리스트(P2)
달력 화면(아이폰 기본 앱 '캘린더' 참조)(P2)
- 달력(무한 스크롤)(P2)
- 운동 스케줄 스택 표시(P2)
운동 일지 관리 화면(폴더 화면 - 아이폰 기본 앱 '메모' 참조)(P1)
- 폴더 별로 수직 정렬(P1)
- 운동 종목(해쉬태그) 별로도 볼 수 있게 '해쉬태그 클라우드' 박스 마련(P3)
오늘의 운동 계획짜기 화면(벨로퍼트 투두리스트 활용)(P1)
- 사용자 직접 입력 input(P1)
- 해쉬태그 사용 시 연동(P2)
운동 기록 통계 화면(P3)
- 제일 상단에 깃헙 잔디밭처럼 운동 잔디밭 만들기(P3)
- 막대, 원, 선그래프 등으로 정보 제공(P3)
개인 설정 화면(P3)
- 로그인 구현(P2)
- 로그아웃, 비밀번호 변경, 회원탈퇴 등
- 라이트/다크모드 구현(P3)
- (추가)위 순위대로 버전을 나눠보면,
v1.
운동 일지 관리 화면(폴더 화면 - 아이폰 기본 앱 '메모' 참조)(P1)
- 폴더 별로 수직 정렬(P1)
오늘의 운동 계획짜기 화면(벨로퍼트 투두리스트 활용)(P1)
- 사용자 직접 입력 input(P1)v2.
홈 화면('밀리그램' 어플 참조)(P2)
- 일주일 캘린더(P2)
- 오늘의 운동 체크리스트(P2)
달력 화면(아이폰 기본 앱 '캘린더' 참조)(P2)
- 달력(무한 스크롤)(P2)
- 운동 스케줄 스택 표시(P2)
로그인 구현(P2)
- 로그아웃, 비밀번호 변경, 회원탈퇴 등
해쉬태그 사용 시 연동(P2)v3.
운동 종목(해쉬태그) 별로도 볼 수 있게 '해쉬태그 클라우드' 박스 마련(P3)
개인 설정 화면(P3)
- 라이트/다크모드 구현(P3)
운동 기록 통계 화면(P3)
- 제일 상단에 깃헙 잔디밭처럼 운동 잔디밭 만들기(P3)
- 막대, 원, 선그래프 등으로 정보 제공(P3)로 나눌 수 있다.
5. 어떻게 구현할 것인가요?
버전을 나눈 뒤 텅 빈 vscode 창에서 가장 먼저 해야할 것은 내가 무엇을 어떻게 만들어야할지 생각하는 것이다. 글에서는 '상위 수준의 아키텍처'에서 생각하여 분할해보는 것을 추천한다. 프로그램을 "객체", "로직", "사용자 인터렉션", "사용자 데이터", "화면"과 같은 카테고리로 말이다.
잘 나눌 수 있을지 모르겠지만 우선 한 번 분류해보았다.
객체
- 사용자
- 각각의 운동일지
화면
- 홈화면
- 달력화면
- 폴더화면
- 기록화면
- 통계화면
- 설정화면
논리
?
사용자 인터렉션
- 달력 스크롤(마우스 휠)
- ?
사용자 데이터
- 운동 일일기록 데이터 -> 사용자 지정 폴더 -> 사용자 ID별 저장소에 저장
- 운동 일일기록 : 개수 타입 / 시간(분, 초) 타입 별로 개별 저장 -> 통계 그래프에 활용
- 총 하루 운동시간 데이터 -> 잔디밭 심기 농도 차이
이 부분은 앞으로 계속해서 업데이트해야 할 것 같다.
6. 일정이 어떻게 되나요?
흠... 방학이긴 하지만 매주 스터디도 있고 곧 해커톤 행사가 예정돼있어 동아리에 조금 더 집중할 것 같다. 물론 비슷한 결의 공부이기 때문에 큰 문제는 없지만 이 프로젝트는 사이드 메뉴 느낌으로 매일매일 조금씩 건드리는게 좋을 것 같다.
1주차 ~ 2주차: 디자인 및 대략적인 외형 만들기.(리액트, 리액트 라우터, 리덕스 등)
3주차: 노드js로 백엔드 데이터셋 구축하기
4주차: API 연동
5주차: 화면 구성하기
6+주차: 마무리, 테스트(QA)..
내가 계획을 짜면서도 과연 이렇게 흘러갈까, 빠진 절차는 없을까 하는 우려가 매우 크지만 일단 따라 써봤다. 그래, 죽기 아니면 까무러치기지. 일단 무지성 돌격부터 해보자. 하다가 중간에 이건 아닌데 싶으면 또 찾아보고 계획 수정하고 하면 된다. 나에게 지금 가장 중요한 건 핑계대지말고 일단 시작하는 것이다. 가보자 가보자~
