기업연계 파이널 프로젝트 회고(feat. PM, UXUI, FrontEnd, BackEnd)

어떻게 보면 마지막 파이널 프로젝트를 위해 부트캠프를 시작한것인지도 모르겠다.

부트캠프를 통해서 협업을 경험하기위해 온것인 만큼,

기업과의 연계를 통해 실제 현업에서 어떻게 프로세스가 진행되고

실제 기획부터 참여하며 협업을 통한 경험을 얻고 싶었다.

 

결과적으로는 협업을 하기는 했지만 정말 매운맛 프로젝트 경험을 하게 되었다.

담당 멘토님 또한 현업에 가게 되더라도 이정도로 매운맛을 보지는 않을것이니 걱정하지마라고 하셨다...

그만큼 열악한 상황에서 우리들은 큰 사건사고없이 프로젝트를 마무리할 수 있었다.

 

이번 프로젝트에서도 팀장을 하게 되었다.

일정 조율 및 프로젝트 진행을 하면서도 부족한 점들이 많이 있었지만

1인분이상을 해주며 마무리까지 완주한 우리 프론트엔드 팀들에게 박수👏🏻를 쳐주고 싶다.

특히 기술이사 패캠리더 쑨주님.. 쑨주님 없었으면 이 파이널 프로젝트는 초기에 도망가지 않았을까 싶다..

 

그외에도 열악한 환경속에서 끝까지 포기하지않고

같이 마무리를 해준 디자인팀, 그리고 백엔드팀에게도 감사하고 고생했다고 전해주고싶다..!

---

🧑🏻‍💻 협업

PM 2명, UX/UI 디자이너 3명, 프론트엔드 4명, 백엔드 3명

이렇게 12명이서 우리는 프로젝트를 시작했다.

 

PM은 기획도 기획이지만 문제 해결 및 커뮤니케이션과 일정관리에 있어서 큰 역량이 필요하다고 생각이 든다.

이부분에 있어서 큰 아쉬움이 있다.

 

소통이 되지 않았고, 진행속도에 있어서 개발을 들어가야할 시간이 1주일이나 지났음에도

우리가 할 수 있는건 없었다... 한달이라는 시간을 프로젝트를 하면서 개발에 집중해도 모자를텐데

개발이 시작한지 일주일 10일이 지나도 개발을 시작할수가 없었다..

 

디자인이 잡혀있지 않았고 PM쪽에서 정리되지 않은 플로우들 그리고 와이어프레임...

아무것도 나오지 않아서 우리는 작업할게 없었고 프로젝트 초기 프로젝트 세팅,

기술 스택을 정한 상태에서도 진행할 수 없다는것이 너무 답답했던것 같다.

 

이건 이렇게 일정을 조정한 패캠측의 잘못일까? 하지만 그 누구를 탓할 시간도 아까웠다.

 

디자이너로 일을했던 경험으로 현재 팀의 디자이너분들에게도 의견들을 계속 제시하며

UX/UI에 조금이나마 도움이되고 싶었다.

사용자를 생각하여 개발을 하면서도 필요한 부분들의 플로우들과 요소의 위치들을 이야기하며 작업을 진행했다.

 

그렇게 시간이 지나서야 PM과 디자인팀과 개발팀끼리 다시 소통이 진행되었고,

디자인이 확정되기전 와이어프레임을 토대로 로직들을 진행하기로 하였다.

 

남은 기간은 3주였고 그 기간 내에 프로젝트의 결과물을 만들어내야했기에

프로젝트를 완성하고자하는 마음 하나로 3주라는 시간을 정말 알차게 보낸것 같다.

그래서 더 성장할 수 있었지 않았을까?

 

그래도 지금까지 PM, 디자이너, 백엔드 분들이 없었다면 완성은 못했을거다.

죽지않조 살아있조.. 다들 고생했어요...

---

🖥 프로젝트 주제

이번 프로젝트의 주제는 PB와 투자자를 이어주는 위치기반의 매칭 플랫폼이다.

처음 6가지의 프로젝트를 본 순간 가장 로직이 어렵고 구현해야할 페이지가 많은 이 프로젝트가 하고싶었다.

어차피 배우러왔는데 가장 어려운거 해보는게 좋지 않을까? 라는 생각이 지배했던것 같다.

위치기반의 플랫폼인것도 재밌는 부분이었던것 같다!

 

