바이브 코딩으로 3주 만에 SaaS 개발 성공? 비결 완벽 공개!
게시일:
작성자: 자청의 유튜브 추출기
AI로 3주 만에 서비스 만들기! 🚀
안녕하세요! 오늘은 제가 AI 코딩만으로 3주 만에 뚝딱 만든 서비스와 그 과정을 여러분께 소개해 드릴게요. 아직 베타 버전이라 완벽하진 않지만, 제 경험이 여러분께 조금이나마 도움이 되었으면 좋겠어요. 특히 AI 코딩하다 막히거나 팁이 필요한 분들께 유용할 거예요!
1. 기획은 AI에게 맡겨봐! ✍️
- 제미나이 활용: AI는 한 번에 많은 텍스트를 이해할 수 있어서 기획 단계에서 정말 유용했어요. 그냥 "서비스 만들어줘" 하면 기본적인 틀만 잡아주지만, 자세한 개발 문서(가이드)를 만들어 달라고 요청하면 훨씬 구체적인 결과물을 얻을 수 있어요.
- 나만의 프롬프트: 저는 "PD 작성 가이드" 같은 프롬프트를 만들어서 제미나이에게 서비스 설명을 주고, 이걸 바탕으로 프로젝트 계획, 마스터플랜, 구현 계획서, 디자인 가이드라인, 앱 흐름, 페이지 역할 정의, 구현 지침까지 꼼꼼하게 만들었어요.
- 클로드 코드 활용: 이렇게 만들어진 문서를 클로드 코드에 붙여 넣고 "완성된 MD 파일 만들어줘"라고 요청하면, 클로드 코드가 자체 규칙에 따라 기획서를 만들어주고 이걸 시작으로 개발을 진행했답니다.
2. 로그인 기능, 클러크로 빠르게! 🔑
- 슈퍼베이스 대신 클러크: 로그인 인증은 슈퍼베이스로도 만들 수 있지만, 더 빠르게 하려면 클러크(Clerk)라는 웹 서비스를 이용하는 게 좋아요. 이미 만들어진 UI를 사용해서 설치만 하면 로그인 서비스가 뚝딱 만들어져요.
- 간단한 설정: 클러크에서 애플리케이션 이름을 정하고, 구글, 페이스북, 애플 등 원하는 로그인 방식을 선택하면 끝!
- 설치 팁: 클러크 개발 문서를 보거나, 제 경우처럼 클로드 코드에게 "클럭.md 파일을 만들고 내용을 붙여 넣어서 설치해줘"라고 요청하면 로그인 화면을 쉽게 완성할 수 있어요.
3. 데이터베이스, 슈퍼베이스와 AI의 조합! 💾
- 슈퍼베이스: 데이터베이스는 슈퍼베이스(Supabase)를 사용했어요. 데이터베이스 구축이 AI 코딩에서 가장 어려운 부분 중 하나인데, AI와 함께 개선해 나가는 게 중요해요.
- AI에게 DB 보안점 물어보기: 제 DB 정보를 제미나이에게 주고 "보안점이나 약점이 뭐야?"라고 물어보면, 부족한 부분과 해결 방법을 알려줘요. 이 내용을 바탕으로 클로드 코드에게 "이 내용이 좋아?"라고 물어보고, 다시 제미나이에게 "이 답변에 대해 어떻게 생각해?"라고 물어보면서 DB를 계속 보완했어요.
- 마이그레이션 활용: MVP를 만들 때는 MCP를 사용하지 않고, 슈퍼베이스의 마이그레이션 기능을 활용했어요. AI에게 "마이그레이션 파일 만들어줘"라고 요청하면 파일이 생성되고, 이걸 SQL 에디터에 붙여 넣고 실행하면 데이터가 구축돼요.
- DB 스키마 복사: 나중에 DB를 확장하거나 테이블을 만들 때, 슈퍼베이스의 DB 스키마(SQL)를 복사해서 클로드 코드에게 붙여 넣고 "이걸 바탕으로 문제점이나 개선할 부분을 구현해줘"라고 요청하면 훨씬 수월해요.
4. 결제 시스템, 폴라로 해결! 💳
- 해외 서비스 폴라: 국내 PG사는 심사 기간이 길어서 빠르게 결제 시스템을 구축하기 어려워요. 저는 폴라(Pola)라는 해외 서비스를 이용했는데, 수수료는 좀 비싸지만 MVP 제작에는 기능 구현이 더 중요했기 때문에 만족했어요.
- 상품 등록 및 고객 관리: 폴라에서 상품을 만들고 결제 방식을 설정하면 상품이 등록되고, 고객 관리도 가능해요.
- 폴라 문서 활용: 폴라 설정이 어려울 수 있는데, 폴라 공식 문서를 참고하면 구독 관리 시스템 같은 복잡한 기능도 만들 수 있어요. 저는 이 문서를 클로드 코드에게 주고 "이 문서를 참고해서 결제 시스템 구축해줘"라고 요청했어요.
- 웹훅과 앵그록: 폴라에서 결제나 구독 변경이 있을 때 정보를 받아오려면 웹훅(Webhook)이 필요한데, 개발 환경에서는 가상 주소인 로컬 호스트만 사용 가능해서 테스트가 어려워요. 이때 앵그록(ngrok)이라는 서비스를 이용하면 가상 배포 환경을 만들어 웹훅 테스트를 할 수 있어요. 앵그록 설치도 어렵지 않으니 꼭 활용해 보세요!
5. 배포는 벌셀로! 🌐
- 벌셀: 최종적으로 서비스 배포는 벌셀(Vercel)을 이용했어요. 넥스트제이스(Next.js)와 궁합이 좋아서 빠르고 쉽게 배포할 수 있었어요.
6. 협업과 코드 관리, 깃허브와 코드 레빗! 🤝
- 깃허브: 코드를 안전하게 저장하고 다른 컴퓨터에서도 불러올 수 있도록 깃허브(GitHub)를 사용했어요. AI가 코드를 멋대로 바꿀 때도 깃허브에 저장해두면 백업해서 복구할 수 있어요.
- 코드 레빗: 혼자 개발하다 보면 코드 리뷰가 어려운데, 코드 레빗(Code Rabbit)이라는 서비스를 이용하면 AI가 제 코드를 리뷰해주고 개선점을 제안해줘요. 제안된 내용을 그대로 복사해서 AI에게 적용해달라고 요청하면 편리해요. (2주 무료!)
💡 AI 코딩, 이것만은 꼭 기억하세요!
- 명확한 지시: AI에게 "이거 고쳐줘"라고만 하면 안 돼요. 어떤 문서를 참고해서 어떤 부분을 고쳐야 하는지 명확하게 지시하는 게 중요해요. 그래야 오류 해결에 시간을 낭비하지 않아요.
- 꾸준한 학습: AI에게 계속 질문하고 배우면서 포기하지 않으면, 여러분도 충분히 멋진 서비스를 만들 수 있어요! 저는 AI를 활용해서 164개의 프로젝트를 만들었고, 그중 일부는 실제로 수익까지 발생하고 있어요.
- 커뮤니티 활용: 저와 같은 서비스를 만들고 싶거나 노하우를 얻고 싶다면, 제가 운영하는 커뮤니티에 오세요! 평생 회원제로 운영되니 서둘러 신청하세요!
오늘 영상이 여러분의 AI 코딩 여정에 도움이 되었기를 바랍니다. 좋아요, 구독, 알림 설정 잊지 마세요! 다음 영상에서 만나요! 👋