AI로 개발하기

1. AI와 함께 개발한다는 것

기존 개발은 "문법을 배우고 → 코드를 작성하고 → 에러를 고치는" 순서였습니다.

바이브 코딩은 순서가 다릅니다. 바이브 코딩은 다음 순서대로 이루어집니다.

"만들고 싶은 것을 설명하고 → AI가 만든 결과를 확인하고 → 다시 요청하여 수정"

우리가 코드를 한 줄씩 타이핑하는 대신, AI에게 무엇을 만들지 정확하게 설명하는 것이 핵심 기술이 됩니다. 그래서 이 강의에서 여러분이 연습하는 것은 문법 암기가 아니라 다음 세 가지입니다.

요청하기: 원하는 결과를 구체적으로 설명하기
확인하기: AI가 만든 화면과 코드를 보고 의도대로인지 판단하기
다듬기: "여기를 이렇게 바꿔줘"라고 반복해서 개선하기

이 작업을 위해 도구 4가지를 준비합니다. 역할이 각각 다릅니다.

도구	역할
Claude Desktop	주력 바이브 코딩 환경. 대화창에서 요청하고, 결과를 바로 확인하며 만듭니다
VS Code + Claude Code	보조 개발 환경. 프로젝트가 커져서 내 컴퓨터 폴더에서 직접 작업할 때 씁니다
GitHub	관리 도구. 코드를 기록해두고, 나중에 배포할 때 사용합니다
Commands	관리 도구. 자주 쓰는 요청을 명령어 하나로 등록해 재사용합니다

2. Claude Desktop, 우리의 메인 작업실

Claude Desktop은 Claude를 컴퓨터에 설치해서 쓰는 앱입니다. 이 강의 대부분의 시간을 여기서 보냅니다.

주력 환경인 이유는 간단합니다. 터미널 없이, 대화창에서 요청하면 결과 화면을 그 자리에서 확인할 수 있기 때문입니다. "회전하는 정육면체가 있는 페이지 만들어줘"라고 하면 코드와 함께 미리보기 화면이 바로 뜹니다. 마음에 안 들면 "배경을 어둡게 해줘"라고 이어서 요청하면 됩니다. 요청 → 확인 → 다듬기 사이클을 가장 빠르게 돌 수 있는 환경입니다.

우리가 Part 2에서 만드는 Three.js 페이지는 HTML 파일 하나로 완성되기 때문에, 이 방식과 특히 잘 맞습니다.

2.1 설치

claude.com/download 에 접속합니다.
내 운영체제(macOS / Windows)에 맞는 버전을 다운로드해 설치합니다.
앱을 실행하고 Claude 계정으로 로그인합니다. 계정이 없다면 이메일 또는 Google 계정으로 가입합니다.

요금제 확인

이 강의는 유료 요금제(Pro 이상) 를 기준으로 진행합니다. 뒤에서 설치할 Claude Code는 무료 계정으로 사용할 수 없고, Desktop에서도 무료 계정은 사용량 제한이 빠르게 찾아옵니다. 강의를 따라오려면 Pro 구독을 준비해 주세요.

3. VS Code + Claude Code, 프로젝트가 커졌을 때

Claude Desktop만으로 안 되는 순간이 옵니다. 파일이 여러 개로 나뉘고, 3D 모델 파일을 폴더에 넣어야 하고, 내 컴퓨터에 프로젝트로 저장해서 배포까지 해야 할 때입니다. 그때 쓰는 조합이 Visual Studio Code + Claude Code입니다.

Visual Studio Code(VS Code): 개발자들이 가장 많이 쓰는 코드 에디터. 프로젝트 폴더와 파일을 한눈에 보는 작업 공간입니다.
Claude Code: 터미널에서 실행하는 AI 개발 도구. Desktop이 답을 "알려주는" 쪽이라면, Claude Code는 내 폴더에 파일을 직접 만들고 수정하는, 즉 일을 "해주는" 도구입니다.