나중에 알게 되었지만 이 프로젝트를 하려는 사람은 대부분 없었다고 한다..ㅎ 누가봐도 어렵고 재미없는 프로젝트였다고..

 

이 프로젝트의 핵심기능 정리

- 내 위치기반을 통해 가장 가까이 있는 PB들을 거리별로 추천 및 찾을 수 있다.

- 블로그처럼 라운지에서 PB들의 컨텐츠들을 확인하고 북마크, 댓글 기능

- 추천 PB 매칭, 성향분석 및 위치정보를 통해 추천을 받을 수 있다.

- 대면 / 유선 상담 방식의 예약 기능 ( 예약 시간에 맞는 신청 및 변경, 수정 CRUD)

- 상담관리 및 고객관리 ( 상담일정 캘린더 기능, 상담 후기 등 )

---

⚙️ 내가 담당한 기능

- 메인페이지

   * 나의 위치 (GeoLocation, kakao map API, 검색 API) 

   * 위치기반 PB 리스트

   * 전문 분야별 전문가 리스트 캐러셀

   * 성향 별 PB 투자 배너

   * 증권사별 전문가 리스트 캐러셀

 

- 투자자

   * 나의 상담 페이지

   * 신규예약 페이지

   * 확정된 예약 페이지

   * 완료된 상담 페이지

   * 취소된 상담 페이지

   * 후기 작성 페이지

   * 나의 후기 페이지

 

- PB

   * 일정관리 페이지 ( Calender )

   * 상담 가능 시간 변경하기

   * 신규예약 페이지

   * 확정된 예약 페이지

   * 예약 변경 페이지

   * 완료된 상담 페이지

   * 취소된 상담 페이지

 

- Admin 관리자 페이지

   * 공지사항 CRUD / 리스트 출력, 개별 페이지, 수정, 삭제

   * FAQ CRUD / 리스트 출력, 개별 페이지, 수정, 삭제

---

🙆🏻 협업 프로젝트를 통해 배운것들

- 협업을 하면서 프론트엔드 개발자들은 PM, 디자이너, 백엔드 이 중에서 가장 중앙에 있는 위치인걸 알게 되었다.

기획에 있어서도 이야기할게 많이 있었다,

기획 된 프로젝트 기술명세서 및 플로우차트를 보고 오버스펙이 되지 않아야 했기에 였다.

 

그 외에도 불필요한 플로우들은 제거하는게 개발에 있어서 중요한것들이 있었고,

디자인 부분에 있어서도 UX적인 부분들과 직접 프론트엔드 개발에 들어가게되면 요소의 위치, 요소의 기능, 어떻게 다음 페이지로 넘어갈지, 인터렉션, 공통 컴포넌트, 아이콘 등등 디자이너와도 맞추어야하는게 정말 많았다.

 

- 백엔드하고는 API에 있어서 가장 많은 이야기를 나누었고,

API를 연결하면서도 나타나는 에러, 그리고 에러코드, 상태에 있어서도 많은 이야기를 계속 나누었다.

 

역지사지

- 디자이너로 일하면서 개발자들하고 일을할때 개발자들의 마음을 알게되었다.

그땐 왜 개발자들이 구현이 되고 안되는 것에 있어서 많은 말들을 하는지 이해가 되지 않았지만.. 역시 사람은 겪어봐야한다.

 

- 근데 역시 디자인보다 개발하는거 내 적성에 더 맞는데? 라는 생각이 들었다.

협업을 하며 소통을하고 맞추어가는 과정이 즐겁기만 했다면 거짓말이지만

그렇게 문제들을 해결해나가고 완성을 했을때의 성취감은 말로 표현할 수 없다!!! 재밌엉!!

 

- 프론트엔드와의 소통

프로젝트를 들어가면서 기술스택부터 시작하여 컨벤션들을 정리하고, 디자인된 작업물을 보면서 공통 컴포넌트들을 정렬했다.

지금까지 팀프로젝트를 하면서 공통컴포넌트들만 분리했다면 이번 프로젝트에서는 css를 class화 하여 공통 컴포넌트들도 분리하였다.

같은 UI이지만 다른일을 하는 컴포넌트들은 css로만 관리를 하는것도 좋다고 생각이 들었다.

그리고 백로그를 따로 관리하며, 중요 핵심기능들을 먼저 작업하며,

협업이기에 공통컴포넌트 작업을 먼저 진행하며 프로젝트를 시작하였다.

 

