Claude Code 완전 가이드
설치부터 배포까지, Claude Code로 앱을 만드는 전체 과정을 단계별로 안내합니다.
📋 처음이라면 먼저 읽어보세요
아래 내용을 먼저 읽으면 이 가이드를 더 쉽게 따라할 수 있습니다.
Ad Space — claude-code-top
01Claude Code란?
Claude Code는 Anthropic이 만든 AI 코딩 도구입니다. 터미널에서 자연어로 명령하면 파일을 읽고, 코드를 작성하고, 테스트를 실행하고, Git 커밋까지 자동으로 해줍니다.
일반 채팅 AI와 다른 점은 실제 프로젝트 파일에 직접 접근한다는 것입니다. 코드를 복사-붙여넣기 할 필요 없이, "로그인 기능 추가해줘"라고 말하면 프로젝트 구조를 파악하고 알맞은 위치에 코드를 생성합니다.
🖥️ 터미널이 뭔가요?
터미널은 텍스트로 컴퓨터와 대화하는 프로그램입니다. 무섭게 생겼지만, Claude Code와 함께라면 여러분이 직접 복잡한 명령어를 외울 필요가 없습니다. 자연어로 말하면 됩니다.
🔍 Spotlight 검색 → "terminal" 입력 → 엔터
시작 메뉴 → "powershell" 검색 → 엔터
다른 AI 도구와의 차이
ChatGPT / Claude.ai — 웹 채팅. 코드를 복사해서 붙여넣어야 함.
Cursor — AI 내장 코드 에디터. GUI 기반. 파일 단위 작업에 강함.
Claude Code — 터미널 기반. 프로젝트 전체를 이해하고 다중 파일 수정 가능. 가장 자율적.
터미널이 무섭게 느껴질 수 있지만, 개발자들에게 터미널은 가장 친숙한 도구입니다. GUI보다 빠르고 정확하거든요. Claude Code는 이 터미널의 힘을 AI와 결합한 거예요. 처음엔 어색해도 곧 "왜 진작 안 썼지?" 하게 됩니다.
02사전 준비 — Node.js & npm 설치
📦 Node.js가 뭔가요?
Node.js는 프로그램을 실행하는 엔진입니다. 자동차에 엔진이 필요하듯, Claude Code를 실행하려면 Node.js가 필요합니다. 한 번 설치하면 끝이고, 앞으로 신경 쓸 일 없습니다.
Mac 사용자
- 1nodejs.org에 접속합니다
- 2초록색 LTS 버튼을 클릭해서 다운로드합니다 (오른쪽 버튼 말고 왼쪽 것!)
- 3다운로드된 .pkg 파일을 더블클릭 → "계속"만 누르면 설치 완료
- 4설치 확인: 화면 우측 상단 🔍 클릭 → "터미널" 입력 → 검은 창이 열림(터미널 = 텍스트로 컴퓨터에 명령을 내리는 프로그램. 무섭게 생겼지만 복사-붙여넣기만 하면 됩니다)
- 5터미널에
node --version을 입력하고 엔터. 숫자가 나오면 성공!
Windows 사용자
- 1nodejs.org에 접속합니다
- 2초록색 LTS 버튼을 클릭해서 다운로드합니다
- 3다운로드된 .msi 파일을 더블클릭 → "Next"만 누르면 설치 완료
- 4설치 확인: 시작 메뉴 → "PowerShell" 검색 → 파란 창이 열림(PowerShell = Windows의 터미널. Mac의 "터미널"과 같은 역할입니다)
- 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를 붙이세요:
윈도우: PowerShell을 "관리자 권한으로 실행"한 뒤 다시 시도하세요.
04Anthropic 계정 & API 키 설정
Claude Code를 사용하려면 Anthropic 계정이 필요합니다.
- 1console.anthropic.com에 접속 → "Sign up" (Google 계정으로도 가능)
- 2터미널에
claude입력 → 브라우저가 자동으로 열림 → 방금 만든 계정으로 로그인 - 3로그인 완료! 터미널로 돌아가면 Claude Code가 준비되어 있습니다.
✅ 이게 전부입니다!
터미널에 claude 한 단어만 입력하면 됩니다. 복잡한 API 키 설정은 필요 없어요.
💰 비용 안내
Max Plan ($100/월): Claude.ai 구독에 포함. 별도 API 비용 없이 Claude Code 사용 가능.
API 사용량 기반: 입/출력 토큰에 따라 과금. 간단한 프로젝트는 월 $5-20 수준.
무료 체험: 신규 가입 시 $5 크레딧 제공 (변경될 수 있음).
05첫 번째 프로젝트 시작하기
이제 실제로 프로젝트를 만들어봅시다.
따라하기
- 1터미널을 엽니다
Mac: 🔍 → "터미널" / Windows: 시작 → "PowerShell"
- 2아래 두 줄을 복사해서 붙여넣고 엔터
$ mkdir my-app
$ cd my-app
mkdir = 폴더 만들기, cd = 그 폴더 안으로 이동하기. 외울 필요 없어요.
- 3Claude Code 시작
$ claude
이제부터 자연어로 대화할 수 있습니다. > 표시가 나타나면 준비 완료!
- 4만들고 싶은 것을 말합니다
> 할 일 목록 앱을 만들어줘.
> 할 일을 추가하고, 완료 체크하고, 삭제할 수 있어야 해.
> 예쁘게 만들어줘.
기술 용어 안 써도 됩니다. 그냥 한국어로 원하는 걸 말하세요.
- 5결과 확인
Claude Code가 파일 생성이 끝나면, 브라우저(Chrome, Safari 등)를 열고 주소창에
localhost:3000을 입력하세요.localhost:3000 = "내 컴퓨터에서 실행 중인 앱"이라는 뜻입니다. 인터넷 주소가 아니에요.
🎉 축하합니다!
브라우저에 뭔가 보이면 성공입니다. 예쁘지 않아도 괜찮아요. "내가 만든 앱이 돌아가고 있다!" — 이 감동을 느끼세요.
개발자도 새 프로젝트를 시작할 때 "뭐부터 하지?" 하는 막막함이 있습니다. 차이가 있다면, 경험 많은 개발자는 이 막막함이 정상이라는 걸 알고, 일단 작은 것부터 만들기 시작한다는 거예요. 완벽한 설계보다 동작하는 프로토타입이 먼저입니다.
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. 그 다음에 대시보드 레이아웃을 반응형으로 바꿔줘.
한 번에 하나씩, 순서를 정해주면 더 좋은 결과
개발자가 AI와 대화하는 핵심 원칙: "한 번에 하나씩". 거대한 요청 하나보다 작은 요청 여러 개가 훨씬 좋은 결과를 냅니다. 마치 레고를 한 번에 완성하는 게 아니라 블록 하나씩 쌓는 것처럼요.
08기능 추가하기 — DB, 인증, 결제
기본 앱이 만들어졌다면, 외부 서비스를 연결할 차례입니다. Claude Code에게 이렇게 요청하세요:
💾 데이터베이스 추가
DB 비교 보기 →🔐 로그인 추가
인증 비교 보기 →💳 결제 추가
연결 가이드 보기 →📧 이메일 발송 추가
연결 가이드 보기 →.env.local 파일에 자동으로 설정해줍니다. 어떤 서비스를 선택할지 모르겠다면 뭘 써야 할지 모를 때 가이드를 참고하세요.09GitHub 연결하기
🔗 왜 GitHub이 필요한가요?
코드를 인터넷에 올리려면(배포) GitHub이라는 곳에 먼저 코드를 저장해야 합니다. Google Drive에 파일을 올리듯, GitHub에 코드를 올리는 겁니다. 무료예요.
1단계: GitHub 계정 만들기
- 1github.com 접속 → "Sign up" 클릭
- 2이메일, 비밀번호, 사용자 이름 입력 → 이메일 인증 → 완료
2단계: GitHub CLI 설치 & 로그인
Claude Code가 GitHub에 코드를 올리려면 "GitHub CLI"라는 도구가 필요합니다. 한 번만 설치하면 됩니다.
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에 코드를 올릴 수 있습니다.
개발자들도 GitHub 처음 설정할 때 헷갈려합니다. SSH 키, 토큰, CLI... 방법이 여러 가지라서요. 여기서 소개한 "gh auth login"이 가장 쉬운 방법입니다. 브라우저에서 버튼 한 번 누르면 끝이니까요.
10배포하기 — Vercel에 무료 배포
🌐 배포가 뭔가요?
지금까지 만든 앱은 여러분의 컴퓨터에서만 보입니다. "배포"는 이 앱을 인터넷에 올려서 누구나 접속할 수 있게 만드는 것입니다. 유튜브에 영상 올리는 것과 같다고 생각하세요.
사전 준비: GitHub 계정 만들기
GitHub는 코드를 저장하는 곳입니다. Google Drive에 파일을 저장하듯, 코드를 GitHub에 저장합니다. 무료예요.
- 1github.com에 접속 → "Sign up" → 이메일/비밀번호 입력 → 완료
사전 준비: Vercel 계정 만들기
Vercel은 앱을 인터넷에 올려주는 서비스입니다. 여러분의 앱을 24시간 실행해주는 컴퓨터라고 생각하세요. 무료예요.
- 1vercel.com에 접속 → "Sign Up" → "Continue with GitHub" 선택 (방금 만든 GitHub 계정으로)
배포하기 (Claude Code에게 시키기)
계정이 준비됐으면, Claude Code에게 한 마디만 하면 됩니다:
> 이 프로젝트를 GitHub에 올리고 Vercel에 배포해줘.
Claude Code가 자동으로:
- ✅ GitHub에 코드를 업로드하고
- ✅ Vercel에 연결하고
- ✅ 배포를 실행합니다
몇 분 후, 이런 URL을 받게 됩니다:
이 주소를 친구에게 보내보세요. 세계 어디서든 접속할 수 있습니다! 🎉
🌐 내 도메인 쓰기 (선택사항)
"vercel.app" 대신 "myname.com" 같은 내 주소를 쓰고 싶다면: Namecheap에서 도메인 구매 (연 약 1만원) → Vercel에서 연결. 없어도 괜찮습니다 — vercel.app 주소로 충분해요.
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'으로 이전 세션 목록에서 선택할 수 있습니다.
에러가 나면 당황하는 건 개발자도 마찬가지입니다. 10년 경력 개발자도 에러 메시지를 보면 "이게 뭐지..." 합니다. 차이가 있다면, 에러가 "나를 도와주는 단서"라는 걸 아는 것뿐이에요. 에러 메시지를 AI에게 그대로 보여주세요 — 그게 최고의 디버깅입니다.
12전체 워크플로우 요약
이 다음에 볼 것들
Ad Space — claude-code-bottom