[React-firebase] doble - 착한 소비 통합 쇼핑몰 프로젝트 후기

doble 프로젝트 Github 레퍼지토리
doble 사이트

Intro

purplecode에서 react로 만든 미니 프로젝트 후기를 작성해보려고 한다.

작년 여름에 react를 처음으로 공부하고, 다양한 사람들과 프로젝트를 하고 싶어 동아리에 들어가게 되었다.

디자인 파트 4명과 프론트앤드 파트 2명, 총 6명이서 프로젝트를 진행하게 되었다.

디자이너와 처음 협업을 해봤는데 처음에는 의사소통하는데 어려움이 있었다. 하지만 점점 프로젝트를 진행해가면서 서로 소통하는 법을 알아간 것 같다. 그리고 디자인 파트 팀원들이 보내준 예쁜 디자인이 덕분에 개발하는데 더 재미있었다.😃

학교에서 혼자하는 실습위주로 공부를 많이 했었는데 이번 프로젝트는 팀원과 같이 할 수 있어서 더 좋았다.
처음으로 리액트를 사용하여 해본 프로젝트라 걱정이 많이 되었는데 팀원과 함께 모르는 부분을 고민하고 코드를 수정하면서 마지막까지 완성할 수 있었던 것 같다.

doble

doble make it double!
좋은 소비가 두배의 가치를 만든다.

도블은 기부 스토어 브랜드들을 모아 한번에 볼 수 있는 통합 쇼핑몰입니다.

기획

처음에 미니 프로젝트로 쇼핑몰 사이트를 만들어보자는 의견이 나왔다. 어떤 쇼핑몰이 좋을까 팀원들과 다양한 의견을 나누다가 '기부'라는 키워드로 주제를 잡게되었다.

팀원들 모두 물건을 사면 기부도 되는 착한 소비를 유도하는 브랜드들을 몇 가지를 알고 있었다. 요즘 많이 사용되는 무신사나 지그재그 처럼 착한 소비 브랜드들만 모아놓은 통합 쇼핑몰이 있다면 사람들이 더 편리하게 착한 소비를 할 수 있을 것이라고 생각했다.

그래서 착한 소비를 유도하는 브랜드들을 모아놓은 웹 쇼핑몰을 만들기로 결정 하였다!

디자인 기획

요즘 MZ 세대들은 본인의 가치관과 신념을 위해 돈을 쓰는 것을 아끼지 않고 가성비를 따지지 않는다고 한다.

그런 타겟의 특성에 맞춰 젊은 느낌의 브랜딩을 진행하였다.

브랜드 컬러에 있어서 청춘의 다양하고 자유로운 모습을 형상화하기 위하여 원색 계열의 빨강, 노랑, 파랑을 사용하였다.

UI 디자인의 경우에는 저희 브랜드의 주요 타겟층인 젊은 여성들이 선호하는 패션브랜드들의 UI를 참고하여 주요 상품이 패션인 브랜드인 점을 잊지 않도록 했다.

UX적인 면에서는 단순히 상품뿐만 아니라 이 사이트를 이용하는 유저들이 공익적인 가치를 실현하는 착한소비 자체에 대한 지속적인 관심을 가진 유저층임을 인지하고, 매거진을 통해 공익가치실현 브랜드들과 관련된 주요 이슈들을 포스팅하여 유입을 늘리고 충성도를 높이고자 하였다.

작업 기간

2020.10.17 - 2020.1.9

코로나가 심해져서 중간부터는 만나지 못하고 줌으로 진행하게 되었다.

사용한 기술 스택

🎈 프론트엔드

• react
• CSS
• JavaScript
• Styled component
• redux
• redux-saga
• react-router
• 배포: netlify

🎈 백앤드

• firebase

페이지

(내가 구현한 페이지는 ✨표시)

메인 페이지

(메거진 구독 부분 ✨)
로그인을 했다면 헤더의 사람모양을 눌렀을 때 마이 페이지로 이동이 가능하고 로그인 하지 않았다면 로그인 페이지로 이동한다.

상품별 페이지

브랜드별 페이지

매거진 페이지 ✨

회원가입 ✨

로그인 페이지

마이페이지 ✨

주요 구현 사항

• Firebase 데이터베이스와 상품/브랜드/메거진 페이지 연결
• Firebase email 로그인/회원가입

아쉬운 점

1. 처음에 기획했던 것들을 다 구현하지 못했다.

   특히 찾기 기능, 찜 기능과 같은 주요 기능을 완성하지 못해 아쉬운 것 같다. 추가로 구현하여 완성시키고 싶다.

추가 구현해야하는 사항

• 찜 기능
• 찾기 기능
• 카테고리 활성
• 아이디/비밀번호 찾기
• 페이지내이션
• 베스트 상품 보여주기

2. 구현시키는 것에 집중하여 코드를 깨끗하게 작성하지 못하였다.

   코드를 짜면서 중복되는 부분을 줄이고 가독성 좋은 코드를 짜자라고 생각하면서 진행을 했는데 어려웠던 것 같다.

   마감일이 다가올 수록 구현에만 신경을 써서 코드가 가독성이 떨어지게 되었던 것 같다.

   (근데 구현만 하려고 하면 나중에 더 막히는 다는 것도 다시한번 느꼈다.)

고치고 싶은 코드 부분

• 마이페이지
• 회원가입

3. 반응형 페이지가 아쉬움이 남는다.
   이번 프로젝트는 모든 페이지를 반응형으로 만들었다.
   반응형으로 만들면서 노트북 크기에 따라 화면이 다르게 나오고 핸드폰 기종마다 화면이 다르게 나오는 것을 알게 되었다.

   메인 페이지에서도 배경의 아이콘이 13인치인 내 노트북에서는 가득차고 15인치 노트북에서 보면 맞는다. 또 13인치 노트북에서 보면 적절한 크기가 15인치 노트북에서 보면 허전해 보인다.

   핸드폰으로 봤을 때 간격들, 글자 크기들이 아쉬운 점이 많은 것 같다.

Review

짧지만 긴 시간동안 디자이너들과 협력하여 기획부터 개발까지 전 과정을 경험해볼 수 있었던 좋은 시간이었던 것 같다.
처음 만나게 된 팀원들이 였지만 모두 좋은 분들이여서 진행하는 동안 즐겁게 할 수 있었다.

배운점

이번 프로젝트를 통해 협업에 대해서 배울 수 있었다. 디자이너와 소통하는 법도 배우고, 같은 개발자끼리 소통하는 법도 배웠다.
처음으로 Github에서 코드를 합쳐보았는데 error가 뜰까봐 master에 합칠 때마다 무서워했던 기억이 난다.
처음에는 Github에 commit을 뭐라고 써야하는지도 어려웠지만 이제는 왜 commit 규칙을 정하고 commit을 잘 써야하는지 느꼈다.

책으로 공부했던 리액트를 직접 사용해서 프로젝트를 만들어보니 책으로 이해하고 넘어갔던 부분도 실제 구현해보려고 하니 어려웠다. 눈으로 본다고 나의 것이 되는게 아니라는 것을 느꼈고 앞으로도 직접 해보면서 공부를 해야겠다.

부족한 점이 많은 프로젝트지만 이번 경험을 통해서 많은 것을 느끼고 배울 수 있었다.

앞으로 더 좋은 코드를 짜는 사람이 되어야지😎