- 백엔드와의 소통

백엔드와는 정말 친해질 수 없는걸까? 아니 부딪히는 일들은 많이있지만 너무 멀어지지는 말자는 생각이 들었다.

어떻게 보면 가장 많은 이야기를 나누어야하는 상대는 백엔드였고, API를 나누고 에러가 발생했을때의 소통을 위해서는 너무 적대심이 있으면 안된다! 이번 프로젝트에서는 백엔드와도 큰 트러블없이 무난하게 넘어간거 같다! 

스웨거

- API는 스웨거를 통해 공유하며 진행했다.

 

- 디스코드

- 디자이너, 프론트엔드, 백엔드 모두 디스코드에 상주하며 그때그때 생기는 이슈들을 공유하며 작업을 진행했다.

- 매일 오후 1시에는 전체 팀이 모여 스크럼회의를 진행했고, 프론트엔드팀은 매일 저녁 9시에 모여 스크럼회의 후 PR을 날리고 코드리뷰를 진행하고 merge를 했다.

---

⭐️ 프로젝트를 하면서 있던 이슈들

이번 프로젝트에서는 Next.js 13버전을 사용했다.

App단위로 페이지 구조를 설계해야했고, SSR, SSG에 있어서 개념들을 다시 잡고, CSR에 있어서도 어떻게 해야 더 효율적으로 관리가 될지 생각하게 된것 같다.

 

특히나 이번 프로젝트에서 맡은 페이지들 중 예약관련 페이지들이 있었는데

신규, 예약, 완료, 취소 등 각 카테고리별로 중첩으로 타고타고 들어가는 페이지들이 있었다.

이 부분에 있어서 구현을 어떻게 해야 성능면에서도 유지보수 관리에 있어서도 좋을지 생각한거 같다.

 

그 중 세가지 방법을 추렸다. 그 중에서 장단점을 정리해보았다.

1. QueryString

장점 : 동적으로 변경 가능한 많은 매개 변수를 처리할 수 있다

단점 : 복잡한 쿼리 문자열을 다뤄야 했기 때문에 로직이 복잡하며, 현재 상황에서는 불필요하다고 생각이 들었다.

결론 : 예약 관련 페이지들은 신규, 예약, 완료, 취소 상담에 대한 정적인 정보들만 뿌려주기 때문에 이번 해당 페이지들에서는 맞지 않다고 판단했다.

( 나의상담, 고객관리 페이지에서 사용했다, 페이지를 들어가기 전 각 항목별로 QueryString을 사용하여 데이터를 뿌려줬다.)

 

2. Props

장점: 컴포넌트의 일부로 props로 전달하기 때문에 페이지별로 조건부 렌더링을 시키며 하나의 컴포넌트로 관리할 수 있다.

단점 : 중첨된 페이지가 복잡하기도 했고 각 카테고리별로 보여지는 해당 섹션들이 달랐다. 데이터 전달이 번거롭다고 느껴졌고, 구조도 복잡해진다고 판단했다.

결론 : 페이지들마다 보여지는 부분들에서 같은 섹션들을 가진 부분들은 컴포넌트화 시켜서 사용하기로 했다.

그 안에서 바뀌는 부분들은 조건부렌더링을 시키거나 각 해당되는 컴포넌트들을 갈아끼우며 신규, 예약, 완료, 취소에 필요한 컴포넌트들을 사용하기로 했다.

 

3. 동적라우팅 / slug(params)

장점 : 각 해당 페이지에서 id값만 params로 전달받아 페이지에서 API요청을 보냈다. slug로 값을 전달하여 각 페이지마다 해당 정보들을 보여줄 수 있었다. 라우터 처리도 간편했고, 섹션별로 컴포넌트를 불러와서 각 페이지에 맡게 사용했다.

단점 : 동적으로 변경되는 매개변수들을 처리하기에는 적합하지 않을 수 있지만 정적인 데이터였고 각 페이지에서 API요청을 하기 때문에 적합하다고 생각했다.

결론: 투자자, PB의 예약 관련 페이지들은 동적라우팅을 통해서 간단하게 구현할 수 있었다.

그래도 중복되는 코드들을 처리하려면 어떻게해야할지 한번더 고민이 필요한것 같다.

각 페이지별로 유지보수를 할 수 있는것이 큰 장점이라고 생각이 들었다.

 

---

위치 정보 Geolocation / Kakao map API

