직접 코딩 0% — CLAUDE CODE로 진짜 서비스 만들고 배포·운영까지

4장. Claude Code 설치와 첫 실행

유리 상자를 깨고 — AI를 내 컴퓨터의 작업자로 들입니다

4장 · 도입

다시, 당신이 잘하는 것 — 한국어로 말 걸기

가장 낯선 구간은 끝났습니다.
이 장이 끝나면 실제로 돌아가는 모임 정산 앱이
당신의 컴퓨터 안에 남습니다.

설치 → 첫 파일 → 규칙 → 검증까지, 한 단계씩 진행합니다.

4장 · 학습 목표

오늘 완성할 네 가지

설치·인증

Claude Code를 시작합니다.

첫 파일

내 PC에 HTML을 만듭니다.

규칙 파일

CLAUDE.md를 씁니다.

정산 앱

검증까지 완료합니다.

4장 · 전체 흐름

오늘 다룰 일곱 구간

4.1Claude 웹과 Claude Code

4.2설치와 인증

4.3첫 번째 실행

4.4CLAUDE.md

4.5모임 정산 앱

4.6슬래시·파일 지정

4.7완료 점검

4.1 · 웹 vs Code

재택 비서와 상주 비서

CLAUDE 웹

재택 비서

브라우저에서 대화
결과를 화면에 전달
내 PC 적용은 내가 수행

CLAUDE CODE

상주 비서

터미널에서 대화
허용한 폴더에서 작업
파일 작성·실행·수정

새로운 AI가 아니라, 허용된 도구와 작업 공간이 달라진 Claude입니다.

4.1 · 비교

가장 큰 차이는 결과가 남는 곳

비교Claude 웹Claude Code

작업 장소브라우저터미널

파일 접근올린·연결한 파일허용한 작업 폴더

결과물대화창·아티팩트내 PC의 실제 파일

반복 작업매번 요청도구로 실행·확인

4.1 · 반복 고리

상황 파악 → 작업 → 확인 → 다시 수정

상황 파악

파일과 요구를 읽습니다.

일하기

파일을 만들고 고칩니다.

결과 확인

실행·테스트합니다.

재시도

부족하면 다시 고칩니다.

강력한 고리일수록 멈출 조건·승인·검증이 필요합니다.

4.2 · 시작 전 확인

실습을 위한 준비물

Claude Code 지원 구독 계정

인터넷 연결

터미널 실행 가능

프로그램 설치 권한

개인정보 없는 실습 폴더

3장에서 익힌 mkdir · cd · ls

결제·로그인 정보와 인증 코드는 다른 사람에게 보여주거나 공유하지 않습니다.

4.2 · 설치 지도

설치의 갈림길은 하나

STEP 1

node -v

설치 여부 확인

STEP 2

Node.js LTS

없을 때만 설치

STEP 3

Claude Code

npm으로 설치

STEP 4

claude

로그인·인증

버전이 나오면 STEP 2를 건너뜁니다.

4.2 · ACTIVITY

Node.js가 있는지 먼저 확인

node -v

PS C:\Users\user>node -v

vXX.XX.X

버전 번호가 나오면 Node.js 설치를 건너뛰고 Claude Code 설치로 이동합니다.

4.2 · Node.js

“찾을 수 없음”이면 정상적인 분기

버전이 나옴

이미 준비됨

다음 단계인 Claude Code 설치로 이동합니다.

명령을 찾을 수 없음

Node.js 설치

nodejs.org에서 운영체제에 맞는 LTS 설치 프로그램을 받습니다.

다운로드 → 기본 옵션 유지 → 설치 완료 → 터미널 다시 열기

4.2 · 설치 확인

새 터미널에서 두 버전 확인

Node.js

node -v

npm

npm -v

PS C:\Users\user>node -v

vXX.XX.X

PS C:\Users\user>npm -v

XX.X.X

숫자는 화면과 달라도 됩니다. 두 명령 모두 버전이 나오면 성공입니다.

4.2 · Claude Code 설치

Mac·Windows 모두 같은 한 줄

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

① 한 줄 전체 복사 ② 터미널에 붙여넣기 ③ Enter ④ 완료 메시지까지 기다리기

명령어를 나누어 입력하지 말고, 설치 중에는 터미널을 닫지 않습니다.

4.2 · Windows 오류 분기

이 오류가 있을 때만 실행 정책 확인

오류

스크립트를 실행할 수 없습니다

