AI Avatar v20 — VS Code와 브라우저에서 응원하는 VRM 아바타에 복셀 정원·커서 아바타·알림 아바타 추가

본문

AI Avatar는 VRoid(VRM) 아바타가 코딩하는 동안 응원해 주는 무료 앱입니다. VS Code 사이드바에서는 Claude Code와 GitHub Copilot에, 브라우저 사이드 패널에서는 ChatGPT와 Claude에 반응하며, 애니메이션과 말풍선은 AI 없이도 동작합니다. 개발자 webdeveloperhyper가 v20 업데이트에서 Voxel Avatar, Kaleidoscope, Cursor Avatar, Notification Avatar 네 가지 새 기능을 공개했습니다.

Voxel Avatar — 방치형 가드닝 모드

협업자인 Maximum Blue의 요청으로 방치형(idle) 게임 모드를 추가했습니다. AI Avatar가 Claude Code나 클릭을 트리거로 동작하기 때문에 방치형 게임 개념과 잘 맞는다고 판단했고, 주제는 DEV Community 친구가 가드닝을 좋아한다는 이유로 꽃 재배로 정했습니다. Minecraft 스타일의 단순한 복셀 정원으로, Claude Code가 자동으로 꽃밭을 키우게 하거나 직접 클릭해 수동으로 가꿀 수 있습니다. 땅을 고르고 꽃을 심고 나비를 배치할 수 있으며, 가끔 비가 내린 뒤에는 무지개가 뜹니다.

저자는 가장 어려웠던 부분이 코딩이 아니라 3D 오브젝트 제작이었다고 밝힙니다. Three.js로 간단한 3D 꽃을 만들려 했는데 AI가 제대로 만들지 못해, 처음 결과물이 구가 얹힌 원기둥 수준이었다고 합니다. 결국 꽃술 주위에 얇은 원기둥으로 만든 타원형 꽃잎 5장을 배치하는 식으로 한 단계씩 상세히 설명해 가며 만들어야 했다는 경험담을 전합니다.

Kaleidoscope 모드와 TTS 개선

랜덤 도형 배경을 즐길 수 있는 Kaleidoscope 모드가 추가됐고, 도형은 원하는 대로 조절할 수 있습니다. TTS(text-to-speech)는 기존에 음질이 좋은 Kokoro를 사용했지만 약간의 지연과 별도 설정이 필요해, 더 간편한 선택지로 Piper TTS를 추가했습니다.

Electron 데스크톱 앱과 Cursor Avatar

AI Avatar는 확장 프로그램이라 VS Code와 Chrome 사이드 패널 안에서만 살 수 있었는데, 이번에 스핀오프로 Electron 데스크톱 앱을 만들어 사이드 패널 밖 어디에서든 아바타를 띄울 수 있게 했습니다. Cursor Avatar는 클릭하는 위치마다 VRM 아바타가 애니메이션과 응원 말풍선과 함께 나타나는 기능으로, 별도 GitHub 저장소(webdeveloperhyper/cursor-avatar)에 공개돼 있습니다.

Notification Avatar — Hooks로 에이전트 종료 알림

저자는 업무에서 Claude Code와 Codex를 쓰는데, 이들 도구에는 기본적인 정지·승인 알림이 없어 작업이 멈춘 것을 자주 놓쳤다고 합니다. 그래서 Hooks를 활용해 알림을 만들기로 했고, 먼저 간단한 스크립트로 동작을 검증한 뒤(claude-code-codex-notification 저장소) 이를 아바타에 통합해 Notification Avatar(notification-avatar 저장소)를 완성했습니다. Hooks로 할 수 있는 일이 더 있어 보여 추가로 학습하겠다는 계획도 덧붙였습니다.

설치 방법과 후속 계획

VS Code 확장은 확장 마켓에서 'AI Avatar'를 검색하거나 Marketplace 페이지에서 설치할 수 있고, Chrome Web Store에서도 브라우저용 버전을 받을 수 있습니다. 저자는 이미 v21 업데이트 작업에 들어갔으며, 다음 업데이트에는 최신 AI도 활용하고 싶다고 밝혔습니다. 아바타 기능·AI 연동·UX 개선·사용자 확대에 대한 아이디어를 독자들에게 열어두고 댓글을 요청하고 있습니다.

원문: dev.to / 번역·요약: Trawling