16개월 동안 4개의 제품을 '바이브코딩'으로 만든 경험: SaaS 망치지 않는 법

context: 저는 지난 16개월 동안 개발자로서 2개의 스타트업과 일했습니다. 시작할 때는 코드 대부분을 이해할 수 없었습니다. 결국 4개의 제품을 만들게 되었는데, 3개는 더 큰 SaaS 제품군에 속해 있고, 나머지 하나는 프리미엄 UI 구축을 돕는 작은 제품입니다.

제 방식이 최고라고 주장하는 것은 아니지만, 지난 1.5년 동안 매일 6시간 이상 코딩한 개인적인 경험을 바탕으로 합니다. 아직 배울 것이 많습니다.

제 주된 의견은 이렇습니다: 만약 아무런 전략도 없고 무엇을 하는지 전혀 모르는 상태로 시작한다면, 당신의 제품은 분명히 AI 쓰레기(ai slop)가 될 것입니다.

제가 워크플로우를 구성하는 방법은 다음과 같습니다:

1. 지루하더라도 문서화부터 시작하세요

분명히 말씀드리자면: Claude, Codex, Cursor, Lovable 등은 제품을 심층적으로 설명하는 문서가 없으면 당신의 제품을 이해하지 못합니다. SaaS가 무엇인지에 대해 짧은 '요약'만 제공하면 AI는 10분 안에 잊어버릴 것입니다. 저는 보통 문서를 다음과 같이 구성합니다:

• 제품의 타겟은 누구인가?
• 어떤 문제를 해결하는가?
• MVP에는 무엇이 포함되는가?
• 주요 사용자 흐름 (온보딩 과정, 결제 등)
• 핵심 화면 (설정, 결제, 기능#1, 기능#2 등)
• 아키텍처
• 시각적 방향
• 제약 사항

500페이지가 필요한 것은 아닙니다. AI에게 당신이 무엇을 하고 있는지 맥락을 제공할 정도면 충분합니다.

2. 제품의 외관에 대해 충분히 조사하세요

사람들은 보통 AI에게 "이거 만들어줘"라고만 하고 어떻게 보여야 할지에 대한 단서도 주지 않습니다. 저는 제품을 보기만 해도 2초 만에 '바이브코딩'으로 만들어졌는지 알 수 있습니다.

개발하기 전에 해당 카테고리를 철저히 조사하세요:

• 경쟁사 10곳을 살펴보세요: 온보딩, 페이지 구조, 폰트, 간격, 카드, 신뢰 신호 등 생각할 수 있는 모든 것.
• Pinterest, Mobbin, 21st.dev 등에서 스크린샷을 몇 개 확보하세요.

목표는 제품에 프리미엄 느낌을 주는 것입니다. 사용자가 당신의 제품이 고품질이라고 느끼면 더 신뢰하게 됩니다.

3. 컴포넌트 시스템을 일찍 구축하세요

AI가 SaaS의 모든 것을 처음부터 만들게 두면 제품은 서서히 엉망이 될 것입니다.

레퍼런스에서 시작하여 모든 화면에서 사용할 컴포넌트를 구축하세요:

• 폰트
• 색상
• 간격
• 그림자
• 버튼
• 입력창
• 카드
• 모달
• 차트
• 내비게이션

등등.

한 번 구축하고 브랜딩을 적용하면, AI가 100% 망쳐놓을 모든 페이지를 수정하는 대신 시간의 50%를 절약할 수 있습니다.

예산이 조금 있다면 Untitled UI나 를 사용하여 시간을 많이 절약할 수 있습니다. 특히 디자이너가 아니라면 더욱 그렇습니다.