5단계 — AI 코딩 도구 연결

2024년 말부터 Claude Code · Cursor · GitHub Copilot 같은 AI 도구가 "보조" 를 넘어 "실제 생산" 단계에 들어섰습니다. 사용법만 익히면 학습 속도가 1.5 ~ 3 배로 붙어요.

1. 도구 풍경

도구	형태	특징	가격
Claude Code	CLI	터미널에서 직접 · 파일 다수 수정	Pro $20 · Max $200
Cursor	IDE (VS Code fork)	에디터 내장 · 채팅 + 자동완성	Free · Pro $20
Windsurf	IDE	Cursor 유사 · Cascade 에이전트	Free · Pro $15
GitHub Copilot	플러그인 (VS Code 등)	한 줄 자동완성 중심	$10
Kiro	IDE (AWS)	2025 공개 · 스펙 드리븐	등록 대기

초보자는 Cursor 또는 Claude Code 시작이 가장 부드럽습니다.

2. Claude Code 설치

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

claude --version

글로벌 설치 (-g) · Node 20+ 필요.

3. 로그인

claude login

브라우저가 열리면 Claude 계정으로 로그인 → 구독 플랜 (Pro · Max · API) 에서 선택.

4. 첫 명령

프로젝트 폴더에서:

cd my-first-app
claude "src/app/page.tsx 에 'Hello, World' 를 크게 표시하고 싶어"

파일을 읽고 수정 제안. 승인 시 실제 파일 변경. 이후 pnpm dev 로 결과 확인.

5. 좋은 프롬프트 · 나쁜 프롬프트

나쁜 프롬프트

• "React 앱 만들어줘" → 너무 모호
• "버그 고쳐줘" → 어떤 버그?
• "예쁘게 해줘" → 기준 없음

좋은 프롬프트

• "src/app/page.tsx 에 이메일 · 비밀번호 입력 폼을 추가. Tailwind 로 중앙 정렬, 제출 시 /api/login 으로 POST"
• "user.ts 의 테스트에서 비밀번호 해싱이 기대값과 다른 원인 찾기"
• "이 컴포넌트의 접근성 개선 — aria-label · 키보드 네비게이션"

구체 파일 · 구체 조건 · 구체 결과 셋이 좋은 프롬프트.

6. CLAUDE.md (또는 AGENT.md)

프로젝트 루트에 CLAUDE.md 파일을 두면 Claude Code 가 작업 시작 시 자동 로드.

# 내 프로젝트

## 스택
- Next.js 16 App Router
- TypeScript strict
- Tailwind v4
- PostgreSQL + Drizzle ORM

## 규칙
- 패키지 매니저는 pnpm 만
- 커밋 메시지 한국어
- 테스트는 vitest

## 폴더 구조
- src/app — 페이지 · API 라우트
- src/lib — 유틸 · DB
- src/components — 재사용 UI

AI 가 규칙을 자동으로 인식. 같은 지시 반복 안 해도 됩니다.

7. slash 명령

Claude Code 대화 중:

/clear       새 대화 시작 (컨텍스트 초기화)
/init        CLAUDE.md 템플릿 생성
/memory      장기 기억 관리
/agents      서브에이전트 목록
/mcp         MCP 서버 상태

8. Cursor 대안 경로

VS Code 가 익숙하면 Cursor 가 더 편할 수 있습니다.

# https://cursor.sh 에서 다운로드

핵심 단축키:

• Cmd/Ctrl + K — 선택 영역 AI 수정
• Cmd/Ctrl + L — 파일/프로젝트 채팅
• Cmd/Ctrl + I — Composer (여러 파일 에이전트)
• Tab — 인라인 자동완성 (Copilot 과 유사)

9. 안전하게 쓰는 법

• API 키 주의 — AI 에게 보여주면 로그에 남을 수 있음. 환경변수만
• 자동 커밋 주의 — AI 가 임의로 커밋하지 않게 · 항상 diff 확인 후 승인
• 의존성 주입 주의 — 모르는 npm 패키지 설치 요청은 공식 여부 확인
• 생성된 코드 이해 — 돌긴 하는데 왜 도는지 모르면 위험. 한 줄씩 읽어볼 것

10. 비용 관리

Claude Code Max ($200/월) 은 대용량 사용에 적합하지만 개인에게 비쌈.

• Pro ($20) — 하루 몇 시간 사용에 충분
• API 종량제 — 드물게 쓰는 경우 유리
• Cursor Free — 월 50 요청 무료

처음에는 Free / Pro 로 감을 잡고 사용량에 맞춰 조정.

11. 학습 태도

AI 는 검증 없는 확신 으로 잘못된 코드를 내놓을 때가 있습니다.

• 자동완성 맹신 금지 — 타입 · 함수 시그니처 확인
• 테스트 작성으로 AI 코드 검증
• 공식 문서 병행 학습 — "왜 이렇게 쓰는지" 이해가 더 중요

AI 를 빠른 동료 로 여기되 최종 결정자 는 항상 본인.

12. 자주 걸리는 자리

• AI 가 오래된 API 사용 — 모델 학습 시점 이후 업데이트를 모름. 문서 먼저 확인
• 큰 수정 한 번에 — 10 파일 동시 변경은 검토 어려움. 한 번에 1 ~ 3 파일
• 반복 지시 무시 — CLAUDE.md 에 규칙 넣으면 해결
• gitignore 무시 — .env · 비밀파일이 AI 가 보게 될 때 주의

13. 다음 방향

이제 기본 셋업 완료. 다음은 관심 영역 선택:

• 프론트엔드 — frontend-foundations 강좌
• Next.js 풀스택 — nextjs-fullstack
• 백엔드 — backend-with-spring 또는 python-data-pipeline
• AI 도구 심화 — ai-agent-tooling

각 강좌는 getting-started 완료를 전제로 작성됐습니다.

하고픈 말

AI 코딩 도구는 학습 자체를 치료해 주는 건 아닙니다. 기초를 탄탄히 익힌 사람이 AI 를 쓰면 퍼포먼스가 배가되고, 기초 없이 AI 만 쓰면 에러 앞에서 막힙니다. 사람 → 도구 순서가 중요.

축하합니다 — 첫 5 계단을 다 올랐어요. 본격적인 학습은 이제부터입니다. 🎉

Next

• frontend-foundations 또는 nextjs-fullstack

Claude Code 공식 · Cursor 공식 · GitHub Copilot 을 참고합니다.