5.1 바이브 코딩이란?

바이브 코딩(Vibe Coding): AI에게 자연어로 원하는 것을 설명하면, AI가 코드를 생성하고 실행하는 새로운 개발 패러다임입니다. "코드를 작성하는" 것이 아니라 "AI와 대화하며 만드는" 것입니다.
바이브 코딩의 기원: "바이브 코딩(Vibe Coding)"은 2025년 2월 AI 연구자 Andrej Karpathy(전 Tesla AI 책임자, OpenAI 공동창업자)가 X(트위터)에서 처음 명명한 용어입니다. "코드를 직접 작성하지 않고, AI에게 원하는 것을 설명하며 분위기(vibe)로 코딩한다"는 의미입니다. 이후 전 세계 개발자 커뮤니티에서 폭발적으로 확산되어, 2026년 현재 비개발자의 소프트웨어 제작 방법론으로 자리잡았습니다.

전통적 코딩 vs 바이브 코딩

항목 전통적 코딩 바이브 코딩
필요 지식 프로그래밍 언어, 프레임워크 원하는 결과를 설명하는 능력
작업 방식 코드를 직접 타이핑 AI에게 자연어로 지시
디버깅 에러 메시지 분석 + 코드 수정 AI에게 에러를 보여주고 수정 요청
학습 곡선 수개월~수년 수시간~수일
적합 대상 개발자 PM, 기획자, 디자이너, 누구나

바이브 코딩의 핵심 원칙

  1. 명확한 요청: 원하는 결과를 구체적으로 설명하세요
  2. 점진적 진행: 한 번에 모든 것을 요청하지 말고, 단계별로 진행하세요
  3. 반복 개선: 첫 결과가 완벽하지 않아도 됩니다. 수정을 반복하세요
  4. 결과 확인: AI가 만든 결과를 항상 직접 확인하세요

5.2 Claude Code 시작하기

Claude Code는 Anthropic이 만든 CLI 기반 AI 코딩 도구입니다. 터미널에서 대화하며 코드를 생성, 수정, 실행할 수 있습니다.

설치 방법

# Node.js 설치 후 (https://nodejs.org)
npm install -g @anthropic-ai/claude-code

# 설치 확인
claude --version

# 프로젝트 폴더에서 시작
cd my-project
claude

기본 사용법

동작 방법 예시
대화 시작 프로젝트 폴더에서 claude 실행 cd my-project && claude
파일 생성 자연어로 요청 "index.html 파일을 만들어줘"
코드 수정 수정 내용 설명 "헤더 색상을 파란색으로 바꿔줘"
에러 해결 에러 메시지 공유 "이 에러를 해결해줘: ..."
기능 추가 원하는 기능 설명 "다크모드 토글 버튼을 추가해줘"
실무 팁: Claude Code에게 지시할 때 "개발자처럼" 말할 필요가 없습니다. "사용자가 버튼을 클릭하면 목록이 나타나게 해줘"처럼 자연스러운 한국어로 설명하면 됩니다.

5.3 프롬프트로 웹페이지 만들기

실제로 AI에게 프롬프트를 주어 웹페이지를 만드는 과정을 단계별로 살펴봅니다.

Step 1: 기본 구조 만들기

첫 번째 프롬프트
다음 내용으로 간단한 웹페이지를 만들어줘.

페이지: 개인 포트폴리오
구성:
- 상단: 이름과 직함 (PM / Product Manager)
- 소개 섹션: 간단한 자기소개 3줄
- 경력 섹션: 회사명, 기간, 역할 (3개)
- 스킬 섹션: 프로젝트 관리, 데이터 분석, UX 리서치 등
- 하단: 이메일 연락처

스타일:
- 깔끔하고 모던한 디자인
- 흰 배경, 어두운 회색 텍스트
- 적절한 여백과 카드 스타일

HTML + CSS 한 파일로 만들어줘.

Step 2: 디자인 개선 요청

두 번째 프롬프트 (반복 개선)
좋아요! 다음을 수정해주세요:

1. 헤더에 그라데이션 배경 추가 (파란색 → 보라색)
2. 경력 섹션을 카드 형태로 변경 (그림자 효과)
3. 스킬 섹션에 프로그레스 바 추가
4. 모바일에서도 잘 보이도록 반응형 적용
5. 부드러운 스크롤 효과 추가

Step 3: 기능 추가

세 번째 프롬프트 (기능 확장)
추가 기능을 넣어주세요:

1. 다크모드/라이트모드 전환 버튼
2. 스크롤 시 헤더가 작아지는 효과
3. 각 섹션이 스크롤에 따라 페이드인 되는 애니메이션
4. 맨 위로 가기 버튼
핵심 패턴: 기본 구조 → 디자인 개선 → 기능 추가 순서로 점진적으로 완성합니다. 한 번에 완벽한 결과를 기대하지 마세요.

