마지막 글을 작성하고 벌써 1년이 지났네요
그동안 AI 교육도 듣고 심리학 학사학위도 따고 다양한 일들이 있었습니다.
이번에는 제가 이제까지의 경험을 살려 제작한 웹엡 제작 후기를 작성해보려 합니다.
Cafe SOUL 개발 후기 (Gemini Pro 연동)
안녕하세요! 오늘은 제가 직접 개발한 **감성 AI 상담 웹앱 "Cafe SOUL"**의 제작 과정을 소개해보려 합니다.
이 프로젝트는 FlutterFlow와 Google의 Gemini Pro 모델을 기반으로 만들어졌으며, 따뜻한 레트로 감성과 텍스트 기반 심리 상담이 결합된 독특한 경험을 제공합니다.
Cafe SOUL이란?
“감정을 알아주는 따뜻한 한 잔의 대화”
Cafe SOUL은 사용자가 느끼는 감정을 바탕으로 대화를 시작하고, AI와의 대화를 통해 정서적 위로를 받을 수 있는 가상 상담 카페입니다.
- 불안, 우울, 외로움 등 감정 선택
- 각 감정에 어울리는 '메뉴' 제공 (ex. 불안 → 블루베리 라떼)
- Gemini Pro 기반 AI 상담 제공
- 감정 기록 저장 기능
기획 배경
요즘 많은 사람들이 감정을 털어놓을 곳이 없어 힘들어하죠.
그래서 심리상담의 기본 구조를 AI에 녹여, 부담 없이 마음을 터놓을 수 있는 공간을 만들고 싶었습니다.
디자인: 레트로 감성 + 따뜻한 UI
Cafe SOUL의 디자인은 레트로 픽셀 아트와 따뜻한 톤을 활용해 감정적으로 편안한 분위기를 구현했습니다.
- 오프닝 화면: 픽셀풍 카페 외관 (AI 생성 이미지 편집)
- 폰트: Google Fonts에서 복고풍 서체 사용
- 색감: 크림베이지와 카푸치노 톤 중심
개발: FlutterFlow로 구현한 핵심 기능
✅ 전체 페이지 구성
- HomePage: 소개 및 입장
- MenuPage: 감정 선택 메뉴
- ChatPage: Gemini Pro와의 대화
- LogPage: 상담 감정 기록
✅ 상태 관리
FlutterFlow의 App State 기능으로
선택한 감정, 사용자 입력, 챗봇 응답 등 전체 흐름을 관리했습니다.
Gemini Pro 연동: 상담 AI 구현
이번 프로젝트의 핵심은 바로 Gemini Pro를 연동한 감성 상담 대화입니다.
왜 Gemini Pro인가요?
Gemini Pro는 대화의 흐름을 자연스럽게 이어가고,
감정적인 문장을 생성하는 능력이 탁월해서 심리상담 톤에 딱 맞는 AI였어요.
연동 방법
- Firebase Functions로 중간 서버 역할 구성
- FlutterFlow에서 Custom API Call로 Gemini Pro 호출
배포: 사용자에게 다가가기
Firebase Hosting으로 배포
FlutterFlow와 Firebase Hosting을 연결하면
웹앱 배포가 정말 간단합니다.
- 도메인: https://soul.ai.kr
- 가비아에서 TXT 레코드 등록 후 Search Console 연동
- Google Analytics 연결로 사용자 분석
직접 사용해본 후기
Cafe SOUL은 예상보다 훨씬 따뜻한 피드백을 받았어요.
“진짜 사람이 얘기해주는 느낌이에요.”
“감정이 안정되는 느낌이 들었어요.”
향후 계획으로는:
- 더 다양한 감정 추가
- 노년층 맞춤 UI 개선
- 사용자 데이터 기반 응답 최적화
마무리
FlutterFlow와 Gemini Pro의 조합은 비전문가도 AI 기반 웹앱을 만들 수 있게 해줍니다.
누구나 감정에 공감받고 싶은 마음이 있잖아요?
Cafe SOUL은 그 출발점이 되어줄 거예요.
궁금한 점이나 피드백이 있다면 댓글로 남겨주세요.
더 나은 서비스를 위해 꾸준히 개선하고 있습니다! ☕❤️
관련 GITHUB : https://github.com/MikeOh-SQ/CafeSoul_public