[프론트엔드 취업 스쿨] 협업 프로젝트 후기

INTRO

저는 정보통신공학을 전공하며 개발자에 대한 꿈을 키워갔습니다. 학교에서는 주로 다루지 않던 프론트엔드 개발을 유튜브나 강의를 통해 독학하며 교내 프로그램에 참가해 웹 프로젝트를 조금씩 개발해 보기도 했습니다. 하지만, 졸업이 다가왔음에도 그럴싸한 포트폴리오도 없고, 특히 백엔드와의 협업을 진행해 본 적이 거의 없어 개인적으로 부족함을 많이 느끼고 있었습니다.

프론트엔드 개발에 대한 지식을 처음부터 배우고, 개인 프로젝트를 거쳐 협업 프로젝트까지 진행할 수 있는 제로베이스 부트캠프가 제 이목을 끌었던 것 같습니다.

특히, Git/GitHub나 컴퓨터 구조와 같은 것들을 함께 배울 수 있다는 것이 흥미로웠습니다. 컴퓨터 구조와 운영 체제의 이해가 중요하다는 것은 알고 있었으나, 비전공자를 위한 부트캠프에서는 거의 다루지 않는 분야였기 때문에 제로베이스 부트캠프는 개발자가 되기에 좀 더 적합하지 않을까? 생각하게 되었습니다.

더해서, 프레임워크 학습 단계에서 React 뿐만 아니라 Vue 프레임워크까지 배울 수 있다는 점이 좋았습니다. 아, 처음에는 React랑 Vue 두 개를 언제 어떻게 학습한다는거지? 싶었는데, 두 가지 중 하나를 선택해서 학습할 수 있습니다! 하지만 React를 선택했다고 React에 대한 자료만 받는것이 아닌, Vue 자료도 함께 받기 때문에 나중에 부트캠프를 수료하고 난 다음에 혼자 Vue를 공부할 수도 있습니다. (비대면 부트캠프의 장점..?ㅎ)

협업 프로젝트의 시작

2023.10 ~ ing

아이디어 선정

우선, 저희는 프론트엔드 2명, 백엔드 3명으로 팀이 이루어졌습니다. 팀이 이루어지고 난 후, 아이디어를 기획하기까지 시간이 촉박했지만 개발자의 입장에서 기획보다는 개발에 의미를 두는 게 좋겠다는 멘토님의 말씀을 반영해서, 개발하고 싶었던 기능들(포스팅, 채팅, 알림, 페이지네이션, 지도API, 로그인, 검색 등)을 모두 담은 서비스를 기획하게 되었습니다.

디자이너가 없는데..

프론트엔드, 백엔드 개발자로 구성된 팀이다 보니, 디자인에 대한 걱정이 있었습니다. 개발을 할 수 있다 한들, 퀄리티는 디자인에 따라 결정되기 때문에.. 다행히도, 저희 팀원 중 한 분이 디자인 툴을 다룰 줄 알아 디자인을 도맡아 주셨습니다. 😳

디자인 시안 중 ...

모르는 부분이 생기면?

아무래도 수강생들끼리 팀이 이루어져 있다 보니, 모르는 것도 많고 궁금한 것도 많습니다. 제로베이스 협업 프로젝트 과정 중에는 프론트엔드 멘토링, 백엔드 멘토링이 주 1회씩 총 4번, 전체 멘토링이 1번 있습니다. 멘토링 시간 때 진행상황이나 모르는 부분은 화면공유를 통해 피드백을 주고받을 수 있었습니다. 또한, 멘토링 시간이 아니더라도 멘토님께 DM을 통해 자유롭게 질의사항을 물어볼 수 있었습니다.

처음 멘토링 시간때는 협업을 원활하게 하기 위해 Github 툴을 어떻게 써야 잘 사용하는 건지에 대해 물어봤었습니다. 협업 레포지토리 링크를 공유드려 어떻게 진행되고 있는지도 보여드렸습니다. 이후에 Pull request를 올리면 멘토님께서 코드 리뷰도 진행해주셨습니다.

Tweaver

혼자가 아니야, Trip with buddy - Tweaver

Tweaver는 좀 더 쉽게 여행을 떠날 수 있도록 도와주는 당일치기 여행 스케줄링 + 일행 모집 플랫폼입니다.

개발 툴

프론트엔드는 제로베이스 과정 중 가장 중점적으로 배우는 React를, 백엔드는 Spring boot를 사용했습니다. 여러가지 개발 툴이 존재하지만, 제로베이스 강의를 수강한 팀원들이 공통적으로 사용할 수 있는 툴을 사용해야 프론트, 백엔드 끼리의 협업이 원활할 것 같아 선택하게 되었습니다.