지금은 설치까지만 해두고, 실제 사용은 프로젝트가 커지는 시점에 시작합니다.

개념 사전: 터미널이란? · 에디터와 IDE

3.1 VS Code 설치

code.visualstudio.com 에서 다운로드해 설치합니다. 설치 후 실행해서 화면이 뜨는 것만 확인하면 됩니다.

3.2 Claude Code 설치

터미널을 열고 아래 명령어를 실행합니다. VS Code 안의 터미널(메뉴 → Terminal → New Terminal)에서 실행해도 됩니다.

macOS:

curl -fsSL https://claude.ai/install.sh | bash

Windows (PowerShell):

irm https://claude.ai/install.ps1 | iex

Windows에서 명령어가 실패한다면

'irm'은(는) 내부 또는 외부 명령... 오류가 나오면 지금 PowerShell이 아닌 CMD 창에 있는 것입니다. 시작 메뉴에서 "PowerShell"을 검색해 다시 실행하세요. 프롬프트 앞에 PS C:\가 보이면 PowerShell이 맞습니다.

3.3 설치 확인과 첫 실행

claude --version

버전 번호(2.x.x (Claude Code))가 나오면 성공입니다. command not found가 나오면 터미널을 완전히 껐다가 다시 열어보세요.

이제 작업 폴더를 만들고 실행해 봅시다.

mkdir my-three-project
cd my-three-project
claude

처음 실행하면 브라우저에서 로그인 화면이 열립니다. Claude Desktop과 같은 계정으로 로그인하세요. 로그인 후 터미널에 대화 입력창이 나타나면 인사해 봅니다.

> 안녕! 지금 어떤 폴더에서 실행되고 있는지 알려줘.

Claude Code가 현재 폴더 위치를 답하면 준비 완료입니다.

바이브 코딩 팁

Claude Code는 "실행한 폴더 안"에서 일합니다. 프로젝트마다 폴더를 만들고, 그 폴더에서 claude를 실행하는 습관을 들이세요. 바탕화면 전체에서 실행하면 AI가 엉뚱한 파일까지 건드릴 수 있습니다.

4. GitHub, 기록하고 배포하는 관리 도구

GitHub는 코드를 저장하는 온라인 저장소 서비스입니다. 만드는 도구가 아니라 관리하는 도구입니다. 이 강의에서 GitHub의 역할은 두 가지입니다.

기록: 어제 잘 되던 코드를 오늘 AI가 고치다 망가뜨렸을 때, 저장해 둔 시점으로 되돌릴 수 있습니다.
배포: Part 2 마지막 챕터에서 우리가 만든 페이지를 GitHub를 통해 인터넷에 공개합니다.

여기서는 딱 두 가지만 준비합니다.

4.1 GitHub 계정 만들기

github.com 에서 계정을 만듭니다. 이미 있다면 넘어가세요.

4.2 Git 설치 확인

Claude Code는 코드를 저장하고 되돌릴 때 Git이라는 도구를 사용합니다. 터미널에서 확인해 봅시다.

git --version

버전이 나오면: 통과입니다.
macOS에서 설치 안내 창이 뜨면: 안내에 따라 설치하면 됩니다.
Windows라면: git-scm.com 에서 Git for Windows를 설치하세요. Claude Code가 명령어를 실행할 때에도 Git for Windows가 있어야 더 안정적으로 동작합니다.

Git과 GitHub를 제대로 이해하고 싶다면 아래 강의를 참고하세요. 이 강의에서는 "AI에게 맡기기 위해 알아야 할 최소한"만 다룹니다.

바이브 코딩 팁

Git 명령어를 외울 필요는 없습니다. Claude Code에게 "지금까지 작업한 내용 저장해줘", "아까 잘 되던 상태로 되돌려줘"라고 말하면 됩니다. 다만 AI가 무엇을 하는지 이해하고 있어야 문제가 생겼을 때 당황하지 않습니다.

5. Commands, 반복 요청을 관리하는 도구

