5분 퀵스타트

프로그래밍 경험이 없어도 OK! AI가 코드를 대신 작성해준다. 5분 만에 나만의 웹 앱을 만들어보자.

⏱️ 5분 기준 안내

이 페이지의 5분은 도구 설치와 초기 다운로드가 끝난 상태를 기준으로 합니다. 처음 실행에서는 네트워크와 시스템 환경에 따라 시간이 더 걸릴 수 있습니다.

👋 처음 오신 분, 환영합니다!

이 페이지는 완전 초보자를 위해 만들었습니다:

✅ 프로그래밍 몰라도 됨
✅ 복잡한 설치 필요 없음 (Node.js만 있으면OK)
✅ 5분 만에 결과물 완성

준비물: 컴퓨터, 인터넷, 타자칠 수 있는 키보드

⚡️ 이 페이지로 바로 시작하거나,

Vibe Coding 개념부터 읽으려면 여기를 클릭

그림 2: 5분 퀵스타트 전체 흐름

Vibe Coding이 뭐예요?

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

💡 한 줄 요약

"계산기 만들어줘"만 말하면 AI가 다 만들어줍니다!
(더 자세히 알아보려면 여기를 클릭 →)

그림 1: Vibe Coding은 이렇게 동작합니다

터미널이 뭔가요?

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

🖥️ 터미널을 여는 방법

Windows: 시작 버튼 → 명령 프롬프트 또는 PowerShell 검색
Mac: Cmd + Space → Terminal 입력
Linux: Ctrl + Alt + T

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

30초 사전 점검

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

# Node.js 버전 확인
node -v

# npm 버전 확인
npm -v

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

AI 도구 설치하기

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

어떤 도구를 골라야 하나요?

도구	비용	인터넷 필요	장점	단점
Ollama	무료	설치 때만	비용 걱정 없음, 오프라인 사용 가능	PC 사양에 따라 느릴 수 있음
OpenCode	무료 (오픈소스)	LLM API 사용 시	멀티 LLM 지원, TUI 인터페이스, 병렬 세션	별도 LLM API 키 필요
Claude Code	유료 (구독/API)	항상	코딩 능력 우수, 대규모 프로젝트에 강함	비용 발생
Codex CLI	유료 (API)	항상	OpenAI 생태계 연동, 빠른 응답	비용 발생, API 키 설정 필요

방법 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

Ollama는 처음 ollama run 실행 시 모델을 다운로드합니다(약 2-4GB). 인터넷 속도에 따라 5-15분 소요될 수 있습니다. 다운로드는 한 번만 하면 됩니다. 자세한 내용은 Ollama 설치 가이드를 참고하세요.

방법 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

OpenCode 자체는 무료 오픈소스이지만, 사용할 LLM의 API 키가 필요합니다. Ollama와 연동하면 완전 무료로 사용 가능합니다. 자세한 내용은 OpenCode 완전 가이드를 참고하세요.

방법 C: Claude Code 설치 (Anthropic)

Anthropic의 공식 AI 코딩 도구입니다. 첫 실행 시 브라우저에서 Anthropic 계정으로 로그인합니다.

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

# 1. Claude Code 설치
npm install -g @anthropic-ai/claude-code

# 2. 설치 확인
claude --version

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

별도 API 키 설정 없이 브라우저에서 로그인하면 바로 사용 가능합니다. 자세한 내용은 Claude CLI 시작 가이드를 참고하세요.

방법 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-..."

신규 가입 시 무료 크레딧이 제공됩니다. API 키 발급 후 위 환경변수를 설정하면 바로 사용 가능합니다.

작업 폴더 만들기

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

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

도구 실행하기

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

설치한 도구에 맞는 명령어 입력

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

# OpenCode를 설치했다면
opencode

# Claude Code를 설치했다면
claude

# Codex를 설치했다면
codex

⌨️ 종료/재시작 방법

CLI를 종료하려면 Ctrl + C를 누르세요. 다시 시작하려면 같은 명령어(opencode, claude, codex 등)를 다시 입력하면 됩니다.

🔑 잘 모르겠다면?

비용 부담 없이 시작하고 싶다면 Ollama, 클라우드 기반 도구를 쓰고 싶다면 Claude Code나 Codex 중 편한 것을 고르세요. 나중에 언제든 다른 도구로 바꿀 수 있으니 부담 없이 하나를 골라 시작하세요!

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

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

AI에게 말 걸기 (복사해서 사용)

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

💡 팁: 더 좋은 결과를 얻는 법

구체적으로: "계산기"보다 "사칙연산이 되는 계산기" 👍
디자인 언급: "세련된", "모던한", "파스텔 톤" 같은 단어 추가
기능 명시: "버튼 클릭하면 결과가 표시됨"
파일 개수: "HTML, CSS, JS 파일 3개로 만들어줘"

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

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

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

📁 만들어진 파일 확인

AI 도구가 다음과 같이 알려줄 거예요:

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

생성된 파일 실행하기

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

방법 A: 파일 바로 열기

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

# Mac
open index.html

# Linux
xdg-open index.html

방법 B: 로컬 서버로 실행 (권장)

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

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

🎉 축하합니다!

이제 당신의 첫 번째 Vibe Coding 프로젝트가 완성되었습니다!
브라우저에서 계산기가 보이면 성공입니다.

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

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

수정 요청 예시

💬 You:
"좋아! 이제 다음으로 바꿔줘:
1. 버튼 색상을 파란색으로
2. 결과가 바로 위에 표시됨"

🤖 Claude:
"수정 완료! 스타일과 레이아웃을 업데이트했습니다."

🔄 반복 개선이 핵심!

Vibe Coding은 대화형입니다. 몇 번이고 요청해서 나에게 맞는 결과물을 만드세요!

💬 다른 프로젝트 아이디어

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

📝 복사해서 바로 사용하세요

1. 메모장

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

2. 퀴즈 앱

문제 5개가 나오는 퀴즈 앱 만들어줘. 정답이면 점수 올라가고, 최종 점수 표시.

3. 다크모드 웹페이지

내 포트폴리오 웹페이지 만들어줘. 다크모드 토글 버튼 있고, 프로젝트 리스트를 그리드 형태로 표시.

4. 타이머

카운트다운 타이머 만들어줘. 시간 입력하면 카운트다운 시작하고, 0되면 알림 소리.

다음 단계

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

🟣 Claude로 시작

Anthropic Claude API 사용

Claude CLI 시작 →

🔵 Codex로 시작

OpenAI Codex 사용

Codex 가이드 →

🦙 무료로 시작

돈 안내고 Vibe Coding 하자

Ollama 시작 →

🔧 도구 비교

다른 AI 도구들도 직접 사용해봐!

CLI 도구 비교 →

📚 개념 이해

Vibe Coding이 뭔지 더 자세히 알고 싶다면

Vibe Coding이란? →

🎯 프롬프트 배우기

더 좋은 결과를 얻는 방법

프롬프트 기본 →

🗺️ 권장 학습 경로

1-2주차: Vibe Coding 개념 + Claude CLI or Ollama 설치
2-3주차: 프롬프트 기본 + 간단한 프로젝트 2-3개
3-4주차: API 연동 프로젝트 + 여러 도구 경험

전체 학습 경로 보기 →

문제 해결

자주 하는 질문

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

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

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

A: Claude CLI는 API 키가 필요합니다. 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가 만든 코드를 그냥 읽어보세요. Claude한테 "이 코드 설명해줘"라고 물어보면 친절하게 설명해줍니다.

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

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

핵심 정리

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