Show GN: VibeCity - 당신의 감정을 안아주는 대화 공간

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

바이브코딩

대상자

• *개발자 및 디자이너**
• 난이도: 중간 수준 (AI 도구 활용 및 React 기초 지식 필요)

핵심 요약

• AI 도구 (ChatGPT, Midjourney, SunoAI)를 활용해 2주만에 감정 기반 채팅 서비스 VibeCity를 구현
• AI 생성형 콘텐츠 (캐릭터, 배경, 음료 이미지) 생성을 통해 디자이너 없는 팀에서도 프로토타입 개발 가능
• Vercel을 통한 서버리스 배포로 빠른 구축 및 커스텀 도메인 연결 가능

섹션별 세부 요약

1. 서비스 개요 및 목표

• 감정 기반 채팅 플랫폼 구현: 사용자가 감정 상태를 선택 후 추천 음료와 가상 손님과 대화
• 2주 디자인 스프린트 과정으로 개발: "위로, 공감, 재미" 제공을 목표로 한 스프린트 프로젝트
• 2D 픽셀아트 기반의 클래식 미드나잇 바 환경 구현

2. 사용한 AI 툴 조합

• 캐릭터 프롬프트: ChatGPT, Silly Tavern
• 이미지 생성: Midjourney, Whisk(Imagen4), Imagen3
• 배경 세계관: ChatGPT 4o, Gemini 2.5 Pro
• 음악 생성: SunoAI
• 프로토타입 개발: Claude Sonnet 4, ChatGPT 4.1

3. 개발 환경 및 도구

• IDE: Cursor, Github Copilot
• 백엔드: Vercel 서버리스 환경 (Hobby 단계 무료 요금제)
• 데이터베이스: 서버리스 SQLite
• 프론트엔드: React (초보자 개발자 대상)

4. 개발 과정 및 도전

• AI 콘텐츠 생성의 한계: 연속성 저하, Agent 모드보다 Ask 모드 중심으로 개발
• 게임 씬 구현의 어려움: 명확한 설계 지시 부족으로 인한 설계 복잡성 증가
• React 학습 곡선: Vercel의 간편한 배포 환경으로 개발자 친화적

결론

• AI 도구 활용과 Vercel 서버리스 배포를 결합해 빠른 프로토타입 개발 가능
• 디자이너 없는 팀도 생성형 AI로 충분한 애셋 생성 가능
• React + Vercel 조합은 초보자도 쉽게 배포 가능한 개발 환경 추천