멀티모달(이미지·음성·영상)도구/라이브러리TypeScript

shinshin86/mesh-avatar-studio

Turn one illustration into an animated 2D mesh avatar with a coding agent and a local editor

GitHub 에서 보기 ↗카드 기준일 2026-10-31 · 처음 작성 2026-11-02
+748지난 주
73.3%규모 대비 성장률
1,768누적 스타

AI 작성이 카드는 AI(Claude)가 공개 자료(README·릴리스·HN·웹 글)로 쓴 요약입니다. 사람이 검토하지 않았으며, 주장마다 출처 링크와 확인·추정 표시를 붙였습니다. 숫자는 GitHub API 값을 코드가 채웁니다.

013줄 요약

  • 무엇인지 — mesh-avatar-studio는 일러스트 한 장을 눈 깜빡임·입 모양·고개 돌림·호흡·머리카락 흔들림이 있는 2D 메시 아바타로 만드는 도구다. 첫 리깅은 코딩 에이전트(Claude Code·Codex)가 하고, 사람은 로컬 에디터에서 다듬는다.
  • 왜 지금 떴나 — 10월 초 급등일(10-04, 10-06) 전후로 TikTok 튜토리얼과 note 가이드가 퍼졌고, 10-28 급등은 10-26 Reddit 소개글 뒤에 왔다. 이어 10-31에 전신·옷 물리 지원 릴리스가 나와 관심이 이어진 것으로 보인다.
  • 어떤 의미인지 — 코딩 에이전트를 코드 작성이 아닌 이미지 리깅 같은 반복 작업에 쓰고 사람이 GUI로 보정하는 하이브리드 작업 방식의 실사례다. 결과물은 npm 런타임으로 웹앱에 넣을 수 있다.

02숫자

누적 스타1,7682026-10-31
지난 주+748전주 233
규모 대비 성장률73.3%주 시작 1,020
생성10.042026년
주간 스타 · 최근 12주
12주 전10.25 주
이번 주 일별 스타 (UTC)
일 10.25토
항목값
누적 스타1,768 (2026-10-31 기준)
이번 주 증가+748
성장률+73% (주 시작 1,020)
AI 탭 순위규모 대비 급성장 5위
일별 증가10-25 +112 · 10-26 +63 · 10-27 +106 · 10-28 +213 · 10-29 +139 · 10-30 +57 · 10-31 +58
급등일2026-10-04 +150 (이전 기록 0 — 공개·출시 무렵) · 2026-10-06 +139 (이전 기록 0 — 공개·출시 무렵) · 2026-10-28 +213 (평소의 6배)
유형 · 카테고리도구/라이브러리 · 멀티모달(이미지·음성·영상) (보조: 에이전트 스킬·프롬프트)
확인 필요없음

03왜 지금 떴나

  • 2026-10-05 TikTok에 인도네시아어 튜토리얼이 올라왔다. 처음부터 아바타가 움직이기까지의 과정을 다루며, VTuber·VRChat 커뮤니티를 겨냥했다. tiktok.com (확인)
  • 2026-10-06 note에 일본어 완전 가이드가 게시됐다. 에이전트가 준비하고 사람이 로컬 에디터에서 보정하는 구조를 소개했고, 두 번째 급등일과 같은 날이다. note.com (확인)
  • 2026-10-08 Instagram 오픈소스 소개 릴스가 저장소를 다뤘고, 10-12에는 LinkedIn 소개글이 이어졌다. instagram.com · linkedin.com (확인)
  • 2026-10-17 YouTube 개요 영상이 웹캠 트래킹, 마이크 립싱크, OBS 브라우저 소스 연동까지 설명했다. youtube.com (확인)
  • 2026-10-26 Reddit r/BestGitHubRepos에 소개글이 올라왔고, 이틀 뒤 10-28 급등으로 이어진 것으로 보인다. reddit.com (추정)
  • 2026-10-31 mesh-avatar 0.5.0·0.6.0과 react·element 패키지가 함께 릴리스됐다. 실험적 전신 지원, 옷 물리, 하체 체중 이동, 홍채 이동 범위 설정이 추가됐다. GitHub 릴리스 · GitHub 릴리스 · GitHub 릴리스 · GitHub 릴리스 (확인)

04무엇인가

