Vibe Coding - 셋업부터 고급 팁까지 프롬프트 사용법

바이브 코딩 튜토리얼 

최근 개발 트렌드 중 하나로 급부상한 'Vibe 코딩'. 코드 한 줄 쓰지 않고도 AI 에이전트와 대화하면서 프로젝트를 구현하는 방식입니다.

---

1. Vibe 코딩을 위한 툴 선택

먼저 어떤 툴로 Vibe 코딩을 할지 정해야 합니다. 영상에서는 아래 네 가지 툴이 소개됩니다:

• Windsurf: VS Code를 포크한 코드 에디터로, Vibe 코딩에 최적화된 환경 제공. 최근 가장 많이 사용됨.
• Cursor: AI 기반 코딩 에디터로 Windsurf와 유사한 기능.
• VS Code 확장 (예: Klein): 기존 VS Code 사용자라면 확장만으로도 Vibe 코딩 가능.
• Replit: 온라인 코드 에디터로 배포까지 간편하게 가능.
• 캔버스 기능 (Claude, ChatGPT 등): HTML/JS에 한정되지만 브라우저에서 즉시 실행 가능.

---

2. 사용할 언어와 스택 고르기

AI가 잘 학습한 인기 있는 언어를 선택해야 합니다. 대표적으로:

• 프론트엔드: HTML + JavaScript
• 백엔드: Python (또는 Node.js)

참고: GitHut 2.0에서 언어 인기도 순위를 참고할 수 있습니다.

---

3. 프로젝트 계획 수립

AI가 이해할 수 있도록 구체적인 **PRD (Product Requirement Document)**와 To-do List를 작성합니다. 이때 Grok 같은 AI를 활용해:

• 앱 목적 정의
• 주요 기능 나열
• 사용자 흐름 설명
• 구현 단계별 일정 도출

작성한 계획은 .md 파일로 저장하여 AI가 계속 참고할 수 있도록 합니다.

---

4. 버전 관리(Git) 설정

버전 관리는 필수입니다. Git을 사용해 코드의 변경 이력을 관리하세요.

• git init 으로 프로젝트 초기화
• git commit 으로 코드 저장 지점 설정
• GitHub에 업로드하여 안전하게 백업

모든 Git 명령은 AI에게 명령형으로 요청하면 됩니다. 예: "add git to this project"

---

5. AI 코딩 규칙 (Rules) 설정

AI가 코드를 작성할 때 지켜야 할 **규칙(Rules)**을 정의할 수 있습니다.

• 전역(Global) 규칙: 모든 프로젝트에 적용
• 워크스페이스 규칙: 특정 프로젝트에만 적용

예시 규칙:

• 변경 시 서버 자동 재시작
• 기존 코드를 우선적으로 참고
• 중복 코드 방지
• dev/test/prod 환경 구분
• 단일 파일 길이 제한 (ex. 200줄 이하)

GitHub의 awesome cursor rules 레포를 참고하면 언어별/프레임워크별 베스트 프랙티스를 활용할 수 있습니다.

 

---

6. Vibe Coding 워크플로우

1. 계획 문서 작성 (prd.md, to-do.md)
2. 기능 하나씩 구현 (AI에게 작업 단위로 요청)
3. 테스트 코드 작성 및 실행
4. 전체 테스트 수행
5. Git 커밋으로 저장
6. 다음 기능 구현 반복

테스트 실패 시: 코드 수정 또는 테스트 자체 수정

---

7. Chat vs Write 모드

• Chat 모드: 코드 작성 없이 질문 중심
• Write 모드: AI가 주도적으로 코드 작성

모델 선택도 가능 (Claude 3.7 추천)

---

8. 프론트엔드 디자인 꿀팁

AI가 예쁜 UI를 잘 못 만들 때는?

• 무료 부트스트랩 테마 다운로드
• 컴포넌트 기반 UI 템플릿 사용
• 폴더에 넣고 AI에게 사용 요청

