5분 퀵스타트
프로그래밍 경험이 없어도 OK! AI가 코드를 대신 작성해준다. 5분 만에 나만의 웹 앱을 만들어보자.
이 페이지의 5분은 도구 설치와 초기 다운로드가 끝난 상태를 기준으로 합니다. 처음 실행에서는 네트워크와 시스템 환경에 따라 시간이 더 걸릴 수 있습니다.
이 페이지는 완전 초보자를 위해 만들었습니다:
- ✅ 프로그래밍 몰라도 됨
- ✅ 복잡한 설치 필요 없음 (Node.js만 있으면OK)
- ✅ 5분 만에 결과물 완성
준비물: 컴퓨터, 인터넷, 타자칠 수 있는 키보드
그림 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 버전을 설치하세요.
작업 폴더 만들기
파일이 섞이지 않도록 새 폴더를 만들고 그 안에서 시작하는 것을 권장합니다:
# 새 프로젝트 폴더 생성
mkdir my-first-vibe
cd my-first-vibe아래 도구 중 하나를 선택해서 터미널(또는 명령 프롬프트)에서 실행하세요:
# 방법 1: Claude CLI (추천)
npx claude
# 방법 2: Codex CLI (OpenAI)
npx -y @openai/codex
# 방법 3: Ollama (무료, 로컬)
ollama run llama3.2
처음 쓰면 패키지를 다운로드하라고 물어봅니다.
y 를 입력하고 Enter를 치세요.
CLI를 종료하려면 Ctrl + C를 누르세요.
다시 시작하려면 같은 명령어(npx claude 또는 npx -y @openai/codex 등)를 다시 입력하면 됩니다.
- Claude CLI: Anthropic API 키 필요, 강력한 코딩역량
- Codex: OpenAI API 키 필요, 코드 작업에 특화
- Ollama: 무료, 로컬 실행, API 키 불필요
Step 2: 만들고 싶은 것 말하기 (1분)
선택한 AI 도구가 실행되면, 만들고 싶은 것을 한국어로 자세히 설명하세요. 다음과 같이 입력하면 됩니다:
💬 You:
안녕! HTML로 간단한 계산기 웹 페이지 만들어줘.
요구사항:
- 더하기/빼기/곱하기/나누기 버튼
- 결과가 아래에 표시되고
- 디자인은 깔끔하고 세련되게- 구체적으로: "계산기"보다 "사칙연산이 되는 계산기" 👍
- 디자인 언급: "세련된", "모던한", "파스텔 톤" 같은 단어 추가
- 기능 명시: "버튼 클릭하면 결과가 표시됨"
- 파일 개수: "HTML, CSS, JS 파일 3개로 만들어줘"
더 많은 팁은 프롬프트 기본에서 확인!
Step 3: 결과 확인하기 (2분)
선택한 AI 도구가 코드를 생성하면 자동으로 파일이 만들어집니다.
보통 index.html, style.css, script.js 같은 파일이 생겨요.
AI 도구가 다음과 같이 알려줄 거예요:
📄 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
이제 당신의 첫 번째 Vibe Coding 프로젝트가 완성되었습니다!
브라우저에서 계산기가 보이면 성공입니다.
Step 4: 수정 요청하기 (1분)
마음에 들지 않는 부분이 있으면 바로 수정 요청하세요.
💬 You:
"좋아! 이제 다음으로 바꿔줘:
1. 버튼 색상을 파란색으로
2. 결과가 바로 위에 표시됨"
🤖 Claude:
"수정 완료! 스타일과 레이아웃을 업데이트했습니다."Vibe Coding은 대화형입니다. 몇 번이고 요청해서 나에게 맞는 결과물을 만드세요!
💬 다른 프로젝트 아이디어
다른 것도 만들어보고 싶나요? 아래 예시를 복사해서 사용하세요:
1. 메모장
메모를 저장할 수 있는 간단한 메모장 만들어줘. 텍스트 입력하고 저장 버튼 누르면 localStorage에 저장되게.2. 퀴즈 앱
문제 5개가 나오는 퀴즈 앱 만들어줘. 정답이면 점수 올라가고, 최종 점수 표시.3. 다크모드 웹페이지
내 포트폴리오 웹페이지 만들어줘. 다크모드 토글 버튼 있고, 프로젝트 리스트를 그리드 형태로 표시.4. 타이머
카운트다운 타이머 만들어줘. 시간 입력하면 카운트다운 시작하고, 0되면 알림 소리.다음 단계
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: 마음에 안 들면 바로 수정 요청!