[회고록] 나의 첫 번째 팀 프로젝트_🧑‍🤝‍🧑같이가요

 

서론

오랜만의 글인데, 그동안 백엔드와의 첫 번째 팀프로젝트를 진행하느라 블로그에 신경쓸 겨를이 없었던것 같습니다.
 이번 글은 프론트앤드 개발자가 되기로 결심하고, 첫번째 팀 프로젝트를 끝내게 되어 기록을 남기고자, 회고록을 작성하려고 합니다.

공식적인 진행 기간은 24년도 2월 19(월) ~ 3월 28(목) 으로 6주간 진행이 예정되었지만,
진행중, 문제가 좀 많았어서 4월 12일 금요일까지 마지막 커밋까지 작업을 진행했습니다.

이번 글은 회고록인 만큼 글의 상당히 많은 부분을 제 느낀점 & 배운점 위주로 적어나갈 것 같습니다🙄

간단하게 저희 서비스를 소개하고 글을 이어나가겠습니다.

한줄로 요약하면, 저희 서비스는 함께 여행을 가고싶은 사람들을 찾는 서비스라고 볼 수 있습니다.
✅ 여행지, 일정, MBTI 등 여러 조건을 고려하여 적절한 동행자를 찾아보세요.
✅ 실시간 채팅으로 여러 사람들과 소통하며 정보를 공유하고 계획을 만들어보세요.
✅ 이벤트 발생 시 알림으로 요청, 수락, 메시지 등 중요한 정보를 놓치지 않고 확인해보세요.
✅ 여행이 종료된 후 동행후기를 남겨보세요.

 

 

1. 프로젝트의 시작

매니저님으로 부터 무작위로 FE 3명, BE 3명으로 팀을 배정받았습니다. 
모두 모르는 사람들이었고, zep 을 통해 처음 대화를 나눴고, 먼저 가장 중요한 조장을 정했습니다.
리더형과 팔로워형중 전 리더형에 가깝다고 생각하고 조장에대한 생각도 있었지만, 백엔드 쪽에 대해 너무 아는것이 없다는 이유로(팀프로젝트는 실력있는 사람이 팀장을 맡는것이 더 좋은 결과를 낼 것이라 생각하여), 선뜻 나서지 못하였지만, 모두 같은 생각인건지 지원자가 없어, 사다리 타기를 통해 조장을 정해 조장을 정했습니다.
백엔드 분중 한명이 조장을 맡게 되었고, 결론부터 말하면 조금은 아쉬운 부분도 있었지만, 책임감 있게 잘 맡아줘서 감사했습니다.

시작한지 얼마안되, FE인원 중 한 분이 개인사정때문에 그만두게 되어서 최종적으로 FE 2명 BE 3명에서 프로젝트를 진행하게 되었습니다.

 

 

2. 1주차 : 아이디어 및 개발 기획단계

주차별 개발 계획 & 와이어프레임

✔ 주제 정하기
- 프로젝트 주제같은 경우, 각자 아이디어를 생각하고 다시모여 투표를 통해 주제를 정하는 식으로 진행
  그 결과 서론 부분에서 말한것과 같이 같이가요 라는 서비스가 만들어지게 되었습니다.
- 기획단계에서는 기술스택, 주요기능과같은 것들을 정하게 되었고, MVP(핵심기능) 을 위주로 우선순위를 정하고 주차별 개발 계획을 세우게 되었습니다. 
-기획 문서에서는 가독성, 프로젝트의 특징을 찾기 어렵다 등 이유로 피드백을 받고 수정작업을 여러번 거쳐 최종적으로 기획단계를 마무리 했습니다.

- 또한 백엔드의 ERD 및 API 설계와 프론트의 와이어 프레임 작업을 진행했습니다.

[느낀점 & 배운점]
👉 기획하기
 첫번째로, 현업에서는 프론트앤드 개발자가 직접 기획하는 일은 왠만해서는 없을것 같다고 생각은 하지만, 앞으로 나만의 프로젝트를 진행할때도, 그냥 생각나는대로 구현을 시작하지 않고 어떤 식으로 기획을 하고 계획을 세우면 되겠다는 것을 알게되었습니다. 

👉 Wireframe & Flow Chart
 두번째로 와이어프레임 작업을 해본적이 없었지만, 그냥 대충 스케치를 통해 하거나 피그마를 통해 작업한다는 것을 알고, 유투브 및 구글을 통해 곧장 피그마를 배워 나름대로 잘 만들어서 진행한것 같습니다. 
