🚀 Claude와 함께 0→1로 웹서비스 런칭한 솔로 개발자의 리얼 후기 [바이브 코딩 후기]

소개

"코드 한 줄도 직접 안 짜고 AI랑 바이브 코딩으로 진짜 서비스 런칭이 가능할까?"

이런 궁금증에서 시작된 프로젝트였습니다. 백엔드 개발자로 일하면서도 항상 "혼자서 처음부터 끝까지 완성된 서비스를 만들어보고 싶다"는 생각이 있었어요. 하지만 현실적으로 프론트엔드 디자인, 기획, 배포, 법적 문서 작성까지... 혼자 다 하기엔 너무 많은 영역이 필요했죠.

그래서 시도한 것이 Claude + MCP로 AI와의 저 혼자서 100% 페어 프로그래밍으로 실제 운영 중인 웹서비스를 만드는 것이었습니다.

결과: timetrash.net - "시간낭비 마스터"라는 실시간 멀티플레이어 웹게임을 성공적으로 런칭했습니다! 🎉

개발 기간: 정확히 7일 (2025.5.24 → 5.31, 총 100개+ 커밋), 6월 1일 배포 및 런칭
나의 코딩: 0줄 (정말로 한 줄도 직접 안 짰음)
최종 결과: 26개 컴포넌트, Firebase 실시간 연동, 완전한 상용 서비스

진행 방법

🛠️ 사용한 도구

• 주 개발 파트너: Claude Sonnet 4

• 기술 스택: React 18.2 + Vite + Firebase + TailwindCSS

• 배포: Vercel (GitHub 자동 배포)

• 개발 방식: 100% AI 페어 프로그래밍

💬 핵심 프롬프트 패턴들

1. 초기 기획 단계

"유머러스한 시간낭비 측정 웹사이트를 만들고 싶어. 
실시간으로 여러 사용자가 접속해서 누가 더 오래 머무는지 경쟁하는 게임처럼.
전체적인 기획안과 기술 스택을 제안해줘."

2. 점진적 기능 개발

"지금 타이머는 작동하는데, 여기에 실시간 채팅 기능을 추가하고 싶어.
Firebase 실시간 데이터베이스를 사용해서 사용자들이 메시지를 주고받을 수 있게 해줘.
기존 코드는 건드리지 말고 새로운 컴포넌트로 만들어줘."

3. 버그 수정 요청

"랭킹 시스템에서 월간 데이터가 2명밖에 안 나와. 
주간은 150명인데 월간이 2명이면 이상하잖아?
디버깅해서 문제점을 찾고 수정해줘."

4. UI/UX 개선

"포켓몬 골드 버전 같은 레트로 픽셀 느낌으로 전체 디자인을 바꿔줘.
Galmuri 폰트 사용하고, 색상은 금색/주황색 위주로.
기존 기능은 그대로 두고 스타일만 완전히 바꿔줘."

5. 배포 및 최적화

"개발자 콘솔에 디버깅 정보들 싹 빼줘. 정신사납다.
Production 빌드에서는 console.log가 전혀 나오지 않게 하고,
개발 모드에서만 디버깅 정보가 나오도록 시스템을 만들어줘."

📸 개발 과정 (초기 버전 스크린샷을 못남긴게 너무 아쉬워요 ㅠㅠ)

초기 버전 (단순 타이머)

┌─────────────────┐
│   타이머: 05:23  │
│   간단한 메시지   │
└─────────────────┘

중간 버전 (기능 추가)

┌──────────┬──────────┬──────────┐
│  타이머   │   광고    │  랭킹     │
│  메시지   │          │  TOP 20  │
│  BGM     │   채팅    │          │
└──────────┴──────────┴──────────┘

최종 버전

ALT

한국 캐릭터가있는 웹 사이트의 스크린 샷

🎮 시간낭비 마스터
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏰ 실시간 타이머 (색상 변화)
💬 글로벌 실시간 채팅 (2단계 권한)
🏆 TOP 20 랭킹 시스템
🎵 BGM + 축하 이펙트
😄 다양한 유머러스한 비난 메시지
📱 반응형 디자인

🔄 개발 프로세스

1단계: 아이디어 구체화

• Claude와 브레인스토밍

• 기술 스택 결정

• MVP 기능 정의

2단계: 점진적 개발 (가장 중요!)

Day 1 (5/24): 기본 타이머 + Firebase 연동 
Day 2 (5/25): 실시간 채팅 + 랭킹 시스템  
Day 3 (5/26): UI 디자인 개선 + 축하 이펙트
Day 4 (5/27): BGM + 메시지 시스템 고도화
Day 5 (5/28): 버그 수정 + 성능 최적화  
Day 6 (5/29): 법적 문서 + SEO 최적화
Day 7 (5/30): 보안 강화 + 최종 배포
Day 8 (5/31): 콘솔 정리 + 런칭 완료

3단계: 지속적인 개선

• 사용자 피드백 반영

• 성능 최적화

• 새로운 기능 추가

💡 핵심 프롬프팅 팁

1. 구체적인 요구사항 명시

❌ "채팅 기능 만들어줘"
✅ "Firebase 실시간 DB로 채팅 만들되, 일반 메시지와 프리미엄 메시지 2단계로 나누고, 
    중복 방지 시스템까지 포함해서 만들어줘"

2. 기존 코드 보존 요청

"기존 타이머 기능은 절대 건드리지 말고, 
새로운 컴포넌트로 추가해서 App.jsx에서 조합해줘"

3. 점진적 기능 확장

"일단 기본적인 채팅부터 만들고, 
그 다음에 권한 시스템, 그 다음에 UI 개선 순서로 단계별로 해줘"

결과와 배운 점

