Claude Code란 무엇인가

2025년 이후 개발 생태계에서 가장 뜨거운 키워드를 하나 꼽는다면 단연 바이브 코딩(Vibe Coding)입니다. 코드를 한 줄도 몰라도 원하는 것을 말로 설명하면 AI가 코드를 작성해 주는 방식입니다. 그 중심에 Claude Code가 있습니다.

Claude Code는 Anthropic이 만든 AI 코딩 어시스턴트로, 터미널(명령줄)에서 직접 실행됩니다. 단순히 코드를 제안하는 수준을 넘어서, 파일을 만들고 수정하고 테스트하고 배포까지 — 개발의 전체 흐름을 함께 이끌어 나갑니다. 핵심은 “대화”입니다. 마치 옆에 시니어 개발자를 두고 작업하는 것처럼, 자연어로 지시하면 Claude Code가 실행합니다.

비전공자 입장에서 가장 중요한 포인트는 이것입니다:

• 코딩 문법을 외울 필요가 없습니다
• “이런 기능이 필요해요”라고 설명하면 됩니다
• 오류가 나도 Claude Code가 스스로 디버깅합니다
• 실제 파일 시스템과 연결되어 결과물이 즉시 생성됩니다

설치 및 첫 실행

Claude Code를 시작하기 위한 환경 설정은 생각보다 간단합니다. macOS 기준으로 설명드리겠습니다. Windows도 WSL(Windows Subsystem for Linux)을 통해 동일하게 진행할 수 있습니다.

1. Node.js 설치 확인

터미널을 열고 아래 명령어를 입력해 Node.js 버전을 확인합니다:

node --version

18 이상이면 그대로 진행합니다. 설치가 안 되어 있다면 nodejs.org에서 LTS 버전을 받습니다.

2. Claude Code 설치

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

설치 후 버전 확인:

claude --version

3. Anthropic API 키 설정

console.anthropic.com에 가입 후 API 키를 발급받습니다. 그 다음 터미널에서:

export ANTHROPIC_API_KEY="sk-ant-xxxxxxxxxxxxxxxx"

매번 설정하기 번거롭다면 ~/.zshrc 또는 ~/.bashrc 파일에 위 줄을 추가합니다:

echo 'export ANTHROPIC_API_KEY="sk-ant-xxxxxxxxxxxxxxxx"' >> ~/.zshrc
source ~/.zshrc

4. 첫 실행

작업할 폴더를 만들고 Claude Code를 실행합니다:

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

프롬프트가 나타나면 준비 완료입니다. 이제 대화를 시작할 수 있습니다.

첫 번째 프로젝트: 할 일 관리 앱 만들기

백문이 불여일견. 직접 만들어 봅시다. Claude Code를 실행한 상태에서 아래처럼 입력합니다. 코딩 지식이 전혀 없어도 됩니다.

Step 1 — 프로젝트 초기화 요청

할 일 목록을 관리할 수 있는 웹앱을 만들어줘.
기능: 할 일 추가, 완료 체크, 삭제
기술: HTML, CSS, JavaScript만 사용 (서버 없이 브라우저에서 바로 열 수 있게)
파일명: todo.html

Claude Code가 todo.html 파일을 생성합니다. 실제로 파일 탐색기에서 확인해 보면 파일이 만들어져 있습니다.

Step 2 — 브라우저에서 확인

open todo.html

macOS에서는 이 명령어로 바로 브라우저가 열립니다. 할 일 추가, 체크, 삭제가 되는 기능이 동작하는 것을 확인할 수 있습니다.

Step 3 — 기능 추가 요청

여기서 바이브 코딩의 진짜 힘이 나옵니다. 대화를 이어갑니다:

할 일 목록이 브라우저를 닫아도 저장되게 해줘.
localStorage를 사용해서 데이터가 유지되도록.

Claude Code가 코드를 수정합니다. 다시 브라우저에서 확인하면 새로고침해도 데이터가 남아 있습니다.

Step 4 — 디자인 개선

디자인을 더 깔끔하게 바꿔줘.
어두운 테마(다크모드), 보라색 포인트 컬러, 카드 스타일로 만들어줘.

코드를 한 줄도 직접 건드리지 않고, 대화만으로 기능 있는 앱이 완성됩니다. 이것이 바이브 코딩입니다.

비전공자를 위한 프롬프트 작성법

Claude Code에게 좋은 결과를 얻으려면 프롬프트를 잘 써야 합니다. 비전공자가 자주 하는 실수와 개선 방법을 정리했습니다.

