개발 환경 + Claude Code 셋업

이 강의의 실습은 손으로 타이핑하는 코딩이 아니라, Claude Code에 프롬프트로 지시해 만드는 방식입니다. (지금 보는 이 사이트도 그렇게 만들어졌어요.) 그래서 가장 먼저 할 일은 Claude Code를 제대로 세팅하는 것 — 설정, 스킬셋, MCP, hooks. 그다음 9개 서비스 키를 한 파일로 모읍니다.

로컬 환경

• Node.js 24 LTS (Mac/Win)
• Git + 터미널
• Claude Code 설치: npm i -g @anthropic-ai/claude-code → 프로젝트 폴더에서 claude 실행 (VS Code/JetBrains 확장, 데스크탑·웹 앱으로도 가능)

Claude Code 설정 — settings.json · 권한 · 모델

프로젝트 루트 .claude/settings.json(프로젝트별) 또는 ~/.claude/settings.json(전역):

{
  "permissions": {
    "allow": ["Bash(npm run *)", "Bash(vercel *)", "Read", "Edit", "Write"],
    "deny": ["Bash(rm -rf *)"]
  },
  "model": "claude-opus-4-8"
}

• permissions.allow: 자주 쓰는 명령을 넣어두면 매번 승인 팝업 없이 흐름이 끊기지 않습니다. 위험한 건 deny.
• model: 작업 난이도에 맞게 (대화 중 /model로도 전환).
• /config로 테마·모델 등 간단 설정.

팁: 승인 피로가 심하면 /permissions로 자주 쓰는 읽기 전용 명령을 allow에 추가하세요. 단, 파괴적 명령은 절대 와일드카드로 열지 말 것.

스킬셋(Skills) — 반복 작업을 명령으로 박제

Skill = "이런 요청이 오면 이렇게 처리하라"를 담은 폴더. 자연어로 부르거나 슬래시 명령(/이름)으로 호출합니다.

• 위치: .claude/skills/<이름>/SKILL.md
• 형식:

---
name: deploy-check
description: 배포 전 빌드·린트·점검. "배포 전 점검" 같은 요청에 사용.
---
1. `npm run build` 실행 후 에러 확인
2. 린트·타입 오류 정리
3. 핵심 페이지·API 200 확인

• description이 트리거입니다 — Claude가 이 설명을 보고 자동 호출 여부를 판단하니, "언제 쓰는지"를 명확히 적으세요.
• 호출: /deploy-check 또는 그냥 "배포 전 점검해줘".
• 마켓플레이스 스킬도 설치해 씁니다 — 예: vercel(배포·env·로그), anthropic-skills(pdf·docx·pptx·xlsx 생성) 등. (이 강의의 평가서 PDF도 스킬로 만들었어요.)

MCP 서버 — 외부 도구를 Claude 손에 쥐어주기

MCP(Model Context Protocol)로 Vercel·Supabase·ElevenLabs·GitHub 등을 Claude가 직접 조작하게 합니다.

// .mcp.json (프로젝트) — 예시
{ "mcpServers": {
  "vercel":   { "command": "npx", "args": ["-y", "@vercel/mcp"] },
  "supabase": { "command": "npx", "args": ["-y", "@supabase/mcp-server-supabase"] }
} }

• 연결되면 Claude가 배포·로그·DB·도메인을 코드 없이 호출합니다. (이 강의도 Vercel·Supabase·ElevenLabs MCP를 그대로 씁니다.)
• 커넥터(원클릭 연결)로 붙이는 방법도 있습니다.
• 도구가 너무 많아지면 ToolSearch로 필요한 것만 그때그때 로드 — 컨텍스트 절약.

Hooks — 자동화 (Claude가 아니라 하네스가 실행)

특정 시점에 명령을 자동 실행합니다. "저장할 때마다 X" 같은 반복은 메모리/지시가 아니라 hooks로.

// .claude/settings.json
{ "hooks": {
  "PostToolUse": [
    { "matcher": "Edit|Write", "hooks": [{ "type": "command", "command": "npx prettier --write $CLAUDE_FILE" }] }
  ]
} }

• 예: 편집 후 자동 포맷, 커밋 전 점검, 작업 종료 알림.

외부 서비스 9종 + .env.local

#	서비스	용도	무료 한도
1	GitHub	소스·자동배포	무료
2	Vercel	호스팅·Blob·Functions	무료(+Blob 1GB)
3	Anthropic	Claude API	$5 크레딧
4	OpenAI	임베딩·GPT	$5 크레딧
5	ElevenLabs	STT·TTS	월 10k자
6	Resend	메일	월 3,000건
7	Brave Search	웹검색(선택)	월 2,000건
8	Vercel AI Gateway	LLM 라우팅(권장)	무료
9	Sentry	모니터링(선택)	월 5,000건

발급한 키는 .env.local 한 파일로 모읍니다. (절대 커밋 금지 — .gitignore 확인. 템플릿은 부록 B.)

핵심 정리

• 실습 도구는 Claude Code — 손코딩 대신 프롬프트로 지시해서 만든다.
• 설정은 .claude/settings.json(권한·모델), 반복 작업은 Skills(.claude/skills/*/SKILL.md), 외부 도구는 MCP, 자동화는 Hooks.
• 권한 allow를 잘 넣으면 승인 피로가 줄고 작업이 빨라진다. 파괴적 명령은 deny.
• Skill의 description이 자동 호출 트리거 — "언제 쓰는지"를 분명히.
• 키 9종은 .env.local 한 파일에, 커밋 금지.