[패스트캠퍼스] 기업연계 프로젝트 'Money Bridge' 회고

⚠️해당 포스트는 정리를 거치지 않은 글입니다. 추후 퇴고 작업이 이뤄질 예정입니다.⚠️

 

길고 길었던 7개월 간의 프론트엔드 부트캠프, 그리고 부트캠프의 대미를 장식할 기업연계 프로젝트가 막을 내렸다.

기업연계 프로젝트는 프론트엔드 뿐만 아니라 백엔드, PM, 디자이너까지 총 4개 분야의 수강생들이 모여 기업의 요구 사항에 맞춰 기획부터 서비스 배포까지 구현하는 프로젝트이다.

 

개발 팀 내에서의 협업 뿐만 아니라 다른 직군과의 협업을 경험해볼 수 있고, 기업 요구사항에 맞춰 프로젝트를 진행하면서 실무를 조금이나마 경험해볼 수 있기에 파이널 프로젝트를 기대하며 패스트캠퍼스 부트캠프에 지원하기도 했다. 

 

한 달 넘도록 진행된 파이널 프로젝트, 그 과정에서 여러모로 배운 점이 많다. 프로젝트를 진행했던 과정을 되짚어보고, 잘했던 점, 아쉬웠던 점을 기록해보려 한다.

---

🌱 프로젝트 소개

주제 (Subject)

Money Bridge

 PB와 투자자를 이어주는 위치 기반의 매칭 플랫폼

원하는 증권상품을 모르는 상태에서 여러 증권사에 가입하여 정보를 탐색하는 것이 어렵고, 증권사에 컨택해도 원하는 PB와 상품에 접근하지 못하는 투자자들을 위해 다양한 증권사의 다양한 전문분야의 PB들을 찾고 매칭할 수 있는 서비스이다.

 

기능 (Features)

현재 유저의 위치를 기반으로 (지점 위치 기준) 가장 가까이 있는 PB를 추천받고, 원하는 분야/증권사의 PB를 찾을 수 있다.

투자성향 분석을 통해 투자자들은 자신의 투자성향을 파악할 수 있고, 이를 기반으로 PB를 추천받을 수 있다.

 

PB들은 PB 프로필과 전문가 콘텐츠를 작성함으로써 신뢰도를 높이고 투자자들에게 자신을 어필할 수 있다.

또한 PB가 작성한 콘텐츠에 댓글을 남기고 해당 글을 북마크할 수 있는 기능도 있어 플랫폼이 더욱 활성화되도록 했다.

 

투자자는 원하는 PB에게 상담 예약 신청을 할 수 있고, 상담 후기를 작성할 수 있다.

PB는 상담 일정 및 상담 관리를 할 수 있다.

 

 

• 기간 : 2023.06.08 ~ 2023. 06. 28
• 팀 구성 : PM 2명, 디자이너 3명, 프론트엔드 4명, 백엔드 3명
• ➡️ 프로젝트 깃허브 레포지토리 바로가기
• ➡️ 프로젝트 노션 페이지 바로가기

 

 

⚙️ 프론트엔드 기술 스택

기술 스택 중 눈에 띄는 것은 Next.js를 사용했다는 점이다. Next.js를 사용한 이유는 아래와 같다.

• 간편한 라우팅 : Next.js 13버전에서는 app 경로를 이용해서 페이지 구성과 라우팅 기능을 제공, 별도의 라우팅 설정이 없어도 페이지를 구성하는데에 편리성을 제공하며, 코드의 구조를 단순화 시켜줌
• SEO 최적화 : SSR을 통해 HTML 파일에 메타데이터 등의 SEO 처리를 위한 정보 담김 ⇒ 웹 크롤러(검색 엔진) 노출 빈도를 높여 플랫폼 접속률을 높임
• SSG 지원 : 사전에 페이지를 정적 파일로 제공하여 사이트의 성능을 향상시키고, 캐싱을 통해 더 나은 로딩 속도를 제공함
• 확장성과 생산성: NEXT.JS는 React를 기반으로 하기 때문에 사용에 어려움이 없음
• 통합된 빌드 시스템: 내장된 빌드 시스템을 제공. Babel, Webpack, CSS 모듈 등과 같은 도구들을 통합하여 구성하고 설정할 필요 없이 개발할 수 있음

 

