본문 바로가기

Coding/JavaScript

프로젝트 0주차 회고 - 주제선정과 기획

1차 프로젝트를 꾸역꾸역 끝내고 나니 이런 식으로 하나의 제품이 만들어지는구나 를 어렴풋이 알게 되었다.

1차에서는 뭐가 뭔지 모르는 중에 큰 기능 정의만 가지고 페이지들을 만들었고 코드가 작동하는 것에만 급급해서 동료들의 도움을 받아가며 겨우 끝마쳤다. 뿌듯함과 아쉬움이 반반. 그리고 쉴틈 없이 바로 이어지는 파이널 프로젝트.

7주간 진행되는 프로젝트인 만큼 적어도 주 단위로는 기록하자고 한다.


1. Project Idea

이번에도 해은 님의 아이디어로 진행하기로 했다.

이름하여 개.구.리. 개발자/구석에서/이제 나와! 라며 개발자들의 사이드 프로젝트를 위한 커뮤니티 앱이다.

개발자들은 대부분 사이드 프로젝트를 해 보고 싶은 마음은 있지만, 마음 맞는 멤버를 구하기는 어렵다.

그들을 위한 플랫폼으로 개발자 누구나 프로젝트를 개설하고, 참여하고 의견을 주고받는 커뮤니티다. 나를 위한 프로젝트? 

잘 만들어졌을 경우 개발 프로젝트에 필요한 디자인, 기획을 포함한 추가 포지션까지 확장을 고려해볼 수 있다.

 

2. 팀 인원과 역할 분담

총 5명으로 기본 포지션은 백앤드 2, 프런트 앤드 3으로 나눴다.

1차 프로젝트의 경험을 기반으로 백앤드 작업이 어느 정도 마무리되면 백앤드 1명이 프런트 앤드로 이동하기로 했다.

나는 프런트 쪽을 맡았다. 이대로 백앤드를 제대로 활용해보지 못하고 수료하게 되는걸까 하는 걱정에 백앤드를 지원해볼까 했지만 리액트 네이티브가 너무 써보고 싶었기 때문에 프런트로 결정.

 

3. 사용 stack

비교적 익숙한 스택을 활용했던 1차에 비해 이번에는 새로운 스택을 반 이상 추가했다. 다들 의욕적이라 욕심을 좀 냈다.

포스팅을 하면서 너무 낸건 아닐까 하는 생각도 살짝. 

두려운 점은 타입스크립트를 비롯해 절반 이상은 써본 적 조차 없다는 사실.. 하지만 일단 나와 팀을 믿어 보기로 했다.

 

이번 앱은 화면이 많기 때문에 1차 때처럼 슬랙 채팅으로 디테일을 논의하는 건 소모적인 일이고,

가능하면 구체적으로 기획이 공유된 상태에서 코드를 작성하고자 Figma를 사용해 Flow를 공유하자고 제안했다. 다행히 모두 동의해서 스택에 포함시켰다. Figma를 혼자 조금씩 활용했지만 팀으로 써본 적은 없기 때문에 피그마의 다양한 기능들이 얼마나 도움이 될지도 기대된다.

구분 stack
Front-End React Native, Typescript, React Hooks, Apollo, Socket.IO, styled components, GraphQL
Back-End GraphQL, Typescript, Redis, Mysql, TypeORM, Socket.IO, passport
기타
AWS, Figma

 

4. 주요 기능과 화면들

형태는 모바일 앱. React Native에는 only ios/Android 에 해당하는 컴포넌트들이 있었고 주력 os도 결정해야 했는데, 팀원 4명이 아이폰 유저라서 ios로 정했다. 하지만 가능하면 양쪽 다 최적화해보고 싶다. (... 과연??) 주요 메뉴는

 

프로젝트 개설, 프로젝트 리스트, 프로젝트 방 채팅 기능, 완료 프로젝트 알리기, 프로필 관리 기능이 포함되어 있다. 피그마로 그려본 주요 화면들.

  • 홈 - 내 프로젝트 참여 현황
  • 프로젝트 - 진행 상황 별 프로젝트 리스트를 보여준다. 모집중/진행중/종료 로 필터링 해서 볼 수 있다.
  • 프로젝트 방 - 프로젝트 참여자들의 대화방. 
    • 리더 - 프로젝트를 만든 유저가 방의 리더가된다.
      • 멤버를 초대/강퇴 할 수 있다.
      • 참여 요청을 승인/거절 할 수 있다. 
      • 프로젝트 방의 이름, 진행 상황을 변경할 수 있다.
      • 프로필 - 프로필 이미지를 탭 하면 유저의 프로필을 보여준다.
  • 만들기 - 프로젝트 이름, 필요한 포지션과 인원, 필요한 기술스택을 설정할 수 있다.
  • 프로필 - 프로필 이미지, 이름, 짧은 소개, 기술스택 을 설정할 수있다. 
  • 회원가입과 로그인.

이정도가 베어미니멈으로 정한 기능 들이다.

베어미니멈을 진행한 후에 알림과 검색기능 프로필 페이지의 추가적인 이력 사항들을 더해 나가기로 했다. 

 

이번에는 회원가입을 단계별 진입하는 형식으로 잡기로 했다. 초안은 이런 식

 

5. 다음 주 까지 할 일

- 일단은 사용 스택을 가볍게 공부하기.

- 클라이언트 컴포넌트 구조 기획과 초기 RP설정 하기.

- 베어 미니멈에 해당하는 테스크 카드 작성하기.

 

다음 주에 여러 가지 고난에 쭈글 해져있을 내 모습이 그려지지만,

어쨌든 프로젝트는 시작됐다.

'Coding > JavaScript' 카테고리의 다른 글

쿠키, 세션, 토큰에 관하여  (1) 2020.04.15