Claude를 사용하여 전체 SaaS 제품을 '바이브 코딩(vibe-coded)'한 방법

저는 React, HTML, CSS, JS에 익숙한 프론트엔드 개발자입니다. 하지만 처음부터 끝까지 전체 제품을 만들어 본 적은 없었습니다. 백엔드(Backend) 경험도, 결제 연동 경험도, 배포 지식도 없었습니다. 오직 프론트엔드뿐이었죠. 그래서 저는 진짜 무언가를 만들어 보기로 결심했습니다. 튜토리얼도 아니고, 클론 코딩도 아닙니다. 인증(Auth), 결제, PDF 생성, 커스텀 도메인, 그리고 실제 사용자가 있는, 실제로 배포된 라이브 SaaS 제품 말입니다. 그 결과물은 인도 프리랜서들을 위한 GST 인보이스 생성기인 Invoya입니다. 현재 invoya.in 에서 서비스 중입니다. 제가 Claude를 공동 개발자로 활용하여 혼자서 어떻게 이 일을 해냈는지 정확히 알려드리겠습니다.

제가 선택한 기술 스택:

• React + Vite + Tailwind CSS — 익숙한 영역
• Firebase Auth + Firestore — 백엔드 불필요
• jsPDF — 클라이언트 사이드(Client-side) PDF 생성
• Razorpay — 결제
• Vercel — 배포
• EmailJS — 백엔드 없는 문의 양식 이메일 발송

TypeScript는 사용하지 않았습니다. 백엔드 서버도 없습니다. 모든 것이 클라이언트 사이드와 Firebase로 구성되었습니다.

Claude와 실제로 협업한 방식:
저는 단순히 Claude에게 코드를 써달라고 요청하지 않았습니다. 제 옆에 앉아 있는 시니어 개발자처럼 활용했습니다. 제가 무엇을 만들고 싶은지 설명하면, 우리는 함께 예외 상황(Edge cases)을 고민했고, 저는 구현하기 전에 모든 것을 검토했습니다. 저는 이 프로젝트에서 비즈니스 분석가, UI/UX 디자이너, 개발자, 프로젝트 매니저, 테스터, QA, 투자자, 그리고 최종 사용자라는 모든 역할을 수행했습니다. Claude는 제가 이 모든 역할을 수행할 수 있도록 사고 과정을 도와주었습니다.

제가 자랑스럽게 생각하는 점들:
제품 전체에 걸쳐 UI, UX, 예외 상황, 기능, 그리고 비용 등 모든 세부 사항에 집착했습니다.

• 모든 페이지의 UI/UX — 모든 화면은 실제 사용자를 염두에 두고 처음부터 설계되었습니다. 깔끔한 레이아웃, 모바일 퍼스트(Mobile-first), 일관된 브랜드 색상, 호버 상태(Hover states), 전환 효과(Transitions), 빈 상태(Empty states), 그리고 로딩 상태까지. 어떤 것도 미완성으로 남겨두지 않았습니다.
• 철저하게 고민한 예외 상황(Edge cases) — 인보이스 날짜보다 이전으로 마감일을 설정할 수 없도록 했습니다. 음수 금액은 차단됩니다. 인보이스 한도는 달력 기준 월이 아닌 롤링 30일 기준입니다. 만료된 Pro 플랜은 자연스럽게 이전 상태로 복구됩니다. 실제 사용자가 맞닥뜨릴 수 있는 모든 시나리오를 사용자가 겪기 전에 미리 고려했습니다.
• 프리랜서의 문제를 실제로 해결하는 기능들 — 대시보드는 단순한 목록이 아닙니다.

KPI 카드, 연체 감지, 검색, 정렬, 그리드 및 리스트 뷰, 그리고 페이지네이션 (pagination)이 포함되어 있습니다. 유료 제품에서 기대할 수 있는 기능들입니다. 결제 알림 (Payment reminders) — 프리랜서가 겪는 난처한 문제를 해결하기 위해 — 고객에게 결제를 독촉하는 것은 불편한 일입니다. 대부분의 프리랜서는 이를 피합니다. 그래서 저는 5가지 알림 유형과 3가지 톤(친근함, 전문적임, 단호함)을 갖춘 알림 시스템을 구축했습니다. 송장 (invoice) 상세 정보가 자동으로 채워지며, 클릭 한 번으로 WhatsApp이나 이메일로 보낼 준비가 되어 있습니다. 이 기능이 존재하는 이유는 그 불편함이 실제로 존재하기 때문입니다. 무언가 불가능할 때는 대안을 찾았습니다. OAuth 리다이렉트 (redirect)가 모바일에서 빈 화면을 유발했기에, 팝업 (pop-up) 방식으로 전환했습니다. 백엔드 (backend)가 없다는 것은 서버 이메일을 사용할 수 없음을 의미했기에, EmailJS를 사용하여 무료로 처리했습니다. 모든 제약 사항에는 해결 방법이 있었습니다. 최소한의 비용으로 만든 전문적인 제품 — Firebase 무료 티어 (free tier), Vercel 무료 호스팅, EmailJS 무료 티어, jsPDF 오픈 소스 (open source). 유일한 실제 비용은 도메인과 Razorpay 수수료뿐이었습니다. 거의 비용을 들이지 않고 완전히 라이브 상태인 SaaS 제품을 만든 것입니다. 대부분의 사람이 눈치채지 못할 작은 디테일들이지만

만약 당신이 첫 번째 완성형 제품을 구축하는 것을 고민하고 있는 프론트엔드 개발자(frontend developer)라면 — 바로 시작하세요. 간단한 문제를 선택하고, 본인이 가장 익숙한 기술 스택(stack)을 고른 뒤, 부족한 부분은 AI로 채우세요. 목표는 완벽한 제품을 만드는 것이 아닙니다. 실체가 있는 무언가를 완성하는 것입니다. Invoya는 invoya.in에서 라이브 상태로 운영 중입니다 — 인도 프리랜서와 소상공인을 위한 무료 GST 인보이스(GST invoice) 생성기입니다.