[엘리스 SW트랙 6기] 1차 프로젝트 회고록

2주 동안 진행했던 1차 프로젝트가 드디어 끝이 났다.

네니요

끝난 지 시간이 조금 흘렀지만, 그래도 늦기 전에 회고록을 한번 작성해보고자 한다.

 

프로젝트에서 맡은 역할

우리 팀은 프론트엔드 4명, 백엔드 2명으로 구성되었고 나는 프론트엔드를 맡았다.

그리고... 내가 팀장을 맡게 되었다.

1차 스터디에서 원하는 스터디가 없어 직접 팀장을 맡았던 스노우볼이 여기까지 굴러왔다.. 😅

그래도 이왕 맡은거 열심히 해보자는 마음으로 프로젝트 기간에는 진짜 바쁘게 살았던 것 같다.

심지어 학교 졸업프로젝트까지 겹쳐있어서, 너무 할게 많아 눈앞이 깜깜해지던 순간도 있었다.

진짜 밥 먹는 시간, 자는 시간 빼고 하루종일 코딩만 했었던 것 같다..😇 

 

팀장이라는 직책이 아무래도 부담이 있었던 건 사실이다.

나름 스타트업에서 일해봤던 경험도 있고, 이전 스터디에서도 팀장이었으니 처음엔 잘할 수 있을거라 생각했다.

하지만 협업이라는 것은 할 때마다 정말 어려운 것이었다. 나 혼자만 열심히 한다고 해서 되는게 아니기 때문이다.

아무래도 경험이 부족한 팀원분들이 계시다보니 프로젝트라는 벽에 막히지 않도록 정말 많은 노력을 해야했다.

혹시라도 팀원이 이탈하면 어쩌지.. 라는 걱정이 가득해서 스트레스를 받았던 것 같다.

 

그래서 나름대로의 룰도 정했었는데, 디스코드 음성 채팅방에 오전 10시부터 오후 10시까지 상주하는 것이었다.

최대한 실시간으로 소통하면서 팀원분들께 도움을 드리고자 노력했었다.

그래도 팀원 분들이 다들 너무나도 잘 따라와주셔서, 큰 문제 없이 프로젝트를 마무리할 수 있었다.🥰

 

https://github.com/elice-team03/gazago

우리 팀 1차 프로젝트의 github repo이다.

---

기획

시간이 2주밖에 안되는 짧은 시간이라서, 기획은 최대한 빨리 진행하고자 했다.

기본적으로 쇼핑몰이라는 주제가 정해져 있었지만, 이전 기수에서는 스켈레톤 코드를 줬었다고 한다.

하지만 스켈레톤 코드가 주어지면 아무래도 결과물이 획일화되는 경향이 있으니까 제공을 안해준다고 한다.

다음 기수 분들은 참고하시길!

어쨌든 "쇼핑몰" 이라는 키워드만 가지고 기획을 진행해야 했다.

 

의류 쇼핑몰처럼 흔한 주제는 하기 싫었기에 팀원분들과의 논의 끝에 캠핑용품 쇼핑몰이라는 주제를 선정했다.

쇼핑몰의 사용자 페르소나를 위와 같이 작성해 보았다.

다양한 사용자가 원하는 니즈에 맞추어 이용할 수 있도록 캠핑 브랜드 편집샵 컨셉으로 진행하기로 했다.

---

디자인

수많은 고민의 흔적들 ㅠㅠ

피그마를 이용해서 디자인 프로토타입을 만들었는데,

아무래도 컴포넌트 하나하나마다 직접 만들어서 디자인하기에는 시간이 너무 오래 걸릴 것 같았다.

그래서 기존 서비스들을 조금씩 참고해서 우리만의 느낌으로 디자인을 변경하였다.

디자인 초기 단계에서는 진짜 하루종~일 디스코드에서 팀원분들하고 논의를 했던 것 같다. 목이 아플 정도였다. ㅋㅋㅋㅋ

전체적인 디자인은 같이 정하고, 세부적인 디테일은 각자 페이지를 맡아서 UI에 적용시키기로 했다.

내가 맡은 페이지는 상품 상세, 장바구니, 주문, 주문 내역 페이지이다.

---

UI 구현

 

상품상세 페이지

장바구니 페이지

주문 페이지

주문내역 페이지

피그마에서는 간단하게 틀만 잡아두고, UI 구현 단계에서 본격적으로 UI를 적용하였다.

