【개인 개발】React + Firebase + Stripe로 「AI 채팅 점술 앱」을 만들어 실제 서비스로 출시하기까지의 궤적

서론

안녕하세요! 최근, AI 점술가와 가볍게 채팅으로 상담할 수 있는 Web 앱 「ai-fortune-chat」을 개인 개발로 출시했습니다.

지난 프로젝트에서 React와 Vite를 사용한 프론트엔드 개발 지식을 얻었기에, 이번에는 한 걸음 더 나아가 「AI (LLM)와의 연동」, 「포인트제 과금 시스템」을 포함한 본격적인 상용 서비스를 목표로 했습니다.

본 기사에서는 사용한 기술 스택과 개발 중에 직면했던 Stripe 결제 · Firebase의 함정과 그 해결책에 대해 공유합니다.

왜 「AI × 점술」인가? (개발 계기)

일반적으로 점술은 「사람 (점술가)」이 담당하는 서비스입니다. 하지만 세상에는 「사람과 대화하는 것 자체가 서투르거나」, 「고민을 사람에게 말함으로써 오히려 기가 빨려 버리는」 사람이 일정 수 존재한다고 생각합니다.

그래서 대화 상대를 「AI」로 대체함으로써,

상대의 안색이나 감정을 신경 쓰지 않고, 어떤 사소한 일(혹은 깊고 무거운 고민)이라도 가볍게 상담할 수 있다-
심야든 이른 아침이든, 자신의 타이밍에 언제든 점을 볼 수 있다

라는 경험을 제공할 수 있다고 생각했습니다. 「AI」의 강점과 「점술」의 개인적인 성질은 매우 궁합이 좋다고 확신하여 이번 서비스 개발에 이르게 되었습니다.

기술 스택

프론트엔드: React, Vite -
백엔드 · 인프라: Firebase (Hosting, Firestore, Cloud Functions) -
결제 시스템: Stripe (Checkout, Webhook) -
AI 연동: Gemini API -
기타 도구: OGP 이미지 생성 (Imagen 3 등의 이미지 생성 AI를 이용)

공들인 포인트

1. 모던하고 신비로운 UI/UX

점술 앱으로서 사용자가 몰입할 수 있는 「신비로우면서도 수상하지 않은」 디자인을 목표로 했습니다. OGP 이미지에 대해서도 이미지 생성 AI를 활용하여, 글자 없이 아름답고 친숙한 썸네일을 작성했습니다. SNS에서 공유되었을 때의 클릭률 향상을 노리고 있습니다.

2. Stripe를 통한 포인트 과금 시스템

사용자가 점술을 이용하기 위한 「포인트」를 Stripe에서 구매할 수 있는 구조를 구축했습니다. 결제가 완료되면 Stripe에서 Firebase Functions로 Webhook이 전송되어, 안전하게 Firestore의 사용자 잔액이 업데이트되는 아키텍처입니다.

개발 중 빠졌던 함정과 해결책

이번 개발에서 가장 고생했던 것은 Stripe의 테스트 환경에서 운영 환경으로의 전환이었습니다.

Firebase Functions의 환경 변수 함정

운영용 API 키나 Price ID를 올바르게 설정했음에도 불구하고, 운영 결제로 진행하려고 하면 No such price나 Stripe secret key is not set과 같은 에러가 발생했습니다.

원인은 Cloud Functions의 환경 변수 관리 사양에 있었습니다.

Secret Manager (firebase functions:secrets:set)로 운영용 키를 등록해도, 로컬의 .env 파일에 테스트용 키 (sk_test_...)가 남아 있으면 충돌하게 됩니다.

.env의 기술을 완전히 삭제하고, Secret Manager를 통해서만 키를 읽어오도록 수정. 나아가 Cloud Functions 측에서 시크릿 값에 대한 액세스 권한 (바인드 설정)을 명시적으로 코드에 추가함으로써, 무사히 운영 환경의 Stripe와 통신할 수 있게 되었습니다.

출시를 위해 수행한 작업

단순히 동작하는 것을 만드는 것뿐만 아니라, 상용 앱으로서 다음 설정을 완수했습니다.

Google Analytics (GA4) 도입: Firebase SDK를 통한 초기화와 데이터 보유 기간 연장 (2개월 → 14개월). 내부 트래픽 (자신의 IP) 제외 설정도 수행하여 정확한 측정 기반을 구축. -
Firestore 보안 규칙 재검토: 테스트 모드에서 탈피하고 액세스 권한을 엄격화. -
Stripe 운영 테스트: 실제 신용카드를 이용한 결제 ~ 환불 플로우 실증.

마치며

결제 시스템과 클라우드 함수 (Cloud Functions)를 연동한 개인 개발은 에러의 연속이었지만, 무사히 출시를 맞이하여 큰 성취감을 느꼈습니다. 앞으로 개인 개발을 통해 수익화 (Monetization)나 AI 연동을 고민하고 계신 분들께 도움이 되기를 바랍니다!

"남에게 말하기 어려운 고민"도 AI라면 거리낌 없이 상담할 수 있습니다. 앱은 이곳에서 플레이할 수 있으니, 꼭 점을 봐보세요🔮

Discussion