🎥 AI 채팅, AI 응원 메시지 및 애니메이션 에디터 Hyper (AI Avatar v10: VS Code 및 Chrome 확장 프로그램)

서론 (Intro)

AI Avatar는 VS Code 및 Chrome (Edge)에서 AI 채팅과 Enter 키에 반응하여 사용자의 VRoid (VRM) 3D 아바타가 애니메이션을 재생하도록 하는 완전 무료 앱입니다. 저는 3월부터 AI Avatar를 업데이트해 오고 있습니다. 이번에는 두 가지 큰 업데이트를 진행했습니다: 새로운 AI 기능과 **애니메이션 에디터 (Animation Editor)**의 완전한 리뉴얼입니다. 함께 살펴보겠습니다.

1. 새로운 AI 기능

1-1. AI 채팅 (AI Chat)

AI Avatar는 AI 기능으로서 Claude Code 및 GitHub Copilot 채팅을 통해 3D 아바타 애니메이션을 트리거합니다. 하지만 아직 API 기반 AI (API-based AI)나 로컬 LLM (local LLMs)을 통합하지는 않았습니다. 저의 DEV.to 친구인 @gramli는 로컬 LLM을 사용했고, @benjamin_nguyen_8ca6ff360은 포스트에서 API 기반 AI를 사용했습니다. 저는 그들에게 영감을 받아 이러한 기능들을 추가하기 시작했고, 간단한 AI 채팅부터 시작했습니다.

API 기반 AI를 위해 Gemini API를 선택했는데, 무료 플랜이 있어 사용자들이 자신만의 API 키를 발급받아 무료로 쉽게 테스트할 수 있기 때문입니다. 사용 사례가 간단한 AI 채팅일 것이라고 고려하여, 기본 모델로 경량 모델인 Gemini 3.1 Flash-Lite를 선택했습니다. 사용자는 설정에서 모델을 변경할 수 있습니다.

로컬 LLM을 처리하기 위해 Ollama를 선택했습니다. 처음에는 모델 크기가 작고 약 2GB의 메모리만 필요하기 때문에 Qwen3.5:2b를 시도했습니다. 제 노트북은 GPU 없이 메모리가 8GB뿐이지만😓, 이 경량 모델이라면 작동할 것이라고 생각했습니다. 하지만 테스트로

다음으로, 사고 모델 (thinking model)이 아닌 Qwen2.5:3b로 변경하였고, 마침내 2분 타임아웃 없이 채팅이 작동했습니다. 사용자는 설정에서 다른 모델로 전환할 수 있습니다.

로컬 LLM (Local LLMs)은 메모리에 로드되어야 하기 때문에 첫 호출 시에는 상당히 느리지만, 그 이후에는 훨씬 빨라집니다. 그래서 초기 호출을 더 빠르게 만들기 위해 웜업 (warm-up) 기능을 추가했습니다.

PC 사양에 따라 다르겠지만, 일반적으로 로컬 LLM은 API 기반 AI보다 느리고 성능이 낮습니다. 하지만 로컬 LLM은 사용자의 PC에서 실행되므로 무료이며 안전합니다. 따라서 필요에 따라 API 기반 AI와 로컬 LLM 중에서 선택해 주세요.

1-2. AI 응원 메시지 (AI Cheering Messages)

AI Avatar는 Enter 키를 눌러 AI에 프롬프트 (prompt)를 보낼 때 애니메이션뿐만 아니라 응원 메시지도 트리거합니다. 메시지를 원하는 대로 커스텀할 수 있지만, 이전에는 등록된 목록에서 무작위로 선택되었습니다. AI 채팅을 위해 Gemini API와 Ollama를 막 추가했기 때문에, 응원 메시지 또한 사용자의 프롬프트에 따라 AI가 생성하도록 업데이트했습니다. AI 응원 메시지는 AI Avatar를 더욱 생동감 있게 만들고 사용자에게 더 가깝게 느껴지도록 합니다.

2. 애니메이션 에디터 Hyper (Animation Editor Hyper)

AI Avatar에는 아바타 애니메이션을 제작하기 위한 애니메이션 에디터 (Animation Editor)가 있습니다. 하지만 초보자가 애니메이션을 만들기에는 조금 복잡할 수 있습니다. 그래서 이번에는 초보자와 어린이까지 모두가 애니메이션을 즐길 수 있도록 8가지 개선 사항을 반영하여 애니메이션 에디터를 업데이트했습니다. 바로 올인원 **애니메이션 에디터 Hyper (Animation Editor Hyper)**입니다! 저는 이것이 Blender에서 애니메이션을 만드는 것보다 더 쉽다고 생각합니다. 새로운 애니메이션 에디터 Hyper가 어떻게 초보자 친화적인지 빠르게 살펴보겠습니다.

2-1. 전체 탭 표시 (Full Tab Display)

	상세 내용
이전 (Before)	에디터가 작은 사이드 패널 (side panel) 안에 있었습니다. 사용자는 편집할 때마다 버튼, 슬라이더 (sliders), 입력창 (inputs) 사이를 전환해야 했습니다. 편집을 위해 많은 클릭이 필요했습니다.
이후 (After)	애니메이션 편집만을 위한 새로운 전체 탭 (full tab)을 만들었습니다. 모든 버튼, 슬라이더, 입력창이 한 화면에 있습니다. 사용자는 편집을 위해 더 적은 클릭과 움직임만 필요합니다.

2-2. 3면 디스플레이 (3-Side Display)

	상세 내용
이전 (Before)	에디터가 아바타 (avatar)의 정면만을 표시했습니다. 사용자는 측면을 보기 위해 아바타를 회전시켜야 했습니다.
이후 (After)	에디터가 하나의 탭에서 우측, 정면, 좌측 뷰를 모두 표시합니다. 사용자는 회전할 필요 없이 모든 뷰를 한 번에 볼 수 있습니다.

