비개발자가 Cursor로 쇼핑몰 만들기

문제 상황

필요한 도구

해결 과정

# Cursor 설치 후 가장 먼저 알아야 할 단축키 3가지:
#
# 1. Cmd+I (Mac) 또는 Ctrl+I (Windows)
#    → "Agent 모드" - 가장 중요! 여기에 한국어로 원하는 걸 적으면 됩니다.
#    → 예: "쇼핑몰 홈페이지를 만들어줘"
#    → Cursor가 파일 생성, 코드 작성, 프로그램 설치까지 전부 해줍니다.
#
# 2. Ctrl+` (백틱, 숫자 1 왼쪽 키)
#    → "터미널" - 검은 화면이 열립니다.
#    → Cursor가 여기서 명령어를 실행합니다. 직접 타이핑할 일은 거의 없습니다.
#
# 3. Cmd+S (Mac) 또는 Ctrl+S (Windows)
#    → "저장" - 파일을 저장합니다.
#
# Cursor가 "Run this command?" 또는 "터미널에서 실행할까요?" 라고 물으면
# → "Yes" 또는 "Run" 클릭하면 됩니다. Cursor를 믿고 맡기세요!

# === 아래 프롬프트를 Cursor Agent(Cmd+I)에 붙여넣으세요 ===

이 폴더에 Next.js 쇼핑몰 프로젝트를 처음부터 만들어줘.

[프로젝트 설정]
- Next.js + TypeScript + Tailwind CSS + App Router 사용
- 프로젝트 이름: my-shop

[만들어야 할 페이지]
- 홈페이지 (상품 목록)
- 상품 상세 페이지
- 장바구니 페이지
- 결제/주문 페이지

[만들어야 할 파일 구조]
- app/page.tsx → 홈페이지 (상품 목록 표시)
- app/products/[id]/page.tsx → 상품 상세
- app/cart/page.tsx → 장바구니
- app/checkout/page.tsx → 결제 안내
- app/layout.tsx → 전체 레이아웃 (상단 메뉴, 하단 푸터)
- components/Header.tsx → 상단 메뉴바 (로고, 장바구니 아이콘)
- components/Footer.tsx → 하단 푸터
- components/ProductCard.tsx → 상품 카드
- lib/products.ts → 상품 데이터 (8개의 수제 악세사리)
- lib/cart-store.ts → 장바구니 기능 (zustand 사용)

[상품 데이터]
수제 악세사리 쇼핑몰이야. 카테고리는 목걸이, 반지, 귀걸이, 팔찌.
각 카테고리에 2개씩 총 8개 상품을 만들어줘.
가격은 15,000원~50,000원 사이로, 이미지는 placeholder 사용.

[디자인 요구사항]
- 깔끔하고 모던한 디자인 (미니멀)
- 모바일에서도 잘 보이는 반응형
- 상품 그리드: 모바일 2열, 태블릿 3열, 데스크탑 4열
- 가격은 "35,000원" 형식으로 표시
- 다크 모드 지원

모든 파일을 생성하고, 필요한 패키지도 설치해줘.
완료되면 npm run dev로 실행할 수 있게 해줘.

# === 디자인 수정 프롬프트 예시 (Cmd+I에 입력) ===

# 색상 변경
"쇼핑몰 메인 색상을 분홍색(#E91E8C) 계열로 바꿔줘.
버튼, 헤더 로고 색상, 호버 효과 모두 통일해줘."

# 헤더(상단 메뉴) 수정
"헤더에 쇼핑몰 이름을 '하늘공방'으로 바꿔줘.
오른쪽에 장바구니 아이콘과 담긴 상품 수가 보이게 해줘."

# 상품 카드 디자인 수정
"상품 카드에 마우스를 올리면 이미지가 살짝 확대되는 효과를 넣어줘.
카드 하단에 '장바구니 담기' 버튼도 추가해줘."

# 모바일에서 확인하기
"내 쇼핑몰이 모바일(스마트폰)에서 어떻게 보이는지 확인하고 싶어"
# → 웹브라우저에서 F12 누르기 → 왼쪽 상단의 스마트폰 아이콘 클릭
# → 이렇게 하면 스마트폰 화면 크기로 미리 볼 수 있습니다.

# 상품 데이터 수정 (내 실제 상품으로 교체)
"lib/products.ts의 상품 데이터를 아래 내용으로 교체해줘:

1번 상품: 이름 '천연석 비즈 목걸이', 가격 38000원,
설명 '천연 원석을 하나하나 엮어 만든 수제 목걸이',
카테고리 '목걸이'

