처음부터 풀스택 전자상거래 웹사이트 구축하기

전문적인 풀스택 웹 개발자이자 UI/UX 디자이너 역할을 해주세요. 현대적이고 전문적이며 완전히 반응형인 전자상거래 웹사이트를 처음부터 구축하고 싶습니다. ### 목표 실제 비즈니스에 적합한 깔끔하고 매력적인 온라인 쇼핑 웹사이트를 만드세요. 웹사이트는 모바일, 태블릿, 데스크톱에서 원활하게 작동해야 합니다. ### 기술 다음을 사용하세요: * HTML5 * CSS3 * JavaScript * CSS와 JavaScript가 포함된 단일 HTML 파일을 사용하세요. * 꼭 필요한 경우가 아니면 백엔드를 사용하지 마세요. * 깔끔하고 체계적이며 초보자에게 친숙한 코드를 사용하세요. ### 웹사이트 기능 1. **헤더/내비게이션 바** * 전문적인 로고/상점 이름 * 홈 * 쇼핑 * 카테고리 * 소개 * 연락처 * 검색 아이콘/바 * 상품 개수가 표시된 장바구니 아이콘 * 로그인/회원가입 버튼 2. **히어로 섹션** * 대형 프로모션 배너 * 매력적인 헤드라인 * 짧은 설명 * "지금 쇼핑하기" 버튼 * 현대적인 전자상거래 디자인 3. **카테고리** 다음과 같은 매력적인 카테고리 카드를 만드세요: * 전자제품 * 패션 * 신발 * 액세서리 * 뷰티 * 홈 & 리빙 4. **상품 섹션** 다음을 포함하는 여러 상품 카드를 표시하세요: * 상품 이미지 * 상품 이름 * 평점 * 원래 가격 * 할인 가격 * 할인율 * "장바구니에 담기" 버튼 * "바로 구매" 버튼 * 위시리스트/하트 버튼 5. **상품 검색 및 필터** 다음을 위한 작동하는 JavaScript 기능을 추가하세요: * 상품 검색 * 카테고리 필터링 * 가격 정렬 * 평점 정렬 6. **장바구니** 사용자가 다음을 할 수 있는 기능적인 장바구니를 만드세요: * 상품 추가 * 상품 제거 * 수량 증가/감소 * 소계 확인 * 총 가격 확인 * 장바구니 비우기 7. **결제** 다음을 포함하는 전문적인 결제 페이지/섹션을 만드세요: * 고객 이름 * 이메일 * 전화번호 * 주소 * 도시 * 주/도 * 우편번호 * 결제 방법 * 주문 요약 * 주문하기 버튼 8. **특별 섹션** 다음을 추가하세요: * 플래시 세일 * 베스트셀러 * 신상품 * 고객 리뷰 * 뉴스레터 구독 9. **푸터** 다음을 포함하세요: * 상점 소개 * 빠른 링크 * 고객 지원 * 개인정보 처리방침 * 이용약관 * 소셜 미디어 아이콘 * 저작권 ### 디자인 요구사항 * 프리미엄하고 현대적인 UI * 깔끔한 타이포그래피 * 매력적인 상품 카드 * 부드러운 호버 애니메이션 * 반응형 레이아웃 * 모바일 친화적인 햄버거 메뉴 * 적절한 간격과 정렬 * 전문적인 색상 구성 * 부드러운 스크롤 * 접근 가능한 버튼과 폼 * 웹사이트를 느리게 만들지 않는 미묘한 애니메이션 추가 ### JavaScript 요구사항 다음 기능이 실제로 작동하도록 만드세요: * 검색 * 카테고리 필터링 * 정렬 * 장바구니에 추가 * 장바구니에서 제거 * 수량 조절 * 장바구니 총액 계산 * 위시리스트 버튼 * 모바일 내비게이션 * 결제 폼 유효성 검사 * 주문 확인 메시지 공개적으로 접근 가능한 이미지 URL의 샘플 상품과 실제적인 상품 이미지를 사용하세요. ### 중요 설명만 제공하지 마세요. **완전한 작동 웹사이트 코드를 구축하세요.** `index.html`로 저장하고 브라우저에서 직접 열 수 있는 단일 HTML 파일로 완전한 코드를 반환하세요. 최종 결과물이 기본 데모가 아닌 전문적인 실제 전자상거래 웹사이트처럼 보이게 만드세요.