Gemini Live Contest를 위해 Voxitale를 구축하면서 여러 AI 도구와 작업하는 것에 대해 배운 점
Source: Dev.to
번역할 텍스트가 제공되지 않았습니다. 번역을 원하는 본문을 알려주시면 바로 도와드리겠습니다.
Voxitale – 음성‑우선 스토리텔링 앱
Gemini Live 콘테스트용으로 제작
Voxitale란?
- 대상: 어린 아이들
- 상호작용: 아이가 브라우저에서 Amelia라는 캐릭터와 직접 대화합니다.
- 경험:
- 아이가 소리 내어 모험을 이끕니다.
- 이야기가 진행됨에 따라 삽화가 나타납니다.
- 마지막에 시스템이 세션을 기반으로 짧은 동화책‑스타일 영화를 생성합니다.
“이상한” 부분
전체 프로젝트 중 가장 좋았던 순간은 라즈베리 Pi의 Wi‑Fi를 고친 것이었습니다.
설명드리겠습니다.
나의 철학
나는 컨설턴트식 말투—인상적이지만 실질적인 내용이 없는 다듬어진 언어—를 싫어합니다.
그래서 이것이 우아한 엔지니어링 여정이었다고 가장하지 않겠습니다. 사실은:
- 지저분함
- 빠름
- 툴‑중심 (AI 툴이 가득)
어떤 부분은 정말 흥미로웠고, 다른 부분은 터미널 사이에서 로그를 옮기는 듯한 시간이었습니다.
그럼에도 불구하고, 나는 실제로 유용한 것을 배웠습니다.
경험 (사용자용)
- 음성 상호작용 – 아이가 Amelia에게 말을 걸면, 시스템이 실시간으로 삽화 장면과 내레이션을 생성합니다.
- 스토리 진행 – 페이지가 즉석에서 생성되고 나중에 동화책 형태의 경험으로 조합됩니다.
- 부모 제어 – 분위기, 진행 속도, 내레이터 음성, 선택 가능한 스마트 조명 효과.
목표: 스토리텔링을 수동이 아닌 인터랙티브하게 만들기.
왜 Gemini Live인가?
- Previous work: Gemini Live 기반 고객‑서비스 프로토타입 (RAG 조회, 사이트 탐색, 비디오 제어).
- Result: 작동했지만 흥미롭지는 않았습니다.
- New focus: 인터랙티브 스토리텔링, 이는 존재감, 빠른 응답, 중단 처리, 그리고 지속적인 환상을 요구합니다.
계약이 무산되면서 대부분의 사이드 프로젝트가 얻지 못하는 한 가지, 중단 없는 시간을 얻게 되었습니다. 이미 Gemini Live를 다뤄본 적이 있어서 관리할 수 있을 거라 생각했지만—틀렸습니다. 실시간 스토리텔링은 겉보기에 비해 훨씬 어렵습니다.
Source: …
시스템 개요
Voxitale은 두 가지 매우 다른 템포가 동시에 실행되는 시스템이 되었습니다:
| 템포 | 설명 |
|---|---|
| 실시간 대화 루프 | 아이가 말함 → WebSocket을 통해 오디오 스트리밍 → FastAPI 백엔드 → Google ADK 실시간 에이전트 (Gemini 네이티브 오디오) → Amelia가 실시간으로 응답 |
| 창의적 생성 파이프라인 | 이야기가 전개됨에 따라 시스템이 일러스트 장면, 캡션, 선택적 ElevenLabs 내레이션, Home Assistant 조명 효과를 생성합니다. 세션 종료 시 모든 요소를 짧은 스토리북 영상으로 조합합니다. |
주요 요구 사항
- 저지연 음성 인터랙션
- 느린 미디어 생성
아키텍처 다이어그램 (텍스트)
+-------------------+ WebSocket +-------------------+
| Browser (React | | FastAPI (Cloud Run) |
| / Next.js) | | - WS handling |
| - Audio worklet | | - Orchestration |
| - UI | | |
+-------------------+ +-------------------+
| |
| |
v v
+-------------------+ Gemini Live +-------------------+
| Google ADK Agent | | Gemini Live / |
| (Vertex models) | | Vertex AI |
+-------------------+ +-------------------+
| |
| Media Generation (ElevenLabs, |
| Image models, Home Assistant) |
v v
+-------------------+ Storage +-------------------+
| Cloud Storage | | Firestore (metadata) |
+-------------------+ +-------------------+
|
v
+-------------------+
| Cloud Run Job |
| (MP4 assembly) |
+-------------------+- 프론트엔드: React/Next.js가 Audio Worklet을 사용해 마이크 오디오를 캡처하고 WebSocket으로 스트리밍합니다.
- 백엔드: Google Cloud Run에서 FastAPI를 호스팅하여 WS 연결, API 라우팅, 세션 오케스트레이션을 관리합니다.
- 에이전트 레이어: Google ADK가 Gemini Live + Vertex 모델을 실행해 스토리텔링 로직, 프롬프트 규칙, 도구 실행을 담당합니다.
- 자산: 생성된 장면 및 자산 → Google Cloud Storage; 세션 메타데이터 및 피드백 → Firestore.
- 최종 출력: Cloud Run 작업이 모든 요소를 MP4 스토리북 비디오로 조합합니다.
개발 워크플로우 및 AI 도구
| 도구 | 역할 |
|---|---|
| Google Anti‑Gravity (Gemini Pro / Flash) | 프론트엔드 UI 아이디어, 기능 브레인스토밍 |
| OpenAI Codex (GPT‑5.4) | 백엔드 작업 대부분, 디버깅 |
| Anthropic Opus & Sonnet | 초기 단계 개발, 프로토타이핑 |
| Gemini Live | 제품 경험을 구동 (코드는 제외) |
나는 기본적으로 시스템의 큰 부분을 바이브‑코드했습니다. AI 코딩 도구는 제공하는 컨텍스트만큼만 유용합니다.
컨텍스트 관리
- 문서(WebSockets, Gemini Live, Google ADK, 재연결 로직, 스트리밍 파이프라인)를
docs/폴더에 모아 모델이 참조할 수 있게 했습니다. - 로깅이 중요해졌습니다.
디버깅 루프
- 문제를 설명합니다.
- 백엔드 로그를 제공합니다.
- 프론트엔드 로그를 제공합니다.
- 모델이 실패를 분석하도록 합니다.
- 수정을 테스트합니다.
AI 덕분에 디버깅 속도가 빨라졌지만, 여전히 디버깅이었습니다.
가장 어려운 부분: 시스템 안정성
사람들이 “인터랙티브 스토리텔러”라는 말을 들으면, 재미있는 요소들을 떠올립니다:
- 캐릭터 목소리
- 일러스트
- 아이들이 줄거리를 이끄는 것
현실: 실제 작업은 그 아래 모든 것입니다. 아키텍처 관점에서 두 시스템은 동기화된 상태를 유지해야 합니다:
- 실시간 대화 시스템
- 창의적 미디어 생성 파이프라인
이 두 시스템이 멀어지면, 경험이 무너집니다.
라즈베리 파이 Wi‑Fi 사가
- Home Assistant 통합을 위해 오래된 라즈베리 파이가 필요했습니다.
- 파이를 업그레이드한 후 Wi‑Fi가 작동하지 않게 되었습니다.
- ~4시간 정도 디버깅에 시간을 보냈습니다.
- 문제를 발견했습니다: 요구되는 64비트 버전 대신 32비트 OS를 실행하고 있었습니다.
그 Wi‑Fi 문제를 해결한 순간이 가장 즐거운 순간이 되었어요—작고 복잡한 디테일도 혼란스러운 프로젝트에서 승리처럼 느껴질 수 있다는 증거입니다.
핵심 요점
- Real‑time interactive storytelling은 저지연 음성 파이프라인과 무거운 미디어 생성의 조합이다.
- AI coding assistants는 개발을 가속화하지만, 탄탄한 문서화와 로깅은 여전히 필수적이다.
- System synchronization은 핵심 요소이며, 약간의 드리프트라도 사용자 경험을 빠르게 깨뜨린다.