LONG VIEW
사진 한 장으로 3D 얼굴을 만들고, FBX 캐릭터를 VRM으로 바꾸고, 웹캠으로 아바타를 움직입니다. 파일은 서버로 올라가지 않고 지금 쓰는 기기 안에서 처리됩니다. 한 사람이 직접 만들고, 안 되는 경우까지 적어 둡니다.
MediaPipe · WebGPU · WebAssembly · three.js · 기기 내 처리
어디서 시작할까
VRoid·Mixamo·Blender에서 만든 모델을 VTuber·VRChat용으로 준비하는 단계를 순서대로 다룹니다. 어느 단계든 여기서 시작할 수 있습니다.
3D 아바타 도구
각 페이지에는 실행 화면과 함께 어떤 파일에서 잘 되고 어떤 경우 실패하는지, 실패하면 무엇을 확인해야 하는지를 적어 두었습니다.
사진 → 3D
얼굴의 468개 점을 측정해 머리카락까지 포함한 3D 머리를 만듭니다. 좌우 사진을 더하면 옆면이 실측되고, 바디에 얹어 내보낼 수 있습니다.
도구와 가이드 열기 →FBX → VRM
Mixamo 리그의 본 52개를 자동으로 매핑하고 T포즈로 펴서 VRM 1.0으로 내보냅니다. 텍스처 지정, 깨진 바인드 행렬 복구까지 브라우저 안에서 끝납니다.
도구와 가이드 열기 →웹캠 + VRM
웹캠만으로 VRM 아바타의 표정, 상체, 손가락을 실시간으로 움직입니다. 카메라 영상은 기기 밖으로 나가지 않습니다.
도구와 가이드 열기 →뷰어 + 진단
GLB·GLTF·FBX·OBJ·STL·PLY를 열어 정점·삼각형·애니메이션을 확인합니다. 안 열리거나 검게 보이는 이유를 증상별로 짚어 줍니다.
도구와 가이드 열기 →이미지·영상 도구
아바타 작업에 딸려 오는 이미지·영상 처리도 같은 원칙으로 만들었습니다. 설치 없이, 업로드 없이.
AI + WebGPU
Real-ESRGAN으로 2배·4배 확대합니다. 저해상도 텍스처와 썸네일을 키울 때 씁니다.
도구와 가이드 열기 →이미지
크기 조절, 자르기, 회전, 압축, JPG·PNG·WEBP 변환을 한 화면에서 처리합니다.
도구와 가이드 열기 →영상 + GIF
방송 클립을 GIF로, 무거운 GIF를 MP4로. 구간 자르기와 크기·속도 조절도 브라우저 안에서 끝납니다.
도구와 가이드 열기 →아이폰 영상
MOV·HEVC 영상을 윈도우와 웹에서 바로 재생되는 MP4(H.264)로 바꿉니다.
도구와 가이드 열기 →만드는 기준
3D·이미지·영상의 핵심 처리는 브라우저에서 합니다. 서버 전송이 필요한 기능이 생기면 그 페이지에 따로 밝힙니다.
Mixamo·VRoid·Blender에서 나온 실제 파일로 파일 선택부터 내보내기까지 확인하고, 브라우저와 기기에 따라 달라지는 조건을 기록합니다.
안 열리는 FBX, 검게 나오는 모델, 느려지는 이유처럼 실패했을 때 무엇을 봐야 하는지를 숨기지 않습니다.
Long View 이야기
아바타 하나 만들려면 Unity, Blender, VRM 플러그인을 차례로 설치하고, 파일을 어딘가에 올려 변환해야 하는 경우가 많습니다. Long View는 그 과정을 브라우저 표준 기술만으로 어디까지 줄일 수 있는지 직접 만들며 확인하는 곳입니다.
그래서 도구 페이지에는 실행 버튼만 두지 않습니다. 어떤 기술을 썼는지, 파일이 어디서 처리되는지, 어떤 모델에서 잘 되고 어떤 모델에서 깨지는지를 함께 씁니다. 만들면서 부딪힌 것은 제작 노트로 남깁니다.
최근 업데이트
도구를 고치거나 새로 만들 때마다 무엇이 바뀌었는지 최신순으로 정리합니다.
VRM은 레스트 포즈를 T포즈로 정의합니다. A포즈 모델을 그대로 내보내면 모션을 입힐 때 팔이 처음 각도만큼 어긋납니다. 규격 문서의 8개 외형 기준과 0.x·1.0의 차이, 강제 T포즈가 위팔만 돌려 팔을 펴는 방식과 그 한계를 적었습니다.
텍스처 없이 연 FBX는 재킷이 보라, 손과 신발이 초록으로 보였습니다. 이미지 33장, 재질 9개 중 6개 자동·3개 수동 연결, 존재하지 않는 D: 절대경로 눈 텍스처까지 텍스처가 빠지는 경로를 순서대로 짚습니다.
Mixamo·3ds Max FBX를 VRM으로 바꿀 때 본 매핑이 틀어지는 다섯 가지 경우를 증상별로 정리했습니다. Collar/Shoulder 이름 충돌, 중복 본, mixamorig: 접두어, 엄지 이름, 계층 빈칸을 확인하는 방법까지 담았습니다.
스킨 가중치도 본 배정도 정상이었습니다. 파싱 직후 0이던 bind 행렬 오차가 첫 월드 행렬 갱신 뒤 156.57로 뛰었고, 메시를 현재 월드 행렬로 다시 바인드하자 303×172×181cm이던 캐릭터가 44×170×27cm로 돌아왔습니다.
사진 한 장에서 468개 지점을 찾아 머리카락까지 포함한 3D 얼굴을 만들고 .glb로 내려받는 무료 브라우저 도구. 깊이 추정의 원리와 한계까지 설명합니다.
연소득과 기존 대출을 넣으면 DSR 한도 안에서 받을 수 있는 대출액이 나옵니다. 스트레스 금리까지 반영합니다.
전세보증금과 월세를 법정 전환율로 서로 바꿔 봅니다. 어느 쪽이 유리한지 판단하는 기준까지 정리했습니다.
브라우저에서 FBX를 VRM 1.0으로 바꾸는 무료 변환기입니다. Mixamo 본 자동 매핑과 T포즈·스케일 규칙, 증상별 문제 해결 사전까지 정리했습니다.
브라우저 안에서만 돌아가는 AI 도구 셋을 만들며 배운 교훈을 정리했습니다. 다운로드 크기, 보안 격리, 메모리, 폴백 설계, 출시 전 검증까지.
웹캠 영상이 MediaPipe 랜드마크, Kalidokit 관절 회전, Three.js 렌더를 거쳐 VRM 아바타의 움직임이 되기까지, 파이프라인을 해부합니다.
모델이 안 열리거나 검게 보일 때, 애니메이션이 없다고 나올 때 원인을 좁히는 진단 가이드. GLB·FBX 등 6개 포맷을 브라우저에서 확인합니다.
화면녹화를 GIF로, 무거운 GIF는 MP4로. 설치 없이 브라우저에서 도는 네 가지 변환 도구의 사용법과 한계를 용도별로 정리했습니다.
아이폰 HEVC 영상을 어디서나 재생되는 H.264 MP4로. 서버 업로드 없이 브라우저에서 변환하는 순서를 정리했습니다.
자르기→리사이즈→압축→변환 순서로 정리한 브라우저 이미지 편집 가이드. PNG에서 품질 슬라이더가 무시되는 이유와 재인코딩 손실까지 짚습니다.
연봉으로 감당할 수 있는 집값을 역산합니다. 소득 대비 상환 비율과 금리·기간 가정을 바꿔 가며 확인해 보세요.
