[FE_Bootcamp] Main Project_프로젝트 시작

블로그를 몇달만에 쓰는 것 같다. 

프리 프로젝트 중간 정도부터, 메인 프로젝트가 끝날 때 까지 정말 온갖 사건사고에 휘말리다 보니 블로그는 생각조차 안났고, 그 덕분에 약 2달정도의 커다란 공백이 생기고야 말았다. 꾸준히 쓰겠다던 나 어디?

아무튼, 지난 8월 3일부로 코드스테이츠 모든 과정이 끝났고, 조금 휴식을 취하며 본격적인 취업 준비에 들어가게 되었다. 

그 전에, 내가 만든 메인 프로젝트를 돌아보고, 만들면서 어려웠던 것이나 잘 안됐던 것들, 또는 새롭게 배웠던 것들에 대해 정리해보고자 한다.

---

1. 프로젝트 시작 전

프리 프로젝트를 통해 만나게 된 백엔드 분과 같은 팀을 하게 되었다. 많은 사람들과 만났지만 딱 스터디나 페어 프로그래밍 이상의 친분은 쌓지 않았고, 그래서 딱히 같이 할 사람이 없던 와중 프리 프로젝트 팀원 분이 먼저 메인도 같이 하자고 제안을 해주셔서 팀에 들어오게 되었다. 팀원은 나와 프리 프로젝트를 같이 했던 프론트엔드 한분, 백엔드 한분, 백엔드 분과 같은 스터디를 했던 백엔드 한분 해서 총 4명이 모였고, 이후 백엔드 한분이 더 들어오시면서 프리 프로젝트를 같이 했던 프론트엔드 분을 데리고 오시면서 6명이 완성되었다. 

 

이렇게 결성된 팀

 

주제는 처음부터 금융으로 가기로 했다. 사실 나는 미디어, 그중에서도 음악 분야를 해보고 싶었지만 깊이 생각해 본 결과 내가 만들고 싶은 페이지는 같이 만들 사람이 없을 것 같기도 했고, 새롭게 무언가를 사용해볼 만한 것이 없을 것 같다고 판단했다. 

 

회의 결과, 가계부 쪽으로 가닥이 잡혔고, 다양한 기능을 가진 가계부를 만들기로 하였다. 

 

초기 가계부 계획안

 

일/월별 수입과 지출을 작성 할 수 있는 가계부, 우선순위를 정해 가장 합리적인 소비를 정해주는 위시리스트, 그리고 위시리스트에 저장된 상품을 바로 구매할 수 있는 결제 페이지, 회원 정보를 나타내는 마이페이지 까지 총 3개의 커다란 틀을 잡고, 그 안에서 세세한 사항을 조정하기로 했다. 

 

그러던 중, 팀원 회의 중 저장된 상품 구매 기능에 대한 의문부호가 제기되었다. 금융의 꽃인 결제 기능을 구현해 보기 위해 상품 구매 기능을 추가한 것인데, 실제 상품을 어떻게 구매할 것인지 정하는 과정에서 우리의 능력 밖인 것 같다는 이야기가 나왔다.

 

실제로, 우리가 생각한 기능은 구매 버튼을 누르면 우리 페이지에서 직접 구매를 하는 방식인데, 우리가 구매 대행을 해주는 것도 아니고, 그렇다고 우리가 물건을 쌓아놓고 바로 판매하는 것도 아니기 때문에, 이 '구매'를 어떻게 할 것이냐에 대한 이야기가 오갔다. 

 

결국 구매 기능은 포기하기로 하고, 결제 기능은 다른 쪽에 넣기로 하였다. 

사라진 구매 페이지 대신, 아예 가계부 기능에 집중하여 소비 패턴 분석 페이지를 추가하였다. 가계부에 입력한 수입, 지출을 시각화하여 한눈에 보여주자는 의견이 나왔는데, 프론트엔드 입장에서는 데이터 시각화를 경험 할 수 있고, 서버 통신도 많이 필요하지 않을 것 같아 흔쾌히 수락하였다. 

 

user flow 초안

 

이제 잠시 빼두었던 결제 기능을 어떻게 추가할지만 정하면 됐다. 유료 서비스 구독과 자체 상품 구매 정도로 의견이 좁혀졌고, 결국 구체적인 서비스 내용이 없어도 일단 결제 여부를 쉽게 알 수 있고, 실제 상품 배송 등의 번거로움도 없을 것 같아 유료 서비스 구독 기능이 채택 되었다.

 

아이디어 미믹

 

이로써, 가계부, 소비 패턴 분석, 위시리스트, 유료 구독, 마이페이지까지 총 5개의 큰 페이지를 만들게 되었다.

이 과정에서 의견 충돌로 백엔드 팀원 한분이 나가시게 되었다. 듣기로는 결제 기능 관련해서 문제가 있었다고 들었는데, 아직 본격적으로 프로젝트를 시작하기 전이어서 큰 타격은 없었다.

---

2. 프로젝트 구상

일단 아이디어 제출이 끝났으니 실제 페이지를 어떻게 만들지 구상하는 목업이 필요했다. 

 

43기 분들의 결과물을 참고했다

 

우리 이전 기수 분들의 작업물 중, 디자인이 매우 깔끔한 팀이 있어서 이 팀의 디자인을 참고하기로 했다. 팀원분들 중 디자인 전공자가 2명이나 있어서 나는 그냥 가만히 있었다,.,.

 

아무튼, 아이디어 미믹을 바탕으로 figma를 제작하기 시작했다. 

 

.

.

.

.

Figma

완성된 Figma

Figma

디자인 전공자 2분 덕분에, 아주 빠르게 Figma를 완성 할 수 있었다. 

이제 Figma도 만들었으니, 이를 바탕으로 본격적으로 개발을 시작해 보도록 하자.