와이어프레임을 만들때 백엔드의 api명세를 보고 만들게 되었는데 어떤식으로 서비스가 만들어질지 머리로만 아는게 아닌 눈으로 보이게되니 어떻게 구현이 될지 명확히 보여 설레는 마음이 생겼습니다. 
앞으로 어떤 회사를 들어갈지 모르지만, 주로 디자이너들의 작업일 텐데 좋은 경험이었던것 같습니다.

 

3. 2 - 4주차 + 5 - 6 주차 : 개발단계

✔ 2주차
 - FE 팀원 한분과 함께 HTML + tailwindCSS + Daisy UI로 퍼블리싱 작업 진행

✔ 3주차/ 4주차
- 실제 API 배포전 MSW를 통한 목데이터 연동

✔ 5주차/6주차
- 실제 API 연동 

[느낀점 & 배운점]
👉 2주차 : taildCSS
 tailwndsCSS 같은경우 저와 팀원 모두 처음 사용하는 CSS 프레임워크로 혹시나 속도에 지장이 생길까 걱정했지만, 본인의 경우, 2~3일만에 적응이되어 걱정함을 모두 날려버릴 정도로 기존의 css를 사용했던것과 비교하여 빠르게 작업이 진행되었습니다. 
 tailwind CSS는 요즘 상당히 인기있는 CSS 프레임워크중 하나인데 다음 사이드 프로젝트에서도 합리적으로 선택할 것 같습니다.

👉 3주차 / 4주차: MSW 연동
 MSW 같은경우 마찬가지로 처음 사용하는 API mocking 라이브러리로 사용하기로 결정을하고, 빠르게 사용법을 익힐겸 블로그 위주로 먼저 찾아 적용했지만, 최근 사용법이 바껴 공식문서를 강제로 정독하여 배우게 되었습니다.
 강제성에 힘입어 공식문서를 통해 공부하는 과정을 익히게 되었던것 같습니다.

 👉 5 / 6 주차: 실제 API 연동
  MSW의 장점중 하나는 실제 API적용시 그 주소만 바꿔 편하게 기존 코드로 api 연동을 수월하게 할 수 있다는 장점이 있어 수월하게 이 과정은 수월하게 진행되었습니다만, 다른 문제가 생겨 실제 API 연동 과정에 지연이 발생했습니다.

결과적으로 5주차끝날때까지 문제를 해결 못하다가 담당 백엔드분과 하나하나 디버깅을 통해 해결했고, 뒷 부분구현을 약 3일만에 어거지로 끝내 대충 돌아가게끔만 만들어 프로젝트 발표를 진행했습니다. 

 

4. 7-8주차: 추가 개발단계

발표종료후 팀원들과 대화후 백엔드 서버 가격 무료기간인 4월 14일까지 못다한 개발을 마무리하기로 이야기 후,
4월12일부로 모든 개발을 다행히 잘 마무리 하였습니다. 

 

 

5. 마무리 (총평)

 

사실 이번글의 목적은 이 마무리를 쓰기 위해 작성을 마음먹었던 것 같습니다.

저의 첫 번째 팀 프로젝트는 아쉬움이 많이 남은 프로젝트이지만, 아쉬움 만큼 정말 많은것을 배우게 된 고마운 프로젝트로 생각이 됩니다.

🚩 [배운점]

 첫번째로, 기술적인 측면입니다.
 Recoil, Tailwind CSS, daisyUI 와같은 라이브러리뿐만 아니라react-calendar(캘린더), react Quill(에디터) 등 이미 만들어진 많은 라이브러리들을 평소에 사용할 일이 없었기 때문에 사용할 일이 없었는데, 이러한 라이브러리들을 최대한 활용해 봄으로써 어떤식으로 사용을 할 수 있나 과정을 직접 경험해 봄으로써 알게되었고, 다른 라이브러리들도 대부분 비슷하다는 것을 알게되었습니다. 
물론 본인이 캘린더와 같은 라이브러리를 빠른 시간내에 직접 만들 수 있다면 가장 좋겠지만, 이미 만들어진 재료들을 잘 사용할 수 있는 것도 개발자의 능력중 하나라고 생각하고 있었습니다. 이번 기회에 이미 만들어진 재료를 잘 사용할 수 있다는 자신감을 갖게되었습니다. 

두번째로, '소통' (백엔드와의 소통) 측면입니다.
 프론트앤드 개발자는 흔히 기획자, UI UX디자이너, 백엔드 개발자 , 프론트앤드 개발자와도 협업을 한다는것은 알고 있었습니다. 하지만, 백엔드 개발자와 어떤 부분을 어떻게 소통을 하라는건지 실제로 하지않아 와닿지 않았었습니다.
