SKILL 45 min

First Build — 30분에 첫 페이지

이 강의 영상은 Pro 전용입니다

Pro 요금제에 가입하면 모든 강의 영상을 볼 수 있어요.

Pro로 보기 →

시작하기 전에 — 왜 지금, 왜 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)
🎨 claude.ai vs Claude Desktop vs Claude Code 비교 — 오늘은 가운데(Desktop)만.
셋 다 같은 Claude AI지만 환경이 달라요.

단계 1 — 다운로드

브라우저(Chrome/Edge/Safari)에서 claude.ai/download 접속. 페이지가 본인 운영체제를 자동 감지해서 가운데에 큰 다운로드 버튼이 떠요. 자동 감지가 틀렸으면 아래 "Download for Mac / Windows" 링크를 직접 누르면 돼요.

📷 claude.ai/download 페이지 — 가운데 큰 "Download" 버튼.
큰 버튼 한 번이면 다운로드가 시작돼요.

단계 2 — 설치 (본인 OS만)

Mac: 받은 Claude.dmg 더블클릭 → 새 창에서 Claude 아이콘을 Applications 폴더로 드래그 → Launchpad 또는 Spotlight(Cmd+Space)에서 "Claude" 검색 → 실행.

⚠️ Mac — "확인되지 않은 개발자" 경고가 떠도 정상

첫 실행 시 "Claude는 확인되지 않은 개발자가…" 경고가 뜰 수 있어요. 당황 마세요. ① 경고창에서 "취소" → ② Apple 메뉴 → 시스템 설정 → 개인정보 보호 및 보안 → ③ 아래로 스크롤해 "Claude는 확인되지 않은…" 옆 "열기"(또는 "무단 허용") 클릭 → ④ 비밀번호 입력하면 실행돼요.

📷 Mac — "확인되지 않은 개발자" 경고 + 시스템 설정 → 개인정보 보호 → "열기" 위치.

Windows: 받은 Claude-Setup.exe 더블클릭 → "Windows의 PC 보호 / SmartScreen" 경고가 뜨면 "추가 정보" → "실행" → 설치 마법사 "다음 → 다음 → 설치 → 마침"(1~2분) → 시작 메뉴에서 "Claude" 검색 → 실행.

⚠️ Windows — SmartScreen / 회사 노트북

SmartScreen 경고는 정상이에요("추가 정보 → 실행"으로 우회). 만약 회사 노트북이라 보안 정책으로 막히면, IT 담당자에게 "Anthropic Claude Desktop 설치 허가"를 요청하거나 본인 개인 노트북으로 진행하세요.

📷 Windows — SmartScreen 경고 → "추가 정보" → "실행" 클릭 순서.

단계 3 — 첫 로그인

  • Continue with Google — 구글 계정 한 번에. 가장 빠르고 권장해요.
  • Continue with Apple — Mac 사용자라면 이것도 빠름.
  • Continue with email — 이메일 + 비밀번호. 처음이면 회원가입부터.

이미 claude.ai 웹에서 쓰던 계정이 있으면 같은 방법으로 로그인하세요. 그러면 웹과 데스크톱이 같은 대화·구독을 공유해요.

📷 Claude Desktop 첫 로그인 화면 (Google / Apple / Email 3개 버튼).

단계 4 — 구독 점검 (지금 결제 안 해도 OK)

플랜 가격 하루 한도 LEARN 적합도
Free무료짧은 대화 10~20번/일Ch.0~1 초반 OK
Pro (권장)월 $20 (~2.8만원)Free의 약 5배Ch.2 이후
Max월 $100~200Pro의 5~20배Ch.4 본격 빌드

좌하단 계정명을 클릭하면 현재 플랜이 보여요. 지금은 Free로 시작해도 충분해요. Ch.2(VALUE)부터 한도를 자주 마주치면 그때 Pro로 올리면 돼요.

📷 구독 플랜 페이지 — Free / Pro / Max 비교 (Pro 강조).

단계 5 — 첫 대화 ("안녕")

이제 진짜 작동하는지 확인해요. 메인 화면 가운데 큰 입력창에 한국어로 "안녕, 오늘 처음 깔았어. 한국어 잘 알아듣니?" 입력 후 엔터. 몇 초 안에 한국어로 응답이 오면 설치 완료예요.

단계 6 — 스킬 마켓플레이스 등록 (최초 1회)

앱은 깔렸지만, 아직 LEARN의 ⚡ 스킬(/v1-firstbuild 등)은 안 들어 있어요. 스킬 꾸러미를 앱에 한 번만 등록하면 모든 레슨의 스킬이 생겨요. 터미널·코딩 전혀 필요 없어요.

  1. 앱 오른쪽 위 계정 메뉴 → 맞춤설정(Customize)을 열어요.
  2. 왼쪽 개인 플러그인마켓플레이스 추가를 눌러요.
  3. URL 칸에 daniel-kim-9way/vuild-skills 를 붙여넣고 동기화를 눌러요.