2-3. 이미지 홀더 (Image Holder)

	상세 내용
이전 (Before)	에디터에 이미지 홀더 (image holder)가 없었습니다. 사용자는 참조 이미지 (reference image)를 다른 창에서 열어야 했습니다.
이후 (After)	에디터에 아바타 옆에 이미지 홀더가 있습니다. 사용자는 샘플 포즈 (sample pose) 이미지를 쉽게 참조할 수 있습니다.

2-4. 본 트레일 (Bone Trail)

	상세 내용
이전 (Before)	에디터에 본 트레일 (bone trail)이 없었습니다. 초보자들이 본 (bones)이 어떻게 움직이는지 이해하기 어려웠습니다.
이후 (After)	에디터에 본 트레일이 있습니다. 초보자들은 본 트레일의 도움을 받아 각 본이 어떻게 움직이는지 쉽게 이해할 수 있습니다.

2-5. 포즈 프리셋 (Pose Presets)

	상세 내용
이전 (Before)	에디터에 프리셋 (Presets)이 없었습니다. 사용자들은 애니메이션을 처음부터 직접 만들어야 했습니다.
이후 (After)	에디터에 프리셋 (Presets)이 추가되었습니다. 사용자들은 프리셋을 사용하여 애니메이션을 제작하고 애니메이션 프로세스 속도를 높일 수 있습니다.

2-6. 애니메이션의 VRMA 내보내기 (VRMA Export of Animations)

	상세 내용
이전 (Before)	에디터는 애니메이션을 JSON 형식으로만 저장했습니다. 사용자들은 이 JSON을 해당 앱 내에서만 사용할 수 있었습니다.
이후 (After)	에디터가 애니메이션을 JSON 및 VRMA 형식으로 저장합니다. 사용자들은 VRMA를 다른 앱에서도 사용할 수 있습니다.

2-7. 랜덤 애니메이션 커스텀 모드 (Random Animation Custom Mode)

	상세 내용
이전 (Before)	앱에는 프리셋된 랜덤 애니메이션만 있었습니다. 256개의 패턴이 있었지만, 사용자들은 곧 이에 실증을 느낄 수 있었습니다.
이후 (After)	앱에 커스텀 랜덤 애니메이션 (Custom random animations) 기능이 추가되었습니다. 사용자들은 커스텀 파일을 설정함으로써 원하는 대로 랜덤 애니메이션을 즐길 수 있습니다.

2-8. 랜덤 애니메이션 에디터 (Random Animation Editor)

	상세 내용
이전 (Before)	에디터에 구현되지 않았습니다. 사용자들은 프리셋된 랜덤 애니메이션만 사용할 수 있었습니다.
이후 (After)	에디터에 포함되었습니다. 사용자들은 에디터에서 랜덤 애니메이션을 쉽게 제작할 수 있습니다.

AI Avatar VS Code 확장 프로그램 버전 사용 방법 (설치 100건 돌파 감사드립니다!)

AI Avatar VS Code 확장 프로그램은 두 가지 방법으로 다운로드할 수 있습니다.

• 방법 1: VS Code에서 설치: 왼쪽 사이드바의 Extensions (확장) 버튼 > AI Avatar 검색 > Install (설치) ↓↓
  

  

• 방법 2: VS Code Marketplace에서 설치: https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar ↓↓
  

  

AI Avatar Chrome 버전 사용 방법

Chrome 웹 스토어에서 설치: ↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

특별 감사 (Special Thanks)

저의 DEV Community 친구이자 CTO🤣인 @gramli님이 버전 2에서 AI Avatar 업데이트를 도와주었으며 계속해서 저를 지원해주고 있습니다. 정말 감사합니다!
저의 DEV Community 친구이자 CMO🤣인 @itsugo님. 우리의 아바타 협업 프로젝트가 AI Avatar의 시작이었으며 계속해서 저를 지원해주고 있습니다. 정말 감사합니다!
저의 동료 Maximum Blue가 버전 6에서 독특한 아바타를 만드는 것을 도와주었으며 계속해서 저를 지원해주고 있습니다. 정말 감사합니다!

버전 11 업데이트

저는 이미 버전 11 업데이트를 작업 중입니다. 더 재미있는 업데이트들이 기다리고 있으니 계속 지켜봐 주세요!

아웃트로 (Outro)

이것은 AI 기능의 시작일 뿐이며, 앞으로 더 재미있는 AI 기능들을 추가할 계획입니다! 또한, Animation Editor Hyper에서 애니메이션 제작을 더 쉽게 만들기 위해 제가 상상할 수 있는 모든 것들을 추가했습니다. **사용자 경험 (User Experience)**이 이전보다 더 나아졌기를 바랍니다. 여러분이 좋아하는 아바타를 위한 애니메이션을 만들며 즐거운 시간을 보내시길 바랍니다. 읽어주셔서 감사하며, 멋진 AI Avatar 생활을 즐기세요.

댓글 환영! (Comments Welcome!)

• AI Avatar를 더욱 재미있게 (Fun) 만들 아이디어가 있으신가요?
• 더 많은 **AI 기능 (AI Features)**을 추가할 아이디어가 있으신가요?
• **멋진 아바타와 애니메이션 (Cool Avatars and Animations)**을 만들기 위한 아이디어가 있으신가요?
• **사용자 경험 (User Experience)**을 개선할 아이디어가 있으신가요?
• AI Avatar의 **사용자 수 (Number of Users)**를 늘릴 아이디어가 있으신가요?

그 외 다른 의견들도 언제나 환영합니다!