글 위의 5-6주차 기간 실제 api 적용시 2주간 해결못한 문제가 있었습니다. 굳이 잘못을 따지자면 백엔드 측의 문제였습니다. 하지만, 만약 프론트측에서 경험이 많은 개발자 였다면, 어떤 부분을 소통해야 할지 알고 체크했다면 해결할 수 있는 문제였는데, 제가 경험이 부족한것을 탓이라고 할 수도 있겠습니다. 
누굴 탓하고자 글을 적은것은 아니고, 이번 경험을 통해 백엔드의 어떤 부분을 체크해야 할지에 대해 알게되었습니다. 언젠가는 만나게 될 수 있는 경험인데, 정말 좋은 경험을 했다고 생각합니다. 당시에 너무 해결이 안되 답답했지만 돌이켜보니 정말 감사하다고 생각하고 있습니다. 

세번째로, '프론트 앤드 개발자의 백엔드 지식의 필요성' 입니다.
 기업채용 사이트를 확인하면 프론트앤드 개발자를 뽑더라도, 백엔드의 전체적인 과정을 경험해본 개발자를 우대조건으로 써놓은 경우를 본적이 있었습니다. 
물론 평소에도 백엔드쪽에도 관심이 있어, 전체적인 큰 그림 정도는 유투브를 통해 알고 있었지만, 프로젝트 진행시 백엔드와 이런 기술은 구현이 가능한가에 이런 api 추가는 어려운가 등 백엔드에대해 아는것이 너무 부족해 소통시 답답함이 느껴졌었습니다. 프론트의 next.js와 typescript를 먼저 배워야 하겠지만, 백엔드 기술에 대한 궁금증과 지식에 대한 욕심이 더 커지게 된 계기가 되어준 프로젝트였다고 생각합니다. 

마지막으로, '해결하고자 하는 의지' 입니다.
 이번 프로젝트를 진행하며 정말 많은 문제를 만났고, 결과적으로 해결하고자 했던 문제를 어떻게든 해결했다는 것입니다. 이번 프로젝트에서 문제들은 주로 백엔드와 api 연결과정에서 나왔었는데, 여러 정황상 저의 코드에는 문제가 없음에도 본인의 실력에 의문이 있어 항상 저의 코드를 의심하며 디버깅 했었습니다. 결과적으로 다행히 대부분 본인의 문제가 아니였지만, 이러한 과정에서 어떠한 부분에서 문제가 있을지 추론으로 자연스럽게 나아갔던것 같습니다. 결국 해결하고자 하는 의지를 가지고 끝까지 파면 된다는 것을 확신할 수 있게 되었습니다. 


😱[아쉬운점]
✔ 프로젝트 고도화 측면
일단 프로젝트를 완성하고, 리팩토링을 하며 더 고도화를 해보고싶은 마음이 있지만, 모두가 저와같은 마음이 아닌건지 한분씩 소통공간에 들어오는 시간이 적어지며 멀어지는 모습이 보여져 이렇게 프로젝트가 마무리된점이 아쉬웠습니다.

✔ 수익성
 포트폴리오를 위해 만들어진 프로젝트라 그런지 저희 서비스의 수익성은 여행 광고배너 넣는것 말고는 딱히 찾아볼 수 없었던것 같습니다.

 

 

마무리

이번 프로젝트에서 가장 기억이 남는것은 4주차때 만났던 문제가 약 2주간 해결이 안되던 문제였습니다.

이번 프로젝트는 실패한 프로젝트라고 생각하고, 면접같은 곳에서 실패한 경험을 얘기하라고 할때 하면 되겠다라고 혼자 위안을 삼으며 프로젝트를 진행했던것 같습니다.🙄 

하지만 끝까지 해결하고자 여러 방법을 시도했고, 멘토님께도 도움을 요청했었지만 결국에는 본인의 힘으로  해결했을 때의 그 기분은 정말 카타르시스가 느껴졌었습니다🥰

프로젝트가 실패할뻔 했고, 아쉬움도 많이 남는 첫 번째 팀 프로젝트 였지만, 정말 아쉬움이 많은 만큼 배운것도 많아 기억에 오래 남지 않을까 한 프로젝트였던것 같습니다. 

이제 본격적으로 취업시장에 뛰어들 예정인데, 부족한부분들을 공부를 지속하며 나아가도록 다짐하며 글을 마무리 하겠습니다.