ShopVerse – 스크래치에서 만든 완전한 전자상거래 웹사이트
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 특히 HTML5, CSS3, JavaScript (ES6 모듈) 및 Three.js를 활용한 프로젝트 구현에 관심 있는 초보자~중급자
핵심 요약
- 전체적인 기능 구현: HTML5 + CSS3 + JavaScript (ES6 모듈) 기반으로 제품 목록, 장바구니, 결제, 주문 추적 기능 구현
- 핵심 기술 스택:
Three.js를 활용한 3D 입자 배경,Day.js로 배송일 계산,LocalStorage API로 장바구니/주문 데이터 저장 - 모듈화 구조:
products.js,cart.js,deliveryOptions.js등으로 분리된 스크립트 및 페이지별 JS 파일(checkout.js,tracking.js) 사용
섹션별 세부 요약
1. 프로젝트 개요
- 사용 기술:
HTML5,CSS3,JavaScript (ES6 Modules),Three.js,Day.js,LocalStorage API - 주요 기능:
- 제품 목록 (이미지, 가격, 별점)
- 장바구니 시스템 (수량 1~3 선택)
- 실시간 배송비 계산 및 결제 페이지
- 주문 추적 애니메이션
- UI/UX 특징:
- 모바일 우선 디자인
- 빈 장바구니 상태, 주문 확인 메시지 등 사용자 친화적 피드백
2. 기술 구현 방식
- 모듈화 전략:
- products.js, cart.js, deliveryOptions.js 등으로 로직 분리
- 페이지별 JS 파일(checkout.js, tracking.js) 사용
- 전역/페이지별 스타일링 폴더 구조화
- 라이브러리 통합:
- Three.js로 3D 입자 배경 구현
- LocalStorage API를 통한 세션 간 데이터 유지
- Day.js로 배송일 계산 처리
3. 개발 과정 및 도전
- 개발 기간: 5일간 개발 (4일 수면 부족, 뒷통수 통증, 커피 금지)
- 핵심 도전 과제:
- 클라이언트 측 상태 관리 (LocalStorage 효과적 활용)
- Three.js 통합 시 성능 최적화
- 모바일/데스크탑 호환성 테스트
- 참고 자료: SuperSimpleDev의 기초 튜토리얼
결론
- GitHub 저장소 공유 및 피드백 요청
- 향후 개선 방향:
- 사용자 인증 추가
- 위시리스트 및 필터링 기능 구현
- Firebase 또는 Node.js/Django 기반 백엔드 통합
- 실제 결제 게이트웨이 연동
- 프론트엔드/백엔드 통합으로 전환 가능