---

9. 보안 및 유지관리 Best Practices

보안과 유지관리를 위해 다음을 고려하세요:

• API 키는 절대 공유 금지
• Git 저장소에 .env 등 민감 정보 제외 (.gitignore 사용)
• API 호출에 Rate Limit 설정
• 인증에는 외부 서비스(Clerk 등) 사용 권장
• 코드 리팩토링 요청으로 유지보수 용이하게
• npm run audit, AI 기반 보안 점검 요청 가능

---

즐거운 바이브 코딩의 세계로 들어오세요~

 

Vibe 코딩 튜토리얼 실전 프롬프트 

Vibe 코딩을 직접 따라 하기 위한 실제 사용 프롬프트들을 한글로 번역한 버전입니다. Claude, ChatGPT, Cursor, Windsurf 등에서 그대로 사용하셔도 좋습니다.

---

✅ 캔버스에서 코드 생성 요청 예시

🟢 3D 예제 생성 (Claude 또는 ChatGPT의 캔버스 기능에서 사용)

3JS를 이용해서 만들 수 있는 가장 멋진 회전하는 3D 도형 코드를 작성해줘.

---

✅ 프로젝트 설계 및 계획 프롬프트 (Grok 사용)

🟠 SaaS 앱 기획 요청

기사, 유튜브 영상, 논문 링크를 저장할 수 있고, AI가 각각을 요약해주며 검색 기능도 제공하는 SaaS 앱을 만들고 싶어. 이 앱의 상세한 기획안(Spec)을 작성해줘. 또한 내가 빠뜨린 기능이 있으면 질문해줘.

🟠 PRD 문서로 변환 요청

위 기획 내용을 PRD (제품 요구사항 문서) 형식으로 Markdown (.md)으로 작성해줘.

🟠 To-do 리스트로 정리 요청

이 앱을 개발하기 위한 단계별 할 일 목록을 Markdown 형식으로 작성해줘.

---

✅ 테스트 코드 작성 및 수정 프롬프트

🔵 테스트 코드 생성 요청

이 앱이 예상대로 동작하는지 확인할 수 있는 테스트 코드를 작성해줘.

🔵 테스트 실패 시 대처 프롬프트

테스트를 고쳐줘.

테스트가 실패한 이유를 설명해줘.

---

✅ Git 및 버전 관리 관련 프롬프트

🟣 Git 설치 및 초기화 요청

Git을 설치해줘.

이 프로젝트에 Git을 설정해줘.

코드를 커밋해줘.

이전 커밋으로 되돌려줘.

---

✅ 리팩토링 및 코드 개선 프롬프트

🟤 코드 정리 및 구조화 요청

중복 코드를 제거하고 모듈화된 구조로 리팩토링해줘.

---

✅ 보안 점검 및 유지관리 프롬프트

🔐 보안 감수 요청

내 코드의 보안 취약점을 분석해주고 어떤 점이 위험한지 알려줘.

---

✅ AI에게 적용할 Rule 예시 (Windsurf / Cursor 등)

아래와 같은 규칙을 Markdown 파일로 저장하거나 설정에 추가하면 AI가 항상 이를 참고합니다:

- 코드 변경 후 항상 서버를 재시작해서 테스트할 수 있도록 해줘.
- 새로운 코드를 작성하기 전에 기존 코드를 먼저 수정할 수 있는지 확인해줘.
- 하나의 파일은 최대 300줄 이하로 유지해줘.
- 개발(dev), 테스트(test), 운영(prod) 환경을 항상 고려해서 작성해줘.
- 한 번만 사용할 스크립트는 파일에 저장하지 말고 직접 실행하거나 작성 후 삭제해줘.

---

위 프롬프트들은 영상에서 실제 사용된 영어 프롬프트를 한국어로 번역한 것입니다. 한국어로 입력해도 대부분의 AI 도구가 잘 인식하므로 그대로 사용해보세요!