Build Tool 없는 Vanilla JS 기반 MediaPipe Face Landmarker 구현 및 최적화

How I Got MediaPipe Face Landmarker Running in the Browser with Zero Build Tools (And the Import Bug That Wasted My Week)

Khan2026년 4월 30일10분intermediate

AI 요약

Context

Privacy-first 설계를 위해 서버 전송 없는 WebAssembly 기반 Client-side 분석 시스템 구축 필요. Build Tool(Webpack, Vite 등)을 배제한 Vanilla JS 환경과 WordPress 테마의 제약 사항으로 인해 라이브러리 로딩 및 WASM 초기화 과정에서 런타임 오류 발생.

Technical Solution

jsDelivr CDN 패키지 루트 경로 임포트를 통한 ES Module 명명된 내보내기(Named Exports) 참조 문제 해결
FilesetResolver의 WASM 경로를 파일명이 아닌 디렉토리 경로로 지정하여 런타임 진입점 자동 해석 유도
WordPress 환경 내 스크립트 태그에 type="module" 속성을 강제 적용하여 모듈 스코프 격리 및 Dynamic Import 활성화
GPU Delegate 설정을 통한 하드웨어 가속 활용 및 478-point 3D 모델의 실시간 추론 성능 확보
랜드마크 좌표 기반의 3가지 기하학적 제약 조건(눈 거리, 수평 회전, 수직 기울기) 검증 로직을 통한 캡처 품질 보장

실천 포인트

- CDN 기반 MediaPipe 도입 시 @latest 대신 특정 버전(v

0.14 등)을 명시하여 Breaking Change 방지 - WASM 모듈 로드 시 파일 경로가 아닌 디렉토리 경로를 전달하여 CDN의 엔트리 포인트 해석 메커니즘 활용 - 브라우저 환경의 Dynamic Import 사용 시 스크립트 태그의 type="module" 설정 여부 확인 - AI 모델 기반 캡처 시스템 설계 시 랜드마크 간 상대 거리 및 좌표 차이를 이용한 유효성 검증 단계 추가

태그

#Vanilla JS #ES Modules #WebAssembly #Client-side ML #MediaPipe

원문 읽기