SESSION 02 / 06
일단 나만의
웹페이지 올려보자
문서 → 시연 → 배포 → 원칙
지준영
비전공(경영학과) → 기자 · 해외영업 → 개발자 전향
iOS · Android · Frontend 약 5년 반 (6년차)
대기업 협업툴 iOS/macOS 앱 개발
2026~ 바이브코딩으로 웹 · 서버 1인 개발 · 사업화
PART 1 — 복기
지난 수업 이후에
Claude한테
뭐 시켜보셨어요?
안 시켜봤어도 상관 없습니다.
지난 시간에는
HTML 딱 한 장을 만들어서
내가 열어보는 걸 했어요.
카톡으로 파일 보낼 건가요?
집에서 혼자 볼 건가요?
올리면 자랑할 수 있어요.
포트폴리오를 올려놓습니다
올려놓습니다
"여기 와서 사세요" 올려놓습니다
TODAY'S GOAL
오늘 이 시간이 끝나면
웹페이지를 만들어서
인터넷에 올리는 전 과정을
눈으로 보게 됩니다.
왜 문서가 필요한지를
이해하게 됩니다.
PART 2
문서가 먼저다
문서가 뭐라고 생각하세요?
클로드에게 문서는 뭘까요?
정리한 종이 한 장
라는 규칙을 적어둔 것
디테일을 적어둔 것
왜 이게 필요한지, 식당에 비유해서 설명해 볼게요.
STEP 1
🍚 "밥 주세요."
메뉴판도 안 보고 "밥 주세요" 라고 하면?
사장님 맘대로 나옵니다.
AI도 똑같아요.
"만들어줘"만 시키면 → 대충 만듭니다.
STEP 2
🍳 "김치볶음밥 주세요."
메뉴를 콕 집어서 말하면
최소한 원하는 메뉴가 나옵니다.
= AI한테 '이번에 만들 거 정리한 종이' 한 장 주는 것
STEP 3
📋 상세 주문
"런천미트 말고 스팸으로.
김치는 푹 익은 걸로.
계란은 반숙. 단무지 빼주세요."
이 디테일을 AI한테 전달하는 게
바로 문서입니다.
단골 식당 사장님은 기억해주죠?
AI는 그게 안 됩니다.
AI는 — 매번 새 알바생이 나와요.
어제 내가 뭘 시켰는지 전혀 몰라요.
그래서 문서로 적어놓는 겁니다.
새 알바생이 와도 그 종이를 읽고
바로 만들 수 있으니까요.
AI한테 일 시키기 전에
AI한테 먼저 문서를 만들게 시키세요.
강사 시연 ①
Claude 맥 앱에서 Grimoire 프로젝트 열기
"이 프로젝트의 문서들에 대해 설명해봐"
→ AI가 문서를 읽고 일하는 구조가 이미 만들어져 있는 겁니다.
지금 보신 게 바로
3단계 — 상세 주문표예요.
이 프로젝트에는
"이건 이렇게 만들어"라는 종이가
여러 장 들어있는 거예요.
이 종이가 하나도 없었으면?
→ "밥 주세요" 상태. 대충 나옵니다.
강사 시연 ②
IntelliJ에서 문서 구조 직접 보기
(공통)
(주방 / 홀)
기획서가 맨 꼭대기, 그 아래로 주방 규칙·홀 규칙이 따로 있습니다.
강사 시연 ③
DOC_MAP.html — 문서 관계도 풀스크린
오늘 기억하실 건
맨 위에 있는 딱 한 장
📋 기획서
"이번에 만들 거 정리한 종이"가 프로젝트의 꼭대기
나머지 이 복잡한 구조? → 3회차에서 자세히 다룹니다.
식당으로 돌아가면 —
이건 식당 벽에 붙은 모든 규칙의 전체 지도예요.
처음부터 이렇게 복잡한 건 아니에요.
시작은 기획서 한 장.
"우리 식당은 김치볶음밥 전문점이야"
이 한 장에서 시작해서 규칙이 하나씩 붙어간 거예요.
PART 3
웹페이지 만들기
+ 배포
처음부터 끝까지, 지금 보여드리겠습니다.
라이브 시연
Claude에게 웹페이지 만들게 시키기
먼저 텍스트만으로 웹페이지 하나를 만들게 시킵니다.
→ 강사 화면 전환
만들어졌죠? 근데…
"나는 디자인
할 줄 모르는데?"
방법이 세 가지 있습니다.
THREE METHODS
마음에 드는 디자인을 캡처
AI에게 원칙을 물어보기
그대로 드래그 앤 드롭
AI는 디자인 이론은 완벽하게 알아요.
지구상의 모든 디자인 책을 다 읽었어요.
근데 막상 사람이 어디서
'와, 이거 멋진데?' 하고 느끼는지는
잘 몰라요.
지구상의 모든 영화 리뷰를 다 읽었지만
영화를 한 편도 직접 본 적이 없는 사람
규칙은 아는데 감각은 없어요. → 방향은 사람이, 실행은 AI가. 그게 디렉팅.
라이브 시연 — 방법 3
1회차 프레젠테이션 HTML을 Claude에게 드래그 앤 드롭
USER
이거의 톤앤매너와 디자인 규칙을 적용해서 만들어줘.
빨간색, 검은색, 바우하우스 느낌.
페이드인 애니메이션, 타이핑 이펙트 들어가면 돼.
→ 강사 화면 전환
라이브 시연 — 배포
Vercel 가입 → 프로젝트 올리기 → URL 생성
만든 웹페이지를 인터넷에 올리는 과정입니다.
→ 강사 화면 전환
DEPLOYED
지금 이 URL을
누구한테든 보내면
바로 열립니다.
여러분도 집에서 이 과정을
그대로 하면 같은 결과가 나옵니다.
크몽 같은 외주 알선 사이트의 퍼블리셔, 웹개발자, 풀스택개발자들.
빠르게 프로젝트를 완수하고 다음으로 넘어가는 외주업체들.
상당수는 지금 보여드린 버셀과, 다음에 소개드릴 수파베이스 선에서 일을 끝냅니다.
버셀과 수파베이스에 여러분의 웹프로젝트를
예쁘게, 오동작 없이, 보안 구멍 없이 올릴 수 있다면 —
굳이 그들의 손을 빌릴 필요 없이
자기만의 서비스를 운영할 수 있다는 뜻입니다.
라이브 시연 — Supabase
"데이터를 저장할 곳"
지금은 이런 게 있다 정도만 기억하세요.
→ 강사 화면 전환
버셀, 수파베이스.
클로드와 핑퐁을 거치다 보면
막히는 부분 분명히 나올 겁니다.
기억 안 나는 부분? 당연히 나올 겁니다.
중요한 건,
막혔을 때 뭘 하느냐입니다.
10분 휴식
잠시 쉬었다가 오겠습니다.
PART 4
AI에게 일 시키는
4가지 원칙
방금 본 장면에
이름을 붙여드리겠습니다.
원하는 걸 먼저 정리해야 좋은 결과가 나온다.
"아까 저 Claude한테 바로 '만들어줘' 안 했잖아요.
기획서부터 만들게 시켰죠? 그게 이겁니다."
식당에서 "밥 주세요"가 아니라 상세 주문표를 적어두는 거예요. 매번 새 알바생이 와도 내가 원하는 게 나옵니다.
요청을 글로 남기고, 결과를 확인하고, 필요 시 다시 요청.
"아까 기획서가 바로 그 문서입니다.
이걸 안 만들었으면 Claude가 맘대로 만들었을 거예요."
식당에서 주문받을 때 메모장에 적잖아요? 안 적으면 까먹고요. AI도 똑같아요.
실제로는 안 한 경우가 있습니다.
"시연 중간에 제가 한 번 확인했잖아요.
실제로 돌아가는지, 실제로 자기가 말한 대로
작업을 한 게 맞는지, 추측해서 말한 게 아닌지.
이게 습관이 되어야 합니다."
AI 취조 질문 3가지
"네가 말한 그 값, 실제로 확인한 거야, 추정한 거야?"
"네가 본 정보, 언제 시점의 기록이야?"
"이 방향이 근본적으로 맞는 거 맞아?"
실제 사례 — 곧이곧대로 믿지 않기
잘못된 접근으로 구조 충돌
"변경 없음" 거짓 보고
세션 기록 누락
전부 제가 직접 겪은 일입니다.
확인 안 했으면 그대로 넘어갔을 겁니다.
체감 효율이 크게 달라집니다.
"저는 코드 한 줄도 안 쳤어요.
전부 Claude한테 시켰습니다. 이게 위임입니다."
매주 반복하는 일 중에 '이건 좀 귀찮은데' 싶은 거 → AI에게 넘길 후보입니다.
SUMMARY
저는 이번 강의 준비하면서,
혼자 생각한 원칙을 몇 개 만들었습니다.
이거, 오픈채팅 방에 한번 올려드리겠습니다.
BONUS
원칙 하나 더.
AI에게 멱살 잡고 다시 시키는 게 훨씬 남는 장사입니다.
"방금 시연에서 제가 막혔을 때 뭘 했는지 보셨죠?
구글 검색 안 했어요. 책 안 폈어요.
Claude한테 물어봤습니다."
PART 5 — HOMEWORK
오늘의
숙제
자기소개 페이지여도 좋고,
전혀 다른 거여도 좋습니다.
중요한 건 직접 한 번 해보는 것.
만들면서 Claude한테
이것들을 물어보세요.
CLAUDE.md가 뭐야?
큰 프로젝트는 다른 문서는 어떻게 만들고 관리해?
RLS가 뭐야?
API 키는 어떻게 보관해야 돼?
localStorage가 뭐야?
.env가 뭐야?
코드 쪽도
몇 개 물어보세요.
Next.js가 뭐야?
혹시 날것 그대로의 자바스크립트로 만든 거야?
그럼 타입스크립트는 뭐야?
React가 뭐야?
상태관리가 뭐야?
이런 단어들을 알아야
Claude가 정리된 코드를 만듭니다.
지금 다 이해하실 필요 없습니다.
구글 검색 하지 마세요.
Claude한테 물어보세요.
그런데,
한 가지만 짚고 갈게요.
1화 때도 언급한 내용이다만 —
이 Claude를 만든 Anthropic
미국 전역의 중고서적 시장을 뒤져서
수십만 권의 책을 사와서
스캔을 뜨고, AI를 학습시켰습니다.
왜? 책은 전문가가 쓰고,
편집부가 검증하고,
시장에서 평가를 받은 매체이기 때문입니다.
인터넷에 돌아다니는 글보다 질이 다릅니다.
돌고 돌아
책이 근본입니다.
하지만 — 시작도 하기 전에
그 책의 무게 때문에
시작조차 하지 않는 것은
지금의 시류에 맞지 않습니다.
책과 전문가의 의견을
폄하하지 마십시오.
검증된 지식이 필요할 때가 반드시 온다.
그걸 알아야 내 서비스가 망가지는 것을 막을 수 있다.
SESSION 02 / 06
오늘도
수고하셨습니다.
다음 시간 — 3회차
"문서를 깎고, 만들고, 연결합시다"
CONTACT
질문이 생기면
카카오톡 오픈채팅으로
QR을 스캔하시면 오픈채팅으로 연결됩니다.