Claude Code 실전 입문: 비전공자를 위한 웹앱 개발 완전 정복 가이드

Claude Code란 무엇인가

Claude Code는 Anthropic이 만든 AI 기반 코딩 도우미입니다. 터미널(명령 프롬프트)에서 실행하면, 코드 작성부터 파일 수정, 오류 디버깅까지 모든 개발 작업을 자연어로 지시할 수 있습니다. 비전공자에게 가장 큰 장벽이었던 “코드를 모르면 개발을 못 한다”는 공식을 Claude Code가 완전히 뒤집습니다.

기존 코딩 교육은 Python 기초, 변수, 반복문, 함수… 수개월을 배워야 간단한 프로그램 하나를 만들 수 있었습니다. Claude Code는 그 과정을 완전히 건너뜁니다. “로그인 기능이 있는 웹사이트 만들어줘”라고 말하면, Claude Code가 실제로 동작하는 코드를 작성합니다.

2026년 현재, Claude Code는 Anthropic API 구독(Claude Pro 또는 API 키) 없이도 무료로 사용할 수 있는 기본 기능을 제공합니다. 더 강력한 기능과 더 긴 컨텍스트 창을 사용하려면 API 키가 필요합니다. 핵심은 코드 문법을 외우는 것이 아니라 원하는 것을 정확하게 표현하는 능력입니다. 이것이 바이브 코딩의 출발점입니다.

설치와 초기 환경 설정

macOS 설치 방법

macOS에서는 Node.js가 먼저 설치되어 있어야 합니다. 터미널을 열고 다음 명령어를 순서대로 실행하세요.

# Node.js 설치 여부 확인
node --version

# Node.js가 없다면 Homebrew로 설치
brew install node

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

# 설치 확인
claude --version

API 키 설정은 Anthropic 공식 사이트(console.anthropic.com)에서 계정을 만들고 API 키를 발급받은 후 진행합니다.

# API 키 설정 (터미널에서 실행)
export ANTHROPIC_API_KEY="sk-ant-여기에API키입력"

# 영구 적용 (zsh 기준)
echo 'export ANTHROPIC_API_KEY="sk-ant-여기에API키입력"' >> ~/.zshrc
source ~/.zshrc

Windows 설치 방법

Windows는 WSL2(Windows Subsystem for Linux)를 사용하거나, Node.js를 직접 설치하는 방법 두 가지가 있습니다. 개발 환경의 안정성을 고려하면 WSL2를 추천합니다.

# PowerShell (관리자 권한)에서 WSL2 설치
wsl --install

# WSL2 Ubuntu 터미널에서 Node.js 설치
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

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

Windows에서 설치가 완료되면 WSL2 Ubuntu 터미널을 기본으로 사용합니다. 이후 모든 명령어는 동일하게 적용됩니다.

첫 번째 실습 — 할 일 관리 앱 만들기

설치가 완료됐다면 바로 실전으로 들어갑니다. 비전공자가 처음 만들기 좋은 앱은 간단한 할 일(Todo) 관리 앱입니다. HTML, CSS, JavaScript만으로 동작하는 버전을 Claude Code와 함께 만들어보겠습니다.

프로젝트 폴더 생성 및 Claude Code 시작

# 바탕화면에 프로젝트 폴더 생성
mkdir ~/Desktop/my-todo-app
cd ~/Desktop/my-todo-app

# Claude Code 시작
claude

Claude Code를 시작하면 대화 프롬프트가 나타납니다. 여기에 한국어로 원하는 것을 말하면 됩니다.

Claude Code에게 앱 만들기를 요청하는 방법

아래 텍스트를 그대로 입력해보세요.

할 일 관리 앱을 만들어줘.
요구사항:
- index.html 파일 하나로 동작
- 할 일 추가, 완료 체크, 삭제 기능
- 로컬스토리지에 저장해서 새로고침해도 유지
- 디자인은 모던하고 깔끔하게
- 한국어 인터페이스

Claude Code가 index.html 파일을 생성합니다. 완료되면 해당 파일을 브라우저로 열면 바로 동작합니다.

# macOS에서 브라우저로 바로 열기
open index.html

