클로드 바이브코딩 기초반/바이브코딩 가이드

3부 세상에 공개한다

10장 · Claude Code 시작하기

말만 하던 Claude에게 손이 생깁니다. 내 컴퓨터의 폴더 안에서 파일을 직접 만들고 고치는 Claude를 설치합니다.

여기부터는 AI 공부가 아니라, 직접 만드는 경험입니다

1·2부의 Claude는 글·표·답을 채팅창 안에 만들어 줍니다. 파일로 쓰려면 복사해서 붙여넣는 건 결국 내 손입니다. 홈페이지는 글·사진·디자인 파일 여러 개의 묶음이라 채팅창만으론 벅찹니다. 그래서 3부부터는 Claude가 내 컴퓨터의 폴더에서 직접 일하게 합니다.

Claude Code = 내 컴퓨터의 폴더 안에서 파일을 직접 만들고 고치는 Claude. 말 거는 법(역할·맥락·출력형식)은 1부에서 배운 그대로 씁니다.

채팅 Claude (1·2부) Claude Code (3·4부)
일하는 곳 claude.ai 채팅창 내 컴퓨터의 폴더 하나
결과물 채팅창 속 글 — 복사해서 씀 폴더에 파일로 바로 저장
잘하는 일 질문·글쓰기·자료 정리 파일 만들기·고치기·여러 단계 작업
자료를 읽는 법 대화·프로젝트에 올린 파일 열어 둔 폴더의 파일을 직접
말 거는 법 역할·맥락·출력형식 완전히 같음

채팅을 버리는 게 아닙니다. 일의 종류에 따라 골라 씁니다. Claude Code는 Pro에 포함되며, 채팅 Claude와 사용 한도를 함께 씁니다. 무료 플랜 계정으로는 쓸 수 없습니다.

그림 하나 — 열어 둔 폴더가 곧 작업 책상

[나] ─말로 요청→ [Claude Code] ─만들기·고치기→ [VS Code에 열린 폴더]

Claude Code의 책상 = 지금 VS Code에 열려 있는 폴더 하나. 그 폴더 안에서만 일하게 합니다. 홈페이지 1개 = 폴더 1개. 이 폴더가 그대로 GitHub 창고로, Vercel 공개로 이어집니다. 뭔가 이상하면 제일 먼저 창 제목에서 '지금 열린 폴더 이름'부터 확인하세요.

세 도구가 나옵니다. 개발자가 되려는 게 아닙니다.

명령어 암기는 없습니다. 결과 화면을 보고, 판단은 내가 합니다.

설치 4단계

이 가이드는 VS Code 확장 방식으로 갑니다. 화면이 채팅창 모양이라 처음 하는 분에게 가장 덜 낯섭니다. 2026-09 기준 공식 문서로 확인한 순서이며, 화면 문구는 바뀔 수 있습니다.

단계 무엇을 어디서 왜
① VS Code code.visualstudio.com Claude Code가 일할 작업실
② Git for Windows git-scm.com GitHub에 저장할 때 필요
③ Claude Code 확장 VS Code 확장 창 (Ctrl+Shift+X) 채팅창 모양의 Claude Code
④ 로그인 확장의 Sign in → 브라우저 Pro 계정 연결

① VS Code — code.visualstudio.com → Windows용 Download. 받은 파일 실행 → 약관 동의 → 설정은 기본값 그대로 '다음'. 추가 작업 화면에서 'PATH에 추가(Add to PATH)'가 체크돼 있는지만 확인합니다. 일반 사용자용(User) 설치는 관리자 권한 없이 됩니다.

② Git for Windows — git-scm.com/downloads/win → 받은 파일 실행 → 설정은 전부 기본값 그대로 Next. 설치가 끝나면 열어 볼 필요 없습니다. 깔려 있기만 하면 됩니다. VS Code가 켜져 있었다면 완전히 껐다가 다시 켭니다. Git은 '최종_진짜최종(2)'를 없애는 도구입니다. 이전 버전을 대신 보관하고, 저장할 때마다 '언제·무엇을 바꿨는지' 한 줄 기록이 남습니다. 명령어는 Claude Code가 칩니다. 우리는 '저장해줘 / 되돌려줘'만 말합니다.

③ Claude Code 확장 — VS Code에서 Ctrl+Shift+X → 검색창에 Claude Code → 만든 곳이 Anthropic인지 확인 → 설치. 왼쪽 세로 메뉴에 생긴 Claude 아이콘을 클릭하면 새 대화가 열립니다. 아이콘이 안 보이면 Ctrl+Shift+P → Developer: Reload Window. 이름이 비슷한 다른 확장이 있으니 만든 곳 확인이 핵심입니다.

④ 로그인 — Claude 패널을 처음 열면 로그인 화면 → Sign in → 브라우저가 열리면 2부에서 Pro를 결제한 계정으로 로그인 → 허용. VS Code로 돌아와 입력칸이 보이면 성공. 'Not logged in'이 보이면 Reload Window.

