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

안녕하세요!

바이브 코딩으로 과연 어디까지 해볼 수 있을까? 고민하다가 만들어보게된 게임 느낌을 접목한 가상 캐릭터 채팅 서비스 입니다.

2D 픽셀아트를 사용해 바이브 시티안에 클래식 미드나잇 바를 구현했고, 가상의 손님들이 이곳에서 머물고 있어요. 오늘의 감정 상태를 고르고, 음료를 추천 받고나면 마음에 드는 손님과 대화해보실 수 있습니다.

3명의 동료들과 사이드로 여러 시도들을 해보고 있는데요. 기존에 만들던것들을 벗어나 과연 "우리가 위로, 공감, 재미를 사람들에게 줄 수 있을까?"의 질문에 대한 스프린트 프로젝트로 봐주시면 됩니다.

해당 서비스는 2주간의 디자인 스프린트 과정을 통해 만들어졌습니다.

[사용한 AI 툴 조합]
VibeCity인 만큼 최대한 많은 생성형 AI 서비스들을 사용해봤습니다.

• 캐릭터 프롬프트 (ChatGPT, Silly Tavern)
• 캐릭터 이미지, 배경 (Midjourney, Whisk(Imagen4), Imagen3)
• 배경 세계관, 이미지 생성 프롬프트 (ChatGPT 4o, Gemini 2.5 Pro)
• 프로젝트 구현 (Claude Sonnet 4, ChatGPT 4.1)
• BGM (SunoAI)

프로토타입은 하루, 이틀만에 만족할 수준으로 만들어줬습니다. 하지만 여지없이 기능을 추가할수록 바이브 반복 횟수가 많아지고 연속성이 떨어지는게 심해져서 IDE에서 최대한 Agent모드보다 Ask 모드를 많이 사용했고, 하나의 파일당 적은 라인을 유지하는데 초점을 많이 두었습니다.

특히 게임에 적용되는 씬 개념을 처음 구현하다보니 명확한 설계 지시가 부족했기 때문에 어려운 부분이 더 많았던것 같습니다.

캐릭터 프롬프트를 만드는데는 Silly Tavern이나 뤼튼을 사용중인 분들의 팁들을 참고했습니다.

음료 이미지를 만들때 사용한 간단 프롬프트는 아래와 같습니다.
"A detailed pixel art masterpiece, 16-bit retro style, vibrant colors, white background, depicting: mojito. Ensure clear outlines and a distinct pixelated aesthetic."

디자이너가 없는 팀이라 필요한 애셋을 과연 생성형 AI로 충분히 만들어 낼 수 있을까 싶었는데, 프로토타입용으론 너무나 만족스러운 경험이였습니다.

[개발 관련]

• IDE (Cursor, Github Copilot)
• API (ChatGPT 4.1)
• 서버리스 백엔드 (Vercel)
• 데이터베이스 (서버리스 SQLite)

리액트 환경은 처음이였는데요. Vercel의 무료요금제인 Hobby 단계로 간편한 배포부터 통계, Speed Insights 확인, 서버리스 DB연결, 커스텀도메인 연결까지 너무 만족스러운 배포 경험이였습니다.

게임의 감성을 살리기 위해 현재 데스크톱 환경으로만 테스트를 진행하고 있지만 질문이나 피드백은 언제든지 환영입니다! 감사합니다.