VUILD

이 레슨이 끝나면

0-3에서 만든 자기소개 페이지에 "회원가입을 붙이면" 어디 어디가 필요한지 큰 그림이 그려진다
웹 서비스의 4개 핵심 레이어(프론트엔드·백엔드·데이터베이스·배포)가 어떻게 연결되는지 본인 입으로 설명할 수 있다
개발 글에 자주 나오는 영어 용어가 더는 무섭지 않다 — 핵심 몇 개만 알고, 나머지는 나올 때 하나씩 풀려요

왜 이 레슨이 먼저 필요한가

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

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

🎨 생성 (Codex CLI) — 좌(0-3 자기소개 HTML 1장) → 가운데 큰 화살표 "+ 회원가입을 붙이면?" → 우(프론트엔드·백엔드·데이터베이스·배포 4 레이어 다이어그램). — 정적 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에만?)"

웹 서비스는 4개 레이어로 구성돼요 — 큰 그림

비개발자는 "서비스를 만든다"고 하면 보통 화면(HTML 한 장)만 떠올려요. 하지만 웹 서비스(SaaS)는 그냥 HTML 한 장이 아니라, 4개 레이어가 협력해야 굴러가요. 스킬은 본인 답을 받으며 이 그림을 점점 키워줘요. 4개를 "오프라인 식당"에 비유하면 직관적이에요.

레이어	웹에서	식당 비유
① 프론트엔드 (Frontend)	HTML·CSS·JS — 브라우저에 보이는 화면	메뉴판 — 손님이 보고 고르는 것
② 백엔드 (Backend)	요청 처리·로그인 검증·데이터 가공 (Ruby on Rails)	요리사 — 주문 받아 요리해서 내줌
③ 데이터베이스 (Database)	사용자·게시글·결제를 표 형태로 영구 저장 (SQLite)	냉장고 — 재료·재고를 보관
④ 배포 (Deploy)	코드를 인터넷에 올려 공개 (Railway). 도메인(vuild.kr)이 가게 주소	가게를 열고 손님 받기 — URL은 네이버 지도에 업체 등록(손님이 찾아오게)

💡 핵심: 이 4개 레이어를 Claude Code(AI)가 모두 압니다. 당신은 "무엇을" 만들지만 결정하면 돼요 — 어떻게 만드는지(코드)는 AI가 채웁니다. 도메인·DNS 같은 세부도 ④ 배포에 딸려 와요.

🎨 생성 (Codex CLI) — 좌(웹 4개 레이어: 프론트엔드·백엔드·데이터베이스·배포 아이콘 + 화살표) ↔ 우(식당 비유 — 메뉴판·요리사·냉장고·오픈한 가게). 두 그림이 1:1로 매핑된 형태. — 웹 4개 레이어 ↔ 식당 비유 1:1 대응.

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

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

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

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

개발 글에 나오는 영어 — 무서워 마세요

개발 글을 읽다 보면 영어 약어가 쏟아져요. 그런데 지금 다 외울 필요는 전혀 없어요. 각 용어는 진짜 필요한 레슨에서 그때그때 풀어드려요. 1-1에서는 자주 보이는 7개만 눈에 익혀두면 충분해요.

약어	한 줄로
HTTP / HTTPS	웹에서 데이터 주고받는 약속 (+ 자물쇠=암호화)
JSON	데이터를 적는 형식 (key: value 메모지)
DB	데이터 영구 저장소 (엑셀 시트 같은)
API	다른 서비스에 일을 시키는 창구
DNS	주소(vuild.kr)를 실제 위치로 안내 (인터넷 전화번호부)
OAuth	"구글로 로그인" — 비번 직접 안 받음
API key	외부 서비스에 보여주는 신분증 (카드 번호 같은 비밀)

나머지(REST·CDN·JWT·세션·쿠키·Git…)는 나올 때 그 레슨에서 풀어드려요. 전체를 한 장에 모은 치트시트는 아래 — 외우지 말고 막힐 때만 꺼내 보세요.

🎨 약어 치트시트 (참고용) — 외우지 말고 막힐 때만 보세요. — 막힐 때 꺼내 보는 참고 자료.

스킬이 만들어주는 결과물

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

스킬 결과물 (예시)

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

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

막히는 지점 — 미리 답

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

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

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

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