Claude Fable 5.2로 만든 웹캠 X-레이 거울
I built a webcam X-ray mirror with Claude Fable 5.2
핵심 요약
웹캠으로 얼굴과 손을 실시간 추적해 해부학적 구조를 보여주는 X-레이 거울 웹 앱을 개발함.
- 실시간 추적 — MediaPipe와 three.js를 활용해 얼굴과 손 움직임에 맞춰 3D 해부학 모델을 정밀하게 투영함
- 교육적 활용 — 웹캠과 브라우저만으로 자신의 신체 내부 구조를 탐색할 수 있는 교육용 도구로 설계됨
- Claude 활용 — Fable 5.2 모델이 코드 작성부터 데이터셋 확보, 3D 모델 최적화 및 정렬까지 전 과정을 수행함
- 개인정보 보호 — 모든 영상 처리가 로컬 브라우저에서 이루어지며 외부 서버로 데이터가 전송되지 않음
엑스레이 거울처럼 작동하는 웹 페이지를 하나 만들었음. 웹캠을 얼굴에 비추면 해골, 뇌, 얼굴 근육이 내 머리에 딱 붙어서 움직임에 따라 같이 따라다님. 입을 벌리면 턱도 같이 벌어지고, 손을 들어 올리면 손가락 뼈가 내 손가락을 따라 움직이는 걸 볼 수 있음.
기능
-
해골, 뇌, 근육, 눈을 각각 별도의 레이어로 분리해서 엑스레이 느낌이나 실물 느낌으로 볼 수 있음
-
혼합 현실 뷰: 얼굴 반쪽은 실제 모습, 나머지 반쪽은 내부 구조를 보여주거나, 손가락 끝을 따라다니는 엑스레이 "렌즈" 모드 지원
-
뼈, 뇌 영역, 근육에 대한 선택적 라벨 표시
-
해골을 내 머리 크기에 맞추거나 가장자리를 부드럽게 처리하는 슬라이더 제공
만든 이유
두 가지를 테스트해보고 싶었음. 웹캠이랑 브라우저만으로도 해부학을 자기 몸에 직접 대입해서 탐구할 수 있는 교육용 도구를 만들 수 있을지, 그리고 실제 3D 데이터와 실시간 트래킹을 활용하는 프로젝트에서 Fable 5.2 모델의 성능이 어디까지 통할지 궁금했거든.
Claude의 도움
Claude Fable 5.2 하나로 채팅창에서 다 해결했음. 내가 원하는 걸 설명하니까 Claude가 코드를 전부 다 짜주더라. 오픈 해부학 데이터셋(BodyParts3D)을 찾아서 3D 모델을 단순화하고, 얼굴 트래커의 기준점에 맞춰서 해골이 딱 맞는 위치에 자리 잡도록 정렬까지 해줌. 버전별로 내 웹캠으로 테스트해보고 수정 사항을 계속 요청했는데, 수동 맞춤 슬라이더나 라벨, 가장자리 페더링 같은 기능들도 전부 추가 요청으로 만든 거임. 첫 작동 버전까지 한 시간도 안 걸렸음.
작동 원리
HTML 파일 하나로 돌아감. MediaPipe가 브라우저에서 얼굴이랑 손을 트래킹하고, three.js가 3D를 그려주는 방식임. 영상 처리는 전부 사용자 컴퓨터 안에서만 이루어지고 서버로 업로드되는 건 하나도 없음.
무료 체험
계정 필요 없고 완전 무료임. 여기서 도구를 다운로드해서 브라우저로 바로 써볼 수 있음.
주의할 점: 해부학 모델은 성인 한 명의 실제 데이터를 사용자 머리 크기에 맞춰 스케일링한 거라, 일반적인 위치를 보여주는 용도임. 사용자 본인을 스캔한 게 아니니까 의료용으로 쓰면 안 됨.
해부학 모델: BodyParts3D, © The Database Center for Life Science, CC BY-SA 2.1 Japan.
피드백 환영함. 특히 다양한 얼굴형에서 해골이 얼마나 잘 맞는지 알려주면 큰 도움이 됨.
