패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_파이널 프로젝트 회고

돌아온 패스트캠퍼스 X 야놀자 부트캠프 포스팅입니다! 2024년의 새로운 해의 시작과 함께 1월부터 저희 부트캠프에서는 ‘파이널 프로젝트’를 진행했습니다. 이번 프로젝트에서는 기획, 디자인, 백엔드, 프론트 각 포지션들이 하나의 팀을 이루어 진행하게 되었습니다. 저번 미니 프로젝트에서는 백엔드와 프론트 두 포지션만이 있었기 때문에 개발 외적으로도 디자인이나 앱 기획 등을 신경쓸게 많았는데요! 이번 파이널 프로젝트에서는 기획분들의 요청에 맞추어 구현만 하면되었기 때문에 개발에만 집중할 수 있어서 정말 좋았던 것 같아요.

기업 연계 프로젝트

이번 프로젝트는 야놀자의 기업 RFP를 제안서를 토대로 개발이 이루어졌습니다. 패스트 캠퍼스 X 야놀자 부트캠프에서만 경험할 수 있는 최고의 프로젝트라고 생각했어요. 실제 기업의 문제 및 니즈를 분석하고 스스로 해결책을 개발하는 과정을 경험할 수 있었습니다. 개발 중간 중간 야놀자 실무진분들의 멘토링을 받을 수 있었고, 주마다 꾸준하게 진행사항들을 확인하고 그에 대한 의문점이나 조언들을 멘토님에게 얻을 수 있었습니다.

팀 결성!

저희 팀은 ‘여행 여정 공유 플랫폼’을 주제로 개발을 진행하게 되었습니다. 팀 구성은 디자이너 1명, PM 4명, 프론트엔드 6명, 백엔드 5명으로 이루어지게 되었습니다. 미니에 비해 규모가 확 커졌다는 것이 느껴졌어요. 기획분들과 디자이너분이 추가된만큼 피그마도 엄청 무섭게 커졌습니다. 처음엔 와 우리가 저걸 개발할 수 있을까? 싶을정도로요..

프로젝트 기획과 디자인은 피그마를 통해 진행되었습니다. 디자이너와 기획분들과는 피그마 내의 댓글을 통해 기능들을 구체화하고 완성시켰어요. 각자 작업하면서 의문이 드는 부분이나 수정이 필요하다고 생각되는 부분들은 댓글로 달아놓아 확인할 수 있게 하였고, 구체적인 상의는 매일 있는 코어 타임과 주 한번의 팀 미팅을 통해 방향을 정했습니다.

디자인의 경우 전체적인 앱의 통일성을 위해 글꼴과 크기, 볼드값을 사용될 컴포넌트별로 정리해주셨고, 앱 전반적으로 사용될 토스트나 알림모달, 그리고 박스들의 형태또한 정해서 전해주셨습니다. 이번 프로젝트에서 저희는 sass를 사용하기 때문에 미리 저렇게 정리해서 주시니 변수들과 함수에 적용시켜 개발을 정말 편하게 할 수 있었어요.

와이어프레임

https://www.figma.com/file/oeQ2vOcyO3SuInuMf3Dlj8/%EC%B5%9C%EC%A2%85-%ED%99%94%EB%A9%B4(PM)?type=design&node-id=0-1&mode=design&t=nZD111AWFn7ozFJx-0

확실히 디자인, 기획 분들과 함께하는 프로젝트다보니 피그마 규모 부터가 저번 프로젝트랑 다릅니다…ㅠ (내가 할 수 있을까 걱정도 많이 했어요)

디자인가이드

https://www.figma.com/file/ypTLv92s72sihUApnxjP5C/%EA%B0%95%EC%9E%90%EB%B0%AD-%ED%94%BC%EA%B7%B8%EB%A7%88?type=design&node-id=40-2&mode=design&t=Jf8iEjAoqYVNtYJX-0

디자인 분께서 각 컴포넌트별로 세세하고 통일감있게 작성해주셨어요. 덕분에 미리 sass 변수와 mixin에 등록하고 뽑아쓰면서 편하게 개발에 집중할 수 있었습니다!

개발 진행

Sass 변수 및 mixin 적용

디자이너분의 디자인 가이드를 바탕으로 sass 변수에 색상과 글씨를 선언해주었습니다. 특히 font size, font weight, line height의 경우 sass 맵을 생성하고 mixin 내에서 불러와 적용할 수 있도록 하였습니다.

실제 스타일이 적용되는 부분에서는 @include typography(headline) 처럼 작성해주면 디자이너분이 headline에 적용되길 기대한 글씨에 대한 모든 값들이 한번에 적용되었습니다!! 확실히 이전 프로젝트들과 달리 디자이너분이 디자인 시스템을 갖추어주시니 개발이 너무 편해졌어요.

MSW 적용

프론트엔드의 가장 이상적인 개발 진행은 백엔드 API가 완성되어 거기에 맞춰 데이터 페칭을 하고 그에따른 UI를 화면에 출력하는 것이라고 생각합니다. 하지만… 같이 시작한 프로젝트에서 저희가 백엔드의 완성만을 기다릴 수는 없어요. 그래서 MSW를 적용했습니다!

개발 환경에서는 MSW가 api 요청을 탈취해서 모킹 서버로부터 저희가 정한 응답을 받고 데이터들을 페이지에 렌더링할 수 있습니다. 이게 정말 좋았던게 백엔드와의 협의를 통해 엔드포인트만 정해둔다면 이후 배포시에도 코드의 변경없이 실제 서버로 그대로 요청을 보낼 수 있다는 것이 신세계였습니다.

프로젝트 막바지에는 위의 이미지처럼 모킹 함수 내에 return문을 추가시켜서 모킹하지 않고 바로 서버로 요청을 보내보면서 테스트 해볼 수 있었어요!

마치며

파이널 프로젝트도 끝나가고 이제는 수료도 코앞으로 다가왔습니다. 6개월 가량 정말 길거라고 생각한 것이 무색하게 후딱 지나가버렸어요. 패스트캠퍼스 X 야놀자 부트캠프 덕분에 스스로 자신감도 생기고 무엇보다 어떻게 개발자로서 발전해나갈지 깨닫는 계기가 된 것 같아요. 이번 마지막 프로젝트도 잘 마치고 다음 포스팅엔 마지막으로 부트캠프를 진행하며 느꼈던 총 후기로 돌아오겠습니다.