🗣 <비드마켓> 팀 프로젝트 회고

프로그래머스 웹 데브코스 2기, 비드마켓 프로젝트에 대해 회고한 내용입니다. 오타나 오류가 있으면 댓글로 알려주세용!!

💸 비딩으로 기다리는 설렘을 느껴봐, <비드마켓>

📑 비드마켓에 대해 더 알 수 있는 링크 모음집
사이코 팀 노션페이지
사이코 프론트엔드 노션페이지
비드마켓 깃허브
비드마켓 최종 발표 영상

저번 러북 프로젝트에서는 팀장을 맡았고 프론트끼리만 프로젝트를 진행한 반면, 비드마켓 프로젝트는 프론트 4명, 백엔드 5명, 디자이너 1명 총 10명과 함께 진행하였습니다. 약 1달이라는 기간동안 기획부터 디자인, 개발을 함께 하였습니다.

비드마켓에 대한 소개는 깃허브 또는 노션 페이지를 참고해주시고 이 회고에는 한달동안 어떻게 진행하였는지, 어떤 것을 느꼈는지에 대해 담았습니다.

🧑🏻‍🏫 프로젝트 기획(유저 스토리와 UI 기능 명세서)

저번 러북 때는 API 명세가 주어져 있었고 정해진 틀 안에서 주제를 정했다면 이번에는 주제가 자유로웠기 때문에 다양한 의견을 낼 수 있었다. 많은 의견들 중 중고거래 비딩 플랫폼이 가장 높은 표를 받아서 다음 주제로 진행되었습니다.

1. 유저 스토리 & MoSCoW

주제가 정해지고 사용자 관점에서 이 서비스에 희망할 만한 기능들을 서술하기 위해 유저 스토리를 작성하였습니다. 도메인을 나누고 도메인에 따라 필요한 기능들을 적었고 그 기능들에 대해 비지니스와 사용자 관점에서 중요도를 매기기 위해 아래처럼 MoSCoW로 구분하여 평가하였습니다.

프로젝트 목표(MosCow)

• Must Have: 이번 프로젝트에서 반드시 여기까진 다 해야한다.
• Should Have: 혹시라도 여력이 된다면 여기까지도 한번 해보자.
• Could Have: 여기까지 할 수 있다면 정말 좋겠지만, 못해도 괜찮다.
• Won’t Have: 이건 이번 프로젝트에 할 수 있는게 아니니 괜히 미련 갖지 말자.

Must로는 유저 정보 조회 및 수정, 경매시스템에서 가장 중요한 입찰, 낙찰 기능, 상품 조회기능을 위주로 적었고 Should로는 입찰, 낙찰 결과를 알려주는 알림과 사용자와 매칭시켜주는 채팅 기능을 목표로 진행하였습니다.

프로젝트가 끝난 이 시점에서 생각해보면 이렇게 정하고 진행했기 때문에 목표가 확실했고 우선순위대로 수월하게 진행되었다고 생각합니다.

2. UI 기능 명세서

저희 팀은 팀원분의 도움으로 디자이너가 있었기 때문에 디자인이 조금 더 빨리 나올 수 있었습니다. 그 디자인을 토대로 페이지마다 아래 사진처럼 필요한 기능을 자세히 작성할 수 있었습니다. (디자인(와이어프레임) 및 UI 기능 명세서 링크)

💸 프로젝트 개발 문화

1. 스프린트/스크럼/회고

저희는 JIRA 협업도구를 사용하여 애자일방식으로 스프린트 플래닝, 진행, 스프린트 중간 점검, 종료 순서로 매 스프린트마다 진행하였습니다. 스프린트 시작 전 회의를 통해서 백로그를 추가하고 티켓 발급을 하며 서로 진행하였고 테스크 단위로 진행사항과 담당자를 공유하였습니다. 또한 Github를 연동하여 관리를 자동화함과 매일 스크럼을 진행하여 프론트엔드와 백엔드 모두 진행사항을 한 눈에 확인할 수 있었습니다.

• JIRA 이슈 진행 사항
  

• JIRA 스프린트 보고서
  

스프린트가 종료될 때마다 팀원 모두 회고를 진행하여 다음 스프린트 때 더욱 나은 목표와 커뮤니케이션을 진행할 수 있도록 하였습니다.(스프린트 회고 모음)

2. 프론트 안건 페이지

