03. 개발 환경 세팅 - Claude Code 설치부터

03편. 개발 환경 세팅 - Claude Code 설치부터

본격적인 개발에 앞서 환경을 세팅합니다.
Node.js, VS Code, Git, 그리고 핵심인 Claude Code까지.

---

🖥️ 시작하기 전에

코드를 짜려면 먼저 도구가 필요합니다.

목수에게 망치가 필요하듯, 개발자에겐 에디터와 터미널이 필요합니다.

저는 컴퓨터에 아무것도 설치 안 되어 있다고 가정하고 시작했습니다. 깨끗한 상태에서 하나씩 쌓아올리는 게 나중에 문제 생겼을 때 디버깅하기 쉽거든요.

---

1️⃣ Node.js 설치

첫 번째로 설치한 건 Node.js였습니다.

Node.js가 뭐냐면, JavaScript를 컴퓨터에서 실행할 수 있게 해주는 프로그램입니다. Next.js를 쓰려면 반드시 필요합니다.

nodejs.org에 들어가서 LTS 버전을 다운받았습니다. LTS는 Long Term Support, 안정적인 버전이라는 뜻입니다.

설치 파일을 실행하고 Next만 계속 클릭했습니다. 별다른 설정 없이 기본값으로.

설치가 끝나고 터미널을 열어서 확인해봤습니다.

node -v
# v20.x.x

npm -v
# 10.x.x

버전이 뜨면 성공입니다.

---

2️⃣ VS Code 설치

다음은 코드 에디터입니다.

VS Code는 마이크로소프트가 만든 무료 에디터입니다. 메모장의 고급 버전이라고 생각하면 됩니다. 전 세계 개발자들이 가장 많이 쓰는 에디터이기도 합니다.

code.visualstudio.com에서 다운받아 설치했습니다.

확장 프로그램

VS Code의 진짜 힘은 확장 프로그램에 있습니다.

왼쪽 사이드바에서 네모 네 개 아이콘(Extensions)을 클릭하고, 이것들을 설치했습니다:

확장 프로그램	왜 설치했나
ESLint	코드 문법 실수를 잡아줌
Prettier	저장하면 코드 자동 정렬
Tailwind CSS IntelliSense	CSS 클래스 자동완성
Error Lens	에러를 코드 옆에 바로 표시

설정

Ctrl + Shift + P를 누르고 "settings json"을 검색해서 설정 파일을 열었습니다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.autoSave": "onFocusChange"
}

이 설정의 효과:

• 저장하면 자동으로 코드 정렬
• ESLint 오류 자동 수정
• 다른 창 클릭하면 자동 저장

수동으로 정렬할 일이 없어졌습니다.

---

3️⃣ Git 설치

Git은 코드 버전을 관리하는 도구입니다.

"어제 코드로 돌아가고 싶어" 할 때 필요합니다. 그리고 나중에 Vercel 배포할 때도 필수입니다.

git-scm.com에서 다운받아 설치했습니다. 역시 기본 옵션 그대로.

git --version
# git version 2.x.x

버전이 뜨면 설치 완료.

초기 설정도 해줬습니다:

git config --global user.name "내 이름"
git config --global user.email "내이메일@example.com"

---

4️⃣ GitHub 계정

Git은 로컬 도구이고, GitHub은 코드를 온라인에 저장하는 서비스입니다.

github.com에서 계정을 만들었습니다. 무료 플랜으로 충분합니다.

---

5️⃣ Claude Code 설치

드디어 핵심입니다.

Claude Code는 터미널에서 AI와 대화하며 코딩하는 도구입니다. 파일을 직접 생성하고 수정할 수 있습니다. 이게 이 실험의 핵심 도구입니다.

터미널에서 이렇게 입력했습니다:

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

설치가 끝나고 실행:

claude

처음 실행하면 브라우저가 자동으로 열립니다. Anthropic 계정으로 로그인하고 연결을 승인하면 끝.

터미널로 돌아오면 이런 화면이 뜹니다:

╭─────────────────────────────────────╮
│ Claude Code                         │
│ Type your message...                │
╰─────────────────────────────────────╯

이 순간이 좀 설렜습니다. 진짜 AI와 대화하면서 코딩할 수 있게 된 거니까요.

---

⚠️ 설치하다 막힌 것들

순탄하지만은 않았습니다. 몇 가지 문제가 있었습니다.

"npm: command not found"

Node.js 설치 후 터미널을 재시작 안 해서 생긴 문제였습니다. 터미널을 껐다 켜니 해결.

Windows PowerShell 실행 정책 오류

"이 시스템에서 스크립트를 실행할 수 없습니다" 에러가 났습니다.

PowerShell을 관리자 권한으로 열고 이렇게 입력하니 해결됐습니다:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

인증 실패

브라우저가 안 열려서 당황했습니다.

이럴 땐 수동으로 인증 URL을 얻을 수 있습니다:

claude --auth-url

표시된 URL을 브라우저에 직접 붙여넣으면 됩니다.

---

💡 알게 된 것들

VS Code 내장 터미널

별도 터미널 앱을 안 켜도 됩니다. VS Code에서 Ctrl + `(백틱)을 누르면 터미널이 열립니다. 코드 보면서 바로 명령어 실행할 수 있어서 편합니다.

Claude Code 비용

Anthropic API는 사용량 기반 과금입니다.

모델	입력 (100만 토큰)	출력 (100만 토큰)
Claude Sonnet 4	$3	$15
Claude Opus 4	$15	$75

Claude Code는 기본적으로 Sonnet을 사용합니다. 복잡한 작업에만 /model opus로 전환하면 비용을 아낄 수 있습니다.

3개월간 약 $50 정도 사용했습니다. 한 달에 2만 원 정도.

.gitignore

프로젝트를 만들면 .gitignore 파일을 꼭 확인해야 합니다.

node_modules/
.env
.env.local
.next/

특히 .env.local은 절대 GitHub에 올리면 안 됩니다. API 키, 비밀번호 같은 민감 정보가 들어있거든요.

---

🎯 첫 번째 대화

환경 세팅이 끝났습니다. 이제 진짜로 AI와 대화해볼 차례입니다.

프로젝트 폴더를 만들고 Claude Code를 실행했습니다:

mkdir my-first-project
cd my-first-project
claude

그리고 이렇게 입력했습니다:

안녕, 나는 Next.js로 프로젝트를 만들려고 해.
먼저 간단한 Hello World 페이지를 만들어줄 수 있어?

AI가 답하기 시작했습니다. 프로젝트 구조를 설명하고, 파일을 생성하고, 실행 방법까지 알려줬습니다.

신세계가 열리는 순간이었습니다.

---

📋 이번 편 요약

항목	내용
설치 항목	Node.js, VS Code, Git, Claude Code
Claude Code 비용	약 $15-20/월 (사용량 따라)
추천 VS Code 확장	ESLint, Prettier, Tailwind IntelliSense
핵심 명령어	/help, /cost, /model, /clear

---

다음 편에서는 Next.js 프로젝트를 생성하고 폴더 구조를 설계합니다.

💬 설치하다 막히는 부분 있으면 댓글로 남겨주세요!