# Windows(WSL2)에서 열기
explorer.exe index.html

처음에 디자인이나 기능이 마음에 들지 않으면 그냥 말하면 됩니다. Claude Code는 수정 요청에도 즉시 반응합니다.

# 디자인 수정 요청
배경색을 어두운 테마로 바꿔줘. 폰트는 Noto Sans KR 사용.

# 기능 추가 요청
마감일 설정 기능을 추가해줘. 마감일이 지난 항목은 빨간색으로 표시.

# 오류 수정 요청
삭제 버튼을 눌렀을 때 첫 번째 항목만 삭제되는 버그가 있어. 고쳐줘.

실전에서 자주 쓰는 명령어 모음

Claude Code를 쓰다 보면 특정 패턴의 명령이 반복됩니다. 비전공자가 알아두면 편한 실전 명령어를 정리합니다.

# 현재 프로젝트 구조 파악 요청
이 프로젝트의 파일 구조를 설명해줘. 각 파일이 어떤 역할을 하는지 알려줘.

# 특정 기능 추가
사용자 로그인 기능을 추가해줘. 이메일과 비밀번호로 로그인, Firebase Auth 사용.

# 오류 메시지 디버깅
터미널에 다음 오류가 나와: [오류 메시지 붙여넣기]. 원인과 해결 방법 알려줘.

# 코드 설명 요청
app.js 파일의 30번째 줄부터 50번째 줄까지 코드를 한국어로 설명해줘.

# 테스트 코드 작성
현재 작성된 함수들에 대한 단위 테스트를 작성해줘. Jest 사용.

# 배포 준비
이 앱을 Vercel에 배포하려면 어떻게 해야 해? 단계별로 알려줘.

슬래시(/) 명령어도 유용합니다.

/help          # 도움말 보기
/clear         # 대화 기록 초기화
/status        # 현재 상태 확인
/compact       # 긴 대화를 요약해서 컨텍스트 절약
/model         # 사용 모델 변경

비전공자를 위한 핵심 팁 5가지

1. 요구사항을 구체적으로 말하기

“웹사이트 만들어줘”보다 “음식 주문 사이트 만들어줘. 메뉴 목록 페이지, 장바구니, 주문 완료 페이지가 필요하고 모바일에서도 잘 보여야 해”가 훨씬 좋은 결과를 냅니다. 막연한 요청은 막연한 결과를 낳습니다. Claude Code는 요청의 품질만큼 결과물을 돌려줍니다.

2. 한 번에 하나씩 추가하기

처음부터 복잡한 기능을 한꺼번에 요청하면 코드가 복잡해지고 오류도 많아집니다. 기본 구조 먼저, 기능은 하나씩 추가하는 방식이 효율적입니다. 이것이 바이브 코딩의 핵심 리듬입니다. 작게 시작해서 빠르게 반복하세요.

3. 오류가 나면 그냥 붙여넣기

터미널이나 브라우저 콘솔에 오류 메시지가 뜨면 당황하지 말고 그 내용을 통째로 Claude Code에 붙여넣으세요. “이 오류 어떻게 고쳐?”라고 물으면 대부분 해결됩니다. 오류 메시지를 해석하지 않아도 됩니다. 전달만 하면 Claude Code가 분석합니다.

4. 버전 관리는 Git으로

코드가 잘 동작하는 시점마다 Git으로 저장해두세요. Claude Code가 잘못된 방향으로 수정해도 이전 상태로 되돌릴 수 있습니다.

# Git 초기화 및 첫 커밋
git init
git add .
git commit -m "초기 버전: 할 일 관리 앱 완성"

# 기능 추가 후 저장
git add .
git commit -m "마감일 기능 추가"

5. /compact를 자주 활용하기

Claude Code와 대화가 길어지면 컨텍스트(기억)가 꽉 차서 응답 품질이 떨어집니다. /compact 명령으로 대화를 요약하면 토큰을 절약하면서 맥락을 유지할 수 있습니다. 특히 한 세션에서 오래 작업할 때 주기적으로 실행하는 습관을 들이세요.

자주 묻는 질문 Q&A

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