원칙 1 — 목적과 맥락을 먼저 설명하라

나쁜 예:

버튼 만들어줘.

좋은 예:

회원가입 폼 하단에 "가입하기" 버튼을 만들어줘.
클릭하면 입력값 유효성 검사를 하고, 문제없으면 콘솔에 "가입 완료"를 출력해줘.

원칙 2 — 사용자 관점으로 설명하라

기술 용어를 모른다고 위축될 필요 없습니다. 오히려 사용자 입장에서 설명하는 것이 더 명확할 때가 많습니다:

사람들이 이 페이지에 왔을 때,
이름이랑 이메일 입력하고 버튼 누르면
"감사합니다, {이름}님!" 이라는 메시지가 뜨게 해줘.

원칙 3 — 단계별로 쪼개서 요청하라

한 번에 너무 많은 것을 요청하면 결과가 복잡해집니다. 기능을 작은 단위로 나눠서 하나씩 완성하는 방식이 훨씬 효과적입니다:

# 1단계
기본 HTML 구조만 만들어줘. 헤더, 메인, 푸터.

# 2단계
헤더에 네비게이션 메뉴 추가해줘. 홈, 소개, 연락처.

# 3단계
메인에 히어로 섹션 추가해줘. 큰 제목과 설명 텍스트, 시작하기 버튼.

원칙 4 — 오류가 나면 그냥 붙여넣어라

브라우저 콘솔에 빨간 오류 메시지가 뜨면 당황하지 말고:

이런 오류가 났어:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
어떻게 고쳐야 해?

오류 메시지를 그대로 붙여넣으면 Claude Code가 원인을 분석하고 수정합니다.

실전 워크플로우 — 아이디어부터 배포까지

실제로 서비스를 만들어 배포하는 전체 과정을 요약합니다. 이 흐름을 이해하면 어떤 아이디어든 실현할 수 있습니다.

1단계 — 아이디어 구체화

Claude Code에게 아이디어를 던지고 기획을 잡습니다:

동네 카페 소개 사이트를 만들고 싶어.
어떤 페이지들이 필요하고, 어떤 기능이 있으면 좋을지 제안해줘.

2단계 — 기술 스택 결정

비전공자인 나도 혼자 유지보수할 수 있고,
무료로 배포할 수 있는 기술 스택 추천해줘.

보통 이 상황에서 Claude Code는 HTML/CSS/JavaScript 정적 사이트 또는 Next.js + Vercel 조합을 추천합니다.

3단계 — 개발 (바이브 코딩)

대화로 기능을 하나씩 만들어 나갑니다. 중요한 것은 작동 확인 → 다음 기능 사이클을 유지하는 것입니다.

4단계 — GitHub 업로드

이 프로젝트를 GitHub에 올리는 방법 알려줘.
git 초보야. 명령어도 같이 알려줘.

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/내아이디/내저장소.git
git push -u origin main

5단계 — Vercel로 배포

npm install -g vercel
vercel

몇 가지 질문에 답하면 https://내프로젝트.vercel.app 주소로 실제 배포가 됩니다. 무료입니다.

자주 묻는 질문 Q&A

Q. Claude Code는 유료인가요?

A. Anthropic API를 사용하기 때문에 사용량에 따라 비용이 발생합니다. 처음 가입 시 무료 크레딧이 제공되며, 일반적인 학습 수준의 사용은 월 5~10달러 정도입니다. 무거운 프로젝트가 아니면 비용 부담이 크지 않습니다.

Q. 완전히 비전공자도 쓸 수 있나요?

A. 네. 하지만 약간의 컴퓨터 기초 지식(파일/폴더 개념, 터미널 열기 정도)은 필요합니다. 터미널이 낯설다면 “터미널 기초” 검색으로 30분만 공부하면 충분합니다.

Q. 만든 코드를 이해 못 해도 괜찮나요?

A. 처음에는 괜찮습니다. 하지만 장기적으로는 Claude Code가 만들어준 코드를 읽고 이해하는 습관을 들이는 것이 좋습니다. “이 코드가 어떻게 동작하는지 설명해줘”라고 물어보면 친절하게 설명해 줍니다.

Q. AntiGravity는 Claude Code와 어떻게 다른가요?

A. AntiGravity는 바이브 코딩 환경을 더 쉽게 구성해주는 도구입니다. Claude Code가 엔진이라면, AntiGravity는 그 엔진을 더 쉽게 다룰 수 있게 해주는 인터페이스에 가깝습니다. 두 도구를 함께 쓰면 개발 속도가 더욱 빨라집니다.

