바이브코딩의 모든 것 - 인증·결제·배포 완벽 가이드 | 43분 만에 SaaS 만들기

개발 환경 세팅과 기본 프로젝트 구축

바이브코딩으로 SaaS 만들기 시작하려면, 먼저 개발 환경을 제대로 세팅하는 게 핵심이에요. 초보자분들은 "코딩 에디터가 뭐예요?"부터 헷갈리실 텐데, 쉽게 말하면 컴퓨터에서 코드를 쓰고 테스트하는 프로그램이에요. 오늘 추천하는 건 Google의 AI 코딩 에디터, 엔티 그래비티예요. VS Code를 기반으로 해서 익숙한 인터페이스에, AI 모델(클라우드 코드나 제미나이)을 바로 쓸 수 있어요. 처음 접하시는 분들을 위해 설명드리면, 이 에디터는 AI가 코드를 자동 생성해주는 '코딩 에이전트' 기능이 강점이에요. 무료로 다운로드 가능하고, Mac이나 Windows에 설치만 하면 돼요.

먼저, 엔티 그래비티를 설치하세요. 공식 사이트에서 OS에 맞는 버전 다운로드 후 실행하면, 익숙한 VS Code 화면이 나와요. 여기서 터미널(명령어 입력 창)을 열고, Next.js 프로젝트를 만듭니다. Next.js는 React 기반 프레임워크로, 웹 앱을 빠르게 빌드할 수 있어요. 왜 Next.js냐면, 서버사이드 렌더링(SSR) 지원으로 SEO가 좋고, 바이브코딩처럼 AI가 코드를 짤 때 안정적이기 때문이에요. 터미널에 'npx create-next-app@latest 제미나이-래퍼 --typescript --tailwind --eslint' 명령어를 입력하세요. 이게 생성되면 프로젝트 폴더가 생겨요. 생성 시간은 1-2분 정도예요.

