YH님과 함께하는 바이브코딩 · Windows 기준
오늘, 내 웹사이트를
인터넷에 올려요
코드는 Claude가 써요. 우리는 뭘 만들고 싶은지 말로 설명하면 돼요.
수업이 끝나면 친구에게 보낼 수 있는 링크가 생겨요.
- Windows PC
Claude Pro 계정- 만들고 싶은 것 하나
GitHub
VercelTODAY · 약 2시간
오늘의 여정
위에서 아래로, 번호 순서대로 가요. 앞쪽은 가볍게 보고, 직접 손으로 해보는 단계(표시된 카드)에 시간을 많이 써요.
사례 소개
다른 사람들이 뭘 만들었는지 구경하면서 감을 잡아요.
Claude 생태계 한눈에 보기
Claude에 어떤 도구가 있는지 지도부터 한 번 봐요.
기초 개념
터미널, Git 같은 낯선 단어를 가볍게 훑어요.
Claude Code 설치
내 Windows에 Claude Code를 설치하고 로그인해요.
모델 고르기 · 사용량 아끼기
Pro 사용량을 아끼는 모델 고르는 법을 알아둬요.
웹사이트 만들기
말로 시켜서 내 웹사이트를 만들고, 마음에 들 때까지 고쳐요.
7번 · 도착
저장하고 세상에 공개하기
GitHub에 저장하고, Vercel로 누구나 열 수 있는 링크를 만들어요. 여기까지 오면 오늘 목표 끝이에요.
NEXT
다음 시간 · 혼자 해보기
오늘 못 한 건 괜찮아요. 여기 순서대로 따라 하면 혼자서도 할 수 있어요.
도구 연결 · MCP · 예약 작업
노션, 드라이브, 슬랙 같은 내 도구를 Claude와 연결해요.
Aside — AI 브라우저
말로 시키면 대신 클릭해 주는 AI 브라우저예요.
AI API 연결하기
내 사이트 안에 AI 기능을 넣어요.
환경변수 — 배포 후 키 넣기
배포했더니 나만 되고 남들은 안 될 때 확인할 것이에요.
보안 — API 키·배포 안전
API 키와 배포한 사이트를 안전하게 지키는 법이에요.
요금 폭탄 막기 — 이미지·봇
방문자가 늘어도 요금이 갑자기 튀지 않게 막아요.
데이터베이스 · 로깅
새로고침해도 안 사라지게 데이터를 저장해요.
슬래시 명령어 (/)
/plan 같은 슬래시 명령어가 뭔지 정리해요.
스킬 만들기
자주 시키는 일을 저장해 두고 한 줄로 불러 써요.
REFERENCE
참고
필요할 때 꺼내 보는 페이지예요. 순서는 없어요.
막히면 이렇게 해요
에러 화면을 캡처해서 Claude에게 그대로 보여주세요.
Windows에서는 Win + Shift + S로 화면을 캡처할 수 있어요. 사진을 붙여 넣고 “이게 뭐야? 고쳐줘”라고 말하면 돼요.