Q. Claude Code로 어떤 것까지 만들 수 있나요?

A. 웹사이트, 웹앱, API 서버, 자동화 스크립트, 데이터 분석 도구, 챗봇 등 대부분의 소프트웨어를 만들 수 있습니다. 물론 복잡도가 올라갈수록 기초 지식이 뒷받침되어야 하지만, 단순한 서비스는 하루 만에도 완성 가능합니다.

Q. 오류가 계속 반복되면 어떻게 하나요?

A. 새 대화를 시작하거나, 문제가 되는 파일 내용을 Claude Code에게 직접 붙여넣고 “처음부터 다시 짜줘”라고 요청하는 것이 효과적입니다.

오늘 5분 실습

이론보다 실습. 오늘 당장 해볼 수 있는 미션입니다:

1. 터미널을 열고 claude --version 입력해서 설치 여부 확인
2. 설치가 안 되어 있다면 npm install -g @anthropic-ai/claude-code 실행
3. mkdir 5min-app && cd 5min-app && claude 실행
4. 다음 프롬프트 입력:
   오늘 날짜와 시간을 보여주는 HTML 파일을 만들어줘. 매초 자동 갱신되게.
5. open index.html 로 결과 확인

5분이면 실시간 시계 앱이 완성됩니다. 이게 바이브 코딩의 시작입니다.

마무리

Claude Code는 “코딩을 배우지 않아도 되는” 도구가 아닙니다. 오히려 코딩을 더 빠르게 배우면서 동시에 결과물을 만들 수 있는 도구입니다. 비전공자에게 가장 큰 장벽은 “내가 만든 것이 실제로 동작하는 것을 보기까지 너무 오래 걸린다”는 것입니다. 바이브 코딩은 그 장벽을 낮춥니다.

오늘 소개한 내용은 시작에 불과합니다. Claude Code를 매일 조금씩 쓰다 보면 어느 순간 “나도 만들 수 있구나”라는 감각이 생깁니다. 그 감각이 생기는 순간이 진짜 개발자로의 출발점입니다.

더 깊은 실습과 커리큘럼이 필요하다면 미래이음연구소(lab.duonedu.net)에서, 교육 출판 자료는 두온교육(main.duonedu.net)에서 확인하세요.

Claude Code란 무엇인가

코딩을 배우고 싶지만 어디서부터 시작해야 할지 막막했던 경험, 누구나 한 번쯤 있을 것입니다. 변수, 함수, 클래스… 낯선 개념들 앞에서 포기하고 싶어진 적도 있을 것입니다. 그런데 2025년부터 완전히 다른 방식으로 코딩하는 사람들이 늘어나고 있습니다. 바로 바이브 코딩(Vibe Coding)입니다.

바이브 코딩의 핵심 도구 중 하나가 Claude Code입니다. Anthropic이 만든 Claude Code는 터미널(명령줄)에서 AI와 대화하며 코드를 작성하고, 파일을 수정하고, 프로젝트 전체를 함께 구성하는 도구입니다. 단순히 코드 한 줄을 생성하는 수준이 아니라, 프로젝트의 구조를 이해하고 여러 파일을 동시에 수정하며 실제 개발자처럼 작업합니다.

비전공자에게 Claude Code가 강력한 이유는 명확합니다. “이런 기능을 만들고 싶어”라고 말하면, AI가 직접 코드를 짜줍니다. 여러분은 결과물을 검토하고 방향을 잡아주기만 하면 됩니다. 프로그래밍 문법을 완벽히 몰라도, 아이디어를 현실로 만들 수 있습니다.

Claude Code vs 일반 AI 챗봇의 차이

ChatGPT나 Claude.ai 같은 웹 인터페이스와 Claude Code의 가장 큰 차이는 컨텍스트(맥락) 인식 능력입니다.

• 일반 AI 챗봇: 코드 스니펫을 대화창에 복사-붙여넣기. 파일 구조를 모르고, 이전 파일과의 연결 관계를 파악하지 못함
• Claude Code: 실제 프로젝트 폴더를 직접 읽고 분석. 파일 간의 관계를 파악하여 일관성 있는 수정 가능. 명령어 실행, 파일 생성/수정 직접 수행

쉽게 말해, 일반 AI 챗봇은 “조언을 해주는 선생님”이고, Claude Code는 “함께 일하는 개발자 동료”입니다.

설치 및 초기 설정 (5분 완성)

사전 준비: Node.js 설치 확인

