비전공자도 하루 만에 앱 만드는 Claude Code 실전 튜토리얼

코딩을 한 번도 배워본 적 없는 분들이 Claude Code 하나로 실제 작동하는 웹 앱을 만들고 있습니다. 이것이 바이브 코딩(Vibe Coding)의 핵심입니다. 오늘은 비전공자가 Claude Code를 처음 설치하고, 실제 프로젝트를 완성하기까지의 전 과정을 명령어 하나하나 함께 따라가며 익혀봅니다.

Claude Code란 무엇인가 — 비전공자 눈높이 설명

Claude Code는 Anthropic이 만든 AI 기반 코딩 도우미입니다. 터미널(명령 프롬프트)에서 실행되며, 여러분이 한국어로 원하는 것을 말하면 Claude Code가 직접 파일을 만들고, 코드를 작성하고, 에러를 고쳐줍니다.

기존 ChatGPT나 Claude.ai 웹 버전과의 차이는 단순합니다. 웹 버전은 코드를 보여주기만 합니다. Claude Code는 실제로 여러분 컴퓨터의 파일 시스템에 접근해 직접 작업합니다. 파일 생성, 수정, 터미널 명령 실행, 에러 수정까지 전부 자동으로 처리합니다.

바이브 코딩(Vibe Coding)이라는 개념은 2025년 초 Andrej Karpathy가 처음 언급했습니다. 핵심은 코드의 세세한 문법을 외우는 대신, 원하는 결과를 자연어로 설명하고 AI가 구현하는 방식입니다. 실제로 비전공자들이 Claude Code로 업무 자동화 도구, 포트폴리오 사이트, 간단한 데이터 분석 스크립트를 하루 만에 완성하고 있습니다.

바이브 코딩이 비전공자에게 유리한 이유 3가지

• 문법 암기 불필요: Python, JavaScript 문법을 몰라도 원하는 것을 설명하면 됩니다.
• 에러 자동 해결: 코드 실행 중 에러가 나면 Claude Code가 스스로 원인을 분석하고 수정합니다.
• 맥락 유지: 대화가 이어질수록 프로젝트 전체 구조를 이해하고 일관성 있게 코드를 추가합니다.

설치 완벽 가이드 — Node.js부터 Claude Code까지

Claude Code는 Node.js 환경 위에서 실행됩니다. 순서대로 따라오면 10분 안에 설치가 완료됩니다.

1단계: Node.js 설치 확인

터미널(Mac: 터미널 앱, Windows: PowerShell)을 열고 아래 명령어를 입력합니다.

node --version

v18.0.0 이상의 버전이 출력되면 이미 설치되어 있습니다. 명령어를 찾을 수 없다는 오류가 나면 nodejs.org에서 LTS 버전을 다운로드해 설치합니다.

2단계: Claude Code 설치

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

설치 후 버전을 확인합니다.

claude --version

1.x.x 형태의 버전이 보이면 설치 성공입니다.

3단계: API 키 설정 및 로그인

Claude Code를 처음 실행하면 Anthropic 계정 로그인을 요청합니다.

claude

브라우저가 열리면서 claude.ai로 이동합니다. Claude Pro 구독자라면 그대로 로그인합니다. API 키를 직접 사용하는 경우 환경변수를 설정합니다.

export ANTHROPIC_API_KEY=sk-ant-api03-여기에키입력

Mac/Linux에서 영구 설정하려면 ~/.zshrc 또는 ~/.bashrc에 위 줄을 추가합니다.

echo 'export ANTHROPIC_API_KEY=sk-ant-api03-여기에키입력' >> ~/.zshrc
source ~/.zshrc

첫 번째 프로젝트 시작 — 폴더부터 실행까지

실제로 작동하는 첫 프로젝트를 만들어봅니다. 예제는 개인 독서 기록 앱입니다. 책 제목, 저자, 별점, 한 줄 감상을 저장하고 볼 수 있는 웹 페이지를 만듭니다.

프로젝트 폴더 생성 및 진입

mkdir my-book-tracker
cd my-book-tracker
claude

Claude Code가 실행되면 프롬프트 화면이 나타납니다. 이제 한국어로 원하는 것을 설명합니다.

첫 번째 프롬프트 입력

독서 기록을 저장하고 보여주는 웹 앱을 만들어줘. HTML, CSS, JavaScript만 사용해서 index.html 하나로 완성되는 형태로 해줘. 책 제목, 저자, 별점(1~5), 한 줄 감상을 입력하고 저장할 수 있어야 해. 저장된 기록은 카드 형태로 보이고, 브라우저를 닫아도 데이터가 유지되도록 localStorage를 사용해줘.

Claude Code는 이 설명을 바탕으로 자동으로 index.html 파일을 생성합니다. 완료 메시지가 뜨면 파일을 브라우저로 열어봅니다.

open index.html

Windows라면:

start index.html

