0. 개발 환경 설치

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

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

1단계 — Git 설치

Git은 코드의 변경 이력을 관리하는 도구다. Windows에서는 Git과 함께 설치되는 Git Bash를 실습용 터미널로 사용한다.

Windows: 1. https://git-scm.com/download/win 에 접속하면 설치 파일이 내려받아진다. 2. 설치 파일을 실행하고 옵션은 기본값으로 둔 채 설치를 마친다. Git과 함께 Git Bash도 설치된다.

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

git --version

2. 버전 번호가 표시되면 다음 단계로 넘어간다. 설치 안내 창이 뜨면 안내에 따라 설치한다.

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

2단계 — Node.js 설치

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

1. https://nodejs.org 에 접속한다.
2. LTS(장기 지원 버전)라고 표시된 파일을 내려받아 기본 옵션으로 설치한다. 이 교재는 Node 22 이상을 기준으로 한다.
3. 터미널에서 아래를 입력해 확인한다.

node -vnpm -v

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

3단계 — VS Code 설치

VS Code는 코드를 열고 편집하는 프로그램이다. 실습에서는 파일을 확인하고, VS Code의 터미널에서 Claude Code를 실행한다.

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

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

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

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

Windows의 기본 터미널인 PowerShell에서는 Mac·리눅스와 명령 문법이 달라 교재의 명령이 그대로 동작하지 않을 수 있다. Windows에서는 1단계에서 설치한 Git Bash를 기본 터미널로 설정한다. 그러면 Mac 사용자와 같은 형식의 명령을 사용할 수 있다.

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

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

뒤 단계에서 다음 계정과 API 키가 필요하다. 미리 준비해 두면 실습을 이어 가기 편하다.

• GitHub — 코드를 올릴 저장소
• Supabase — 데이터베이스와 로그인(인증)
• Vercel — 서비스를 인터넷에 배포 (GitHub 계정으로 로그인하면 편하다)
• AI 기능용 API 키 — 이 과정은 Gemini API를 쓴다. Google AI Studio(aistudio.google.com)에서 카드 없이 무료로 발급받는다. 발급 방법은 나중에 다시 안내한다.

실습 시작 폴더 내려받기

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

이 폴더에는 세 가지 자료가 미리 들어 있다.

• docs/가이드/ — 회사 가이드 문서(디자인시스템·코딩컨벤션·프로젝트구조·깃커밋컨벤션)
• data/킥오프_회의록.md — 개발의 출발점이 되는 회의록
• docs/templates/ — PRD 양식(PRD-템플릿.md)과 API 명세 양식(API-Spec-템플릿.md). 기획 단계와 API 설계 단계에서 쓴다

팀 규칙 파일(CLAUDE.md)과 앱 코드는 아직 없다. 다음 장부터 실습을 진행하며 만든다. 압축을 푼 moneynote가 프로젝트 폴더이며, 이후 작성하는 파일을 이 폴더에 저장한다.

이 단계 마무리

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

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