Claude Code 완전 초보 가이드 — 설치부터 첫 앱 배포까지

Claude Code란 무엇인가

Claude Code는 Anthropic이 만든 AI 기반 코딩 어시스턴트입니다. 터미널에서 실행되며, 자연어로 지시를 내리면 코드를 직접 작성하고, 파일을 수정하고, 명령어를 실행해 줍니다. 쉽게 말해 “옆에 앉아서 같이 코딩해 주는 시니어 개발자”를 24시간 고용하는 것과 같습니다.

기존 AI 코딩 도구(GitHub Copilot 등)가 코드 자동완성 수준이었다면, Claude Code는 프로젝트 전체를 이해하고 여러 파일에 걸친 복잡한 작업을 스스로 처리합니다. 비전공자도 “로그인 기능 추가해줘”, “데이터베이스 연결해줘” 같은 자연어 지시만으로 실제 동작하는 앱을 만들 수 있습니다.

Claude Code가 할 수 있는 것들

신규 프로젝트 스캐폴딩 (React, Next.js, FastAPI 등)
기존 코드베이스 분석 및 버그 수정
API 연동, 데이터베이스 설계 및 마이그레이션
테스트 코드 자동 작성
Git 커밋 메시지 생성 및 PR 설명 작성
배포 스크립트 작성 및 자동 실행

2025년 기준으로 Claude Code는 SWE-bench(실제 소프트웨어 엔지니어링 벤치마크)에서 업계 최상위 성능을 기록하고 있습니다. 단순한 챗봇이 아닌, 실제 프로덕션 수준의 코드를 생성하는 도구입니다.

설치 방법 — Node.js부터 Claude Code까지

Claude Code는 npm 패키지로 배포됩니다. Node.js 18 이상이 필요하며, 설치 과정 전체가 터미널 5줄 이내로 끝납니다.

1단계: Node.js 설치 확인

터미널(Mac: Terminal 앱, Windows: PowerShell)을 열고 아래 명령어를 입력하세요.

node --version

버전이 표시되지 않거나 18 미만이라면 nodejs.org에서 LTS 버전을 내려받아 설치하세요. 설치 파일을 실행하면 Next 버튼만 눌러도 자동으로 완료됩니다.

2단계: Claude Code 설치

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

설치가 완료되면 어느 폴더에서든 claude 명령어를 사용할 수 있습니다. 설치에 1~2분 정도 소요됩니다.

3단계: Anthropic API 키 발급

Claude Code를 사용하려면 Anthropic API 키가 필요합니다. 발급 절차는 다음과 같습니다.

console.anthropic.com 접속
구글 계정 또는 이메일로 회원가입 후 로그인
왼쪽 메뉴에서 API Keys 클릭
Create Key 버튼으로 새 키 생성
sk-ant-로 시작하는 키를 복사해 안전한 곳에 보관

API 키는 한 번 창을 닫으면 다시 볼 수 없으므로 반드시 별도로 저장해 두세요.

4단계: API 키 환경변수 설정

Mac/Linux 터미널:

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

Windows PowerShell:

[System.Environment]::SetEnvironmentVariable('ANTHROPIC_API_KEY','sk-ant-여기에-키-입력','User')

5단계: 설치 확인

claude --version

버전 정보(예: 1.x.x)가 출력되면 설치가 완료된 것입니다. 이제 Claude Code를 사용할 준비가 되었습니다.

첫 프로젝트 시작하기

이제 실제로 Claude Code를 실행해 봅시다. 작업할 폴더를 만들고 그 안에서 claude를 실행하면 됩니다.

mkdir my-first-app
cd my-first-app
claude

Claude Code가 시작되면 아래와 같은 대화형 프롬프트가 나타납니다.

Welcome to Claude Code!
Type your request in natural language...
>

이제 자연어로 지시를 내릴 수 있습니다. 첫 번째 명령으로 React 프로젝트를 초기화해 보겠습니다.

> React와 Tailwind CSS를 사용하는 새 프로젝트를 만들어줘.
  프로젝트 이름은 todo-app이고, 한국어 할 일 관리 앱이야.

Claude Code는 아래 작업들을 자동으로 순서대로 처리합니다.

npx create-react-app todo-app 실행으로 프로젝트 생성
npm install tailwindcss postcss autoprefixer로 Tailwind 설치
tailwind.config.js 및 postcss.config.js 자동 설정
기본 컴포넌트 구조와 디렉토리 생성

