각 프롬프트·명령어는 원고의 해당 절에 수록된 내용입니다. 어두운 상자는 터미널에 입력하는 명령어, 밝은 상자는 Claude Code 대화창에 입력하는 프롬프트입니다.
4.2 설치와 인증 — 화면을 따라 차근차근 완료하기 터미널 명령어
Node.js 설치 여부 확인
node -v
Claude Code 설치 (Mac / Linux / Windows 공통)
npm install -g @anthropic-ai/claude-code
Windows 추가 조치 — 스크립트 실행 오류 시 (PowerShell "관리자로 실행" 후)
Set-ExecutionPolicy RemoteSigned
※ "변경하시겠습니까?" 물음에 A 입력 후 Enter. 이후 npm을 입력해 사용법이 표시되면 정상입니다.
Claude Code 실행
claude
※ 로그인 절차가 안 나타나면 Claude Code 실행 화면에서 /login 을 입력합니다. 종료는 Ctrl-D 두 번.
4.3 첫 번째 실행 — 폴더에 웹페이지 생성 요청 첫 지시
작업 폴더 만들고 이동 (터미널)
mkdir my-first-app
cd my-first-app
claude
첫 번째 자연어 지시 (Claude Code 대화창)
"안녕하세요"가 크게 보이는 웹페이지를 만들어줘.
만든 결과를 브라우저로 열기 · 수정해 보기
index.html 파일을 브라우저로 열어줘.
배경색을 노란색으로 바꿔줘.
※ 허락 창이 나타나면 무엇을 만들거나 실행하려는지 읽고, 처음에는 "1. Yes(이번 한 번만 허용)"를 선택하는 편이 안전합니다.
4.4 CLAUDE.md — AI에게 작업 규칙을 전달하는 방법 규칙 파일 생성
CLAUDE.md 생성 지시 (my-first-app 폴더의 Claude Code에서)
이 프로젝트의 CLAUDE.md 파일을 만들어줘. 내용은 아래와 같이 작성해줘.
- 모든 코드의 주석은 한국어로 작성한다.
- 파일을 삭제하기 전에 반드시 사용자에게 확인한다.
- 새 파일을 만들 때는 어떤 파일을 왜 만드는지 설명한다.
- 에러가 나면 원인을 쉬운 말로 설명한다.
※ CLAUDE.md는 자연어로 적는 규칙 파일입니다. 규칙이 행동을 강제로 막는 잠금장치는 아니므로, 중요한 규칙은 결과에 실제로 반영됐는지 직접 확인합니다.
4.5 [실습] 모임 정산 앱 제작 CLAUDE.md — 직접 작성
프로젝트 폴더 만들기 (터미널)
mkdir split-bill
cd split-bill
CLAUDE.md 내용 (메모장/텍스트 편집기로 직접 저장 — 파일 이름: CLAUDE.md)
# CLAUDE.md - 모임 정산 웹앱 규칙
## 만들 것
모임 비용 정산 웹앱. 하나의 HTML 파일.
브라우저에서 열면 바로 동작해야 한다.
## 기능
- 모임 이름 입력란 (예: "2026 여름 제주도 여행")
- 참여자 이름 여러 명 등록/삭제
- 지출 항목 추가 (항목명, 금액, 결제한 사람 선택)
- "정산하기" 버튼 → "누가 → 누구에게 → 얼마" 자동 계산
- 정산 결과를 보기 좋게 카드 형태로 표시
- 각 사람이 총 얼마를 썼는지 표시
- "결과 복사" 버튼 (카톡 공유용 텍스트 클립보드 복사)
- localStorage 저장 (새로고침해도 데이터 유지)
- 에러가 나면 원인을 쉬운 말로 설명한다
## 디자인
- 깔끔하고 현대적, 파란+흰색 톤, 둥근 모서리
- 한국어, ₩, 천단위 콤마, 소수점 반올림 정수
- 모바일 반응형 (375px에서도 정상 표시)
## 기술: HTML/CSS/JS 한 파일, 외부 라이브러리 금지
## ★ 완성 체크리스트 (전부 통과해야 완료)
- [ ] 참여자 3명(민수, 영희, 철수) 추가 후 화면에 표시되는가?
- [ ] 지출 3건 추가 가능한가?
(저녁식사 45,000원 민수결제 / 택시 12,000원 영희결제 / 카페 8,000원 철수결제)
- [ ] 정산 결과가 정확한가?
(총 65,000원 ÷ 3명 = 1인당 약 21,667원)
- [ ] 금액이 ₩ + 천단위 콤마 + 정수로 표시되는가?
- [ ] 자기 자신에게 보내는 경우는 표시되지 않는가?
- [ ] 새로고침 후 데이터가 유지되는가?
- [ ] "결과 복사" → 클립보드에 텍스트가 복사되는가?
- [ ] 375px 화면에서 안 깨지는가?
→ 각 항목을 실제 테스트한 과정과 증거를 보여줄 것.
→ 실패 시 수정 후 재검증. 전부 통과할 때까지 반복.
※ 저장 후 파일 이름이 정확히 CLAUDE.md인지 확인하세요. CLAUDE.md.txt처럼 .txt가 붙으면 Claude Code가 읽지 못합니다. 저장이 자꾸 막히면 Claude Code에게 "아래 내용 그대로 CLAUDE.md 파일을 만들어줘"라고 붙여 넣어도 됩니다.
4.5 [실습] 모임 정산 앱 제작 말하기 · 통제하기
실행 프롬프트 (split-bill 폴더에서 claude 실행 후 — 단 두 줄)
CLAUDE.md를 읽고, 정산 웹앱을 만들어줘.
완성 체크리스트를 전부 통과시키고 증거를 보여줘.
수정 지시 — 회귀 검증 습관 (예시)
정산 결과 카드의 글씨를 더 크게 하고, 송금 안내 부분을 맨 위로 올려줘.
수정했으면 완성 체크리스트를 처음부터 다시 전부 통과시켜줘. 증거도 보여줘.
문제가 생겼을 때 — 만능 한 마디
에러가 나는데 확인해줘.
CLAUDE.md를 다시 읽고, 체크리스트를 처음부터 다시 전부 통과시켜줘. 증거도 보여줘.
응용 — 계산만 바꾸면 다른 도구
정산 대신 출석을 기록하게 바꿔줘.
나머지 배분 규칙 — CLAUDE.md에 추가해 두면 좋은 규칙
모든 정산 금액은 원 단위 정수로 표시한다. 총액을 인원수로 나눴을 때 나머지가 생기면 참가자 순서에 따라 1원씩 배분해 각자의 부담액 합계가 전체 지출액과 정확히 같게 한다.
4.6 슬래시 명령어와 파일 지정 특수 명령어
자주 쓰는 슬래시 명령어 5가지
/help ← 사용 가능한 명령어 전체 목록
/clear ← 대화 맥락 완전 초기화 (파일·CLAUDE.md는 유지)
/compact ← 대화 요약·압축으로 기억 공간 확보
/usage ← 구독 사용량 한도 확인 (세션·주 단위)
/init ← 폴더를 분석해 CLAUDE.md 자동 생성
※ 외울 필요 없습니다 — 빈칸에 /만 입력하면 목록이 뜹니다. /usage는 구독 한도, /cost는 API 종량제 비용(7.8에서 처음 사용). 새 프로젝트는 /init보다 4.5처럼 직접 작성하는 편이 낫습니다.
@ 기호 — 작업 대상 파일 지정 (예시)
@index.html의 배경색만 노란색으로 바꾸고 다른 파일은 수정하지 마.
※ @만 입력하면 프로젝트 안의 파일 목록이 떠서 화살표·Tab으로 고를 수 있습니다. 작업 방향이 이상하면 Esc로 중단 — 이미 수정된 파일은 자동 복구되지 않으므로 "어떤 파일이 바뀌었어? 수정 전으로 되돌려줘"라고 확인·복구를 요청합니다.