마지막 관리 도구입니다. 강의를 진행하다 보면 매번 반복하는 요청이 생깁니다. 예를 들면 이런 것입니다.

"Three.js 페이지를 만들 건데, CDN + Import Map 방식으로, HTML 파일 하나로 만들어줘. 빌드 도구는 쓰지 말고..."

이걸 매번 타이핑하는 대신, Claude Code의 커스텀 명령어(Custom Commands) 로 등록해두면 /명령어 한 번으로 불러올 수 있습니다. 프롬프트를 파일로 저장해서 자산으로 관리하는 셈입니다.

5.1 동작 원리

프로젝트 폴더 안에 .claude/commands/ 폴더를 만들고, 그 안에 마크다운 파일을 넣으면 파일 이름이 곧 명령어가 됩니다.

my-three-project/
└── .claude/
    └── commands/
        └── three-page.md   ← /three-page 명령어가 됨

5.2 실습: 첫 커스텀 명령어 만들기

이 세팅조차 Claude Code에게 시킬 수 있습니다. Claude Code 대화창에 이렇게 요청해 보세요.

프롬프트 예시

.claude/commands/three-page.md 파일을 만들어줘. 내용은 다음과 같아:

"Three.js 페이지를 새로 만든다. 반드시 다음 규칙을 지킬 것:
- HTML 파일 하나로 완성한다 (별도 빌드 도구 사용 금지)
- Three.js는 CDN + Import Map 방식으로 불러온다
- 코드에는 초심자가 이해할 수 있도록 한국어 주석을 단다
- 완성 후 브라우저에서 여는 방법을 알려준다

만들 페이지: $ARGUMENTS"

$ARGUMENTS는 명령어 뒤에 붙이는 말이 들어가는 자리입니다. 등록해두면 이렇게 쓸 수 있습니다.

> /three-page 회전하는 정육면체가 있는 자기소개 페이지

명령어 하나로 "환경 규칙 + 만들 것"이 한 번에 전달됩니다. 매번 같은 조건을 다시 설명할 필요가 없고, AI가 어떤 날은 CDN으로 어떤 날은 다른 방식으로 만들어버리는 문제도 예방됩니다.

바이브 코딩 팁

커스텀 명령어는 "AI에게 주는 업무 매뉴얼"입니다. 반복 요청이 3번 이상 생기면 명령어로 만들 타이밍입니다. Claude Desktop에서 반복하는 요청도 마찬가지로 프롬프트를 메모해 두었다가 재사용하세요. 프롬프트를 관리하는 습관이 바이브 코딩 실력의 절반입니다.

개념 사전: 왜 환경을 지정해야 하나요? · CDN이란? · Import Map이란?

6. 문제가 생겼다면

증상	확인할 것
`claude: command not found`	터미널을 완전히 종료 후 다시 실행. 그래도 안 되면 설치 명령어를 다시 실행
Windows에서 설치 명령어 오류	CMD가 아닌 PowerShell인지 확인 (`PS C:\`로 시작하는지)
로그인 화면이 안 열림	터미널에 표시된 URL을 복사해 브라우저에 직접 붙여넣기
Claude Code 실행 시 요금제 안내가 나옴	무료 계정은 Claude Code를 사용할 수 없음. Pro 이상 구독 필요
`/three-page` 명령어가 안 보임	`.claude/commands/` 경로 철자 확인 후 Claude Code 재시작
설치 상태를 전체적으로 점검하고 싶을 때	터미널에서 `claude doctor` 실행

7. 정리

바이브 코딩은 요청 → 확인 → 다듬기의 반복입니다.
만드는 곳: 주력은 Claude Desktop, 프로젝트가 커지면 VS Code + Claude Code.
관리하는 곳: 기록·배포는 GitHub, 반복 프롬프트는 Commands.
우리의 첫 커스텀 명령어는 /three-page입니다.

다음 챕터에서는 Claude Desktop에서 첫 Three.js 페이지를 직접 만들어봅니다.