Week 01 · AI 팀 교육 · 2026

바이브 코딩

시작하기

개념 이해부터 환경 설정, 그리고
나만의 첫 사이트 만들기까지

🧩 개념 30분 💻 실습 30분 💬 Q&A 10분

SPACE · → · 화면 우측 클릭으로 다음 슬라이드

오늘의 목표

이 세션이 끝나면

3가지를 할 수 있다

1

바이브 코딩 개념 이해

대화와 질문이 곧 프로그래밍을 체감한다

2

Claude Code 설치 + 첫 실행 성공

VS Code · Claude Code 플러그인 설치 완료

3

첫 번째 Claude 프로젝트 완성

대화만으로 나만의 HTML 페이지를 만들어 브라우저에서 연다

30' 개념 강의 30' 실습 10' Q&A

PART 01

개론

바이브 코딩이란 무엇인가

개론 · 1.1

Andrej Karpathy

전 Tesla AI 책임자 · OpenAI 공동창업자

"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

— @karpathy · 2025.02.03

2022.11

ChatGPT 출시

2023–24

Cursor · Copilot

2025.02

"Vibe Coding" 탄생

2026.04

지금 — 우리 팀

개론 · 1.2

기존 개발 vs 바이브 코딩

기존 개발

문법 암기 필수

에러 혼자 해결

수주~수개월 개발

개발자만 가능

바이브 코딩

말로 설명하면 됨

에러 메시지 붙여넣기

몇 시간~며칠

누구나 가능

Claude는 세계 최고의 개발자 동료다. 나는 기획자이고, Claude에게 지시한다.

개론 · 1.3

바이브 코딩의 핵심

질문과 대화

💬

대화로 개발

코드 문법 대신 의도를 말로 전달한다

🎯

구체적으로 질문

좋은 질문이 좋은 결과를 만든다

🔄

반복으로 완성

대화를 거듭하며 원하는 결과로 다듬는다

개론 · 1.4

질문의 중요성

모호한 질문은
모호한 결과를 낳는다

Garbage In, Garbage Out — 입력의 품질이 출력의 품질을 결정한다

목적 명시

무엇을, 왜 만드는지
명확히 설명한다

범위 지정

어디까지 수정할지
명확히 제한한다

형식 지정

원하는 출력 방식을
미리 정해준다

개론 · 1.5

23세 청년이 AI와 대화 80분으로
60년 미해결 수학 난제를 풀었다

폴 에르되시(Erdős)의 원시 집합(Primitive Sets) 추측 — 수십 년간 수학자들이 손대지 못한 난제.
리암 프라이스(23세)는 수학 전공자도 아니었습니다. 그는 AI와 대화하며 증명을 완성했습니다.

테런스 타오 교수 (Fields Medal)

"AI가 수학자들의 관성적 증명 방식에서 벗어나, 전혀 다른 분야의 공식을 접목했다"

새로운 연구 방식

바이브 매싱 (Vibe Mathing) — 바이브 코딩처럼, 엄밀한 수식보다 AI와의 직관적 대화로 연구하는 패러다임

코딩도, 수학도, 글쓰기도 — AI는 도메인을 가리지 않습니다. 우리가 오늘 배우는 건 그 시작입니다.

개론 · 1.6

Claude는

코딩 도구가 아닙니다

수학, 글쓰기, 연구, 분석 —
AI는 대화로 문제를 푸는 범용 도구입니다

개론 · 1.7

클로드로 뭘 할 수 있을까

Claude는 개발 도구가 아닙니다 — LLM 기술의 발전으로 업무 전반을 수행하는 올인원 어시스턴트가 되었습니다

💻

코딩 · 웹 제작

사이트 · 앱 · 자동화 스크립트 생성

📊

데이터 · 엑셀

스프레드시트 분석 · 정리 · 자동화

📑

문서 · PPT

보고서 · 기획서 · 프레젠테이션 초안

🖼️

이미지 생성

디자인 시안 · 배너 · 인포그래픽

⚙️

업무 자동화

반복 작업 제거 · API 연동 · 알림 자동화