5.4 반복 개선(Iteration)으로 완성도 높이기

바이브 코딩의 핵심은 반복 개선(Iteration)입니다. 한 번에 완벽한 결과를 얻으려 하지 말고, 대화를 통해 점진적으로 개선하세요.

효과적인 피드백 방법

상황 나쁜 피드백 좋은 피드백
디자인 수정 "좀 더 예쁘게 해줘" "헤더 배경을 #4A90D9로 변경하고, 텍스트 크기를 24px로 키워줘"
레이아웃 변경 "배치가 이상해" "카드 3개를 가로로 나란히 배치하고, 모바일에서는 세로로 쌓이게 해줘"
기능 추가 "버튼 추가해줘" "우측 하단에 고정된 '맨 위로' 버튼을 추가하고, 스크롤 200px 이상 시 나타나게 해줘"
에러 발생 "안 돼" "버튼을 클릭해도 반응이 없어. 콘솔에 'TypeError: null' 에러가 나와"

반복 개선 사이클

  1. 결과 확인

    브라우저에서 결과를 직접 확인합니다.

  2. 문제 식별

    원하는 것과 다른 부분을 구체적으로 파악합니다.

  3. 수정 요청

    구체적인 변경사항을 AI에게 전달합니다.

  4. 재확인

    수정 결과를 다시 확인하고, 필요하면 반복합니다.

팁: 보통 3~5회 반복하면 만족스러운 결과를 얻을 수 있습니다. 10회 이상 반복해도 원하는 결과가 나오지 않으면, 요청을 다시 정리해보세요.

5.5 실전 프로젝트: 랜딩페이지 만들기

배운 내용을 종합하여 실제 랜딩페이지를 만들어봅니다.

프로젝트 개요

목표: AI를 활용하여 가상의 SaaS 제품 랜딩페이지를 처음부터 끝까지 만들기

실습 순서

  1. Step 1: 제품 정의 (AI 문서 작성 활용) 
    다음 SaaS 제품의 핵심 메시지를 정리해줘:
- 제품명: TaskFlow
- 한줄 설명: 중소기업을 위한 심플한 프로젝트 관리 도구
- 핵심 기능 3가지
- 타겟 고객
- 경쟁 우위
  2. Step 2: 랜딩페이지 구조 설계 (AI 도식화 활용) 
    TaskFlow 랜딩페이지의 구조를 Mermaid 플로우차트로 설계해줘:
- Hero 섹션 (헤드라인 + CTA)
- 기능 소개 (3개 카드)
- 사용 후기 (3개)
- 가격표 (3가지 플랜)
- FAQ (5개)
- CTA + Footer
  3. Step 3: HTML/CSS 구현 (바이브 코딩) 
    위 구조대로 TaskFlow 랜딩페이지를 만들어줘.

디자인 가이드:
- 메인 컬러: #4A90D9 (파란색)
- 폰트: 시스템 폰트
- 스타일: 모던, 미니멀
- 반응형 (모바일 대응)
- 다크모드 지원

한 파일(index.html)에 HTML + CSS + JS 포함해줘.
  4. Step 4: 반복 개선

    브라우저에서 확인하며 디자인, 콘텐츠, 기능을 3~5회 반복 개선합니다.

  5. Step 5: 완성 및 배포

    GitHub Pages나 Netlify를 통해 무료로 배포할 수 있습니다.

    # GitHub Pages로 배포하는 방법
# 1. GitHub에 저장소 생성
# 2. 코드 push
# 3. Settings > Pages > Deploy from branch
# 4. 완료! https://username.github.io/taskflow

바이브 코딩 체크리스트

단계 확인 항목 활용 모듈
기획 제품 정의, 타겟 사용자, 핵심 메시지 모듈 2 (AI 문서 작성)
설계 페이지 구조, 사용자 흐름 모듈 3 (AI 도식화)
리서치 경쟁사 분석, 레퍼런스 조사 모듈 4 (AI 자료 조사)
구현 HTML/CSS/JS 코드 생성 모듈 5 (바이브 코딩)
개선 디자인/기능 반복 수정 모듈 5 (반복 개선)

최종 실습 과제

이 교육에서 배운 모든 내용을 활용하여 여러분만의 랜딩페이지를 만들어보세요:

  1. AI로 제품/서비스 아이디어 기획 (모듈 2)
  2. AI로 페이지 구조 설계 (모듈 3)
  3. AI로 경쟁사/시장 조사 (모듈 4)
  4. 바이브 코딩으로 실제 구현 (모듈 5)
  5. 3회 이상 반복 개선
  6. (선택) GitHub Pages로 배포
← 이전 5. 바이브 코딩 기초 다음 →