🧑🏻‍💻 내가 구현한 기능

1. 투자성향 분석 페이지

• 챗봇 형식으로 투자자의 성향 분석 진행 (답변 입력 시 다음 질문으로 스크롤)
• 분석된 투자성향에 대한 정보를 보여주는 차트 출력 (with Chart.js)
• PB 추천 페이지에서 투자성향을 기반으로 한 추천 PB 데이터 출력

 

2. PB 리스트 페이지

• 쿼리스트링을 사용하여 증권사/전문분야 별, 거리순/경력순 별로 PB 리스트 출력
• API 페이지네이션 구조에 따른 무한스크롤 구현

 

3. 상담 예약 페이지

• 챗봇 형식으로 상담 예약 진행 (답변 입력 시 다음 질문으로 스크롤)
• 날짜 선택 시 캘린더 모달 등장, 날짜 및 시간 선택 진행 (with Ant-Design)
• 요청사항, 신청자 정보 수정 기능

 

4. 마이페이지

• 유저 - 나의 투자성향 보기, 나의 북마크 목록, 상담 현황 보기
• PB - PB 프로필 보기, PB 프로필 수정
• 공통 - 개인정보 수정, FAQ, 공지사항, 이용약관, 탈퇴하기

 

---

💬 프로젝트 회고

💻 프로젝트 관련

📌 Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)

• swagger를 통해 Web API를 자동으로 문서화하여 백엔드와의 소통이 원활했다.
• 코드 리뷰를 통해 개선점 및 다른 방식의 코드 작성 방식에 대해 의논하여 다양한 논리를 생각할 수 있었다.
• 매일 이뤄지는 프론트/백엔드 스크럼을 통해 서로의 이슈를 공유하고, 이슈에 대한 대처가 수월했다.
• 팀 내 코어 타임 규칙을 통해 해당 시간(낮 1시 ~ 밤 10시)에는 디스코드에 상주함으로서 문제가 생길 때마다 바로바로 소통하면서 신속하게 처리할 수 있었다.
• 기업 측의 RFP 내의 요구사항을 많이 구현했다. (위치기반 PB 매칭 기반 플랫폼 + 블로그 기능)
• Next.js의 도입으로 SEO와 SSR을 경험하고 정해진 구조 내에서 작업함으로써 리액트 프로젝트보다 더 빠르게 개발이 진행되었다.

 

📌 Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)

• 계속 추가되는 기능들
  • 기능 추가에 대한 협의가 이루어 지지 않은 상태에서 개발을 시작했고, 개발 진행 중 기능들이 계속 추가되어 로직들을 수정하는데 시간을 많이 사용했다.
  • 기능의 우선순위를 산정하여 기간 내에 완성하기 어려운 기능들은 Backlog에 추가하였고, 자신의 파트를 마무리한 팀원부터 Backlog 내용을 하나씩 순차적으로 구현하여 문제를 해결하였다.
• 일정 산정
  • 프로젝트는 5월 초부터 시작했는데 정작 개발을 제대로 시작할 수 있었던 때는 한 달 뒤였다.
  • 기획 단계에서 프론트엔드 프로젝트 페이지 및 컴포넌트 구조를 작성하고, 남은 기간 내에 해당 기능들을 구현할 수 있을지를 검토하며 가능한 내용들만 구현할 수 있도록 PM 측과 적극 소통하였다.
  • UX/UI 디자이너들이 과정 초반에 파이널 프로젝트에 합류하게 되어 UX 구성에 미흡함이 있었다.
  • 피그마에서 댓글 기능으로 해당 부분을 어떻게 하면 사용자 경험을 올릴 수 있을 지를 함께 고민하고, 아이디어를 제공했다.