✨

그 외 모든 것

말로 설명할 수 있는 것은 무엇이든 시도해 보세요

PART 02

환경 설정

사전 준비 · VS Code · Claude Code · 로그인 · Node.js

환경 설정 · 2.1

시작 전 준비사항

설치 전에 이 세 가지를 먼저 확인하세요

🔑

Claude Pro 계정

무료 플랜 사용 불가
Pro ($20/월) 이상 필요

claude.ai → 구독 확인

🌿

Git for Windows

Claude Code CLI 실행에 필수.
기본값으로 설치하면 됩니다.

git-scm.com → Download

💻

시스템 사양

OS: Windows 10 (1809+) / 11

RAM: 4GB 이상 권장 16GB

저장: 500MB 여유 공간

인터넷: 상시 연결 필요

환경 설정 · 2.2

VS Code 설치

코드를 편집하고 Claude와 대화하는 코드 편집기

1

code.visualstudio.com 접속

공식 사이트에서 무료 다운로드

2

Download 클릭

Windows x64 인스톨러 다운로드

3

설치 후 실행 확인

시작 메뉴에서 VS Code 실행

Visual Studio Code

–

□

✕

⬡ Visual Studio Code

↓ Download for Windows

EXPLORER

📂 my-portfolio

📄 index.html

<!DOCTYPE html>
<html lang="ko">
  <!-- AI가 작성한 코드 -->

mainindex.html · UTF-8

환경 설정 · 2.3

플러그인 vs CLI

🧩 플러그인 — 오늘 사용

VS Code 확장

✓ 파일을 보면서 바로 대화

✓ 코드 자동 하이라이팅 + 적용

✓ 설치만 하면 바로 시작

△ VS Code 내에서만 동작

⌨️ CLI — 나중에 배울 것

명령 프롬프트(cmd)

✓ 자동화 파이프라인 연동

✓ 에디터 없이 어디서든 실행

△ 명령어 문법 익숙해야 함

△ 시각적 피드백 없음

💡 처음엔 플러그인으로 시작 — 직관적이고 안전합니다

환경 설정 · 2.4

Claude Code 플러그인 설치

VS Code 마켓플레이스에서 검색 → Install

1

Ctrl+Shift+X 누르기

Extensions 패널 열기

2

"Claude Code" 검색

Anthropic 공식 확장 선택

3

Install 클릭

사이드바에 Claude 아이콘 생성 확인

Extensions — Visual Studio Code

–

□

✕

🔍 Claude Code

Claude Code

Anthropic · ⭐ 4.9 · 50K+

Install

GitHub Copilot · 2M+

Install

환경 설정 · 2.5

CLI 설치 사전 준비

Claude Code CLI 실행에는 Git과 Node.js가 필요합니다

🪟Windows

# Git 설치
winget install --id Git.Git

# Node.js LTS 설치
winget install --id OpenJS.NodeJS.LTS

설치 후 PowerShell 재시작
또는 git-scm.com / nodejs.org 직접 다운로드

🍎macOS

# Homebrew 없는 경우 먼저 설치
/bin/bash -c "$(curl -fsSL brew.sh)"

# Git · Node.js 한 번에 설치
brew install git node

Git은 Xcode CLT로도 설치 가능
xcode-select --install

# 설치 확인 (공통)
git --version git version 2.x node --version v22.x.x

환경 설정 · 2.6

Claude Code CLI 설치

터미널에서 직접 실행 — Git · Node.js 설치 후 진행

🪟Windows — PowerShell 관리자

# Claude Code 설치
irm https://claude.ai/install.ps1 | iex

⚠️ 스크립트 차단 시

Set-ExecutionPolicy RemoteSigned
실행 후 재시도

🍎macOS — Terminal

# npm으로 전역 설치
npm install -g @anthropic-ai/claude-code

권한 오류 시 앞에 sudo 추가
설치 후 터미널 재시작

# 설치 확인 (공통)
claude --version 2.x.x ← 버전 나오면 성공

환경 설정 · 2.7

핵심 개념