커뮤니케이션

제로베이스 부트캠프는 Slack 에서 공지사항을 전달받거나 DM을 주고받습니다. 협업 팀도 Slack 채널에 생성되었지만, 주5회 스크럼을 진행하기 위해 Slack 채널과는 분리가 되었으면 좋겠다는 회의끝에 Discord를 통해 스크럼을 진행했습니다. API 수정이나 배포 등과 같은 공지가 있는 경우에는 Slack 채널을 사용했고, 스크럼이나 모각코(모여서 각자 코딩)등은 Discord를 사용했습니다.

협업 프로젝트 관련하여 일정이나 회의록 등은 노션에서 관리했습니다.

프로젝트를 진행하기 전, 프로젝트 규칙이나 컨벤션을 미리 작성해서 공유할 수 있도록 했고, 기능마다 일정을 미리 잡아두어 개인별로 어느정도 진행되었는지 확인할 수 있는 칸반 보드를 설정하고, 개발 중 오류가 발생한 경우, 그 오류를 어떻게 해결했는지에 대한 내용을 트러블 슈팅에 작성했습니다.

혼자만의 프로젝트였다면 기록하는 게 미뤄지기 쉽상이며, 미루다 보면 또 언제 어떤 문제와 해결방안이 있었는지에 대해 까먹게 되기 마련이죠. 저희팀은 해당 부분에 대한 문제를 인지하고 있었고, 때문에 서로 독려하며 기록하는 것에 대한 부담감을 줄이고자 노력했습니다.

백엔드와의 협업

백엔드 API 작업이 완성되기 전, 프론트엔드는 어떤 임의의 데이터를 가져와서 사용해야 하는지에 대한 고민이 있었습니다.

이미 만들어진 공용 API만 사용해봤지, 백엔드와 같은 선상에서 개발을 진행해 본 적이 없었기에.. 🤧

이 부분에 대해서는 프론트엔드 멘토님께서 알려주신 방법으로, json-server를 사용할 수 있었습니다. db.json 파일에 mock data를 담아두고, 로컬로 서버를 돌려 데이터를 불러올 수 있었습니다. 협업 프로젝트가 끝난 후, 백엔드 서버가 지속되지 않을 경우에도 프론트 배포 사이트가 정상적으로 동작할 수 있는 방법으로 적용할 수 있습니다.

// db.json 중 일부
"places": [
  {
    "category": "문화시설",
    "name": "삼성동 코엑스",
    "x": 127.0583,
    "y": 37.5124,
    "address": "서울특별시 강남구 테헤란로 507",
    "placeCode": "17573702",
    "orders": 1,
    "distance": 13
  },
  {
    "category": "기타",
    "name": "광화문 광장",
    "x": 126.9768,
    "y": 37.5704,
    "address": "서울특별시 종로구 청계천로 35",
    "placeCode": "8193961",
    "orders": 2,
    "distance": 777.7
  },
  ...
] 	

데모데이

데모데이때는 정해진 협업 프로젝트 기간이 끝난 후 저희의 서비스에 대해 전반적으로 설명하는 시간을 가졌습니다. 노션으로 데모데이 자료를 정리해서 발표 자료로 사용했어요. Tweaver 서비스를 기획하게 된 계기, 서비스 아키텍처, ERD, 기술스택, 주요기능, 트러블 슈팅 등을 작성해 두었습니다. 자세한 내용은 Tweaver - 데모데이를 통해 확인할 수 있습니다.

사실 저희팀은 기획된 기능 중에서 데모데이때까지 완성하지 못한 기능이 있었습니다. 완성하지 못하고 개발을 끝낼수는 없어, 투표끝에 저희끼리 기간을 연장해서 기능 개발을 지속적으로 하기로 결정했습니다. 소셜 로그인, 알림 기능에서 멘탈의 붕괴😱가 왔지만 안되는것도 붙잡고 늘어지다보니 완성이 되어 있더라구요. 파이팅넘치고 의지있게 끝까지 할 수 있게 해 준 팀원들에게 너무 감사..^^ 합니다.

협업 프로젝트는 팀원을 잘 만나야 한다는데, 너무 좋은 팀원을 만나서 더 행복하게 프로젝트를 진행할 수 있었던 것 같습니다.

저희는 완성하지 못한 기능을 완성한 후에도, 추가 기능을 기획하면서 2차 개발을 진행하려 합니다.

2024년에도 ing...

나의 잊지 못할 첫 협업 프로젝트

https://zero-base.co.kr/category_dev_camp/school_FE

'해당 게시글은 소정의 원고료를 받아 작성되었습니다.'