진짜 바이브 코딩

Claude Code 완전 가이드

설치부터 배포까지, Claude Code로 앱을 만드는 전체 과정을 단계별로 안내합니다.

Ad Space — claude-code-top

01Claude Code란?

Claude Code는 Anthropic이 만든 AI 코딩 도구입니다. 터미널에서 자연어로 명령하면 파일을 읽고, 코드를 작성하고, 테스트를 실행하고, Git 커밋까지 자동으로 해줍니다.

일반 채팅 AI와 다른 점은 실제 프로젝트 파일에 직접 접근한다는 것입니다. 코드를 복사-붙여넣기 할 필요 없이, "로그인 기능 추가해줘"라고 말하면 프로젝트 구조를 파악하고 알맞은 위치에 코드를 생성합니다.

🖥️ 터미널이 뭔가요?

터미널은 텍스트로 컴퓨터와 대화하는 프로그램입니다. 무섭게 생겼지만, Claude Code와 함께라면 여러분이 직접 복잡한 명령어를 외울 필요가 없습니다. 자연어로 말하면 됩니다.

Mac에서 열기

🔍 Spotlight 검색 → "terminal" 입력 → 엔터

Windows에서 열기

시작 메뉴 → "powershell" 검색 → 엔터

다른 AI 도구와의 차이

ChatGPT / Claude.ai — 웹 채팅. 코드를 복사해서 붙여넣어야 함.

Cursor — AI 내장 코드 에디터. GUI 기반. 파일 단위 작업에 강함.

Claude Code — 터미널 기반. 프로젝트 전체를 이해하고 다중 파일 수정 가능. 가장 자율적.

💡 Tip: Cursor와 Claude Code를 함께 쓸 수도 있습니다. Cursor로 UI를 만들고, Claude Code로 복잡한 로직을 처리하는 조합이 효과적입니다.

02사전 준비 — Node.js & npm 설치

📦 Node.js가 뭔가요?

Node.js는 프로그램을 실행하는 엔진입니다. 자동차에 엔진이 필요하듯, Claude Code를 실행하려면 Node.js가 필요합니다. 한 번 설치하면 끝이고, 앞으로 신경 쓸 일 없습니다.

Mac 사용자

  1. 1nodejs.org에 접속합니다
  2. 2초록색 LTS 버튼을 클릭해서 다운로드합니다 (오른쪽 버튼 말고 왼쪽 것!)
  3. 3다운로드된 .pkg 파일을 더블클릭 → "계속"만 누르면 설치 완료
  4. 4
    설치 확인: 화면 우측 상단 🔍 클릭 → "터미널" 입력 → 검은 창이 열림
    (터미널 = 텍스트로 컴퓨터에 명령을 내리는 프로그램. 무섭게 생겼지만 복사-붙여넣기만 하면 됩니다)
  5. 5터미널에 node --version 을 입력하고 엔터. 숫자가 나오면 성공!

Windows 사용자

  1. 1nodejs.org에 접속합니다
  2. 2초록색 LTS 버튼을 클릭해서 다운로드합니다
  3. 3다운로드된 .msi 파일을 더블클릭 → "Next"만 누르면 설치 완료
  4. 4
    설치 확인: 시작 메뉴 → "PowerShell" 검색 → 파란 창이 열림
    (PowerShell = Windows의 터미널. Mac의 "터미널"과 같은 역할입니다)
  5. 5창에 node --version 을 입력하고 엔터. 숫자가 나오면 성공!

❓ 자주 하는 질문

Q: "command not found"가 나와요
터미널/PowerShell을 완전히 끄고 다시 열어보세요. 설치 후 재시작이 필요합니다.

Q: npm은 따로 설치해야 하나요?
아니요! Node.js를 설치하면 npm(도구 설치 프로그램)이 자동으로 같이 설치됩니다.

Q: 숫자가 다르게 나와요 (v20.x.x)
정상입니다. 숫자가 뭐든 나오기만 하면 성공한 거예요.

03Claude Code 설치

터미널에서 한 줄로 설치합니다:

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

💡 명령어 뜻 풀이