Claude Code는 Node.js 환경에서 실행됩니다. 먼저 터미널을 열고 다음 명령어로 Node.js가 설치되어 있는지 확인합니다.

node --version

v18.0.0 이상의 버전이 표시되면 준비 완료입니다. 설치가 안 되어 있다면 nodejs.org에서 LTS 버전을 다운로드하세요.

Claude Code 설치

터미널에서 아래 명령어 한 줄로 설치합니다.

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

설치가 완료되면 다음 명령어로 버전을 확인합니다.

claude --version

Anthropic API 키 설정

Claude Code를 사용하려면 Anthropic API 키가 필요합니다. console.anthropic.com에서 계정을 만들고 API 키를 발급받으세요.

API 키를 환경 변수로 설정합니다.

# macOS / Linux
export ANTHROPIC_API_KEY="sk-ant-여기에_발급받은_키_입력"

# Windows PowerShell
$env:ANTHROPIC_API_KEY="sk-ant-여기에_발급받은_키_입력"

매번 터미널을 열 때마다 설정하기 번거롭다면 ~/.zshrc 또는 ~/.bashrc 파일에 위 export 줄을 추가해두면 자동으로 적용됩니다.

첫 실행 및 로그인

claude

처음 실행 시 약관 동의와 기본 설정을 진행합니다. 완료되면 > 프롬프트가 나타나며 AI와 대화를 시작할 수 있습니다.

첫 번째 프로젝트: 간단한 웹페이지 만들기

이제 실제로 첫 프로젝트를 만들어봅시다. 목표는 “나를 소개하는 간단한 웹페이지”를 만드는 것입니다. HTML, CSS를 전혀 몰라도 됩니다.

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

mkdir my-portfolio
cd my-portfolio

2단계: Claude Code 실행

claude

3단계: 자연어로 요청하기

이제 AI에게 원하는 것을 말하듯이 입력합니다.

나를 소개하는 심플한 웹페이지를 만들어줘. 
이름은 "이신우"이고, 직업은 교육 연구자야.
배경은 어두운 색이고, 이름은 크게 보여줘.
연락처 이메일 info@duonedu.net도 넣어줘.

Claude Code는 이 요청을 받아 index.html 파일을 직접 생성합니다. 생성된 파일을 브라우저로 열어보면 실제 웹페이지가 동작하는 것을 확인할 수 있습니다.

4단계: 수정 요청

결과물이 마음에 들지 않는 부분이 있다면 이어서 대화하면 됩니다.

글씨체를 좀 더 세련되게 바꿔줘. 
Google Fonts에서 Noto Sans KR 써줘.
그리고 하단에 "두온교육 출판사" 링크도 추가해줘.

Claude Code는 이미 생성한 index.html 파일의 내용을 기억하고, 필요한 부분만 정확하게 수정합니다. 복사-붙여넣기 없이, 대화만으로 반복 수정이 가능합니다.

5단계: 명령어로 결과 확인

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

# Windows에서 브라우저로 바로 열기
start index.html

비전공자를 위한 핵심 사용 팁

요청은 구체적으로, 목적은 명확하게

AI에게 요청할 때 가장 중요한 것은 구체성입니다. 막연하게 “예쁘게 만들어줘”보다 “파란색 계열로, 버튼은 둥글게, 폰트 크기는 18px로”처럼 구체적으로 말할수록 원하는 결과에 가까워집니다.

좋은 요청 예시:

버튼 색상을 #3b82f6 (파란색)으로 바꾸고, 
마우스를 올렸을 때 색이 약간 밝아지는 효과를 추가해줘.

나쁜 요청 예시:

버튼 좀 더 예쁘게 해줘.

단계별로 나눠서 요청하기

처음부터 완성된 결과물을 한 번에 요청하기보다, 단계적으로 만들어가는 방식이 훨씬 효과적입니다. 먼저 기본 구조를 잡고, 이후 기능을 추가하고, 마지막에 디자인을 다듬는 순서로 진행하세요.

/help 명령어 활용

Claude Code 내에서 사용 가능한 명령어 목록을 확인할 수 있습니다.

/help

자주 쓰는 명령어:

• /clear — 대화 기록을 초기화하고 새로 시작
• /compact — 긴 대화를 요약하여 컨텍스트 절약
• /cost — 현재 세션에서 사용한 API 비용 확인

CLAUDE.md 파일로 프로젝트 규칙 설정

프로젝트 폴더에 CLAUDE.md 파일을 만들면, Claude Code가 세션을 시작할 때마다 이 파일을 읽어 프로젝트 규칙을 자동으로 인식합니다.

