바이브코딩 시작하는 법 — 설치부터 첫 결과물까지 (2026년 최신 가이드)

https://cherrycoding0.tistory.com/27

바이브코딩이란? 코드 한 줄 안 치고 앱 만든 후기 (프론트엔드 7년차의 솔직 리뷰)

 

---

1편에서 바이브코딩이 뭔지 설명했더니, 바로 이런 질문이 왔어요.

"그래서 어떻게 시작해요?"

맞아요, 개념은 알겠는데 막상 시작하려면 어디서 뭘 설치하고, 어떻게 쓰는지 막막하죠. 저도 처음에 그랬어요. 유튜브 영상 보고 따라하다가 중간에 버전이 달라서 막히고, 영어 공식 문서 읽다가 포기한 적도 있었어요.

그래서 이번 글은 최대한 군더더기 없이, "진짜 시작하는 순서" 만 담아볼게요. 프론트엔드 개발 경험이 있는 분이라면 이 글 하나로 오늘 안에 첫 결과물을 만들 수 있어요.

---

바이브코딩 시작 전에 알아야 할 것 딱 하나

바이브코딩을 시작할 때 제일 많이 하는 실수가 있어요.

"완벽한 결과물을 바라는 것"이에요.

AI한테 "쇼핑몰 만들어줘" 하면 완성된 쇼핑몰이 나올 거라 기대하는 거예요. 안 나와요. AI는 도구예요. 방향을 내가 잡고, 구체적으로 쪼개서 요청해야 해요.

바이브코딩을 잘하는 사람과 못하는 사람의 차이는 "얼마나 잘게 쪼개서 설명하느냐" 예요.

이걸 염두에 두고 시작하면 훨씬 덜 답답해요.

---

Step 1 — 툴 선택하기

2026년 기준으로 바이브코딩에 쓸 수 있는 주요 도구는 크게 세 가지예요.

Cursor — AI 기능이 내장된 VS Code 기반 코드 에디터. 기존 개발자한테 제일 친숙한 환경이에요. 코드베이스 전체를 AI가 참조하면서 작업할 수 있어서, 기존 프로젝트에 AI를 붙이는 방식으로 쓰기 최고예요.

https://cursor.com/

The best way to code with AI

 

Claude (claude.ai) — 코드 에디터 없이 대화하듯 개발하는 방식. 설계나 아이디어 정리, 특정 기능 코드 짜달라고 할 때 강력해요. 저는 Cursor 쓰기 전에 Claude로 먼저 구조를 잡아요.
https://claude.ai/new

Claude

 

Bolt / Lovable — 프롬프트만으로 풀스택 앱을 생성해주는 노코드형 도구. 개발 지식이 없어도 쓸 수 있어요. 다만 커스터마이징 자유도는 Cursor보다 낮아요.

https://bolt.new/

Bolt AI builder: Websites, apps & prototypes

https://lovable.dev/

AI App Builder | Vibe Code Apps & Websites with AI, Fast

 

 

프론트엔드 개발 경험이 있다면 Cursor + Claude 조합을 추천해요. 저도 이 조합으로 쓰고 있어요.

---

Step 2 — Cursor 설치하기

2-1. 다운로드

cursor.com 에서 무료로 다운받을 수 있어요. Mac, Windows, Linux 모두 지원해요.

설치하면 VS Code랑 거의 똑같이 생긴 에디터가 열려요. 기존에 VS Code 쓰던 확장 프로그램, 테마, 단축키 설정도 그대로 가져올 수 있어요.

2-2. 모델 선택

Cursor 설정에서 사용할 AI 모델을 고를 수 있어요. 2026년 기준으로 Claude Sonnet 이나 GPT-4o가 코딩에 제일 잘 쓰여요. 저는 Claude Sonnet을 기본으로 써요.

Cursor Settings → Models → claude-sonnet-4-5 선택

 

2-3. 반드시 챙겨야 할 설정 하나

Cursor에서 제일 중요한 설정은 .cursorrules 파일이에요. 이걸 설정 안 하면 AI가 매번 다른 스타일로 코드를 써줘서 일관성이 없어져요.

프로젝트 루트에 .cursorrules 파일을 만들고, 이런 내용을 넣어요.

You are a senior frontend developer.
Always use TypeScript.
Use Tailwind CSS for styling.
Follow the existing code structure and naming conventions.
Write clean, readable code with comments.

이렇게 해두면 AI가 매번 이 규칙을 따르면서 코드를 짜줘요. 프로젝트 일관성이 훨씬 좋아져요.

---

Step 3 — Claude 세팅하기

claude.ai 에서 회원가입하면 돼요. 무료 플랜도 꽤 쓸 만하고, Pro 플랜 ($20/월)이면 Claude Sonnet을 제한 없이 쓸 수 있어요.

저는 Claude를 이렇게 활용해요.

코딩 시작 전에 Claude에게 먼저 설계를 물어봐요.

React로 다이어트 식단 기록 앱을 만들려고 해.
주요 기능은 날짜별 식단 입력, 칼로리 자동 계산, 주간 리포트야.
컴포넌트 구조를 어떻게 잡는 게 좋을까?

