웹캠 앞에서 손을 흔들면 화면 속 3D 캐릭터가 마주 손을 흔듭니다. 고개를 기울이면 같이 기울이고, 입을 벌리면 같이 벌립니다. 특별한 장비도, 설치할 프로그램도 필요 없습니다. 브라우저 탭 하나와 평범한 카메라면 충분하고, 모든 트래킹은 지금 쓰고 있는 기기 안에서 돌아갑니다.
위 도구에서 바로 써 볼 수 있습니다(카메라 접근을 허용해야 합니다). 화면이 안 보이면 새 탭에서 전체 화면으로 여세요.
시작은 3단계
- VRM 파일을 선택합니다. 캐릭터가 없다면 VRoid Studio로 무료로 만들 수 있습니다.
- “Start Camera”를 누르고 카메라 접근을 허용합니다.
- 얼굴과 상체가 화면에 들어오게 한 뒤 움직입니다.
몸이 잘 안 따라오면 대부분 거리 문제입니다. 어깨가 보일 만큼 뒤로 물러서면 해결됩니다.
파이프라인 해부: 카메라 프레임에서 아바타까지
이 도구의 정체는 네 단계짜리 파이프라인입니다. 카메라가 프레임을 만들고, MediaPipe가 랜드마크를 찾고, Kalidokit이 그 좌표를 관절 회전으로 바꾸고, Three.js가 캐릭터를 그립니다. 아바타가 이상하게 움직일 때 어느 단계가 범인인지 짚을 수 있도록, 단계마다 무슨 일이 일어나고 어디까지가 한계인지 순서대로 뜯어봅니다.
1단계: 카메라 프레임
출발점은 브라우저가 받아오는 영상 프레임입니다. 이 단계의 품질이 나머지 전체의 상한선을 정합니다. 역광이면 얼굴이 어두워져 검출이 흔들리고, 손이 프레임 밖에 있으면 애초에 찾을 대상이 없습니다.
여기서 막히는 전형적인 증상은 검은 화면입니다. 브라우저의 사이트 권한, 운영체제의 카메라 권한, 다른 프로그램의 카메라 점유 순서로 확인하고, 권한을 바꿨다면 페이지를 새로고침하세요.
2단계: 랜드마크 검출 — MediaPipe
프레임이 들어오면 Google의 MediaPipe가 얼굴에서 468개, 몸에서 33개, 손 하나당 21개의 점을 찾습니다. 이 좌표만으로 머리의 돌림·끄덕임·기울임, 눈 깜빡임과 입 모양(말하는 모습까지 흉내냅니다), 어깨·팔·상체 방향, 그리고 주먹과 편 손의 차이까지 구분됩니다. 머리·표정·몸·손가락 네 가지 트래커는 각각 켜고 끌 수 있습니다. 웹에서 어떤 태스크가 도는지는 공식 Face Landmarker와 Pose Landmarker 문서에 정리되어 있습니다.
이 단계의 한계는 두 갈래입니다. 첫째는 정확도입니다. 손가락이 서로 겹치면 손 랜드마크가 불안정해집니다. 손이 튀거나 사라지면 손을 프레임 안에 두고, 동작을 약간 늦추고, 정면 조명을 보강하세요. 둘째는 비용입니다. 검출은 매 프레임 도는 무거운 연산이라, 움직임이 늦게 따라오면 카메라 해상도를 낮추고, 안 쓰는 트래커를 끄고, 애니메이션 프레임당 모델을 한 번 넘게 돌리지 않아야 합니다. 느린 기기에서는 손이나 몸 트래커만 꺼도 프레임레이트가 눈에 띄게 좋아집니다.
3단계: 관절 회전 — Kalidokit과 VRM
랜드마크는 아직 화면 위의 점일 뿐입니다. Kalidokit이 이 점들을 관절 회전값으로 변환해 VRM 캐릭터의 휴머노이드 본에 적용합니다. 아바타가 사람처럼 움직이는 것은 이 변환 덕분입니다.
이 단계의 문제는 대개 모델 쪽에 있습니다. 아바타가 엉뚱한 방향을 보고 있다면 VRM 모델의 전방 축과 휴머노이드 본 매핑이 표준과 맞는지 확인하세요. 모델이 아예 안 열리면 카메라가 아니라 파일이 문제일 가능성이 큽니다. 로컬 3D 모델 뷰어에서 VRM/GLB 파일을 먼저 검증해 보고, 거기서도 실패하면 에셋 자체의 문제입니다.
4단계: 렌더 — Three.js와 WebGL
마지막으로 Three.js가 회전값이 적용된 캐릭터를 WebGL로 매 프레임 그립니다. 여기까지 전 과정이 JavaScript와 WebGL만으로 기기 안에서 처리됩니다.
렌더 자체보다 위험한 것은 앞 단계의 추론이 메인 스레드를 막는 상황입니다. 영상 추론이 UI와 같은 스레드에서 돌면 화면 전체가 버벅일 수 있어서, 프로덕션에서는 무거운 연산을 가능한 한 메인 스레드 밖으로 옮기는 설계가 필요합니다. 이 설계는 브라우저 AI 개발 플레이북에서 자세히 다룹니다.
60초 세팅 루틴
실시간 모션 캡처의 품질은 트래킹 모델만큼이나 카메라 세팅과 프레임 타이밍에 좌우됩니다. 아바타나 브라우저가 고장 났다고 결론 내리기 전에 아래 순서로 한 번만 점검해 보세요.
- 카메라를 눈높이 근처에 두고 부드러운 조명을 정면에서 받습니다. 등 뒤의 밝은 창문은 피하세요.
- 어깨·팔꿈치·손이 모두 프레임에 들어올 만큼 물러섭니다. 얼굴만 쓸 거라면 몸 트래킹을 끈 뒤에 가까이 가세요.
- 필요한 트래커만 켭니다.
- 몇 초간 정면을 보며 무표정을 유지한 다음, 머리·입·깜빡임·팔 순서로 하나씩 테스트합니다.
- 미리보기가 끊기면 다른 카메라 앱과 무거운 브라우저 탭을 닫습니다.
어디에 쓸 수 있나
버추얼 아바타 방송, 얼굴을 비추기 부담스러운 화상회의, 교육·재활 시연, 빠른 인터랙티브 프로토타입까지 — 전부 링크 하나로 됩니다.
방송 전 프라이버시 점검
이 도구는 카메라 영상을 서버로 보내거나 저장하지 않으며, 의심스러우면 개발자 도구의 네트워크 탭에서 직접 확인할 수 있습니다. 다만 이 페이지 뒤에 연결하는 방송·회의 소프트웨어는 렌더링된 화면을 밖으로 내보낼 수 있으니, 송출 서비스의 프라이버시 설정을 따로 점검해야 합니다. 그리고 공개할 권한이 있는 모델과 텍스처만 사용하세요.
자주 묻는 질문
카메라 영상이 어딘가에 저장되나요?
아니요. 모든 분석이 브라우저 안에서 끝납니다.
휴대폰에서도 되나요?
네. 최신 모바일 브라우저에서 동작합니다. 다만 연산 부담이 커서 프레임레이트는 PC보다 낮을 수 있습니다.
어떤 파일이 필요한가요?
VRM 형식의 3D 캐릭터 파일이 필요합니다. VRoid Studio 같은 도구로 무료로 만들 수 있습니다.
무료인가요?
네. 설치도 가입도 없이 무료로 쓸 수 있습니다.