~/vibe-coding $ 코딩을 전혀 모르는 사람을 위해
먼저 보이면, 이해됩니다.그림으로 코딩을 이해하세요.
문법도, API 암기도 필요 없습니다. 순서도·아키텍처 그림·일상 비유로 웹·SaaS·AI 제품 뒤에서 무슨 일이 일어나는지 중학생도 알 수 있게 설명합니다.
- 학습 주제
- 52+
- 인터랙티브 그림
- 113+
- 지원 언어
- 4
Build
무엇을 만들고 싶나요?
목표를 고르면 제로에서 출시까지의 학습 경로를 바로 드립니다.
Why
무엇이 다른가
대부분의 강의는 '타이핑'을 가르칩니다. 우리는 '시스템 전체를 보는 눈'을 키웁니다.
그림 우선
모든 개념에 아키텍처와 흐름 그림을. 전체를 먼저 보고 세부로.
쉬운 말 우선
전문 용어를 비유로 바꿉니다. 캐시는 '편의점', API는 '주문 카운터'.
시스템 사고
프론트·백·DB가 어떻게 이어지는지 가르칩니다. 특정 함수가 아니라.
AI 코딩 중심
Claude Code·Cursor·Codex와 협업해 아이디어를 출시 가능한 제품으로 만드는 법을 배웁니다.
Roadmap
당신의 학습 로드맵
아무것도 모르는 단계에서, 내 제품을 기획하고 만들기까지. 한 걸음씩.
- 01 /
세상 보기
웹·앱·SaaS가 어떤 부품으로 이뤄지는지 직관 형성.
- 02 /
선택 배우기
수많은 플랫폼·언어·도구 중 필요와 예산에 맞게 고른다.
- 03 /
AI와 협업
AI 도구와 견고한 흐름으로 명세를 동작하는 소프트웨어로.
- 04 /
제품 출시
SaaS·멀티테넌트 구조를 이해하고 배포·운영한다.
Gallery
아키텍처 갤러리
가장 흔한 8가지 시스템 구조를 한 장의 그림으로.
- 아키텍처 갤러리
단일 페이지 사이트
정적 파일을 CDN에 올려 어디서나 제공. 가장 빠르고 저렴.
- 아키텍처 갤러리
프론트·백엔드 분리
프론트는 화면, 백엔드는 API로 데이터 제공. 독립 배포.
- 아키텍처 갤러리
SaaS 애플리케이션
인증·결제·저장·알림을 갖춘 구독형 클라우드 소프트웨어.
- 아키텍처 갤러리
멀티테넌트 SaaS
여러 고객이 한 시스템을 공유하되 데이터는 엄격히 분리.
- 아키텍처 갤러리
Cloudflare 스택
모두 Cloudflare 엣지에서: Pages·Workers·D1.
- 아키텍처 갤러리
Fly.io 스택
컨테이너화 백엔드를 여러 리전에 배포, DB는 근접 읽기.
- 아키텍처 갤러리
서버리스
상시 서버 없음; 요청마다 함수 실행, 사용한 만큼 지불.
- 아키텍처 갤러리
마이크로서비스
큰 시스템을 작은 서비스로 분할, 각자 개발·배포·확장.
자주 묻는 질문
Vibe Coding과 이 플랫폼에 대해 알고 싶은 것.
코딩을 전혀 못 해도 이해할 수 있나요?
네. 문법을 가르치지 않고 그림과 비유로 원리를 설명하며, 중학생 수준을 목표로 합니다.
Vibe Coding이 정확히 무엇인가요?
AI와 함께 만드는 개발 방식. 의도와 방향은 당신이, 구현은 AI가. 핵심은 타이핑이 아니라 시스템 사고.
배우는 데 비용이 드나요?
콘텐츠는 무료입니다. 구현 시 $0 시작(Cloudflare 무료 한도 등)을 우선하고 유료는 명확히 표시합니다.
어떤 AI 도구를 써야 하나요?
목적에 따라. 기획·긴 작업·보안 리뷰엔 Claude Code, 에디터 내 편집엔 Cursor가 직관적. 비교 페이지 참고.
사이트는 어떤 언어를 지원하나요?
번체 중국어·영어·일본어·한국어. 기본은 번체 중국어이며 우측 상단에서 전환.