이 글은 패스트 캠퍼스의 프론트엔드 개발 과정에서 진행한 파이널 프로젝트에 대한 회고이다.
프로젝트에 대해
참여 기업의 과제를 ui&ux, 프론트엔드, 백엔드 팀이 협업하여 해결하는 프로젝트였다.
사실 프론트엔드 개발자끼리는 여러 번의 프로젝트를 함께 한 적이 있어 (대부분의 미니 프로젝트는 팀단위로 진행했다) 협업에 대한 두려움은 없었다. 할 일을 분담하고 이슈를 함께 해결하는 것은 똑같고 인원만 더 늘어나는 것이라는 생각을 가지고 있었기 때문이다.
결론적으로는 정말 우여곡절…속으로 분도 많이 삭혔던…프로젝트였다. 과정이 끝난지 몇 개월 지난 지금 다시 되짚어 보려고 한다.
Keep 잘한 점과 좋았던 점
- 노션을 최대한으로 활용 한 것
마지막 프로젝트 결과 발표 때 현직자 멘토님께 들었던 칭찬 중 하나가 바로 ‘이 팀은 누구든지 바로 투입되어 일할 수 있을 만큼 문서 정리를 잘했다’ 였다. 사용하는 라이브러리 정리, 일정 및 회의록 작성, 커밋 메시지 정리, 개발 가이드라인 등을 정리했다. api 명세서를 노션에 작성하기도 했다. 문서 정리를 해야겠다고 마음 먹은 이유는 아래와 같았다.- 큰 프로젝트이자 과정의 마무리인 만큼 포트폴리오로 사용될 것이기에 미리미리 정리해두기 위해서
- 팀원들이 ‘저희 이거 어떻게 하기로 했죠?‘와 같은 질문의 답을 기다리지 않고 해당 내용을 노션에서 바로 찾을 수 있도록 하기 위해서
- 개발 가이드 라인이자 룰을 작성하여 팀원 모두가 동일한 환경에서 작업을 해서 이슈를 공유하거나 코드를 살펴볼 때 어려움이 없었으면 해서
결과적으로는 정말 좋았고 앞으로도 유지해야겠다는 장점인 것 같았다. 게다가 멘토님에게 프로젝트 세팅 관련 피드백을 받을 때도 해당 노션을 보여드리면서 피드백을 받으니 훨씬 수월했다.
- 프론트 팀원과 계속해서 마이크를 키고 개발한 것
온라인으로 개발을 하다보니 팀원과 소통을 하는 시간을 꾸준히 만들어야만 했다. 나를 제외하면 전체 팀원은 총 6명이였지만, 물리적 거리가 먼 만큼 정신적 거리는 좁혀야했다. 팀원은 뭘하고 있나 궁금하기도 했고. 카페에서 작업을 하시는 팀원을 제외한 프론트 팀 1분과는 꾸준히 마이크를 키고 개발을 하였는데 굉장히 좋았다. 같이 쉬러 가기도 하고, 안 풀리는 로직도 함께 고민하고. 힘든 점도 공감해주고. 이 팀원 분과는 여전히 인연을 이어가고 있어 잘한 점으로 꼽았다.
Problem & Try
- 협업 이슈
일반적인 개발 프로세스와는 다르게 프로젝트는 기획->디자인->프론트&백엔드개발로 이루어졌다. 우리 팀 같은 경우 기업 서비스의 일부를 만들어내는게 아닌 새로운 서비스를 만드는 것과 같았기 때문에 기획과 디자인이 개발 기간에도 진행되어 많은 이슈가 있었다.- ui ux 팀과의 이슈
화면 개발을 들어가야하는데 절반 이상의 화면 디자인이 나오지 않은 상황이였다. 게다가 기획도 여러 번 수정되고 있었다. 그렇게 발생한 문제점은 첫번째로는 중간중간 없는 페이지들이 많았다는 점. 두번째는 만들고자 하는 서비스에 대한 개발팀의 이해도가 낮다는 점이였다.
Try 이러한 점은 피그마에 요구사항 페이지를 만들어 ui & ux팀에게 요구사항을 요청하는 쪽으로 해결하였다. 주로 활성화-비활성화 아이콘 추가 요청, 나타낼 데이터에 대한 자세한 설명 요청, 버튼 클릭시 나타나야하는 이벤트나 애니메이션 추가 설명 요청 등이 있었다. 디자인팀이 피그마에 상주해있으니 프론트팀의 요구사항을 확인하고 반영된 사항을 프론트팀과 백엔드팀 모두가 빠르게 확인할 수 있다는 장점이 있었다.
세번째로 발생한 문제점은 잠수함패치가 자주 일어났다는 점이였다. 화면 개발을 마쳤다고 생각하고 피그마에 들어가보면 수정되어 있는 부분들이 많았고 나의 성격상 작은 부분이라도 한번 물어봐야하는 성격이였다. 색상이라든지 폰트라든지 굉장히 디테일한 부분까지도 신경쓰는 편이다. 다 의도가 있어서 변경했을거니까
Try 이러한 점은 디자인팀에게 변경사항을 빨간 글씨로 작성해달라고 요청하여 해결하였다. 화면 디자인도 빠듯하니 ‘변경’이라는 글자만 적어주어도 좋다는 요청사항을 드렸고 사실 꽤 번거로운 일임에도 자세히 적어주셔서 이 부분은 굉장히 감사했다. - 백엔드 팀과의 이슈
백엔드 팀과는 api 적용과 관련하여 이슈가 있었다. 결론부터 말하자면 프로젝트에 api를 하나도 적용하지 못했기 때문에 해당 이슈를 해결했다고 하긴 어려운 것 같다. 백엔드 분들의 말을 빌리자면 역량부족이 원인이라고 하셨다. 프로젝트 규모가 컸고 만들어야할 api는 많았지만 api 명세서 작성부터 api를 배포하는 것까지 거의 처음이셨기에 어려우셨다고 했다. 게다가 백엔드 개발자끼리의 협업도 처음이셨다고. 그렇지만, 프론트팀이 마냥 손놓고 기다리기만 한 것은 아니다.
Try 화면 디자인을 진행하며 서비스에 대한, 데이터에 대한 이해도가 조금 더 높았던 프론트팀이 api명세서를 작성하였다. 어떤 api가 필요한지 요청, 응답 데이터는 무엇이 필요하고 어떤 타입이여야 하는지 까지 작성했다. api를 사용하지 못했다는 아쉬움이 남는 결과였지만 데이터에 대한 프론트 팀의 전체적인 이해도가 더 높아짐에 따라 추후에 프론트 단에서 더미 데이터와 로컬 스토리지를 이용하여 구현 작업을 할 때 api 명세서가 도움이 되었다.
- ui ux 팀과의 이슈
- 개발 이슈
- Netlify 배포 후 새로고침 404 오류
그동안 프로젝트를 진행하면서 많은 배포를 진행했지만 react 프로젝트로 배포를 해보는 것은 처음이였다. 처음 배포를 시도하고 만나게 된 이슈로는 루트가 아닌 페이지에서 새로고침시 404 페이지가 뜬다는 것이였다. 이는 굉장히 쉽게 해결되었다.
Try netlify 설정 파일을 만들고 Redirection을 설정해주면 되는 문제였다. 리액트가 SPA이기 때문에 발생하는 문제라고. 열심히 검색해보며 해결했고 다른 조에게도 해당 내용을 공유해서 다함께 해결했던 ㅎㅎ 좋은 경험이였다. - Netlify 배포 후 request url error
백엔드 서버와의 연결을 테스트 하는 과정에서 발생한 이슈이다. 개발 서버에서는 프록시로 백엔드를 연결하였는데 배포된 서버에서는 백엔드 서버가 아닌 배포서버로 api를 요청하면서 생긴 문제였다.
Try 이 부분은 현재 주소가 local host인지 확인하여 api 요청 url을 변경하고 위에서 언급한 netlify 설정 파일에서 Redirection을 구분하는 방법으로 해결하였는데 지금 생각해보면 개발용과 배포용 브랜치를 따로 분리했으면 좋았을 것 같다는 생각이 든다. - 최종 시연을 위한 데이터 작업
백엔드로부터 데이터를 받지 못했기 때문에 최종 시연을 위해선 프론트팀이 데이터를 준비해야하는 상황이였다. 그러기 위해선 더미데이터를 만드는 작업도 해야했고 혹시 시연을 하다 새로고침을 해야하는 상황이 왔을 때 모든 데이터 값이 초기화 되는 상황을 막기 위해선 데이터를 어딘가 저장해두어야 했다.
Try react의 context와 로컬 스토리지를 이용하여 이슈를 해결했다. 먼저 프론트 팀원 모두 상태관리 라이브러리에 익숙하지 않았기 때문에 context를 사용했다. context를 이용한 Store작업은 내가 담당했다. Store 뼈대를 만든 다음 팀원 각각이 자신이 맡은 데이터에 대한 Store를 만드는 방식으로 작업을 진행했다. Store는 어떻게 생성하면 되는지, 컴포넌트에서 내려 받아올 때는 어떻게 해야하는지 알려드린 후 다른 팀원에게는 변수, 함수의 의미를 공유해달라고 부탁드렸다. 가장 신경쓴 것은 아무래도 효율성이였다. 하루만에 데이터 작업을 끝내야 했기에 자신이 맡은 페이지의 데이터는 자신이 가장 잘 안다는 것을 이용했다. 다행히도 큰 이슈없이 데이터 작업을 마칠 수 있었다. 최종 발표 때 멘토님이 데이터 작업하느라 고생했다고 말씀해주셔서 감동이였다..
- Netlify 배포 후 새로고침 404 오류
느낀 점
정말 협업이라는게 쉽지 않구나라는 걸 제대로 느낀 프로젝트였다고 생각된다. 어쩌면 개발 이슈보다 협업 이슈를 해결하는게 제일 힘들지 않았나 싶다. 나는 먼저 나서지 않는 사람에 속한다고 생각했는데 프로젝트에서는 프론트 대표로 다른 팀과 이야기를 많이 나누었다. 특히 백엔드팀과는 정말 많은 이야기를 나누었던거 같다. 전체적인 개발 상황에 대해서도 여쭤보고 백엔드 개발자 한 분 한 분에게 연락드려 맡으신 부분이 어느 정도 진전이 있는지, 어려움 점이 무엇인지. 도와드릴 게 있는지부터 해서..정말 많은 대화를 나누었다. 물론 긴 대화를 나눴음에도 배포된 api가 헬로 월드 문자열을 출력하는 테스트 api 뿐이였다는건…조금, 아니 많이 아쉽다. 그럼에도 좋은 경험이라고 생각하는 이유는 최종 발표 날 한 명을 꼽아 칭찬하는 시간에 백엔드 분들께서 계속해서 대화를 나눠주어서 고맙다는 말씀을 해주셨기 때문이 아닌가 싶다. 사실 결과물이 없어 눈치가 보이는 상황임에도 내가 상황을 이해해주고 계속해서 소통을 해줘서 고마웠다고. 나의 노력을 알아봐주셔서 감동이였다. 게다가 다른 조 분들이 우리 결과물을 보고 고생 많으셨겠다. 결과물 대박이다라는 후기도 남겨주셨기에… 힘들었던 점을 많이 작성하긴 했지만 정말 정말 좋은 경험을 한 것 같아 만족스러운 프로젝트였다. 앞으로 어떤 프로젝트를 하든 다 해낼 수 있을 것 같다는 자신감을 얻은 프로젝트 였다.