VUILD

이 레슨이 끝나면

0-3에서 만든 자기소개 페이지에 "회원가입을 붙이면" 어디 어디가 필요한지 큰 그림이 그려진다
웹 서비스의 5가지 핵심 부품(브라우저·도메인·서버·DB·배포)이 어떻게 연결되는지 본인 입으로 설명할 수 있다
가장 막막했던 영어 약어 30개(HTTP, REST, JSON, OAuth, API key, DNS, CDN…)의 뜻을 한 줄씩 안다

왜 이 레슨이 먼저 필요한가

Ch.0에서 만든 자기소개 페이지(index.html)는 사실 웹 서비스가 아니에요. 그냥 한 장짜리 정적 파일이에요. 진짜 SaaS는 (1) 사람들이 가입하고 (2) 본인 데이터를 저장하고 (3) 나중에 다시 들어와서 쓸 수 있어야 해요. 그러려면 단순히 HTML 한 장으로는 안 되고, 여러 부품이 협력해야 해요. 그 부품들과 협력 방식을 처음부터 머릿속에 그려놓으면 Ch.2~Ch.5가 훨씬 쉬워져요.

이 레슨은 Claude Desktop의 /v1-webflow 스킬을 호출해서 진행해요. 스킬이 "본인이 0-3에서 만든 자기소개 페이지에 회원가입 기능을 붙이면 어떻게 될까?"부터 시작해서, 단계별로 부품을 하나씩 추가하는 그림을 그려가요. 여러분은 본인 답을 입력하고, 마지막에 본인만의 인프라 지도 한 장을 손에 쥐고 끝나요.

🎨 생성 (Codex CLI) — 좌(0-3 자기소개 HTML 1장) → 가운데 큰 화살표 "+ 회원가입을 붙이면?" → 우(브라우저·도메인·서버·DB·배포 5부품 다이어그램). — 정적 HTML 한 장 → 진짜 SaaS로 가는 다리.

스킬이 묻는 질문 (총 5개)

/v1-webflow는 본인 답을 받아 본인 SaaS의 흐름도 한 장을 만들어줘요. 모든 답변에 정답은 없어요. "잘 모르겠어요"도 정상이에요. 스킬이 옆에서 풀어줘요.

질문	예시 답변
Q1: 0-3에서 만든 페이지가 누구에게 보여요?	"카톡으로 친구한테만 보냈어요" 또는 "Netlify URL 받았어요"
Q2: 사용자가 가입 버튼을 누르면, 그 정보(이메일·비밀번호)는 어디에 저장돼야 할까요?	"잘 모르겠어요" 또는 "어떤 데이터베이스 같은 곳?"
Q3: 그 저장은 누가 하나요? 본인 PC가 24시간 켜져 있어야 해요?	"PC 켜놓을 순 없어서… 다른 컴퓨터?"
Q4: 사용자가 본인 서비스를 어떻게 찾아오나요? URL 주소가 어떻게 만들어져요?	"도메인 사야 한다고 들었어요" 또는 "구글 검색?"
Q5: 본인이 코드 수정하면 그 변경이 어떻게 사용자한테 반영돼요?	"자동으로 되는 줄 알았어요" 또는 "다시 올려야?"

스킬 호출 방법

Claude Desktop을 열고 새 대화창에서 슬래시(/)를 누르세요. 자동완성에서 /v1-webflow를 고르거나 직접 입력하고 엔터.

입력

/v1-webflow

스킬이 첫 응답으로 보통 이렇게 시작해요:

스킬 첫 응답 (예시)

"안녕하세요! 0-3에서 만든 자기소개 페이지에 '회원가입' 기능을 붙인다고 상상해 봐요. 첫 질문 — 그 페이지를 지금 누구에게 보여줬나요? (카톡 친구 한 명? Netlify URL 발급받았나요? 아직 본인 PC에만?)"

웹 서비스 5부품 — 큰 그림

스킬은 본인 답을 받으면서 점점 그림을 키워줘요. 마지막에는 다음과 같은 5부품 다이어그램이 완성돼요. 이 5부품을 비유로 풀어볼게요. "오프라인 식당"에 비유하면 직관적이에요.

