클로드 코드로 첫 페이지 만들기01 / 06다음: 바이브 코딩으로 첫 페이지 만들기

VS Code와 Claude Code 설치하기

for 클로드 구독자 · 1강 — VS Code와 Claude Code를 설치하고 로그인한 뒤, 에이전트가 첫 파일을 만들어 브라우저로 여는 것까지 30분이면 돼요. 코드는 한 줄도 안 써요.

오늘의 접시: Claude Code가 설치되고, 첫 파일을 만들어 브라우저로 열어줘요

Claude 구독료는 내고 있는데 아직 챗봇으로만 쓰고 있다면, 이 무료 코스가 딱 맞아요. 순서대로 따라가면 되고, 코딩 경험은 없어도 돼요. 반대로 코드를 업으로 다루는 분이라면 단편 레슨 쪽이 더 잘 맞을 거예요. 이 코스는 뭔가를 처음 만들어 보는 분들을 위한 곳이거든요.

시작하기 전에 약속 하나만 할게요. 모든 레슨은 눈으로 확인할 수 있는 결과물로 끝나요. 이론만 쌓다 끝나는 일은 없어요. 오늘도 컴퓨터가 뭔가를 해내는데, 자잘한 지시를 백 개 따라 해서가 아니라 원하는 결과를 말했기 때문이에요.

오늘 만들 것

이 레슨이 끝나면 Claude Code가 설치되고 로그인까지 끝나 있을 거예요. 이미 구독 중인 Claude의 에이전트 버전이죠. 그리고 에이전트가 작은 웹 페이지를 하나 만들어서 브라우저로 직접 열어 줘요. 그 과정을 눈앞에서 지켜보게 돼요.

준비물

  • 지금 쓰고 있는 Claude 구독 (Pro면 충분해요. 이 강의 전체에서 추가 비용은 없어요)
  • 평소 쓰는 컴퓨터 — Windows든 Mac이든 상관없어요
  • 약 30분

따라 하기

1. 작업 공간 준비 — VS Code

VS Code를 내려받아 기본 옵션 그대로 설치하세요. 무료예요. 미리 말해 두면, 여기서 코드를 쓸 일은 없어요. VS Code는 에이전트가 파일을 만들고 내용을 고치는 걸 눈으로 볼 수 있는 작업 공간이에요. 우리는 지켜보고, 실제 작업은 에이전트가 해요.

VS Code를 열고 File → Open Folder를 누른 다음, 원하는 위치에 first-kitchen이라는 새 폴더를 만들어 여세요. 빈 작업 공간 준비 끝이에요.

2. Claude Code 설치

