배포 주소 : https://dashing-tiramisu-cbdade.netlify.app
깃허브 : https://github.com/TeamOHJO/Frontend
개발 기간 : 2023.11.20~2023.11.30

1. 개요

벌써 [야놀자 x 패스트캠퍼스 부트캠프] 과정을 통해 진행된 세 번째 프로젝트가 끝이 났다. 이번 프로젝트는 전 프로젝트들과 다르게 백엔드 개발을 공부 중인 분들과 함께 협업을 통해 진행됐고 개발 인원은 총 프론트 5명 백엔드 4명으로 구성되었다. 짧은 기간 동안 백엔드 분들과 협업하며 배운 새로운 경험들과 지난 프로젝트의 경험들을 녹여 초기 단계부터 단단한 웹앱을 만들기 위해 노력한 내용들을 이번 글에 기록하고자 한다.

2. 단단한 웹앱을 만들기 위한 노력

이번 프로젝트의 목표는 단단한 웹을 만드는 것이었다.

그럼 어떤 웹이 단단한 웹일까? 내가 생각한 단단한 웹은 사이드 이펙트를 최소화하고 부드러운 사용자 경험을 제공하는 웹이 단단한 웹이라고 생각했다.

팀원들도 모두 입을 모았고 단단한 웹을 만들기 위한 고민을 시작했다. 가장 먼저 기획이 탄탄해야 했으며 주어진 기간이 짧아 시간을 어떻게 분배할지도 매우 중요하게 여겨졌다. 그래서 우리는 2주의 시간 중 4일을 기획과 디자인(PM이 따로 없었기 때문에 프론트엔드 개발자들이 기획, 디자인을 맡았다) 그리고 스택 설정에 시간을 쓰고 남은 기간 동안 개발에 집중했다.

결론적으로 단단한 기획과 소통을 통해 개발을 하는 동안 기획이 바뀔 일이 거의 없어 개발 기간에 개발 외의 비용이 최소화 되어 오히려 개발 기간이 단축되는 효과를 봤다.

2-1. 요구사항 분석

프로젝트 시작과 함께 진행한 요구사항 분석의 일부다. 프로젝트는 숙박 예약 서비스의 필수 요구사항들이 주어졌으며 우리는 필수사항과 추가 기능들을 나열하고 우선순위를 정하였다.

2-2. 유저 플로우

이번 프로젝트는 전 프로젝트들과 다르게 현업에서 사용되는 유저 플로우 컨벤션을 가져와 색깔과 모양을 구분하여 명시적이고 구체적인 유저 플로우를 만들었다.

2-3. 와이어프레임

와이어프레임을 만들어 본 경험은 처음인데 소통을 통해 구체적인 디자인 전에 빠르게 기획한 웹사이트를 그려나갈 수 있었다.

2-4. 디자인

이번 프로젝트의 디자인을 같이 공부 중인 최재훈님께서 그동안 해주셨고 다른 팀원들은 CRA 등 프론트 개발 환경을 구축했다.

2-5. 스택 설정

스택은 여러가지를 고려하여 다음과 같이 설정하게 되었다. 전체적으로 짧은 개발 기간에 다양한 기능을 개발해야 했기 때문에 설정된 스택이 많다. 팀원 모두에게 익숙한 React,TypeScript 그리고 css 라이브러리 CHAKRA UI를 활용해 개발 기간을 단축시켰다.

2-6. CI/CD

Netlify를 활용해 개발 초기에 메인 브랜치를 배포해 로컬 환경과 배포 환경을 모두 고려한 개발을 진행할 수 있었다.

2-7. GitHub Flow

브랜치 전략은 깃허브 플로우 전략을 따르기로 했고 이슈 단위로 브랜치를 생성해 개발을 진행하였다.

3. 백엔드 개발자와 협업

전 프로젝트들에서는 파이어베이스로 백엔드를 대체하거나 주어진 API를 활용한 개발을 했었다.

이번에 처음 백엔드 개발자분들과 협업을 하며 처음에 API를 요청한다는 게 무슨 의미인지, 프론트에서 할 일과 백엔드에서 할 일을 분업하는 과정 등 많은 게 걱정이었다.

걱정이 무색하게 능력있는 팀원분들을 만나 모든 과정이 재밌었고 잘 마무리 할 수 있었다. 그래서 이번 과정을 통해 배운 내용을 정리해보고 다음에도 적용해보려고 한다.

3-1. ERD

프로젝트가 시작 되고 프론트에서는 기획과 디자인을 하고 있을 때 백엔드에서 ERD 초안이 도착했다.

다행히 데이터베이스 설계와 mySQL을 과거에 배운 적이 있어 ERD를 읽을 줄 알았으며 프론트에서 생각하고 백엔드에서 생각하는 데이터 설계의 차이점을 비교할 수 있어 소통을 통해 요구사항을 잘 전달하고 받을 수 있었다.

3-2. 목업데이터

프론트와 백엔드가 동시에 프로젝트를 시작했을 때 프론트에서 필요한 API를 먼저 받을 수 있는 게 아니라 개발을 진행할 때 json 파일로 목업데이터를 만들어 public에 담에 GET 요청을 보내 데이터를 가져와 작업을 하는 방식으로 진행하였다.

이렇게 목업데이터를 만들어 놓아 API가 완성되었을 때 데이터 설계만 서로 일치하다면 바로 적용할 수 있어 프론트/백 모두가 빠르게 개발을 진행할 수 있었다.

3-3. 지속적인 상황 공유

팀원들과 디스코드 방을 만들고 깃허브와 연동해 프론트 뿐만 아니라 백엔드 개발자 분들의 진행 상황을 커밋 내용으로 확인 가능했고 매일 정해진 시간에 짧더라도 진행 상황을 공유해 일정을 조율하고 개발의 속도를 맞췄다.

4. 마무리

이번 프로젝트는 전 프로젝트의 부정적인 경험을 개선하고 백엔드 개발자와의 협업 방법을 배운 프로젝트였다.

지금은 리팩토링을 진행하고 있으며 코드와 성능 개선을 목적으로 진행하여 2번의 글을 더 작성할 예정이다