👑내일배움캠프 최종프로젝트 회고

✨ @gather_here 구경하기

4개월의 기나긴 시간이 지나갔다. 매일 12시간 이상 공부하면서도, 나와 비슷한 사람들과 함께할 수 있는 시간은 행복했고, 혼자서는 해낼 수 없는 부분들을 다양한 분들과 협업을 통해 만들어가는 경험은 내게 매우 값진 경험이었다. 그리고 마침내 마지막 프로젝트를 우수상 수여 받는 좋은 성적으로 수료할 수 있었다! 오늘은 최종 프로젝트의 시작부터 끝까지를 회고해보는 시간을 가져보려 한다.

---

📖 시작전에

마지막 프로젝트는 프론트엔드 개발자 4명과 디자이너 1명으로 이루어진 팀이었기 때문에, 실제 업무 프로세스인

요구사항 정의 → 기획 → 디자인 → 개발 → QA → 배포

디자인을 제외한 모든 부분을 수행해야 했다. 이번 회고에서는 요구사항 정의부터 배포까지의 과정을 정리해보려 한다.

---

📢 요구사항 정의 (주제 정하기)

기획회의 초기에는 스포츠와 공연을 실시간 채팅으로 소통하며 함께 즐길 수 있는 서비스를 구상했지만, 국내 스포츠 관련 API의 부족과 공연 데이터의 제한으로 인해 주제를 변경하게 되었다.

이 과정에서 "우리에게 필요한 서비스가 무엇일까?"라는 고민을 하게 되었고, 개발 시 팀 단위로 협업하여 프로젝트를 완료해야 하는 경우가 많다는 점에 착안했다.

이에 따라, 개발 프로젝트를 함께 진행 할 수 있는 사람들을 보다 편리하고 쉽게 찾을 수 있는 사이트를 만들자는 의견이 나왔다. 이렇게 해서 최종적으로 선정한 주제는 IT 관련 프로젝트 인원을 구하는 서비스로 결정되었다.

기존에 유사한 서비스가 있지만, 우리 팀은 실시간 오픈 채팅 기능과 행사 정보를 한눈에 볼 수 있는 기능을 차별점으로 삼았다. 주제를 결정한 후, 본격적으로 기획에 들어갔다.

참고한 경쟁사 사이트들

• hola
  

• 서핏

• 비사이드

---

📅 기획

초기에 피그마로 간단한 와이어프레임을 제작하고, 각 기능의 역할을 스토리보드 형식으로 정리했다.

이후 회의에서 Hola와 유사한 부분이 많다는 문제를 발견하여 전반적인 수정에 들어갔다. 우리가 강조하려는 실시간 오픈 채팅 기능과 행사 정보를 한눈에 볼 수 있는 기능을 돋보이는 방향으로 레이아웃을 변경하였다. 이후 부족한 부분을 보완하며 스토리보드를 수정하고, 플로우차트도 작성하여 전체 구조를 정리했다.

기존 스토리보드

수정된 스토리보드

작성한 플로우 차트

---

🎨 디자인

스토리보드와 플로우 차트를 기반으로 디자인을 하였다. 본격적으로 들어가기 앞서, 이번 프로젝트의 반응형 제작이 필수 사항이었기 때문에, 초기 설정이 중요하다고 판단했다. 반응형 작업은 초반에 분기점을 잘 정해야 이후 작업이 수월해지기 때문에, 하루를 디자인 관련 회의에만 집중하며 계획을 세웠다.

디자이너분과 함께 데스크탑과 모바일 사이즈에 대해 깊이 논의했다. 실제 웹사이트에 적용했을 때 최적의 사이즈를 찾기 위해 여러 차례 회의를 거쳤고, 그 결과 모바일, 태블릿, 데스크탑별로 적절한 분기점을 설정할 수 있었다.

디자인 시안은 이를 바탕으로 데스크탑과 모바일 버전으로 제작하기로 했다.

가장 고민이 많았던 부분은 메인 UI였다. 행사 정보를 제공하는 캘린더와 오픈 채팅 기능이 중요한 요소였기 때문에, 이 두 기능을 화면 왼쪽에 고정하고 싶었지만, 반응형 레이아웃으로 구현하는 것이 쉽지 않았다.

튜터님들께서도 테블릿 사이즈부터는 해당 기능을 빼는 것이 어떻겠냐는 피드백을 주셨다🥹 하지만, 우리는 이 기능들을 꼭 살리고 싶었기에 반응형으로 최대한 자연스럽게 녹여내기 위해 많은 고민을 했다.

