환경 셋업

Node.js는 다른 도구들의 엔진입니다. 꼭 가장 먼저 설치하세요.

설치 단계

1. https://nodejs.org 접속
2. 화면에 큰 초록 버튼 2개가 보입니다. "LTS" 라고 적힌 왼쪽 버튼 클릭 (LTS = 안정판)
   ※ "Current"는 최신판이지만 불안정할 수 있으니 절대 누르지 마세요
3. 다운로드된 설치 파일 실행
   Windows: .msi 파일
   Mac: .pkg 파일
4. "Next" 또는 "계속" 계속 클릭
   모든 옵션 기본값 그대로 (체크박스 건드리지 말 것)
5. 마지막에 "Install" 또는 "설치" 클릭 → 비밀번호 입력 (Mac만)
6. "Finish" 또는 "닫기"

설치 확인 — 가장 중요

터미널을 열고 명령어를 입력해서 설치가 잘 됐는지 확인합니다.

• Windows: 키보드 Windows + R → cmd 입력 → 엔터
• Mac: Cmd + Space → "터미널" 검색 → 엔터

검은 창이 뜨면 아래 명령어 그대로 입력 후 엔터:

v20.x.x 같은 버전 번호가 나오면 성공! 안 나오면 컴퓨터 재부팅 후 다시 시도.

VS Code는 메모장 같은 텍스트 편집기인데, 코드 쓰기에 특화되어 있고 Claude 확장을 깔 수 있습니다.

설치 단계

1. https://code.visualstudio.com 접속
2. 중앙의 큰 파란 버튼 "Download for Windows" (또는 Mac/Linux) 클릭
   ※ 자동으로 본인 OS 감지해줌
3. 다운로드된 설치 파일 실행
4. 약관 동의 → "다음" 계속 클릭
5. "기타 작업" 화면에서 모든 체크박스에 체크 (특히 "PATH에 추가" 체크 필수)
6. "설치" 클릭 → 완료 후 "마침"
7. VS Code 자동 실행됨

한국어 설정 (선택)

1. VS Code 좌측 사이드바에서 사각형 4개 모양 아이콘 클릭 (Extensions)
2. 검색창에 "Korean" 입력
3. "Korean Language Pack for Visual Studio Code" 설치
4. VS Code 재시작 → 한국어로 표시

Git은 코드 버전 관리 도구. 설치만 하면 됩니다. 직접 쓸 일은 거의 없습니다 (GitHub Desktop이 대신 처리).

Windows

1. https://git-scm.com/download/win 접속
2. 자동으로 다운로드 시작 (안 되면 화면의 "click here to download" 클릭)
3. 설치 파일 실행
4. 모든 화면에서 기본값 그대로 "Next" 계속 클릭 (정말 아무것도 건드리지 마세요)
5. "Install" → "Finish"

Mac

Mac은 보통 이미 깔려있습니다. 터미널에서 확인:

버전이 나오면 끝. 안 나오면 https://git-scm.com/download/mac에서 설치.

설치 확인

터미널에 입력:

git version 2.x.x 같은 게 나오면 성공.

GitHub Desktop은 Git을 터미널 없이 클릭만으로 쓰는 도구. 초보자에게 진짜 큰 도움이 됩니다.

설치 단계

1. https://desktop.github.com 접속
2. 큰 보라색 버튼 "Download for Windows" (또는 Mac) 클릭
3. 다운로드된 파일 실행
4. 자동으로 설치 진행 (선택할 게 거의 없음)
5. 실행되면 "Sign in to GitHub.com" 클릭
6. 브라우저에서 GitHub 로그인 → "Authorize" 클릭
7. GitHub Desktop으로 돌아와서 자동 연결 확인
8. 이름·이메일 입력 화면 (이미 채워져 있을 수 있음) → "Finish"

GitHub는 코드를 저장하는 클라우드 공간입니다. 무료. Vercel 배포와도 연결됩니다.

가입 단계 (처음이라면)

1. https://github.com 접속
2. 우측 상단 "Sign up" 클릭
3. 이메일 입력 → "Continue"
4. 비밀번호 설정 (15자 이상 또는 8자+숫자+소문자)
   ※ 안전한 비밀번호 권장. 메모해두기
5. 유저네임 설정 (영문 소문자, 숫자, 하이픈만)
   ※ 예: teddy-choi
6. 이메일 인증 코드 입력 (이메일로 받은 8자리)
7. 퀴즈 풀기 (사람 인증)
8. Free 플랜 선택 → 가입 완료

이미 계정이 있다면

GitHub Desktop에서 이미 로그인되어 있는지 확인. 안 되어 있으면 ④의 5번부터 진행.

VS Code 안에서 Claude를 호출하는 확장. 오늘 가장 많이 쓸 도구입니다.

설치 단계

1. VS Code 실행
2. 좌측 사이드바에서 사각형 4개 모양 아이콘 클릭 (Extensions, 단축키 Ctrl/Cmd + Shift + X)
3. 상단 검색창에 "Claude" 입력
4. 결과 중 Anthropic이 만든 "Claude for VS Code" 찾기 (체크 마크 ✓ 표시 있음)
   ※ 비슷한 이름의 다른 확장이 있을 수 있어요. 반드시 Anthropic 공식판 선택
5. "Install" 버튼 클릭
6. 설치 완료되면 좌측 사이드바에 Claude 아이콘(삼각형 또는 별 모양)이 새로 생김
7. 그 아이콘 클릭
8. "Sign in" 버튼 클릭 → 브라우저에서 claude.ai 로그인
9. "Authorize" 클릭 → VS Code로 돌아와서 자동 연결

설치 확인

좌측 Claude 아이콘 클릭 → 채팅창이 뜨면 성공. "안녕"이라고 입력해보면 응답 옵니다.