# CLAUDE.md 예시

## 프로젝트 소개
이신우 교육 연구자 포트폴리오 웹사이트

## 기술 스택
- HTML5, CSS3 (프레임워크 없이 순수 CSS 사용)
- JavaScript (라이브러리 없이 바닐라 JS)

## 코딩 규칙
- 주석은 한국어로 작성
- 클래스 이름은 케밥 케이스(kebab-case) 사용
- 색상 코드는 변수로 관리 (CSS 변수 활용)

이렇게 설정해두면 새 세션에서도 AI가 일관된 스타일로 코드를 작성합니다.

자주 묻는 질문 Q&A

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

A. Anthropic API는 사용량에 따라 과금됩니다. 소규모 개인 프로젝트 기준으로 하루 1~2시간 사용 시 월 10~20달러 수준입니다. Anthropic Console에서 사용 한도를 설정할 수 있어 예상치 못한 과금을 방지할 수 있습니다.

Q. 인터넷이 없으면 사용할 수 없나요?

A. Claude Code는 Anthropic 서버에 연결하여 동작하므로 인터넷 연결이 필요합니다. 오프라인 환경에서는 사용이 불가합니다.

Q. 만들어진 코드를 제대로 이해하지 못해도 괜찮을까요?

A. 처음에는 이해하지 못해도 괜찮습니다. 하지만 AI에게 “이 코드가 어떻게 동작하는지 설명해줘”라고 물어보는 습관을 들이면, 자연스럽게 코딩 지식이 쌓입니다. 바이브 코딩은 코딩을 배우는 새로운 방법이기도 합니다.

Q. 보안에 민감한 코드(API 키, 비밀번호 등)도 AI에게 보여줘도 되나요?

A. 절대 안 됩니다. API 키나 비밀번호 같은 민감한 정보는 환경 변수 파일(.env)에 별도 관리하고, AI와의 대화에는 포함시키지 마세요. .gitignore에도 반드시 추가해야 합니다.

Q. Claude Code와 GitHub Copilot의 차이점은 무엇인가요?

A. GitHub Copilot은 코드 에디터(VS Code 등) 내에서 자동 완성을 도와주는 도구입니다. Claude Code는 터미널에서 전체 프로젝트를 관리하며 대화형으로 개발하는 방식입니다. 두 도구를 함께 사용하면 시너지가 납니다.

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

A. 네, Windows에서도 동작합니다. 다만 WSL2(Windows Subsystem for Linux)를 사용하면 더 안정적인 환경을 구성할 수 있어 권장합니다.

오늘 5분 실습

이론은 충분합니다. 지금 바로 해봅시다.

실습 목표: Claude Code로 “오늘의 할 일 목록” 웹앱 만들기

Step 1. 터미널에서 폴더를 만들고 이동합니다.

mkdir todo-app
cd todo-app
claude

Step 2. 아래 문장을 그대로 AI에게 입력합니다.

할 일을 추가하고 체크할 수 있는 간단한 투두 리스트 웹앱을 만들어줘.
HTML 파일 하나로 완성되어야 해.
디자인은 미니멀하게, 배경은 흰색, 완료한 항목은 취소선으로 표시해줘.

Step 3. 생성된 index.html을 브라우저로 열어 실제로 동작하는지 확인합니다.

Step 4. (보너스) 마음에 들지 않는 부분을 AI에게 수정 요청해봅니다.

5분 실습을 마치면 여러분은 이미 바이브 코딩을 시작한 것입니다. 첫 발이 가장 중요합니다.

마무리

Claude Code는 비전공자에게 코딩의 장벽을 낮춰주는 강력한 도구입니다. 문법을 외우지 않아도, 수백 시간의 학습 없이도, 아이디어를 바로 구현할 수 있는 시대가 왔습니다. 바이브 코딩은 단순히 편한 코딩 방법이 아니라, 누구나 디지털 창작자가 될 수 있는 패러다임의 전환입니다.

더 많은 교육 콘텐츠와 AI 활용 정보는 두온교육(main.duonedu.net)에서 확인하세요. 바이브 코딩 실전 교육은 미래이음연구소(lab.duonedu.net)에서 신청할 수 있습니다.

목차

1. Claude Code란 무엇인가 — 코딩 없이 코딩하는 시대
2. 설치부터 첫 실행까지 — 10분 안에 끝내기
3. 비전공자 첫 프로젝트 실습 — 메모 앱 만들기
4. Claude Code를 200% 활용하는 프롬프트 작성법
5. 실제 비전공자 수강생 사례 3가지
6. 자주 묻는 질문 Q&A
7. 오늘 바로 시작하는 5분 실습