부품	웹에서	식당 비유
① 브라우저 (Frontend)	사용자가 보는 화면. Chrome/Safari/카톡 인앱 브라우저	손님이 앉는 테이블 + 메뉴판
② 도메인 (Domain + DNS)	vuild.kr 같은 주소. DNS가 "주소 → 실제 컴퓨터" 변환	식당 간판 + 주소(네이버 지도)
③ 서버 (Backend)	24시간 돌아가는 컴퓨터. 가입 처리, 로그인 검증, 데이터 가공	주방 + 요리사
④ 데이터베이스 (DB)	사용자·게시글·결제 등을 표 형태로 영구 저장	냉장고·창고 (재료·재고)
⑤ 배포 (Deploy + Hosting)	본인 코드 → 서버에 올리는 작업. Railway/Render/Vercel	새 메뉴·인테리어를 매장에 적용

🎨 생성 (Codex CLI) — 좌(웹 서비스 5부품 아이콘 + 화살표) ↔ 우(식당 비유 — 테이블·간판·주방·냉장고·인테리어). 두 그림이 1:1로 매핑된 형태. — 웹 5부품 ↔ 식당 비유 1:1 대응.

사용자가 가입 버튼을 누르면 — 7단계 흐름

위 5부품이 어떻게 협력하는지 "가입 버튼 한 번 클릭"으로 따라가 봐요. 이게 모든 SaaS의 가장 기본 흐름이에요.

사용자가 브라우저에 vuild.kr 입력 → 도메인(DNS)이 "그 주소는 IP 1.2.3.4야"라고 알려줌
브라우저가 그 IP로 접속 → 서버가 가입 폼 HTML을 응답으로 보냄
사용자가 이메일·비밀번호 입력 후 "가입" 버튼 클릭 → 브라우저가 그 데이터를 서버로 전송 (HTTP POST 요청)
서버가 받은 데이터 검증 (이메일 형식? 비밀번호 길이?) → 비밀번호 해시(암호화) 변환
서버가 DB에 저장 → users 표에 새 행(row) 추가
서버가 응답 "가입 성공!" → 브라우저가 환영 페이지로 이동
사용자는 즉시 로그인 가능 — 다음에 들어올 때 같은 이메일·비밀번호로

🎨 생성 (Codex CLI) — 가입 버튼 클릭 7단계 시퀀스 다이어그램. 사용자(폰) → 브라우저 → DNS → 서버 → DB → 응답 → 환영 페이지. 각 단계 번호 + 한 줄 설명. — "가입 버튼 한 번 누르면" 일어나는 일 7단계.

비개발자가 가장 막막한 영어 약어 30개

개발 글을 읽다 보면 영어 약어가 쏟아져요. 처음에는 무서워 보이지만, 한 줄 풀이만 알아도 90%는 따라갈 수 있어요. 이 30개를 한 번 훑어보세요. 외울 필요는 없어요. "아 이거 그거였구나" 정도만 기억하면 돼요.

