본 프로젝트는 2023년 3월 위코드에서 진행한 1차 팀 프로젝트 결과물입니다.
- 개발 기간: 2023.03.06 ~ 2023.03.17 (2주)
- 개발 인원: FrontEnd 2명, BackEnd 2명
나이키는 엄청난 사용자수와 상품수를 보유하고 있어요.
🏅 2023년 2월 나이키 국제 웹의 접속자 순위는 패션 브랜드 4위
👥 월별 접속자 수는 1억 3천만 명에 달해요.
엄청난 규모를 유지하고, 또 성장시키는 브랜드를 벤치마킹한다면 보다 완성도 높은 서비스를 기획할 수 있지 않을까요?
잘 만들어진 예시를 바탕으로 우리만의 개성을 더하는 것이 목표였어요.
그렇게 시작된 프로젝트! 스포츠 의류를 판매하는 4iz 웹이예요.
- 4iz는 스포츠 의류를 판매하는 웹서비스예요.
- 인터렉티브한 UX와 직관적인 UI 구성이 장점이예요.
- 10~20대 한국인 사용자에게 보다 최적화된 쇼핑몰 서비스예요.
- 서비스 미리보기: 피그마 링크
4iz의 주요 기능은 크게 네 가지예요.
- ⚙ 로그인, 회원가입
- 🛍 상품 리스트, 필터링
- 🛒 상품 상세, 장바구니
- 💳 주문, 결제
- 입력한 이메일을 확인해서 가입한 적 없다면 회원가입으로, 이미 있는 사용자라면 로그인으로 안내해요.
- 하나의 컴포넌트에서 조건에 따라 데이터를 바꿔가며 렌더링하는 방식으로 구현했어요.
- 중복검사, 로그인, 회원가입, 가입완료 페이지를 하나의 경로로 보여줘요.
회원가입
로그인
- 상품 리스트를 할인율과 함께 확인할 수 있어요.
- 서브메뉴(카테고리)는 택1로, 성별/색상/사이즈 필터는 다중 선택 가능하도록 구현했어요.
- 정렬 드롭다운을 추가해서 최신순, 낮은 가격순, 높은 가격순으로 상품을 확인 가능해요.
- 한 뷰포인트 내에서 이미지와 선택 옵션, 장바구니, 설명 등을 한눈에 확인할 수 있도록 구현했어요.
- 색상과 사이즈를 순서 상관 없이 각각 자유롭게 선택하여 장바구니에 담을 수 있어요.
- 장바구니에 담은 내용을 자유롭게 수정하거나 삭제할 수 있어요.
- 사용자가 배송지나 주문자의 정보를 입력해서 저장할 수 있어요.
- 결제 수단을 택1하여 선택한 후 버튼을 누르면 결제가 완료돼요.
- 결제가 완료되면 장바구니에 담은 내용이 비워져요.
🔥 쉽고 빠른 사용자 경험을 제공하는 Single Page Application
-
아래 기술을 사용해 React 프로젝트를 구현했어요.
-
기능 구현에 있어 가능한 라이브러리 사용을 지양하고 직접 만들어나가려 했어요.
- React: JSX 문법과 Virtual DOM을 사용하는 JavaScript SPA 라이브러리
- Scss: 높은 코드 재사용성과 가독성이 장점인 CSS 전처리기 언어
- fetch 함수를 활용한 HTTP 비동기 통신
프론트엔드
🙋 앞으로 프론트엔드에서는 이런 걸 구현해 볼 예정이에요.
- 작성한 코드를 다시 돌아보며 다듬는 리팩토링 과정을 거칠 예정이에요.
- JavaScript에서 TypeScript로 리팩토링을 진행하고 싶어요.
팀에 내향형, I만 4명이라 4iz가 되었어요 🧚
상대적으로 인원은 적지만 누구보다 뛰어난 4iz 팀원들을 소개해드려요.
이솜이 (Frontend) |
장지아 (Product Manager, Frontend) |
류승준 (Backend) |
이창섭 (Project Manager, Backend) |
---|---|---|---|