PowerShell 실행 정책 때문에 npm이 차단된 경우입니다.

대응

관리자 PowerShell

Set-ExecutionPolicy RemoteSigned

변경 질문에 A 입력 후 Enter → npm 재확인

기관 관리 PC에서는 보안 설정을 임의로 바꾸지 말고 담당자에게 문의합니다.

4.2 · 첫 실행

Claude Code를 시작합니다

claude

PS C:\Users\user>claude

Claude Code 시작…

테마는 Light/Dark 중 편한 것을 선택합니다. 화면 문구는 버전에 따라 조금 달라도 됩니다.

4.2 · 로그인·인증

브라우저와 터미널을 한 번 왕복

로그인 선택

구독 계정

브라우저

계정 확인·승인

터미널

필요시 코드 입력

완료

인증 코드·비밀번호·결제정보는 화면 공유나 채팅으로 전달하지 않습니다.

4.2 · 폴더 신뢰

신뢰하기 전에 현재 경로부터 확인

실습 폴더

신뢰 가능

내가 방금 만든 프로젝트 폴더라면 내용을 읽고 승인합니다.

홈·다운로드

먼저 종료

개인 파일이 많은 넓은 폴더에서는 시작하지 않습니다.

원칙

작게 시작

새 작업은 mkdir → cd → claude 순서입니다.

로그인 화면이 다시 필요하면 Claude Code 안에서 /login을 입력합니다.

4.3 · 첫 프로젝트

작업 폴더를 만들고 그 안에서 시작

PS C:\Users\user>mkdir my-first-app

PS C:\Users\user>cd my-first-app

PS C:\Users\user\my-first-app>claude

세 줄을 한꺼번에 붙이지 말고, 한 줄씩 Enter 후 경로를 확인합니다.

4.3 · 첫 한국어 지시

2장에서 하던 대로 말하면 됩니다

“안녕하세요”가 크게 보이는 웹페이지를 만들어줘.

진행 표시

영어와 코드가 지나감

대부분은 파일을 읽고 작업하는 과정입니다.

직접 확인

완료 보고 + 실행 결과

Error·Failed·Permission denied는 실제 오류일 수 있습니다.

4.3 · 허락 창

허락 창은 첫 번째 고삐입니다

1 · YES

이번 한 번

처음에는 이것을 선택해 매번 행동을 확인합니다.

2 · ALLOW ALL…

세션 동안 허용

편하지만 충분히 익숙해진 뒤 사용합니다.

3 · NO

거절

방향이 이상하거나 이해되지 않으면 설명을 다시 요청합니다.

무엇을 만들고·고치고·실행하려는지 읽고, 이해한 행동만 승인합니다.

4.3 · 실제 파일

유리 상자 밖에 index.html이 생겼습니다

PS C:\Users\user\my-first-app>ls

index.html

CLAUDE 웹

대화창 안

아티팩트로 결과를 확인합니다.

CLAUDE CODE

내 컴퓨터

Claude를 종료해도 파일이 남습니다.

“배경색을 노란색으로 바꿔줘”라고 지시해 기존 파일 수정도 확인합니다.

4.4 · CLAUDE.md

새 직원 책상 위의 업무 메모

규칙

매번 반복할 지침

프로젝트 폴더마다 둡니다.

자연어

한국어로 작성

코드 문법이 필요 없습니다.

확인

잠금장치는 아님

결과에 반영됐는지 검증합니다.

Part 3 하네스의 첫 번째 고삐 — 규칙 쓰기

4.5 · ACTIVITY

모임 정산 앱의 작업장 만들기

PS C:\Users\user>mkdir split-bill

PS C:\Users\user>cd split-bill

PS C:\Users\user\split-bill>▌

이미 같은 폴더가 있다면 split-bill-이니셜처럼 새 이름을 사용합니다.

4.5 · 규칙 파일 저장

파일 이름은 정확히 CLAUDE.md

Windows · 메모장

파일 형식: 모든 파일 (*.*)
파일명: CLAUDE.md
인코딩: UTF-8

macOS · 텍스트 편집기

포맷 → 일반 텍스트
파일명: CLAUDE.md
“.md 그대로 사용”

CLAUDE.md.txt가 되면 읽지 못합니다. 저장 후 파일 확장명을 확인하세요.

4.5 · 규칙 구조

좋은 규칙 파일은 합격선까지 씁니다

섹션답하는 질문예시

만들 것무엇을?정산 웹앱

