First Build — 30분에 첫 페이지
시작하기 전에 — 왜 지금, 왜 Vuild
이력서가 아닌, "서비스"가 나를 증명하는 시대
핵심은 하나예요 — 이력서만으로는 그 사람의 진짜 가치와 역량이 증명되지 않아요. 학교·회사·자격증은 "어떤 경로를 거쳐 왔는지"를 보여줄 뿐, "실제로 무엇을 해낼 수 있는지"는 말해주지 못하니까요.
그래서 사람들은 SNS 같은 채널로 자신을 브랜딩하기 시작했어요. 이력서 한 장으로 부족한 걸, 꾸준한 콘텐츠와 활동으로 보여주려 한 거죠. 그런데 이제는 누구나 하다 보니 그것마저 변별력을 잃어가고 있어요.
그래서 지금 진짜 강력한 건 서비스 URL이에요. "이런 생각을 한다"가 아니라 "실제로 이런 걸 만들어 돌아가게 했다"를 보여주거든요. 말이 아니라 결과물로 증명하는 거예요. 종이 이력서는 "내가 어떤 사람인지"를 설명하지만, 동작하는 서비스 URL 하나는 "내가 무엇을 만들어낼 수 있는지"를 증명해요.
| 이력서 | 서비스 URL |
|---|---|
| 보내야만 볼 수 있음 (수동적) | 24시간 누구나 접속 (능동적) |
| "내가 어떤 사람인지" 설명 | "내가 무엇을 만들 수 있는지" 증명 |
| 한 번 쓰면 거의 그대로 | 고치고 늘리며 진화하는 자산 |
"이력서는 당신을 설명하지만, URL은 당신을 증명한다."
그리고 이건 더 이상 개발자·창업가만의 이야기가 아니에요. 코딩 경험 0인 동네 빵집 사장님, 대학생, 은퇴한 트레이너가 AI에게 "무엇을 원하는지" 말하는 것만으로 진짜 서비스를 만들어 쓰고 있어요. (자세한 사례와 "왜 지금인가"는 Ch.2에서 더 깊이 다뤄요.)
그래서 Vuild가 하는 일
Vuild(vuild.kr)는
비개발자가 머릿속 아이디어를 진짜로 동작하는 웹 서비스까지 데려가 주는 곳이에요.
길은 4단계예요 — VALUE(무엇을, 누구를 위해 만들지) →
PLAN(어떻게 만들지 설계) → BUILD(내 PC에서 진짜 코드로 제작) →
LAUNCH(세상에 공개). LEARN은 이 길을 30일 코스로 안내하는 학습 트랙이에요.
뭐가 다른가요? — 일반 도구와 비교하면
| 일반 AI 코딩 도구 · 코딩 강의 | Vuild |
|---|---|
| "코드를 빨리 짜준다"에서 끝 | 무엇을·왜 만들지(앞) + 출시·운영(뒤)까지 통째로 |
| 데모·조각 코드만 남음 | 내 PC의 진짜 코드 + 인터넷 URL (소유는 나) |
| 개발을 아는 사람 기준 | 비개발자가 "만들고 싶은데 못 만든다"는 벽을 넘게 |
30일 뒤, 내 손에 남는 것
- 인터넷 주소(URL) 한 개 — 카톡으로 보내면 누구나 들어와서 써요
- 진짜 동작하는 웹 서비스 — 가입·로그인·데이터 저장·핵심 기능
- 내 GitHub 코드 — AI가 만들었지만 소유는 나, 언제든 수정·확장
- "AI에게 잘 시키는 감각" — 가장 중요한 자산. 두 번째 서비스는 훨씬 빨라요
전체 길은 7개 챕터(Ch.0~Ch.6)예요. Ch.1 기초 체력 → Ch.2 무엇을 만들지(VALUE) → Ch.3 어떻게 만들지(PLAN) → Ch.4 본인 PC에서 진짜 코딩(BUILD) → Ch.5 세상에 내놓기(LAUNCH) → Ch.6 심화 활용(NEXT). 오늘 Ch.0은 그 큰 길을 아주 작게 한 번 통과해 보는 워밍업이에요.
오늘 이 레슨에서 할 일
- Claude Desktop을 본인 PC에 깔고, 한국어로 첫 대화를 나눈다
/v1-firstbuild스킬로 자기소개 페이지 1개를 완성해 브라우저로 연다- (선택) 무료 배포로 진짜 인터넷 URL을 손에 쥐고 한 사람에게 카톡으로 공유한다
길게 공부 안 해요 — 위에서 ‘왜’를 짧게 잡았으니, 이제 도구 깔고 → 직접 한 페이지 만들어 인터넷에 올리기까지 오늘 한 번에.
준비 — Claude Desktop 깔기 (약 15~20분)
LEARN의 ⚡ 스킬(오늘 쓸 /v1-firstbuild 포함)은
웹 claude.ai에서는 못 쓰고 Claude Desktop 앱에서만 작동해요. 그래서 먼저 한 번만 제대로 깔아둡니다.
여기서 막히면 그 다음이 다 안 되니, 천천히 따라오세요. 막혀도 괜찮아요 — 아래에 실패 케이스별 우회법을 다 적어뒀어요.
먼저 이름이 비슷한 셋을 정리할게요. 셋 다 같은 Claude AI지만 환경이 달라요.
| 이름 | 무엇 | 스킬 | 언제 깖 |
|---|---|---|---|
| claude.ai | 웹브라우저 AI 채팅 | ✕ | 설치 불필요 |
| Claude Desktop | 설치형 앱 (Mac/Win) | ✓ | 지금 |
| Claude Code | 터미널에서 코드 작업 | ✓ | Ch.4 (BUILD) |
단계 1 — 다운로드
브라우저(Chrome/Edge/Safari)에서 claude.ai/download 접속. 페이지가 본인 운영체제를 자동 감지해서 가운데에 큰 다운로드 버튼이 떠요. 자동 감지가 틀렸으면 아래 "Download for Mac / Windows" 링크를 직접 누르면 돼요.
단계 2 — 설치 (본인 OS만)
Mac: 받은 Claude.dmg 더블클릭 → 새 창에서
Claude 아이콘을 Applications 폴더로 드래그 → Launchpad 또는 Spotlight(Cmd+Space)에서 "Claude" 검색 → 실행.
⚠️ Mac — "확인되지 않은 개발자" 경고가 떠도 정상
첫 실행 시 "Claude는 확인되지 않은 개발자가…" 경고가 뜰 수 있어요. 당황 마세요. ① 경고창에서 "취소" → ② Apple 메뉴 → 시스템 설정 → 개인정보 보호 및 보안 → ③ 아래로 스크롤해 "Claude는 확인되지 않은…" 옆 "열기"(또는 "무단 허용") 클릭 → ④ 비밀번호 입력하면 실행돼요.
Windows: 받은 Claude-Setup.exe 더블클릭 →
"Windows의 PC 보호 / SmartScreen" 경고가 뜨면 "추가 정보" → "실행" →
설치 마법사 "다음 → 다음 → 설치 → 마침"(1~2분) → 시작 메뉴에서 "Claude" 검색 → 실행.
⚠️ Windows — SmartScreen / 회사 노트북
SmartScreen 경고는 정상이에요("추가 정보 → 실행"으로 우회). 만약 회사 노트북이라 보안 정책으로 막히면, IT 담당자에게 "Anthropic Claude Desktop 설치 허가"를 요청하거나 본인 개인 노트북으로 진행하세요.
단계 3 — 첫 로그인
- Continue with Google — 구글 계정 한 번에. 가장 빠르고 권장해요.
- Continue with Apple — Mac 사용자라면 이것도 빠름.
- Continue with email — 이메일 + 비밀번호. 처음이면 회원가입부터.
이미 claude.ai 웹에서 쓰던 계정이 있으면 같은 방법으로 로그인하세요. 그러면 웹과 데스크톱이 같은 대화·구독을 공유해요.
단계 4 — 구독 점검 (지금 결제 안 해도 OK)
| 플랜 | 가격 | 하루 한도 | LEARN 적합도 |
|---|---|---|---|
| Free | 무료 | 짧은 대화 10~20번/일 | Ch.0~1 초반 OK |
| Pro (권장) | 월 $20 (~2.8만원) | Free의 약 5배 | Ch.2 이후 |
| Max | 월 $100~200 | Pro의 5~20배 | Ch.4 본격 빌드 |
좌하단 계정명을 클릭하면 현재 플랜이 보여요. 지금은 Free로 시작해도 충분해요. Ch.2(VALUE)부터 한도를 자주 마주치면 그때 Pro로 올리면 돼요.
단계 5 — 첫 대화 ("안녕")
이제 진짜 작동하는지 확인해요. 메인 화면 가운데 큰 입력창에 한국어로 "안녕, 오늘 처음 깔았어. 한국어 잘 알아듣니?" 입력 후 엔터. 몇 초 안에 한국어로 응답이 오면 설치 완료예요.
단계 6 — 스킬 마켓플레이스 등록 (최초 1회)
앱은 깔렸지만, 아직 LEARN의 ⚡ 스킬(/v1-firstbuild 등)은 안 들어 있어요.
스킬 꾸러미를 앱에 한 번만 등록하면 모든 레슨의 스킬이 생겨요. 터미널·코딩 전혀 필요 없어요.
- 앱 오른쪽 위 계정 메뉴 → 맞춤설정(Customize)을 열어요.
- 왼쪽 개인 플러그인 옆 + → 마켓플레이스 추가를 눌러요.
- URL 칸에
daniel-kim-9way/vuild-skills를 붙여넣고 동기화를 눌러요.
이러면 모든 커리큘럼 스킬이 한 번에 등록돼요. 이제 채팅창에 / 를 치면 스킬 목록이 뜨고, 위의 /v1-firstbuild 도 바로 보여요.
(코드를 직접 만드는 BUILD 단계 스킬은 Ch.4에서 같은 앱의 Code 탭으로 안내해요.)
자주 발생하는 실패 5가지 — 미리 답
비개발자가 설치에서 가장 자주 막히는 5가지예요. 본인 상황에 해당하는 것만 보면 돼요.
| 증상 | 우회법 |
|---|---|
| ① 다운로드가 시작도 안 됨 | 다른 브라우저(Chrome/Edge/Safari)로 재시도 · 회사 와이파이면 핸드폰 핫스팟 · 그래도 안 되면 Vuild 카톡 오픈채팅 |
| ② 설치 권한이 안 됨 | Mac: 시스템 설정 → 개인정보 보호 → "열기" / Win: SmartScreen "추가 정보 → 실행" · 회사 노트북이면 IT 또는 개인 노트북 |
| ③ 로그인이 안 됨 (Google 흰 화면) | 브라우저 팝업 차단 해제 후 재시도 · 또는 "Continue with email"로 우회 |
| ④ 한국 카드로 Pro 결제가 안 됨 | 카드사 앱에서 해외결제 차단 해제 → 다른 카드 → 그래도 안 되면 PayPal 연결 후 결제 |
| ⑤ 한국어로 보냈는데 영어로 응답 | "한국어로 답변해줘" 한 번 더 보내면 그 대화 내내 한국어로 응답해요 |
이제 진짜 — First Build (30분)
오늘 만들 결과물은 한 페이지짜리 자기소개 HTML이에요. DB도 로그인도 없는 한 화면. 이름·소개·잘하는 것 3개·연락처가 들어간 깔끔한 페이지로, 링크드인 프로필 대신 카톡·인스타 DM에 던질 수 있는 정도예요. 본인 데이터로 만들기 때문에 "AI가 진짜 내 정보로 만든다"는 감각이 강하게 와요.
| 단계 | 하는 일 | 시간 |
|---|---|---|
| 1 | Claude Desktop에서 /v1-firstbuild 호출 | 1분 |
| 2 | 스킬과 단계별 대화 (이름·소개·톤·잘하는 것) | 10분 |
| 3 | 받은 HTML 코드를 메모장/TextEdit에 저장 | 5분 |
| 4 | 파일 더블클릭 → 브라우저에서 결과 확인 | 2분 |
| 5 | (선택) Netlify Drop 무료 배포 + 카톡 공유 | 10분 |
단계 1~2 — 스킬 호출 + 대화
Claude Desktop 새 대화창에서 슬래시(/)를 입력하면 스킬 목록이 자동완성으로 떠요.
/v1-firstbuild를 고르고 엔터.
스킬이 4~5개 질문을 하나씩 던져요. 솔직하게 답하면 돼요. 완벽하지 않아도 OK — 다음 질문으로 넘어가는 게 더 중요해요.
| 질문 | 예시 답변 |
|---|---|
| 이름 + 한 줄 소개 | "한규민, 비개발자 SaaS 빌더" |
| 잘하는 것 3가지 | "기획 · 아이디어 정리 · 사람 모으기" |
| 디자인 톤 | "보라-핑크 그라데이션, 모던, 모바일 우선" |
| 연락처 (선택) | "카톡 ID 또는 이메일" |
질문이 끝나면 스킬이 HTML 코드 한 덩어리를 출력해요. 코드 블록 우상단 "Copy" 버튼을 누르면 복사돼요.
단계 3~4 — 저장 + 브라우저로 열기
- Mac (TextEdit): "포맷 → 일반 텍스트로 변환"(필수!) → 코드 붙여넣기 →
index.html로 저장 - Windows (메모장): 코드 붙여넣기 → 다른 이름으로 저장 → 파일 형식 "모든 파일"(필수!) · 인코딩 UTF-8 →
index.html - 저장한
index.html을 더블클릭 → 기본 브라우저에 본인 페이지가 떠요
마음에 안 들면 — 다시 시키기
한 번에 만족스러운 결과는 드물어요. 정상이에요. 핵심은 "전체를 다시 말고, 바꿀 부분만 콕 집어서"예요. 예) "그라데이션을 오렌지-노랑으로, 나머지는 유지하고 전체 코드 다시 줘" → 새 코드 받아 다시 저장 → 브라우저 새로고침(F5 / Cmd+R).
단계 5 (선택) — 무료 배포 + 카톡 공유
선택이지만 강하게 권해요. 본인 PC에서만 열리는 페이지를 전 세계가 접근하는 URL로 만드는 게 정체성 전환의 결정적 모먼트거든요. 가장 빠른 무료 배포는 Netlify Drop(가입 불필요)이에요.
- 브라우저에서 app.netlify.com/drop 접속
index.html파일을 페이지 가운데로 드래그-드롭- 30초 안에
https://random-name.netlify.app같은 URL 발급 - 그 URL을 한 사람에게 카톡으로 — "내가 30분 만에 만들었어, 봐줘 :)"
상대가 그 URL을 한 번이라도 눌러본 순간, 본인의 정체성이 "보는 사람"에서 "만든 사람"으로 이동해요.
막히는 지점 — 미리 답
- 더블클릭했더니 메모장이 다시 열려요 → 파일명이
index.html.txt. 저장 시 "모든 파일"로 바꾸세요 - 한글이 깨져요 → 인코딩이 UTF-8 아님. "
meta charset='utf-8'추가해서 전체 코드 다시 줘" - Netlify에서 화면이 안 떠요 → 파일명이 정확히
index.html(소문자)인지 확인 - 30분 안에 못 끝냈어요 → 정상이에요. 처음엔 60분 걸리는 분이 더 많아요. 끝까지 한 사이클 통과가 목표
- /v1-firstbuild가 자동완성에 안 떠요 → 앱 재시작. 또는 "v1-firstbuild 스킬을 시작해줘" 한국어로 입력
한 줄 회고 + Ch.0 끝
끝났으면 잠깐 멈추고 본인에게 한 줄 적어 보세요(종이든 카톡 본인 채팅방이든). "30분 전 vs 지금, 어떤 감각이 달라졌나?" 이 한 줄이 앞으로 며칠을 흔들리지 않게 잡아주는 닻이 돼요.
Ch.0 끝 — 무엇이 바뀌었나
- Claude Desktop이 본인 PC에 깔려 한국어로 대화 가능
- 본인 정보로 만든 자기소개 페이지가 PC(또는 인터넷)에 떠 있음
- "AI에게 한 줄 시키면 진짜 결과가 나온다"는 감각을 손에 쥠
다음 단계 → Ch.1 기초 체력
Ch.1은 6개 lesson으로 웹 서비스가 어떻게 돌아가는지(서버·DB·인증·결제·AI) 큰 그림을 그려요. 전부 ⚡ 스킬 형태라서 Claude Desktop과 대화하면서 자연스럽게 익혀져요. 오늘 Ch.0은 워밍업이었고, 본 코스는 같은 회로의 더 큰 버전이에요. 지금 쉬고 다음에 시작해도 OK.
실습하기
로그인하면 스킬을 실습할 수 있습니다