Claude Code 완전 정복: 비전공자도 30분 만에 앱 만드는 바이브 코딩 실전 가이드

바이브 코딩이란 무엇인가

바이브 코딩(Vibe Coding)은 2025년 초 Andrej Karpathy가 처음 제안한 개념으로, AI에게 자연어로 명령을 내려 코드를 생성하는 새로운 개발 방식입니다. 전통적인 프로그래밍이 문법과 알고리즘 암기를 요구했다면, 바이브 코딩은 무엇을 만들고 싶은지만 명확히 설명하면 AI가 나머지를 처리합니다.

특히 Claude Code는 Anthropic이 2025년 출시한 터미널 기반 AI 코딩 에이전트로, 단순히 코드를 제안하는 것을 넘어 파일을 직접 생성하고, 명령어를 실행하며, 프로젝트 전체를 관리할 수 있습니다. 비전공자에게는 마치 옆에 개발자 친구가 앉아서 같이 작업해주는 것 같은 경험을 제공합니다.

이번 글에서는 코딩 경험이 전혀 없는 분들도 따라할 수 있도록 Claude Code 설치부터 실제 웹앱 완성까지 단계별로 안내합니다.

Claude Code 설치 및 초기 설정

Claude Code를 시작하기 위해서는 Node.js가 필요합니다. 아직 설치하지 않았다면 nodejs.org에서 LTS 버전을 다운로드하세요.

Node.js 버전 확인

node --version
# v20.0.0 이상이면 됩니다

Claude Code 전역 설치

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

설치가 완료되면 터미널에서 claude 명령어를 입력해 실행할 수 있습니다. 처음 실행 시 Anthropic 계정 로그인이 필요합니다.

claude
# 처음 실행 시 브라우저 인증 화면이 뜹니다
# 안내에 따라 로그인 후 터미널로 돌아오세요

API 키 직접 설정 (선택사항)

API 키를 직접 사용하려면 환경 변수로 설정합니다. Mac / Linux 환경에서는 다음과 같이 입력합니다.

export ANTHROPIC_API_KEY="sk-ant-..."

Windows PowerShell 환경에서는 아래와 같이 입력하세요.

$env:ANTHROPIC_API_KEY="sk-ant-..."

영구 적용이 필요하다면 ~/.zshrc 또는 ~/.bashrc 파일 마지막 줄에 export 명령어를 추가한 뒤 source ~/.zshrc를 실행하세요.

첫 번째 프로젝트 시작하기

Claude Code의 핵심은 프로젝트 폴더 안에서 실행한다는 점입니다. 먼저 작업할 폴더를 만들고 그 안으로 이동합니다.

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

Claude Code가 실행되면 자연어로 명령을 입력하면 됩니다. 예를 들어 이렇게 입력해보세요.

간단한 HTML 파일을 만들어줘.
제목은 "나의 첫 번째 웹페이지"이고,
배경색은 연한 파란색,
가운데에 환영 메시지가 있는 깔끔한 페이지야.

Claude Code는 즉시 index.html 파일을 생성하고, 코드 내용을 설명해줍니다. 브라우저로 파일을 열어보면 실제 웹페이지가 나타납니다. 코드를 한 줄도 직접 작성하지 않았는데 페이지가 완성된 것입니다.

CLAUDE.md 파일로 프로젝트 지침 설정하기

프로젝트 폴더에 CLAUDE.md 파일을 만들면 Claude Code가 매번 참고하는 프로젝트 지침이 됩니다. 비전공자에게 특히 유용한 팁입니다. 아래 내용을 그대로 복사해서 사용해보세요.

# 프로젝트 지침
- 모든 코드에 한국어 주석 추가
- 초보자도 이해할 수 있는 간단한 구조 유지
- HTML, CSS, JavaScript만 사용 (외부 라이브러리 최소화)
- 파일 생성 전 반드시 무엇을 만들지 설명 먼저 제공
- 에러 발생 시 원인과 해결 방법을 한국어로 설명

이 파일이 있으면 Claude Code는 항상 한국어 주석을 달고, 간단한 구조를 유지하면서 코드를 작성합니다.

비전공자를 위한 핵심 명령어 패턴

Claude Code를 효과적으로 활용하려면 몇 가지 대화 패턴을 익혀두면 좋습니다. 아래는 실제로 검증된 효과적인 프롬프트 패턴들입니다.

기능 추가 요청 패턴

