VUILD

이 레슨에서 할 일

/v1-firstbuild 스킬과 대화해서 자기소개 페이지 한 장을 만든다
AI가 만든 파일을 Orca 화면에서 바로 열어 확인하고, 마음에 안 드는 부분을 고쳐 본다
(선택) 무료 배포로 진짜 인터넷 URL을 손에 쥐고 한 사람에게 카톡으로 공유한다

0-2에서 차린 작업대(Orca + Claude Code)를 그대로 씁니다. 새로 깔 건 없어요.

오늘의 목표는 완벽한 페이지가 아니에요. "내가 말하니까 결과물이 나왔다"를 한 사이클 통과하는 거예요. 30일 코스 전체가 이 사이클의 더 큰 버전입니다.

📷 같은 방식으로 만든 다른 예시 — 5문항짜리 간단한 테스트 페이지. — 꼭 자기소개가 아니어도 돼요. 오늘 익히는 건 "말해서 만드는 방식"입니다.

순서	할 일	시간
1	Orca의 Claude Code에서 `/v1-firstbuild` 호출	1분
2	스킬과 단계별 대화 (이름·소개·잘하는 것·톤)	10분
3	AI가 만든 파일을 화면에서 열어 확인	3분
4	마음에 안 드는 부분 고쳐 달라고 다시 시키기	5분
5	(선택) 무료 배포 + 카톡 공유	10분

단계 1~2 — 스킬 호출 + 대화

Orca를 열고 0-2에서 만든 작업의 Claude Code 대화창으로 갑니다. (Orca를 껐다 켰다면 사이드바에서 vuild-first 아래의 작업을 다시 누르면 돼요.) 슬래시(/)를 입력하면 목록이 뜨고, /v1-firstbuild를 고르고 엔터.

📷 캡쳐 — <code>/v1-firstbuild</code>를 입력하면 자동완성 목록에 스킬이 뜬 화면. — 목록에 보이면 0-2의 스킬 설치가 제대로 된 겁니다.

📷 캡쳐 — 스킬이 시작되며 첫 질문(Q1. 이름이 뭐예요?)을 던진 화면. — 시험이 아니에요. 그냥 대화입니다.

스킬이 4~5개 질문을 하나씩 던져요. 솔직하게 답하면 돼요. 완벽하지 않아도 OK — 다음 질문으로 넘어가는 게 더 중요해요.

질문	예시 답변
이름 + 한 줄 소개	"한규민, 비개발자 SaaS 빌더"
잘하는 것 3가지	"기획 · 아이디어 정리 · 사람 모으기"
디자인 톤	"보라-핑크 그라데이션, 모던, 모바일 우선"
연락처 (선택)	"카톡 ID 또는 이메일"

📷 캡쳐 — 이름을 답하니 바로 다음 질문(Q2. 한 줄 자기소개)이 온 화면. — 한 번에 하나씩 물어봐요. 예시도 같이 줍니다.

📷 캡쳐 — 마지막 질문(디자인 톤 a/b/c)에 답하자 페이지를 만들기 시작한 화면. — a·b·c 중 하나만 고르면 끝. 여기서부터는 AI가 만듭니다.

단계 3 — 파일이 "생기는" 걸 보기

질문이 끝나면 AI가 파일을 직접 만들어요. 복사·붙여넣기·저장이 없어요. "파일을 만들까요?"라고 물으면 승인하세요. 잠시 뒤 Orca 화면에 my-intro.html이 나타납니다.

파일 목록에 새 파일이 뜨고, 클릭하면 내용이 보여요
바뀐 부분(diff) 표시로 "AI가 뭘 했는지"가 그대로 보여요
Orca 안에서 바로 열려요 — AI에게 "브라우저로 열어줘"라고 하거나, 상단 ＋ → 새 브라우저 탭으로 열면 됩니다

📷 캡쳐 — Orca 안 브라우저 탭에서 방금 만들어진 <code>my-intro.html</code>이 열린 화면. — 주소창을 보면 내 폴더의 파일이에요. 이 한 컷이 LEARN 30일의 첫 발자국입니다.

왜 이게 큰 차이인가요

웹 채팅으로 코드를 받으면 복사 → 메모장 → 확장자·인코딩 맞춰 저장을 본인이 해야 하고, 여기서 대부분 한 번은 막혀요. Claude Code는 본인 폴더에 직접 파일을 씁니다. 앞으로 만들 서비스는 파일이 수십~수백 개가 되는데, 그때 이 차이가 결정적이에요.

단계 4 — 마음에 안 들면 다시 시키기

