Cursor AI 초보자 가이드

Cursor AI 초보자 가이드: 프로젝트 세팅 ~ 배포까지

이 가이드는 Cursor AI를 활용하여 비개발자도 쉽게 웹 서비스를 구축하고 배포할 수 있도록 돕습니다. 프로젝트 세팅부터 배포까지의 과정을 단계별로 설명합니다.

---

✅ 1단계: 개발 환경 세팅

1️⃣ Cursor AI 설치

1. Cursor 공식 웹사이트에서 설치 파일 다운로드
2. 설치 후, 실행하여 초기 세팅 진행

2️⃣ 새 프로젝트 생성

1. 새로운 폴더 생성 → Cursor Beginner 등으로 명명
2. Cursor 실행 후 해당 폴더 열기
3. 터미널 열기 → Ctrl + J 또는 상단 메뉴에서 Terminal 클릭

3️⃣ Next.js 프로젝트 세팅

npx create-next-app@latest .

• TypeScript 사용? → Yes
• Tailwind CSS 추가? → Yes
• ESLint 활성화? → Yes

프로젝트 생성 완료 후, 아래 명령어로 개발 서버 실행:

npm run dev

---

✅ 2단계: 필수 라이브러리 설치

1️⃣ ShadCN UI (고품질 UI 컴포넌트)

npx shadcn-ui@latest init -d

2️⃣ Tailwind CSS (스타일링 프레임워크)

• 이미 설치됨 (Next.js 세팅 시 포함)

3️⃣ 커서 AI 규칙 파일 생성

• 프로젝트 루트에 cursor.rules.json 파일 생성

  {
  "ui_library": "shadcn-ui",
  "type_checking": true,
  "component_folder": "components",
  "preferred_language": "TypeScript"
  }

---

✅ 3단계: AI와 함께 개발하기

1️⃣ AI 컴포저 사용법

• 커서 상단 패널에서 AI Composer 클릭
• 모델 선택: Claude 3.5 Sonnet 또는 GPT-4
• 에이전트 모드 활성화 → 프로젝트 컨텍스트 이해도 상승

2️⃣ 랜딩 페이지 생성 (예시)

프롬프트 입력:

사스 랜딩 페이지 생성해줘. Hero Section, Features, Pricing, Contact 포함.

• AI가 필요한 패키지 설치 및 코드 생성
• 생성된 코드 검토 후, npm run dev로 확인

3️⃣ 에러 해결하기

• 에러 발생 시, 에러 메시지를 AI에 입력 → 수정 제안 받기

---

✅ 4단계: 배포하기 (Vercel 사용)

1️⃣ Vercel CLI 설치

npm install -g vercel

2️⃣ Vercel 로그인 및 프로젝트 배포

vercel login
vercel

• 질문에 따라 Yes 또는 No 선택
• 배포 URL 제공 → 웹에서 확인 가능

3️⃣ 커서 AI로 배포 자동화 (선택)

• AI Composer에 입력:

  Vercel CLI를 사용해서 이 프로젝트를 배포해줘.

---

✅ 5단계: 추가 팁

💡 AI 성능 향상 팁

• 타입스크립트 사용: 코드 품질과 안정성 향상
• 컨텍스트 파일 작성: 프로젝트 규모가 커질 때 유용 (예: docs/requirements.md)
• 커서 룰스 적극 활용: AI가 일관된 코드 생성 가능

💡 추천 기술 스택

• 프레임워크: Next.js
• 스타일링: Tailwind CSS + ShadCN UI
• 배포: Vercel
• 백엔드: Supabase (DB) + Clerk (인증)

---

🎉 완성!

이제 Cursor AI를 활용하여 나만의 웹 서비스를 만들고 배포할 준비가 되었습니다! 🥳

문제가 발생하거나 궁금한 점이 있다면 댓글로 남겨주세요. Happy Coding! 🚀