saas-base
AI에게 코드를 맡겨 Vite와 Supabase, Stripe로 SaaS를 만드는 출발점입니다. Claude Code 또는 Codex로 작업한다고 가정하고, FSD(Feature-Sliced Design, 기능 단위로 폴더를 나누는 설계 규칙) 6레이어 폴더 규칙과 phase 흐름, 자동화 진입점을 미리 정해 두었습니다. 그래서 첫 두세 프롬프트가 지난 뒤에 구조가 어긋나는 일을 막아 줍니다.
이 페이지는 갈림길 역할만 합니다. 어디서부터 시작해야 할지 아래 표로 정한 다음, 그 페이지로 곧장 넘어가면 됩니다.
어디서부터 시작할지
섹션 제목: “어디서부터 시작할지”| 어떤 분 | 가야 할 곳 |
|---|---|
| 풀타임 개발자가 아니고 터미널과 git이 처음이며 Supabase와 Stripe도 처음인 분 | 비개발자용 매뉴얼 |
| React와 TypeScript는 익숙하지만 Supabase와 Stripe, FSD가 처음인 분 | 비개발자용 매뉴얼의 prerequisites부터 first-run까지를 읽은 다음 전문가용 매뉴얼로 넘어갑니다 |
| 이미 Supabase와 Stripe로 SaaS를 출시해 본 분 | 전문가용 매뉴얼로 가서 architecture부터 읽습니다 |
세 행 중 어느 쪽인지 정하기 어려우면 첫 행을 고릅니다. 비개발자용 매뉴얼은 한 단계에 한 가지 동작만 다루므로, 이미 익숙한 단계는 빠르게 훑고 넘어가도 됩니다.
두 매뉴얼의 차이
섹션 제목: “두 매뉴얼의 차이”전문가용 매뉴얼은 짧은 참고 문서 형식입니다. ADR과 FSD 6레이어, 어댑터, 행 수준 접근 정책(RLS), webhook 같은 용어가 익숙하다고 가정하고 결정 근거를 중심으로 설명합니다. intro와 architecture, verification, build-and-package, distribution, updates 여섯 섹션으로 이루어져 있습니다.
비개발자용 매뉴얼은 단계별로 진행합니다. AI가 코드를 쓴다는 발상에는 익숙하지만 터미널과 git, Node, Supabase 계정, Stripe 계정이 처음일 수 있다고 가정합니다. 화면이 어떻게 보여야 정상인지를 본문이 같이 설명해 줍니다. index와 11개 단계로 이루어져 있습니다.
같은 base를 두 가지 방식으로 설명한 한 쌍입니다. 문체는 다르지만 다루는 코드와 명령은 완전히 같습니다.
어디서 시작하든 공통
섹션 제목: “어디서 시작하든 공통”첫 실행은 Vite dev 서버만 띄우면 끝납니다. Supabase 계정도 Stripe 계정도 이 단계에서는 필요 없습니다. pnpm dev 가 http://localhost:5173 에 화면을 띄우는 모습을 직접 본 다음, 실제 백엔드 연결은 본인 SaaS의 모양이 잡힌 다음에 시작합니다. 작업 단계는 phase 1부터 6까지 미리 나뉘어 있고, 한 phase가 끝나야 다음 phase로 넘어갑니다.
AI 진입점은 Claude Code에서는 /start 한 줄이고, Codex에서는 저장소 루트의 AGENTS.md 파일입니다. 두 경로는 같은 canonical 문서 AI_AUTOMATION.md를 가리킵니다.
라이선스는 All Rights Reserved를 기반으로 한 상업 라이선스 모델입니다. 결제 흐름과 변호사 검토를 마친 COMMERCIAL-LICENSE.md가 아직 작업 중이라, 실제 판매 전에는 그 두 가지를 마무리해야 합니다. 매뉴얼과 랜딩 페이지는 공개되어 있어서, 지금 읽고 있는 이 페이지도 누구나 볼 수 있습니다.