코딩 몰라도 됩니다 - Claude Code로 나만의 웹앱 만드는 법 (비개발자 실전 가이드)

바이브코딩이란? 코딩 없이 코드를 만드는 새로운 방법

바이브코딩(Vibe Coding)은 AI에게 자연어로 원하는 것을 설명하면, AI가 코드를 자동으로 작성해주는 개발 방식입니다. 2025년 Andrej Karpathy(전 Tesla AI 디렉터)가 처음 사용한 용어로, "코드를 작성하는 게 아니라 분위기(vibe)를 전달하는 것"이라는 의미입니다. 프로그래밍 언어를 몰라도, 한국어로 "로그인 기능이 있는 할 일 관리 앱을 만들어줘"라고 말하면 AI가 전체 코드를 생성합니다.

이전의 노코드 도구(Bubble, Webflow)와 결정적 차이가 있습니다. 노코드는 제공되는 블록 안에서만 만들 수 있지만, 바이브코딩은 제약 없이 어떤 기능이든 자연어로 요청할 수 있습니다. 실제로 생성되는 것은 완전한 소스코드이므로, 나중에 전문 개발자가 수정하거나 확장하는 것도 가능합니다.

현재 바이브코딩에 가장 강력한 도구는 Claude Code(Anthropic), Cursor(IDE), Bolt.new(브라우저), Replit Agent입니다. 이 글에서는 가장 범용적이고 강력한 Claude Code를 사용하여, 프로그래밍 경험이 전혀 없는 사람이 실제 웹앱을 만드는 전 과정을 안내합니다.

바이브코딩 워크플로우 — 아이디어에서 배포까지

Claude Code 설치부터 첫 실행까지 (10분 완성)

Claude Code를 사용하려면 두 가지만 준비하면 됩니다. Node.js와 Claude 계정입니다. Node.js는 nodejs.org에서 LTS 버전을 다운로드하여 설치합니다(다음, 다음, 완료 클릭만 하면 됩니다). Claude 계정은 claude.ai에서 가입하고, Claude Pro 또는 Max 플랜을 구독합니다(월 $20). 무료 플랜으로는 Claude Code를 사용할 수 없습니다.

설치는 터미널에서 명령어 두 줄입니다. Mac은 터미널 앱을, Windows는 PowerShell을 엽니다:

# Claude Code 설치
npm install -g @anthropic-ai/claude-code

# 설치 확인
claude --version

# 프로젝트 폴더 만들고 시작
mkdir my-first-app
cd my-first-app
claude

claude 명령을 실행하면 브라우저에서 Claude 계정 인증 화면이 열립니다. 로그인하면 터미널에 대화 인터페이스가 나타납니다. 이제 한국어로 대화하면 됩니다.

첫 실행에서 바로 시도해볼 수 있는 명령입니다. 터미널의 Claude 대화창에 다음과 같이 입력해보세요: "간단한 할 일 관리 웹앱을 만들어줘. 할 일 추가, 완료 체크, 삭제 기능이 있으면 돼. React와 Tailwind CSS를 써줘." Claude가 파일을 생성하고, 필요한 패키지를 설치하고, 개발 서버를 실행하는 것까지 자동으로 수행합니다. 브라우저에서 localhost:3000을 열면 실제 작동하는 앱을 확인할 수 있습니다.

프롬프트 작성법 - AI에게 잘 시키는 5가지 원칙

바이브코딩의 품질은 프롬프트(지시)의 구체성에 달려 있습니다. 원칙 1: 최종 결과물을 먼저 설명하세요. "앱 만들어줘" 대신 "사용자가 이메일로 로그인하고, 일일 운동 기록을 입력하면 주간 차트로 보여주는 웹앱을 만들어줘"처럼 완성된 모습을 구체적으로 설명합니다. 원칙 2: 기술 스택을 지정하세요. "Next.js 14, TypeScript, Tailwind CSS, Supabase를 사용해줘"처럼 명시하면 AI가 일관된 코드를 생성합니다.

원칙 3: 한 번에 하나씩 요청하세요. "로그인 + 대시보드 + 결제 + 알림을 모두 만들어줘"보다는 먼저 "로그인 페이지를 만들어줘"를 완성한 뒤 "이제 대시보드를 추가해줘"로 순서대로 진행합니다. 한 번에 너무 많은 것을 요청하면 AI가 혼란스러워하고 코드 품질이 떨어집니다. 원칙 4: 수정 요청은 구체적으로. "이상해" 대신 "로그인 버튼의 크기를 더 키우고, 색상을 파란색(#3B82F6)으로 바꿔줘"처럼 정확히 지시합니다.