npm install — 도구를 설치하라는 명령어

-g — "전역(global)"으로 설치. 어디서든 사용 가능하게

@anthropic-ai/claude-code — 설치할 도구의 이름

설치가 완료되면 확인합니다:

$ claude --version

1.x.x

⚠️ 권한 에러가 나는 경우

맥/리눅스: 앞에 sudo를 붙이세요:

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

윈도우: PowerShell을 "관리자 권한으로 실행"한 뒤 다시 시도하세요.

04Anthropic 계정 & API 키 설정

Claude Code를 사용하려면 Anthropic 계정이 필요합니다.

  1. 1console.anthropic.com에 접속 → "Sign up" (Google 계정으로도 가능)
  2. 2터미널에 claude 입력 → 브라우저가 자동으로 열림 → 방금 만든 계정으로 로그인
  3. 3로그인 완료! 터미널로 돌아가면 Claude Code가 준비되어 있습니다.

✅ 이게 전부입니다!

터미널에 claude 한 단어만 입력하면 됩니다. 복잡한 API 키 설정은 필요 없어요.

💰 비용 안내

Max Plan ($100/월): Claude.ai 구독에 포함. 별도 API 비용 없이 Claude Code 사용 가능.

API 사용량 기반: 입/출력 토큰에 따라 과금. 간단한 프로젝트는 월 $5-20 수준.

무료 체험: 신규 가입 시 $5 크레딧 제공 (변경될 수 있음).

05첫 번째 프로젝트 시작하기

이제 실제로 프로젝트를 만들어봅시다.

따라하기

  1. 1
    터미널을 엽니다

    Mac: 🔍 → "터미널" / Windows: 시작 → "PowerShell"

  2. 2
    아래 두 줄을 복사해서 붙여넣고 엔터

    $ mkdir my-app

    $ cd my-app

    mkdir = 폴더 만들기, cd = 그 폴더 안으로 이동하기. 외울 필요 없어요.

  3. 3
    Claude Code 시작

    $ claude

    이제부터 자연어로 대화할 수 있습니다. > 표시가 나타나면 준비 완료!

  4. 4
    만들고 싶은 것을 말합니다

    > 할 일 목록 앱을 만들어줘.

    > 할 일을 추가하고, 완료 체크하고, 삭제할 수 있어야 해.

    > 예쁘게 만들어줘.

    기술 용어 안 써도 됩니다. 그냥 한국어로 원하는 걸 말하세요.

  5. 5
    결과 확인

    Claude Code가 파일 생성이 끝나면, 브라우저(Chrome, Safari 등)를 열고 주소창에 localhost:3000 을 입력하세요.

    localhost:3000 = "내 컴퓨터에서 실행 중인 앱"이라는 뜻입니다. 인터넷 주소가 아니에요.

🎉 축하합니다!

브라우저에 뭔가 보이면 성공입니다. 예쁘지 않아도 괜찮아요. "내가 만든 앱이 돌아가고 있다!" — 이 감동을 느끼세요.

💡 Tip: 처음에는 간단한 프로젝트부터 시작하세요. 성공 경험을 쌓은 뒤 점차 복잡한 것을 만들어가는 것이 효과적입니다.

06Claude Code 핵심 명령어

Claude Code 안에서 사용할 수 있는 주요 명령어들:

/help사용 가능한 명령어 목록 보기
/clear대화 초기화 (새로운 주제 시작할 때)
/compact대화 요약 (토큰 절약, 긴 대화 시)
/cost현재 세션 비용 확인
/doctor설치 상태 진단
Esc현재 작업 중단
Ctrl+CClaude Code 종료

Ad Space — claude-code-mid

07효과적인 대화법

Claude Code에게 말하는 방식이 결과 품질을 결정합니다.

❌ 이렇게 하지 마세요

웹사이트 만들어줘

✅ 이렇게 하세요

Next.js + Tailwind CSS로 포트폴리오 사이트를 만들어줘. 프로젝트 3개를 카드로 보여주고, 자기소개 섹션과 연락처 폼이 있어야 해.

