바이브 코딩이란 무엇인가
바이브 코딩(Vibe Coding)은 2025년 Andrej Karpathy가 제안한 개념으로, AI에게 자연어로 지시하여 소프트웨어를 만드는 새로운 개발 방식입니다. 전통적인 개발은 수년간의 프로그래밍 언어 학습이 필요했지만, 바이브 코딩은 “내가 원하는 것을 말하면 AI가 코드를 작성한다”는 철학에서 출발합니다.
핵심은 간단합니다. 여러분이 해야 할 일은 무엇을 만들고 싶은지 명확하게 설명하는 것뿐입니다. “사용자 이름과 이메일을 입력받는 회원가입 폼을 만들어줘”라고 말하면, Claude Code가 HTML, CSS, JavaScript를 모두 작성해 줍니다.
비전공자에게 바이브 코딩이 특히 강력한 이유는 세 가지입니다. 첫째, 문법 암기가 필요 없습니다. 둘째, 오류가 발생해도 AI에게 오류 메시지를 그대로 붙여넣으면 수정해 줍니다. 셋째, 아이디어에서 결과물까지의 시간이 극적으로 단축됩니다. 실제 현업 개발자들도 바이브 코딩을 활용해 프로토타입 제작 속도를 10배 이상 높이고 있습니다.
Claude Code 설치와 환경 설정
Claude Code는 Anthropic이 만든 AI 코딩 에이전트로, 터미널에서 동작합니다. 처음에는 터미널이 낯설게 느껴질 수 있지만, 이 글을 따라하다 보면 금세 익숙해질 것입니다. 중요한 것은 터미널을 능숙하게 다루는 것이 아니라, Claude Code와 대화하는 법을 익히는 것입니다.
Node.js 설치 확인
Claude Code를 사용하려면 먼저 Node.js가 설치되어 있어야 합니다. Mac에서는 터미널(응용 프로그램 – 유틸리티 – 터미널), Windows에서는 명령 프롬프트나 PowerShell을 열고 아래 명령어를 입력하세요.
node --versionv18.0.0 이상의 버전 번호가 표시되면 이미 설치된 것입니다. 설치가 안 되어 있거나 버전이 낮다면 nodejs.org에서 LTS 버전을 다운로드하세요. 설치 후 터미널을 재시작하고 다시 확인합니다.
npm --versionnpm도 함께 확인합니다. npm은 Node.js 패키지 관리자로, Claude Code 설치에 사용됩니다. 9.0 이상이면 충분합니다.
Claude Code 설치
Node.js가 준비되었다면 이제 Claude Code를 설치합니다. 터미널에 아래 명령어를 입력하세요. 인터넷 연결이 필요하며, 설치에 1~2분 정도 소요됩니다.
npm install -g @anthropic-ai/claude-code설치가 완료되면 버전을 확인합니다.
claude --version처음 실행할 때는 Anthropic 계정 인증이 필요합니다. 아래 명령어로 시작하세요.
claude처음 실행하면 로그인 안내가 나타납니다. console.anthropic.com에서 계정을 만들고 API 키를 발급받거나, Claude.ai Pro 계정($20/월)으로 로그인할 수 있습니다. 비전공자 학습 목적이라면 Claude.ai Pro 계정이 가장 편리합니다.
첫 번째 프로젝트 시작하기
환경 설정이 완료되었습니다. 이제 첫 번째 프로젝트를 시작해봅시다. 오늘 만들 것은 간단한 개인 포트폴리오 사이트입니다. 코드를 전혀 몰라도 됩니다. Claude Code에게 원하는 것을 설명하기만 하면 됩니다.
프로젝트 폴더 생성
먼저 프로젝트를 저장할 폴더를 만들겠습니다. 아래 두 명령어만 기억하세요.
mkdir my-portfolio
cd my-portfoliomkdir은 폴더를 만드는 명령어이고, cd는 해당 폴더로 이동하는 명령어입니다. 이 두 가지만 알아도 프로젝트를 시작하기에 충분합니다. 이제 Claude Code를 실행합니다.
claudeClaude Code가 실행되면 프롬프트가 나타납니다. 여기에 자연어로 원하는 것을 입력하면 됩니다. 마치 카카오톡으로 메시지를 보내듯이 자유롭게 작성하세요.
Claude Code에게 명령 내리기
Claude Code 프롬프트에 아래와 같이 입력해보세요. 이름과 관심사는 본인에 맞게 수정하세요.
index.html 파일을 만들어줘. 내 이름은 홍길동이고,
바이브 코딩을 배우고 있는 비전공자야.
간단한 포트폴리오 페이지를 만들어줘.
- 상단에 이름과 소개 텍스트
- 중간에 내가 배우고 있는 기술 목록 (HTML, CSS, Claude Code)
- 하단에 연락처 섹션 (이메일: hong@example.com)
Tailwind CSS CDN을 사용해서 깔끔하게 만들어줘.
배경색은 짙은 남색, 텍스트는 흰색으로 해줘.Claude Code는 이 요청을 분석하고 완전한 HTML 파일을 자동 생성합니다. 생성된 파일을 브라우저에서 열면 즉시 포트폴리오 페이지를 볼 수 있습니다. 여러분은 단 한 줄의 코드도 직접 작성하지 않았지만, 완성된 웹페이지가 만들어졌습니다.
포트폴리오 사이트 실제 제작
Claude Code가 생성한 코드를 살펴보고, 원하는 방향으로 발전시켜봅시다. 실제로 어떤 수준의 코드가 만들어지는지, 그리고 어떻게 수정을 요청하는지 알아봅니다.
HTML 구조 확인과 수정 요청
Claude Code가 생성한 파일을 열어보면 다음과 같은 구조를 확인할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홍길동 포트폴리오</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white min-h-screen">
<header class="py-20 text-center">
<h1 class="text-5xl font-bold mb-4">홍길동</h1>
<p class="text-xl text-slate-300">바이브 코딩으로 세상을 바꾸는 비전공자</p>
</header>
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl font-semibold mb-8 text-center">배우고 있는 기술</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-slate-800 p-6 rounded-xl text-center hover:bg-slate-700 transition">
<p class="text-lg font-medium">HTML</p>
</div>
<div class="bg-slate-800 p-6 rounded-xl text-center hover:bg-slate-700 transition">
<p class="text-lg font-medium">CSS</p>
</div>
<div class="bg-slate-800 p-6 rounded-xl text-center hover:bg-slate-700 transition">
<p class="text-lg font-medium">Claude Code</p>
</div>
</div>
</section>
</body>
</html>코드를 이해하지 못해도 괜찮습니다. 결과가 마음에 들지 않는 부분이 있다면 그냥 말로 수정을 요청하면 됩니다.
기술 카드에 아이콘 이미지를 추가하고 싶어.
Font Awesome CDN을 추가해서 각 기술에 맞는 아이콘을 넣어줘.Claude Code는 기존 파일을 분석하고 요청한 부분만 정확하게 수정합니다. 전체를 처음부터 다시 작성할 필요가 없습니다.
연락처 폼과 외부 서비스 연동
단순한 정보 표시를 넘어서 실제로 동작하는 기능도 추가할 수 있습니다. 방문자가 이메일을 보낼 수 있는 폼을 추가해봅시다.
연락처 폼을 추가해줘.
이름, 이메일, 메시지 필드가 필요해.
폼 제출 시 FormSubmit (formsubmit.co) 서비스를 이용해서
hong@example.com으로 이메일이 오도록 설정해줘.
버튼은 보라색으로 만들어줘.이렇게 요청하면 외부 서비스와 연동된 완전한 폼 기능까지 만들어집니다. FormSubmit은 별도 서버 없이 이메일 수신이 가능한 무료 서비스입니다. 클라우드 서버나 백엔드 코드 없이도 실제로 동작하는 연락처 기능을 구현할 수 있습니다.
AntiGravity로 전 세계에 배포하기
사이트가 완성되었다면 AntiGravity를 사용해 인터넷에 공개할 수 있습니다. AntiGravity는 정적 파일을 빠르고 무료로 호스팅해주는 서비스입니다. 도메인 설정이나 서버 관리가 필요 없습니다.
npm install -g antigravity설치 후 포트폴리오 폴더에서 아래 명령어를 실행합니다.
antigravity deploy .배포가 완료되면 고유한 URL이 출력됩니다. 이 URL을 친구나 취업 지원서에 첨부하면 됩니다. 전 세계 어디서든 접근 가능한 포트폴리오 사이트가 만들어졌습니다.
자주 묻는 질문
Q. 프로그래밍을 전혀 모르는데 Claude Code를 쓸 수 있나요?
A. 네, 충분히 가능합니다. Claude Code는 자연어 명령을 이해하기 때문에 한국어로 원하는 기능을 설명하면 됩니다. 다만 결과물을 브라우저에서 확인하거나 파일을 열고 닫는 기본적인 컴퓨터 조작은 알아야 합니다. 터미널에서 폴더를 만들고 이동하는 정도면 충분합니다.
Q. 오류가 발생하면 어떻게 하나요?
A. 오류 메시지를 그대로 복사해서 Claude Code에 붙여넣으면 됩니다. “이 오류가 발생했어, 고쳐줘”라고 하면 원인을 분석하고 수정 방법을 제안합니다. 오류를 두려워하지 마세요. 오히려 오류를 통해 Claude Code가 더 정확하게 코드를 개선해줍니다.
Q. Claude Code와 ChatGPT의 차이는 무엇인가요?
A. ChatGPT는 대화형 AI로 코드를 제안하지만 직접 파일을 만들거나 수정하지 않습니다. Claude Code는 실제로 파일 시스템에 접근해 파일을 생성, 수정, 실행하는 에이전트입니다. “index.html 만들어줘”라고 하면 실제로 그 파일이 여러분의 컴퓨터에 생성됩니다. 말이 아니라 행동하는 AI입니다.
Q. 비용은 얼마나 드나요?
A. Claude.ai Pro 구독($20/월, 약 3만원)을 사용하는 방법이 가장 편리합니다. API 키를 발급받아 사용량에 따라 과금하는 방식도 있는데, 비전공자 수준의 소규모 프로젝트라면 월 $5~10 이내로 충분한 경우가 많습니다. 처음에는 무료 플랜으로 시작해서 필요에 따라 업그레이드하세요.
Q. 만든 코드를 나중에 수정하거나 발전시킬 수 있나요?
A. 물론입니다. Claude Code는 기존 프로젝트를 이어서 개발할 수 있습니다. 프로젝트 폴더에서 다시 claude 명령어를 실행하면 현재 폴더의 파일들을 분석하고, “로그인 기능 추가해줘”, “모바일에서도 잘 보이게 수정해줘” 같은 요청으로 기능을 계속 확장할 수 있습니다.
오늘 5분 실습
지금 당장 따라할 수 있는 실습입니다. 5분이면 충분합니다. 컴퓨터를 켜고 바로 시작해보세요.
1단계 (1분): 터미널을 열고 바탕화면에 실습 폴더를 만듭니다.
cd ~/Desktop
mkdir my-first-site
cd my-first-site2단계 (30초): Claude Code를 실행합니다.
claude3단계 (3분): 다음 프롬프트를 입력합니다. 대괄호 안의 내용은 본인 것으로 바꾸세요.
index.html 파일을 만들어줘.
내 이름은 [본인이름]이고, [직업이나 관심사]야.
Tailwind CSS CDN을 사용해서 깔끔한 자기소개 페이지를 만들어줘.
배경은 짙은 남색(slate-900), 포인트 색상은 보라색(violet-500)으로 해줘.
이름을 크게 표시하고, 간단한 소개 문구와 연락처를 넣어줘.4단계 (30초): 완성된 index.html 파일을 더블클릭해서 브라우저로 열어보세요. 방금 여러분이 만든 웹페이지가 나타납니다.
어떤가요? 코드를 한 줄도 작성하지 않았지만 완성된 웹페이지가 만들어졌습니다. 이것이 바이브 코딩입니다. 마음에 들지 않는 부분이 있다면 Claude Code에게 “배경색을 바꿔줘”, “폰트 크기를 키워줘”처럼 계속 수정을 요청하세요.
미래이음연구소 바이브 코딩 교육
이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
마무리
바이브 코딩은 “코딩을 배워야 한다”는 진입장벽을 허물고 있습니다. Claude Code를 통해 비전공자도 자신의 아이디어를 실제 결과물로 만들어낼 수 있는 시대가 왔습니다. 완벽한 코드를 작성하는 것이 목표가 아닙니다. 원하는 것을 만들어내는 것이 목표입니다.
오늘 배운 핵심을 정리합니다. 설치는 npm install -g @anthropic-ai/claude-code, 실행은 claude, 그리고 원하는 것을 한국어로 설명하면 됩니다. 오류가 나면 오류 메시지를 붙여넣으면 되고, 마음에 안 들면 수정을 요청하면 됩니다. AntiGravity로 배포하면 전 세계에 공개도 가능합니다.
처음에는 어색하더라도 매일 조금씩 실습하다 보면 AI와 대화하듯 소프트웨어를 만드는 흐름이 자연스러워집니다. 오늘 5분 실습부터 시작해보세요.
두온교육(main.duonedu.net)과 미래이음연구소(lab.duonedu.net)에서 더 많은 바이브 코딩 학습 자료와 강의 일정을 확인하세요.
