Cursor AI 바이브코딩 처음 써봤습니다. 하루 만에 랜딩페이지 완성했어요

"코드 안 쓰고 만든다고?"

개발자 10년 차입니다. 항상 코드를 직접 타이핑했습니다.

그러다 후배가 말했습니다.

"형, 요즘은 Cursor AI로 프롬프트만 쓰고 개발해요. 바이브코딩이라고."

**저:** "말도 안 돼. 그게 제대로 된 코드가 나와?"

**후배:** "직접 해보세요. 세상이 바뀌었어요."

반신반의했지만, 이 강의를 보고 시도했습니다.



결과: **충격**

오전 9시: 시작

토요일 아침, 프로젝트를 시작했습니다.

**목표:** 회사 소개 랜딩페이지 만들기

**기존 방식이라면:**
- 2~3일 소요
- 500줄 이상 코드 직접 작성
- 디자인 고민 1일
- 컴포넌트 구조 설계 반나절

**바이브코딩으로 하면?**
- "한 번 해보자"

9:00 - Cursor AI 설정

강의에서 알려준 대로:
1. Cursor 다운로드
2. MCP 설정
3. Composer 모드 활성화

설정 10분 만에 끝.

9:10 - 첫 프롬프트

``
"Next.js 15 프로젝트 생성해줘.
TailwindCSS와 TypeScript 사용하고,
회사 소개 랜딩페이지 구조로 만들어줘."
`

**결과:**
- 프로젝트 자동 생성
- 폴더 구조 완벽
- 기본 설정 완료

**소요 시간: 30초**



"뭐야... 이게 돼?"

오전 10시: 히어로 섹션

10:00 - 프롬프트 2

`
"히어로 섹션 만들어줘.
- 좌측에 헤드라인과 설명, CTA 버튼
- 우측에 이미지
- 반응형으로 모바일에서는 세로 배치
- TailwindCSS 사용
- 애니메이션 효과 추가"
`

**결과:**
- 완벽한 히어로 섹션 생성
- 그라디언트 배경
- Framer Motion 애니메이션
- 모바일 최적화

**소요 시간: 1분**

10:05 - 수정 프롬프트

"애니메이션을 더 부드럽게, 버튼 색상은 파란색으로"

**즉시 수정됨**

기존이라면:
1. 코드 찾기
2. CSS 수정
3. 테스트
4. 반복

지금:
1. 말하기
2. 끝

**놀라웠습니다.**

오전 11시: 기능 소개 섹션

프롬프트 3

`
"기능 소개 섹션 만들어줘.
- 3개 카드 (아이콘, 제목, 설명)
- 호버 시 살짝 올라가는 효과
- shadcn/ui Card 컴포넌트 사용
- 그리드 레이아웃"
`

**결과:**
- shadcn/ui 자동 설치
- 3개 카드 완성
- 호버 애니메이션 적용

**소요 시간: 2분**

정오: 가격 테이블

`
"가격 테이블 만들어줘.
- 3개 플랜 (Basic, Pro, Enterprise)
- 각 플랜마다 기능 목록
- Pro 플랜 강조 (배지 추가)
- 월간/연간 토글 버튼"
`

**결과:**
- 완벽한 가격 테이블
- 애니메이션 토글
- 강조 효과

**소요 시간: 3분**

"이 정도면 외주 퀄리티인데..."

오후 1시: FAQ & 문의 폼

FAQ 아코디언

`
"FAQ 섹션 만들어줘.
- Accordion 컴포넌트 사용
- 5개 질문
- 부드러운 펼치기/접기 애니메이션"
`

**완성**

문의 폼

`
"문의 폼 만들어줘.
- 이름, 이메일, 메시지 필드
- Zod 검증
- React Hook Form 사용
- 제출 시 Sonner 토스트 표시"
`

**모든 라이브러리 자동 설치 + 완성**

오후 2시: SEO 최적화

이 부분이 제일 중요했습니다.

`
"SEO 최적화 설정해줘.
- 메타데이터 (title, description, keywords)
- OG 이미지
- Twitter 카드
- JSON-LD 구조화 데이터
- sitemap.xml
- robots.txt"
`

**결과:**
- 모든 SEO 설정 완료
- 파일 자동 생성
- 메타데이터 동적 설정

**소요 시간: 5분**

기존이라면 반나절 걸릴 작업.

오후 3시: 반응형 & 최적화

반응형 체크

`
"모든 섹션 반응형 체크하고,
모바일에서 이상한 부분 수정해줘"
`

**자동으로 문제 찾고 수정**

성능 최적화

`
"이미지 최적화하고,
lazy loading 적용해줘"
`

**완료**

오후 4시: 배포

`
"Vercel 배포 설정해줘"
`

- vercel.json 생성
- 환경변수 가이드 생성

터미널에서:
`bash
vercel deploy
``

