제품 카탈로그 사이트
Cursor AI를 활용해 제품을 카테고리별로 보여주는 전문적인 카탈로그 사이트를 만들어봅시다.
프로젝트 개요
섹션 제목: “프로젝트 개요”완성 모습
섹션 제목: “완성 모습”전자제품 카탈로그┌─────────────────────────────────┐│ [전체] [스마트폰] [노트북] [태블릿] │└─────────────────────────────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐│ Galaxy │ │ iPhone │ │ Pixel ││ S24 │ │ 15 Pro │ │ 8 Pro ││ 1,200,000│ │ 1,550,000│ │ 1,100,000│└──────────┘ └──────────┘ └──────────┘1단계: 프로젝트 시작
섹션 제목: “1단계: 프로젝트 시작”Cursor에서 새 폴더 생성
섹션 제목: “Cursor에서 새 폴더 생성”File > Open Folder → 새 폴더 “product-catalog” 생성
Cursor AI에게 첫 요청:
섹션 제목: “Cursor AI에게 첫 요청:”제품 카탈로그 사이트 만들어줘.
프로젝트 구조:- index.html- style.css- script.js- products.json (제품 데이터)- categories.json (카테고리 데이터)
기본 뼈대만 만들어줘.2단계: JSON 데이터 구조 만들기
섹션 제목: “2단계: JSON 데이터 구조 만들기”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”categories.json 만들어줘.
카테고리 정보:- id (고유번호)- 이름- 설명- 아이콘 (emoji 또는 Font Awesome)
카테고리 3개:1. 스마트폰2. 노트북3. 태블릿Cursor에게 추가 요청:
섹션 제목: “Cursor에게 추가 요청:”products.json 만들어줘.
각 제품 정보:- id- 제품명- 카테고리 ID- 브랜드- 가격- 할인가 (있으면)- 설명- 스펙 (배열: 화면크기, 메모리, 저장공간 등)- 썸네일 이미지 URL (플레이스홀더)- 색상 옵션 (배열)- 재고 상태 (판매중, 품절, 출시예정)- 평점- 리뷰 수
각 카테고리별로 3-4개 제품 만들어줘.총 10개 제품.3단계: HTML 구조 만들기
섹션 제목: “3단계: HTML 구조 만들기”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”index.html 만들어줘.
구조:1. 헤더 - 사이트 로고/제목 - 검색바 - 장바구니 아이콘 (개수 표시)
2. 카테고리 필터 바 - "전체" 버튼 - categories.json에서 가져온 카테고리 버튼들 - 선택된 카테고리 강조
3. 정렬 및 필터 옵션 - 정렬: 가격낮은순, 가격높은순, 평점순, 최신순 - 필터: 브랜드별, 가격대별, 재고있음만
4. 제품 그리드 - 카드 레이아웃 - 각 카드: - 썸네일 - 브랜드 + 제품명 - 평점 + 리뷰수 - 원가 (할인시 취소선) - 할인가 (있으면) - 할인율 뱃지 - 재고 상태 - "장바구니 담기" 버튼 - "상세보기" 버튼
5. 제품 상세 모달 - 큰 이미지 - 모든 제품 정보 - 색상 선택 - 수량 선택 - "장바구니 담기" - "바로 구매"
6. 장바구니 사이드바 - 담긴 제품 목록 - 각 항목: 썸네일, 이름, 가격, 수량 조절, 삭제 - 총 금액 - "주문하기" 버튼
디자인:- 전문적인 쇼핑몰 느낌- 깔끔하고 현대적- 반응형 (모바일 1열, 태블릿 2열, PC 4열)4단계: CSS 스타일링
섹션 제목: “4단계: CSS 스타일링”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”style.css 만들어줘.
디자인 요구사항:- 메인 색상: #2c3e50 (어두운 블루그레이)- 강조 색상: #e74c3c (빨강)- 배경: #f5f5f5 (밝은 회색)- 카드 배경: 흰색
헤더:- 고정 상단- 그림자- 높이 60px- 로고 왼쪽, 검색바 중앙, 장바구니 오른쪽
카테고리 바:- 헤더 바로 아래 고정- 버튼들 가로 스크롤- 선택된 버튼: 파란 배경, 흰 글씨
제품 카드:- 흰 배경- 둥근 모서리- 호버 시 살짝 올라오고 그림자 진해짐- 썸네일 정사각형, 16:9 비율- 가격 크고 굵게- 할인가는 빨간색
모달:- 반투명 배경- 중앙 배치- 닫기 버튼- 애니메이션 (페이드인)
장바구니:- 우측 슬라이드인- 고정 너비 400px- 스크롤 가능
반응형:- 모바일 (<768px): 제품 1열, 장바구니 전체 너비- 태블릿 (768-1024px): 제품 2열- PC (>1024px): 제품 4열
애니메이션:- 부드러운 전환- 호버 효과- 페이드인 효과5단계: JavaScript 기능 구현
섹션 제목: “5단계: JavaScript 기능 구현”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”script.js 만들어줘.
기능 목록:
1. 데이터 로딩 - categories.json 읽기 - products.json 읽기 - 페이지 로드 시 자동 실행
2. 카테고리 버튼 생성 - 동적으로 버튼 생성 - "전체" 버튼 기본 선택 - 클릭 시 필터링
3. 제품 카드 표시 - 그리드로 배치 - 할인율 계산 및 표시 - 재고 상태별 다른 스타일 - 평점 별 아이콘으로 표시
4. 검색 기능 - 제품명, 브랜드, 설명에서 검색 - 실시간 검색 (디바운싱 300ms) - 검색 결과 개수 표시
5. 정렬 기능 - 가격 오름차순/내림차순 - 평점순 - 최신순 - 드롭다운으로 선택
6. 필터 기능 - 카테고리별 - 브랜드별 (체크박스) - 가격대별 (슬라이더) - 재고 있음만 (토글)
7. 제품 상세 모달 - 카드 클릭 시 열기 - ESC 키로 닫기 - 바깥 클릭으로 닫기 - 색상 선택 기능 - 수량 증가/감소
8. 장바구니 기능 - 제품 추가 (중복시 수량 증가) - 수량 변경 - 제품 삭제 - 총 금액 자동 계산 - 로컬 스토리지에 저장 - 페이지 새로고침해도 유지 - 장바구니 아이콘에 개수 표시
9. 장바구니 사이드바 - 장바구니 아이콘 클릭 시 열기 - 닫기 버튼 - 빈 장바구니 메시지
코드 구조:- 객체 지향 (CartManager 클래스)- 함수 분리- async/await 사용- 에러 처리- 주석 추가6단계: 고급 기능 추가
섹션 제목: “6단계: 고급 기능 추가”6-1. 가격 필터 슬라이더
섹션 제목: “6-1. 가격 필터 슬라이더”Cursor에게 요청:
가격 범위 필터 추가해줘.
요구사항:- 범위 슬라이더 (Min-Max)- 현재 선택된 가격 범위 표시- 실시간 필터링- "초기화" 버튼
슬라이더 라이브러리 사용하지 말고HTML input type="range" 2개로 구현해줘.6-2. 브랜드 필터
섹션 제목: “6-2. 브랜드 필터”Cursor에게 요청:
브랜드별 필터 추가해줘.
기능:- products.json에서 모든 브랜드 추출- 체크박스 리스트로 표시- 여러 브랜드 동시 선택 가능- 선택된 브랜드만 표시- "전체 선택/해제" 버튼6-3. 위시리스트
섹션 제목: “6-3. 위시리스트”Cursor에게 요청:
위시리스트 기능 추가해줘.
기능:- 제품 카드에 하트 아이콘- 클릭하면 위시리스트 추가/제거- 하트 색상 변경 (빈하트 ♡ → 꽉찬하트 ♥)- 로컬 스토리지에 저장- 헤더에 위시리스트 아이콘 + 개수- 위시리스트 페이지 또는 모달7단계: 제품 비교 기능
섹션 제목: “7단계: 제품 비교 기능”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”제품 비교 기능 추가해줘.
기능:- 제품 카드에 "비교하기" 체크박스- 최대 4개까지 선택 가능- 하단 고정 바에 선택된 제품 표시- "비교하기" 버튼 클릭 시 비교 페이지/모달- 스펙을 표 형태로 나란히 비교- 가격, 평점 비교 하이라이트8단계: 페이지네이션
섹션 제목: “8단계: 페이지네이션”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”제품 목록에 페이지네이션 추가해줘.
요구사항:- 한 페이지에 12개 제품- 페이지 번호 버튼- 이전/다음 버튼- 첫페이지/마지막페이지 버튼- 현재 페이지 강조- URL에 페이지 번호 반영 (?page=2)- 페이지 변경 시 맨 위로 스크롤9단계: 로딩 및 애니메이션
섹션 제목: “9단계: 로딩 및 애니메이션”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”로딩 상태와 애니메이션 개선해줘.
로딩:- 스켈레톤 UI (카드 형태)- 데이터 로드 중 표시- 스피너 애니메이션
애니메이션:- 제품 카드 순차적 페이드인- 필터 변경 시 부드러운 전환- 장바구니 추가 시 fly-to-cart 효과- 모달 열기/닫기 애니메이션- 호버 시 이미지 줌인
Intersection Observer 사용해서스크롤 시 카드 나타나는 효과 추가해줘.10단계: 반응형 개선
섹션 제목: “10단계: 반응형 개선”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”모바일 경험 개선해줘.
모바일 (<768px):- 헤더 간소화 (햄버거 메뉴)- 검색바 토글 버튼- 카테고리 가로 스크롤- 필터를 하단 시트로 변경- 제품 카드 1열 (목록형으로 변경 옵션)- 장바구니 전체 화면- 터치 제스처 (스와이프로 장바구니 닫기)
태블릿 (768-1024px):- 제품 카드 2-3열- 사이드바 필터- 적절한 간격
큰 화면 (>1400px):- 최대 너비 제한- 제품 카드 5열완성 확인
섹션 제목: “완성 확인”테스트 항목
섹션 제목: “테스트 항목”- 카테고리 필터가 작동하는가?
- 검색이 실시간으로 작동하는가?
- 정렬이 제대로 되는가?
- 브랜드/가격 필터가 작동하는가?
- 장바구니 추가/삭제/수정이 되는가?
- 로컬 스토리지에 장바구니가 저장되는가?
- 모달이 잘 열리고 닫히는가?
- 반응형이 모든 기기에서 잘 작동하는가?
- 페이지네이션이 작동하는가?
GitHub & Cloudflare Pages 배포
섹션 제목: “GitHub & Cloudflare Pages 배포”1. Git 초기화
섹션 제목: “1. Git 초기화”git initgit add .git commit -m "제품 카탈로그 사이트 초기 버전"2. GitHub 저장소 생성 및 푸시
섹션 제목: “2. GitHub 저장소 생성 및 푸시”git branch -M maingit remote add origin https://github.com/사용자명/product-catalog.gitgit push -u origin main3. Cloudflare Pages 연결
섹션 제목: “3. Cloudflare Pages 연결”- Cloudflare Pages 대시보드 접속
- “Connect to Git” 클릭
- 저장소 선택
- “Save and Deploy” 클릭
- 배포 완료 후 URL 확인
제품 추가/수정하기
섹션 제목: “제품 추가/수정하기”새 제품을 추가하려면 products.json만 수정:
Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”products.json에 새 제품 추가해줘.
카테고리: 스마트폰브랜드: Samsung제품명: Galaxy S24 Ultra가격: 1,698,400원스펙: 6.8인치, 12GB RAM, 256GB, Snapdragon 8 Gen 3수정 후 Git 푸시하면 자동 배포!
추가 개선 아이디어
섹션 제목: “추가 개선 아이디어”Cursor에게 요청할 수 있는 것들:
섹션 제목: “Cursor에게 요청할 수 있는 것들:”- 제품 리뷰 시스템
각 제품에 리뷰 섹션 추가해줘.- 별점 + 한줄평- reviews.json 파일로 관리- 평균 평점 자동 계산- 리뷰 작성 폼- 추천 제품
"이 제품과 함께 본 제품" 섹션 추가해줘.- 같은 카테고리 제품 랜덤 3개- 가격대가 비슷한 제품- 상세 페이지 하단에 표시- 할인 타이머
할인 종료까지 남은 시간 표시해줘.- 카운트다운 타이머- products.json에 할인종료일 추가- 시간 단위로 업데이트- 최근 본 제품
최근 본 제품 기록 기능 추가해줘.- 로컬 스토리지에 저장- 최대 10개- 하단 슬라이더로 표시- 다크 모드
다크 모드 토글 추가해줘.- 헤더에 토글 버튼- 로컬 스토리지에 설정 저장- 부드러운 전환 애니메이션- 공유 기능
제품 공유 버튼 추가해줘.- 카카오톡, 페이스북, 트위터- URL 복사- Web Share API 사용- 빠른 보기
카드에서 바로 미리보기 기능 추가해줘.- 호버 시 "빠른 보기" 버튼 표시- 작은 모달로 주요 정보만 표시- "상세보기"로 전환 가능문제 해결
섹션 제목: “문제 해결”제품이 안 보여요
섹션 제목: “제품이 안 보여요”Cursor에게:
products.json 경로 확인하고,fetch 에러 처리 개선해줘.콘솔에 상세한 에러 로그 출력해줘.장바구니가 사라져요
섹션 제목: “장바구니가 사라져요”Cursor에게:
로컬 스토리지 저장 로직 확인해줘.- 장바구니 변경할 때마다 저장되는지- localStorage.setItem() 잘 작동하는지- JSON.stringify() 제대로 되는지필터가 제대로 안 돼요
섹션 제목: “필터가 제대로 안 돼요”Cursor에게:
필터 로직 디버깅해줘.- 여러 필터 동시 적용 시 AND/OR 조건 확인- 빈 배열 처리 확인- 콘솔에 필터링된 제품 개수 출력모바일에서 레이아웃이 깨져요
섹션 제목: “모바일에서 레이아웃이 깨져요”Cursor에게:
모바일 CSS 미디어 쿼리 확인하고,특히 장바구니와 모달이 모바일에서제대로 표시되도록 수정해줘.다음 단계
섹션 제목: “다음 단계”제품 카탈로그 사이트를 완성했습니다. 이제 FAQ 페이지를 만들어봅시다!