← 목록으로

클로드 코드 20단계로 따라하기

20개 항목을 하나씩 체크하며 마스터하세요.

노코드 CLI
20단계 따라하기 명령어 모음
진행률 0%
Level 1: 0/0 Level 2: 0/0 Level 3: 0/0
Level 1 기초 - 단계별로 천천히 7개 팁
1 설치하기 (IDE + Claude Code) npm install -g @anthropic-ai/claude-code ▼
  • VS Code 또는 Cursor 설치 후 정상 실행 확인
  • 터미널(Terminal) 패널 열어보기 (Ctrl + ` )
  • Node.js 설치 확인 node -v
  • Claude Code 패키지 설치 후 claude 입력해서 첫 실행
  • Anthropic 계정으로 인증 완료
  • 맥에서 권한 에러가 나면 명령어 앞에 sudo를 붙여 다시 실행
2 첫 프로젝트 만들기 mkdir my-project && cd my-project && claude ▼
  • 새로운 작업 폴더를 하나 만들기
  • "스탑워치 웹페이지를 만들어줘" 입력
  • 만들어진 결과물을 브라우저로 열어보기
  • 결과물이 정상 동작하는지 직접 클릭해서 테스트
3 CLAUDE.md 활용 /init ▼
  • /init을 입력하여 프로젝트 초기화
  • 자동으로 만들어진 CLAUDE.md 내용 살펴보기
  • CLAUDE.md에 자주 쓰는 명령(빌드·테스트)과 코딩 스타일을 직접 추가
4 Esc로 중단/복구 Esc · Esc×2 ▼
  • 진행 중인 작업에서 Esc 키로 멈추기
  • 한 번 더 Esc를 눌러 이전 상태로 되돌리기
  • 되돌리기 후 파일이 원래대로 복구되었는지 확인
5 /doctor로 환경 점검 /doctor ▼
  • /doctor를 실행하여 환경 점검
  • 진단 결과에서 문제 여부 확인
  • 출력된 명령어를 복사해서 그대로 실행해보기
6 파일·이미지 입력 (드래그앤드롭) 드래그 & 드롭 · 붙여넣기 ▼
  • 에러 메시지 복사 후 붙여넣기
  • 스크린샷을 드래그앤드롭으로 입력하기
  • PDF 파일도 드래그앤드롭으로 분석 요청
  • 에러 스크린샷에 "원인이 뭐야?" 물어 정확히 짚어내는지 확인
7 작업 목록(To-Do) 확인 자동 생성 · "작업 목록 보여줘" ▼
  • 복잡한 요청 시 자동 생성된 To-Do가 진행에 따라 ✓로 업데이트되는 것 관찰
  • "작업 목록 보여줘"라고 요청해서 현재 진행 상황 확인
Level 2 중급 - 나도 바이브코딩 9개 팁
8 Shift+Tab 모드 전환 (자동승인 + Plan) Shift + Tab ▼
  • Shift + Tab 한 번: 자동 승인 모드 (파일 생성·수정 자동 진행)
  • Shift + Tab 두 번: Plan 모드 (코드 작성 없이 계획만 수립)
  • 하단 표시줄에서 현재 모드 확인
  • 복잡한 작업은 Plan 모드로 검토 후 승인
9 깊이 생각하기 (Extended Thinking) Option+T (Mac) · Alt+T (Win) ▼
  • 별도 설정 없이 기본 활성화되어 있는지 확인 (기본값: ON)
  • Option+T (Mac) / Alt+T (Win)으로 켜고 끄기 테스트
  • Thinking ON/OFF 상태에서 같은 질문을 던져 추론 과정 노출 여부 비교
10 @ 파일 참조 @파일명 · @폴더명 ▼
  • @파일명을 입력하여 원하는 파일을 직접 지정
  • @폴더명으로 특정 폴더 전체를 참조
11 /model 모델 전환 /model ▼
  • /model을 입력하여 사용 가능한 모델 목록 확인
  • Haiku, Sonnet, Opus를 바꿔가며 테스트
  • Opus는 복잡한 설계·리팩토링, Haiku는 단순 수정·요약에 적합한 것 체감
12 /compact 대화 정리 /compact ▼
  • 대화가 길어지면 /compact로 요약
  • /compact 직후 /context로 토큰 사용량이 줄어든 것 확인
  • /compact 뒤에 지시사항을 추가해서 원하는 방식으로 정리
13 효과적인 프롬프트 구체적 서술 · 예시 첨부 ▼
  • "버튼 만들어줘" vs "주황색 둥근 버튼, hover 시 어두워짐" 같은 구체적 묘사로 차이 체감
  • 참고할 예시나 스타일을 함께 전달
  • 수정할 파일 경로를 직접 명시
  • 출력 형식이나 구조를 미리 지정
14 작은 단위로 나누기 한 번에 한 가지씩 ▼
  • 회원가입 = 폼 UI → 유효성 검사 → API 연결 → 완료 화면, 각각 따로 요청
  • 한 번에 한 가지만 요청하기
  • 각 단계마다 결과를 확인하고 다음으로 진행
15 ! 즉시 실행 !ls · !npm start ▼
  • !ls 또는 !npm start처럼 느낌표(!) 뒤에 명령어를 붙여 실행
  • 별도 확인 과정 없이 곧바로 실행되는 것 확인
  • git status, ls, npm test 같은 자주 쓰는 명령을 !로 즉시 실행
16 메모리 활용 /memory · "이건 기억해줘" ▼
  • "이건 기억해줘"라고 말하면 다음 세션에도 유지되는지 확인
  • /memory로 현재 저장된 메모리 내용 확인
  • 반복되는 선호사항(코딩 스타일, 언어 등)을 메모리에 저장
Level 3 고급 - 완전 정복 4개 팁
17 대화로 계획 세우기 "코딩 전에 먼저 나한테 질문해줘" ▼
  • "코딩 전에 먼저 나한테 질문해줘"라고 요청
  • Claude의 질문에 답변하면서 요구사항을 구체화
  • 정리된 계획서를 확인하고 구현 시작 전에 최종 검토
18 /context 기억 상태 확인 /context · /clear ▼
  • /context를 실행하여 현재 토큰 사용량 % 확인
  • 70% 이상이면 /compact로 대화 압축
  • 새 주제 시작 시 /clear로 깔끔하게 리셋
19 HANDOFF.md 인수인계 @HANDOFF.md ▼
  • "지금까지 내용을 HANDOFF.md로 정리해줘" 요청
  • 대화 초기화 후 @HANDOFF.md를 참조하여 작업 재개
  • 이전 내용을 기억한 채로 작업이 이어지는지 확인
20 나만의 명령어 만들기 mkdir -p .claude/commands/ ▼
  • .claude/commands/ 폴더 새로 만들기
  • 마크다운(.md) 파일에 나만의 명령어 정의
  • /project:명령어 형태로 직접 실행해보기
  • 개인 전용 명령어는 홈(~/.claude/commands/)에 저장

마스터 체크

Level 1 완료 "혼자서 프로젝트를 시작할 수 있다"
Level 2 완료 "바이브코딩으로 빠르게 만들 수 있다"
Level 3 완료 "Claude Code를 완전히 내 것으로 만들었다"