LESSON 04

Claude Code 200% 활용하기

메뉴를 뒤지는 대신 말로 시킵니다

오늘의 목표

Claude Code의 화면 구성과 핵심 조작 7개를 익히고, 파일을 만들고 고치는 기본 순환을 한 번 돌아봅니다.

예상 소요 시간 약 35분

Claude Code는 어디에 있나요?

Claude Code는 3강에서 설치한 Claude 데스크탑 앱의 Code 탭에 있습니다. 앱을 열고 Code 탭을 누른 뒤, 프로젝트 폴더(my-first-app)를 고르면 시작입니다. 별도의 명령은 필요 없습니다.

화면은 세 부분입니다. 앱 버전에 따라 위치는 조금 다를 수 있습니다.

┌──────────────────────────────────────────┐
│  대화 내용                                │  ← 내 요청과 Claude의 답, 변경 내용(diff)
│  (파일 변경 비교, 실행한 명령, 결과)         │
├──────────────────────────────────────────┤
│  여기에 입력                    [보내기]    │  ← 입력창
├──────────────────────────────────────────┤
│  폴더 · 모델 · 권한 모드                    │  ← 입력창 근처 선택 버튼
└──────────────────────────────────────────┘

VS Code는 결과를 눈으로 확인하는 곳, Code 탭은 일을 시키는 곳입니다. VS Code 왼쪽 탐색기에서 파일이 생기고 바뀌는 게 실시간으로 보이니 두 개를 나란히 두세요.

터미널로도 할 수 있어요