구체적일수록 원하는 결과에 가까움

❌ 이렇게 하지 마세요

안 돼, 다시 해

✅ 이렇게 하세요

헤더의 네비게이션이 모바일에서 겹치고 있어. 640px 이하에서는 햄버거 메뉴로 바꿔줘.

문제를 구체적으로 설명하면 정확히 수정

❌ 이렇게 하지 마세요

전부 다 고쳐줘

✅ 이렇게 하세요

1. 먼저 로그인 페이지의 폼 유효성 검사를 추가해줘. 2. 그 다음에 대시보드 레이아웃을 반응형으로 바꿔줘.

한 번에 하나씩, 순서를 정해주면 더 좋은 결과

💡 Tip: 더 많은 프롬프트 예시는 프롬프트 템플릿에서 확인하세요.

08기능 추가하기 — DB, 인증, 결제

기본 앱이 만들어졌다면, 외부 서비스를 연결할 차례입니다. Claude Code에게 이렇게 요청하세요:

💾 데이터베이스 추가

DB 비교 보기
> Supabase를 연결해서 할 일 데이터를 저장하게 만들어줘. 테이블 스키마도 설계해줘.

🔐 로그인 추가

인증 비교 보기
> Clerk를 설치하고 이메일 + Google 로그인을 추가해줘. 미로그인 사용자는 /sign-in으로 리다이렉트해줘.

💳 결제 추가

연결 가이드 보기
> Stripe Checkout으로 월 구독 결제를 만들어줘. 무료 플랜과 Pro 플랜($10/월)을 만들어줘.

📧 이메일 발송 추가

연결 가이드 보기
> Resend로 환영 이메일을 보내는 기능을 만들어줘. 가입 완료 시 자동으로 발송되게.
💡 Tip: 각 서비스의 API 키는 Claude Code가 .env.local 파일에 자동으로 설정해줍니다. 어떤 서비스를 선택할지 모르겠다면 뭘 써야 할지 모를 때 가이드를 참고하세요.

09GitHub 연결하기

🔗 왜 GitHub이 필요한가요?

코드를 인터넷에 올리려면(배포) GitHub이라는 곳에 먼저 코드를 저장해야 합니다. Google Drive에 파일을 올리듯, GitHub에 코드를 올리는 겁니다. 무료예요.

1단계: GitHub 계정 만들기

  1. 1github.com 접속 → "Sign up" 클릭
  2. 2이메일, 비밀번호, 사용자 이름 입력 → 이메일 인증 → 완료

2단계: GitHub CLI 설치 & 로그인

Claude Code가 GitHub에 코드를 올리려면 "GitHub CLI"라는 도구가 필요합니다. 한 번만 설치하면 됩니다.

Mac 사용자

$ brew install gh

brew가 없다면 먼저 brew.sh 접속 → 페이지의 명령어를 터미널에 붙여넣기 → 설치 완료 후 위 명령어 실행

Windows 사용자

$ winget install GitHub.cli

또는 cli.github.com에서 설치 파일을 다운로드해도 됩니다.

3단계: GitHub에 로그인

설치가 끝났으면, 터미널에서 GitHub에 로그인합니다:

$ gh auth login

질문이 나옵니다. 이렇게 선택하세요:

? What account do you want to log into? → GitHub.com

? What is your preferred protocol? → HTTPS

? Authenticate Git with your GitHub credentials? → Yes

? How would you like to authenticate? → Login with a web browser

브라우저가 열리면 "Authorize" 버튼을 클릭하면 끝!

✅ 확인 방법

$ gh auth status

"Logged in to github.com"이 나오면 성공입니다. 이제 Claude Code가 GitHub에 코드를 올릴 수 있습니다.

💡 Tip: 이 설정은 한 번만 하면 됩니다. 다음부터는 자동으로 GitHub에 접근할 수 있어요.

10배포하기 — Vercel에 무료 배포

🌐 배포가 뭔가요?

지금까지 만든 앱은 여러분의 컴퓨터에서만 보입니다. "배포"는 이 앱을 인터넷에 올려서 누구나 접속할 수 있게 만드는 것입니다. 유튜브에 영상 올리는 것과 같다고 생각하세요.

