VS Code를 넘어 웹 브라우저까지, VRM 3D 아바타 확장으로 구현한 개발자 경험 최적화

Context

기존 AI Avatar는 VS Code 사이드바 내에서만 동작하는 구조적 한계 존재. 사용자가 웹 브라우징 중에도 AI 반응을 확인하고자 하는 요구사항 발생. 단일 포즈 설정만 가능한 Pose Editor로 인해 애니메이션의 생동감 부족 문제 직면.

Technical Solution

• Chrome 및 Edge 브라우저 지원을 위한 Chrome Extension 버전 확장 개발
• VS Code 버전의 기존 로직을 재사용하고 브라우저 환경의 차이점만 구현하는 Diff 기반 개발 전략 채택
• 단일 포즈 기반에서 다중 포즈 설정이 가능한 Animation Editor로 시스템 고도화
• 시퀀스 형태의 포즈 설정을 통해 팔 굽히기 후 펴기 같은 연속 동작 구현 가능 구조 설계
• 모든 기본 애니메이션을 단일 포즈에서 풀 애니메이션 형태로 재작성하여 시각적 품질 개선
• VRM 3D 캐릭터 모델을 활용하여 Claude Code 및 GitHub Copilot AI 활동과 연동하는 반응형 인터페이스 구축

Impact

• Chrome(70%) 및 Edge(10%) 사용자를 포함한 대부분의 웹 브라우저 환경 커버리지 확보

Key Takeaway

플랫폼 확장 시 전체 코드를 재작성하지 않고 환경 간 차이점만 처리하는 Diff 개발 방식은 개발 효율성을 극대화하는 전략임.