5분 퀵스타트

Vibe Coding이 뭐예요?

Vibe Coding(바이브 코딩)은 만들고 싶은 걸 말하면 AI가 코드를 대신 작성해 주는 새로운 개발 방식입니다.

터미널이 뭔가요?

터미널(또는 명령 프롬프트)은 컴퓨터에 직접 명령어를 입력하는 도구예요. 마우스로 클릭하는 대신 키보드로 타이핑해서 컴퓨터를 조종합니다.

Step 1: AI 도구 열기 (1분)

30초 사전 점검

먼저 Node.js와 npm이 설치되어 있는지 확인하세요:

# Node.js 버전 확인
node -v

# npm 버전 확인
npm -v

버전이 출력되면 정상입니다. 명령어를 찾을 수 없다고 나오면 nodejs.org에서 LTS 버전을 설치하세요.

AI 도구 설치하기

아래 4가지 중 하나만 골라서 설치하세요. 각 도구마다 장단점이 다르니 비교표를 보고 본인에게 맞는 것을 선택하세요.

방법 A: Ollama 설치 (무료, API 키 불필요)

내 컴퓨터에서 무료로 AI를 실행합니다. 계정 가입이나 API 키 없이 바로 시작할 수 있습니다.

• 공식 사이트: ollama.com
• 다운로드: ollama.com/download (macOS / Windows / Linux)
• 사용 가능한 모델 목록: ollama.com/library
• GitHub: github.com/ollama/ollama

# macOS / Linux: 한 줄 설치
curl -fsSL https://ollama.com/install.sh | sh

# Windows: 위 다운로드 링크에서 설치 파일 받기

# 설치 확인
ollama --version

# AI 모델 다운로드 + 실행 (첫 실행 시 ~4GB 다운로드)
ollama run llama3.2

방법 B: OpenCode 설치 (오픈소스, 멀티 LLM)

다양한 LLM(Claude, GPT, Gemini, Ollama 등)을 하나의 도구에서 전환하며 사용할 수 있는 오픈소스 터미널 AI 코딩 에이전트입니다.

• 공식 사이트: opencode.ai
• GitHub: github.com/sst/opencode
• 설치 안내: opencode.ai/docs/installation

# macOS (Homebrew)
brew install sst/tap/opencode

# npm으로 설치
npm install -g opencode

# 또는 Go로 직접 설치
go install github.com/sst/opencode@latest

# 설치 확인
opencode --version

# 실행 (TUI 인터페이스가 열립니다)
opencode

방법 C: Claude Code 설치 (Anthropic)

Anthropic의 공식 AI 코딩 도구입니다. Claude Pro($20/월) 또는 Max($100/월) 구독이 필요합니다. 무료 티어에서는 사용할 수 없습니다.

• 공식 문서: docs.anthropic.com/en/docs/claude-code
• Anthropic 콘솔 (API 키 발급): console.anthropic.com
• GitHub: github.com/anthropics/claude-code

# 1. Claude Code 설치 (npm 또는 네이티브 설치자)
npm install -g @anthropic-ai/claude-code

# 2. 설치 확인
claude --version

# 3. 처음 실행하면 브라우저에서 로그인 안내가 나옵니다
claude

방법 D: Codex CLI 설치 (OpenAI)

OpenAI의 AI 코딩 도구입니다. OpenAI 계정과 API 키가 필요합니다.

• 공식 안내: github.com/openai/codex
• API 키 발급: platform.openai.com/api-keys
• OpenAI 개발자 문서: platform.openai.com/docs

# 1. Codex CLI 설치 (npx로 자동 설치+실행)
npx -y @openai/codex

# 또는 글로벌 설치 후 실행
npm install -g @openai/codex
codex

# 2. API 키 설정 (위 링크에서 발급)
export OPENAI_API_KEY="sk-..."

작업 폴더 만들기

설치가 끝났으면, 파일이 섞이지 않도록 새 폴더를 만들고 그 안에서 시작합니다:

# 새 프로젝트 폴더 생성
mkdir my-first-vibe
cd my-first-vibe

도구 실행하기

작업 폴더에서 설치한 도구를 실행하세요:

# Ollama를 설치했다면
ollama run llama3.2