같은 Claude Code를 터미널에서 claude로 시작할 수도 있습니다. 3강에서 연 VS Code의 터미널(Ctrl + \``)에서 프로젝트 폴더로 이동하고 claude`를 입력합니다.

cd my-first-app
claude

터미널에서는 화면 아래에 입력창과 상태 표시줄(모드 · 폴더 · 남은 맥락)이 나옵니다.

외울 조작 7개

Code 탭에서는 단축키 대신 버튼과 말로 합니다.

하고 싶은 것Code 탭에서터미널(CLI)에서
요청그냥 한국어로 입력. "index.html 만들어줘"같음
특정 파일 콕 집기파일 이름을 써서 말하기. @파일이름을 쓰면 입력 중 자동완성됨@파일이름
모드 전환 (매번 승인 → 자동 수락 → 계획)입력창 근처의 권한 모드 선택 버튼Shift + Tab
진행 중인 작업 중단정지 버튼Esc
대화 비우고 새로 시작 (조각 하나 끝날 때마다)새 대화(세션) 를 시작/clear
긴 대화를 요약해서 맥락 줄이기새 대화를 열고 필요한 내용만 다시 알려주기/compact
이미지 붙여넣기화면 캡처를 Ctrl/Cmd + V로 붙여넣으면 보고 작업함같음

이 중 파일 지목과 새 대화가 결과 품질을 가장 크게 바꿉니다. "이 파일"보다 @src/app/page.tsx가 정확하고, 주제가 바뀌면 새 대화로 시작해야 엉뚱한 파일을 안 건드립니다.

승인 창 읽는 법

Code 탭은 파일을 고치거나 명령을 실행하기 전에 무엇을 할지 보여주고 허락을 구합니다. 파일 수정이면 바뀌는 부분이 비교 화면(diff)으로 나오고, 수락하거나 거절할 수 있습니다.

 src/app/page.tsx
  - <h1>Hello</h1>
  + <h1>안녕하세요</h1>

  [수락]   [거절]

빨간(-) 줄이 사라지고 초록(+) 줄이 들어갑니다. 처음 2주는 읽고 나서 수락을 누르세요. 여기서 "요청한 것만 바꾸고 있는지" 보는 습관이 생깁니다. 이상하면 거절하고 "그 파일 말고 이 파일만"이라고 말하면 됩니다.

명령 실행(npm install 등)도 같은 방식으로 물어봅니다. 안전한 명령은 "항상 허용"을 골라 귀찮음을 줄일 수 있습니다.

터미널로도 할 수 있어요

터미널(CLI)에서는 같은 승인이 글자 선택지로 나옵니다.

● Edit src/app/page.tsx
  - <h1>Hello</h1>
  + <h1>안녕하세요</h1>

  Do you want to make this edit?
  ❯ 1. Yes
    2. Yes, and don't ask again for this file
    3. No, and tell Claude what to do differently

Yes를 누르기 전에 읽는 것, 이상하면 3번을 고르고 "그 파일 말고 이 파일만"이라고 말하는 것은 같습니다.

따라하기: 파일 하나 만들고 고쳐보기

  1. Code 탭에서 my-first-app 폴더가 선택돼 있는지 확인합니다.
  2. 입력창에: "index.html 파일을 만들고, 가운데에 '안녕하세요'라고 크게 나오게 해줘."
  3. 승인 창(비교 화면)을 읽고 수락 → VS Code 탐색기에 index.html이 생겼는지 확인 → 클릭해서 내용 훑어보기
  4. 입력창에: "@index.html 글자색을 초록색으로 바꿔줘."
  5. 비교 화면에서 빨간 줄 / 초록 줄로 정확히 그 부분만 바뀌는지 확인 → 수락
  6. 브라우저에서 파일을 열어 결과 확인
  7. 새 대화를 시작합니다. (터미널이면 /clear)

이 요청 → 승인 창 읽기 → 파일 확인 → 브라우저 확인 → 새 대화 순환이 앞으로 20일 동안 반복할 기본 동작입니다.

🧪 실습

  • VS Code 탐색기에 index.html이 생겼다
  • 브라우저에서 파일을 열었더니 "안녕하세요"가 화면 가운데에 크게 보인다
  • 두 번째 요청 후 글자색이 초록색으로 바뀐 것을 브라우저를 새로고침해 눈으로 확인했다
  • 비교 화면에서 빨간 줄(-)과 초록 줄(+)이 어디인지 손가락으로 짚을 수 있다

계획 모드 맛보기

권한 모드 선택 버튼에서 계획(Plan) 모드로 바꾸고 이렇게 물어보세요.

"이 index.html에 방문자 수를 세는 기능을 넣으려면 뭘 해야 해?"

계획 모드에서는 Claude가 파일을 읽기만 하고 방법을 설명합니다. 코드를 안 쓰니 안심하고 물어볼 수 있습니다. 큰 작업 전에 이 모드로 먼저 계획을 듣는 습관은 10강과 스킬 가이드에서 다시 다룹니다. 확인했으면 원래 모드로 되돌립니다.

터미널에서는 Shift + Tab을 두 번 눌러 계획 모드로 바꾸고, 확인 후 Shift + Tab으로 원래 모드로 돌아갑니다.

막혔을 때

  • Code 탭에서 로그인·인증 오류: 앱 메뉴에서 로그아웃 후 다시 로그인. 그래도 안 되면 앱을 완전히 종료했다가 다시 열기. 구독 상태도 확인.
  • 폴더 안의 파일이 안 보임: 선택한 프로젝트 폴더가 맞는지 확인. 클로드에게 "지금 폴더의 파일 목록을 보여줘"라고 시켜도 됩니다.
  • 응답이 영어로 옴: "앞으로 한국어로 답해줘". 9강에서 규칙 파일로 고정합니다.
  • 뭘 시켜야 할지 모르겠음: "이 프로젝트에서 뭘 할 수 있어?"라고 물어보세요.

터미널(CLI)에서는: claude: command not found면 터미널을 닫았다 다시 열고, 그래도 안 되면 3강의 설치 명령을 다시 실행합니다. 로그인하라고 하면 안내대로 브라우저에서 승인하고, /login으로 다시 시작할 수 있습니다. /help로 도움말을 볼 수 있습니다.

오늘의 체크리스트

직접 해보고 눈으로 확인한 것만 체크하세요.

🧪 실습

  • Code 탭에서 프로젝트 폴더를 골라 시작할 수 있다 (터미널이면 claude)
  • 조작 7개 표를 보고 5개를 말할 수 있다
  • 승인 창을 읽고 수락 한 번, 거절 한 번을 눌러봤다
  • @파일로 지목해서 고치는 순환을 한 번 돌았다
  • 계획 모드로 질문했고, 파일이 바뀌지 않은 것을 확인한 뒤 원래 모드로 돌아왔다

더 해보기(선택)

본 과정에 꼭 필요하지 않은 심화입니다. 시간이 남거나 더 궁금할 때 해보세요.

설정은 말로 바꿉니다

VS Code 글자 크기, 자동 저장, 탭 크기 같은 설정은 사실 settings.json이라는 파일입니다. 메뉴를 뒤질 필요 없이 Claude Code에게 말하면 됩니다.

#4 프롬프트 4-1🔴 고급

"VS Code 설정에서 글자 크기를 15로, 저장할 때 자동 정렬되게, 탭은 2칸으로 바꿔줘. settings.json을 직접 수정해줘."

Claude Code 자신의 설정도 마찬가지입니다. "Claude Code 응답을 항상 한국어로 하게 설정해줘"라고 하면 됩니다. (터미널에서는 /config로 메뉴를 열어도 됩니다.)

있으면 좋은 것

  • VS Code용 Claude Code 확장: 확장 탭에서 "Claude Code"를 설치하면 VS Code 사이드 패널에서 같은 대화를 할 수 있고, 변경 내용이 에디터 안에서 diff로 보입니다. 취향껏.
  • Prettier 확장: 저장할 때 코드를 자동 정렬. Claude가 만든 코드와 여러분이 손댄 코드의 모양이 통일됩니다.
  • Error Lens 확장: 에러를 해당 줄 옆에 바로 표시. 15강 디버깅 때 큰 도움이 됩니다.

세 개 다 Code 탭에서 "위 확장을 설치해줘"라고 시키면 됩니다. 실행할 명령을 보여주면 읽고 수락하세요. (터미널이면 "설치하는 명령어 알려줘"라고 해서 한 번에 붙여넣을 수도 있습니다.)

다음 강의

5강은 Git입니다. Claude에게 과감하게 시킬 수 있으려면 "세이브 포인트"가 있어야 합니다.