Ch.0 시작하기
환경 설정
도구 없이는 바이브 코딩도 없다
AI에게 '앱 만들어줘'라고 말하기 전에, AI가 일할 수 있는 환경을 먼저 만들어야 합니다.
설치가 어렵다고요? 복사-붙여넣기만 하면 됩니다.
환경 설정 — 코딩 경험이 전혀 없어도 따라할 수 있도록 하나씩 안내합니다.
핵심 내용
바이브 코딩의 첫 번째 도구는 코드 편집기입니다
VSCode (Visual Studio Code) Microsoft가 만든 무료 코드 편집기입니다. 전 세계 개발자의 70% 이상이 사용하며, AI 확장 기능도 가장 풍부합니다.
1. 다운로드: code.visualstudio.com 접속 → 'Download for Windows' 클릭
2. 설치: 다운로드된 .exe 실행 → 'PATH에 추가' 체크 필수 → 나머지 기본값으로 Next
3. 실행 확인: 설치 완료 후 VSCode 실행 → Welcome 탭이 열리면 성공
# 터미널(명령 프롬프트)에서 확인
code --version
# 출력 예시
# 1.96.4
# 커밋 해시...
# x64터미널이란? 컴퓨터에게 글자로 명령을 내리는 창입니다. Windows에서는 'cmd' 또는 'PowerShell'이라고 부릅니다. VSCode 안에서도 Ctrl+` 을 누르면 터미널이 열립니다.
AI와 코딩할 때 가장 많이 쓰는 언어 Python을 설치합니다
# Windows 터미널에서 한 줄 복사-붙여넣기
winget install Python.Python.3.13# 설치 확인 (터미널을 새로 열고 입력)
python --version
# 출력 예시
# Python 3.13.2winget이란? Windows 11에 기본 내장된 패키지 관리자입니다. 앱 스토어에서 클릭하는 대신, 터미널에서 한 줄로 프로그램을 설치할 수 있습니다.
python이 안 된다면? 터미널을 닫고 새로 열어보세요 — 설치 직후에는 경로가 반영되지 않을 수 있습니다. 그래도 안 되면 `python3 --version`을 시도해보세요.
설치한 Python이 진짜 되는지 이스터에그로 확인해봅시다
# 터미널에서 python 입력 후 엔터
python
# >>> 프롬프트가 나타나면 아래를 입력
>>> import antigravity무슨 일이 일어났나요? 웹 브라우저가 열리면서 xkcd 만화가 나타납니다! Python 개발자들이 숨겨놓은 이스터에그입니다. 'import'는 다른 사람이 만든 기능을 가져오는 명령어입니다.
# 하나 더 해볼까요?
>>> import this
# "The Zen of Python" — 파이썬의 철학 20줄이 출력됩니다
# Beautiful is better than ugly.
# Explicit is better than implicit.
# Simple is better than complex.
# ...exit() 을 입력하면 Python 대화 모드에서 빠져나옵니다. 앞으로 AI가 만든 코드를 이 환경에서 실행하게 됩니다.
웹 앱을 만들려면 Node.js가 필요합니다
Node.js란? JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 런타임입니다. 웹 앱, 서버, CLI 도구를 만들 때 사용하며, Claude Code 설치에도 필요합니다.
# Node.js 설치 (LTS 버전)
winget install OpenJS.NodeJS.LTS# 터미널을 새로 열고 확인
node --version
# v22.14.0
npm --version
# 10.9.2바이브 코딩의 핵심 파트너 Claude를 설치합니다
1. 다운로드: claude.ai/download 접속 → Windows 버전 다운로드
2. 설치: 다운로드된 파일 실행 → 설치 완료 후 자동 실행
3. 가입: Google 계정 또는 이메일로 가입 → 무료 플랜으로 시작
4. 첫 대화: '안녕하세요!'를 입력해 보세요 — Claude가 답하면 성공
무료 플랜: 하루 대화 횟수 제한 있음
기본 모델(Sonnet) 사용
바이브 코딩 학습에 충분
Pro 플랜 ($20/월): 대화 횟수 대폭 증가
최신 모델(Opus) 사용 가능
프로젝트 기능 + Claude Code 포함
무료 플랜으로 충분합니다 이 강의의 모든 실습은 무료 플랜으로 진행할 수 있습니다. 나중에 실전 프로젝트를 하게 되면 그때 Pro를 고려하세요.
터미널에서 AI와 코딩하는 Claude Code를 설치합니다
Claude Code란? 터미널에서 Claude와 대화하며 코딩하는 CLI 도구입니다. 파일을 직접 읽고, 수정하고, 실행까지 해줍니다. Pro 플랜 이상이 필요하지만, 설치 자체는 무료입니다.
# Claude Code 설치 (Node.js가 먼저 설치되어 있어야 합니다)
npm install -g @anthropic-ai/claude-code# 설치 확인
claude --version
# 첫 실행 — 로그인
claude
# "Log in with your Anthropic account" 안내를 따라 인증선택 사항입니다 Claude Code가 없어도 이 강의를 따라갈 수 있습니다. Claude 데스크탑 앱만으로도 바이브 코딩의 핵심을 배울 수 있습니다.
도구는 준비됐습니다 이제 말을 거는 법을 배웁니다
나쁜 프롬프트: 앱 만들어줘
코드 짜줘
뭔가 멋진 거 해줘
좋은 프롬프트: 할 일 목록 웹 앱을 만들어줘.
HTML, CSS, JavaScript를 사용하고
할 일 추가/삭제/완료 체크 기능이 필요해.
4요소 공식: 목표 + 기술 + 기능 + 제약 이 네 가지만 넣으면 AI가 정확히 원하는 것을 만들어줍니다. 처음에는 어색해도 몇 번 하면 자연스러워집니다.
# 🎯 첫 프롬프트 실습 — 아래를 Claude에 복사-붙여넣기 해보세요
Python으로 가위바위보 게임을 만들어줘.
컴퓨터와 대결하는 방식이고,
3판 2선승제로 해줘.
코드를 한 파일(rps.py)로 만들어줘.지금 바로 해보세요! 위 프롬프트를 Claude에 붙여넣으면 완성된 코드가 나옵니다. 그 코드를 rps.py로 저장하고 `python rps.py`로 실행하면 게임이 시작됩니다.
모든 준비가 끝났습니다 바이브 코딩을 시작할 수 있습니다
하나라도 안 되면? 걱정 마세요. 각 단계로 돌아가서 다시 따라하면 됩니다. 그래도 안 되면 Claude에게 에러 메시지를 복사해서 물어보세요 — 이것도 바이브 코딩입니다!
다음 레슨 예고 환경이 준비되었으니, 다음 시간에는 AI에게 진짜 앱을 만들어달라고 해봅니다. 프롬프트 한 줄로 웹 페이지가 탄생하는 순간을 경험하게 됩니다.
핵심 용어
node
JavaScript 실행기 — 코드를 실행하는 엔진
npm
Node Package Manager — 다른 사람이 만든 도구를 설치하는 명령어
npx
npm에 포함된 도구 — 설치 없이 한 번만 실행할 때 사용
목표 (Goal)
무엇을 만들고 싶은지 — '할 일 목록 웹 앱'
기술 (Tech)
어떤 도구를 쓸지 — 'HTML, CSS, JS'
기능 (Feature)
어떤 기능이 필요한지 — '추가, 삭제, 완료 체크'
제약 (Constraint)
제한 조건 — '한 파일로', '초보자용으로 간단하게'
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작