바이브 코딩이란 무엇인가

2024년까지만 해도 “웹앱을 만들려면 HTML, CSS, JavaScript는 기본이고 React나 Vue 같은 프레임워크까지 공부해야 한다”는 말이 정설이었습니다. 하지만 2025년부터 개발 생태계에 조용한 혁명이 일어났습니다. 바로 바이브 코딩(Vibe Coding)입니다.

바이브 코딩은 AI에게 원하는 기능을 자연어로 설명하고, AI가 실제 코드를 생성하며, 개발자(혹은 비전공자)는 그 결과를 검토하고 방향을 잡는 방식입니다. Anthropic의 Claude Code, GitHub Copilot, Cursor 같은 도구들이 이 흐름을 이끌고 있습니다.

핵심은 코드를 직접 작성하지 않아도 된다는 점입니다. “로그인 기능을 만들어줘”, “버튼을 클릭하면 팝업이 나오게 해줘”처럼 말하면 AI가 실제 동작하는 코드를 완성해줍니다. 물론 코딩 지식이 있으면 더 정밀하게 제어할 수 있지만, 없어도 시작할 수 있습니다.

이 글에서는 비전공자가 Claude Code를 활용해 자신만의 웹앱을 처음부터 만들고, 실제 인터넷에 배포하기까지의 전 과정을 단계별로 안내합니다. 터미널이 처음이라도 괜찮습니다. 명령어를 복사해서 붙여넣는 것만 할 수 있으면 충분합니다.

Claude Code 설치 및 초기 설정

필수 준비물 확인

Claude Code를 사용하려면 세 가지가 필요합니다.

• Node.js 18 이상 — JavaScript 실행 환경
• Anthropic API 키 — Claude를 사용하기 위한 인증 키
• 터미널 — Mac은 기본 내장, Windows는 WSL2 또는 PowerShell 사용

Node.js 설치 여부는 터미널에서 아래 명령어로 확인할 수 있습니다.

node --version

v18.0.0 이상이 출력되면 준비된 것입니다. 설치되지 않았다면 https://nodejs.org에서 LTS 버전을 받아 설치합니다.

Claude Code 설치

터미널을 열고 아래 명령어를 입력합니다.

npm install -g @anthropic-ai/claude-code

설치가 완료되면 API 키를 환경 변수로 등록합니다. Anthropic Console(console.anthropic.com)에서 API 키를 발급받은 후 아래처럼 설정합니다.

Mac / Linux 환경:

export ANTHROPIC_API_KEY="sk-ant-여기에본인API키입력"

매번 터미널을 열 때마다 위 명령을 치는 것이 번거롭다면 셸 설정 파일에 영구 등록할 수 있습니다.

echo 'export ANTHROPIC_API_KEY="sk-ant-여기에본인키"' >> ~/.zshrc
source ~/.zshrc

Windows PowerShell 환경:

$env:ANTHROPIC_API_KEY = "sk-ant-여기에본인API키입력"

설치 확인

claude --version

버전 정보가 출력되면 설치 성공입니다. 이제 본격적으로 첫 번째 프로젝트를 시작합니다.

첫 번째 프로젝트: 자기소개 웹페이지

프로젝트 폴더 생성

바탕화면이나 원하는 위치에 프로젝트 폴더를 만들고, 해당 폴더로 이동합니다.

mkdir my-portfolio
cd my-portfolio

Claude Code 실행

폴더 안에서 Claude Code를 실행합니다.

claude

프롬프트가 나타나면 이제 AI와 대화하듯이 지시를 내리면 됩니다. 아래처럼 입력해봅니다.

index.html 파일을 만들어줘. 내 이름은 홍길동이고, 백엔드 개발에 관심이 많은 30대 직장인이야. 간단한 자기소개 페이지를 만들어줘. 배경은 어두운 톤으로 하고, 기술 스택을 카드 형태로 보여줘.

Claude Code는 파일을 분석하고, 코드를 생성하며, 필요한 경우 직접 파일을 생성하거나 수정합니다. 잠시 기다리면 index.html 파일이 생성됩니다.

