2년 묵힌 프로젝트, 바이브 코딩으로 이틀만에 끝내기 - 웨잇 개발 회고

"완벽한 앱을 만들려다 2년을 질질 끈 프로젝트, 최소 기능의 웹으로 이틀만에 런칭하다."

 

 

🤦 2년간의 삽질, 그리고 테스트앱까지 올렸지만...

2년 전, AI 기반 스미싱 탐지 서비스 웨잇을 기획했다.

OpenAI Embedding API를 활용해 문자 메시지를 벡터화하고, Elasticsearch로 기존 스미싱 패턴과의 유사도를 측정하는 서비스였다. 아이디어는 좋았다. 문제는 실행이었다.

 

처음엔 앱 개발하는 친구화 함께 모바일 앱으로 시작했다. 

사용자가 의심스러운 문자를 받으면 앱에서 바로 분석할 수 있도록 하는 게 목표였다.

백엔드는 Kotlin + Spring Boot로 탄탄하게 구축했고, AI 분석 서버도 Python Flask로 완성했다.

심지어 Google Play 스토어에 테스트 앱까지 올렸다.

하지만 앱을 담당하던 친구와 나 모두 너무 바빴고, 커뮤니케이션 비용이 점점 커졌다.

프로젝트 기간이 길어질수록 점점 루즈해졌다. 계속 보완해야 할 점이 생겨났지만, 진척은 더뎠다.

결국 2년이 지났지만 정식 런칭은 하지 못했다.

 

최소 기능으로 웹 런칭 결심

이대로 끝낼 순 없었다. 완벽한 앱을 만들겠다는 욕심을 내려놓고, 핵심 기능만 담은 웹사이트라도 먼저 배포하기로 결심했다.

최소 기능 정의:

• 문자 내용 입력
• AI 기반 스미싱 여부 판단
• 관련 뉴스 제공
• 월간 사용 제한 (OpenAI API 비용 관리)

앱에서 구상했던 가족 연동이나 실시간 알림 같은 리치한 기능들은 과감히 포기했다. 아쉽지만, 일단 세상에 내놓는 게 우선이었다.

---

바이브 코딩의 마법 - 이틀만에 완성한 웹사이트

프론트엔드는 바이브 코딩만한 게 없다. React에 익숙하지 않아도, AI와 함께라면 빠르게 결과물을 만들 수 있다.

프로젝트 세팅

• Vite: 빠른 개발 환경 구축
• React 19: 최신 버전으로 시작
• TailwindCSS 4: 스타일링은 유틸리티 클래스로 간편하게

바이브 코딩 3단계 전략

1단계: 깔끔한 UI 프로토타입 생성 (하드코딩 OK)

"스미싱 탐지 서비스 메인 페이지 만들어줘. 
문자 입력창, 분석 버튼, 결과 표시 영역이 필요해. 
서버 연동은 나중에 할 거니까 일단 하드코딩된 샘플 데이터로."

Claude가 만들어준 첫 프로토타입은 놀라웠다.

깔끔한 레이아웃에 직관적인 UI, 그리고 TailwindCSS로 스타일링까지 완벽했다.

이 단계에서는 기능 구현보다 사용자 경험에 집중했다.

 

2단계: 백엔드 연동

"현재 UI에 우리 백엔드 API 연결해줘.
엔드포인트: POST /api/analyze
요청: { message: string }
응답: { isSafe: boolean, similarity: number, cases: [...] }"

백엔드는 이미 2년간 다듬어져 있었다.

Kotlin Spring Boot 서버가 Redis 캐싱, JPA 기반 데이터 관리를 담당하고, Python Flask 서버가 OpenAI Embedding과 Elasticsearch 벡터 검색을 처리했다.

API 스펙만 넘겨주니 Claude가 즉시 연동 코드를 작성했다.

 

3단계: UI 디테일 개선

"분석 중일 때 로딩 애니메이션 추가하고,
결과가 위험할 경우 경고 색상으로 강조해줘.
그리고 유사 케이스 카드에 호버 효과도 넣어줘."

기능은 완성됐지만 폴리싱이 필요했다.

로딩 스피너, 색상 코딩, 애니메이션 등 사용자 경험을 향상시키는 디테일에 집중했다. 