프로젝트가 만들어지면, 보일러플레이트(기본 템플릿 파일들)가 많아서 지저분해요. 여기서 바이브코딩의 매력을 발휘하세요! 엔티 그래비티의 AI 에이전트(클라우드 코드)를 열고, "보일러플레이트를 깔끔히 정리해줘"라고 프롬프트 입력하면 자동으로 파일을 정리해줘요. 예를 들어, 불필요한 import 문이나 빈 컴포넌트를 제거해줍니다. 정리 후 'npm run dev'로 로컬 서버( http://localhost:3000 )를 띄워보세요. "Hello World"가 나오면 성공! 이 단계에서 팁 하나: AI가 코드를 짜면 항상 리뷰하세요. 왜냐하면 AI는 때때로 버그를 넣을 수 있어서, 초보자라도 "이 코드가 왜 이렇게 됐지?" 생각하며 배우게 돼요.

다음으로 Git 연동은 필수예요. Git은 코드의 '세이브 포인트' 시스템이에요. 게임에서 세이브 안 하면 재시작해야 하듯, AI 코딩 중 프로젝트가 망가질 때 되돌릴 수 있어요. GitHub에 가서 새 리포지토리(프라이빗으로 설정 추천)를 만들고, 터미널에서 'git init', 'git remote add origin [URL]', 'git add .', 'git commit -m "Initial commit"', 'git push -u origin main' 명령어를 순서대로 입력하세요. 푸시 후 GitHub에서 코드가 올라갔는지 확인하면 돼요. 실전 팁: 매 기능 끝날 때마다 'git commit -m "랜딩 페이지 추가"'처럼 푸시하세요. 비교로, Git 없이 하면 파일 백업이 번거로워서 초보자들이 포기하기 쉽죠.

이제 랜딩 페이지를 만듭니다. 랜딩 페이지는 앱의 첫 인상, 방문자를 끌어들이는 문이에요. 무료 디자인 사이트 Flowbite나 Tailwind UI에서 간단한 템플릿을 가져오세요. 예를 들어, "Gemini Wrapper" 제목에 간단한 설명 섹션을 복사한 후, AI에게 "Next.js와 Tailwind로 이 디자인을 랜딩 페이지로 만들어줘. Hero 섹션 포함"이라고 지시하세요. AI가 app/page.tsx 파일을 수정해주면, 'npm run dev'로 확인해보니 심플한 페이지가 완성돼요. 처음엔 디자인 완벽 추구 말고, 기능 우선으로 하세요. 왜 중요한가? 완벽주의는 프로젝트를 지연시키거든요. 대안으로, Framer나 Webflow 같은 노코드 도구를 쓰면 더 쉽지만, 바이브코딩 학습엔 코드 직접 보는 게 좋아요.

이 섹션까지 따라하면 기본 뼈대가 잡혀요. 수치로 보면, 이 세팅으로 10분 만에 동작하는 앱이 나와요. 초보자 여러분, 여기서 멈추지 말고 다음으로 넘어가보세요. Git 연동만 제대로 하면, 나중에 에러 날 때 후회 없을 거예요.

구글 로그인 인증과 채팅 기능 구현

바이브코딩으로 SaaS 만들기에서 인증은 '문지기' 역할이에요. 누가 앱을 쓰는지 확인하지 않으면 보안 홀이 생기죠. 초보자분들께 설명드리면, 로그인 없이 앱을 쓰면 누구나 데이터 접근 가능해서 위험해요. 오늘은 구글 로그인을 추천해요. 왜냐면 사용자들이 익숙하고, 따로 비밀번호 관리 안 해도 돼서 편리하거든요. 직접 로그인 시스템 개발은 복잡하니, Supabase라는 백엔드 서비스를 써보세요. Supabase는 Firebase 대안으로, 데이터베이스와 인증을 무료로 제공해요. PostgreSQL 기반이라 안정적이고, AI 코딩에 최적화됐어요.

먼저, Google Cloud Console에서 OAuth 앱을 만듭니다. 새 프로젝트 생성 후, 'API 및 서비스 > 자격 증명 > OAuth 2.0 클라이언트 ID 생성'으로 가세요. 앱 이름 'Gemini Wrapper', 이메일 입력 후 웹 애플리케이션으로 설정. 여기서 Redirect URI는 나중에 Supabase에서 가져올 거예요. 클라이언트 ID와 Secret을 메모하세요. 이 키들은 앱이 구글에 "나 로그인 허락해"라고 요청하는 증명서예요. 비교로, Apple 로그인도 있지만 구글은 전 세계 사용자 20억 명이라 범용적이에요.

Supabase 프로젝트를 만듭니다. supabase.com에서 새 프로젝트 생성(강력 비밀번호, 서울 리전 추천). 'Authentication > Providers > Google' 활성화 후, Google의 클라이언트 ID/Secret 붙여넣고 저장. Redirect URI(예: https://your-project.supabase.co/auth/v1/callback)를 Google Console에 추가하세요. 이제 Supabase MCP(관리자 CLI)를 설치해요. 엔티 그래비티에서 'npx supabase init' 후, 환경 변수 파일(.env.local)에 Supabase URL과 Anon Key를 넣으세요. Anon Key는 공개 키로, 클라이언트에서 안전하게 써요.

바이브코딩으로 로그인 구현! AI에게 "Supabase와 Google OAuth로 로그인 페이지 만들어줘. 로그인 버튼, Context로 상태 관리, 대시보드 접근 제한, 로그아웃 기능 포함. 환경 변수: SUPABASE_URL, SUPABASE_ANON_KEY"라고 프롬프트 주세요. AI가 auth 폴더와 components를 만들어요. 예: Google 버튼 클릭 시 Supabase의 signInWithOAuth로 구글 팝업 열림. 테스트: 'npm run dev' 후 로그인 버튼 누르면 구글 계정 선택, 성공 시 대시보드 이동. 에러 나면(예: URL mismatch), AI에게 에러 로그 붙여넣고 "이 에러 고쳐줘" 하세요. 팁: Supabase 대시보드에서 사용자 테이블 확인하며 디버깅하세요. 이 과정으로 초보자도 보안 기본을 배우게 돼요.

로그인 끝나면 채팅 기능이에요. 대시보드는 왼쪽 히스토리, 오른쪽 채팅 UI로 구성. Flowbite에서 Gemini-like UI 템플릿 복사 후, AI에게 "Next.js로 대시보드 만들어줘. 사이드바에 히스토리, 채팅 인터페이스, 사용자 정보와 사용 횟수 표시. 구독 티어에 따라 제한(프리: 100회)" 지시. AI가 dashboard/page.tsx 생성. Google AI Studio에서 Gemini API 키 발급(새 프로젝트 > API 키 생성). 환경 변수에 GEMINI_API_KEY 추가.

채팅 연동: 공식 문서(developers.google.com/generative-ai)에서 API 엔드포인트 복사해 AI에게 "Gemini API로 채팅 구현. 스트리밍 응답, 문서 참고" 프롬프트. 입력 시 실시간 응답 나와요. 예: "오늘 날씨 어때?" 물으면 Gemini가 답변. 버그(모델 에러) 시 문서 봐서 고치세요. 데이터 저장 위해 Supabase DB 스키마: conversations 테이블( id, user_id, title, created_at ), messages 테이블( id, conversation_id, role, content, timestamp ). AI에게 "이 스키마로 DB 저장 구현. Supabase 서비스 롤 키 사용" 지시. 서비스 키는 서버 전용(환경 변수에 SERVICE_ROLE_KEY), 절대 Git에 올리지 마세요. 노출되면 해킹 위험!

테스트: 새 채팅 시작, DB에 저장 확인(Supabase 테이블 에디터). 리프레시 후 히스토리 유지. 버그(중복 저장) 시 AI 고침. 팁: 한국어 입력 버그는 UTF-8 인코딩 확인. 대안: Firebase Authentication 쓰면 구글 연동 더 쉽지만, Supabase가 DB 통합으로 편해요. 이 섹션으로 인증+기능 완성, SaaS의 70%가 잡혀요. 초보자 여러분, API 키 관리만 조심하면 돼요!

결제 시스템 연동, 배포, 보안 설정

바이브코딩 SaaS 만들기 마무리로 결제는 '수익 문'이에요. 기능 있어도 돈 못 받으면 의미 없죠. 초보자분들, 결제 시스템은 복잡해 보이지만 Paddle처럼 간단한 걸 쓰면 돼요. Paddle은 Stripe 대안으로, 사업자 등록 없이 무료 시작 가능하고, 구독 관리 쉬워요. 토스페이먼츠는 한국 특화지만 유료, Stripe는 미국 중심. 왜 Paddle? 샌드박스(테스트 모드)로 실제 돈 안 들고 실험할 수 있어요.

Paddle 계정 생성 후, 샌드박스 모드에서 제품 추가: Free(기본), Pro($9.99/월, 100회 제한 해제? 아니, 무제한으로 조정), Unlimited($29.99/월). 구독 시나리오 미리 설계하세요: 신규 가입(프리 기본), 업그레이드(Pro/Unlimited), 다운그레이드, 취소. DB 스키마: subscriptions( user_id, paddle_subscription_id, plan, status, current_period_end ), usage( user_id, count ). AI에게 "Paddle 결제 연동. Pricing 페이지 3플랜 카드, 체크아웃, 웹훅으로 구독 업데이트. 프롬프트: 제품 ID [복사], API 토큰 [생성]" 지시. Pricing 페이지: /pricing에서 플랜 선택 시 Paddle 체크아웃 리디렉트.

웹훅 설정: Paddle 대시보드 > Webhooks > 새 엔드포인트(배포 후 URL). 웹훅은 Paddle이 "결제 성공!" 알림 보내는 거예요. 로컬 테스트 위해 ngrok(터널링 도구) 써서 공용 URL 만듦. AI가 webhook 핸들러 구현: subscription_created 이벤트 시 DB 업데이트, 사용자 플랜 변경. 테스트: Pricing > Pro 선택 > 테스트 카드(4242 4242 4242 4242) 입력. 성공 후 대시보드에서 플랜 변경 확인. 버그(404 에러) 시 external_id 전달 확인. 팁: 모든 시나리오(취소, 리뉴얼) 테스트하세요. 왜? 구독은 장기 수익원이라 초기 설계 잘못하면 유지비 폭발.

배포는 Vercel로! Git 푸시 후 vercel.com에서 새 프로젝트 임포트. 환경 변수(Supabase 키, Gemini 키, Paddle 토큰, ENCRYPTION_MASTER_KEY) 입력. 'Deploy' 클릭, 1-2분 후 도메인(예: gemini-wrapper.vercel.app) 발급. Supabase/Google Console에 도메인 추가(redirect URI 업데이트). 이제 웹훅 URL로 Vercel 도메인 설정. 테스트: 새 계정 로그인 > 업그레이드 > 결제 > 플랜 변경 확인. 고객 포털(Paddle) 링크로 구독 관리 UI 추가: AI에게 "Billing 페이지: 현재 플랜, 다음 결제일, Paddle 포털 버튼. 사이드바에 메뉴" 지시.

보안은 프로덕션 필수! 데이터 암호화로 사용자 대화 보호. Supabase에 encryption 테이블 추가. AI에게 "암호화 모듈 구현: AES-256, 마스터 키로 content 암호화/복호화. 프롬프트: 키 관리, DB 업데이트" 지시. 환경 변수에 ENCRYPTION_MASTER_KEY(랜덤 생성, .env만 저장). 새 대화 시 content가 암호화 저장(Supabase 테이블에서 "encrypted_value" 확인). 왜 중요한가? GDPR 준수로 법적 문제 피하고, 사용자 신뢰 쌓아요. 대안: HashiCorp Vault로 키 관리, 하지만 초보엔 과해요. 팁: 프로덕션 전 SEO(메타 태그 추가), 에러 모니터링(Sentry 연동) 고려. Paddle 프로덕션 전환만 하면 실제 판매 가능!

이 가이드로 바이브코딩 SaaS 완성! 43분 만에 동작 앱, 초보자도 가능해요. 노션 링크 따라 프롬프트 복사해 직접 해보세요.