A. 네, 가능합니다. 단, “아무것도 몰라도 된다”는 아닙니다. 파일이 무엇인지, 폴더 구조가 무엇인지, 브라우저와 서버의 차이 정도는 이해하면 훨씬 효율적으로 사용할 수 있습니다. 기초 개념 1-2일만 공부하면 Claude Code 효과가 극대화됩니다.

Q. 만든 앱을 실제로 인터넷에 올리려면 어떻게 하나요?

A. 가장 쉬운 방법은 Vercel 또는 Netlify입니다. GitHub에 코드를 올리고 Vercel과 연결하면 자동으로 배포됩니다. Claude Code에게 “Vercel 배포 방법 알려줘”라고 하면 단계별 가이드를 줍니다.

# Vercel CLI 설치
npm install -g vercel

# 배포 (프로젝트 폴더에서)
vercel

# 이후 vercel.com 대시보드에서 도메인 연결 가능

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

A. Anthropic API는 사용량 기반 과금입니다. 입력 토큰과 출력 토큰에 따라 비용이 발생합니다. claude-3-5-sonnet 기준으로 일반적인 개인 프로젝트 개발에는 월 10-30달러 정도면 충분합니다. Claude Pro($20/월) 구독도 합리적인 선택입니다.

Q. Claude Code가 만들어준 코드를 내가 직접 수정할 수 있나요?

A. 물론입니다. Claude Code가 생성한 코드는 일반 텍스트 파일이라 VS Code나 메모장으로 직접 수정할 수 있습니다. 수정 후 다시 Claude Code에 보여주면서 “여기서부터 계속해줘”라고 하면 됩니다.

Q. AntiGravity는 Claude Code와 다른 도구인가요?

A. AntiGravity는 Claude Code 위에서 동작하는 워크플로우 자동화 레이어입니다. 반복적인 작업을 자동화하거나, 여러 AI 도구를 조합해서 사용할 때 AntiGravity가 강력합니다. 처음에는 Claude Code만 익히고, 이후 AntiGravity로 확장하는 순서를 권장합니다.

Q. 만든 코드의 저작권은 누구에게 있나요?

A. Anthropic의 이용약관에 따르면 Claude가 생성한 콘텐츠의 저작권은 사용자에게 있습니다. 상업적으로 사용해도 됩니다. 다만 법적 판단이 필요한 특수한 경우에는 전문가와 확인하시기 바랍니다.

Q. 한 번에 얼마나 큰 프로젝트를 만들 수 있나요?

A. 컨텍스트 창 크기에 따라 달라집니다. claude-3-5-sonnet 기준 200K 토큰의 컨텍스트를 제공하므로, 수천 줄의 코드를 한 세션에서 다룰 수 있습니다. 대형 프로젝트는 기능별로 세션을 나누는 방식이 효율적입니다.

오늘 5분 실습

6단계만 하면 Claude Code가 어떻게 동작하는지 바로 체감할 수 있습니다. 처음 실행하면 API 키를 입력하라는 안내가 나옵니다. Anthropic console에서 무료 체험 크레딧으로 시작할 수 있습니다. 이 간단한 경험이 바이브 코딩의 첫 문을 여는 순간이 됩니다.

마무리

Claude Code는 2026년 현재 비전공자가 소프트웨어를 직접 만들 수 있는 가장 강력한 도구 중 하나입니다. 코드 문법을 외울 필요는 없지만, 논리적 사고와 구체적인 표현 능력은 여전히 중요합니다. “내가 원하는 것이 정확히 무엇인지”를 명확히 말할 수 있다면, Claude Code는 그것을 현실로 만들어줍니다.

바이브 코딩의 핵심은 완벽한 코드를 처음부터 짜는 것이 아니라, AI와 빠른 피드백 루프를 만들며 점진적으로 완성도를 높이는 것입니다. 오늘 5분 실습으로 첫 발을 내딛으세요.

더 깊은 실습과 1:1 맞춤 강의를 원하신다면 미래이음연구소(lab.duonedu.net)로 문의하세요. 두온교육 출판사(main.duonedu.net)에서도 바이브 코딩 관련 교육 콘텐츠를 꾸준히 업데이트하고 있습니다.