0. 개발 환경 설치

이 단계에서 하는 것: 내 컴퓨터에 개발 도구를 설치하고, VS Code 터미널에서 Claude Code를 실행할 수 있게 만든다. 끝나면: 터미널에 claude를 치면 Claude Code가 뜬다.

프로그래밍이 처음이어도 괜찮다. 아래 순서대로 하나씩 설치한다.

순서	도구	용도
1	Git	버전 관리 + (Windows) Git Bash 터미널 제공
2	Node.js	자바스크립트 실행 환경. 프로젝트 실행과 Claude Code 설치에 필요
3	VS Code	코드를 열고 편집하는 편집기(작업 공간)
4	(Windows) 터미널을 Git Bash로	Mac과 같은 명령을 쓰기 위해
5	Claude Code	개발을 맡길 AI 에이전트

1단계 — Git 설치

Git은 코드의 변경 이력을 관리하는 도구이고, Windows에서는 함께 깔리는 Git Bash가 이 과정의 터미널이 된다.

Windows: 1. https://git-scm.com/download/win 에 접속하면 설치 파일이 내려받아진다. 2. 실행한 뒤 설치 옵션은 모두 기본값(계속 Next) 으로 두고 끝까지 설치한다. (Git과 함께 Git Bash가 깔린다.)

Mac: 1. 보통 이미 설치돼 있다. 터미널(응용 프로그램 → 유틸리티 → 터미널)에서 아래를 입력한다.

git --version

버전 숫자가 나오면 넘어간다. 안 나오면 설치 안내 팝업이 뜨는데, 그대로 설치하면 된다.

이렇게 나오면 성공: git --version 이 버전 숫자를 보여준다.

2단계 — Node.js 설치

Node.js는 자바스크립트를 컴퓨터에서 실행하게 해 주는 프로그램이고, 함께 깔리는 npm은 필요한 도구(패키지)를 설치하는 도구다.

https://nodejs.org 에 접속한다.
LTS(안정 버전)라고 적힌 것을 내려받아 설치한다. 옵션은 기본값. (LTS는 현재 22 버전대이며, Claude Code에 Node 22 이상이 필요하다.)
터미널에서 아래를 입력해 확인한다.

node -v
npm -v

이렇게 나오면 성공: 두 줄 모두 버전 숫자(예: v22.x.x)가 나온다. node -v가 v22 미만이면 nodejs.org에서 최신 LTS로 다시 설치한다.

3단계 — VS Code 설치

VS Code는 코드를 열고 편집하는 편집기다. 우리는 여기서 파일도 보고, 터미널로 Claude Code도 실행한다.

브라우저에서 https://code.visualstudio.com 에 접속한다.
내 운영체제(Windows / Mac)용 설치 파일을 내려받아 설치한다. 옵션은 기본값으로 둔다.
설치가 끝나면 VS Code를 실행한다.

이렇게 나오면 성공: VS Code 창이 열린다.

4단계 — (Windows 사용자만) VS Code 터미널을 Git Bash로

Mac 사용자는 이 단계를 건너뛴다. Mac은 기본 터미널(zsh)을 그대로 쓴다. 5단계로 간다.

Windows 기본 터미널(PowerShell)은 명령 문법이 Mac·리눅스와 달라서, 교재의 명령이 그대로 안 먹는 경우가 있다. 그래서 Windows에서는 1단계에서 깔린 Git Bash를 쓴다. 그러면 Mac 사용자와 똑같은 명령을 쓸 수 있고, Claude Code도 Git Bash로 명령을 실행한다.

VS Code에서 터미널을 연다: 상단 메뉴 Terminal → New Terminal (단축키 Ctrl + `).
터미널 패널 오른쪽 위, 새 터미널(+) 아이콘 옆의 아래 화살표(⌄) 를 누른다.
목록에서 Select Default Profile(기본 프로파일 선택) 을 누른다.
뜨는 목록에서 Git Bash 를 고른다.
지금 열린 터미널을 휴지통 아이콘으로 닫고, 다시 Terminal → New Terminal 로 새로 연다.

이렇게 나오면 성공: 새 터미널의 왼쪽 위(또는 오른쪽 드롭다운)에 bash 라고 표시된다.

5단계 — Claude Code 설치

VS Code 터미널(Windows는 bash)에서 아래를 입력한다. -g는 컴퓨터 전역에 설치한다는 뜻이라, 어느 폴더에서든 claude를 쓸 수 있다.

npm install -g @anthropic-ai/claude-code

설치가 끝나면 버전을 확인한다.

claude --version

이렇게 나오면 성공: 버전 숫자(예: 2.x.x)가 나온다.

Mac 사용자 대안: 아래 한 줄로 설치할 수도 있다(공식 네이티브 설치). 위 npm 방법이 됐다면 이건 안 해도 된다. curl -fsSL https://claude.ai/install.sh | bash

6단계 — Claude Code 실행과 로그인

VS Code에는 별도 확장을 깔 필요가 없다. 터미널에서 바로 실행한다.

claude

처음 실행하면 로그인을 안내한다. 브라우저가 열리며 console.anthropic.com으로 로그인하고, 화면에 나온 일회용 코드를 복사해 터미널에 붙여 넣는다.

이렇게 나오면 성공: 터미널 안에 Claude Code 입력창이 뜬다. 아무 질문이나 입력해 답이 오면 된다. 확인했으면 /exit 로 잠시 빠져나온다.

준비물 계정 (뒤 단계에서 사용)

지금 당장은 아니지만, 개발을 진행하며 아래 계정이 필요하다. 미리 만들어 두면 매끄럽다. 모두 무료로 시작할 수 있다.

GitHub — 코드를 올릴 저장소
Supabase — 데이터베이스와 로그인(인증)
Vercel — 서비스를 인터넷에 배포 (GitHub 계정으로 로그인하면 편하다)
AI 기능용 API 키 — 이 과정은 Claude(Anthropic) API를 쓴다(console.anthropic.com에서 발급, 사용량 과금). 무료로 하고 싶으면 Gemini API로 대체할 수 있다 — Google AI Studio(aistudio.google.com)에서 카드 없이 무료 키를 발급받으면 된다. 발급 방법은 6장에서 다시 안내한다.

실습 시작 폴더 내려받기

개발은 실습 시작 폴더에서 시작한다. 과정 안내의 링크에서 moneynote.zip 을 내려받아 압축을 푼다. 풀면 moneynote 폴더가 나온다.

이 폴더 안에는 미리 준비된 두 가지만 들어 있다.

docs/가이드/ — 회사 가이드 문서(디자인시스템·코딩컨벤션·프로젝트구조·깃커밋컨벤션)
data/킥오프_회의록.md — 개발의 출발점이 되는 회의록

팀 규칙 파일(CLAUDE.md)이나 앱 코드 같은 나머지는 아직 없다. 1장부터 이 과정을 따라 하며 직접 만든다. moneynote 폴더가 우리의 프로젝트 폴더이고, 앞으로 만드는 모든 것이 이 폴더 안에 쌓인다.

이 단계 마무리

Git·Node.js·VS Code가 설치됐고, (Windows는) 터미널이 Git Bash(bash)다.
git --version·node -v(v22 이상)·npm -v·claude --version이 모두 버전을 보여준다.
터미널에서 claude 로 Claude Code가 실행되고 로그인됐다.
실습 폴더 moneynote에는 가이드 문서와 회의록만 있고, 나머지는 앞으로 직접 만든다.

다음 단계에서 moneynote 폴더를 열고, 팀 규칙(CLAUDE.md)부터 만들며 개발을 시작한다.