원칙 5: 에러가 나면 에러 메시지를 그대로 붙여넣으세요. 브라우저에서 에러가 발생하면 개발자 도구(F12)의 Console 탭에서 빨간 에러 메시지를 복사하여 Claude에게 보내면, 원인을 분석하고 수정합니다. 실전 프롬프트 예시입니다:

좋은 프롬프트:
"Next.js 14 + Supabase로 블로그 CMS를 만들어줘.
- 마크다운 에디터로 글 작성
- 카테고리별 필터링
- 반응형 디자인
- 다크모드 지원
관리자만 글을 작성할 수 있게 Supabase Auth로 인증해줘."

나쁜 프롬프트:
"블로그 만들어줘"

실전: 고객 피드백 수집 앱을 30분 만에 만들기

실제로 비즈니스에 쓸 수 있는 앱을 만들어봅시다. 고객이 별점과 의견을 남기면, 관리자가 대시보드에서 확인하는 피드백 수집 앱입니다. Claude Code에 다음과 같이 입력합니다: "고객 피드백 수집 웹앱을 만들어줘. Next.js 14, TypeScript, Tailwind CSS, Supabase를 사용해. 기능: 1) 고객용 피드백 폼 (별점 1-5, 텍스트 의견, 이메일 선택입력) 2) 관리자 대시보드 (평균 별점, 최근 피드백 목록, 별점별 필터) 3) Supabase Auth로 관리자 로그인"

Claude가 약 2-3분간 파일을 생성합니다. 프로젝트 구조, 데이터베이스 스키마, API 라우트, 프론트엔드 컴포넌트, 환경 변수 설정까지 모두 자동으로 만들어집니다. 이 과정에서 Claude는 중간중간 "Supabase 프로젝트를 만들고 URL과 키를 .env.local에 설정해주세요"와 같이 사용자가 해야 할 작업을 안내합니다. 안내를 따라 Supabase에서 프로젝트를 만들고 키를 복사해서 붙여넣으면 됩니다.

앱이 실행되면 추가 요청으로 개선합니다. "피드백이 새로 등록되면 관리자에게 이메일 알림을 보내줘. Resend API를 사용해." "대시보드에 최근 30일 피드백 추이를 보여주는 차트를 추가해줘. Recharts 라이브러리를 써줘." "피드백 폼에 감사 메시지 애니메이션을 추가해줘." 이런 식으로 한 기능씩 추가하면 30분 안에 상용 수준의 앱이 완성됩니다.

완성된 앱을 배포하려면 Claude에게 "이 앱을 Vercel에 배포하는 방법을 알려줘"라고 물으면 됩니다. Vercel 계정을 만들고 GitHub에 코드를 올린 뒤 연결하면, vercel.app 도메인으로 전 세계에서 접속 가능한 서비스가 됩니다. 커스텀 도메인 연결도 Vercel 대시보드에서 클릭 몇 번으로 완료됩니다.

자주 묻는 질문 (FAQ)

Q. 프로그래밍을 전혀 몰라도 정말 가능한가요? A. 네, 가능합니다. 다만 완전히 0에서 시작하면 터미널 사용법, 파일 구조 이해 등에 처음에는 30분-1시간 정도 적응 시간이 필요합니다. Claude가 모든 명령어를 알려주므로 따라하기만 하면 됩니다. HTML, CSS, JavaScript의 기본 개념(각 5분 분량)만 유튜브로 보고 오면 훨씬 수월합니다.

Q. Claude Code 비용이 얼마인가요? A. Claude Pro 구독(월 $20)이 필요합니다. 이 구독으로 Claude Code를 무제한 사용할 수 있습니다(일일 사용량 제한은 있지만 일반적인 프로젝트에는 충분합니다). 대안으로 Cursor(월 $20)는 GUI 기반이라 터미널이 익숙하지 않은 분에게 더 편할 수 있습니다.

Q. Claude Code와 Cursor 중 뭘 써야 하나요? A. 터미널 입력이 편하고 대규모 프로젝트를 다루려면 Claude Code, GUI 편집기가 편하고 실시간 코드 제안이 필요하면 Cursor를 추천합니다. 둘 다 월 $20이며, 두 도구를 함께 사용하는 개발자도 많습니다. 완전한 비개발자라면 Cursor가 진입 장벽이 약간 더 낮습니다.

이 글이 도움이 되셨다면 공유해 주세요.