현재 index.html에 [기능]을 추가해줘.
요구사항:
1. [조건 1]
2. [조건 2]
3. 모바일에서도 잘 보여야 해
4. 기존 디자인 스타일은 유지해줘

오류 수정 요청 패턴

이 오류 메시지를 보고 원인을 찾아서 고쳐줘:
[오류 메시지 붙여넣기]

오류가 발생한 상황: [상황 설명]
어떤 버튼을 눌렀을 때 / 어떤 동작을 했을 때 발생했어.

코드 설명 요청 패턴

방금 생성한 코드를 중학생도 이해할 수 있게 설명해줘.
각 줄이 무슨 역할을 하는지 알고 싶어.
전문 용어는 쉬운 말로 바꿔서 설명해줘.

리팩토링 요청 패턴

현재 코드가 너무 복잡해.
같은 기능을 유지하면서 더 간단하고 읽기 쉽게 정리해줘.
변경 사항도 요약해서 알려줘.

슬래시 명령어 활용

Claude Code 내에서 사용할 수 있는 유용한 슬래시 명령어들입니다. 대화창에 직접 입력하면 작동합니다.

/clear       # 대화 맥락 초기화 (새 작업 시작 시 사용)
/compact     # 긴 대화를 요약해서 토큰 절약
/memory      # 저장된 기억 확인 및 수정
/cost        # 현재까지 사용한 API 비용 확인
/help        # 전체 명령어 목록 보기
/doctor      # Claude Code 환경 진단

실전 예제 – 할 일 관리 앱 만들기

이제 실제로 쓸 수 있는 앱을 만들어보겠습니다. 할 일 관리 앱은 웹 개발의 기본기를 모두 다룰 수 있는 좋은 예제입니다. 아래 단계를 그대로 따라하면 30분 이내에 완성됩니다.

1단계: 프로젝트 폴더 생성

mkdir todo-app
cd todo-app
claude

2단계: 기본 구조 생성 요청

Claude Code가 실행되면 아래 내용을 그대로 입력합니다.

할 일 관리 앱을 만들어줘.
기능:
- 할 일 추가 (입력창 + 추가 버튼)
- 할 일 완료 체크 (체크하면 줄이 그어짐)
- 할 일 삭제 버튼
- 완료된 항목 수와 전체 항목 수 표시
디자인:
- 흰 배경, 깔끔한 카드 스타일
- 반응형 (모바일 지원)
- 별도 CSS 파일 사용
파일 구조:
- index.html
- style.css  
- app.js

3단계: 데이터 저장 기능 추가

앱을 닫았다가 다시 열어도 할 일 목록이 유지되도록
localStorage를 사용해서 데이터를 저장하는 기능을 추가해줘.

4단계: 필터 기능 추가

할 일 목록을 필터링하는 버튼을 추가해줘.
- 전체 보기
- 진행 중만 보기
- 완료된 것만 보기
현재 선택된 필터는 버튼 색상으로 구분되게 해줘.

생성된 app.js 핵심 코드 예시

Claude Code가 생성하는 코드는 대략 이런 구조를 갖습니다. 주석이 한국어로 달려 있어 비전공자도 읽기 쉽습니다.

// 할 일 데이터 관리 객체
const TodoApp = {
  // localStorage에서 기존 데이터 불러오기 (없으면 빈 배열)
  todos: JSON.parse(localStorage.getItem('todos') || '[]'),
  
  // 새 할 일 추가 함수
  add(text) {
    const todo = {
      id: Date.now(),        // 고유 ID (현재 시간 활용)
      text: text,            // 할 일 내용
      completed: false,      // 완료 여부
      createdAt: new Date().toISOString()  // 생성 시간
    };
    this.todos.push(todo);
    this.save();    // 저장
    this.render();  // 화면 갱신
  },
  
  // 완료 상태 토글 함수
  toggle(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
      this.save();
      this.render();
    }
  },
  
  // localStorage에 저장
  save() {
    localStorage.setItem('todos', JSON.stringify(this.todos));
  },
  
  // 화면에 목록 그리기
  render() {
    const list = document.getElementById('todo-list');
    list.innerHTML = this.todos.map(todo => `
      <li class="${todo.completed ? 'completed' : ''}">
        <input type="checkbox" ${todo.completed ? 'checked' : ''}
               onchange="TodoApp.toggle(${todo.id})">
        <span>${todo.text}</span>
        <button onclick="TodoApp.remove(${todo.id})">삭제</button>
      </li>
    `).join('');
  }
};

