1차 프로젝트 회고

Na Jeong·2023년 1월 2일
0

위코드에서 진행한 1차 프로젝트가 끝이났다.
길다면 길고, 짧다면 짧은 2주였지만, 나름 만족스럽게 끝이났다고 생각하며 회고시간을 가져보고자 한다!

프로젝트 소개

이번에 우리가 진행한 프로젝트는 코스메틱 브랜드(Aesop)를 모델링 한 Cesop 웹 사이트이다.

프로젝트를 시작하기에 앞서 PET 분석을 통해 사이트에 대해 자세히 분석을 하게 되었다.
우리가 생각하기에, 이솝의 키워드는 '조화'였다.
실제로 이솝은 패키징보다는 피부와 제품의 조화를 우선시하고, 필요 없는 것은 모두 뺀 디자인으로 어느 장소에서든 이솝의 제품이 어울릴 수 있게끔 특성을 지니고 있다.
어떻게 보면, 이솝 매장 자체가 브랜드 비주얼 마케팅이라고 할 수 있는 것이다.
이에 우리 Cesop도 조화를 생각하며 프로젝트를 진행하기로 했다.

기술 스택

  • FrontEnd : React, Javascript, SCSS
  • BackEnd : Node.js, MySQL, Express
    common : Trello, slack

이번 Cesop에서 Product Manager, Project Manager를 뽑아야 했었는데, 내가 Project Manager를 자진해서 해보기로 하였다.
팀 프로젝트의 진행상황 등을 관리하는 역할로써 코드를 짜면서 함께 하기 힘들것 같다는 생각은 있었으나, 한번쯤은 협업하는 과정에 있어서 이 역할을 해보고 싶었기 때문이다.
프로젝트 매니저로써 팀과 소통할 수 있는 slack 채널과 , Trello 관리를 하게 되는데, 특히나 이 Trello가 프로젝트 관리의 핵심이라고 할 수 있다.
처음 사용해보는 툴이라 처음엔 티켓들만 나열해놓기 바빴는데, 멘토님들의 도움으로 Label사용, Membe분배 등 티켓을 여러방면으로 활용해 볼 수도 있었다.

구현 사항

  1. 메인페이지 ✅
  2. Navbar + 상단 Banner + Footer ✅
  3. 카테고리 모달창 ✅
  4. 로그인 페이지
  5. 회원가입 페이지
  6. 제품 리스트 페이지
  7. 제품 상세 페이지
  8. 장바구니
  9. 결제 페이지

나는 이 9가지의 필수 구현 사항 기능 중, ✅표시가 된 페이지를 구현하였다.
크게 나누어보면,
메인 페이지 : 하단에 있는 이미지 캐러셀을 무한 슬라이드로 구현
section을 컴포넌트화 시켜 Map을 사용해 반복되는 section 처리
Navbar : Nav bar의 메뉴 클릭 시 새로운 카테고리 Modal 창을 띄워주기
각각 메뉴 tab 클릭 시, 카테고리 별 메뉴 띄우기
Modal : 카테고리 이름을 누르면 해당 상품 리스트 페이지로 이동
Banner & Footer : 모든 페이지에 붙어있도록 함

추가적으로, 장바구니 페이지를 맡은 팀원에 팔로우하여 상단에 Modal창으로 띄우는 작업까지 마무리 하였다.



가장 어려웠던, 가장 기억하고 싶은 무한 캐러셀 구현

진짜 안뒤져본 블로그가 없었다. 그 정도로 공부하는데 가장 오래걸렸고, 그러기에 구현에 성공한 후 가장 뿌듯했던 무한 캐러셀이다. 무한 슬라이드를 구현하려면, 약간의 눈속임이 필요했다. 캐러셀 image 배열의 맨 앞 사진과, 맨 뒷 사진을 복사하여 마지막 장에서 맨앞으로 넘어갈 때, 복사해 두었던 앞의 사진을 눈속임용(?)으로 보여주면서 실제 첫번째 사진을 띄워주도록 한다. 말로 풀어 설명해도 어렵다 ! 버튼을 클릭했을 때, Transition을 사용해서 사진을 넘겨주다가, 맨 마지막 사진이면 moveToNthSlide() 함수로 이동한다.

그럼 moveToNthSlide() 함수에서 setTimeout을 사용해 첫번째 사진으로 돌아가게끔 작성해주면 된다 !

회고

나는 FrontEnd 담당이기 때문에, Front 팀원들의 일정이나 어려운 상황 등은 한번에 바로 파악이 가능하고, 일정 조율이 보다 쉽고 빠르게 이루어질 수 있었다.

모두가 일정한 속도로 코드를 짤 수 있도록, 티켓 조율과 함께 수시로 소통을 하면서 서로의 Blocker에 대해서 토론도 하면서 그렇게 잘 진행을 했다고 생각했다.

하지만, BackEnd는 내가 맡은 파트가 아니란 이유로, BackEnd의 상황은 깊숙히 몰라도 된다는 안일한 생각을 하게 되었고, 팀원들이 말해주는 기간만 고려해 일정 조율을 하다보니 Demo Day 하루를 앞두고, BackEnd API가 완성이 되지 않아 기다리게 되는 상황이 생겨버렸다.

그러다 일어났으면 안되는 일이 일어나게 되었다.
다른 팀원이 맡은 페이지의 key, value 값과 BackEnd에서 보내는 값이 달라 다시 처음부터 맞춰야하는 상태가 되어버린 것이다.
하지만, 팀원 모두가 밤을 새다시피 하여 어느정도 상황 수습을 하고, 프로젝트를 마무리 지을 수 있었다.

PM으로써의 역할을 잘 하였는가 ?

Project Manager로써 Front와 Back 두 파트 모두의 상황을 신경쓰고 서로간의 소통 컨벤션을 처음부터 제대로 잡아놨어야 했는데, 내가 맡은 파트에만 집중을 하다보니 하나하나 신경을 쓰지 못한것 같았다. 백엔드와의 소통도 중요한 것인데 그 중요한 것을 잊어버린 것이다.
이번 프로젝트를 통해 BackEnd와 FrontEnd간의 사소한 소통 오류 하나가 큰 실수를 범한다는 것을 깨달았고, Project Manager의 역할에 대해 다시 한번 곱씹어보는 기회가 되었다.

그래도 좋은 팀원들을 만났기에, 힘들지만 재밌게 프로젝트를 마무리 할 수 있었던 것 같다.
모두가 짜기라도 한듯 Blocker를 만났을 때, 합심해서 서로 도와주고, 안되는 부분에 있어 남탓 하지 않고 서로 북돋아주고 서로가 서로의 멘탈을 케어해주며 그렇게 2주동안 시간을 보냈다.

처음 프로젝트 시작할때는 Project Manager로써 그들을 이끌어야 한다고 생각했는데 지금 곱씹어보면, 팀원들이 부족하지만 PM의 말을 잘 들어주고, 하자고 하는대로 팔로우 해주었고, 역으로 나를 이끌어주며 진행이 되었던 것 같다.

우리 팀 중 누가 읽을까 싶지만, Cesop팀 정말 수고 많았고 다들 감사하다는 말을 전하고 싶다.

profile
끊임없이 노력하는 프론트엔드 개발자 (⸝⸝⍢⸝⸝) ෆ

2개의 댓글

comment-user-thumbnail
2023년 1월 8일

나정님 없는 시솝은 있을 수 없어요🥹

1개의 답글