커뮤니케이션을 진행할 때 슬랙과 디스코드로 동기, 비동기 방식으로 백엔드와 소통하였지만 별개로 프론트만 안건이 필요한 경우 혹은 급하지 않은 경우는 예전 러북 프로젝트 처럼 따로 안건 페이지를 만들어서 진행하였습니다. 버그 혹은 이슈가 생겼을 때, 나중에 사용자 경험을 증가시킬 요인들, 마지막으로는 나중에 리팩토링 하고싶거나 해야할 부분을 적어놓아서 까먹지 않고 추후에 진행할 수 있도록 하였습니다.

매번 스크럼 진행 전 팀장님이 확인해주시고 회의 때 얘기해주셔서 까먹지 않고 회의하고 다음 작업을 진행할 수 있어서 매우 좋았습니다. 또한 디자이너님께 얘기해야할 부분을 적어서 한번에 전달할 수 있었기 때문에 불필요한 의사소통을 줄일 수 있었습니다.(프론트 안건 페이지)

💻 프로젝트 개발 스택과 구현한 기능

기술 스택

이번 프로젝트에서 저번 프로젝트와 새롭게 경험해본 기술로는 Typescript, Next.js였습니다. 이번 프로젝트를 위해서 프론트 팀원 모두 노마드코더 Typescript 챌린지를 하면서 새롭게 기술을 도입해보았습니다.

Typescript

TypeScript를 사용함으로써 예전에 Javascript를 사용했을 때 얼마나 불편했는지 새삼 깨닫게 되었습니다. API로 데이터를 받아와서 데이터를 사용할 경우나 보낼 때 항상 문자열을 숫자로 보내는 경우나 반대일 경우 등 에러가 나는 경우가 많았는데 확실히 타입스크립트를 사용하게 된 후 에러를 사전에 미리 예방할 수 있어서 좋았습니다. 또한 visual studio code를 사용할 때 각 타입에 대한 API를 미리 띄워줄 수 있어서 빠르게 작성할 수 있었습니다.

Next.js

또 이번 프로젝트에서는 비드마켓의 목적인 경매 상품들을 검색 엔진에 잘 노출될 수 있도록 SEO를 제대로 적용하고 해보고 SSR Next.js를 사용하였다.
SEO를 위해서 meta 태그를 하나하나 적용하였고 그로 인해 lighthouse 측정을 해보니 아래와 같은 결과를 얻을 수 있었다.

하지만 Next/Image 등 Next.js의 많은 부분을 직접적으로 사용해보지 못해봤고 위의 Lighthouse 점수 중 퍼포먼스 부분이 많이 아쉬웠다. 리팩토링 때 꼭 개선해보고 싶은 부분이다.

입찰과 낙찰 기능 구현

비드마켓에서 가장 중요한 기능 중 하나인 입찰과 낙찰 기능 구현을 맡았습니다. 아래 링크 첨부된 내용 처럼 기존에 기획 단계에서 얘기했던 부분은 로그인 여부, 경매 진행, 판매자, 낙찰, 입찰 여부 모두 고려한 분기처리로 구현해야 했습니다.(낙찰 관련 로직)

백엔드 팀원 중 한 분이 프론트에서 처리하는 로직이 너무 복잡하다며 판매자, 낙찰, 입찰 여부를 하나의 API로 만드는게 어떻냐는 의견을 내주셨고 그에 맞춰 API를 하나만 호출해도 여러 경우를 분기처리 할 수 있었습니다. 지금 생각해보면 많이 힘든 로직은 아니었지만 개발 할 당시에는 계속 수정하고 반복하면서 조금이라도 간단하게 구현하기 위해서 노력했습니다. 그래서 개발한 기능 중 가장 기억에 남는 기능 중 하나입니다.

실시간 타이머 기능구현

저희 비드마켓에서는 실시간 타이머 기능을 구현하는 것이 중요하였습니다. 리액트에서 setInterval API와 리액트 프로그래밍 모델 사이의 부조화에 대해서 조금은 알게 되었습니다. 물론 많은 자료를 참고하였지만 스스로 훅을 구현하면서 즐거웠고 앞으로 Hooks와 함께 setInterval과 같은 API를 함께 사용하는 것에 대해서 리팩토링 할 때 더욱 자세히 고민해보고 패턴들을 참고해보려고 합니다. 번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점

👤 개인 회고

좋았던 점

팀 분위기와 커뮤니케이션

처음 백엔드 팀을 만나고 팀 분위기가 너무 좋아서 프로젝트가 정말 기대되었다. 실제로 개발을 진행할 때에도 의사소통이 순조로웠습니다. 실제 오프라인 모임도 고정으로 만나는 날이 아니어도 자주 만나서 개발하였으며 디스코드, 슬랙을 통해 동기적, 비동기적 소통이 아주 잘 이루어졌다고 생각합니다.

