Three.js와 VRM 모델을 활용한 BYOK 기반 iOS AI Voice Companion 구현

I built an iOS AI voice companion with a 3D face that talks back

Apoorv Darshan2026년 6월 22일1분intermediate

AI 요약

Context

기존 AI 컴패니언 앱의 단순 텍스트 채팅 인터페이스로 인한 몰입감 저하 문제 발생. 단순 정적 스프라이트가 아닌 실제 반응형 3D 아바타를 통한 사용자 경험 혁신 필요성 대두.

Three.js 및 three-vrm 라이브러리를 통합하여 Lip Sync 및 Idle Animation이 적용된 3D VRM 아바타 렌더링 체계 구축
Amica/Arbius 프런트엔드를 SwiftUI 앱 내에 래핑하여 iOS 환경에서 3D 모델과 채팅 인터페이스의 유기적 결합 달성
LLM, STT, TTS 엔진을 사용자가 직접 설정하는 BYOK(Bring Your Own Key) 구조 설계를 통한 서버리스 아키텍처 구현
보안 강화를 위해 API Key를 iOS Keychain에 저장하고 사용자 설정값을 Local Preferences로 관리하는 데이터 분리 전략 채택
VRM 모델의 자산화(Asset)를 통해 캐릭터 외형과 애니메이션을 쉽게 교체할 수 있는 플러그인 구조 설계

실천 포인트

1. 3D 모델 기반 AI 인터페이스 설계 시 VRM 표준 포맷 검토

2. API Key 보안을 위한 OS 레벨의 Secure Storage(Keychain 등) 활용 여부 확인

3. 서비스 확장성을 위해 LLM/TTS/STT 엔진을 추상화한 Provider Matrix 구조 설계

태그