Claude Code란 무엇인가 — 코딩 없이 코딩하는 시대

2026년 현재, 소프트웨어 개발의 패러다임이 근본적으로 바뀌고 있습니다. 더 이상 개발자가 되려면 수년간의 공부가 필요하지 않습니다. Claude Code는 Anthropic이 만든 AI 기반 코딩 에이전트로, 자연어로 대화하듯 명령하면 실제로 동작하는 코드를 작성해주는 혁신적인 도구입니다.

바이브 코딩(Vibe Coding)이라는 개념은 바로 이런 흐름에서 탄생했습니다. "느낌대로 코딩한다"는 의미처럼, 정확한 문법을 몰라도 내가 원하는 것을 말로 설명하면 AI가 코드를 생성하고 실행하고 수정합니다. Claude Code는 이 바이브 코딩의 핵심 도구입니다.

Claude Code가 일반 AI 챗봇과 다른 점은 무엇일까요? 단순히 코드를 보여주는 것이 아니라 직접 파일을 만들고, 수정하고, 터미널 명령어를 실행하고, 오류를 스스로 디버깅합니다. 마치 옆에 전문 개발자가 앉아서 내 말을 듣고 즉시 작업해주는 느낌입니다.

2025년 기준으로 Claude Code를 활용한 개발 생산성은 기존 대비 평균 3~5배 향상된다는 연구 결과가 나오고 있습니다. 비전공자의 경우 아예 불가능했던 작업이 가능해지는 경우도 많습니다.

설치부터 첫 실행까지 — 10분 안에 끝내기

Claude Code 설치는 생각보다 훨씬 간단합니다. 필요한 것은 Node.js와 npm, 그리고 Anthropic API 키뿐입니다. 단계별로 따라해봅시다.

1단계: Node.js 설치 확인

터미널(Mac은 Terminal, Windows는 PowerShell)을 열고 다음 명령어를 입력합니다:

node --version
npm --version

버전 번호가 나오면 이미 설치되어 있는 것입니다. 없다면 nodejs.org에서 LTS 버전을 설치하세요. 설치 시간은 약 3분입니다.

2단계: Claude Code 설치

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

이 명령어 하나로 Claude Code가 전역 설치됩니다. 설치 완료까지 약 1~2분 소요됩니다.

3단계: API 키 설정

Anthropic 콘솔(console.anthropic.com)에서 API 키를 발급받은 후:

export ANTHROPIC_API_KEY=sk-ant-여기에키입력

Mac/Linux 사용자는 ~/.zshrc 또는 ~/.bashrc 파일에 위 줄을 추가해두면 매번 입력하지 않아도 됩니다.

4단계: 첫 실행

mkdir my-first-project
cd my-first-project
claude

이렇게 하면 Claude Code가 실행되고 대화형 인터페이스가 나타납니다. 여기서부터 한국어로 자유롭게 대화할 수 있습니다.

첫 실행 시 "안녕하세요, 간단한 HTML 페이지 하나 만들어줘"라고 입력해보세요. 그러면 Claude Code가 즉시 파일을 생성합니다. 이 순간이 바로 비전공자가 처음 AI와 함께 코딩하는 역사적인 순간입니다.

비전공자 첫 프로젝트 실습 — 메모 앱 만들기

이제 실제로 사용할 수 있는 메모 앱을 만들어보겠습니다. 코딩 지식이 전혀 없어도 따라할 수 있습니다. 완성까지 약 15~20분이 걸립니다.

프로젝트 시작

mkdir memo-app
cd memo-app
claude

Claude Code에게 명령하기

Claude Code가 실행되면 다음과 같이 입력합니다:

간단한 메모 앱을 만들어줘. 기능은:
1. 메모 작성 (제목 + 내용)
2. 저장된 메모 목록 보기
3. 메모 삭제
HTML, CSS, JavaScript만 사용하고 서버 없이 브라우저에서 바로 실행되게 해줘.
디자인은 깔끔하고 모바일에서도 잘 보이게 해줘.

Claude Code는 이 명령을 받아 자동으로 파일을 생성합니다. 보통 30초~1분 안에 완성됩니다.

생성된 파일 구조

memo-app/
  index.html    (메인 페이지)
  style.css     (디자인)
  app.js        (기능 로직)

실행 및 확인

# Claude Code에게 요청
브라우저에서 바로 열 수 있게 index.html 경로를 알려줘

또는 터미널에서:

open index.html   # Mac
start index.html  # Windows

브라우저에서 메모 앱이 열리면 성공입니다. 메모를 작성하고 저장하고 삭제해보세요.

기능 추가하기

기본 앱이 완성되면 Claude Code와 대화로 기능을 계속 추가할 수 있습니다:

메모에 중요도 표시(별표) 기능을 추가해줘
메모를 날짜순으로 정렬하는 옵션을 추가해줘
메모 내용을 검색할 수 있게 해줘

각 요청마다 Claude Code가 기존 코드를 수정하고 새 기능을 추가합니다. 이것이 바이브 코딩의 진정한 매력입니다. 대화하듯 개발하는 것입니다.

Claude Code를 200% 활용하는 프롬프트 작성법

Claude Code를 잘 활용하려면 AI에게 명령하는 방법, 즉 프롬프트 작성법이 중요합니다. 비전공자가 자주 하는 실수와 올바른 방법을 비교해보겠습니다.

나쁜 프롬프트 vs 좋은 프롬프트

나쁜 예시:

웹사이트 만들어줘

좋은 예시:

소규모 카페를 운영하는 사장님을 위한 메뉴 소개 웹사이트를 만들어줘.
- 페이지 구성: 홈, 메뉴, 위치/영업시간, 문의
- 메뉴는 카드 형태로 사진, 이름, 가격, 설명 포함
- 색상: 따뜻한 브라운 톤
- 모바일 최적화 필수
- 간단한 예약 문의 폼 포함 (이름, 전화번호, 날짜)

핵심 프롬프트 패턴 5가지

1. 역할 부여 패턴

너는 10년 경력의 프론트엔드 개발자야. 
다음 코드를 리뷰하고 개선점을 알려줘: [코드]

2. 단계별 분해 패턴

이 프로젝트를 3단계로 나눠서 진행하자.
1단계만 먼저 완성해줘. 완성되면 알려줘.

3. 제약 조건 명시 패턴

외부 라이브러리 없이 순수 JavaScript만 써줘.
파일은 하나(index.html)로 합쳐줘.
코드에 한국어 주석을 달아줘.

4. 오류 해결 패턴

다음 오류가 발생했어: [오류 메시지]
어떤 코드에서 발생한 건지 찾아서 고쳐줘.

5. 반복 개선 패턴

방금 만든 것에서 버튼 색을 파란색으로 바꾸고
클릭하면 애니메이션 효과를 추가해줘.

비전공자가 꼭 알아야 할 팁

Claude Code와 대화할 때는 구체적인 예시를 들수록 좋습니다. "예쁘게 만들어줘"보다 "애플 홈페이지처럼 미니멀하고 여백이 많게 만들어줘"가 훨씬 좋은 결과를 냅니다.

또한 한 번에 너무 많은 것을 요청하지 마세요. 큰 프로젝트는 작은 단위로 나눠서 하나씩 완성해가는 것이 훨씬 효율적입니다. 평균적으로 한 번의 프롬프트에는 2~3가지 요청이 적당합니다.

실제 비전공자 수강생 사례 3가지

미래이음연구소에서 바이브 코딩을 배운 실제 수강생들의 사례를 소개합니다. 이들은 모두 코딩 경험이 전혀 없었습니다.

사례 1: 소상공인 김사장님 (50대, 카페 운영)

홈페이지 제작 견적을 알아보니 300만원이 넘었습니다. 미래이음연구소에서 Claude Code를 배운 후 혼자 카페 홈페이지를 만들었습니다. 메뉴 페이지, 예약 시스템, 인스타그램 연동까지 완성하는 데 걸린 시간은 단 이틀이었습니다.

핵심 프롬프트:

카페 홈페이지에 네이버 예약 링크 버튼을 추가하고
클릭 수를 카운트해서 관리자 페이지에서 볼 수 있게 해줘

사례 2: 초등학교 교사 이선생님 (30대)

학생 출결 관리를 위한 웹앱을 만들었습니다. 기존에는 엑셀로 관리하던 것을 모바일에서도 쓸 수 있는 웹앱으로 바꿨습니다. 특히 "결석 사유를 카테고리별로 분류해서 월별 통계 차트로 보여줘"라는 프롬프트 하나로 차트 기능까지 구현했습니다.

사례 3: 스타트업 기획자 박대리 (20대)

개발팀에 의존하지 않고 직접 프로토타입을 만들 수 있게 되었습니다. MVP(최소 기능 제품) 제작 기간이 기존 2주에서 2~3일로 단축되었습니다. 투자자 데모 전날 새벽에 Claude Code로 주요 기능을 모두 수정했다고 합니다.