이러면 Claude가 컴포넌트 설계를 잡아줘요. 그 설계를 들고 Cursor로 넘어가서 구현하는 거예요. 설계 → 구현을 분리하는 게 포인트예요.

---

Step 4 — 첫 프롬프트 작성하기

이제 실제로 뭔가 만들어볼게요.

바이브코딩 프롬프트를 잘 쓰는 공식이 있어요.

[기술 스택] + [만들 것] + [세부 조건] + [제약사항]

나쁜 프롬프트 예시:

랜딩페이지 만들어줘

좋은 프롬프트 예시:

React + TypeScript + Tailwind CSS로 다이어트 앱 랜딩페이지를 만들어줘.

구성:
- 히어로 섹션: 메인 카피 "하루 5분, 식단 기록으로 체중 감량", CTA 버튼
- 기능 소개 섹션: 카드 3개 (간편 기록, 칼로리 자동 계산, 주간 리포트)
- 이메일 수집 폼 섹션

조건:
- 모바일 반응형 필수
- 색상은 초록 계열 (#22c55e 기준)
- 폰트는 Noto Sans KR

이렇게 구체적으로 쓸수록 AI가 원하는 것에 가깝게 만들어줘요.

처음엔 이걸 쓰는 게 귀찮게 느껴져요. 근데 이 30초 투자가 나중에 수정하는 30분을 아껴줘요.

---

Step 5 — 결과물 확인하고 수정하기

AI가 코드를 줬다고 끝이 아니에요. 결과물을 실행해서 확인하고, 원하는 것과 다른 부분은 다시 요청해야 해요.

수정 요청할 때도 구체적으로 해야 해요.

나쁜 수정 요청:

버튼 좀 바꿔줘

좋은 수정 요청:

히어로 섹션의 CTA 버튼을 다음처럼 바꿔줘:
- 텍스트: "무료로 시작하기"
- 배경색: #22c55e
- hover 시 #16a34a로 변경
- 패딩: px-8 py-4
- 클릭하면 #pricing 섹션으로 스크롤

처음엔 이게 오래 걸리는 것 같아도, 3번 반복하다 보면 손에 익어요.

---

실제로 써봤을 때 타임라인

제가 처음 바이브코딩으로 랜딩페이지를 만들었을 때 타임라인이에요.

단계 내용 소요 시간

Claude에서 설계 잡기	컴포넌트 구조, 기술 스택 결정	15분
Cursor에서 기본 구조 생성	메인 레이아웃 프롬프트 요청	5분
섹션별 구현	히어로, 기능 소개, 폼 섹션 순서대로	30분
수정 & 디테일	색상, 간격, 반응형 수정	20분
총합		약 70분

 

예전이라면 최소 반나절은 잡았을 텐데 약 70분만에 랜딩 페이지가 탄생합니다!

 

---

자주 하는 실수 3가지

① 한 번에 너무 많이 요청하기 "쇼핑몰 전체 다 만들어줘" 이런 요청은 AI도 감당 못해요. 기능 하나씩, 섹션 하나씩 잘게 쪼개서 요청하세요.

② 에러가 나도 그냥 다시 같은 요청 반복하기 AI가 틀렸을 때 "왜 안 돼요?" 보다 에러 메시지를 그대로 복사해서 붙여넣는 게 훨씬 빠르게 해결돼요.

이 에러가 나요:
[에러 메시지 전체 붙여넣기]
원인이 뭔지 설명하고 수정해줘.

③ AI가 짠 코드를 이해 안 하고 넘어가기 단기적으로는 괜찮아요. 근데 나중에 수정해야 할 때 AI도 맥락을 놓치고, 나도 모르면 막혀요. 핵심 로직은 한 번씩 읽어보는 습관을 들이는 게 좋아요.

---

마무리: 시작이 반이 아니라 시작이 99%다

바이브코딩은 진입장벽이 낮아요. Cursor 깔고, 첫 프롬프트 적고, 엔터 치는 그 순간이 시작이에요.

처음엔 어색해요. AI가 내 의도를 못 알아들을 때 답답하기도 해요. 근데 익숙해지면 진짜로 "만드는 속도"가 달라져요.

오늘 이 글 읽은 김에 Cursor 다운받고, 간단한 컴포넌트 하나라도 만들어보세요. 30분 안에 "이게 되네?" 하는 순간이 올 거예요.

---

다음 포스팅 예고: 바이브코딩 도구가 Cursor랑 Claude만 있는 게 아니에요. Bolt, Lovable, GitHub Copilot까지 — 상황별로 어떤 툴을 골라야 하는지, 3편에서 비교해드릴게요.

---

#바이브코딩시작 #바이브코딩하는법 #Cursor설치 #ClaudeAI활용 #프론트엔드AI #AI코딩입문 #바이브코딩가이드 #개발자AI도구 #Cursor사용법 #AI개발입문 #프론트엔드개발 #개발생산성 #AI코딩도구 #바이브코딩2026 #체리플랜