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

왜 이 레슨이 먼저 필요한가

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

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

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

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

스킬 호출 방법

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

/v1-webflow

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

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

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

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

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

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

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

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

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

스킬이 만들어주는 결과물

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

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

막히는 지점 — 미리 답

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