일러스트 한 장을 움직이는 2D 아바타로 만들려면 보통 레이어 분리와 메시 리깅을 손으로 해야 한다. Mesh Avatar Studio는 이 준비 작업을 코딩 에이전트에 맡기고, 사람은 결과를 눈으로 확인하며 고치게 하는 데 초점을 둔다. 결과 아바타는 눈 깜빡임, 말하기, 고개 돌림, 호흡, 머리카락 흔들림을 지원한다.

작업은 4단계다. 1단계에서 Claude Code나 Codex에게 이미지를 주면 에이전트가 docs/agent-guide.md를 따른다. 먼저 좌표 판독 정확도를 점검하고, 확대 그리드 위에 리그를 배치하고, 이미지를 레이어로 자른 뒤, 고정 포즈로 검수한다. 2·3단계는 로컬 에디터에서 진행한다. Pose test와 Lip sync로 결과를 확인하고, 파트의 점을 드래그해 위치를 고친다. 윤곽을 바꾸면 'Save and rebuild layers'로 레이어를 다시 만든다. 4단계에서는 감은 눈·입 모양 그림을 준비한다. Codex CLI가 있으면 npm run create 한 줄로 전 과정을 돌릴 수 있고, OpenAI 이미지 생성으로 눈·입·표정 변형을 그리게 할 수도 있다.

구조는 Node.js 기반 에디터와 Live 페이지가 중심이다. 레이어 재빌드에는 uv·Python을, 모션 검수 렌더링에는 Playwright Chromium을 쓴다. 완성된 .mavatar 파일은 npm 런타임 mesh-avatar로 브라우저 canvas에 불러와 setExpression·setParameters로 제어한다. React·Web Component 패키지도 함께 배포된다. 설치 없이 Chrome·Edge의 Player 페이지에서 내 얼굴과 목소리로 움직여 볼 수도 있다.

05비교

근거가 있는 항목이 없다.

06활용사례

  • 인도네시아 VTuber·VR 크리에이터가 TikTok에 처음부터 아바타를 움직이기까지의 튜토리얼을 올렸다. 댓글에서는 README가 언급하지 않는 OpenCode로도 쓸 수 있는지 문의가 나왔다. tiktok.com (확인)
  • note의 일본어 가이드는 저장소를 클론해 동봉된 샘플 Miko부터 움직여 보라는 입문 경로를 안내한다. note.com (확인)
  • YouTube 개요 영상은 투명 배경 PNG에서 출발해 웹캠 트래킹·캘리브레이션, 마이크 립싱크, OBS 브라우저 소스로 방송에 연결하는 흐름을 보여준다. youtube.com (확인)
  • 랜딩 페이지는 mesh-avatar 런타임의 loadMeshAvatar로 아바타를 웹앱에 임베드하고, 표정과 포즈를 코드로 제어하는 예시를 제공한다. shinshin86.github.io (확인)

07한계·리스크

항목값
라이선스MIT
기여자7
상위 1명 기여 비중91%
지난 30일 이슈열림 7 · 닫힘 5
릴리스 주기약 0일마다
열린 이슈+PR3
  • 10-31 릴리스의 전신·옷 물리 지원은 실험 기능으로 명시돼 있고, 리그 필드와 동작이 바뀔 수 있다. 런타임 패키지들의 마이너 버전도 짧은 간격으로 오르고 있어 API 안정성은 아직 낮다고 봐야 한다. GitHub 릴리스 · GitHub 릴리스 · GitHub 릴리스 (확인)
  • Codex 원클릭 모드의 변형 생성은 이미지와 마스크를 OpenAI로 전송한다. 또 --approve-for-me로 샌드박스 밖 도구 실행 요청을 자동 승인하므로, 민감한 그림이나 보안이 중요한 환경에서는 --no-variants 사용과 승인 정책 검토가 필요하다. GitHub (확인)
  • 공식 지원 에이전트는 Claude Code와 Codex뿐이고, 권장 모델도 고성능 상용 모델로 지정돼 있다. 결과 품질이 모델 성능과 비용에 좌우되며, 다른 에이전트에서의 동작은 보장되지 않는다. GitHub · tiktok.com (추정)
  • 코드는 MIT지만 샘플 에셋 Miko에는 별도 가이드라인이 적용된다. 정밀 정렬·캘리브레이션 같은 수작업 검수 부담도 여전히 남는다. Windows에서는 폴더 권한 문제로 에디터가 프로젝트를 못 읽는 경우가 안내돼 있다. note.com · youtube.com · GitHub (확인)

08변경 기록

  • 2026-11-02 처음 작성 — 기준일 2026-10-31 · 근거 16건

근거