MediaPipe 기반 브라우저 로컬 추론을 통한 양방향 ASL 통신 시스템 구축

SignBridge — The Bidirectional ASL Communication Bridge Built to Break Accessibility Barriers

Chijioke Joseph2026년 6월 7일3분intermediate

AI 요약

Context

초기 Google Hackathon 당시 sign.mt 클라우드 파이프라인에 의존한 단방향 렌더링 구조 설계로 인한 확장성 부족 발생. 특히 웹캠 기반의 실시간 수어-텍스트 변환 기능 부재와 불안정한 코드베이스로 인한 프로토타입 수준의 한계 노출.

MediaPipe Hands를 브라우저 로컬에 통합하여 서버 통신 없는 실시간 Hand Landmark 트래킹 및 제스처 배열 매칭 로직 구현
Next.js 15 및 React 19 도입을 통한 최신 런타임 환경 구축 및 TypeScript 기반의 타입 안정성 확보
legacy-peer-deps 설정을 통한 pose-viewer 파이프라인의 의존성 분리로 Client-side Rendering 지연 시간 제거
raw coordinate matrix를 토큰화된 어휘 배열로 변환하는 수학적 모델링 적용으로 인식 정확도 향상
Speech-to-Text API 연동을 통한 입력 인터페이스 확장 및 Avatar 엔진과의 데이터 파이프라인 연결

실천 포인트

1. 실시간 인터랙션이 필요한 ML 모델은 서버 추론보다 MediaPipe와 같은 브라우저 로컬 추론 라이브러리를 우선 검토할 것

2. 메이저 버전 업데이트(React 19 등) 시 발생하는 Peer Dependency 충돌은 TypeScript Wrapper 설계를 통해 하이드레이션 파이프라인을 보호할 것

3. 복잡한 좌표 계산 및 행렬 변환 로직 작성 시 AI 도구를 활용하여 수학적 모델링 시간을 단축하고 검증에 집중할 것

태그