🏆 성과들

기술적 성과:

• 26개 모듈화된 React 컴포넌트 - 체계적인 구조를 만들고자 노력함

• Firebase 실시간 연동 - 채팅, 랭킹, 동시접속자 모든 것이 실시간 (거의 1초 이내 반영)

• 반응형 디자인 - 모바일부터 4K까지 완벽 대응

• 프로덕션 레벨 최적화 - 번들 분할, 콘솔 로그 제거, 성능 최적화

• 법적 요구사항 완비 - 개인정보처리방침, 이용약관, SEO 최적화

사용자 경험:

• 실시간 멀티플레이어 - 전 세계 사용자들과 동시 플레이

• 게임화된 요소 - 랭킹, 업적, 축하 이펙트

• 중독성 있는 재미 - 50개 유머러스한 메시지, BGM, 실시간 채팅

💎 나만의 꿀팁들

1. AI와의 협업 노하우

• 점진적 개발이 핵심: 한 번에 모든 기능을 요구하지 말고, 작은 단위로 계속 확장

• 기존 코드 보존 요청: "기존 코드는 건드리지 말고" 라는 문구를 항상 포함

• 구체적인 예시 제공: 추상적인 요구사항보다는 구체적인 기능 명세

2. 프로젝트 관리

• 문서화 필수: Claude가 만든 모든 중요한 결정과 변경사항을 문서로 기록

• 버전 관리: Git commit 메시지를 상세하게 작성해서 언제든 롤백 가능하게

• 점진적 배포: 로컬 → 개발 → 프로덕션 단계별 테스트

3. 기술적 팁

• Firebase 무료 플랜으로 충분: 실시간 기능까지 무료로 구현 가능

• Vercel 자동 배포: GitHub와 연동하면 push만으로 자동 배포

• 반응형은 필수: 모바일 사용자가 50% 이상 (하지만 PC에 최적화되어 있어요)

🚧 겪었던 시행착오들

1. 과도한 욕심 (첫 2주)

• 처음에 "완벽한 게임"을 만들려다가 복잡해짐

• 해결: MVP부터 시작해서 점진적으로 확장

2. Firebase 데이터 구조 설계 실수

• 실시간 채팅에서 중복 메시지 문제 발생

• 해결: useRef와 Set을 활용한 중복 방지 시스템 구축

3. UI 일관성 부족

• 기능 추가할 때마다 디자인이 뒤죽박죽

• 해결: CSS 변수 시스템으로 일관된 디자인 시스템 구축

4. 성능 최적화 미흡

• 개발 중에는 괜찮았는데 배포 후 로딩 속도 문제

• 해결: 번들 분할, 코드 스플리팅, 이미지 최적화

❓ 도움이 필요한 부분들

현재 고민 중인 것들:

• 사용자 증가 시 Firebase 비용 최적화 방법

• PWA 변환을 통한 모바일 앱 경험 개선

• 다크 모드 구현 시 일관된 디자인 시스템 유지 방법

🚀 앞으로의 계획

단기 목표 (1개월 내):

• 다크 모드 구현 (포켓몬 스타일 유지)

• 사운드 효과 시스템 추가

• PWA 변환으로 모바일 앱처럼 설치 가능하게

중기 목표 (3개월 내):

• 업적 시스템 (시간별, 메시지별 업적)

• 소셜 기능 강화 (이모지 반응, VIP 시스템)

• 성능 최적화 및 사용자 분석 도구 도입

장기 목표 (6개월 내):

• 다국어 지원 (영어, 일본어)

• 모바일 전용 기능 추가

• 수익화 모델 검토 (광고, 프리미엄 기능)

🎯 다른 개발자들에게 하고 싶은 말

"바이브 코딩, AI와 협업 프로그래밍은 정말 가능하다!, 단 기록은 필수!"

처음엔 반신반의했지만, 실제로 해보니 혼자서는 절대 불가능했을 수준의 서비스를 만들 수 있었어요. 특히 백엔드 개발자로서 프론트엔드 디자인이나 UX에 자신이 없었는데, Claude가 이런 부분을 완벽하게 보완해줬습니다.

핵심은 "AI를 도구로 활용하되, 방향성과 아이디어는 내가 제시하는 것"이에요. AI가 모든 걸 다 해주는 게 아니라, 내가 원하는 걸 정확히 전달하고 점진적으로 발전시켜 나가는 과정에서 진짜 가치가 나오는 것 같습니다.

개발자로서의 역할이 사라지는 게 아니라, 오히려 더 본질적인 부분 (기획, 아키텍처, 사용자 경험)에 집중할 수 있게 되는 것 같아요.

도움 받은 글

• Claude 공식 문서: 프롬프트 엔지니어링 가이드

• Firebase 공식 문서: 실시간 데이터베이스 설계 패턴

• Vercel 배포 가이드: React 앱 자동 배포 설정

• 포켓몬 골드 색상 팔레트: 레트로 게임 UI 디자인 참고

특히 도움이 되었던 프롬프팅 전략:

• "기존 코드는 건드리지 말고" 패턴

• "점진적 기능 확장" 방식

• "구체적인 예시 제공" 기법

🎮 실제 결과물: timetrash.net
직접 체험해보시면 정말 AI만으로 이런 퀄리티가 나올 수 있구나 하는 걸 느끼실 거예요!

📊 최종 통계:

• 개발 기간: 7일 (집중 개발)

• 내가 직접 작성한 코드: 0줄

• 최종 컴포넌트 수: 26개

• Firebase 연동: 완벽

• 사용자 경험: 상용 서비스 수준

정말로 혼자서, AI와 함께, 처음부터 끝까지 완성된 서비스를 만들 수 있습니다! 🚀