화면에 독서 기록 입력 폼과 카드 목록이 나타납니다. 실제로 데이터를 입력하고 새로고침해도 유지됩니다. 이것이 바이브 코딩의 시작입니다.

기능 추가 요청 — 대화를 이어가기

Claude Code는 대화 맥락을 기억합니다. 같은 세션에서 계속 요청할수록 프로젝트를 더 잘 이해합니다.

별점 순으로 정렬하는 버튼을 추가해줘. 그리고 각 카드에 삭제 버튼도 넣어줘.

전체적인 디자인을 다크 테마로 바꿔줘. 배경은 #1a1a2e, 카드는 #16213e 색상을 써줘.

이렇게 대화를 이어가며 기능을 확장합니다. 코드를 한 줄도 직접 수정하지 않아도 됩니다.

결과를 바꾸는 프롬프트 작성법

Claude Code를 잘 쓰는 핵심은 프롬프트입니다. 같은 요청도 어떻게 표현하느냐에 따라 결과가 크게 달라집니다.

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

나쁜 프롬프트	좋은 프롬프트
홈페이지 만들어줘	프리랜서 디자이너 포트폴리오 사이트를 만들어줘. 상단 네비게이션, 히어로 섹션(이름+직업+CTA 버튼), 작업물 갤러리(6개 카드), 연락처 폼으로 구성해줘. HTML/CSS/JS 단일 파일로.
에러 고쳐줘	콘솔에 “TypeError: Cannot read properties of undefined (reading 'map')” 에러가 나. 데이터를 불러오는 fetchData 함수 쪽 문제인 것 같아. 확인하고 수정해줘.
빠르게 해줘	파일 용량을 줄이고 싶어. 이미지는 lazy loading 적용하고, CSS는 불필요한 부분을 제거해줘. 변경 전후 줄 수를 알려줘.

효과적인 프롬프트 3원칙

1. 목적 + 맥락 + 제약조건을 함께 씁니다. “무엇을 / 어떤 상황에서 / 어떤 조건으로”가 명확할수록 결과가 좋습니다.
2. 구체적인 숫자와 스펙을 포함합니다. “카드 몇 개”, “어떤 색상”, “파일 몇 개”처럼 수치가 있으면 훨씬 정확합니다.
3. 단계별로 나눠 요청합니다. 한 번에 너무 많은 기능을 요청하면 품질이 떨어집니다. 핵심 기능부터 만들고 확장합니다.

CLAUDE.md로 프로젝트 맥락 저장하기

프로젝트 폴더에 CLAUDE.md 파일을 만들면 Claude Code가 매번 이 파일을 읽어 프로젝트 맥락을 유지합니다.

# 독서 기록 앱 프로젝트

## 기술 스택
- HTML5, CSS3, Vanilla JavaScript
- localStorage 사용 (서버 없음)
- 외부 라이브러리 사용 금지

## 디자인 원칙
- 다크 테마: 배경 #1a1a2e, 카드 #16213e
- 폰트: 시스템 기본 폰트
- 모바일 우선 반응형 디자인

## 금지 사항
- jQuery 등 외부 라이브러리 추가 금지
- 빌드 도구(webpack 등) 사용 금지

이 파일이 있으면 Claude Code는 새 세션을 시작해도 프로젝트의 규칙과 스타일을 기억합니다.

AntiGravity와 함께 쓰면 달라지는 것들

AntiGravity는 Claude Code와 함께 사용하는 AI 개발 보조 도구입니다. Claude Code가 코드를 작성한다면, AntiGravity는 개발 환경 설정, 배포, 외부 서비스 연동 같은 작업을 자동화합니다.

AntiGravity가 해결하는 문제

비전공자가 Claude Code로 앱을 만들 때 가장 막히는 지점은 배포입니다. 로컬에서 잘 되는데 인터넷에 올리려면 서버, 도메인, SSL 인증서 등 복잡한 과정이 필요합니다. AntiGravity는 이 부분을 단순화합니다.

# AntiGravity CLI 설치
npm install -g @antigravity/cli

# 프로젝트 초기화
ag init

# 원클릭 배포
ag deploy

몇 줄의 명령어로 로컬 프로젝트가 공개 URL을 가진 웹 서비스로 변환됩니다.

Claude Code + AntiGravity 실전 워크플로우

1. Claude Code로 앱 기능 구현 (로컬 개발)
2. ag init으로 프로젝트 설정 자동화
3. ag deploy로 배포
4. 배포된 URL을 Claude Code에 알려주고 추가 수정 요청
5. ag deploy --update로 변경사항 반영

이 워크플로우가 정착되면 아이디어에서 실제 서비스까지 하루 안에 가능합니다. 미래이음연구소 수강생 중에는 이 방식으로 사내 업무 자동화 도구를 3일 만에 배포한 분도 있습니다.

AntiGravity의 주요 기능

