2부도구와 첫 만남

네 도구 모두 같은 순서로 소개해요. 준비물 → 설치 → 폴더 열기 → 첫 주문 → 확인 → 되돌리기. 고른 도구 하나만 읽고 2-5 실습으로 바로 가도 돼요. (2026년 10월 28일 공식 문서 기준이에요. 메뉴 이름은 업데이트로 조금씩 바뀔 수 있어요.)

먼저 바탕화면에 실습 폴더를 만들어 두세요. 0부에서 만든 vibe-class 폴더 안에 hello 라는 폴더를 하나 더 만들면 돼요.

#2-1. Claude Code

Anthropic 이 만든 코딩 에이전트예요. 터미널, 편집기, 웹에서도 쓸 수 있지만, 이 교실에서는 터미널이 필요 없는 Claude 데스크톱 앱의 Code 탭으로 시작해요.

준비물

• Claude 계정과 Pro, Max, Team, Enterprise 중 하나의 유료 구독 (무료 플랜에서는 Code 탭이 열리지 않아요)
• 윈도우(x64·ARM64) 또는 맥

설치와 시작

1. code.claude.com 에서 내 컴퓨터에 맞는 Claude 데스크톱 앱을 내려받아 설치해요
2. 앱을 열고 Claude 계정으로 로그인해요
3. 왼쪽 위의 Code 탭을 눌러요. 업그레이드하라는 안내가 뜨면 유료 구독이 필요하다는 뜻이에요
4. 입력창 아래 줄의 첫 번째 칸(환경)에서 Local 을 고르고, 그 옆 폴더 칸에서 Open folder… 를 눌러 hello 폴더를 골라요

승인 방식 고르기

입력창 아래 줄에서 권한 모드를 고를 수 있어요. 처음에는 하나하나 보면서 가는 게 좋아요.

결과 확인과 되돌리기

• 파일이 바뀌면 +12 -1 같은 표시가 나타나요. 누르면 무엇이 바뀌었는지 비교 화면이 열려요
• 만든 웹페이지는 앱 안의 브라우저 창에서 바로 열어 볼 수 있어요
• 일하는 중에 멈추고 싶으면 정지 버튼을, 방향을 바꾸고 싶으면 새 말을 입력해 보내면 돼요
• 마음에 안 들면 "방금 바꾼 걸 원래대로 되돌려 줘"라고 말해요. 더 확실한 되돌리기는 3부에서 배워요

#2-2. Codex

OpenAI 가 만든 코딩 에이전트예요. ChatGPT 계정으로 로그인해서 쓰고, Codex 앱(맥·윈도우·리눅스)이나 ChatGPT 웹에서 쓸 수 있어요.

준비물

• ChatGPT 계정. 무료·Go 플랜은 제한된 체험만 되고, 넉넉히 쓰려면 Plus 이상이 필요해요
• 사용 한도는 플랜마다 다르고 자주 바뀌어요. 쓰다가 한도가 다 되면 Codex 안에서 언제 다시 채워지는지 알려 줘요

설치와 시작

1. learn.chatgpt.com 빠른 시작 에서 내 운영체제에 맞는 Codex 앱을 내려받아 설치해요
2. 앱을 열고 ChatGPT 계정으로 로그인해요
3. 새 대화나 프로젝트를 만들고, 폴더 열기로 hello 폴더를 골라요. Codex 는 고른 폴더 안의 파일만 읽고 고쳐요
4. 입력창에 원하는 걸 설명해요

결과 확인과 되돌리기

• Codex 가 파일을 고치기 전이나 명령을 실행하기 전에 허락을 구하면, 무엇을 하려는지 읽고 승인해요
• 바뀐 파일은 Codex 화면에서 비교해 볼 수 있고, 웹페이지는 hello 폴더의 index.html 을 두 번 눌러 브라우저로 열어 봐요
• 마음에 안 들면 "방금 바꾼 걸 되돌려 줘"라고 말해요

#2-3. Antigravity

구글이 만든 에이전트 개발 도구예요. 구글 계정만 있으면 무료로 시작할 수 있어서, 아무 유료 구독이 없는 분께 가장 먼저 권해요. 에이전트가 크롬을 열어 만든 화면을 직접 확인하는 기능도 있어요.

준비물