용어 정리 · 실행 흐름 · 설정 파일 · CLAUDE.md · Hooks

핵심 개념 · 3.1

Claude 핵심 용어 정리

Claude Code 를 시작할 때 꼭 알아야 할 핵심 용어들

LLM 기초

컨텍스트 창

Context Window

Claude가 한 번에 처리할 수 있는 텍스트 범위. 대화·파일·코드가 모두 포함. 최대 1M 토큰

토큰

Token

LLM의 최소 처리 단위. 한글 1자 ≈ 1–2토큰, 영어 1단어 ≈ 1토큰. 비용·속도에 직접 영향

Claude Code

스킬

Skill

/슬래시 명령어로 호출하는 재사용 가능한 작업 묶음. commands/*.md 파일로 정의

MCP

Model Context Protocol

외부 도구·서비스를 Claude에 연결하는 표준 규약. 브라우저·DB·API 등 연동 가능

에이전트

Agent

목표 달성을 위해 자율적으로 도구를 선택·실행하는 Claude 인스턴스

서브 에이전트

Sub Agent

특정 작업을 위해 다른 에이전트가 생성하는 전문 에이전트. 병렬 처리 가능

팀 에이전트

Team Agent

역할이 다른 에이전트들이 협력해 복잡한 작업을 처리하는 구조. 코드리뷰·테스트 등

핵심 개념 · 3.2

Claude 실행 구조

세션 시작부터 응답까지 — 각 단계에서 어떤 파일이 동작하는지 파악하면 더 잘 활용할 수 있습니다

1

세션 시작 — 파일 자동 로드

Claude가 컨텍스트를 준비하는 단계

CLAUDE.md .claude/memory/*.md

↓

2

사용자 프롬프트 수신

질문·지시 입력 / 슬래시 명령어

commands/*.md

↓

3

PreToolUse Hook

도구 호출 전마다 자동 검증·차단 ↻

settings.json ↻ 호출 전마다 실행

↓

4

도구 실행

파일 읽기 · 수정 · Bash 명령 실행

↓

5

PostToolUse Hook

도구 호출 후마다 자동 포맷·린트·체크 ↻

settings.json ↻ 호출 후마다 실행

↓

6

응답 반환

텍스트 · 코드 · 파일 수정 결과 출력

↓

S

Stop Hook

세션 종료 시 1회 자동 실행 (빌드 검증 등)

settings.json 종료 시 1회 실행

핵심 개념 · 3.3

.claude 설정 파일

실행 구조에서 읽히는 3가지 파일 — 프로젝트 폴더의 .claude/ 아래에 저장합니다

.claude/settings.json

권한 · Hook · 환경 설정

도구별 허용/차단, 자동 Hook 등록, 환경변수 관리

{
  "hooks": { ... },
  "permissions": { ... }
}

.claude/commands/

커스텀 슬래시 명령어

deploy.md 파일 저장 → /deploy 명령어 자동 생성

commands/
  deploy.md
  review.md
  impeccable.md

.claude/memory/

세션 간 기억 저장

세션 닫혀도 저장된 정보는 다음 세션 시작 시 자동 로드

# user.md
역할: 마케팅 기획자
선호: 한국어, 간결한 설명

# project.md
목표: 포트폴리오 사이트
테마: 다크 + 보라색

핵심 개념 · 3.4

CLAUDE.md 란?

Claude에게 주는 프로젝트 설명서 — 한 번만 쓰면 끝

여기에 무엇을 씁니까

📁 프로젝트 개요
무엇을 만드는지, 누가 사용하는지

🎨 디자인 규칙
색상, 폰트, 레이아웃 기준

📝 응답 방식
언어, 설명 수준, 코드 스타일

🚫 금지 사항
건드리지 말아야 할 파일·기능

📁 프로젝트 루트에 CLAUDE.md 저장 → 자동 인식

# 프로젝트 개요
포트폴리오 인트로 사이트
소유자: 홍길동 (마케팅 기획자)

# 디자인 규칙
- 배경: 다크 (#0e0e12)
- 강조색: 보라 (#5856d6)
- 폰트: Noto Sans KR

# 응답 방식
- 항상 한국어로 답변
- 변경 전 계획 먼저 설명
- 파일은 단일 HTML로 유지

# 금지 사항
- hero 레이아웃 변경 금지
- 외부 라이브러리 추가 금지

핵심 개념 · 3.5

Hooks — 자동 실행 규칙

특정 이벤트에 자동으로 실행되는 쉘 명령어

PreToolUse

도구 실행 전 — 검증, 차단, 파라미터 수정

PostToolUse ← 가장 많이 씀

파일 저장/수정 후 — 자동 포맷, 린트, 타입 체크

Stop

세션 종료 시 — 자동 빌드, 최종 확인

// .claude/settings.json
{
  "hooks": {
    // ③ 실행 전 위험 명령 차단
    "PreToolUse": [{
      "matcher": "Bash",
      "command": "check_safe.sh"
    }],
    // ⑤ 파일 수정 후 자동 포맷
    "PostToolUse": [{
      "matcher": "Write|Edit",
      "command": "prettier --write $FILE"
    }],
    // 세션 종료 후 최종 검증
    "Stop": [{
      "command": "npm run build"
    }]
  }
}

PART 04

Claude 활용

첫 프로젝트 · 대화하기 · 세션 관리 · 슬래시 명령어

Claude 활용 · 4.1

첫 프로젝트 시작하기

로그인 완료 후 — 폴더 생성부터 첫 지시까지 5단계로 따라하세요

1

작업 폴더 만들기

바탕화면 우클릭 → 새로 만들기 → 폴더
이름: my-portfolio 입력 후 Enter

2

VS Code에서 폴더 열기

메뉴바 파일(File) → 폴더 열기…
→ my-portfolio 선택 → 폴더 선택 클릭

3

Claude 패널 열기

좌측 사이드바 Claude 아이콘(오렌지) 클릭
하단 채팅창이 열리면 준비 완료

4

프로젝트 초기화

채팅창에 /init 입력 → Enter
CLAUDE.md 자동 생성 — 파일 목록에서 확인

5

첫 지시 보내기

"포트폴리오 소개 페이지 index.html을 만들어줘"

VS Code — my-portfolio

–

□

✕

파일(F)

›

폴더 열기…

›

폴더 선택

탐색기

📂 MY-PORTFOLIO

📄 CLAUDE.md

📄 index.html

CLAUDE CODE

/init

✅ CLAUDE.md 생성 완료
프로젝트 구조 분석 완료

index.html을 만들어줘

⚡ index.html 작성 중…

메시지 입력…

Claude 활용 · 4.2

Claude와 효과적으로 대화하기

계획 확인 · 질문 유도 · 직접 수정 · 구조화된 프롬프트로 품질을 높입니다

plan

실행 전에 계획만 먼저 보여달라는 지시

"plan: 레이아웃 전체 개편해줘"
→ 수정 없이 계획표만 출력

ask

실행 전 추가 질문을 하도록 유도

"ask: 버튼 색상 변경해줘"
→ Claude가 어떤 색인지 되물음

edit

파일을 즉시 직접 수정 — 가장 많이 사용

"헤더 색상을 파란색으로 바꿔줘"
→ Claude가 파일을 바로 수정

효과적인 프롬프트 구조

역할 → 너는 시니어 프론트엔드 개발자야

대상 → index.html의 헤더 영역을

결과 → 모바일에서도 잘 보이게 수정해줘

💡 여러 줄 입력은 Shift + Enter
새 주제엔 /clear로 대화 초기화

Claude 활용 · 4.3

세션을 통해 대화 이어가기

Claude Code는 컨텍스트 창 안에서 대화를 기억합니다 — 세션이 닫히면 초기화됩니다

세션 내 관리

대화가 길어지면 느려짐
→ /compact 로 압축

주제가 바뀌면 초기화
→ /clear 로 새 대화

세션 종료 후 재개

Claude Code 재실행 시
이전 대화 내용은 사라짐

"이전에 하던 작업 이어서 해줘"
→ 파일 상태로 맥락 복원

CLAUDE.md 활용

# CLAUDE.md
## 프로젝트 목적
포트폴리오 사이트
## 기술 스택
HTML, CSS
## 주의사항
모바일 우선 설계

프로젝트 루트에 저장하면
세션마다 자동으로 읽힘

Claude 활용 · 4.4

슬래시 명령어

/ 만 입력하면 자동완성 목록이 나타납니다

/help

사용 가능한 명령어 목록 보기

/clear

현재 대화 초기화 — 새 주제 전환 시

/compact

긴 대화 요약 — 컨텍스트 절약

/init

CLAUDE.md 자동 생성

/cost

토큰 사용량 및 비용 확인

/theme

터미널 테마 변경

/bug

Anthropic에 버그 직접 보고

/exit

Claude Code 종료

💡 성능이 느려지면 /compact, 새 주제면 /clear

PART 05

실습

포트폴리오 인트로 사이트 만들기

🟢 실습 · 5.1 · 30분

포트폴리오 인트로 사이트 만들기

1

프로젝트 폴더 만들기

my-portfolio 폴더 → VS Code 열기 → Claude 채팅

2

내 정보 전달하기

이름 · 역할 · 관심 분야 · 한 줄 소개

3

HTML 생성 요청

"이 정보로 깔끔한 포트폴리오 인트로 HTML"

4

대화로 수정하기

"배경 어둡게" / "이름 더 크게" 반복 요청

# 내 정보
이름: 홍길동
역할: 마케팅 기획자
관심: AI 자동화, 데이터 분석

# 요청
위 정보로 한 페이지짜리
포트폴리오 인트로 HTML을
깔끔하게 만들어줘.

# 스타일
어두운 배경, 큰 이름, 심플하게

✅ 완료 기준: 브라우저에서 내 인트로 사이트 열기 + 최소 1회 수정

Week 01 완료

다음 주 준비사항

🗓 다음 주 — Week 02

인터랙티브 발표 슬라이드

작성하고 싶은 문서를 Claude로 인터랙티브 발표 슬라이드로 만듭니다.

✓ 작성하고 싶은 문서 아젠다 선정해오기

✓ 기존에 작성했던 PPT 또는 문서 준비하기

✓ Claude Code로 오늘 배운 것 추가로 실습하기

AI 팀 교육 · Week 01 · 바이브 코딩 시작하기

바이브 코딩

시작하기

이 세션이 끝나면

개론

기존 개발 vs 바이브 코딩

질문과 대화

모호한 질문은모호한 결과를 낳는다

23세 청년이 AI와 대화 80분으로60년 미해결 수학 난제를 풀었다

Claude는

코딩 도구가 아닙니다

클로드로 뭘 할 수 있을까

환경 설정

시작 전 준비사항

VS Code 설치

code.visualstudio.com 접속

Download 클릭

설치 후 실행 확인

플러그인 vs CLI

Claude Code 플러그인 설치

Ctrl+Shift+X 누르기

"Claude Code" 검색

Install 클릭

CLI 설치 사전 준비

Claude Code CLI 설치

로그인

Claude 아이콘 클릭

인증 방법 선택

폴더 신뢰 승인

완료

핵심 개념

Claude 핵심 용어 정리

Claude 실행 구조

.claude 설정 파일

CLAUDE.md 란?

Hooks — 자동 실행 규칙

Claude 활용

첫 프로젝트 시작하기

작업 폴더 만들기

VS Code에서 폴더 열기

Claude 패널 열기

프로젝트 초기화

첫 지시 보내기

Claude와 효과적으로 대화하기

세션을 통해 대화 이어가기

슬래시 명령어

실습

포트폴리오 인트로 사이트 만들기

프로젝트 폴더 만들기

내 정보 전달하기

HTML 생성 요청

대화로 수정하기

다음 주 준비사항

모호한 질문은
모호한 결과를 낳는다

23세 청년이 AI와 대화 80분으로
60년 미해결 수학 난제를 풀었다