사전 준비: GitHub 계정 만들기

GitHub는 코드를 저장하는 곳입니다. Google Drive에 파일을 저장하듯, 코드를 GitHub에 저장합니다. 무료예요.

  1. 1github.com에 접속 → "Sign up" → 이메일/비밀번호 입력 → 완료

사전 준비: Vercel 계정 만들기

Vercel은 앱을 인터넷에 올려주는 서비스입니다. 여러분의 앱을 24시간 실행해주는 컴퓨터라고 생각하세요. 무료예요.

  1. 1vercel.com에 접속 → "Sign Up" → "Continue with GitHub" 선택 (방금 만든 GitHub 계정으로)

배포하기 (Claude Code에게 시키기)

계정이 준비됐으면, Claude Code에게 한 마디만 하면 됩니다:

> 이 프로젝트를 GitHub에 올리고 Vercel에 배포해줘.

Claude Code가 자동으로:

  • ✅ GitHub에 코드를 업로드하고
  • ✅ Vercel에 연결하고
  • ✅ 배포를 실행합니다

몇 분 후, 이런 URL을 받게 됩니다:

https://my-app-abc123.vercel.app

이 주소를 친구에게 보내보세요. 세계 어디서든 접속할 수 있습니다! 🎉

🌐 내 도메인 쓰기 (선택사항)

"vercel.app" 대신 "myname.com" 같은 내 주소를 쓰고 싶다면: Namecheap에서 도메인 구매 (연 약 1만원) → Vercel에서 연결. 없어도 괜찮습니다 — vercel.app 주소로 충분해요.

💡 Tip: 배포 전에 런칭 체크리스트를 확인하세요.

11트러블슈팅 — 자주 겪는 문제

'claude' 명령어를 찾을 수 없다고 나와요

Node.js를 먼저 설치했는지 확인하세요. 설치 후 터미널을 완전히 껐다가 다시 열어야 합니다. 그래도 안 되면 'npx @anthropic-ai/claude-code'로 실행해보세요.

API 키 에러가 나요

'claude' 명령어 실행 시 브라우저 로그인 방식을 사용하세요. 또는 console.anthropic.com에서 API 키를 새로 발급받고 export ANTHROPIC_API_KEY=새키 를 실행하세요.

Claude Code가 파일을 수정하려는데 권한을 물어봐요

정상입니다. Claude Code는 안전을 위해 파일 수정 전 허락을 구합니다. 'y'를 눌러 허용하거나, 신뢰할 수 있는 작업이면 '--dangerously-skip-permissions'로 자동 허용할 수 있습니다.

비용이 너무 빨리 나가요

/cost로 현재 비용을 확인하세요. /compact로 대화를 압축하면 토큰을 절약할 수 있습니다. 또는 Max 플랜($100/월)을 구독하면 별도 API 비용 없이 사용할 수 있습니다.

생성된 코드가 에러가 나요

에러 메시지를 그대로 Claude Code에게 알려주세요. '이 에러가 나는데 고쳐줘: [에러 메시지]'라고 하면 됩니다. Claude Code는 에러를 직접 읽고 수정합니다.

이전 대화를 이어가고 싶어요

'claude --continue'로 마지막 대화를 이어갈 수 있습니다. 또는 'claude --resume'으로 이전 세션 목록에서 선택할 수 있습니다.

12전체 워크플로우 요약

1
환경 설정 Node.js 설치 → npm install -g @anthropic-ai/claude-code → claude
2
프로젝트 생성 새 폴더에서 claude 실행 → "~를 만들어줘" 요청
3
기능 추가 DB, 인증, 결제 등 하나씩 요청하며 확장
4
테스트 npm run dev로 로컬 확인 → 문제 있으면 Claude Code에게 수정 요청
5
배포 GitHub push → Vercel 자동 배포 → 커스텀 도메인 연결
6
런칭 체크리스트 확인 → SEO 설정 → 세상에 공개!

이 다음에 볼 것들

Ad Space — claude-code-bottom