• 개인 구글 계정
• 윈도우 10(64비트)·11, 맥(macOS 12 이상), 또는 리눅스
• 무료 플랜은 일주일마다 다시 채워지는 사용량이 있어요. 구글 AI Pro·Ultra 구독자는 5시간마다 채워지고 한도도 더 커요

설치와 시작

1. antigravity.google/download 에서 Antigravity 앱을 내려받아요
2. 윈도우: 내려받은 .exe 를 실행하고 설치 마법사를 따라가요
3. 맥: Antigravity.dmg 를 열고 Antigravity 를 응용 프로그램 폴더로 끌어다 놓아요
4. 앱을 열고 구글 계정으로 로그인해요
5. 왼쪽 막대의 New Project 를 누르고, Add Folder 로 hello 폴더를 고른 뒤 Create 를 눌러요
6. 입력창에 주문을 쓰고 Enter. 모드를 고르는 창이 뜨면 Local mode 를 골라요 (에이전트가 내 폴더에서 바로 일해요)

결과 확인과 되돌리기

• 에이전트는 고친 내용을 먼저 보여 주고 검토를 기다려요. 읽어 보고 승인해요
• 결과를 브라우저로 확인해 달라고 하면 에이전트가 크롬을 열어 직접 살펴봐요
• 마음에 안 들면 "방금 바꾼 걸 되돌려 줘"라고 말해요

#2-4. Cursor

코드 편집기에 AI 에이전트를 넣은 도구예요. 다른 도구보다 코드 화면이 늘 함께 보여서, 만들어지는 과정을 눈으로 따라가며 배우기 좋아요. 2026년에 SpaceX(xAI)가 Cursor 를 만든 회사를 인수했어요.

준비물

• Cursor 계정
• 윈도우 10 이상, 맥(macOS 12 이상), 또는 리눅스
• 무료 플랜은 에이전트 사용량이 제한되고, xAI 의 Grok 모델만 쓸 수 있어요. 다른 회사 모델과 더 많은 사용량은 유료 플랜이에요

설치와 시작

1. cursor.com 에서 내려받아 설치하고(윈도우는 .exe, 맥은 .dmg) 로그인해요
2. 폴더 열기로 hello 폴더를 열어요
3. 에이전트 창을 열어요 (윈도우 Ctrl + I, 맥 Cmd + I)
4. 에이전트 입력창에 주문을 써요

결과 확인과 되돌리기

• 에이전트가 고친 곳은 편집기에 비교 화면(diff)으로 표시돼요. 초록은 더한 줄, 빨강은 지운 줄이에요
• index.html 은 폴더에서 두 번 눌러 브라우저로 열어 봐요
• 마음에 안 들면 "방금 바꾼 걸 되돌려 줘"라고 말해요

#2-5. 실습 1 · 자기소개 웹페이지 한 장

1단계 · 주문하기

고른 도구에서 hello 폴더를 열고, 아래 주문의 { } 부분을 내 이야기로 바꿔 붙여 넣어요.

이 폴더에 index.html 하나로 된 자기소개 웹페이지를 만들어 줘.

- 맨 위에 큰 글씨로 이름: {홍길동}
- 그 아래 한 줄 소개: {동네 빵집을 운영하고, 주말엔 등산을 해요}
- "좋아하는 것" 제목 아래 카드 세 장: {크루아상}, {북한산}, {고양이}
- 따뜻한 색감, 휴대폰에서도 보기 좋게
- 다른 파일 없이 index.html 하나로 끝내 줘

2단계 · 확인하기

도구가 다 됐다고 하면, hello 폴더의 index.html 을 두 번 눌러 브라우저로 열어 봐요 (Claude Code 는 앱 안 브라우저 창, Antigravity 는 에이전트에게 확인을 부탁해도 돼요).

• 이름, 소개, 카드 세 장이 다 보여요
• 브라우저 창을 좁혀도 글자가 잘리지 않아요
• 폴더에 index.html 말고 다른 파일이 생기지 않았어요

3단계 · 말로 고치기

마음에 안 드는 곳을 하나 골라 고쳐 달라고 해요. 이게 바이브 코딩의 핵심이에요.

카드에 어울리는 이모지를 하나씩 넣어 줘.

맨 아래에 "연락하기" 버튼을 만들고, 누르면 {내 이메일 주소}로 메일 쓰기 창이 열리게 해 줘.

배경을 아주 연한 노란색으로 바꾸고, 제목 글꼴을 더 둥글게 해 줘.