약어	풀이	한 줄 비유
HTTP	HyperText Transfer Protocol	웹 데이터를 주고받는 약속(언어)
HTTPS	HTTP + Secure	HTTP에 자물쇠(암호화) 추가
REST API	REpresentational State Transfer API	서버에 일을 시키는 표준 방식
JSON	JavaScript Object Notation	데이터를 주고받는 텍스트 형식 (key: value)
GET / POST	HTTP 메서드	GET = 가져와줘 / POST = 보내요
Frontend	사용자가 보는 화면 영역	식당의 객장(테이블·메뉴판)
Backend	서버 쪽 처리 영역	식당의 주방
DB	Database 데이터베이스	엑셀 시트들의 영구 저장소
SQL	Structured Query Language	DB에 "이런 데이터 줘"라고 묻는 언어
ORM	Object-Relational Mapping	SQL을 한국어 쓰듯 쉽게 쓰게 해주는 통역
Server	서버	24시간 켜져 있는 다른 컴퓨터
Domain	도메인 (vuild.kr)	식당 간판 글자
DNS	Domain Name System	간판 → 실제 주소 변환 (네이버 지도)
Hosting	호스팅	서버 컴퓨터 빌리기 (월세)
Cloud	클라우드 (AWS, Vercel, Railway)	남의 서버를 인터넷으로 빌려 씀
CDN	Content Delivery Network	전 세계 캐시 — 가까운 매장에서 배송
SSL / TLS	암호화 인증서	택배 상자에 자물쇠 거는 법
OAuth	Open Authorization	"구글로 로그인" — 비번 직접 안 받음
API key	외부 서비스 인증 키	고객 카드 번호 (이 사람이 회원이라는 증명)
.env	Environment Variable 파일	비밀 키들을 모아두는 잠긴 서랍
Cache	캐시	자주 쓰는 거 손에 두기
Session	세션	"로그인 유지 중" 표시 (짧은 임시)
Cookie	쿠키	브라우저에 저장하는 작은 메모지
JWT	JSON Web Token	서버가 "이 사람 로그인 됨" 도장 찍은 입장권
CORS	Cross-Origin Resource Sharing	"다른 도메인에서 우리 서버 호출 OK?"
GraphQL	REST의 다른 방식	"내가 원하는 필드만 골라 받기"
WebSocket	실시간 양방향 통신	전화 통화 (HTTP는 편지 한 통)
IDE	Integrated Development Environment	코드 에디터 (VS Code/Antigravity)
Git	버전 관리 도구	코드 시간여행 (어제로 되돌리기)
Repository	코드 저장소 (repo)	한 프로젝트의 코드 + 역사 전체

🎨 생성 (Codex CLI) — 30개 약어를 5×6 그리드로 정리한 "치트시트". 약어 + 한 줄 풀이 + 작은 아이콘. — 캡쳐해서 폰 배경화면으로 써도 좋아요.

스킬이 만들어주는 결과물

5개 질문에 답을 다 입력하면 스킬이 마지막에 본인 SaaS 흐름도 한 장을 텍스트 다이어그램으로 출력해줘요. 예시는 이런 모양이에요.

스킬 결과물 (예시)

[사용자 폰 브라우저]
        ↓ "vuild.kr" 입력
[DNS — 도메인 → IP 변환]
        ↓
[서버 — Railway 또는 Render]
        ↓ 가입 데이터 처리
[DB — PostgreSQL 또는 SQLite]
        ↓ 저장 완료
[서버 응답 → 브라우저]
        ↓
"가입 성공!" 화면

📷 캡쳐 — 스킬이 마지막에 출력하는 본인 SaaS 흐름도 텍스트 다이어그램. — 이 한 장이 1-1의 결과물.

막히는 지점 — 미리 답

"질문이 너무 어려워요. 답을 못 적겠어요." → "잘 모르겠어요"라고 그대로 답하세요. 스킬이 그 답을 받고 더 쉬운 비유로 다시 풀어줘요.
"30개 약어를 다 외워야 하나요?" → 외울 필요 전혀 없어요. Ch.2~Ch.5에서 진짜 등장할 때 다시 보면 돼요. 지금은 "이런 게 있구나" 정도면 OK.
"식당 비유가 와닿지 않아요." → 본인이 친숙한 비유로 바꿔달라고 스킬에게 요청하세요. "저는 카페 알바 했어요. 카페 비유로 다시 설명해 주세요" 한 줄.
"/v1-webflow가 자동완성에 안 떠요." → Claude Desktop을 종료 후 재실행. 그래도 안 되면 "v1-webflow 스킬을 시작해줘" 한국어로 요청해도 동일.
"본인 SaaS가 아직 뭘 만들지 모르는데요." → 정상이에요. 1-1은 일반적인 "회원가입 SaaS" 기준으로 진행해요. 본인 아이디어는 Ch.2 VALUE에서 잡아요.

다음 단계 → 1-2 데이터 + DB + 인증 흐름

1-1에서 그린 큰 그림을 이번엔 더 좁혀서 "가입 버튼 → DB 저장"만 자세히 따라가요. DB 표가 어떻게 생겼는지, 비밀번호는 왜 그대로 저장하면 안 되는지, OAuth가 왜 안전한지 — 이 세 가지를 손에 잡히게 풀어요. /v1-data-flow 스킬을 호출해서 진행해요.

웹 서비스 큰 그림 — 한 그림으로 그려보기