[TEAM PROJECT] 통합 쇼핑 플랫폼 - 12st
소스 및 PPT 자료
GitHub - ish1610/12st-shoppingMall
Contribute to ish1610/12st-shoppingMall development by creating an account on GitHub.
github.com
깃허브 소스 코드와 프로젝트 PPT를 첨부하였습니다.
주제 선정
프로젝트 시작 첫날 팀원들 간 주제를 선정하기 앞서 세 가지의 선정 기준을 정하였습니다.
우선 Open API Data를 적용시킬 수 있는 주제를 선정하여 프로젝트 진행 중 이미지 등의 데이터가 부족하여 준비하는 시간을 줄이고자 하였습니다.
다음으로 프로젝트 시작 전 팀원 각각이 공부했던 기술들을 이번 프로젝트에서 점검해볼 수 있는 주제를 선정하여 프로젝트 진행 중 자신의 부족한 부분을 보다 명확히 알 수 있도록 하여 프로젝트 종료 시 자신이 느낀 부족한 부분을 중점으로 보완할 수 있도록 하였습니다.
마지막으로 실생활에서 가장 많이 접해오던 것을 주제로 선정하고자 하였습니다.
많은 의견들이 나왔었고, 최종적으로 위의 세 가지 선정 기준에 부합하는 쇼핑 플랫폼으로 주제를 선정하였습니다.
프로젝트 진행과정
프로젝트 개발 환경
쇼핑 플랫폼 12st는 React.js를 사용하여 쇼핑 플랫폼을 구축하였으며, Server 통신은 Axios API를 사용하였습니다.
프로젝트에 필요한 데이터는 MySQL DB에 저장하였여 사용하였으며, GitHub를 통해 프로젝트의 버전 관리를 해주었습니다.
또한 별로도 Notion을 사용하여 팀 회의 내용이나 프로젝트 관련 내용을 정리해주었습니다.
프로젝트 기획
이번 프로젝트 진행 전 팀원들 간 공공 포털 보조금 API를 이용한 보조금 조회 App을 만들려고 한 적이 있었습니다.
세부적인 프로젝트 기획 없이 열정만 앞서 진행하여 보조금 API 데이터를 가공하여 활용하는 부분에서 어려움을 겪었으며, 진행 매 순간 즉각적으로 기획을 수립하다 보니 많은 어려움을 겪었습니다.
앞선 경험을 바탕으로 이번 프로젝트에서는 보다 세부적인 기획을 수립하여 진행 도중 프로젝트 진행 방향을 잡거나, 수정하는 시간 소요를 줄여 진행에 막힘이 없도록 하였습니다.
앞선 경험에서 느낀 아쉬웠던 부분인 DataBase과 사용자 편의를 높여줄 API 사용에 중점을 두고 프로젝트 기획을 하였습니다.
Site Map & 테이블 명세서 & UI Skeleton 작업
웹사이트 구축 전 번거롭다고 생각할 수도 있는 Site Map을 작성하여 만들어야 하는 페이지를 좀 더 명확히 하였습니다.
작성 한 Site Map을 바탕으로 팀원 간 페이지를 분담하여 하나의 페이지 작업이 완료된 후 지체 없이 다음 페이지 작업에 들어갈 수 있었습니다.
또한 직관적으로 보이는 Site Map 덕분에 DataBase 설계를 수월하게 진행할 수 있었습니다.
테이블 명세서 작성 후 FE 작업 전 UI Skeleton 작업을 진행하여 페이지의 각 요소의 배치에 대한 고민 시간을 줄일 수 있었습니다.
팀원들 간 상의하여 사전에 각 요소의 배치를 해주고 메인 컬러를 정하여, 여러 쇼핑 플랫폼을 참고하는 과정에서 최종적으로 구축된 웹사이트가 여러 개의 플랫폼으로 느껴지지 않고 하나의 플랫폼으로 느껴질 수 있도록 하였습니다.
담당 역할
프로젝트에서 번거롭다고 생각할 수 있는 부분을 팀원들간팀원들 간 나누지 않고 스스로 담당하여 프로젝트 기획 단계에서 팀원들 간 회의에서 나오는 의견이나 아이디어, 프로젝트 관련 자료를 Notion에 기록하여 팀원들이 추후에도 확인할 수 있도록 하였습니다.
프로젝트 진행 전 React 컴포넌트 기본 설정 밑 전반적인 UI Skeleton 작업을 하여 팀원들에게 공유하여 UI 배치에 대한 고민에 사용되는 시간을 줄여 효율적인 프로젝트 진행이 되도록 하였습니다.
[프로젝트 전체]
- UI Skeleton 작업 진행 후 공유하여 UI배치에 대한 고민에 소요되는 시간을 줄여 효율적인 프로젝트 진행이 가능하도록 하였습니다.
- 모든 페이지의 UI를 담당하였으며, 하나의 플랫폼으로 느껴지는 UI를 구현하였습니다.
- 모든 페이지 1400px, 1220px, 750px 3가지 크기의 반응형 처리하여, 사용자의 환경 편의를 고려한 UI를 구현하였습니다.
- 사용자 경험을 고려하여 추가적인 입력 폼이 필요한 경우 별도의 페이지 전환 없이 모달로 구성된 입력폼을 사용하였습니다.
- 회원가입 시 사용한 유효성 검사 로직, state와 관련 handle 함수, Blur 관련 함수를 Custom Hook으로 재 사용하여 myPage에서 중복되는 코드와 불 필요한 코드를 제거하여 200줄 가량의 코드를 줄였습니다.
[메인 페이지]
- react-slick API를 사용하여 광고 배너를 구현하였습니다.
- 사용자의 눈길을 끌 수 있는 상품 판매량이 가장 높은 100개의 베스트 상품, 할인율이 25% 이상인 할인 상품 등의 일부를 노출하는 section을 구성하였습니다.
[상품 컴포넌트]
- 사용자의 편의성을 고려해 아이콘 클릭으로 장바구니에 상품이 추가될 수 있게 하여 상품 상세 페이지로 이동하여 장바구니에 담은 Flow를 제거하였습니다.
- 사용자의 편의성을 고려해 각 상품에 대한 판매량과 리뷰 수를 상품 컴포넌트에서 바로 확인할 수 있는 UI와 기능을 구현하여 상품 상세 페이지로 이동하여 판매량과 리뷰를 확인하는 Flow를 제거하였습니다.
[베스트 상품 페이지, 카테고리 별 상품 페이지]
- react-infinite-scroll-component API를 적용하여 상품 리스트 렌더링 시간을 개선하였습니다.
[상품 상세 페이지]
- react-pagination API를 적용하여 상품 관련 글이 사용자의 페이지 전환 행동 시 다음 데이터가 보이도록 하였습니다.
- 상품평, 문의 내역을 DB와 연결하여 다른 사용자가 작성한 해당 상품에 대한 글을 확인할 수 있도록 하였습니다.
- 페이지 상단에서 사용자가 확인하고자 하는 정보 중 할인율, 가격 정보를 사용자에게 강조할 수 있는 UI와 결제 버튼이 강조되는 UI를 구현하였습니다.
[상품 검색 페이지]
- 사용자가 입력한 검색어를 쿼리 스트링으로 서버에 전달하여 해당 검색어가 포함되는 상품의 판매처, 상품명, 카테고리 명을 가진 상품 데이터를 상품 검색 페이지에 노출되도록 하였습니다.
[회원가입 페이지]
- 적절한 유효성 검사를 각각의 사용자 입력 폼에 사용하였으며, 사용자 경험을 고려하여 회원가입을 클릭 시 유효성에 대한 피드백을 전달하는 것이 아닌 각각의 input 요소의 Blur 이벤트 발생 시 유효성에 대한 즉각적인 피드백을 전달하도록 하였습니다.
- react-daum-postcode API를 사용하여 주소 찾기 기능을 구현하여 사용자 편의를 고려한 주소 입력 기능을 구현하였으며, 페이지 전환없이 모달을 이용한 UI 및 기능을 구현하였습니다.
[장바구니 페이지]
- 장바구니에 담긴 상품 선택 기능을 구현하여 삭제와 결제로 연결이 되도록 하였습니다.
- 사용자 편의를 고려하여 사이드에 있는 가격 정보에 sticky를 적용하여 스크롤 액션에 영향받지 않는 가격 정보 UI를 구현하였습니다.
- 삭제한 상품이 즉각적으로 반영되지 않는 이슈가 있었지만, State의 비동기와 컴포넌트 리 렌더링에 대해 살펴보고 Mount 되는 상품을 별도의 컴포넌트로 분리하여 해당 컴포넌트의 prop으로 데이터를 전달하여 비동기로 인한 이슈를 해결하였습니다.
[주문 / 결제 페이지]
- 사용자 경험을 고려해 배송지 관련 기능을 페이지 전환 없이 모달을 활용한 UI와 기능을 구현하였습니다.
- 적절한 유효성 검사를 사용하여 유효한 마일리지 사용이 가능하도록 하였으며, 유효성에 대한 피드백을 전달하도록 하였습니다.
[결제 완료 페이지]
- 실생활에서 많이 접하는 영수증 형태의 UI를 구현하여 다소 딱딱하게 느껴질 수 있는 페이지를 친근함이 느껴질 수 있도록 하였습니다.
[관리자 페이지]
- 관리자 페이지 특성상 많은 요소의 배치를 고려하여 카테고리, 데이터, 수정 및 확인 기능을 3개의 section으로 분리하여 편의를 고려한 UI를 구현하였습니다.
- 상품관리, 주문관리, 게시글 관리에서 해당 데이터 수정 시 관련 DB에서도 수정이 되도록 하였습니다.
- react-pagination API를 적용하여 데이터가 많은 공간을 차지하지 않도록 UI를 구현하였습니다.
[Backend]
- 저희 팀은 프론트 단과 백 단을 나누어 진행된 것이 아니라 담당하는 페이지에서 필요한 Backend는 각자 담당하여 진행하였습니다.
프론트엔드
1400px / 1220px / 750px 3개 사이즈의 반응형 웹사이트로 만들어주어 사용자가 어떠한 환경에서도 편하게 이용할 수 있도록 하였습니다.
기존적으로 반응형 작업을 각 px마다 비율 조절을 해주었으며 카테고리와 내비게이션 바의 경우 모달을 이용하여 사용자가 아이콘 클릭 시 화면에 Mount 되게 해 주어작은 화면에서도 각각의 요소를 동적으로 이용 가능하도록 해주었습니다.
평소 여러 웹사이트를 이용할 때 입력 폼이 별로의 페이지로 구성되어 있는 경우를 종종 보았습니다.
이로 인해 딱히 불편한 점은 없지만 사용자 경험을 미세하게 감소시킨다라고 생각을 했었습니다.
때문에 페이지마다 적절한 요소에 모달로 된 사용자 입력 UI를 만들어주어 별도의 페이지 전환 없이 사용자 입력이 가능하도록 해주었습니다.
프론트엔드 사용 API
다음 주소 API를 회원가입 시 주소 입력, 배송지 주소 변경, 회원 정보 주소 변경 기능에 적용시켜 사용자가 주소 입력 시 보다 빠르고 쉽게 입력할 수 있도록 해주었습니다.
Paginaition API를 사용하여 상품평, 주문 목록 등 한 번에 많은 양의 데이터가 보일 필요가 없는 부분에서 사용자 선택에 따라 데이터가 보일 수 있게 해 주었습니다..
상품평, 주문 목록에서는 해당 기능을 이용하는 사용자의 목적이 분명하며, 상품평의 경우 유사 상품의 상품평을 비교해보며 여러 번 상품평을 확인할 수 있고, 화면에 표시되는 페이지의 수로 한 번 더 직관적으로 수량을 체크할 수 있어 Paginaition API를 사용해주었습니다.
Infinite Scroll API를 사용하여 카테고리 별 상품, 베스트 상품 페이지에서는 서버 통신으로 한 번에 20개의 상품 데이터만 가져올 수 있도록 하였습니다.
카테고리 별 상품, 베스트 상품 페이지에서는 사용자가 특정 상품을 명확하게 생각하고 들어오는 경우보다는 살펴보면서 구매의사가 생기는 경우가 많기도 하고, 쇼핑몰 특성상 사용자가 상품페이지에 오래 머물수록 판매량이 올라간다는 생각에 Infinite Scroll API를 적용해 많은 양의 상품을 볼 수 있게 하였습니다.
페이지 구성
사용자가 상품을 구매하면 누적 판매량이 올라가며 판매량이 높은 상품 4종이 Main Best 상품 Section에 등록됩니다.
또한 상품 구매 후 리뷰 작성 시 각각의 상품 상품평 수가 증가합니다.
베스트 상품 페이지에서 누적 판매량이 높은 상품 100개를 추려 보여줍니다.
Nav Bar에 등록된 대분류 카테고리를 선택하면 해당 카테고리에 해당하는 상품만 보여줍니다.
또한 해당 페이지에서는 사이드에 있는 카테고리로 중분류, 소분류, 세분류 카테고리를 선택하여 상품을 볼 수 있습니다.
회원가입 페이지에서는 각 요소마다 설정한 유효성 검사를 모두 통과하여야 회원가입이 이루어집니다.
각 요소의 유효성 검사 결과 피드백을 사용자에게 즉각적으로 전달하여 보다 나은 사용자 경험을 전달할 수 있도록 하였습니다.
로그인 시 쿠키를 발급하도록 하였으며, 로그인이 필요한 플로우에서 쿠키를 체크하여 쿠키가 없다면 로그인 페이지로 넘어가도록 하였습니다.
상품 구매는 상품 상세 페이지나 장바구니에서 가능합니다.
상품 상세 페이지에서 장바구니 담기 버튼을 클릭하거나 각각의 상품에 있는 장바구니 아이콘을 클릭하여 장바구니에 상품이 담기도록 하였습니다.
장바구니 페이지에서는 사용자가 담은 상품을 확인할 수 있으며, 구매하기 위해 선택한 상품의 가격 정보가 사이드에 위치한 가격 정보 요소에 즉각적으로 반영됨으로써 사용자에게 보다 나은 사용 경험을 할 수 있도록 하였습니다.
또한 사용자가 삭제하고 싶은 상품은 장바구니에서 삭제되도록 하였습니다.
상품 결제 페이지에서 배송지 정보를 선택하거나 추가할 수 있도록 해주었습니다.
배송지 선택 및 배송지 정보 수정 시 페이지를 전환하지 않고 모달로 띄움으로써 사용자가 보다 쉽게 사용할 수 있도록 하였습니다.
결제 시 보유한 마일리지를 사용하여 상품 가격에서 사용한 마일리지를 제외한 가격을 결제하도록 하였으며, 상품 구매 시 마일리지가 적립되도록 하였습니다.
사용자가 직접 상품 판매처나 상품명으로 검색하여 상품을 볼 수 있도록 하였으며 입력한 검색어에 대한 결과가 없으면 피드백을 전달하도록 하였습니다.
마이페이지에서는 사용자가 구매한 상품 내역을 확인할 수 있도록 하였으며, 구매내역에서 해당 상품 상세 페이지로 연결해주어 사용자의 편의성을 올려주고자 하였습니다.
상품 구매 시 사용한 마일리지와 지급받은 마일리지를 확인할 수 있도록 하였으며, 사용자가 날짜를 지정하여 적립 및 사용 내역을 확인할 수 있도록 해주었습니다.
상품 구매 후 사용자가 작성한 리뷰나 상품에 대한 문의 내역을 확인할 수 있으며 해당 페이지에서 리뷰 및 문의 작성이 가능합니다.
사용자의 정보를 수정할 수 있으며, 배송지를 추가하거나 수정할 수 있도록 해주었고 해당 페이지에서 추가하거나 기본 배송지로 선택한 주소가 상품 결제 페이지에서 사용될 수 있도록 하였습니다.
또한 기본 배송지로 선택된 주소는 상품 결제 시 기본 주소로 입력되도록 하였습니다.
마이페이지에서 작성한 리뷰 및 문의는 해당 상품 상세 페이지에 반영되도록 하여 다른 사용자가 해당 상품에 대한 정보를 확인할 수 있도록 해주었습니다.
마이페이지에서 회원 탈퇴 시 해당 아이디의 권한을 0으로 설정해주어 로그인이 되지 않도록 해주었습니다.
일반 회원의 경우 아이디의 권한을 1로 설정해주어 관리자 페이지에 접속할 수 없도록 해주었습니다.
관리자의 경우 아이디의 권한을 2로 설정해주어 관리자 페이지에 접속할 수 있도록 해주었습니다.
관리자 페이지에서는 상품 관리, 주문 관리, 고객 관리, 게시판 관리가 가능하도록 해주었습니다.
관리자 페이지의 상품 관리에서는 선택한 상품의 정보를 수정이 가능하도록 해주었으며, 해당 페이지에서 수정된 상품 정보는 고객 페이지의 상품에 반영되도록 하였습니다.
관리자 페이지의 주문 관리에서는 선택한 주문의 정보를 상세하게 확인할 수 있도록 해주었습니다.
관리자 페이지의 고객 관리에서는 사용자의 정보를 수정할 수 없으며, 권한만 수정 가능하도록 해주었습니다.
보완 사항
우선 관리자 페이지에 사용자의 편의성을 올리기 위해 각각의 관리 시스템에 검색 기능을 추가해주고, 문의 관리에 카테고리 분류 기능을 추가하여 사용자가 분류된 데이터를 확인할 수 있도록 해야 합니다.
기획 시 플랫폼의 기능을 고객, 판매자, 관리자의 기능으로 나누어 설계하고자 하였으나 기간이 짧아 도중에 판매자 기능을 뺐습니다.
로그인 페이지에서 아이디 찾기, 비밀번호 찾기 기능을 추가가 필요합니다.
보다 완벽한 플랫폼을 위해 판매자와 플랫폼 관리자로 분리하여 구축이 필요합니다.
React Context Hook이나 Redux를 사용하여 전역적으로 변수를 관리하지 못한 아쉬움이 있었으며, 팀원들 간 겹치는 기능이나 코드가 존재했는데 Custom Hook으로 만들어 사용하거나 Util로 빼서 사용하지 못한 점에서 전반적인 코드 개선이 필요합니다.
결제 모듈, 소셜 간편 로그인, 본인 확인 기능을 API를 활용하여 구축해주어야 합니다.
프로젝트 기획 시 세웠던 계획했던 기능과 페이지 등을 짧은 시간 동안 완벽하게 구현하지 못 한 것에 대한 아쉬움이 있는 프로젝트였습니다.
프로젝트 후기
프로젝트 진행 중 가장 좋았던 점은 팀원들 간 의사소통 및 협업에 있어 막힘이 없었고 조화롭게 진행되었던 점이 좋았습니다.
협업 과정에서 저보다 실력 있는 팀원들을 보며 스스로 채찍질도 많이 했던 프로젝트였지만, 채찍질만 하지 않고 프로젝트 진행 중에도 틈틈이 공부하여 부족하지 않은 팀원이 되고자 노력하다 보니 시간이 어떻게 흘러가는지도 몰랐던 것 같고 더 많은 노력과 공부를 해야 되겠다는 생각이 드는 프로젝트였습니다.
프로젝트 진행 전 그동안 공부해왔던 것들을 실제로 구현하는 부분에 있어 어려움도 있었으며, 부족함도 있었지만 작은 파트로 공부했던 것들을 하나의 큰 프로젝트에 모두 적용해 봄으로써 쌓아왔던 것들을 명확하게 할 수 있어 좋았습니다.
전반적인 FE를 진행하면서 중간중간 ‘이렇게 하면 되는 걸까’라는 의문이 들었지만 팀원들 간 구축한 페이지와 기능이 연결되어 하나가 되는 것을 보니 뿌듯함과 성취감을 느꼈으며 현업에서 실제로 사용자에게 좋은 경험을 전달할 수 있는 화면을 제공하고 싶다는 욕심 또한 드는 프로젝트였습니다.
어느 부분이 부족한지, 성취감과 욕심 등 여러 감정과 생각이 들었던 저에게는 성공적인 프로젝트였습니다.
시연 영상