2장: 도구와 환경 설정
이 장에서는 바이브코딩에 필요한 도구를 설치하고 실제로 동작시킵니다. 그 전에 한 가지 개념을 짚고 갑니다.
AI 모델 vs 하네스
AI 모델은 Claude Sonnet, GPT-5.4와 같은 두뇌 자체입니다. 텍스트를 넣으면 텍스트를 내놓습니다. 그게 전부입니다. 파일을 만들지도, 명령어를 실행하지도, 에러를 고치지도 못합니다.
하네스(harness)는 두뇌를 감싸서 실제로 일하게 만드는 환경입니다. 원래 말에 채우는 마구라는 뜻입니다. 고삐와 안장이 없으면 말을 탈 수 없듯이, 하네스가 없으면 AI는 텍스트를 생성하는 데서 끝납니다. 하네스가 있어야 실제로 파일을 만들고 수정하고 실행까지 합니다. 같은 모델이라도 하네스를 어떻게 설계하느냐에 따라 결과물의 품질이 달라집니다.
| AI 모델 | 하네스 (Claude Code) | |
|---|---|---|
| 코드 생성 | ✅ 텍스트로 출력 | ✅ 텍스트로 출력 |
| 파일 직접 생성 | ❌ | ✅ 실제 파일 만듦 |
| 라이브러리 설치 | ❌ | ✅ 알아서 설치 |
| 에러 자동 수정 | ❌ | ✅ 실행 후 직접 수정 |
| 프로젝트 전체 파악 | ❌ | ✅ 폴더 전체 읽음 |
모델에게 "투두 앱 만들어줘"라고 하면 코드 텍스트가 나옵니다. 그걸 파일로 저장하고, 라이브러리를 설치하고, 실행하는 건 전부 여러분의 몫입니다. Claude Code에서 같은 말을 하면 파일을 직접 생성하고, 필요한 것을 알아서 설치하고, 브라우저에서 열 수 있는 상태까지 만들어줍니다. 이 차이가 바이브코딩을 가능하게 합니다.
Claude Code와 데스크탑 앱
Claude Code는 두 가지 방식으로 쓸 수 있습니다. 터미널에 claude를 입력하는 명령줄 방식, 그리고 Claude 데스크탑 앱입니다. 이 가이드는 데스크탑 앱을 기준으로 설명합니다.
데스크탑 앱 안에 Claude Code가 들어 있습니다. 따로 설치할 것이 없고, 대화 창과 파일 편집기, 터미널, 브라우저가 한 화면에 모여 있어서 앱 하나로 작업이 끝납니다. 편집기를 따로 설치하고 그 안에서 터미널을 열어 Claude Code를 실행하던 과정이 사라졌습니다.
작업 흐름은 이렇습니다.
- 앱에서 작업할 폴더를 연다
- Claude에게 만들고 싶은 것을 말한다
- Claude가 파일을 만들거나 고치면 승인한다
- 바뀐 화면을 브라우저 패널에서 확인한다
- 고칠 부분을 다시 말한다
VS Code, Cursor, Windsurf 같은 편집기에서도 Claude Code를 쓸 수 있습니다. 하지만 도구를 비교하는 데 시간을 쓰는 것보다, 하나를 빠르게 익혀서 실제로 만들기 시작하는 게 더 중요합니다.
앱 설치하고 첫 세션 열기
1단계: https://claude.com/download (새 탭에서 열림) 에 접속해서 설치 파일을 내려받습니다. macOS는 .dmg, Windows는 .exe 파일입니다.
2단계: 설치합니다.
macOS: 내려받은 .dmg 파일을 더블클릭하고, Claude 아이콘을 Applications 폴더로 드래그합니다. 처음 실행할 때 "인터넷에서 다운로드한 앱"이라는 경고가 나오면 System Settings > Privacy & Security에서 "Open Anyway"를 클릭합니다.
Windows: .exe 파일을 실행하면 설치가 진행됩니다. "Windows가 PC를 보호했습니다"라는 메시지가 나오면 "추가 정보"를 클릭한 후 "실행"을 클릭합니다. Windows는 Git for Windows도 필요합니다. https://git-scm.com/downloads/win (새 탭에서 열림) 에서 내려받아 기본값으로 설치한 뒤, Claude 앱을 껐다가 다시 켜세요. macOS는 대부분 Git이 이미 깔려 있습니다.
3단계: 앱을 열고 Anthropic 계정으로 로그인합니다. 상단 Code 탭을 클릭합니다.
업그레이드하라는 안내가 나오면 구독이 필요하다는 뜻입니다. Claude Code는 Pro 이상 유료 플랜에서 동작합니다.
4단계: 작업할 폴더를 엽니다.
프롬프트 창에서 환경을 Local로 두고 Select folder를 눌러 폴더를 고릅니다. 폴더 선택 창에서 새 폴더를 만들어도 됩니다. Local은 내 컴퓨터의 파일을 직접 다룬다는 뜻입니다.
5단계: 프롬프트 창에 한국어로 말하면 됩니다. 명령어를 외울 필요는 없습니다.
화면 구조
Code 탭은 여러 패널로 나뉘어 있습니다. 패널 머리를 끌어서 원하는 대로 배치할 수 있습니다.
- 대화: Claude에게 말을 거는 곳입니다. 작업 도중에도 끼어들어 방향을 바꿀 수 있습니다
- 파일: 대화에 나온 파일 경로를 클릭하면 열립니다. 직접 고치고 Save를 누를 수 있습니다
- diff: 파일이 바뀌면
+12 -1같은 표시가 뜹니다. 누르면 어디가 어떻게 바뀌었는지 파일별로 봅니다 - 브라우저: Claude가 개발 서버를 띄우면 결과 화면이 여기 열립니다. HTML 파일 경로를 클릭해도 여기서 열립니다
- 터미널:
Ctrl+백틱으로 엽니다. 세션의 작업 폴더에서 시작하고 Claude와 같은 환경을 씁니다
단축키 전체 목록은 Cmd+/(Windows는 Ctrl+/)로 볼 수 있습니다.
파일을 고치기 전에 매번 물어보는 것이 기본 동작입니다. 얼마나 자동으로 맡길지 정하는 권한 모드는 4장에서 다룹니다.
터미널 기본 명령어
앱이 대부분을 대신하지만, 개발 서버를 켜거나(7장) 명령줄 도구를 쓸 때(16장)는 터미널을 직접 열게 됩니다. 세 개만 알아두면 됩니다.
pwd — 지금 내가 어느 폴더에 있는지 보여줍니다.
$ pwd
/Users/jaehoo/Documents/my-project
ls — 현재 폴더 안의 파일과 폴더 목록을 보여줍니다.
$ ls
index.html style.css app.js images/
cd 폴더이름 — 해당 폴더로 이동합니다. cd ..은 한 단계 상위 폴더로 이동합니다.
$ cd my-project
$ pwd
/Users/jaehoo/Documents/my-project
✏️ 실습: Claude에게 자기소개 페이지를 만들게 하고 브라우저에서 열어보기
설치가 끝났으면 바로 해봅시다. 코딩 경험이 전혀 없어도 됩니다.
1단계: Code 탭에서 Select folder를 눌러 my-first-page라는 새 폴더를 만들고 선택합니다.
2단계: 프롬프트 창에 아래처럼 말합니다. [본인 이름] 부분은 실제 이름이나 닉네임으로 바꿔주세요.
내 이름은 [본인 이름]이야.
간단한 자기소개 웹페이지를 만들어줘.
이름, 한 줄 소개, 좋아하는 것 3가지를 카드 형태로 예쁘게 보여주는 HTML 파일로 만들어줘.
배경색은 부드러운 색으로, 폰트는 읽기 편하게 해줘.
3단계: Claude가 작업하는 것을 지켜봅니다.
파일을 만들기 전에 무엇을 만들지 보여주고 승인을 기다립니다. 내용을 확인하고 Accept를 누릅니다.
4단계: 대화에 나온 index.html 경로를 클릭합니다. 브라우저 패널에서 자기소개 페이지가 열립니다.
5단계: 마음에 안 드는 부분이 있으면 그대로 말합니다.
배경색을 더 어둡게 바꿔줘. 그리고 이름을 더 크게 강조해줘.
승인하고 나면 브라우저 패널에서 바뀐 모습을 확인할 수 있습니다.
코드를 한 줄도 직접 쓰지 않고 웹페이지를 만들었습니다. 이게 바이브코딩의 시작입니다. 다음 장에서는 AI에게 더 정확하게 일을 시키는 방법, 즉 프롬프트를 다룹니다.
참고자료