결과물 바로 확인

생성된 파일을 브라우저에서 바로 열어봅니다. Mac에서는:

open index.html

Windows에서는 탐색기에서 파일을 더블클릭하거나:

start index.html

마음에 들지 않는 부분이 있다면 다시 Claude에게 말하면 됩니다.

글자 색이 너무 밝아서 읽기 힘들어. 기술 스택 카드에 호버 효과도 추가해줘.

이처럼 대화형으로 계속 수정해나가는 것이 바이브 코딩의 핵심입니다.

효과적인 프롬프트 작성법

나쁜 프롬프트 vs 좋은 프롬프트

Claude Code를 처음 쓰는 분들이 가장 많이 하는 실수는 프롬프트가 너무 막연하다는 것입니다. AI는 마음을 읽지 못합니다. 구체적이고 맥락이 풍부한 프롬프트일수록 원하는 결과가 나옵니다.

나쁜 예시:

버튼 만들어줘

좋은 예시:

오른쪽 하단에 고정된 "문의하기" 버튼을 만들어줘. 배경색은 보라색(#7c3aed)이고, 클릭하면 010-1234-5678로 전화 연결되는 tel: 링크가 걸려야 해. 모바일에서도 잘 보여야 해.

프롬프트 작성 5원칙

1. 목적을 먼저 말한다
“문의 폼을 만들어줘” 대신 “방문자가 이름, 이메일, 메시지를 입력하고 제출할 수 있는 문의 폼을 만들어줘”처럼 기능을 구체적으로 설명합니다.

2. 시각적 기대를 서술한다
“예쁘게”라는 표현 대신 “카드 형태”, “그림자 있는 박스”, “왼쪽 정렬”, “가운데 배치” 같이 레이아웃 언어를 사용합니다.

3. 제약 조건을 명시한다
“외부 라이브러리 없이 순수 HTML/CSS만 써줘” 혹은 “Bootstrap은 사용해도 돼”처럼 기술 스택 제약을 알려줍니다.

4. 예시를 들어준다
“Notion처럼 깔끔한 느낌”, “애플 홈페이지처럼 여백이 많은 스타일”처럼 레퍼런스를 언급하면 AI가 스타일을 더 잘 잡아줍니다.

5. 수정 시 이전 맥락을 언급한다
“방금 만든 헤더에서 로고 크기를 두 배로 키워줘”처럼 이전 작업을 지칭하면 실수가 줄어듭니다.

고급 활용: 파일 전체를 분석시키기

Claude Code는 현재 폴더의 파일을 자동으로 인식합니다. 복잡한 프로젝트에서는 이렇게 사용할 수 있습니다.

현재 프로젝트 구조를 분석해서 개선할 점 5가지를 알려줘

style.css 파일에서 중복된 코드를 정리하고, 모바일 반응형이 빠진 부분을 찾아서 추가해줘

완성한 웹앱 무료로 배포하기

Vercel로 30초 배포

만든 웹페이지를 실제 인터넷 주소로 공개하려면 배포가 필요합니다. 비전공자에게 가장 쉬운 방법은 Vercel입니다. GitHub 계정만 있으면 됩니다.

먼저 Vercel CLI를 설치합니다.

npm install -g vercel

프로젝트 폴더 안에서 배포 명령을 실행합니다.

vercel

처음 실행하면 이메일 인증을 요청합니다. 가이드에 따라 인증을 완료하면 자동으로 배포되며, https://my-portfolio-abc123.vercel.app과 같은 주소가 생성됩니다.

이후 코드를 수정할 때마다 같은 명령을 실행하면 자동으로 새 버전이 배포됩니다.

GitHub Pages 활용 (정적 사이트)

HTML/CSS/JS만으로 이루어진 정적 사이트라면 GitHub Pages가 가장 간편합니다.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/내계정/my-portfolio.git
git push -u origin main

GitHub 저장소 설정에서 Pages 탭으로 이동해 Branch를 main으로 설정하면 https://내계정.github.io/my-portfolio 주소로 바로 공개됩니다.

도메인 연결

무료 서브도메인이 아니라 본인 도메인을 연결하고 싶다면 가비아, 후이즈 같은 국내 도메인 업체에서 도메인을 구입하고, Vercel 또는 GitHub Pages 설정에서 Custom Domain을 등록하면 됩니다. Claude Code에 “Vercel에 커스텀 도메인 연결하는 법 알려줘”라고 물어보면 단계별 안내를 받을 수 있습니다.

자주 묻는 질문 Q&A

Q. API 비용이 많이 드나요?

Claude Code는 Anthropic API 사용량에 따라 비용이 발생합니다. 개인 학습 수준에서는 월 5~10달러 수준이며, 소규모 프로젝트 하나를 완성하는 데 보통 1~3달러 정도 소요됩니다. Claude.ai Pro 구독($20/월)에 포함된 Claude Code 기능(Projects 내 코딩 지원)은 별도 API 비용 없이 사용할 수 있어 입문자에게 적합합니다.

Q. 코딩을 전혀 모르는데 진짜 가능한가요?

가능합니다. 다만 코딩 지식이 있을수록 더 정밀한 결과물을 만들 수 있습니다. 비전공자라도 HTML 태그의 기본 개념(태그가 무엇인지, <div>와 <p>의 차이 정도)을 이해하고 시작하면 훨씬 빠르게 나아갈 수 있습니다. 관련 기초 개념은 Claude에게 “HTML이 뭐야, 5분 안에 설명해줘” 하고 물어봐도 됩니다.

Q. Claude Code와 ChatGPT로 코딩하는 것의 차이는요?

ChatGPT는 채팅창에서 코드를 보여주고 사용자가 직접 복사해서 파일에 붙여넣어야 합니다. Claude Code는 터미널에서 실행되며 현재 폴더의 파일을 직접 읽고, 수정하고, 생성할 수 있습니다. 즉, 중간 복사 작업 없이 AI가 실제 파일 작업을 대신해주는 것이 핵심 차이입니다.

Q. 만든 결과물이 마음에 안 들면 어떻게 하나요?

두 가지 방법이 있습니다. 첫째, 구체적인 수정 지시를 계속 내립니다. “색을 더 밝게”, “여백을 두 배로”, “글자 크기를 키워줘”처럼 피드백을 반복하면 점점 원하는 모습에 가까워집니다. 둘째, 처음부터 다시 시도합니다. 방향 자체가 틀렸다면 “지금까지 만든 거 버리고 완전히 다른 스타일로 다시 만들어줘”라고 요청하면 됩니다.

Q. 만든 웹앱에 데이터베이스를 연결할 수 있나요?

가능합니다. 초급 단계에서는 Supabase(무료 PostgreSQL 클라우드)나 Firebase(Google 무료 DB)와 연동하는 것이 일반적입니다. Claude Code에 “Supabase와 연결해서 방문자 메모를 저장하는 기능 추가해줘”라고 요청하면 연결 코드까지 작성해줍니다. 다만 환경 변수(API 키) 관리는 직접 해야 합니다.

Q. 보안 문제는 없나요?

Claude Code는 기본적으로 현재 폴더 내에서만 작동하도록 설계되어 있습니다. 단, 외부 API 키나 비밀번호를 코드 안에 직접 하드코딩하면 GitHub에 올렸을 때 노출될 수 있습니다. 반드시 .env 파일에 별도 보관하고, .gitignore에 추가하는 습관을 들이세요. 이 설정도 Claude에게 부탁하면 됩니다.

오늘 5분 실습

mkdir my-links && cd my-links && claude

링크 모음 페이지를 만들어줘. 배경은 어두운 남색(#0f172a), 카드 형태로 링크를 보여줘. 카드마다 사이트 이름, 간단한 설명, 링크 버튼이 있어야 해. 링크는 세 개: 구글(google.com), 네이버(naver.com), 유튜브(youtube.com). 반응형으로 만들어줘.

open index.html

마무리

바이브 코딩은 “코딩을 잘해야 한다”는 진입 장벽을 낮추는 패러다임 전환입니다. Claude Code 하나로 아이디어를 곧바로 동작하는 웹앱으로 바꿀 수 있고, 그 결과물을 무료로 전 세계에 공개할 수 있습니다.

물론 AI가 생성한 코드가 항상 완벽하지는 않습니다. 오류가 생기거나 원하는 대로 동작하지 않는 경우도 있습니다. 하지만 그럴 때도 해결책은 같습니다. Claude에게 오류 메시지를 그대로 붙여넣고 “이거 왜 그래, 고쳐줘”라고 말하면 됩니다.

중요한 건 시작하는 것입니다. 오늘 5분 실습부터 해보세요. 첫 번째 결과물이 완벽하지 않아도 됩니다. 바이브 코딩은 반복하면서 나아지는 과정입니다.

더 깊은 실전 학습을 원한다면 미래이음연구소(lab.duonedu.net)의 강의 프로그램을 확인해보세요. 두온교육 출판사(main.duonedu.net)에서는 AI 활용 학습 교재와 커리큘럼도 제공하고 있습니다.

Claude Code란 무엇인가

코딩을 배운 적 없어도 괜찮다. 이제는 AI에게 “이런 기능을 만들어줘”라고 말하는 것만으로 실제 동작하는 소프트웨어를 만들 수 있는 시대가 됐다. 이것이 바로 바이브 코딩(Vibe Coding)이고, 그 중심에 있는 도구가 바로 Claude Code다.

Claude Code는 Anthropic이 만든 터미널 기반 AI 코딩 에이전트다. 단순히 코드를 제안해 주는 것에서 그치지 않고, 파일을 직접 만들고, 명령어를 실행하고, 버그를 스스로 수정하는 자율적인 방식으로 동작한다. 개발자 도구처럼 생겼지만, 실제로는 비전공자가 가장 큰 수혜를 받는 도구다.

기존 AI 채팅 도구와의 차이를 명확히 짚어보자.

• ChatGPT / Claude.ai: 코드를 “보여준다” — 직접 복붙하고 실행해야 한다
• Claude Code: 코드를 “실행한다” — 파일 생성, 명령어 실행, 오류 수정까지 직접 한다

쉽게 말해, ChatGPT가 레시피를 알려준다면 Claude Code는 직접 요리해 주는 셈이다. 비전공자에게는 이 차이가 하늘과 땅 만큼 크다.

설치 및 환경 세팅 — 5분이면 끝

Claude Code를 쓰려면 두 가지가 필요하다. Node.js와 Anthropic API 키다. 순서대로 따라하면 5분 안에 끝난다.

1. Node.js 설치 확인

터미널(Mac의 경우 Terminal 앱, Windows는 PowerShell)을 열고 아래 명령어를 입력한다.

node --version

버전 번호(예: v20.0.0)가 나오면 이미 설치돼 있는 것이다. 아무것도 안 나오면 nodejs.org에서 LTS 버전을 다운로드해서 설치하면 된다.

2. Claude Code 설치

npm install -g @anthropic-ai/claude-code

설치가 완료되면 다시 확인해 본다.

claude --version

버전이 출력되면 설치 성공이다.

3. API 키 발급 및 설정

console.anthropic.com에 가입한 뒤 API Keys 메뉴에서 새 키를 발급받는다. 그 다음 터미널에서 아래처럼 환경변수로 설정한다.

Mac / Linux의 경우:

export ANTHROPIC_API_KEY="sk-ant-여기에-발급받은-키-입력"

매번 터미널 열 때마다 설정하기 번거롭다면 .zshrc 또는 .bashrc 파일에 위 줄을 추가하면 된다.

echo 'export ANTHROPIC_API_KEY="sk-ant-여기에-발급받은-키-입력"' >> ~/.zshrc
source ~/.zshrc

4. 첫 실행 테스트

claude

이 명령어를 입력하면 Claude Code가 실행된다. 환영 메시지와 함께 프롬프트가 나타나면 준비 완료다.

첫 프로젝트 시작하기

Claude Code는 특정 폴더 안에서 실행해야 한다. 이 폴더가 프로젝트의 작업 공간이 된다. 처음 시작하는 방법을 따라해 보자.

프로젝트 폴더 만들기

mkdir my-first-project
cd my-first-project
claude

Claude Code가 실행되면, 이제 자연어로 원하는 것을 말하면 된다. 예를 들어:

안녕! 여기에 간단한 HTML 파일을 만들어서 "Hello, World!"를 화면에 출력해줘.

그러면 Claude Code는 index.html 파일을 직접 생성해 준다. 생성된 파일을 브라우저로 열어보면 결과를 바로 확인할 수 있다.

CLAUDE.md — 프로젝트 설명서

Claude Code는 프로젝트 폴더에 CLAUDE.md 파일이 있으면 자동으로 읽는다. 이 파일에 프로젝트 설명, 기술 스택, 금지 사항 등을 적어두면 AI가 매번 물어보지 않아도 맥락을 이해하고 작업한다.

# 내 첫 번째 프로젝트

## 프로젝트 설명
비전공자를 위한 바이브 코딩 연습 공간

## 기술 스택
- HTML, CSS, JavaScript (순수 바닐라)
- 외부 라이브러리 최소화

## 규칙
- 코드에 한국어 주석 포함
- 파일은 항상 utf-8 인코딩

이 파일을 만들어두면 Claude Code가 프로젝트 성격을 이해하고 더 적합한 코드를 작성해 준다.

실전 실습 — 할 일 목록 앱 만들기

이론은 충분하다. 지금부터 실제로 동작하는 앱을 만들어 보자. 목표는 브라우저에서 할 일을 추가하고, 완료 표시하고, 삭제할 수 있는 Todo 앱이다.

Claude Code에게 요청하기

claude를 실행한 뒤 다음과 같이 입력한다.

할 일 목록 앱을 만들어줘.
- index.html 하나의 파일로 완성
- 할 일 추가, 완료 체크, 삭제 기능
- 디자인은 깔끔하고 모바일에서도 잘 보이게
- 새로고침해도 데이터가 유지되도록 localStorage 사용

Claude Code는 이 요청을 받아서 index.html 파일을 생성하고, CSS와 JavaScript까지 모두 포함된 완성본을 만들어준다. 터미널에서 진행 상황을 실시간으로 확인할 수 있다.

결과물 확인 및 수정 요청

파일이 생성되면 브라우저로 열어보자.

open index.html

디자인이 마음에 들지 않는다면 그냥 말하면 된다.

배경색을 연한 보라색 계열로 바꿔주고, 버튼을 더 둥글게 만들어줘.

완료된 항목에 취소선이 없다면 이렇게 요청할 수도 있다.

완료 체크한 항목에 취소선(strikethrough)을 추가하고 텍스트 색상을 회색으로 바꿔줘.

이런 방식으로 대화하듯이 앱을 다듬어 나가는 것이 바이브 코딩의 핵심이다. 코드를 직접 건드릴 필요가 없다.

기능 추가 — 마감일 설정

각 할 일 항목에 마감일을 입력할 수 있는 날짜 선택기를 추가해줘.
마감일이 오늘이면 빨간색, 내일이면 주황색으로 표시해줘.

이렇게 자연어로 기능을 추가하다 보면, 어느새 꽤 복잡한 앱이 완성돼 있다는 걸 깨닫게 된다.

비전공자가 꼭 알아야 할 팁 5가지

1. 구체적으로 말할수록 결과가 좋다

“버튼 만들어줘”보다 “파란색 배경에 흰 글씨로 '저장' 버튼을 만들어줘, 클릭하면 폼 데이터를 저장해줘”처럼 구체적으로 요청하면 훨씬 원하는 결과에 가까워진다.

2. 오류 메시지를 그대로 붙여넣어라

뭔가 안 됐을 때 긴 설명 없이 오류 메시지만 복사해서 붙여넣어도 된다.

이 오류가 났어:
TypeError: Cannot read properties of null (reading 'addEventListener')
    at index.html:45:30

Claude Code가 오류를 분석하고 직접 고쳐준다.

3. /undo 명령으로 되돌리기

Claude Code가 수정한 내용이 마음에 들지 않으면 /undo를 입력하면 이전 상태로 돌아간다. 겁내지 말고 과감하게 시도해 보자.

4. 한 번에 너무 많이 요청하지 마라

10가지 기능을 한꺼번에 요청하면 복잡도가 높아져 오류가 생기기 쉽다. 기능 하나씩, 단계별로 요청하는 것이 훨씬 안정적이다.

5. /status로 현재 상태 확인

어느 파일이 수정됐는지 모를 때는 /status 명령으로 변경 사항 목록을 볼 수 있다. Git과 연동돼 있다면 변경된 파일을 바로 확인할 수 있다.

자주 묻는 질문

Q. API 비용이 많이 드나요?

Claude Sonnet 기준으로 일반적인 개인 프로젝트 수준이라면 한 달에 5~15달러 정도면 충분하다. 처음에는 사용량 한도를 낮게 설정해 두고 시작하는 것을 권장한다. Anthropic 콘솔에서 월 한도를 설정할 수 있다.

Q. Python이나 JavaScript를 전혀 몰라도 되나요?

완전히 몰라도 시작할 수 있다. 하지만 기초적인 개념(변수가 뭔지, 함수가 뭔지 정도)을 알면 Claude Code와의 대화가 훨씬 매끄러워진다. 바이브 코딩을 하면서 자연스럽게 배우게 되는 경우가 많다.

Q. 만든 앱을 다른 사람도 볼 수 있게 배포할 수 있나요?

물론이다. Claude Code에게 “이 앱을 Vercel이나 Netlify에 배포하는 방법을 알려주고 필요한 파일을 만들어줘”라고 하면 배포 과정까지 도와준다. 정적 웹사이트는 무료로 배포 가능하다.

Q. 만든 코드를 내가 직접 수정할 수 있나요?

당연히 가능하다. Claude Code가 만든 파일은 일반 텍스트 파일이라 VS Code나 메모장으로 직접 열어서 수정할 수 있다. 코드를 읽고 이해하게 되면 점점 직접 손을 대는 범위도 넓어진다.

Q. 회사 내부 정보를 다루는 앱을 만들 때 보안이 걱정됩니다

Claude Code는 로컬 환경에서 실행되고, 코드 작성을 위해 파일 내용 일부를 API에 전송한다. 민감한 데이터(비밀번호, 개인정보 등)는 코드에 직접 입력하지 말고 환경변수로 관리하도록 Claude Code에게 요청하면 된다.

오늘 5분 실습

지금 당장 할 수 있는 실습이다. 5분이면 충분하다.

1. 터미널을 열고 mkdir vibe-test && cd vibe-test 입력
2. claude 실행
3. 다음 문장을 그대로 복붙해서 입력:
   지금 현재 시각을 크게 보여주는 디지털 시계 HTML 페이지를 만들어줘. 배경은 어둡게, 숫자는 밝게 해줘.
4. 생성된 index.html을 브라우저로 열기: open index.html
5. 마음에 안 드는 부분을 자연어로 수정 요청해보기

이 5분짜리 실습을 완료하는 순간, 당신은 이미 바이브 코더다.

마무리

Claude Code는 단순한 개발 도구가 아니다. 비전공자가 아이디어를 현실로 만들 수 있는 가장 빠른 길이다. 코드를 배우는 데 수년을 투자하지 않아도, 지금 당장 원하는 것을 만들 수 있다.

물론 Claude Code가 만능은 아니다. 복잡한 기업용 시스템이나 고성능이 요구되는 서비스를 만들려면 여전히 전문 개발자가 필요하다. 하지만 아이디어 검증, 개인 도구 제작, 소규모 서비스 개발에서는 바이브 코딩이 압도적으로 효율적이다.

더 많은 바이브 코딩 실습과 교육 콘텐츠는 두온교육(main.duonedu.net)과 미래이음연구소(lab.duonedu.net)에서 만나볼 수 있다. 지금 바로 시작해보자.