AI 아바타 v15 출시! 개발자를 위한 신기능 가득

RutenVeil은 포토샵 레이어 구조와 유사한 다중 div 레이어링을 통해 화면에 깊이감과 공간감을 부여했다. 각 레이어는 독립적으로 분리되어 유지보수성(Maintainability)을 높이고 관리를 용이하게 했다. 개발 중 발생한 CSS 애니메이션 충돌 문제는 `@keyframes` 내 transform이 클래스 기반 transform보다 우선순위를 갖는다는 점을 파악하여 해결했다. 이를 위해 정적 스타일과 동적 스타일을 완전히 분리하고 독립 클래스로 책임 이동을 수행하여, 애니메이션 우선순위 충돌을 제거하고 모든 효과의 동기화를 보장했다. 'Idol Stage' 테마에서는 각 요소에 다중 애니메이션을 적용하고, CSS의 콤마(,)로 구분된 애니메이션 속성을 활용하여 등장(FadeIn), 루프 모션(Waving), 퇴장(FadeOut)의 3단계 타임라인을 정밀하게 제어했다. 이는 복잡한 안무와 같은 움직임을 순수 CSS만으로 구현 가능하게 한다.

AI 아바타 v15는 Gemini TTS, Web Speech API, Kokoro, VOICEVOX 등 여러 TTS 옵션을 지원한다. Gemini TTS는 고품질과 빠른 속도를 자랑하지만, 무료 플랜은 일 10회로 제한되어 사용량이 많은 AI 아바타에는 부족하다. Web Speech API는 무료이고 무제한 사용 가능하나, 감정 표현이 없는 로봇 같은 음성을 제공한다. 로컬 TTS 모델인 Kokoro(영어)와 VOICEVOX(일본어)는 비교적 자연스러운 음성을 제공하지만, Kokoro는 로컬 구동 시 다소 무겁고 VOICEVOX는 사전 설치가 필요하다는 설치 및 리소스 요구사항(Setup & Resource Requirements)의 단점이 있다. 따라서 사용자는 비용, 품질, 사용 편의성(Cost, Quality, Usability) 간의 트레이드오프를 고려하여 최적의 TTS 옵션을 선택해야 한다.

VRM 3D 아바타를 활용하는 AI 아바타는 Three.js 기반의 새로운 3D 애니메이션 기능을 추가했다. '밀리어네어 모드(Millionaire Mode)'는 금화 또는 핑크 다이아몬드 분수를 뿜어내는 애니메이션으로, 이전 히트 프로젝트를 재활용하여 개발 시간 단축(Development Time Saving)을 달성했다. 이 기능의 성능 비결은 각 코인에 대한 충돌 계산을 생략하여 애니메이션 부하를 경량화한 점이다. '롤러코스터 모드(Rollercoaster Mode)'는 스케이트보드와 유사한 보드를 타고 트랙을 따라 내려오는 애니메이션으로, RollerCoaster.js 라이브러리를 활용했다. 기본, 레인보우, 워터 세 가지 버전으로 제공되며, 아바타가 균형을 잃지 않고 트랙을 따라 이동하는 모습이 특징이다. 이 모드들은 사용자에게 지속적인 즐거움(Continuous Entertainment)을 제공하도록 설계되었다.

AI 아바타는 고정된 응원 메시지 대신 맥락 기반 메시지 기능을 도입하여 더욱 자연스러운 상호작용을 제공한다. 이 기능은 요일, 시간, 세션 횟수, 특별한 날 등 다양한 컨텍스트(Contexts)를 감지하여 우선순위에 따라 메시지를 변경한다. 예를 들어, 할로윈 같은 특별한 날에는 'Happy Halloween! 🎃' 메시지를, 세션 횟수 마일스톤 달성 시에는 '10th reaction today! 🎉'와 같은 메시지를 표시한다. 또한, 기존의 눈 깜빡임 외에 머리, 가슴, 몸통의 작은 기울임(Idle Animations)을 추가하여 아바타의 움직임을 더욱 생동감 있게 만들었다. 특히 몸통 기울임 시 반대쪽 다리가 뜨는 현상을 방지하기 위해 다리 위치 조정 로직을 추가하여 자연스러운 움직임을 구현했다.