모든 과정이 자동으로 진행되며, 완료되면 다음 작업을 요청할 수 있습니다.

간단한 할 일 앱 만들기

프로젝트가 생성되었으면 이제 실제 기능을 추가해 봅시다. Claude Code에게 원하는 기능을 자연어로 설명하면 됩니다.

핵심 기능 구현 요청

> 다음 기능을 가진 할 일 앱을 만들어줘:
  - 할 일 텍스트 입력 후 Enter 키로 추가
  - 각 항목 옆에 완료 체크박스
  - 완료된 항목은 취소선으로 표시
  - 항목마다 삭제 버튼
  - localStorage에 저장해서 새로고침 후에도 데이터 유지
  - Tailwind CSS로 깔끔하게 스타일링

Claude Code가 자동으로 src/App.js를 수정하고 필요한 컴포넌트를 생성합니다. 생성되는 코드의 핵심 로직은 다음과 같습니다.

// src/App.js 핵심 로직 (Claude Code가 자동 생성)
const [todos, setTodos] = useState(() => {
  const saved = localStorage.getItem('todos');
  return saved ? JSON.parse(saved) : [];
});

const addTodo = (text) => {
  const newTodos = [...todos, { id: Date.now(), text, done: false }];
  setTodos(newTodos);
  localStorage.setItem('todos', JSON.stringify(newTodos));
};

const toggleTodo = (id) => {
  const updated = todos.map(t =>
    t.id === id ? { ...t, done: !t.done } : t
  );
  setTodos(updated);
  localStorage.setItem('todos', JSON.stringify(updated));
};

const deleteTodo = (id) => {
  const filtered = todos.filter(t => t.id !== id);
  setTodos(filtered);
  localStorage.setItem('todos', JSON.stringify(filtered));
};

개발 서버로 확인하기

cd todo-app
npm start

브라우저에서 http://localhost:3000을 열면 방금 만든 앱을 바로 확인할 수 있습니다. 코드를 한 줄도 직접 작성하지 않고 동작하는 앱이 완성되었습니다.

추가 기능 요청하기

기능이 더 필요하다면 계속 자연어로 요청하면 됩니다.

> 할 일 목록을 "전체", "진행중", "완료" 탭으로 필터링하는 기능을 추가해줘.
  탭 디자인은 Tailwind의 border-bottom 강조 스타일로 만들어줘.

> 각 할 일에 기한(날짜)을 설정할 수 있게 해줘.
  기한이 지난 항목은 빨간색 텍스트로 표시해줘.

이런 식으로 기능을 하나씩 추가해 나가는 방식이 바이브 코딩의 핵심입니다. 전체 설계를 미리 완성하지 않고, 대화하면서 점진적으로 완성해 가는 것입니다.

Vercel로 5분 만에 배포하기

앱이 완성되면 실제 인터넷에 올려 다른 사람도 접속할 수 있게 해봅시다. Vercel은 무료로 React 앱을 배포할 수 있는 플랫폼으로, 개인 프로젝트나 포트폴리오 배포에 최적화되어 있습니다.

Vercel CLI 설치 및 로그인

npm install -g vercel
vercel login

이메일을 입력하면 확인 링크가 전송됩니다. 링크를 클릭하면 로그인이 완료됩니다. GitHub 계정으로도 로그인할 수 있습니다.

Git 초기화 및 첫 커밋

cd todo-app
git init
git add .
git commit -m "feat: 초기 할 일 앱 구현"

Vercel 배포 실행

vercel

처음 실행하면 몇 가지 설정을 물어봅니다. 모두 Enter(기본값)로 진행하면 됩니다. 30초~1분 후 배포가 완료되고 다음과 같은 URL이 출력됩니다.

Production: https://todo-app-abc123.vercel.app

이 URL을 공유하면 누구나 접속할 수 있습니다. 코드를 수정한 뒤 다시 vercel --prod를 실행하면 즉시 업데이트됩니다.

Claude Code에 배포 전 과정 맡기기

배포 과정도 Claude Code에게 위임할 수 있습니다.

> 지금까지 만든 앱을 Vercel에 배포해줘.
  먼저 빌드가 성공하는지 확인하고, 에러가 있으면 수정한 뒤 배포해줘.