2번 상품: 이름 '미니 진주 귀걸이', 가격 25000원,
설명 '담수 진주를 세팅한 데일리 귀걸이',
카테고리 '귀걸이'

(이런 식으로 내 상품 정보를 적어주세요)"

# 상품 이미지 교체
# 1. 내 상품 사진 파일(JPG/PNG)을 준비합니다.
# 2. Cursor 왼쪽 파일 탐색기에서 public/images 폴더에 이미지를 드래그앤드롭합니다.
# 3. Agent에게 요청: "상품 이미지를 내가 넣은 파일로 바꿔줘.
#    1번 상품은 /images/necklace-01.jpg, 2번 상품은 /images/earring-01.jpg..."

# === 장바구니 기능 보완 프롬프트 (Cmd+I) ===

"장바구니 페이지를 개선해줘:
- 상품 이미지 썸네일도 보여줘
- 수량 변경 시 소계가 실시간으로 변경되게 해줘
- 배송비 안내: 5만원 이상 무료배송, 미만이면 3,000원
- '주문하기' 버튼을 눌렀을 때 장바구니가 비어있으면 알림 표시
- 장바구니가 비었을 때 '상품 구경하기' 버튼으로 홈으로 이동"

# === 결제/주문 안내 페이지 프롬프트 ===

"결제(checkout) 페이지를 만들어줘:

[주문 요약]
- 장바구니의 상품 목록, 수량, 금액 표시
- 배송비와 최종 결제 금액 표시

[주문자 정보 입력]
- 이름 (필수)
- 전화번호 (필수, 010-0000-0000 형식 자동 포맷)
- 배송지 주소 (필수)
- 배송 메모 (선택, 드롭다운: 문 앞에 놔주세요 / 경비실에 맡겨주세요 / 직접 입력)

[결제 방법]
- 계좌이체 선택 시: 입금 계좌 정보 표시
  (국민은행 000-000-00000 예금주 홍길동)
- 카카오톡 송금 선택 시: 카카오톡 연락처 안내

[주문 완료]
- '주문하기' 버튼 클릭 시 주문 완료 페이지로 이동
- 주문번호 생성 (날짜+랜덤숫자)
- '주문 확인은 카카오톡으로 연락드리겠습니다' 안내
- 장바구니 비우기

나중에 실제 결제(PG) 연동도 가능하도록 구조를 잡아줘."

# === 추가 기능 프롬프트 (선택) ===

# 상품 상세 페이지 개선
"상품 상세 페이지를 개선해줘:
- 상품 이미지를 크게 표시
- 가격, 설명, 카테고리 표시
- '장바구니 담기' 버튼
- 수량 선택 (1~10개)
- 같은 카테고리의 다른 상품 추천 (하단에 4개)"

# 검색 기능 추가
"헤더에 상품 검색 기능을 추가해줘.
상품 이름으로 검색할 수 있게 하고,
검색 결과를 실시간으로 드롭다운으로 보여줘."

# === Cursor Agent 프롬프트 1: 배포 전 점검 (Cmd+I) ===

"이 프로젝트를 배포하기 전에 점검해줘:
- 빌드 에러가 없는지 확인 (npm run build 실행)
- 에러가 있으면 모두 고쳐줘
- .gitignore 파일이 제대로 설정되어 있는지 확인
- 완료되면 알려줘"

# Cursor가 빌드를 실행하고 에러가 있으면 자동으로 수정합니다.
# "Run command?" 확인 창이 뜨면 "Yes"를 클릭하세요.

# === Cursor Agent 프롬프트 2: GitHub에 올리기 ===

"이 프로젝트를 GitHub에 올려줘.
GitHub 저장소 URL은 https://github.com/내아이디/my-shop.git 이야.
git 초기화하고, 모든 파일을 커밋하고, push해줘."

# Cursor가 아래 명령어들을 자동으로 실행합니다:
# git init
# git add .
# git commit -m "쇼핑몰 초기 버전"
# git remote add origin https://github.com/내아이디/my-shop.git
# git branch -M main
# git push -u origin main
#
# "내아이디" 부분만 본인의 GitHub 사용자명으로 바꿔주세요.
# 처음 push할 때 GitHub 로그인 팝업이 뜰 수 있습니다.
# → GitHub 계정으로 로그인하면 됩니다.

# === 이후 수정할 때 (상품 추가, 디자인 변경 등) ===