• PM의 부재
  • 초기 기획 단계에서 PM의 부재로 인해 프로젝트 진행이 딜레이 되었고, 추가로 투입된 PM들도 프로젝트에 온전히 참여를 하지 않아 일정 산정과 프로젝트 진행 진척에 어려움이 있었다.
  • 제대로된 플로우 차트, 기능 명세서를 받지 못하고 UX/UI 디자인까지 픽스되지 못한채 작업에 들어가게 되었다.
  • 개발 작업이 시작한뒤로 PM과 연락 및 소통이 이루어지지 않았고, 프론트엔드에서 디자이너, 백엔드와 커뮤니케이션을 진행하며 기능을 정리 및 디자인 픽스작업에 들어갔다. 전체적인 레이아웃 및 UX 관련 사항들을 디자이너와 소통하며 진행하였고, 그에 따른 API 변경 및 DTO 등 문제들은 백엔드와 소통하며 프로젝트를 완성해나갔다.
• 개발 기간 내에 기능 겨우 완수
  • 할 수 없는 기능들을 쳐낸다고는 했지만, 애초에 프로젝트 규모가 크고, 일정 딜레이로 인해 줄어든 개발 기간 내에서 겨우 기능들을 완성할 수 있었다.
  • 원활한 서비스를 위해 프로젝트 기간 외에 약 1주 동안 리팩토링 및 에러 처리 작업 거칠 예정

 

📌 Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)

• 개발 시작 전, 기능 개발에 대해 우선 순위를 정하기
• 프론트엔드 팀 뿐만 아니라 다른 팀과 더 적극적으로 소통해서 서로의 진행사항 파악하기
• 맨데이를 세팅한 후, 기간 내에 해당 기능을 다 완수할 수 있는지 체크하며 할 수 있는 것과 없는 것을 명확히 구분하기

 

👥 팀 관련

👍 좋았던 점

• 코어 타임에는 Discord에 상주하며 문제가 있으면 바로바로 소통하며 함께 해결하고, 매일 스크럼을 2회씩 진행하면서 서로의 진행 상황을 파악하는 등 팀원들 간의 소통이 원활했다.
• 저녁 스크럼 시간 때는 모여서 함께 PR을 진행하고 해당 PR에 대한 코드 리뷰, 질의응답을 진행하며 서로의 코드에 대한 이해도를 높였다.
• 기획 단계에서 프론트엔드 페이지 및 컴포넌트 구조를 구상하며 구조를 구체적으로 설계할 수 있었다.

 

👎 아쉬웠던 점

• 코어 타임은 13~22시였지만 빠듯한 개발 일정으로 인해 다들 반자발적으로 새벽 4~5시까지 개발을 진행했다. 맨데이를 설정한 뒤, 기능을 픽스시키고 개발에 들어갔어야 했는데, 그럴 시간도 부족해서 다들 할 수 있다는 믿음으로 불구덩이에 뛰어들었다. 결과적으로 완성시키기는 했지만 다들 건강하지 못하게 코딩을 진행한 것이 아쉽다.
• 시간이 부족하여 단위 테스트, 성능 테스트를 개발 기간 내에 진행해보지 못했다. 당장 빌드 서버에서 잘 돌아가는지만 체크하고 바로 다음 작업에 들어갔어서, 해당 부분이 아쉽다.
• 다들 Next.js 13 버전을 거의 처음 써보는 상황이여서, Next에 대한 이해도가 얕은 상태에서 개발을 진행해 초반부에 많이 헤맸다.

🗣️ 팀원들의 피드백