바닐라 JS이기 때문에 ant design같은 디자인 라이브러리를 사용할 수가 없었다.

그래서 코치님께서 추천해주신 bulma를 사용해 최대한 깔끔하게 디자인하려고 노력했다.

세세한 부분까지 코치님께서 봐주셔서, 피드백을 받은 후 조금 더 사용자에게 친화적인 ui를 그릴 수 있었던 것 같다.

---

기능 구현

기능 구현 관련해 생성했던 Merge Request들이다.

• 상품 상세 페이지
  • 상품 데이터 바인딩
  • 상품정보 더보기 기능
  • 수량 변경 기능
• 장바구니 페이지
  • 상품 데이터 바인딩
  • 수량 변경 기능
  • 총 결제금액 계산 기능
  • 상품 삭제 기능
• 주문 페이지
  • 주문상품 데이터 바인딩
  • 우편번호 검색 기능
  • 주문정보 전송 기능
  • 이전 배송지 불러오기 기능
  • 주문 기능(stripe 연동)
• 주문내역 페이지
  • 상품 데이터 바인딩
  • 배송지 변경 기능
  • 주문 취소 기능

크게 분류해 보자면 이렇게 되는데.. 일단은 데이터 바인딩과 간단한 api 연동은 제외하고,

가장 힘들었던 건 장바구니 페이지였던 것 같다.

체크박스를 선택할 때마다 해당 상품의 금액만큼 총 상품 금액을 합산하고,

단일 상품의 수량을 변경할 때마다 상품의 가격이 바뀌며 총 상품 금액 역시 변경되도록 해야 했다.

또한 상품을 삭제하면 총 상품 금액에서 해당 상품의 가격을 빼야 했고..

일정 금액 이상이 넘어가면 NaN이 뜨고 난리가 났었다.😂

예외처리를 꼼꼼하게 한다고는 했지만, 왜안돼? 가 정말 많이 육성으로 터져나왔었다..

우리 팀이 다른 팀과의 차별성이 있다면, 바로 stripe를 연동해서 실제 결제 시스템을 구현했다는 것이다.

물론 연동은 거의다 백엔드에서 해주시고, 나는 거의 UI만 구현해서 결제정보만 서버에 넘긴게 다이지만.

 

아무튼 나 개인만 봤을 때는 최대한 구현할 수 있는 기능은 모두 구현하였다.

하지만 앞에서 말했던 것처럼 해당 프로젝트는 개인 프로젝트가 아니었으니..

---

아쉬웠던 점

분명히 로컬에서는 잘 작동했던 코드들이, 발표 하루 전 서버에 배포를 하니까 작동을 안 하는 상황이 벌어졌다.

그래서 마지막 오피스아워에서 코치님들이 많은 걱정을 하셨다..

심각성을 느낀 우리 팀은 발표 하루 전 모두가 밤을 새서 수정에 들어갔다.

그래도 최대한 수정했다고 생각했는데.. 발표를 하던 중 기본적인 기능에서 조금씩 오류가 났다.😓

코치님들께서도 우리 팀이 많은 기능을 구현한 것은 좋지만, 기본적인 기능에 오류가 있는 것이 아쉽다고 하셨다.

그동안 우리 팀이 얼마나 고생하고 노력했는지 알기에, 나 역시도 너무나도 아쉬웠었다..

그래도 프로젝트 전반적으로 완성도가 높다는 칭찬을 받아서 아쉽지만 뿌듯했다.

 

다음 프로젝트를 한다면, 기능을 많이 구현하는 것도 좋지만 기본적인 기능 구현의 완성도를 더 높여야겠다고 느꼈다.

또한 검색엔진 최적화도 많이 고려를 못한 것 같아서, 해당 부분도 보완을 해야겠다고 느꼈다.

그리고 컴포넌트 기반의 SPA 방식으로 개발하고 싶었지만 시간관계상 그러지 못해서 많이 아쉬웠다.

 

마음고생도 많이 했고 잠도 많이 못 잤지만, 그래도 정말 좋은 경험이었다.

이번 1차 프로젝트에서 경험한 것을 바탕으로 더 좋은 개발자가 될 수 있도록 노력할 것이다.

 

+) 우리 팀이 우수상을 수상했다.........!! 전혀 예상을 못했는데 넘 기쁘당......

대박