cursor-ai-vibe-coding.md
introduction.md
개발자 10년 차입니다. 항상 코드를 직접 타이핑했습니다.
그러다 후배가 말했습니다.
"형, 요즘은 Cursor AI로 프롬프트만 쓰고 개발해요. 바이브코딩이라고."
저: "말도 안 돼. 그게 제대로 된 코드가 나와?"
후배: "직접 해보세요. 세상이 바뀌었어요."
반신반의했지만, 이 강의를 보고 시도했습니다.
결과: 충격
## 개발 타임라인
9:00
Cursor AI 설정
30초
설정 10분 만에 끝
10:00
히어로 섹션
1분
반응형 + 애니메이션 포함
11:00
기능 소개 섹션
2분
shadcn/ui 자동 설치
12:00
가격 테이블
3분
월간/연간 토글
13:00
FAQ & 문의 폼
5분
Zod + React Hook Form
14:00
SEO 최적화
5분
전체 메타데이터 설정
15:00
반응형 & 최적화
10분
자동 문제 감지 및 수정
16:00
배포
5분
Vercel 배포 완료
## 프로젝트 스크린샷
## 전통 방식 vs 바이브코딩
| 작업 | 전통 방식 | 바이브코딩 | 속도 |
|---|---|---|---|
| 프로젝트 셋업 | 30분 | 30초 | 60배 |
| 히어로 섹션 | 2시간 | 10분 | 12배 |
| 기능 카드 | 1시간 | 5분 | 12배 |
| 가격 테이블 | 2시간 | 10분 | 12배 |
| FAQ | 1시간 | 5분 | 12배 |
| 문의 폼 | 1.5시간 | 10분 | 9배 |
| SEO 설정 | 4시간 | 15분 | 16배 |
| 반응형 | 3시간 | 20분 | 9배 |
| 합계 | 15시간 | 1.5시간 | 10배 |
## 놀라웠던 점
🧠
이해력
부드럽게, 강조, 세련되게 같은 추상적 표현도 이해
⚡
최신 기술
Next.js 15 App Router, Server Components, shadcn/ui
✨
베스트 프랙티스
깔끔한 폴더 구조, 컴포넌트 재사용, TypeScript 타입 안전
📝
설명까지
코드에 주석도 자동으로 달렸습니다
## 실전 팁
❌
"예쁘게 만들어줘"✅
"카드에 그림자 추가하고, 호버 시 살짝 올라가는 애니메이션 넣어줘"❌
"랜딩페이지 전체 만들어줘"✅
"먼저 히어로 섹션만 만들어줘"## 누가 써야 할까
강력 추천
- ✅ 시간 없는 개발자 - 빠르게 MVP 만들 때
- ✅ 반복 작업 많은 개발자 - CRUD, 폼, 레이아웃
- ✅ 최신 기술 익히는 중 - AI가 최신 방식으로 코드 작성
- ✅ 비개발자 - 간단한 사이트 직접 만들고 싶을 때
주의 필요
- ⚠️ 처음 코딩 배우는 사람 - 기초는 알아야 수정 가능
- ⚠️ 복잡한 로직 많은 프로젝트 - AI 생성 + 직접 수정 병행 필요
$
럿지 AI 팀
published: 2025-01-26