# OpenCode를 설치했다면
opencode

# Claude Code를 설치했다면
claude

# Codex를 설치했다면
codex

Step 2: 만들고 싶은 것 말하기 (1분)

선택한 AI 도구가 실행되면, 만들고 싶은 것을 한국어로 자세히 설명하세요. 다음과 같이 입력하면 됩니다:

💬 You:
안녕! HTML로 간단한 계산기 웹 페이지 만들어줘.
요구사항:
- 더하기/빼기/곱하기/나누기 버튼
- 결과가 아래에 표시되고
- 디자인은 깔끔하고 세련되게

메모를 저장할 수 있는 간단한 메모장 만들어줘. 텍스트 입력하고 저장 버튼 누르면 localStorage에 저장되게. 다크모드 지원.

카운트다운 타이머 만들어줘. 시간(분/초) 입력하면 카운트다운 시작하고, 0되면 알림 소리. 큰 숫자로 남은 시간 표시.

내 포트폴리오 웹페이지 만들어줘. 히어로 섹션, 프로젝트 그리드(이미지+설명), 연락처 폼. 모던한 다크 테마.

더 많은 팁은 프롬프트 기본에서 확인!

Step 3: 결과 확인하기 (2분)

선택한 AI 도구가 코드를 생성하면 자동으로 파일이 만들어집니다. 보통 index.html, style.css, script.js 같은 파일이 생겨요.

📄 index.html - 메인 파일 (화면을 구성)
🎨 style.css - 디자인/스타일
⚙️ script.js - 기능/동작

생성된 파일 실행하기

만든 파일을 브라우저에서 열어서 확인하세요:

# Windows (명령 프롬프트)
start index.html

# Mac
open index.html

# Linux
xdg-open index.html

# 현재 폴더에서 HTTP 서버 실행
python3 -m http.server 8000

# 브라우저에서 열기
# http://localhost:8000

# npx serve로 간편 실행 (별도 설치 불필요)
npx serve

# 또는 http-server 사용
npx http-server -p 8080

Step 4: 수정 요청하기 (1분)

마음에 들지 않는 부분이 있으면 바로 수정 요청하세요.

🎨 디자인 변경 요청

💬 You:
"버튼 색상을 파란색으로 바꾸고, 결과 표시 영역을 계산기 위쪽으로 옮겨줘.
전체 배경은 연한 회색으로."

🤖 AI:
"수정 완료! 버튼은 #3B82F6 파란색으로 변경하고,
결과 표시를 입력 영역 위쪽으로 이동했습니다.
배경은 #F3F4F6 연한 회색으로 적용했습니다."

➕ 기능 추가 요청

💬 You:
"계산기에 다음 기능도 추가해줘:
1. 퍼센트(%) 계산 버튼
2. 소수점 둘째 자리까지 표시
3. 계산 기록을 아래에 리스트로 보여줘"

🤖 AI:
"3가지 기능을 모두 추가했습니다!
% 버튼은 우측 상단에 배치했고,
결과는 toFixed(2)로 소수점 둘째 자리까지 표시됩니다.
계산 기록은 스크롤 가능한 리스트로 하단에 표시됩니다."

🐛 버그 수정 요청

💬 You:
"나누기 버튼을 누르고 0을 입력하면 "Infinity"가 표시돼.
0으로 나눌 때 "오류" 메시지가 뜨게 고쳐줘."

🤖 AI:
"0으로 나누기 검증 로직을 추가했습니다.
divide 함수에서 divisor가 0이면 "오류: 0으로 나눌 수 없습니다"를 반환합니다."

💬 다른 프로젝트 아이디어

다른 것도 만들어보고 싶나요? 아래 예시를 복사해서 사용하세요:

🟢 쉬운 프로젝트 (5~10분)

메모를 저장할 수 있는 간단한 메모장 만들어줘. 텍스트 입력하고 저장 버튼 누르면 localStorage에 저장되게. 다크모드 지원.

랜덤 비밀번호 생성기 만들어줘. 길이(8~32), 대소문자, 숫자, 특수문자 포함 여부를 체크박스로 선택. 생성된 비밀번호 복사 버튼 추가.