모든 도구가 잘 깔렸는지 한 번에 확인하는 방법.

1. 터미널 확인

터미널을 새로 열어서 다음 3개를 차례로 입력:

3개 모두 버전 번호가 나오면 성공.

2. VS Code 확인

• VS Code가 정상 실행됨
• 좌측 사이드바에 Claude 아이콘 보임
• Claude 아이콘 클릭 시 채팅창 뜸

3. GitHub Desktop 확인

• GitHub Desktop이 실행됨
• 좌측 상단에 내 GitHub 프로필 이름이 보임

4. github.com 접속

• 로그인된 상태로 github.com 접속 가능
• 우측 상단에 내 프로필 아이콘 보임

위 4가지가 모두 OK면 환경 셋업 완전 완료! 🎉

1. https://vercel.com 접속
2. 우측 상단 "Sign Up" 클릭
3. "Continue with GitHub" 클릭 (가장 추천 — GitHub 연동 자동)
4. GitHub 로그인되어 있으면 자동 진행. "Authorize Vercel" 클릭
5. "Hobby" 플랜 선택 (개인 무료)
6. 이름 입력 → 대시보드 진입

대시보드가 보이면 가입 끝. 실제 배포는 워크숍 후반에 안내합니다.

1. https://supabase.com 접속
2. 우측 상단 "Start your project" 또는 "Sign up" 클릭
3. "Continue with GitHub" 클릭 (가장 추천)
4. "Authorize Supabase" 클릭
5. Organization은 자동 생성된 것 그대로 사용
6. 가입 완료. 첫 프로젝트는 실제로 쓸 때 만들면 됩니다.

※ 실제 프로젝트 생성·연동은 워크숍 후반(또는 집에서) 안내합니다. 첫 연동은 30~60분 걸려서 오늘 안에 못 끝낼 수 있어요.

설치는 됐지만 PATH가 안 잡혔을 가능성. 해결:

• 터미널(CMD/PowerShell)을 새로 열어보기 — 90%는 이걸로 해결
• 그래도 안 되면 노트북 재부팅
• 그래도 안 되면 강사 호출

GitHub Desktop을 쓰면 자동 로그인되어 이 문제가 거의 없습니다. 만약 발생하면:

• GitHub Desktop에서 한 번이라도 Push를 했는지 확인 (첫 Push 시 GitHub 로그인 창 뜸)
• 로그인 창에서 GitHub 계정으로 로그인하면 이후 자동

• VS Code를 완전히 종료 후 재시작
• 확장 페이지에서 "다시 로드(Reload)" 버튼 클릭
• 브라우저에서 claude.ai 로그인 상태 확인

• 가입 직후 "New Project" 클릭
• Organization은 자동 생성된 것 그대로
• Project name: 영문 소문자 (예: my-first-app)
• Database Password: 강력하게 설정 후 반드시 메모
• Region: Northeast Asia (Seoul) 선택
• "Create new project" → 2~3분 대기

증상: claude 입력하면 "이해할 수 없는 명령어" 또는 command not found 에러.

원인: Claude Code 네이티브 Windows 버전은 Git Bash 기반으로 동작합니다. PowerShell이나 CMD에서는 인식되지 않아요.

해결 단계

1. Git for Windows가 설치되어 있는지 확인 → 없으면 git-scm.com/download/win 에서 설치
2. VS Code 터미널을 Git Bash로 전환 (아래 토글 참조)
3. Git Bash에서 아래 명령어로 Claude Code 설치:

4. 설치 후 확인:

버전 번호가 나오면 성공.

방법 1. 새 터미널 하나만 Git Bash로 (간단)

1. VS Code 상단 메뉴 → Terminal → New Terminal
2. 터미널 창 우측 상단 + 버튼 옆 드롭다운 화살표(∨) 클릭
3. 목록에서 Git Bash 선택

방법 2. 기본 터미널을 Git Bash로 고정 (권장)

1. Ctrl + Shift + P 눌러서 명령 팔레트 열기
2. Terminal: Select Default Profile 검색해서 선택
3. 목록에서 Git Bash 클릭
4. 이후 새 터미널은 자동으로 Git Bash로 열립니다

증상: npm install -g @anthropic-ai/claude-code 실행 시 권한(Permission) 오류, 또는 PowerShell 스크립트 실행이 막힘.

원인: Windows의 PowerShell 기본 실행 정책이 Restricted(모든 스크립트 차단)로 되어 있어서 npm 내부 스크립트가 막힙니다.

해결 단계

1. 시작 메뉴 → PowerShell 검색 → 마우스 우클릭 → "관리자 권한으로 실행"
2. 열린 창에 아래 명령어 입력 후 엔터:

3. "Y" 입력 후 엔터 (변경 확인)
4. PowerShell 종료
5. 다시 VS Code → Git Bash 터미널 열어서 설치 명령어 재실행:

Claude Code가 Linux/Unix 기반으로 만들어졌기 때문입니다. Windows 기본 도구인 CMD는 다른 언어로 동작해요.

참고: Mac은 기본 터미널이 Linux 계열(zsh)이라 이런 문제가 없습니다. Windows만 별도 설정 필요.

아래 6가지가 모두 OK면 Claude Code를 정상적으로 쓸 수 있습니다.

• □ Git for Windows 설치됨 (git --version 동작)
• □ VS Code 터미널이 Git Bash로 설정됨
• □ PowerShell 실행 정책이 RemoteSigned 이상
• □ npm install -g @anthropic-ai/claude-code 완료
• □ claude --version 정상 출력됨
• □ claude 실행 후 인증 완료

이 체크리스트는 워크숍 끝나고 집에 가서 다시 셋업할 때도 그대로 쓸 수 있어요.