일정 관리(JIRA 사용)

위에서 설명했듯이 스크럼과 스프린트가 잘 진행되었다. 첫 주에는 스프린트 하나를 쪼개지 않고 한 번에 많은 양을 진행 했을 지 몰라도 첫 번째 회고를 통해 스프린트 중간 체크 포인트를 설정해두었고 중간 점검과 해야할 목표 치를 조금 더 자세히 정할 수 있어서 결국 목표했던 기능을 대부분 구현할 수 있었다.

코드 리뷰

저희는 매 이슈마다 PR을 올리고 코드 리뷰를 필수로 받고 main에 머지하도록 진행하였습니다. 코드리뷰를 함으로써 팀원들의 코딩 스타일을 유지하거나 오류 파악 뿐만 아니라 내 코드의 피드백은 물론 다른 팀원의 코드를 보면서 배울 수 있어서 더욱 좋았습니다. 이번 프로젝트에서 저는 react-query을 사용해 본 적이 없고 아직 프로젝트에 적용하지 않았습니다. 하지만 다른 팀원이 react-query를 사용하여 무한 스크롤을 구현하였는데 그러한 부분들을 리뷰를 함으로써 어떻게 구현하고 적용하는지 더 한 눈에 알 수 있었습니다. 또한 채팅 구현에서stompjs와 sockjs로 어떻게 구현하는지 더 쉽게 이해할 수 있었습니다.

아쉬웠던 점

Next/Image 미적용

우리는 빠른 기능 구현을 위해 chakra-ui를 사용하였는데 그로 인해 chakra-ui에 있는 Image태그를 사용하면서 Next/Image를 사용하지 않았습니다. 마감기한에 맞추기 급급했던 시간이 지나고 다시 lighthouse, nextjs 공식 문서 등을 확인하고 나서야 Next/Image를 사용하면 lazy loading, 빠른 페이지 로드 등 성능 향상에 큰 도움이 된다는 것을 알았습니다.

멘토께서 피드백을 주셨던 부분이고 그냥 image 컴포넌트와 차이점을 배우면서 가장 먼저 리팩토링을 하고 싶은 부분입니다. 추후 이 부분은 따로 블로그에 정리하면서 반영할 예정입니다.

사용자 경험 측면

로딩 처리가 아쉬웠다, 프로필 없을 때, 이미지 안뜨는 이슈, undefined, 연동이 잘 안되어있다. 버그가 많이 보인다. 등의 리뷰를 받았는데 제일 중요한 부분인데 기능 구현에 빠져서 기본에 충실하지 못했다고 생각했습니다. 결국 이 서비스는 사용자가 사용했을 때가 가장 중요한 것인데 기능이 많더라도 UX를 신경쓰지 않으면 사용자가 떠나갈 가능성이 높다는 것을 리뷰를 받고서 뼈져리게 느꼈습니다. 앞으로 리팩토링을 진행할 때, 로딩 처리는 react-query를 도입해서 적용해보고 싶고 스켈레톤을 사용해서 로딩 시 사용자가 렌더링이 느린 부분을 느끼지 못하도록 변경해보고 싶습니다

비드마켓 프로젝트를 마치며..

백엔드와 오랜만에 팀 프로젝트를 진행하였는데 아무래도 같이 데브코스를 진행했던 팀원들이다보니 열정이 가득하였고 같은 목표를 향해서 가고 있다는 마음이 느껴졌습니다. 1달동안 오프라인으로 자주 만나고 매일 디스코드에 있으면서 개발하면서 이런게 정말 팀이구나 느껴졌고 정말 즐거웠습니다. 또한 제대로 된 협업을 겪었던 프로젝트라고 생각합니다.

프로젝트의 마감이 다가오면서 잠도 못자고 코딩만 했던 시간이었지만 그조차도 재미있었고 끝나지 않았으면 했던 행복했던 경험이었습니다. 비드마켓은 앞으로 리팩토링 때가 더욱 기대되는 프로젝트였습니다.
사이코 팀 화이팅🔥🔥🔥 감사합니다!!

그 후 리팩토링 진행한 링크

• 비드마켓 리팩토링 - 페이지 로딩 적용
• 비드마켓 리팩토링 next/Image 적용기
• Web Vitals(feat. 비드마켓 리팩토링 next/Image 적용 경험)
• @next/bundle-analyzer 적용으로 번들 사이즈 최적화 (feat. next/dynamic)

오랜만에 사진보고 뭉클