초기 설정 두 가지. Ctrl+Shift+P → Configure Display Language → 한국어. 그리고 Claude 입력칸에서 줄바꿈은 Shift+Enter, 보내기는 Enter입니다. 잘못 보냈어도 '방금 건 무시해줘'라고 이어서 말하면 됩니다.

다른 방법 — 데스크톱 앱과 터미널

VS Code가 낯설면 Claude 데스크톱 앱의 Code 탭도 됩니다(claude.com/download). 앱 안에 Claude Code가 들어 있어 따로 설치할 게 없고, Local → 폴더 선택 → 지시 입력으로 시작합니다. Windows·Mac 모두 있습니다. 터미널이 익숙한 분은 PowerShell에서 irm https://claude.ai/install.ps1 | iex(Windows) 또는 curl -fsSL https://claude.ai/install.sh | bash(Mac) 한 줄로 설치하고, 프로젝트 폴더에서 claude를 칩니다. 어느 방법이든 CLAUDE.md·Skill·설정은 같은 엔진을 쓰므로 나중에 바꿔도 됩니다. 이 가이드의 화면 설명은 VS Code 확장 기준입니다.

윈도우 함정 — 먼저 밟아 본 사람들의 기록

증상 원인 → 해결
Git·bash를 찾을 수 없다는 오류 Git 미설치 → git-scm.com에서 설치 후 VS Code 재시작
한글이 깨지거나 경로 오류 폴더 이름에 한글·공백 → 영문 이름으로 (예: my-homepage)
파일이 사라지거나 동기화 충돌 OneDrive 안의 폴더 → C:\work 같은 곳에 새로
압축 풀었는데 파일이 안 보임 폴더가 한 겹 더 들어 있음 → 안쪽 폴더를 열기
그 밖의 설치 오류 에러 통째로 복사 → 채팅 Claude에 질문

바탕화면·문서 폴더가 OneDrive 안일 수 있습니다. 작업 폴더는 C:\work로 하세요. 설치에서 막히는 게 정상입니다. 멈추지 말고 에러를 통째로 복사해 물어보세요. 막히는 건 실력 문제가 아니라 노트북 사정입니다. 5분 넘게 혼자 씨름하지 않습니다.

프로젝트 폴더 — 반드시 영문으로

  1. 파일 탐색기 → C 드라이브에 work 폴더 → 그 안에 my-homepage 폴더
  2. 이름 규칙: 영문 소문자·숫자·하이픈(-)만 — 한글·공백·OneDrive 금지
  3. VS Code → 파일 → 폴더 열기 → C:\work\my-homepage
  4. '작성자를 신뢰합니까?' 창이 뜨면 → 신뢰 (내가 만든 폴더니까요)
  5. 창 제목에 my-homepage가 보이면 성공

홈페이지 = 파일 몇 개의 묶음입니다. index.html(첫 화면)·사진·디자인 파일. index.html은 가게 정문입니다. 주소로 들어오면 제일 먼저 보이는 파일. 사진은 이 폴더 안 images 폴더에, 파일 이름도 영문으로. 폴더를 옮기거나 이름을 바꾸면 연결이 꼬이니 자리에 고정합니다.

VS Code에서 쓰는 곳은 네 군데뿐입니다. 왼쪽 탐색기(파일 목록 — Claude가 만든 파일이 여기 나타남), 가운데 편집기(파일 내용 — 코드가 보여도 넘어가도 됨), Claude 패널(말로 요청하는 곳), 파일 우클릭 → '파일 탐색기에 표시'. 길을 잃으면 Claude에게 "방금 만든 파일 어디 있어? 여는 법도 알려줘."

권한 모드 — '위험한 것만 확인'으로

입력칸 아래 모드 표시를 눌러 고릅니다(이름은 2026-09 기준).

어떤 모드든 삭제·공개(push) 같은 마지막 버튼은 내가 읽고 누릅니다.

첫 파일 — hello.html이 생기는 순간

Claude에게 이렇게 보내세요
이 폴더에 hello.html 만들어줘.
큰 글씨로 '안녕하세요, ○○입니다' 한 줄.

승인 창이 뜨면 '무슨 동작·어느 파일'인지 한 줄 읽고 승인합니다. 왼쪽 탐색기에 hello.html이 생깁니다. 파일 탐색기에서 더블클릭 → 브라우저에 뜨면 성공. 말 한 문장 → 진짜 파일. 3부의 기본 단위입니다. 말한다 → 승인한다 → 확인한다.

2부의 my-brain 폴더도 같은 방법으로 열 수 있습니다. "이 폴더 자료 읽고 내 업무 소개를 3줄로 요약해줘" — 올리지 않아도 직접 읽습니다. 홈페이지 글감이 필요하면 필요한 파일만 my-homepage로 복사합니다. 개인정보·기밀이 든 파일은 홈페이지 폴더에 넣지 않습니다. 거기는 공개될 곳입니다.

이 장의 결과물