• 환경 감지: HTML 단일 파일인지, Node.js 앱인지, Python 앱인지 자동으로 파악해 적절한 배포 방식을 선택합니다.
• HTTPS 자동 설정: SSL 인증서를 자동으로 발급하고 갱신합니다.
• 도메인 연결: 커스텀 도메인을 DNS 설정 없이 몇 분 만에 연결합니다.
• 로그 모니터링: ag logs 명령어로 실시간 에러 추적이 가능합니다.

자주 묻는 질문 Q&A

Q. 코딩을 전혀 모르는데 Claude Code를 쓸 수 있나요?

A. 네, 가능합니다. 단, 기본 개념 몇 가지는 알면 훨씬 수월합니다. “파일이란 무엇인가”, “폴더 구조란 무엇인가”, “브라우저에서 실행되는 것과 서버에서 실행되는 것의 차이” 정도만 이해해도 충분합니다. 미래이음연구소에서는 이 기초 개념부터 시작하는 커리큘럼을 운영하고 있습니다.

Q. Claude Code 사용 비용은 얼마나 드나요?

A. Claude Pro 구독($20/월)에 포함된 사용량으로 Claude Code를 쓸 수 있습니다. 하루 평균 2~3시간 사용 기준으로 Pro 구독으로 충분한 경우가 많습니다. 대규모 프로젝트나 팀 사용 시에는 API 키 방식이 더 효율적입니다. API 방식은 토큰 사용량에 따라 과금되며, 중간 규모 프로젝트 기준 월 3~10달러 수준입니다.

Q. 만든 코드를 Claude Code가 틀리게 작성하면 어떻게 하나요?

A. 에러 메시지를 그대로 복사해서 Claude Code에게 붙여넣으면 됩니다. “이 에러가 났어. 고쳐줘”라고 하면 원인을 분석하고 수정합니다. 중요한 것은 에러를 두려워하지 않는 것입니다. 에러는 Claude Code에게 더 나은 코드를 요청할 기회입니다.

Q. 만든 앱을 다른 사람에게 보여주려면 어떻게 해야 하나요?

A. 가장 간단한 방법은 GitHub Pages를 이용하는 것입니다. Claude Code에게 “GitHub Pages에 배포하는 방법을 알려줘”라고 하면 단계별로 안내해줍니다. AntiGravity를 쓰면 더 간단합니다. ag deploy 명령어 하나로 공개 URL이 생성됩니다.

Q. Python, JavaScript 중 어떤 언어를 써야 하나요?

A. 용도에 따라 다릅니다. 웹 페이지(화면이 있는 앱)는 HTML/CSS/JavaScript가 기본입니다. 데이터 분석, 자동화 스크립트, API 연동 작업은 Python이 더 적합합니다. Claude Code에게 “내가 만들고 싶은 것은 ~인데 어떤 언어가 좋아?”라고 물어보면 상황에 맞게 추천해줍니다.

Q. 회사 업무 자동화에도 쓸 수 있나요?

A. 매우 효과적입니다. 엑셀 파일 자동 처리, 이메일 자동 발송, 웹사이트 데이터 수집, 반복 업무 스케줄링 등에 활발하게 활용됩니다. 실제로 비전공자 직장인들이 Claude Code로 업무 시간을 주당 5~10시간 절약하는 사례가 많습니다.

오늘 바로 시작하는 5분 실습

지금 당장 Claude Code를 처음 써보는 분을 위한 가장 빠른 시작 방법입니다.

1. Node.js 설치 확인

   node --version

   없으면 nodejs.org에서 LTS 버전 설치

2. Claude Code 설치

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

3. 실습 폴더 만들기

   mkdir vibe-test && cd vibe-test

4. Claude Code 실행 및 첫 프로젝트 요청

   claude

   실행 후 입력:

   오늘 날짜와 요일을 크게 보여주는 HTML 페이지를 만들어줘. 배경은 어두운 색으로 하고 시간도 실시간으로 보이게 해줘.

5. 결과 확인

   open index.html

   실시간 시계가 표시되는 페이지가 완성됩니다.

5분 안에 첫 번째 바이브 코딩 결과물이 완성됩니다. 이제 원하는 기능을 말로 설명하며 계속 발전시켜 나가면 됩니다.

---

바이브 코딩은 코딩을 배우는 방식이 아니라, AI와 협력해 결과를 만드는 새로운 창작 방식입니다. Claude Code는 그 중심에 있는 도구입니다. 비전공자라는 제약은 더 이상 한계가 되지 않습니다.

더 체계적인 학습을 원한다면 두온교육(main.duonedu.net)의 AI 활용 교육 과정과 미래이음연구소(lab.duonedu.net)의 바이브 코딩 실전 강의를 확인해보세요. 이신우 소장이 직접 Claude Code와 AntiGravity를 활용한 실전 프로젝트 중심으로 강의를 진행합니다. 강의 문의: 010-3343-4000