기능무엇을 해야?입력·계산·복사

디자인·기술어떤 제약?375px·한 파일

완성 체크리스트언제 합격?8개 실제 테스트

“실패하면 수정 후 재검증, 전부 통과할 때까지 반복”을 마지막에 명시합니다.

4.5 · CLAUDE.md

핵심 규칙을 복사해 저장

## 만들 것 모임 비용 정산 웹앱 · HTML 한 파일 ## 기능 참여자 · 지출 · 정산 · 결과 복사 · 저장 ## 디자인 파란+흰색 · 한국어 · ₩·콤마 · 375px ## 기술 HTML/CSS/JS 한 파일 · 외부 라이브러리 금지 ## 완성 8개 항목을 실제 테스트하고 증거 제시 실패 시 수정 후 재검증. 전부 통과할 때까지 반복.

세부 기능과 테스트 데이터는 원고의 CLAUDE.md 전체 내용을 그대로 사용합니다.

4.5 · ACTIVITY

규칙을 읽고 정산 앱 제작

CLAUDE.md를 읽고, 정산 웹앱을 만들어줘.
완성 체크리스트를 전부 통과시키고 증거를 보여줘.

프롬프트가 짧아도 괜찮습니다. 기능·제약·합격선은 CLAUDE.md에 있습니다.

4.5 · 확인하기

AI의 보고와 내 눈의 증거를 대조

민수·영희·철수 표시

지출 3건 입력

총액·정산 결과 정확

₩·콤마·정수 표시

자기 송금 없음

새로고침 후 유지

결과 복사 가능

375px에서 정상

체크리스트에 없는 것은 AI가 검사하지 않을 수 있습니다. 중요한 숫자는 사람이 직접 대조합니다.

4.5 · 숫자 검증

정산 결과의 기준값

총 지출₩65,000

1인당 약₩21,667

참여자3명

송금 1

영희 → 민수

₩9,667

송금 2

철수 → 민수

₩13,667

나머지 원 단위는 규칙에 따라 배분하고, 최종 부담액 합계가 총액과 같아야 합니다.

4.5 · 통제하기

수정했으면 처음부터 다시 검사

CLAUDE.md를 다시 읽고, 체크리스트를 처음부터 다시 전부 통과시켜줘. 실제 테스트 과정과 증거도 보여줘.

이유

수정은 다른 기능을 깨뜨릴 수 있음

잘 되던 항목까지 다시 확인합니다.

습관

수정 → 전체 재검증

나중에 배울 회귀 검증의 시작입니다.

4.6 · 슬래시 명령어

외우지 말고, 필요할 때 /

명령어하는 일언제

/help도움말기능이 궁금할 때

/clear대화 맥락 초기화새 주제로 시작

/compact대화 요약·압축대화가 길어질 때

/usage사용량 확인한도 확인

/initCLAUDE.md 초안기존 프로젝트 분석

4.6 · 안전 조작

사용량 · 중단 · 파일 지정

/usage

한도 확인

실습 뒤 사용량을 확인합니다.

Esc

현재 작업 중단

이미 바뀐 파일은 자동 복구되지 않습니다.

@파일이름

대상 정확히 지정

@index.html처럼 범위를 좁힙니다.

@index.html의 배경색만 노란색으로 바꾸고, 다른 파일은 수정하지 마.

4.7 · Part 1 → Part 2

AI가 브라우저 밖으로 나왔습니다

항목Part 1 · 웹Part 2 · Code

작업 장소브라우저터미널

결과아티팩트내 PC 파일

규칙개인 맞춤 설정CLAUDE.md

품질눈으로 확인체크리스트+증거

4.7 · 완료 체크

4장 완료 — 내가 할 수 있는 것

안전한 폴더에서 claude 실행

허락 창을 읽고 판단

내 PC에 index.html 생성

CLAUDE.md 정확히 저장

정산 앱 제작

기준 숫자 직접 확인

수정 후 전체 재검증

/usage · Esc · @ 활용

오류를 만났더라도 메시지를 보존하고 안전하게 해결 순서를 찾았다면 중요한 목표를 달성한 것입니다.

4장 · 마무리

하네스의 씨앗은 CLAUDE.md에서 시작됩니다

규칙을 쓰고 · 작업장을 좁히고 · 중요한 행동을 승인하고
체크리스트와 증거로 통과시킵니다.

NEXT · 5장 문서 자동화
3장에서 준비한 uv가 드디어 작동합니다.