이 세 사례의 공통점은 기술을 배운 것이 아니라 도구를 배웠다는 점입니다. Claude Code는 기술적 장벽을 없애고 아이디어를 현실로 만드는 능력 자체를 민주화합니다.

자주 묻는 질문 Q&A

Q. 코딩을 전혀 몰라도 Claude Code를 쓸 수 있나요?

A. 네, 충분히 가능합니다. 다만 기본적인 웹의 개념(HTML, 파일, 폴더 등)을 이해하면 더 효과적으로 활용할 수 있습니다. 미래이음연구소의 바이브 코딩 입문 과정은 이런 기초 개념과 Claude Code 활용을 함께 가르칩니다.

Q. 비용은 얼마나 드나요?

A. Anthropic API는 사용량 기반 과금입니다. 간단한 프로젝트 하나를 만드는 데 보통 100~500원 수준입니다. 하루에 열심히 개발해도 1만원 이하인 경우가 대부분입니다. Claude.ai Pro 구독(약 25달러/월)을 사용하면 API 키 없이도 Claude Code를 쓸 수 있는 옵션도 있습니다.

Q. 만든 웹앱을 실제로 인터넷에 올릴 수 있나요?

A. 네. Vercel, Netlify, GitHub Pages 같은 무료 호스팅 서비스를 이용하면 됩니다. Claude Code에게 "이 프로젝트를 Vercel에 배포하는 방법을 단계별로 알려줘"라고 하면 친절하게 안내해줍니다. 실제 배포까지 30분 안에 가능합니다.

Q. Claude Code가 만든 코드가 실제로 사용 가능한 품질인가요?

A. 간단한 프로젝트의 경우 바로 사용 가능한 수준입니다. 다만 보안이 중요한 서비스(결제, 개인정보 처리 등)는 전문 개발자의 검토를 거치는 것을 권장합니다. Claude Code 자체도 보안 관련 코드는 주의사항을 함께 알려줍니다.

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

A. Claude Code는 Anthropic에서 만든 공식 CLI 에이전트로, 터미널 기반 개발에 특화되어 있습니다. AntiGravity는 바이브 코딩 워크플로우를 더 쉽게 만들어주는 도구로, Claude Code와 함께 사용하면 시너지가 납니다. 미래이음연구소에서는 두 도구를 함께 가르칩니다.

Q. 스마트폰이나 태블릿에서도 쓸 수 있나요?

A. Claude Code 자체는 터미널 앱이 필요하지만, Claude.ai 웹사이트나 모바일 앱에서도 코드 작성을 도울 수 있습니다. 실제 개발 작업은 노트북/PC 환경이 적합합니다.

오늘 바로 시작하는 5분 실습

1. 터미널을 열고 node --version을 입력해 Node.js가 설치되어 있는지 확인한다
2. npm install -g @anthropic-ai/claude-code를 실행해 Claude Code를 설치한다
3. mkdir hello-vibe && cd hello-vibe && claude로 첫 세션을 시작한다
4. "안녕하세요를 크게 표시하는 HTML 페이지 만들어줘"라고 입력해본다
5. 생성된 index.html을 브라우저에서 열어 결과를 확인한다

5분 만에 첫 바이브 코딩 경험을 완료할 수 있습니다. 이 작은 시작이 여러분의 디지털 역량을 완전히 바꿔놓을 수 있습니다.

마무리 — 바이브 코딩이 여는 새로운 가능성

Claude Code로 대표되는 바이브 코딩은 단순한 개발 도구의 혁신이 아닙니다. 이것은 누가 디지털 세계에서 무언가를 만들 수 있는가에 대한 근본적인 질문에 대한 답입니다. 더 이상 개발자만의 전유물이 아닙니다.

기획자, 디자이너, 마케터, 교사, 소상공인 — 아이디어가 있는 모든 사람이 이제 자신의 도구를 직접 만들 수 있는 시대가 왔습니다.

두온교육(main.duonedu.net)에서는 AI 시대에 필요한 다양한 디지털 역량 강화 교육을 제공합니다. 그리고 미래이음연구소(lab.duonedu.net)에서는 Claude Code, AntiGravity를 비롯한 최신 바이브 코딩 도구를 실전에서 활용하는 방법을 직접 가르칩니다.

오늘 소개한 5분 실습부터 시작해보세요. 여러분의 첫 바이브 코딩 경험이 어떤 결과를 만들어낼지, 미래이음연구소가 응원합니다.