• 칭찬 / 격려
  • 코드 리뷰 때 꼼꼼하게 봐주셔서 좋았습니다.
  • 몰랐던 부분을 상세하게 설명해주셔서 많은것을 배워갑니다!
  • 과정중에 공부를 많이 하셨다는게 느껴졌고, 항상 열심히 하시는 모습을 본받고싶습니다..
  • 전체 팀원의 코드들을 자세하게 살펴봐주셔서 코드의 퀄리티를 높일 수 있었고 다양한 의견제시를 통해 팀 프로젝트가 마무리 될 수 있게 해주셨습니다.
  • 프론트엔드 팀인데도 불구하고 디자인적인 부분에 신경을 많이 써주시고, 고쳐주셔서 감사합니다.
• 아쉬웠던 점 / 보완하면 좋을 점
  • 허리건강 이슈로 중간에 많이 힘드셔서 코어 운동으로 보완해주시면 좋겠습니다. 개발자는 허리가 생명입니다.

 

 

💭 개인 회고

이번 프로젝트에서는 개발 팀 뿐만 아니라 PM, 디자이너까지 함께 하는 작업이였기에 더욱 어려웠다. 지난 개발 팀 프로젝트를 통해 협업하는 방법에 대해 배웠다고 생각했지만, 개발을 넘어 다른 직군의 생각과 부딪히게 되니 모든게 새로웠다. 일단 이전에는 개발팀에서 기획 및 디자인까지 직접 다 했다면 이번에는 PM과 디자이너의 프로젝트 기획을 기다리고 거기에 대해 피드백을 하는 방식이었다. 

 

개발을 진행하면서 처음으로 기다리는 입장이 되어보니, 기획 단계에서는 개발 쪽에서는 어떤 것을 할 수 있을지를 몰라 초반부에 좀 헤맸다.

그래도 사용자 경험을 증대시키기 위해 UX/UI에 아이디어 및 피드백을 주고, 기획 단계에서 나온 내용을 토대로 컴포넌트 구조를 미리 구상해보는 등 시간을 허투로 쓰지 않도록 노력했다.

 

게다가 기획 단계에서 소통이 원활하게 이뤄지지 않아 원래의 진행 일정보다 일주일이 더 딜레이 되어 개발 기간을 4주로 예상했지만 3주로 줄어들게 되었다. 해야할 일은 산더미고 데드라인은 점점 다가오고... 그러다보니 마음이 조급해져서 코드를 잘 짜기보단 일단 동작을 시키는 것에 급급해했던 것 같다. 현업에서는 이와 같은 상황이 빈번하게 일어난다고 하는데, 담담하게 내 할 일을 진행하는 연습이 필요할 것 같다. 

 

그래도 잘했다고 생각하는 건, 코드리뷰 제도를 도입시킨 것!! 코드 리뷰를 하면서 서로가 어떻게 코드를 짜는지를 보고, 해당 코드에 대한 이해도가 상승하고 코드를 바라보는 시야가 넓어졌다. 그리고 코드에 대한 상의를 하면서 해당 코드/아이디어를 사용해야 하는지에 대해 어필해야 하다보니 내가 해당 개념을 더 깊게 파악하는 수밖에 없었다. 조금 아쉬운 것은, 얘기가 깊어진다 싶은건 PR에 커멘트를 남기기보다 직접 소통하다보니 문서화가 되지 않았다는 것.. 앞으로는 개인 노션에 메모 형식이라도 좋으니, 내가 고민했던 흔적을 지속해서 남기는 습관을 들여야겠다.

 

🚪 마무리

팀 프로젝트에 더 익숙해졌으니, 이제는 실무를 경험해볼 차례..!

그동안 했던 협업과 셀프 피드백이 코드 인생의 자양분이 되어 현업에서 좋은 에너지를 이끌어내길!
이제는 진짜 사회로 나아갈 준비를 해야 하는데, 지금까지 잘 이겨낸 것처럼 취업 준비도 하나하나씩 깨부수면서 잘 이겨낼 수 있길 바란다.

그동안 나와 함께 고생해준 팀원분들께 정말 감사의 인사를 드리고 싶다. 함께 힘든 상황에서도 최고의 능률을 보여준 여러분 모두 최고✨