43분 만에 SaaS 끝! 바이브코딩 인증·결제·배포 마스터 가이드 🚀

AI 코딩으로 나만의 서비스 만들기: 로그인, 결제, 배포까지 한 번에!

안녕하세요! 오늘은 AI 코딩 도구를 이용해서 나만의 서비스를 뚝딱 만드는 방법을 알려줄게요. 로그인, 결제, 배포까지 전부 다 할 수 있으니, 아이디어만 있다면 누구나 따라 할 수 있을 거예요!

1. 개발 환경 세팅: AI와 함께 시작!

• 코딩 에디터: 구글이 만든 엔티그래비티(NtiGravity)를 추천해요. VS Code랑 비슷해서 익숙할 거예요. AI 코딩 에이전트(클라우드 코드, 제미나이, ChatGPT 등)를 쓸 수 있어서 코딩이 훨씬 쉬워져요.
• 프로젝트 생성: 터미널을 열고 Next.js 프로젝트를 만들 거예요. 간단한 프로젝트로 시작해서 로그인, 결제, 배포에 집중할 거예요.
  bash npx create-next-app@latest my-app --template typescript
• 코드 정리: AI에게 코드를 깔끔하게 정리해달라고 부탁할 수 있어요.
• 로컬 서버 실행: npm run dev 명령어로 로컬 서버에서 만든 서비스를 볼 수 있어요. (http://localhost:3000)

2. Git 연동: 코드를 안전하게 관리하자!

• Git이란? 게임으로 치면 세이브 포인트 같은 거예요. 코드가 잘못됐을 때 이전 상태로 되돌릴 수 있어서 꼭 필요해요.
• GitHub: GitHub에 새 프로젝트를 만들고, 코드를 푸시해서 관리해요.
  bash git init git add . git commit -m "Initial commit" git branch -M main git remote add origin [GitHub 저장소 URL] git push -u origin main

3. 랜딩 페이지 만들기: 첫인상이 중요해!

• 디자인 참고: 무료 디자인 사이트 21.co에서 마음에 드는 디자인을 골라요.
• AI에게 맡기기: AI에게 "이런 랜딩 페이지 만들어줘!"라고 요청하면 뚝딱 만들어줘요. 처음부터 완벽하게 하려고 하지 말고, 일단 돌아가게 만든 후 나중에 디자인을 다듬는 게 좋아요.

4. 로그인 기능 구현: 구글 로그인으로 쉽게!

• 구글 로그인 추천: 직접 로그인 기능을 만드는 것보다 구글 로그인을 연동하는 게 훨씬 쉬워요.
• 슈퍼베이스(Supabase) 활용: 데이터베이스와 인증 기능을 함께 제공하는 슈퍼베이스를 사용할 거예요. 무료 플랜도 있어서 좋아요.
• 구글 클라우드 콘솔 설정:
  1. 구글 클라우드 콘솔에서 프로젝트를 만들고 API 키를 받아와요.
  2. 슈퍼베이스 프로젝트를 만들고, 구글 로그인 프로바이더를 설정해요.
  3. 구글 클라우드 콘솔에서 받은 API 키와 슈퍼베이스에서 받은 리디렉트 URI를 연결해요.
• 슈퍼베이스 MCP 사용: AI가 슈퍼베이스 관련 코드를 자동으로 만들어줘서 편리해요.
• AI에게 로그인 구현 요청: "슈퍼베이스 구글 로그인 구현해줘. 로그인 버튼, 전역 로그인 상태 관리, 대시보드 접근 차단, 로그아웃 기능 포함"이라고 요청해요.
• 환경 변수 설정: API 키 같은 중요한 정보는 .env 파일에 저장해서 관리해요.

5. 채팅 기능 구현: 제미나이 AI와 대화하기!

• 제미나이 API 연동: 구글 AI 스튜디오에서 제미나이 API 키를 받아와요.
• AI에게 채팅 기능 구현 요청: "제미나이 API를 사용해서 채팅 기능을 구현해줘. API 스트리밍 응답을 사용하고, 이 문서를 참고해."라고 요청해요.
• 데이터베이스 저장: 슈퍼베이스를 이용해서 대화 내용과 메시지를 저장해요.
  • 데이터베이스 스키마: 대화 내용, 사용자 정보, 메시지 등을 저장할 테이블을 만들어요.
  • 슈퍼베이스 서비스 롤 키: 데이터베이스에 접근할 수 있는 열쇠 같은 거예요. 절대 노출되면 안 돼요!
• 버그 수정: AI가 코드를 잘못 짤 때도 있어요. 오류 메시지를 보고 AI에게 고쳐달라고 요청하면 돼요.

6. 결제 시스템 구축: 구독 서비스 만들기!

• 결제 서비스 선택: 토스, 스트라이프, 폴러(Folar) 등 다양한 서비스가 있어요. 초보자에게는 폴러가 쉬워요.
• 구독 플랜 설계: 무료 플랜, 프로 플랜(횟수 제한), 무제한 플랜 등 구독 플랜을 설계해요.
• 폴러 설정:
  1. 폴러에서 프로젝트를 만들고, 구독 플랜에 해당하는 프로덕트를 추가해요.
  2. 폴러 API 토큰을 발급받아요.
• AI에게 결제 페이지 구현 요청: "폴러 결제를 연결해서 프라이싱 페이지와 결제 페이지를 만들어줘."라고 요청해요.
• 웹훅(Webhook) 설정: 결제가 완료되면 우리 서비스에 알림을 보내주는 기능이에요. 로컬 호스트에서는 테스트하기 어려우니 배포 후에 설정해요.

7. 배포: 나만의 서비스를 세상에 공개!

• 벌셀(Vercel) 사용: 프로젝트를 쉽게 배포할 수 있는 서비스예요.
• 프로젝트 연동 및 환경 변수 설정: GitHub와 벌셀을 연동하고, 필요한 환경 변수를 설정해요.
• 배포: git push 명령어로 코드를 올리면 벌셀에서 자동으로 배포해줘요.
• 웹훅 설정: 배포된 서비스의 도메인 주소를 폴러 웹훅에 등록해요.

8. 보안 강화: 데이터 암호화

• 데이터 암호화: 사용자 데이터를 안전하게 보호하기 위해 암호화를 적용해요.
• AI에게 암호화 구현 요청: "데이터베이스에 저장되는 데이터를 암호화해줘."라고 요청해요.
• 암호화된 데이터 확인: 암호화된 데이터를 보면 V1 같은 접두어가 붙어있고, 내용을 알아볼 수 없게 돼요.

마무리

이렇게 아이디어만 있다면 로그인, 결제, 배포까지 전부 다 할 수 있는 서비스를 만들 수 있어요! 오늘 배운 내용을 바탕으로 여러분만의 멋진 서비스를 만들어보세요.

더 자세한 내용과 사용한 프롬프트는 설명란 링크의 노션 페이지에서 확인할 수 있어요!