# 코드를 수정한 후 Cursor Agent에게:
"변경사항을 GitHub에 올려줘"
# → Cursor가 자동으로 git add, commit, push를 실행합니다.
# → Vercel이 자동으로 변경사항을 감지하고 새 버전을 배포합니다.
# → 1~2분 후 쇼핑몰에 변경사항이 반영됩니다!

# === 추천 확장 기능 프롬프트 모음 ===

# [인기 기능] SNS 공유 버튼
"상품 상세 페이지에 카카오톡, 인스타그램 공유 버튼을 추가해줘"

# [인기 기능] 고객 문의 (카카오톡 채널)
"오른쪽 하단에 카카오톡 상담 플로팅 버튼을 추가해줘.
클릭하면 카카오톡 채널 (https://pf.kakao.com/내채널)로 이동하게 해줘"

# [인기 기능] 공지사항/이벤트 페이지
"공지사항 페이지를 만들어줘. 내용은 아래와 같아:
- 오픈 기념 전 상품 20% 할인 (2월 28일까지)
- 5만원 이상 무료배송 안내"

# [SEO] 검색 엔진 최적화
"모든 페이지에 SEO 메타 태그를 추가해줘.
쇼핑몰 이름은 '하늘공방', 설명은 '수제 악세사리 전문 온라인 쇼핑몰'.
카카오톡/SNS 공유 시 미리보기가 잘 나오도록 Open Graph 태그도 넣어줘."

# [분석] 방문자 추적
"Google Analytics를 연동해줘. 추적 ID는 G-XXXXXXXXXX야."
# → 어떤 상품이 인기 있는지, 방문자가 몇 명인지 확인할 수 있습니다.
# → Google Analytics는 무료입니다.
# → analytics.google.com에서 가입하면 추적 ID를 받을 수 있습니다.

# [이미지] 상품 사진 팁
# - 자연광(창가)에서 촬영하면 제일 예쁩니다
# - 배경은 흰색이나 밝은 색이 무난합니다
# - 사진 크기는 1200x1200px 정사각형이 제일 깔끔합니다
# - liminfo.com의 이미지 압축 도구로 파일 크기를 줄이세요

핵심 코드

Cursor의 핵심은 "구체적으로 요청하기"입니다. 코드를 한 줄도 직접 쓸 필요 없이, 파일 경로와 원하는 기능을 구체적으로 설명하면 Agent가 모든 코드를 생성합니다. 에러가 나면 에러 메시지를 복사해서 Agent에게 붙여넣기하세요.

// === 핵심 정리: Cursor Agent 사용법 ===
//
// [기본 원칙]
// 코드를 직접 수정하지 마세요. 모든 수정은 Cursor Agent(Cmd+I)에게 맡기세요.
// 한국어로 자연스럽게 요청하면 됩니다.
//
// [좋은 프롬프트 vs 나쁜 프롬프트]
//
// BAD:  "쇼핑몰 만들어줘"
//   → 너무 막연해서 원하는 결과가 나오기 어렵습니다
//
// GOOD: "app/page.tsx에 상품 목록 페이지를 만들어줘.
//        상품 데이터는 lib/products.ts에서 가져오고,
//        모바일에서는 2열, 데스크탑에서는 4열 그리드로 표시하고,
//        가격은 35,000원 형식으로 보여줘.
//        카테고리 필터 버튼도 상단에 넣어줘."
//   → 파일 위치, 데이터 출처, 레이아웃, 형식을 구체적으로!
//
// [에러가 났을 때]
// 1. 터미널에 빨간 글씨가 보이면 → 그 내용을 복사
// 2. Cursor Agent(Cmd+I)에게 붙여넣기: "이 에러를 고쳐줘: (에러 내용)"
// 3. 코드를 직접 수정하려고 하지 마세요 → Agent에게 맡기는 게 훨씬 안전합니다
//
// [자주 쓰는 단축키]
// Cmd+I (Ctrl+I)  → Agent 모드 (가장 중요! 여기에 요청)
// Cmd+L (Ctrl+L)  → AI 채팅 (질문하기, 코드 설명 듣기)
// Ctrl+`          → 터미널 열기/닫기
// Cmd+S (Ctrl+S)  → 파일 저장
//
// [전체 작업 순서 요약]
// 1. Cursor 설치 → Node.js 설치 → GitHub 가입
// 2. Agent에게 프로젝트 생성 요청
// 3. npm run dev로 미리보기 → 디자인 수정 요청 반복
// 4. 장바구니/결제 기능 완성
// 5. GitHub에 올리기 → Vercel에서 배포
// 6. 도메인 연결 (선택) → 운영 시작!

자주 하는 실수

관련 liminfo 서비스