VS Code 안에서 터미널을 여세요. 메뉴에서 View → Terminal을 누르거나 Ctrl+`를 누르면 아래쪽에 검은 텍스트 패널이 나타나요. 이게 터미널이에요. 무섭게 생겼지만 앞으로는 여기에 붙여넣기만 하면 돼요.

컴퓨터에 맞는 줄을 붙여넣고 Enter를 누르세요.

Windows (패널의 줄 시작에 PS라고 떠 있어야 해요):

irm https://claude.ai/install.ps1 | iex

Mac:

curl -fsSL https://claude.ai/install.sh | bash

글자가 주르륵 올라갈 거예요. 설치가 진행 중이라는 뜻이니 정상이에요. 그대로 두세요. 잠잠해지면 터미널 패널을 닫았다가(휴지통 아이콘) 다시 여세요. 방금 설치된 프로그램을 터미널이 알아보게 하는 과정이에요.

3. 로그인

터미널에 이렇게 입력하고 Enter를 누르세요:

claude

처음 실행하면 브라우저에 로그인 화면이 열려요. 이미 구독료를 내고 있는 그 Claude 계정으로 로그인하세요. 요금 이야기는 이게 전부예요. 이 강의는 지금 있는 구독만으로 굴러가요. 브라우저에서 완료됐다고 하면 VS Code로 돌아오세요. 빈 폴더 안에서 프롬프트가 기다리고 있을 거예요.

4. 첫 지시 내리기

이걸 붙여넣고 Enter를 누르세요:

hello.html이라는 파일을 만들어 줘. "My kitchen is open"이라고
크고 친근한 글씨로 적힌 작은 환영 페이지야. 따뜻한 배경색에
오늘 날짜도 넣어 줘. 다 만들면 내 기본 브라우저로 열어 줘.

이제 지켜보세요. 파일을 만들기 전에도, 뭔가를 실행하기 전에도 에이전트가 먼저 허락을 구해요. 이게 안전장치예요. 여기서는 승낙 없이는 아무 일도 일어나지 않아요. 그러니 마음 놓고 승인해 주세요.

잠시 뒤 브라우저가 열리고, 1분 전엔 존재하지도 않던 페이지가 "My kitchen is open"이라고 인사하고 있을 거예요. 직접 코드를 쓴 게 아니라, 말로 시켜서 만든 거죠.

5. 루프 한 번 돌려보기

이 강의 전체를 관통하는 진짜 기술은 지금부터예요. 바로 다시 요청하기. 붙여넣으세요:

페이지를 더 근사하게 만들어 줘: 부드러운 그라디언트 배경을 넣고
내용을 화면 가운데에 정렬해 줘. 그리고 브라우저에서 새로고침해 줘.

승인하고, 지켜보고, 페이지가 바뀌는 걸 확인하세요. 요청하고, 결과를 보고, 다시 다듬는 이 루프가 이 기술의 전부예요. 앞으로 나올 모든 레슨은 방금 한 일의 더 큰 버전일 뿐이에요.

막혔을 때

  • claude를 인식하지 못해요 — 터미널이 아직 설치 사실을 모르는 거예요. VS Code를 완전히 닫았다가 다시 열고(폴더는 그대로 남아 있어요) 다시 시도하세요.
  • irm을 인식하지 못해요 (Windows) — 터미널이 PowerShell이 아니라 CMD로 열린 거예요. 터미널 패널의 +˅ 화살표를 눌러 PowerShell을 고른 뒤 다시 붙여넣으세요.
  • 다른 계정으로 로그인됐어요 — Claude Code 안에서 /login을 입력하고 구독 계정으로 다시 로그인하세요.
  • 회사 노트북이 설치를 막아요 — 회사 컴퓨터는 원래 자주 막아요. 이 강의는 개인 컴퓨터로 진행하세요. 사무실 컴퓨터에 에이전트를 들이는 건 IT 부서 허락부터 받아야 하는 별개의 이야기예요.
  • 사소한 것까지 전부 허락을 구해요 — 처음엔 원래 그래요. 그렇게 되도록 설계돼 있고요. 신뢰 수준을 조정하는 방법은 나중 레슨에서 다뤄요. 뭘 승인하는지 스스로 알아볼 수 있을 만큼 충분히 본 다음에요.

마무리 체크

나가기 전에 하나씩 확인해요:

□ VS Code에서 first-kitchen 폴더가 열려 있다
□ 터미널에 `claude`를 입력하면 대화가 시작된다
□ hello.html이 존재하고 — 브라우저에서 열렸다
□ 편집이 아니라 요청으로 페이지를 한 번 바꿔봤다

네 개 모두 체크했다면 중요한 사실 하나가 이미 참이 됐어요. 컴퓨터에게 원하는 걸 말했고, 방법은 컴퓨터가 알아냈다는 것. 폴더는 지우지 마세요. 남은 강의 내내 이 폴더에서 작업할 거예요.

다음 레슨 — 02 바이브 코딩으로 첫 페이지 만들기. 나를 소개하는 진짜 원페이지 사이트를 같은 방식으로, 말로 만들어서 내 컴퓨터에서 돌려봐요.

막힌 단계가 있나요? 아래 질문 상자에 남겨 주세요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 질문 하나가 다음 사람의 길을 메워 줘요.

직접 만들고 돌아가는 걸 확인했나요? 그럼 서빙하세요. 이 브라우저에만 저장돼요 — 주방 밖으로는 아무것도 나가지 않아요.

어느 단계에서 막혔나요?

여기에 바로 물어보세요. 계정은 필요 없어요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 답변은 본문에 반영돼서 다음 사람은 매끄럽게 지나가요.

더 고픈가요?

새 레슨이 올라오는 대로 메일함에 도착해요. 스팸 없이, 언제든 구독 취소할 수 있어요.