한 번에 만족스러운 결과는 드물어요. 정상이에요. 핵심은 "전체를 다시 말고, 바꿀 부분만 콕 집어서"예요.

그라데이션 오렌지로 바꿔줘

AI가 같은 파일을 고쳐요. 브라우저 탭에서 새로고침하면 바로 반영됩니다.

📷 캡쳐 — 한 문장 만에 오렌지 그라데이션으로 바뀐 페이지. — 이름·문구는 그대로, 색만 바뀌었죠. 이게 "콕 집어서"의 결과예요.

두세 번 왕복해 보세요 — 이 왕복이 앞으로 30일 동안 하게 될 일의 전부입니다.

단계 5 (선택) — 무료 배포 + 카톡 공유

선택이지만 강하게 권해요. 본인 PC에서만 열리는 페이지를 전 세계가 접근하는 URL로 만드는 게 정체성 전환의 결정적 모먼트거든요. 가장 빠른 무료 배포는 Netlify Drop(가입 불필요)이에요.

AI에게 "my-intro.html을 index.html로 복사해줘"라고 시켜요 (배포 서비스는 index.html을 첫 화면으로 찾아요)
브라우저에서 app.netlify.com/drop 접속
index.html 파일을 페이지 가운데로 드래그-드롭
30초 안에 https://random-name.netlify.app 같은 URL 발급
그 URL을 한 사람에게 카톡으로 — "내가 30분 만에 만들었어, 봐줘 :)"

📷 캡쳐 — Netlify Drop 페이지. 가운데 영역에 파일을 끌어다 놓기만 하면 됩니다. — "Drop here" 영역에 놓으면 30초 안에 진짜 URL이 나와요.

상대가 그 URL을 한 번이라도 눌러본 순간, 본인의 정체성이 "보는 사람"에서 "만든 사람"으로 이동해요.

막히는 지점 — 미리 답

/v1-firstbuild가 목록에 안 떠요 → 0-2 단계 9의 둘째 줄(/plugin install)을 빠뜨린 경우가 대부분이에요. 그 단계로 돌아가거나, "v1-firstbuild 스킬을 시작해줘"라고 한국어로 말해도 됩니다
파일이 어디 생겼는지 모르겠어요 → 대화창에 "방금 만든 파일의 전체 경로를 알려줘"라고 물어보세요
한글이 깨져요 → "한글이 깨져. UTF-8로 저장되게 고쳐줘"라고 시키면 알아서 고쳐요
Netlify에서 화면이 안 떠요 → 올린 파일 이름이 정확히 index.html(소문자)인지 확인하세요
승인 창이 너무 자주 떠요 → 처음엔 정상이에요. 본인 PC를 바꾸는 일이라 확인을 받는 거예요. 익숙해지면 Ch.4에서 권한 모드를 조정해요
30분 안에 못 끝냈어요 → 정상이에요. 처음엔 60분 걸리는 분이 더 많아요. 끝까지 한 사이클 통과가 목표

한 줄 회고 + Ch.0 끝

끝났으면 잠깐 멈추고 본인에게 한 줄 적어 보세요(종이든 카톡 본인 채팅방이든). "한 시간 전 vs 지금, 어떤 감각이 달라졌나?" 이 한 줄이 앞으로 며칠을 흔들리지 않게 잡아주는 닻이 돼요.

Ch.0 끝 — 무엇이 바뀌었나

30일 내내 쓸 작업대(Orca + Claude Code)가 본인 PC에 차려졌다
본인 정보로 만든 자기소개 페이지가 PC(또는 인터넷)에 떠 있다
"말로 시키면 파일이 만들어지고, 고쳐 달라면 고쳐진다"는 감각을 손에 쥐었다

다음 단계 → Ch.1 기초 체력

Ch.1은 6개 lesson으로 웹 서비스가 어떻게 돌아가는지(서버·DB·인증·결제·AI) 큰 그림을 그려요. 전부 ⚡ 스킬 형태라서 오늘 차린 그 화면에서 대화하며 자연스럽게 익혀져요. 오늘 Ch.0은 워밍업이었고, 본 코스는 같은 회로의 더 큰 버전이에요. 지금 쉬고 다음에 시작해도 OK.

First Build — 30분에 첫 페이지

단계 1~2 — 스킬 호출 + 대화

단계 3 — 파일이 "생기는" 걸 보기

단계 4 — 마음에 안 들면 다시 시키기

단계 5 (선택) — 무료 배포 + 카톡 공유

한 줄 회고 + Ch.0 끝