이 코드를 직접 이해하지 못해도 괜찮습니다. “저장이 안 돼”, “삭제 버튼이 안 눌려” 처럼 증상만 설명하면 Claude Code가 알아서 고쳐줍니다.

자주 묻는 질문 Q&A

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

A. 네, 가능합니다. Claude Code의 가장 큰 장점은 코드 문법을 몰라도 무엇을 만들고 싶은지만 설명하면 된다는 점입니다. 다만 만들어진 결과물이 원하는 대로 나왔는지 판단하는 능력은 필요합니다. 기본적인 웹 지식(HTML이 무엇인지 정도)이 있으면 훨씬 원활하게 사용할 수 있으며, 미래이음연구소 입문 과정에서 이 부분을 집중적으로 다룹니다.

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

A. Claude Code는 Anthropic API 사용량 기준으로 과금됩니다. 일반적인 소규모 프로젝트 작업 시 하루 1~3달러 수준입니다. 대규모 코드베이스나 장시간 작업 시 더 많이 나올 수 있습니다. /cost 명령어로 실시간 비용을 확인할 수 있으니 처음에는 주기적으로 확인해보는 것을 권장합니다.

Q. 만든 앱을 어떻게 인터넷에 올리나요?

A. Claude Code에게 직접 물어보세요. “이 앱을 무료로 인터넷에 배포하고 싶어. 방법을 알려줘”라고 입력하면 Vercel, Netlify, GitHub Pages 등 무료 호스팅 서비스를 활용한 배포 방법을 단계별로 안내해줍니다. 실제로 10분 이내에 전 세계 어디서나 접속 가능한 URL이 생성됩니다.

Q. 생성된 코드가 나중에 유지보수하기 어렵지 않나요?

A. CLAUDE.md에 코딩 스타일 지침을 명확히 적어두면 일관성 있는 코드가 생성됩니다. 또한 Claude Code는 기존 코드 스타일을 분석해서 그에 맞춰 작성하므로, 프로젝트가 쌓일수록 오히려 일관성이 높아집니다. “이 코드 6개월 뒤 나 혼자 수정할 수 있도록 간단하게 유지해줘”처럼 요청하면 됩니다.

Q. Claude Code와 일반 ChatGPT의 차이가 뭔가요?

A. ChatGPT는 코드를 “보여주는” 도구이고, Claude Code는 코드를 “직접 실행하는” 도구입니다. Claude Code는 파일을 생성하고, 터미널 명령어를 실행하고, 오류를 직접 확인하고 수정하는 전체 개발 사이클을 자동으로 처리합니다. 비유하자면 ChatGPT가 요리 레시피를 알려주는 것이라면, Claude Code는 직접 요리까지 해주는 것입니다.

Q. 어떤 종류의 프로젝트에 적합한가요?

A. 웹사이트, 웹앱, 데이터 분석 스크립트, 자동화 도구, API 개발 등 대부분의 소프트웨어 개발 작업에 적합합니다. 특히 처음부터 새로운 것을 만드는 “그린필드 프로젝트”에서 효과가 극대화됩니다. 수십만 줄의 레거시 코드 분석에는 한계가 있을 수 있지만, 새 기능 추가나 버그 수정에는 충분히 활용할 수 있습니다.

Q. 스마트폰에서도 사용할 수 있나요?

A. Claude Code 자체는 터미널 환경이 필요하기 때문에 스마트폰 직접 사용은 어렵습니다. 다만 원격 서버(VPS)에 Claude Code를 설치하고 스마트폰 터미널 앱(iSH, Termius 등)으로 접속하는 방식으로 우회할 수 있습니다. 이 방법도 미래이음연구소 심화 과정에서 다루고 있습니다.

오늘 5분 실습

마무리

바이브 코딩은 더 이상 개발자만의 영역이 아닙니다. Claude Code 하나만으로 아이디어를 곧바로 작동하는 소프트웨어로 바꿀 수 있는 시대가 왔습니다. 중요한 것은 완벽한 코드를 처음부터 작성하는 것이 아니라, 빠르게 만들고, 사용해보고, 개선하는 사이클을 반복하는 것입니다.

오늘 5분 실습을 마쳤다면 이미 바이브 코딩의 첫 걸음을 뗀 것입니다. 다음 단계가 궁금하거나 실습 중 막히는 부분이 있다면 미래이음연구소 강의를 통해 전문적인 지도를 받아보세요.

• 두온교육 출판사: main.duonedu.net
• 미래이음연구소: lab.duonedu.net