무료 강의 · 시즌 1 · 1강 / 4
클로드 코드 설치하고 말 걸어보기
무료 강의 시즌 1의 1강. VS Code와 Claude Code를 설치하고, 에이전트에게 첫 주문을 넣어 브라우저에 페이지를 띄워요. 코딩 배경은 필요 없어요.
끝나면 손에 남는 것: 내 컴퓨터에서 돌아가는 Claude Code + 브라우저에 뜬 첫 페이지
이 강의 완성 예시 열어보기설치가 끝났을 때 보이는 화면과, 첫 주문으로 만들어지는 페이지예요.Claude를 매달 결제하고 있는데, 아직 채팅창에서만 쓰고 있나요.
그 요금제 안에 Claude Code가 들어 있어요. 채팅이 아니라 내 컴퓨터에서 직접 파일을 만들고 고치는 에이전트예요. 뉴스에서 "AI가 코드를 짠다"고 할 때 말하는 그거요. 추가 결제는 없어요.
오늘은 그걸 깔고, 말을 걸고, 브라우저에 페이지 하나를 띄워요. 20분이면 돼요.
오늘 만들 것
내 컴퓨터에서 돌아가는 Claude Code, 그리고 그 에이전트가 만든 첫 페이지. 브라우저를 열면 진짜로 보여요.
코드는 한 줄도 안 써요. 하고 싶은 걸 한국어로 말하면 돼요.
준비물
- Claude 유료 구독 (Pro 이상)
- Windows 또는 Mac 컴퓨터
- 20분
- 인터넷 연결
없어도 되는 것: 개발 경험, 터미널 지식, 영어.
따라 하기
1. VS Code 설치하기
VS Code는 글쓰기 프로그램이에요. 한글 대신 코드를 쓰는 메모장이라고 생각하면 돼요. Claude Code가 이 안에서 살아요.
code.visualstudio.com에 들어가서 커다란 다운로드 버튼을 누르세요. 컴퓨터에 맞는 버전을 알아서 골라줘요. 내려받은 파일을 실행하고, 물어보는 건 전부 기본값으로 두고 넘어가면 돼요.
설치가 끝나면 VS Code를 열어보세요. 검은 화면에 왼쪽으로 아이콘이 몇 개 붙어 있으면 성공이에요. 무서워 보여도 괜찮아요. 오늘 우리가 쓸 건 그중 하나뿐이에요.
2. Claude Code 확장 설치하기
VS Code 왼쪽 세로줄에서 네모 네 개가 흩어진 아이콘을 찾으세요. 맨 아래쯤 있어요. 마우스를 올리면 "Extensions"라고 떠요.
그걸 누르고, 검색창에 Claude Code를 치세요. Anthropic이 만든 것이 맨 위에 나와요. Install을 누르세요.
설치가 끝나면 왼쪽 줄에 새 아이콘이 하나 생겨요. 눌러서 열고, Sign in을 누르세요. 브라우저가 열리면서 Claude 계정으로 로그인하라고 해요. 평소 쓰던 계정으로 로그인하면 끝이에요.
로그인이 되면 VS Code 안에 채팅창 비슷한 게 떠요. 여기가 주방이에요.
3. 작업할 폴더 만들기
에이전트는 폴더 하나를 정해줘야 일해요. 아무 데나 파일을 흩뿌리지 않게 하는 안전장치예요.
바탕화면에 my-page라는 폴더를 하나 만드세요. 마우스 오른쪽 클릭 → 새 폴더예요.
VS Code로 돌아가서 위쪽 메뉴의 File → Open Folder를 누르고, 방금 만든 my-page를 고르세요. "이 폴더의 작성자를 신뢰합니까?" 같은 걸 물어보면 신뢰한다고 답하세요. 내가 만든 폴더니까요.
4. 첫 주문 넣기
이제 Claude Code 채팅창에 이걸 그대로 붙여넣으세요.
안녕! 나는 코딩을 처음 해보는 사람이야.
index.html 파일을 하나 만들어 줘. 내용은 이렇게:
- 큰 글씨로 "안녕하세요, 첫 페이지예요"
- 그 아래 작은 글씨로 오늘 날짜
- 배경은 연한 하늘색
파일을 만든 다음, 내가 브라우저에서 어떻게 열어보면 되는지
한국어로 아주 쉽게 알려 줘.
엔터를 치면 에이전트가 생각하는 게 보여요. 파일을 만들겠다고 물어보면 승인해 주세요. 몇 초 뒤 왼쪽 파일 목록에 index.html이 나타나요.
5. 브라우저에서 열어보기
왼쪽 파일 목록의 index.html에 마우스 오른쪽 버튼을 누르고 Reveal in File Explorer(Mac은 Reveal in Finder)를 고르세요. 파일 탐색기가 열려요.
거기서 index.html을 더블클릭하세요. 브라우저가 열리면서 방금 만든 페이지가 뜹니다.
연한 하늘색 배경, 큰 글씨, 오늘 날짜. 저걸 내가 만들었어요. 정확히는, 내가 시켜서 만들어졌죠. 이 강의에서 계속 하게 될 일이 바로 그거예요.
막혔을 때
Extensions에서 Claude Code가 안 보여요. VS Code를 완전히 닫았다가 다시 열어보세요. 그래도 없으면 검색어를 anthropic으로 바꿔보세요. 만든 곳이 Anthropic이라고 적혀 있는 게 맞는 거예요.
로그인했는데 "구독이 필요합니다"라고 나와요. 무료 계정으로 로그인했을 가능성이 커요. claude.ai에서 지금 쓰는 계정이 유료 요금제인지 확인하세요. 회사 계정과 개인 계정이 섞여 있는 경우가 많아요.
에이전트가 영어로 답해요. 채팅창에 "앞으로 한국어로 답해 줘"라고 한 줄 보내면 돼요. 3강에서 이 규칙을 아예 기억시키는 법을 배워요.
파일은 만들어졌는데 브라우저에서 안 열려요. 더블클릭했을 때 메모장이 열렸다면, 파일에 오른쪽 클릭 → 연결 프로그램 → Chrome(또는 Edge, Safari)을 고르세요.
"승인" 버튼이 계속 떠서 귀찮아요. 지금은 그대로 두세요. 에이전트가 뭘 하는지 보는 게 첫 주에는 중요해요. 익숙해지면 그때 풀면 돼요.
마무리 체크
나가기 전에 하나씩 확인해요:
- VS Code가 설치됐고,
my-page폴더가 열려 있어요 - 왼쪽 줄에 Claude Code 아이콘이 있고, 로그인이 돼 있어요
-
index.html파일이 폴더 안에 있어요 - 브라우저에서 그 파일을 열었더니 하늘색 페이지가 보여요
네 개가 다 체크됐다면, 오늘 넘어야 할 산은 다 넘었어요. 설치가 제일 어려운 단계였거든요. 여기서부터는 말로 시키는 것뿐이에요.
다음은 진짜 내 페이지예요. "안녕하세요"가 아니라, 내 이름과 내 이야기가 담긴 페이지요.
직접 만들고 돌아가는 걸 확인했나요? 그럼 완료를 눌러요. 이 브라우저에만 저장돼요 — 주방 밖으로는 아무것도 나가지 않아요.
다음 — 2강 · 말로 시켜서 내 소개 페이지 만들기 →