Claude Code가 npm run build로 빌드를 검증하고, 에러가 있으면 자동으로 수정한 뒤 배포까지 진행합니다. 개발자가 일일이 에러를 분석하고 수정할 필요가 없습니다.

자주 묻는 질문 Q&A

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

A. 네, 가능합니다. 다만 완전히 코딩을 모르는 상태에서는 Claude Code가 만들어 준 코드가 왜 동작하는지, 에러가 났을 때 어떤 방향으로 요청해야 할지 파악하기 어려울 수 있습니다. HTML/CSS 기초 정도만 알아도 생산성이 크게 올라갑니다. Claude Code 자체가 훌륭한 학습 도구이기도 합니다. “이 코드가 왜 이렇게 동작해?”, “이 에러 메시지가 무슨 뜻이야?” 하고 물어보면 친절하게 설명해 줍니다.

Q. API 비용이 많이 드나요?

A. Claude Code는 Claude Sonnet 모델을 기본으로 사용합니다. 요금은 토큰 기반으로 부과되며, 소규모 프로젝트 하나를 완성하는 데 보통 $1~$5 수준입니다. Anthropic의 월 $20 구독 플랜(Claude Pro)에서는 Claude Code 사용량이 포함되어 있어 입문자에게 권장합니다. 사용량이 많은 개발자라면 API 키를 직접 사용하는 방식이 더 경제적일 수 있습니다.

Q. Windows에서도 잘 동작하나요?

A. 동작하지만 Mac/Linux 환경에 비해 일부 기능에 제약이 있을 수 있습니다. WSL2(Windows Subsystem for Linux)를 설치하고 그 안에서 Claude Code를 실행하면 Mac과 거의 동일한 경험을 얻을 수 있습니다. WSL2 설치는 PowerShell에서 wsl --install 한 줄로 가능합니다.

A. Anthropic의 이용약관에 따라 Claude Code가 생성한 결과물의 지식재산권은 사용자에게 귀속됩니다. 상업적 프로젝트에도 자유롭게 활용할 수 있습니다. 단, 오픈소스 라이선스가 있는 코드를 참조해 생성된 경우에는 해당 라이선스 조건을 확인하는 것이 좋습니다.

Q. 기존 프로젝트에 Claude Code를 적용할 수 있나요?

A. 가능합니다. 기존 프로젝트 폴더에서 claude를 실행하면 현재 코드베이스 전체를 분석한 뒤 지시에 따라 작업합니다. 대규모 레거시 코드의 리팩토링이나 새 기능 추가에 특히 유용합니다. CLAUDE.md 파일을 프로젝트 루트에 두면 프로젝트 규칙과 컨텍스트를 Claude Code에게 전달할 수 있습니다.

Q. Claude Code와 Cursor의 차이는 무엇인가요?

A. Cursor는 VS Code 기반의 IDE(코드 편집기)이고, Claude Code는 터미널에서 동작하는 CLI 도구입니다. Cursor는 GUI 환경에서 코드를 보면서 AI와 협업하는 방식이고, Claude Code는 텍스트 명령만으로 더 자율적으로 작업을 수행합니다. Cursor가 “AI가 도와주는 코딩”이라면, Claude Code는 “AI가 코딩하고 내가 방향을 잡는” 패러다임에 가깝습니다. 둘 다 Claude 모델을 활용할 수 있으며, 병행해서 쓰는 개발자도 많습니다.

Q. 보안에 문제는 없나요? 내 코드가 Anthropic에 넘어가지 않나요?

A. Claude Code는 대화 내용과 코드를 Anthropic 서버로 전송합니다. Anthropic의 기본 정책에 따르면 API 사용자의 데이터는 모델 학습에 사용되지 않습니다. 민감한 비즈니스 로직이 포함된 프로젝트라면 Anthropic의 데이터 처리 정책을 확인하고 필요시 Enterprise 계약을 검토하세요.

오늘 5분 실습

지금 당장 시작할 수 있는 5분 실습입니다. 아래 순서대로 따라하면 첫 AI 코딩 경험을 바로 해볼 수 있습니다.

터미널을 엽니다 (Mac: Cmd+Space 후 “Terminal” 검색, Windows: Win키 후 “PowerShell” 검색)
Node.js 확인: node --version
Claude Code 설치: npm install -g @anthropic-ai/claude-code
새 폴더 생성: mkdir hello-claude && cd hello-claude
Claude Code 실행: claude
다음 내용을 입력해 보세요:

> HTML과 CSS만 사용해서 내 이름을 예쁘게 표시하는 한 페이지 웹사이트를 만들어줘.
  배경은 어두운 그라데이션, 이름은 크고 흰색으로, 직업이나 소개 한 줄도 넣어줘.

5분 안에 나만의 첫 웹 페이지가 완성됩니다. 결과물을 보고 마음에 드는 부분, 마음에 들지 않는 부분을 Claude Code에게 계속 요청해 보세요. 그게 바이브 코딩의 시작입니다.

실습을 마쳤다면 아래 댓글에 만든 페이지의 스크린샷을 공유해 주세요.

미래이음연구소 바이브 코딩 교육

이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net

마무리

Claude Code는 비전공자가 실제로 동작하는 앱을 만들 수 있게 해주는 가장 강력한 도구 중 하나입니다. 오늘 다룬 내용을 정리하면 다음과 같습니다.

Node.js 설치 후 npm install -g @anthropic-ai/claude-code로 Claude Code 설치
Anthropic API 키 발급 및 환경변수 설정
자연어 지시로 React 앱 생성 및 기능 추가
Vercel CLI로 무료 배포 완료

가장 중요한 것은 완벽한 기획을 세우고 시작하는 것이 아니라, 일단 작은 기능부터 만들어 보는 것입니다. “만들어줘” 한 마디에서 시작해 점점 발전시켜 나가는 것, 그것이 바이브 코딩의 본질입니다.

다음 편에서는 Claude Code로 백엔드 API(Node.js + Express)를 연결하고, 실제 데이터베이스를 붙이는 풀스택 구성을 다룰 예정입니다. 비전공자도 할 수 있습니다. 오늘 5분 실습부터 시작해 보세요.

Claude Code 완전 초보 가이드 — 설치부터 첫 앱 배포까지

Claude Code란 무엇인가

Claude Code가 할 수 있는 것들

설치 방법 — Node.js부터 Claude Code까지

1단계: Node.js 설치 확인

2단계: Claude Code 설치

3단계: Anthropic API 키 발급

4단계: API 키 환경변수 설정

5단계: 설치 확인

첫 프로젝트 시작하기

간단한 할 일 앱 만들기

핵심 기능 구현 요청

개발 서버로 확인하기

추가 기능 요청하기

Vercel로 5분 만에 배포하기

Vercel CLI 설치 및 로그인

Git 초기화 및 첫 커밋

Vercel 배포 실행

Claude Code에 배포 전 과정 맡기기

자주 묻는 질문 Q&A

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

Q. API 비용이 많이 드나요?

Q. Windows에서도 잘 동작하나요?

Q. Claude Code가 작성한 코드의 저작권은 누구에게 있나요?

Q. 기존 프로젝트에 Claude Code를 적용할 수 있나요?

Q. Claude Code와 Cursor의 차이는 무엇인가요?

Q. 보안에 문제는 없나요? 내 코드가 Anthropic에 넘어가지 않나요?

오늘 5분 실습

미래이음연구소 바이브 코딩 교육

마무리

답글 남기기 응답 취소

Claude Code란 무엇인가

Claude Code가 할 수 있는 것들

설치 방법 — Node.js부터 Claude Code까지

1단계: Node.js 설치 확인

2단계: Claude Code 설치

3단계: Anthropic API 키 발급

4단계: API 키 환경변수 설정

5단계: 설치 확인

첫 프로젝트 시작하기

간단한 할 일 앱 만들기

핵심 기능 구현 요청

개발 서버로 확인하기

추가 기능 요청하기

Vercel로 5분 만에 배포하기

Vercel CLI 설치 및 로그인

Git 초기화 및 첫 커밋

Vercel 배포 실행

Claude Code에 배포 전 과정 맡기기

자주 묻는 질문 Q&A

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

Q. API 비용이 많이 드나요?

Q. Windows에서도 잘 동작하나요?

Q. Claude Code가 작성한 코드의 저작권은 누구에게 있나요?

Q. 기존 프로젝트에 Claude Code를 적용할 수 있나요?

Q. Claude Code와 Cursor의 차이는 무엇인가요?

Q. 보안에 문제는 없나요? 내 코드가 Anthropic에 넘어가지 않나요?

오늘 5분 실습

미래이음연구소 바이브 코딩 교육

마무리

Related Posts

답글 남기기 응답 취소