Claude Code 설치
Claude Code는 AI와 함께 작업하는 도구입니다. 코드 작성부터 파일 관리, 웹사이트 배포까지 자연어로 할 수 있습니다.
오늘의 여정 — 지금 여기에 있습니다
내 컴퓨터 (자동 감지됨 — 다르면 눌러서 바꾸세요)
Claude Desktop 앱을 설치하고 Code 탭에서 시작합니다 (터미널 경로는 아래에 선택지로)
수업 전에 플랜부터 확인하세요
이 단계를 마치면
AI가 코드를 대신 써주는 도구가 설치됩니다. 설치 후 바로 한국어로 대화하며 코딩을 시작할 수 있어요.
Claude Desktop 앱 — 이것만 있으면 수업 준비 끝
claude.ai/download에서 앱을 내려받아 설치하고, 로그인한 뒤 Code 탭을 열면 됩니다. 수업의 웹사이트 제작과 MCP 체험 모두 이 앱에서 진행해요.
Mac이든 Windows든 이 앱 하나로 진행합니다. Mac에는 더 강력한 터미널 경로도 있는데, 수업 필수는 아니라 아래에 접어뒀어요 — 앱에 익숙해진 뒤 열어봐도 충분합니다.
Mac은 앱 하나면 준비 끝
Claude Desktop 앱을 설치하고 Code 탭을 열면, 터미널 명령어를 몰라도 한국어로 말하는 것만으로 파일을 만들고, 코드를 쓰고, 웹사이트까지 만들 수 있습니다. 오늘 수업은 이 경로로 진행해요.
Mac에는 코드 변경 기록 도구인 Git이 대개 이미 깔려 있어서, Windows처럼 따로 설치할 필요가 없어요. 혹시 없더라도 나중에 Claude가 필요할 때 설치를 안내합니다.
Mac 설치 흐름
앱 설치
Claude Desktop
로그인
Google 계정
Code 탭
파일 작업 모드
개발 도구
Node·GitHub·Vercel
Projects 폴더
작업 폴더 생성
앱 설치
Claude Desktop
로그인
Google 계정
Code 탭
파일 작업 모드
개발 도구
Node·GitHub·Vercel
Projects 폴더
작업 폴더 생성
1. Claude Desktop 설치
다운로드 페이지로 이동
아래 버튼을 클릭하면 다운로드 페이지가 열립니다.
Claude Desktop 다운로드응용 프로그램 폴더로 드래그
다운로드된 Claude.dmg 파일을 더블클릭하면 창이 열립니다. 그 안의 Claude 아이콘을 응용 프로그램(Applications) 폴더로 드래그하세요.
앱 실행
런치패드나 스팟라이트(Cmd+Space)에서 "Claude"를 검색해 실행합니다. 처음 열 때 "인터넷에서 다운로드한 앱" 확인 창이 뜨면 "열기"를 눌러주세요.
2. 로그인
Claude Desktop을 처음 실행하면 로그인 화면이 나옵니다.
로그인 방법 선택
로그인 화면에서 원하는 방법을 선택합니다. Google, 이메일 등 여러 옵션이 있습니다.
로그인 완료 — 메인 화면 확인
로그인이 끝나면 Claude Desktop 메인 화면이 나타납니다. 하단에 메시지 입력창이 보이면 성공입니다!
한국어로 바꾸기 (선택)
메뉴가 전부 영어로 되어있나요? Settings에서 한국어로 바꿀 수 있습니다.
3. Code 탭으로 전환
Claude Desktop에는 3개의 탭이 있습니다
Chat
질문/번역/글쓰기 등 일반 대화
Cowork
문서 작성, 리서치, 외부 서비스 연동
Code (우리가 쓸 것)
파일 생성, 코드 작성, 미리보기
Code 탭 클릭
상단의 "Chat", "Cowork", "Code" 탭 중 "Code"를 클릭하세요.
작업 폴더 만들기 — Projects 폴더
Code 탭에 들어가면 "프로젝트 폴더를 선택하세요"라는 안내가 나옵니다. 먼저 폴더를 하나 만들겠습니다.
내 문서(Documents) 폴더 안에 Projects 라는 새 폴더를 만들고, 그 폴더를 선택합니다.
Projects 폴더란?
개발할 때는 보통 하나의 큰 폴더 안에 여러 프로젝트를 모아서 관리합니다. 바탕화면이나 다운로드 폴더에 이것저것 만들면 금방 지저분해지거든요.
앞으로 만들 웹사이트·앱·실습 프로젝트는 각각 이 Projects 폴더 안에 서브 폴더로 생깁니다.
├── my-first-website/
├── portfolio/
└── todo-app/
이 워크스페이스를 신뢰하시겠습니까?
이런 메시지가 뜨면 "예"를 눌러주세요. Claude가 폴더에 접근할 수 있도록 허용하는 겁니다.
Code 탭 준비 완료!
4. 개발 도구 설치
웹사이트를 만들고, GitHub에 올리고, 인터넷에 배포하려면 몇 가지 도구가 필요해요. 직접 찾아서 설치할 필요 없이, Claude에게 시키면 됩니다.
Node.js 설치
내 컴퓨터에서 웹사이트를 미리 볼 수 있게 해주는 도구입니다. 이게 없으면 만든 페이지를 브라우저에서 확인할 수 없어요.
Node.js 설치해줘
설치 중에 승인을 물어보면 Accept를 눌러주세요.
GitHub CLI 설치 + 로그인
만든 코드를 인터넷에 안전하게 저장(백업)하는 도구입니다. 컴퓨터가 고장나도 코드가 살아있어요.
GitHub CLI 설치하고 로그인 시켜줘
같이 보면서 진행합니다. 강사 안내를 따라주세요.
Vercel CLI 설치 + 로그인
완성된 웹사이트를 전 세계에 공개하는 도구입니다. 이걸로 URL을 만들어서 누구나 접속할 수 있게 해요.
Vercel CLI 설치하고 로그인 시켜줘
같이 보면서 진행합니다. 강사 안내를 따라주세요.
설치 후 Claude Desktop을 껐다 켜세요
5. 첫 사용해보기
웹페이지 만들고, 말로 수정하기
Code 탭 입력창에 아래 문장을 보내보세요.
hello world라고 적힌 웹페이지 하나 만들어줘
오른쪽 미리보기 패널에 결과가 바로 열립니다. 이어서 바꾸고 싶은 걸 그냥 말하면 돼요 — “나는 핑크색을 좋아해, 연핑크로 바꿔줘” “글씨가 빛나지 않았으면 좋겠어”.
그려서 지시하기 — 펜 도구
미리보기 우상단의 펜 아이콘을 누르면 그림판처럼 도구가 열려요. 직접 그린 뒤 "채팅에 추가"하면 Claude가 그림을 보고 반영합니다.
찍어서 지시하기 — 요소 선택 도구
미리보기 우상단의 화살표 아이콘을 누르고 화면의 특정 부분을 클릭하면, 그 요소 정보가 입력창에 자동으로 들어갑니다. “이 부분만 민트색이면 좋겠어”처럼 콕 짚어 지시할 수 있어요.
사용량 확인
여기까지 해봐도 생각보다 많이 쓰지 않았다는 걸 알 수 있어요. 하단에서 현재 사용량을 확인할 수 있습니다.
말로만 설명하기 어려울 때
Accept 누르기 지쳤다면 — 자동 모드
방금 “Accept”를 여러 번 눌렀죠? 기본값에서는 파일 하나 만들 때, 코드 한 줄 고칠 때마다 매번 허락을 물어봐요. AI로 시간을 아끼려는 건데 승인 버튼 누르느라 옆에 붙어 있으면 아깝잖아요.
입력창 왼쪽 아래의 모드 메뉴에서 자동 모드를 고르면, 파일 만들기·코드 고치기·명령어 실행은 묻지 않고 진행하고, 별도의 AI 검사기가 실행 전에 확인해서 내가 시킨 범위를 넘어서거나 수상한 작업은 막아요. 요금제는 상관없어요(Pro도 돼요). Sonnet 5.5 같은 지원 모델이면 모드 메뉴에 나타납니다.
Manual(수동 권한) — 매 작업마다 물어봄 (기본, 가장 안전)
Accept edits(편집 수락) — 파일 편집만 자동, 명령 실행은 확인
Plan(계획 모드) — 바로 실행 안 하고 계획부터 세움
Auto(자동 모드) — 대부분 자동, 위험한 것만 확인 (편하지만 무엇을 하는지 지켜보기)
되돌리고 싶다면?
다음 단계 →
모델 고르기 · 사용량 아끼기
설치 끝! 다음은 모델 고르기 · 사용량 아끼기 페이지에서 Sonnet 5.5로 바꾸고 사용량 보는 법을 익혀요.
앞으로 기억할 한 가지
설치가 끝났으니, 이제부터 적용할 바이브코딩의 핵심 원칙입니다.
이제부터는 검색하지 마세요
설치도, 설정도, 전부 AI에게 말하면 됩니다
방금 Git을 직접 설치했죠? 그건 Claude Code가 Git 없이는 작동하지 않기 때문에 어쩔 수 없이 먼저 깔아둔 겁니다.
하지만 이제부터는 다릅니다. 앞으로 뭔가 설치하거나 설정할 일이 생기면, Google에 검색하지 말고 Claude에게 한국어로 말하세요. AI가 알아서 처리합니다.
예를 들면 이런 식입니다
핵심: Git만 예외였고, 나머지는 전부 "___해줘" 한 마디면 끝납니다.