내 얼굴 따라 움직이는 웹 캐릭터, LivLiv Player

livliv-dev/player는 웹에서 도는 가벼운 2.5D 캐릭터 플레이어입니다. 웹페이지, 방송 오버레이, 앱에 캐릭터를 넣고 표정과 입, 고개를 움직입니다. 2026년 11월 4일 공개됐고 11월 7일 기준 깃허브 스타 950개입니다.

WebGL2로 그리고 의존성이 없습니다. 본체는 gzip 기준 약 30KB입니다.
립싱크(마이크, 오디오, 영상)와 웹캠 얼굴 추적(MediaPipe)이 모두 브라우저 안에서 돌고, 필요할 때만 불러옵니다.
LivLiv 캐릭터, VRM, PNGTuber를 같은 API로 띄웁니다.

공식 데모에서는 버튼으로 표정과 동작을 바꿔 봅니다.

설치와 기본 코드

npm install @livliv-dev/player

import { Player } from '@livliv-dev/player'

const player = new Player(document.querySelector('canvas'))
await player.load('characters/k01/')

player.setExpression('smile')    // 표정 id는 player.expressions
player.act('nod')                // 끄덕이기
player.params.mouthOpen = 0.6    // 입 벌림 0~1

npm 패키지에는 플레이어만 들어 있습니다. 캐릭터는 저장소의 characters/ 폴더에서 복사해 씁니다.

립싱크와 얼굴 추적

import { createSpeech } from '@livliv-dev/player/voice'
import { startFaceTracking } from '@livliv-dev/player/tracking'

const speech = createSpeech(player)
button.onclick = () => { speech.unlock(); speech.say('/reply.mp3') }

await startFaceTracking(player)   // @mediapipe/tasks-vision 필요

음성 파일을 재생하면 입이 소리에 맞춰 움직이고, 얼굴 추적을 켜면 웹캠 속 내 고개와 표정을 캐릭터가 따라 합니다.

VRM과 PNGTuber

VRoid Studio 등에서 만든 VRM(three.js와 @pixiv/three-vrm 필요)이나, 입 닫은 그림과 연 그림 두 장짜리 PNGTuber도 같은 방식으로 띄웁니다.

import { BodyPlayer } from '@livliv-dev/player/body'
import { PngBody } from '@livliv-dev/player/png'

const png = new BodyPlayer(canvas, new PngBody())
await png.load({ closed: 'me-closed.png', open: 'me-open.png' })

코드 없이 넣으려면 livliv.ai/live/<id> 페이지를 iframe으로 붙입니다. 배경이 투명해 OBS 브라우저 소스로도 씁니다.

캐릭터 라이선스

플레이어 코드는 Apache-2.0입니다. 들어 있는 캐릭터 21명은 Apache 라이선스가 아닙니다.

LivLiv가 만든 캐릭터: 개인·비상업 프로젝트에 무료, 출처 “Characters: LivLiv (livliv.ai)” 표기. 판매, 상업적 사용, AI 학습은 안 됩니다.
Kujira, Kujira Q, Pen: 다른 사람의 작품이라 위 조건이 적용되지 않습니다. 출처와 조건은 characters/CREDITS.md에 있습니다.

캐릭터 오른쪽 아래에는 플레이어가 그리는 작은 LivLiv 표시가 붙습니다.

지원 브라우저

WebGL2와 ES2023이 필요합니다. Chrome·Edge 97 이상, Firefox 104 이상, Safari 15.4 이상이고, 데스크톱 브라우저에서 시험했으며 휴대폰은 아직이라고 README에 적혀 있습니다.

오늘 할 일

npm install 한 줄로 내 블로그 소개 페이지에 캐릭터 하나를 세워 보세요. LivLiv 캐릭터를 쓴다면 출처 한 줄도 함께 넣으세요.

쇼츠로 보기

이 글은 비치콤버스 쇼츠 No.42의 짝 글입니다. 짧은 주소 beachcombers.co.kr/s/42.