현재 프로젝트에서 필요한 기능

- App 접근시 위치정보를 통한 도로명, 읍, 면, 동 이름을 표시

- 현재위치의 위도경도를 통해 PB의 위치와 비교하여 가까운 PB 표시

- 현재 위치 접근을 거부시 위치를 등록하여 등록한 위치에서 가까운 PB 표시

 

Geolocation

현재 위치를 들고올 수 있는 Geolocation으로 위치정보를 들고와서 위도/ 경도를 스토어에 저장하고 백엔드로 위도, 경도를 넘겨주도록 하였다. 다른 페이지에서도 가까운 위치의 PB 정보를 들고와야하기 때문에 Zustand를 통해 스토어로 관리하였다.

 

만약 위치를 거부했거나 등록한 위치를 삭제 했다면?

지역 등록하기를 통해 KakaoMap API를 사용해서 검색어에 맞게 위치를 지정할 수 있다.

주소 검색을 통해서 주소명을 검색하고

그 선택한 주소에서 좌표만 추출하여 좌표를 통해서 행정구역 정보로 변환시키도록 2가지 API를 통해서 변환하여

사용자들의 나의 위치가 행정구역 동이름으로만 표시되도록 로직을 구현하였다.

 

---

💨 아쉬웠던 점

- 가장 아쉬운점은 처음부터 시작이 좋지 않았다.

다른 팀처럼 시작부터 문제없이 스타트가 되었다면 어땠을까 하는 아쉬움이 있다.

- 항상 그렇지만 이번 프로젝트는 특히나 시간이 부족했다.

늦게 시작한것들도 있었지만 그만큼 수면시간이 너무 부족했다.. 마지막 주는 일주일동안 4~5시간도 못잔거 같다..

- 리팩토링도 좋지만 우선적으로 구현을 하자.

좋은코드를 위해서 코드를 수정하는 시간들이 몇몇 있었는데 지나고보면 이거또한 시간을 가지지 못하고 작성한거기 때문에 좋은코드라고 당당하게 말할 수는 없을 것 같다.

- 컴포넌트를 쪼개고 쪼개자

최대한 컴포넌트를 나누자고 했지만 많은일을 하는 컴포넌트들이 생각보다 많다. 하나의 일을 하는 컴포넌트를 만드는 습관을 들이자.

- 생각하고 설계하고 다시한번 더 생각하고 코드를 작성하자

* 생각나는대로 코드를 작성하니 코드를 작성하면서도 수정..수정..수정을 한다..

처음부터 생각하는 시간을 조금이라도 더 가지고 props전달 -> 컴포넌트 구조 -> API 요청 등을 생각하고 코드를 작성하는게 얼마나 중요한지 이번 프로젝트에서 다시 한번 느끼게 된것 같다.

---

🙏 느낀 점

- 프론트엔드는 커뮤니케이션이 중요한것 같다.

이번 프로젝트에서도 팀장을 맡아서 진행하면서 여러사람들과 소통을 하는일이 많이 있었다.

PM, 디자이너, 백엔드, 기업 대표님... 등등 협업을 하는 것중에서도 중요한 소통을 하면서 중요한 사항들을 전달하고 어떻게 결정을 할지가 가장 중요했다.

이번 프로젝트에서도 중간위치에서 다른 타팀들과 어떻게 의견들을 오고가고 해야할지 알게 된것 같다.

 

나의 의견도 중요하지만 다른사람의 의견들을 들어보고 종합하여 가장 베스트의 의견들을 정리하고 받아들이고 실행하는것.

 

- 개발자는 끊임없이 공부해야한다. 이번 프로젝트에서도 많은 것들을 배웠고 배우는 과정이 너무 즐거웠다.

프로젝트를 진행하면서 코드를 작성하고 구현하고 에러들을 해결하고 완성했을때의 성취감을 잊지 말자.

---

🔥 앞으로의 계획

- 현재 원티드 프리온보딩 인턴십을 진행중이다.

거기서도 자진하여 팀장을 한다고 했다. 7명이 한팀이 되어 진행하는데 각 주마다 기업과제들이 나온다.

기업과제들을 팀별로 정리하고 팀프로젝트를 진행한다.

한달동안 진행하는 동안에 코딩테스트와 면접스터디를 병행하려고 한다.

부트캠프가 끝났다고해서 나태해지지말고 후회하지 않도록 하자!!