Appearance
Ch.2: VS Code에서 시작하기
이 챕터를 읽으면, VS Code에 클로드코드를 설치하고 첫 대화를 나눌 수 있습니다.
🎬 시나리오
김선생님이 처음으로 클로드코드를 설치해보겠다고 마음먹은 날이에요.
"설치 방법 알려줄게." 동기 교사가 말했어요. "VS Code 열고, 터미널에서 명령어 입력하면 돼."
"터미널...?"
박선생님은 멈칫했어요. 까만 화면에 흰 글씨가 깜빡이는 그 창. 영화에서 해커들이 빠르게 타이핑하는 그런 거. "저는 개발자가 아닌데요..."
괜찮아요, 선생님. 저도 처음엔 똑같았어요. 터미널이라는 단어만 들어도 심장이 빨라졌거든요. 근데 알고 보니 별거 아니었어요. 정말이에요.
💬 김선생님 한마디
"터미널은 무서운 해커 도구가 아니에요. 그냥 특별한 채팅창이에요. 카카오톡에서 친구한테 메시지 보내듯이, 터미널에서 컴퓨터한테 메시지를 보내는 거예요. 그리고 우리는 거기서 딱 한 단어만 치면 돼요.
claude."
📖 이게 왜 되나요? — 터미널은 채팅창이다
2-1. 터미널 공포 해소
터미널이 무섭게 느껴지는 이유가 있어요. 까만 배경, 흰 글씨, 마우스 대신 키보드만 써야 할 것 같은 느낌. 영화에서 해커들이 엄청 빠르게 타이핑하면서 "침입 성공!"이라고 외치는 장면이 떠오르죠.
하지만 터미널의 본질은 아주 단순해요. 채팅창이에요.
카카오톡을 생각해보세요. 메시지 입력란에 글자를 치고 Enter를 누르면 상대방이 대답하죠? 터미널도 똑같아요. 글자를 치고 Enter를 누르면 컴퓨터가 대답해요. 다만 상대방이 친구가 아니라 컴퓨터 운영체제라는 것만 달라요.
"그래도 터미널 명령어를 많이 외워야 하는 거 아니에요?"
아니에요. 우리가 터미널에서 할 일은 딱 하나예요. claude라고 입력하는 거예요. 이 한 단어만 치면 클로드코드가 켜져요. 그 다음부터는 한국어로 대화하면 돼요. "터미널 명령어를 외워야 한다"는 걱정은 내려놓으세요.
저도 6개월째 클로드코드를 쓰고 있지만, 터미널 명령어를 아는 건 claude 하나뿐이에요. 솔직히요.
2-2. VS Code가 뭔가요?
VS Code(Visual Studio Code)는 마이크로소프트가 만든 무료 프로그램이에요. 원래는 개발자들이 코드를 작성하는 데 쓰는 도구인데, 우리는 여기서 딱 한 가지만 씁니다. 터미널.
"개발자 도구를 왜 교사가 쓰나요?"라고 물으실 수 있어요. 좋은 질문이에요.
비유하자면 이래요. 고급 주방에는 전문 요리사용 도구가 가득하잖아요. 오븐, 믹서, 그릴, 진공 포장기. 우리는 그 주방에 들어가서 전자레인지 하나만 쓰는 거예요. 주방 전체를 쓸 필요 없어요. 전자레인지(터미널) 하나면 충분해요.
VS Code를 쓰는 이유는 세 가지예요.
- 무료예요. 한 푼도 안 들어요.
- 터미널이 내장되어 있어요. 별도로 터미널 프로그램을 찾을 필요 없어요.
- 클로드코드가 만든 파일을 바로 확인할 수 있어요. 왼쪽에 폴더 목록, 가운데에 파일 내용, 아래에 터미널 — 한 화면에서 전부 해결돼요.
세 번째가 특히 중요해요. 클로드코드에게 "퀴즈 만들어줘"라고 말하면, 터미널 아래에서 AI가 작업하는 모습이 보이고, 동시에 왼쪽에 새 파일이 생겨요. 그 파일을 클릭하면 가운데에 내용이 나타나요. 작업 과정과 결과를 한눈에 볼 수 있어요.
🖥️ 실습해보기 — 설치부터 첫 대화까지
자, 이제 실제로 설치해볼게요. 차근차근 따라오시면 30분이면 끝나요.
Step 0. 준비물 확인
시작하기 전에 필요한 것을 확인할게요.
- 컴퓨터: Windows 또는 Mac (학교 컴퓨터도 가능해요)
- 인터넷 연결: 설치와 AI 대화에 인터넷이 필요해요
- Anthropic 계정: claude.ai에서 무료로 만들 수 있어요
- 시간: 약 30분이면 충분해요
계정이 아직 없다면, 먼저 claude.ai에 접속해서 회원가입을 해두세요. 이메일 주소만 있으면 돼요.
Step 1. VS Code 설치하기
VS Code가 이미 설치되어 있다면 이 단계를 건너뛰세요.
방법 A (Windows)
- 웹 브라우저에서 code.visualstudio.com 에 접속해요.
- 파란색 "Download for Windows" 버튼을 클릭해요.
- 다운로드된 파일을 실행하고, "다음" 버튼을 계속 눌러서 설치를 완료해요. (설치 옵션이 나와도 기본값 그대로 두고 "다음"만 누르면 돼요.)
- 바탕화면에 생긴 VS Code 아이콘을 더블클릭해서 실행해요.
방법 B (Mac)
- 웹 브라우저에서 code.visualstudio.com 에 접속해요.
- "Download for Mac" 버튼을 클릭해요.
- 다운로드된 .zip 파일의 압축을 풀면 "Visual Studio Code" 앱이 나와요.
- 이 앱을 Applications(응용 프로그램) 폴더로 드래그해요.
- Launchpad 또는 Applications 폴더에서 VS Code를 실행해요.
당황하지 마세요. 설치 중에 "이 앱을 신뢰하시겠습니까?" 같은 보안 경고가 나올 수 있어요. 이건 정상이에요. 마이크로소프트 공식 프로그램이니까 "허용" 또는 "열기"를 선택하시면 돼요.
VS Code가 처음 열리면 영어로 나올 수 있어요. 괜찮아요. 한국어 설정을 하지 않아도 우리가 쓸 터미널은 문제없이 작동해요. 한국어로 바꾸고 싶다면, 왼쪽 아래의 톱니바퀴 아이콘 → Extensions → "Korean Language Pack" 검색 → Install을 누르면 돼요.
Step 2. 작업 폴더 만들기
클로드코드는 특정 폴더 안에서 작업해요. 수업 자료를 모아둘 폴더를 하나 만들어볼게요.
- 바탕화면에 새 폴더를 만들어요. 이름은 "수업자료"라고 지어볼게요.
- VS Code 상단 메뉴에서 파일 → 폴더 열기를 클릭해요.
- 방금 만든 "수업자료" 폴더를 선택하고 "폴더 선택"을 눌러요.
이제 VS Code 왼쪽에 "수업자료"라는 폴더 이름이 보일 거예요. 클로드코드가 만드는 모든 파일이 이 폴더 안에 저장돼요.
Step 3. VS Code에서 터미널 열기
VS Code가 열렸나요? 좋아요. 이제 터미널을 열어볼게요.
- Windows: 키보드에서
Ctrl + `을 누르세요. (Ctrl 키를 누른 채로`키를 누르세요.`키는 숫자 1 왼쪽, ESC 키 바로 아래에 있어요.) - Mac:
Ctrl + `을 누르세요. (Mac에서도 VS Code 터미널은 Ctrl 키를 써요.) - 키보드가 잘 안 된다면: 상단 메뉴에서 터미널 → 새 터미널을 클릭해도 돼요.
화면 아래쪽에 터미널 창이 나타났나요? 글자가 깜빡이는 그 창이에요. 축하해요! 선생님은 방금 터미널을 여셨어요. 이게 제일 어려운 관문이었어요. 진짜로요. 앞으로는 쉬워요.
Step 4. Node.js 설치 확인
클로드코드를 설치하려면 Node.js라는 게 먼저 설치되어 있어야 해요.
Node.js를 일상적으로 비유하면 이래요. 클로드코드가 새 앱이라면, Node.js는 그 앱을 실행하는 운영체제 같은 거예요. 스마트폰에 앱을 설치하려면 iOS나 Android가 필요하듯, 클로드코드를 설치하려면 Node.js가 필요해요.
터미널에 이렇게 입력하고 Enter를 눌러보세요.
bash
node --version결과 A: v20.11.0 같은 버전 번호가 나온다면 → 이미 설치되어 있어요! Step 5로 넘어가세요.
결과 B: 'node' is not recognized 또는 command not found가 나온다면 → 아직 설치 안 된 거예요. 걱정 마세요. 지금 설치하면 돼요.
Node.js 설치가 필요하다면:
- 웹 브라우저에서 nodejs.org 에 접속해요.
- 화면에 두 개의 다운로드 버튼이 보여요. LTS 버전(왼쪽의 초록색 버튼)을 다운로드하세요. (LTS는 "Long Term Support"의 약자로, "오래 지원하는 안정 버전"이라는 뜻이에요. 오른쪽의 "Current" 버전보다 LTS가 안전해요.)
- 다운로드된 파일을 실행하고, "Next" 버튼을 계속 눌러서 설치를 완료해요. 설정을 바꿀 필요 없이, 기본값 그대로 "Next"만 누르면 돼요.
- 중요: 설치가 끝나면 VS Code를 완전히 닫았다가 다시 열어요. (터미널이 새 설정을 인식하려면 이 과정이 꼭 필요해요. 이 단계를 빠뜨리면 다음 명령어가 작동하지 않아요.)
- VS Code를 다시 열고, 다시 "수업자료" 폴더를 열고, 다시 터미널을 열어요 (
Ctrl + `). node --version을 다시 입력해요. 버전 번호가 나오면 성공이에요!
Step 5. 클로드코드 설치
이제 진짜 클로드코드를 설치할 차례예요. 터미널에 아래 명령어를 입력하고 Enter를 누르세요.
bash
npm install -g @anthropic-ai/claude-code이 명령어가 하는 일을 쉽게 설명할게요. npm은 프로그램 설치 도우미예요. 앱스토어에서 앱을 다운로드하듯이, npm에게 "클로드코드를 내 컴퓨터에 설치해줘"라고 부탁하는 거예요. install은 "설치해줘", -g는 "컴퓨터 어디에서든 쓸 수 있게(global)"라는 뜻이에요.
설치에 1~2분 정도 걸려요. 화면에 글자가 주르륵 올라가는 건 정상이에요. 겁먹지 마세요. 설치 과정이 표시되는 거예요. 중간에 노란색 경고(WARN)가 나와도 괜찮아요. 경고는 오류가 아니에요.
설치가 끝났는지 확인하려면:
bash
claude --version버전 번호(예: 1.0.17)가 나오면 설치 완료예요!
Step 6. 첫 실행 — 로그인
터미널에 이렇게 입력하세요.
bash
claudeEnter를 누르면 Anthropic 계정 로그인 안내가 나와요. 웹 브라우저가 자동으로 열리면서 로그인 페이지로 이동할 수도 있어요. claude.ai에서 만든 계정으로 로그인하세요.
처음 로그인하면 이용약관 동의 화면이 나올 수 있어요. "Yes"를 선택하면 돼요. 이건 정상적인 절차예요.
로그인이 완료되면 터미널에 입력 프롬프트(>)가 나타나요. 이제 클로드코드와 대화할 준비가 된 거예요!
Step 7. 첫 대화
로그인 후, 바로 한국어로 말을 걸어보세요.
> 안녕! 나는 초등학교 담임 교사야. 반갑게 인사해줘.클로드코드가 친절하게 대답할 거예요. 이 순간, 선생님은 터미널에서 AI와 대화하는 중이에요. ChatGPT 웹사이트에서 대화하는 것과 느낌이 비슷하죠?
하지만 결정적인 차이가 있어요. 이 AI는 선생님의 컴퓨터 파일을 직접 읽고 쓸 수 있어요. 이걸 확인해볼게요.
> 이 폴더에 "테스트.md"라는 파일을 만들고, "안녕하세요! 클로드코드 첫 파일입니다."라고 써줘.클로드코드가 "파일을 만들어도 될까요?"라고 물어볼 거예요. "Yes" 또는 "y"를 입력하세요. 그러면 VS Code 왼쪽 파일 탐색기에 "테스트.md" 파일이 나타나요. 클릭해보세요. 정말로 내용이 적혀 있어요.
이 순간의 의미를 놓치지 마세요. AI가 인터넷 너머 서버에서 답만 보내준 게 아니에요. 선생님의 컴퓨터에, 선생님의 폴더에, 실제 파일을 만들었어요. ChatGPT로는 불가능한 일이에요. 복사-붙여넣기 없이, 파일을 첨부하지 않고, AI가 스스로 파일을 만들었어요.
첫 번째 관문을 넘었습니다.
자주 만나는 오류와 해결법
설치 과정에서 오류가 나올 수 있어요. 당황하지 마세요. 가장 흔한 세 가지만 알려드릴게요.
오류 1: "permission denied" 또는 "EACCES"
Error: EACCES: permission denied컴퓨터가 "권한이 없어서 설치 못 해요"라고 말하는 거예요. 마치 학교 컴퓨터에서 프로그램을 설치하려고 했더니 "관리자 승인이 필요합니다"가 뜨는 것과 같아요.
해결법 (Windows): VS Code를 닫고, VS Code 아이콘을 마우스 오른쪽 클릭 → 관리자 권한으로 실행 → 다시 터미널에서 설치 명령어를 입력하세요.
해결법 (Mac): 명령어 앞에 sudo를 붙여요.
bash
sudo npm install -g @anthropic-ai/claude-codesudo는 "관리자 권한으로 실행해줘"라는 뜻이에요. 비밀번호를 물어보면 Mac 로그인 비밀번호를 입력하세요. (비밀번호를 입력할 때 화면에 아무것도 안 나타나는 건 정상이에요. 보안을 위해 일부러 그런 거예요. 타이핑이 안 되는 게 아니라, 보이지 않을 뿐이에요.)
오류 2: "npm: command not found"
npm: command not foundNode.js가 아직 설치되지 않았거나, 설치 후 VS Code를 다시 시작하지 않은 거예요.
해결법: Step 4로 돌아가서 Node.js를 설치하세요. 설치 후에는 반드시 VS Code를 완전히 닫았다가 다시 여세요. 이 "닫았다가 다시 열기"가 핵심이에요. 많은 분이 이 단계를 놓쳐요.
오류 3: "네트워크 오류" 또는 설치가 중간에 멈춤
학교 네트워크에서 특정 사이트가 차단되어 있을 수 있어요. 학교 보안 정책에 따라 npm 저장소에 접근이 안 될 수도 있어요.
해결법: 학교 Wi-Fi 대신 개인 핫스팟(스마트폰 테더링)으로 연결해서 다시 시도해보세요. 또는 집에서 설치하세요. 한 번 설치하면 학교에서도 사용할 수 있어요. 설치는 한 번만 하면 돼요.
2-3. 알아두면 좋은 것: @파일명과 #메모
클로드코드에서 대화할 때 두 가지 편리한 문법이 있어요. 지금 당장 외울 필요는 없고, "이런 게 있구나" 정도만 알아두세요. 나중에 자연스럽게 쓰게 될 거예요.
@파일명 — 파일을 대화에 불러오기
> @수업안_3월.md 이 수업안을 4월 버전으로 수정해줘.@을 붙이면 내 컴퓨터에 있는 파일을 대화에 직접 가져올 수 있어요. 파일을 복사해서 붙여넣을 필요 없이, 파일 이름만 적으면 클로드코드가 알아서 읽어요.
교사에게 특히 유용한 상황이에요. 예를 들어, 지난달에 만든 수업안 파일이 있다면, 그걸 @으로 불러와서 "이번 달 버전으로 수정해줘"라고 하면 돼요. 파일을 열고, 복사하고, 붙여넣는 과정이 전부 사라져요.
#메모 — 나중에 기억할 메모 남기기
> #다음주에는 Unit 4 자료 만들어야 함#으로 시작하면 클로드코드가 이 내용을 메모로 저장해요. 다음에 대화할 때 참고할 수 있어요. 수업 중간에 "아, 이 형식 좋다. 다음에도 이렇게 해야지" 하는 생각이 들면 #으로 메모해두세요.
🎯 이번 주 딱 한 가지
VS Code를 열고, Ctrl + `을 눌러서 터미널을 여세요. 그리고 claude --version을 입력해보세요.
버전 번호가 나오면, 선생님은 이미 클로드코드를 쓸 준비가 된 거예요. 아직 설치 전이라면, 이번 주말에 집에서 30분만 투자해보세요. Step 1부터 Step 7까지 이 책을 펼쳐놓고 따라하면 돼요.
중간에 막히면 괜찮아요. 오류가 나도 괜찮아요. 위에 적어둔 해결법을 참고하세요. 그래도 안 되면, 다음 챕터의 CLAUDE.md까지 읽고 나서 다시 시도해도 돼요. 순서가 조금 바뀌어도 괜찮아요. 중요한 건 포기하지 않는 거예요.