이러면 모든 커리큘럼 스킬이 한 번에 등록돼요. 이제 채팅창에 / 를 치면 스킬 목록이 뜨고, 위의 /v1-firstbuild 도 바로 보여요. (코드를 직접 만드는 BUILD 단계 스킬은 Ch.4에서 같은 앱의 Code 탭으로 안내해요.)

📷 캡쳐 — 맞춤설정 → 개인 플러그인 → 마켓플레이스 추가 → <code>daniel-kim-9way/vuild-skills</code> 입력 → 동기화.
한 번 등록하면 모든 레슨의 스킬이 바로 떠요.

자주 발생하는 실패 5가지 — 미리 답

비개발자가 설치에서 가장 자주 막히는 5가지예요. 본인 상황에 해당하는 것만 보면 돼요.

증상 우회법
① 다운로드가 시작도 안 됨다른 브라우저(Chrome/Edge/Safari)로 재시도 · 회사 와이파이면 핸드폰 핫스팟 · 그래도 안 되면 Vuild 카톡 오픈채팅
② 설치 권한이 안 됨Mac: 시스템 설정 → 개인정보 보호 → "열기" / Win: SmartScreen "추가 정보 → 실행" · 회사 노트북이면 IT 또는 개인 노트북
③ 로그인이 안 됨 (Google 흰 화면)브라우저 팝업 차단 해제 후 재시도 · 또는 "Continue with email"로 우회
④ 한국 카드로 Pro 결제가 안 됨카드사 앱에서 해외결제 차단 해제 → 다른 카드 → 그래도 안 되면 PayPal 연결 후 결제
⑤ 한국어로 보냈는데 영어로 응답"한국어로 답변해줘" 한 번 더 보내면 그 대화 내내 한국어로 응답해요
🎨 5가지 실패 케이스 정리 다이어그램 (다운로드·권한·로그인·결제·한국어).
5가지 다 우회법 있어요 — 막히면 이 표 다시 보세요.

이제 진짜 — First Build (30분)

오늘 만들 결과물은 한 페이지짜리 자기소개 HTML이에요. DB도 로그인도 없는 한 화면. 이름·소개·잘하는 것 3개·연락처가 들어간 깔끔한 페이지로, 링크드인 프로필 대신 카톡·인스타 DM에 던질 수 있는 정도예요. 본인 데이터로 만들기 때문에 "AI가 진짜 내 정보로 만든다"는 감각이 강하게 와요.

🎨 생성 — 30분 후 결과물 자기소개 페이지 mockup 3가지 톤.
3가지 톤 중 본인 취향대로 고르면 돼요.
단계 하는 일 시간
1Claude 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 — 다음 질문으로 넘어가는 게 더 중요해요.

📷 Claude Desktop 입력창에 /v1-firstbuild 입력 후 엔터 직전 화면.
슬래시(/) 입력 → 자동완성에서 /v1-firstbuild 선택.
질문 예시 답변
이름 + 한 줄 소개"한규민, 비개발자 SaaS 빌더"
잘하는 것 3가지"기획 · 아이디어 정리 · 사람 모으기"
디자인 톤"보라-핑크 그라데이션, 모던, 모바일 우선"
연락처 (선택)"카톡 ID 또는 이메일"

질문이 끝나면 스킬이 HTML 코드 한 덩어리를 출력해요. 코드 블록 우상단 "Copy" 버튼을 누르면 복사돼요.

단계 3~4 — 저장 + 브라우저로 열기

  • Mac (TextEdit): "포맷 → 일반 텍스트로 변환"(필수!) → 코드 붙여넣기 → index.html로 저장
  • Windows (메모장): 코드 붙여넣기 → 다른 이름으로 저장 → 파일 형식 "모든 파일"(필수!) · 인코딩 UTF-8index.html
  • 저장한 index.html더블클릭 → 기본 브라우저에 본인 페이지가 떠요
📷 캡쳐 — 더블클릭 → 브라우저에 본인 자기소개 페이지가 뜬 모먼트.
이 한 컷이 LEARN 30일의 첫 발자국이에요.

마음에 안 들면 — 다시 시키기

한 번에 만족스러운 결과는 드물어요. 정상이에요. 핵심은 "전체를 다시 말고, 바꿀 부분만 콕 집어서"예요. 예) "그라데이션을 오렌지-노랑으로, 나머지는 유지하고 전체 코드 다시 줘" → 새 코드 받아 다시 저장 → 브라우저 새로고침(F5 / Cmd+R).

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

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

  1. 브라우저에서 app.netlify.com/drop 접속
  2. index.html 파일을 페이지 가운데로 드래그-드롭
  3. 30초 안에 https://random-name.netlify.app 같은 URL 발급
  4. 그 URL을 한 사람에게 카톡으로 — "내가 30분 만에 만들었어, 봐줘 :)"
📷 Netlify Drop 페이지에 index.html을 드래그-드롭 → URL 발급된 화면.
파일을 가운데로 끌어다 놓으면 30초 안에 진짜 URL이 나와요.

상대가 그 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.

실습하기

로그인하면 스킬을 실습할 수 있습니다