웹으로 전환하며 고려한 점

앱에서 웹으로 전환하면서 몇 가지 중요한 결정을 내려야 했다.

비로그인 vs 로그인

처음엔 접근성을 위해 비로그인 서비스로 만들까 했다. 누구나 URL만 입력하면 바로 사용할 수 있게. 하지만 현실은 달랐다.

문제: OpenAI API 토큰 비용

매 분석마다 OpenAI Embedding API를 호출하는데, 이건 돈이 드는 작업이다. 무제한 무료로 열어두면 어뷰징 우려도 있고, 비용 폭탄을 맞을 수도 있었다.

결론: 로그인 + 월간 사용 제한

• Google OAuth 로그인 구현
• 월 10회 무료 분석 제공
• 사용량 제어를 통한 비용 관리

쿠키 인증 추가

앱 환경에서는 JWT 토큰 기반 인증만 있었다. 하지만 웹 브라우저 환경에서는 쿠키 기반 세션 인증이 더 자연스럽다.

백엔드를 수정해서 JWT와 쿠키 인증을 모두 지원하도록 했다. 다행히 모바일 앱을 염두에 두고 설계했던 인증 구조가 유연해서, 쿠키 인증 추가가 어렵지 않았다.

---

결과: waiit.me 런칭

이틀간의 바이브 코딩 끝에 waiit.me가 세상에 나왔다.

WAIIT - 스미싱 탐지 | 문자사기 검사 | 보이스피싱 예방 서비스

프로젝트 구조:

waiit/
├── fe/          # React + Vite + TailwindCSS
├── noun/        # Kotlin Spring Boot API 서버
├── determiner/  # Python Flask AI 분석 서버
└── docker-compose.yml

핵심 기능:

• 문자 메시지 입력 시 벡터 유사도 기반 스미싱 탐지
• Elasticsearch 벡터 DB로 기존 스미싱 패턴과 비교
• 유사도 점수 및 유사 케이스 제공
• Google 로그인 + 월간 사용 제한

GitHub: github.com/jeongum/waiit

GitHub - jeongum/waiit: AI 기반 스미싱 탐지 서비스

---

회고: 완벽함보다 완성이 중요하다

아쉬운 점

• 앱에서 구현하려던 가족 연동 기능을 못 넣은 것
• 실시간 문자 감지 알림 같은 리치한 기능들
• 2년이란 시간을 허비한 것

배운 점

• 완벽주의는 독이다: 완벽한 걸 만들려다 영원히 출시 못 합니다
• 바이브 코딩의 힘: 익숙하지 않은 분야도 AI와 함께라면 빠르게 프로토타이핑 가능
• 최소 기능(MVP)의 중요성: 핵심만 담아 빠르게 검증하는 게 답
• 완성이 완벽을 이긴다: 세상에 나온 70%짜리가 서랍 속 100%짜리보다 낫다

앞으로의 계획

• 사용자 피드백 수집
• 필요하다면 앱 개발 재개 (하지만 이번엔 더 빠르게)
• 스미싱 패턴 DB 지속 업데이트

---

마치며

2년 동안 완벽한 앱을 만들겠다고 질질 끌었지만, 최소 기능의 웹사이트는 이틀만에 완성했다. 바이브 코딩 덕분이었다.

 

회사에서도 AI를 활용해서 많은 프로젝트를 진행했었다. 특히 POC하는데에는 최적이다. 

나같은 백엔드 개발자 입장에서 프론트 리소스를 기다리지 않고도, 해당 기능이 동작하는 최소한의 프로토타입을 굉장히 빠른 시간내에 만들어 낼 수 있기 때문이다.

바이브 코딩, AI가 도입되면서 프로젝트의 이터레이션이 굉장히 빨라짐을 느낀다.

 

혹시 여러분도 오래 묵혀둔 프로젝트가 있다면, 완벽함을 내려놓고 바이브 코딩으로 빠르게 만들어보길 권한다. 일단 세상에 내놓는 게 중요하다. 완성도는 그 다음 문제다.

2년 묵힌 프로젝트, 이틀만에 런칭. 가능하다.

---

🌐 웨잇 서비스: waiit.me
💻 GitHub: github.com/jeongum/waiit