두번째 팀 프로젝트 회고

이진웅·2022년 2월 7일

회고

목록 보기

3/5

드디어 두번째 팀 프로젝트(22.01.17. ~ 22.01.28.)가 끝이났다.
이번엔 육체적으로도 정신적으로도 많이 갈려나갔던(?) 기간이었던 것 같다.

프로젝트 소개

이번 프로젝트에서 목표로 삼게된 페이지는 나이키였다. 나이키는 이전 프로젝트와 같이 이커머스 스타일의 페이지지라 처음엔 어렵게는 느껴지지 않았으나, 하나하나씩 살펴보니 엄청난 아이템 갯수와 필터링에 압도되었다.

어떻게 페이지를 구상할지 그림은 그려졌지만, 디테일하게 들어가니 여러 애니메이션이나 기능들이 많아서 어떻게 구현해야할지 막막했었다. 더군다나 프론트엔드 팀원이 나를 포함해 2명밖에 없었기 때문에 심리적으로 압박감이 엄청 심했었다... 😢

역할

이번에는 기술 스택을 확실하게 정하고 시작하였기 때문에, 우리 팀은 프론트엔드 2명, 백엔드 2명으로 총 4명으로 구성된 팀이 만들어졌다.

처음에 회의를 통해 프론트엔드/백엔드의 역할을 정하고 대략적인 일정을 맞추었고, 이후에 프론트엔드끼리 모여서 더 세부적인 회의를 진행하여 어떤 페이지를 맡을지 분배를 하였다.

프론트엔드 목표

Top, Nav, Footer ✨

회원가입, 로그인 UI ✨

메인 UI ✨

상품 리스트 UI ✨

상품 디테일 UI

SNKRS 리스트 UI ✨

SNKRS 디테일 UI ✨

장바구니 UI

✨가 있는 항목이 내가 진행한 업무이다.
처음 시작할때는 내가 해야할 업무가 이렇게 많지는 않았는데, 진행하다보니 이렇게 되버렸다...

좀더 디테일하게 구현한 UI 설명을 해보자면,

마우스 호버시 나타나는 Drop-down식 모달창으로 Nav바 구현
검색 키워드 입력시 일치하는 상품 검색 기능

회원가입, 로그인 UI

카카오 API를 활용해 구현한 SNS 로그인 기능 구현
로그인 페이지는 모달창으로 구현

상품 리스트, SNKRS 리스트 UI

아이템 카드, 필터링 같이 기능별로 컴포넌트 분리 및 Grid로 레이아웃을 구성
Query 파라미터를 통한 필터링 및 정렬 기능 구현

SNKRS 디테일 UI

Path 파라미터를 활용해 스타일코드에 맞게 페이지가 출력되게 디테일 페이지 구현
백엔드와의 통신을 통한 추첨 기능 구현

메인 UI

이미지 슬라이드 기능 구현 (리팩토링때 구현 예정)

협업

이번에도 역시 칸반보드를 활용하여 서로의 업무 진행과정을 공유하였다.

다만, 아쉽게도 이번에는 다들 바빠서인지 회의록 작성이라던지 디테일한 진행상황 공유가 되지는 못했다. 나조차도 너무 힘들어서 적극적인 피드백이 힘들었다. 이 점은 꼭 개선시켜야 할 것 같다. 힘들다고 개인의 진행상황을 공유하지 않으니 즉각적인 대응이 이루어지지 못했기 때문이다. 이 부분은 반드시 고치도록 노력해야겠다.

결과물

네비게이션 바

검색

상품 리스트 & 정렬 & 필터링

회원가입 & 로그인

SNKRS 리스트

SNKRS 디테일 페이지

시간이 맞으면 추첨 기능도 활성화 되어서 이용해 볼 수 있다.

소감

이번 프로젝트는 개인적으로 며칠 앓아눕기도하고, 의욕이 꺾일만큼 정말 부담스러웠고 힘든 프로젝트였다.

그렇게 느낀 이유는 결국 프로젝트의 아웃풋은 프론트엔드가 보여주는 것이 가장 눈에 띄기 쉽고 확인하기 쉬운 것이기에 백엔드 팀원분들의 결과물이 헛되지않게 만들고 싶었다. 욕심은 차고 넘치는데 눈앞에 쌓인 해야할 일은 산더미다보니 이게 엄청난 부담으로 다가왔다.

우선 애자일하게 작업을 하기로 마음먹고 하나의 컴포넌트를 만들때 일단 틀을 만들었다. 나중에 다시 디테일하게 수정해야겠다고 마음먹었지만 내 실력으로는 내게 닥친 업무를 쳐내기에 급급했고, 디테일을 수정하고 추가 기능까지 구현하기엔 너무 벅찼다. 엎친데 덮친격으로 다른 팀원분도 페이지를 만드는데 진행과정이 더디다보니, 내게 넘어온 업무도 생겼었다. 아마도 이때쯤 멘탈이 박살나서 의욕이 없어질 만큼 힘들었던것 같다.

누군갈 탓하기 보다는 "내가 더 잘했다면, 큰 문제는 아니었을텐데..."라는 생각에, 내 실력에 회의감이 많이 들었다 😢