그 결과, 태블릿 사이즈부터는 오픈 채팅 기능을 왼쪽 하단의 버튼으로 전환하여 누르면 모달 형식으로 나타나도록 하고, 캘린더는 하나로 합쳐져 일렬로 정렬되도록 변경했다. 여러 차례 논의와 조정을 거쳐, 주요 기능이 모든 화면 사이즈에서 자연스럽게 활용될 수 있도록 최적화했다.

모바일, 태블릿, 데스크탑 사이즈 지정

• s: 335px, m: 744px, L : 1048px
  

데스크탑 디자인 시안

모바일 디자인 시안

---

💻 개발

본격적인 개발에 앞서, 먼저 각자의 기능을 난이도에 따라 세분화하고, 이를 바탕으로 업무를 분담했다. 사용할 기술과 깃허브 규칙을 정하고, 데이터 처리를 위한 테이블도 설정했다. 이후 MVP 전까지의 개발 일정을 수립하고 단계별 목표를 설정한 후, 본격적으로 개발을 시작했다.

기능 세분화 → 담당 업무 분배 → 사용할 기술 및 깃허브 규칙 정리 → ERD 설계 → 개발 일정 계획 → 개발 셋팅 완료 → 개발 시작

기능 세분화 및 담당 업무 배분

사용할 기술 정의

깃허브 규칙 정리

ERD 설계

개발 일정 계획

🥹 번외 ( MVP ) 이후

MVP 중간 발표 전날, 새벽 5시까지 무리한 탓인지 일정이 빠듯해서인지,
우리 조는 평소보다 미흡한 결과로 발표를 하게 되었다. 발표 직후 가장 큰 문제였던 데이터 소모 이슈를 비롯한 문제점들을 수정했다.

주요 원인은 채팅 기능의 무한 루프, 북마크 버튼의 알 수 없는 호출, 그리고 최초 회원가입 시 마이페이지 정보를 불러오지 못하는 것이었다.

다행히 하루 만에 원인을 파악하고 팀원들이 문제 해결에 집중했으며, 이후 일주일 동안 놓쳤던 부분을 보완하고 성능 최적화에 주력했다.

개인적으로 프로젝트 하는 동안 이 기간은 가장 힘들었지만, 많은 것을 배울 수 있었던 시간이었다. 기능 구현도 중요하지만, 성능 최적화와 각 기능의 완성도를 높이는 것이 중요하다는 점을 깨달았다. 그래서 MVP 이후 추가 기능 개발보다는 부족한 점을 보완하는 것을 우선순위로 두고 계획을 수정하게 되었다.

• 관련 글
  ( 트러블 슈팅 ) 마이페이지 최초 회원가입시 정보를 못불러오는 이슈 해결

---

🔨 QA

MVP 발표 후 유저 테스트를 진행하였다. 구글폼을 활용해 유저들의 피드백을 수집했는데, 우리가 미처 생각하지 못한 부분들에 대해 피드백 주셔서 좋은 경험이 되었다. 이후 이 내용을 PPT로 정리하고, 실현 가능한 부분을 추려 수정하기로 했다. 또한, 디자인 QA와 안드로이드에서 레이아웃이 틀어지는 문제가 발견되어, ngrok을 사용해 베타 서버에 배포하지 않고 모바일에서 직접 테스트하여 호환성 문제를 개선하였다.

UT 테스트 과정

• UT 테스트를 위한 구글폼 작성
  

• 피드백 정리 및 피드백 적용
  

디자인 QA

안드로이드 이슈 수정

• 모바일 브라우저에서 디버깅 하기

---

🥳 배포

Vercel 로 배포 : Vercel에 로그인 → GitHub 저장소 연결 → 자동 배포 완료.
가비아에서 도메인 구입 및 설정: 가비아에서 도메인 구입 → DNS 설정에서 Vercel 네임서버 추가.
Vercel에서 도메인 연결: Vercel의 "Domains" 설정에서 도메인 추가 → 연결 확인

---

🎁마무리

이 회고록을 작성하는 데 꽤 오랜 시간이 걸렸지만, 마지막 프로젝트를 진행했던 한 달을 천천히 되돌아보며 글을 쓰다 보니, 함께한 팀원들에게 더욱 고마운 마음이 들었다.

모든 팀원이 각자의 역할을 묵묵히 잘 해내어 좋은 결과를 얻을 수 있었고, 특히 팀의 균형을 잘 잡아준 팀장님께도 감사한 프로젝트였다.

이번 경험을 통해 하나의 서비스를 만드는 과정이 결코 쉽지 않다는 것을 깨달았고, 각자의 역할에서 전문성을 갖고 열심히 일하는 분들에 대한 존경과 감사의 마음이 더욱 커졌다.

그리고 나 역시 앞으로 만나게 될 좋은 팀원들에게 도움이 되는 개발자가 되어야겠다고 다짐했다.