BMI 계산기 만들어줘. 키(cm)와 체중(kg) 입력하면 BMI 결과와 비만도(저체중/정상/과체중/비만)를 색상과 함께 표시.

🟡 중간 프로젝트 (15~30분)

5문제 객관식 퀴즈 앱 만들어줘. 각 문제에 4개 선택지, 정답이면 초록색 피드백, 오답이면 빨간색. 최종 점수와 정답률 표시. 다음 문제 버튼.

2026년 달력 웹 앱 만들어줘. 월별 이동 버튼, 오늘 날짜 강조 표시, 특정 날짜 클릭하면 메모 입력 가능. localStorage 저장.

할 일 관리 대시보드 만들어줘. 중요도/마감일별 정렬, 진행률 프로그레스바, 카테고리별 필터링, 완료 항목 회색 처리. localStorage 저장.

🔴 도전 프로젝트 (30분+)

내 포트폴리오 웹페이지 만들어줘. 히어로 섹션(이름+한 줄 소개), 프로젝트 카드 그리드(이미지+설명+링크), 기술 스택 섹션, 연락처 폼. 모던한 다크 테마.

가상의 실시간 채팅 앱 UI 만들어줘. 좌측 사용자 목록, 중앙 메시지 영역, 하단 입력창. 메시지 전송 버튼, 타임스탬프 표시, 다크모드 지원.

다음 단계

Vibe Coding의 매력을 느꼈나요? 이제 더 깊이 있게 배워보세요!

문제 해결

자주 하는 질문

Q: "npx: command not found" 오류가 떠요

A: Node.js가 설치되지 않았습니다. nodejs.org에서 LTS 버전을 다운로드하고 설치하세요.

Q: "API key not found" 오류가 떠요

A: Claude Code는 Pro($20/월) 이상 구독이 필요합니다. Ollama로 무료 시작을 해보세요!

Q: 파일이 안 만들어져요

A: 현재 디렉토리에 쓰기 권한이 있는지 확인하세요. 빈 디렉토리(새 폴더)에서 다시 시도해 보세요.

Q: "Permission denied" 또는 접근 권한 오류가 떠요

A: 시스템 폴더에서 실행 중일 가능성이 큽니다. 홈 디렉토리 아래 새 폴더를 만들고(mkdir my-first-vibe), 그 폴더에서 다시 실행하세요.

Q: "Port 8000 is already in use" 오류가 떠요

A: 이미 다른 프로그램이 8000 포트를 사용 중입니다. python3 -m http.server 8080처럼 다른 포트로 실행하고 http://localhost:8080으로 접속하세요.

Q: 코드가 뭔지 하나도 모르겠어요

A: 괜찮습니다! AI가 만든 코드를 그냥 읽어보세요. AI에게 "이 코드 설명해줘"라고 물어보면 친절하게 설명해줍니다.

Q: Ollama 모델 다운로드가 실패해요

A: 디스크 용량이 충분한지 확인하세요(모델 1개당 2~6GB). ollama pull llama3.2로 다시 시도하고, 그래도 안 되면 Ollama 설치 가이드를 참고하세요.

Q: 윈도우에서 Claude Code가 안 돼요

A: Claude Code는 WSL2에서 가장 잘 동작합니다. PowerShell이 아닌 WSL 터미널에서 claude를 실행하세요. WSL2 설치는 Microsoft 공식 가이드를 참고하세요.

Q: AI가 이상한 코드를 만들었어요

A: 프롬프트를 더 구체적으로 작성해보세요. "오류 없이 동작하는" 같은 조건을 추가하거나, 에러 메시지를 AI에게 붙여넣으면 더 정확한 수정이 가능합니다.

Q: 더 쉬운 방법은 없나요?

A: 있습니다! Ollama로 시작하기는 무료로 AI를 사용할 수 있는 방법이에요. API 키도 필요 없고요.

핵심 정리

• Vibe Coding = 만들고 싶은 걸 말하면 AI가 코드를 대신 작성
• Step 1: Claude CLI, Codex, Ollama 중 선택해서 실행
• Step 2: 만들고 싶은 걸 한국어로 설명
• Step 3: 생성된 파일을 브라우저에서 확인
• Step 4: 마음에 안 들면 바로 수정 요청!