**배포 완료**

오후 5시: 완성!

**총 소요 시간: 8시간**

**작성한 코드: 0줄** (프롬프트만 작성)

**완성도: 외주 업체 수준**

전통 방식 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배** |

**개발 속도: 10배**

놀라웠던 점

1. 이해력

"부드럽게", "강조", "세련되게" 같은 추상적 표현도 이해했습니다.

2. 최신 기술

- Next.js 15 App Router
- Server Components
- shadcn/ui
- 최신 TailwindCSS

모두 최신 방식으로 구현됐습니다.

3. 베스트 프랙티스

- 폴더 구조 깔끔
- 컴포넌트 재사용
- TypeScript 타입 안전
- 접근성 (a11y) 고려

"내가 짠 것보다 더 좋은데..."

4. 설명까지

코드에 주석도 자동으로 달렸습니다.

"이 컴포넌트는 히어로 섹션입니다. 반응형으로 동작합니다."

아쉬운 점

완벽하진 않았습니다.

1. 가끔 오류

이상한 코드가 나올 때가 있었습니다.

하지만 "여기 오류 있어, 수정해줘" 하면 바로 고쳐줬습니다.

2. 디자인 감각

말로 설명하기 애매한 디자인은 여러 번 수정 필요했습니다.

3. 복잡한 로직

간단한 로직은 완벽. 복잡한 비즈니스 로직은 직접 수정 필요.

실전 팁

강의에서 배운 + 제가 발견한 팁:

1. 구체적으로 말하기

❌ "예쁘게 만들어줘"
✅ "카드에 그림자 추가하고, 호버 시 살짝 올라가는 애니메이션 넣어줘"

2. 단계별로 요청

❌ "랜딩페이지 전체 만들어줘"
✅ "먼저 히어로 섹션만 만들어줘"

3. 기술 스택 명시

"shadcn/ui 사용해줘"
"Framer Motion으로 애니메이션 해줘"

4. 수정은 부담 없이

마음에 안 들면 바로 "이거 파란색으로 바꿔줘"

누가 써야 할까

강력 추천

✅ **시간 없는 개발자**
- 빠르게 MVP 만들 때

✅ **반복 작업 많은 개발자**
- CRUD, 폼, 레이아웃 등

✅ **최신 기술 익히는 중**
- AI가 최신 방식으로 코드 작성
- 배우면서 만들기 가능

✅ **비개발자**
- 간단한 사이트 직접 만들고 싶을 때

주의 필요

⚠️ **처음 코딩 배우는 사람**
- 기초는 알아야 수정 가능

⚠️ **복잡한 로직 많은 프로젝트**
- AI 생성 + 직접 수정 병행 필요

배운 것

1. AI는 도구다

AI가 대신 만들어주지만, **방향은 내가 잡아야** 합니다.

2. 프롬프트 = 새로운 코딩

프롬프트 잘 쓰는 게 새로운 코딩 실력입니다.

3. 빠름 = 경쟁력

10배 빠르면, 10배 더 많이 실험할 수 있습니다.

1주일 후

바이브코딩으로 추가로 만든 것:

- 블로그 (2시간)
- 어드민 대시보드 (4시간)
- 포트폴리오 사이트 (3시간)

**합계: 9시간 / 3개 프로젝트**

기존 방식이라면 **일주일** 걸렸을 것들.

AI 코딩 시대가 왔습니다

10년 동안 코드를 손으로 타이핑했습니다.

이제는 AI에게 말합니다.

처음엔 어색했습니다. 지금은 자연스럽습니다.

**세상이 바뀌었습니다.**

적응하지 않으면 뒤처집니다.

이 강의로 바이브코딩 배우세요.

하루 만에 랜딩페이지 완성할 수 있습니다.

저도 했으니까요.

---

**태그**: #CursorAI #바이브코딩 #AI코딩 #랜딩페이지 #빠른개발 #생산성향상