피드로 돌아가기
Stop Slouching! Build an AI-Powered Posture Monitor with MediaPipe and Electron
Dev.toDev.to
AI/ML

MediaPipe와 Electron 기반 실시간 자세 교정 시스템 구축

Stop Slouching! Build an AI-Powered Posture Monitor with MediaPipe and Electron

Beck_Moulton2026년 6월 30일5beginner

Context

장시간 개발 작업 시 발생하는 거북목 및 구부정한 자세로 인한 건강 저하 문제 해결 필요. 웹캠 기반의 실시간 모니터링을 통해 사용자에게 즉각적인 피드백을 제공하는 데스크톱 애플리케이션 설계 요구.

Technical Solution

  • MediaPipe Pose 모델을 통한 신체 33개 Keypoints의 3D 좌표 실시간 추출
  • 귀(7, 8), 어깨(11, 12) 좌표 간의 x축 거리 및 각도 계산을 통한 Forward Head Posture 판별 로직 구현
  • Electron의 getUserMedia API를 활용한 로컬 웹캠 스트림 획득 및 메인 프로세스 기반 시스템 알림 송출
  • Model Complexity 1 설정 및 Smooth Landmarks 활성화를 통한 탐지 정확도와 연산 효율의 균형 확보
  • 0.15라는 임계값(Threshold) 설정을 통해 단순 움직임과 실제 나쁜 자세를 구분하는 Geometry Engine 설계
  • Canvas API 기반 Ghost Overlay 구현으로 사용자 캘리브레이션을 위한 실시간 시각적 피드백 제공

- AI 모델 도입 시 Model Complexity 설정을 통한 런타임 성능 최적화 검토 - 단순 좌표값 대신 기준축 기반의 각도(Trigonometry) 계산을 통한 환경 독립적 판별 로직 설계 - UI 스레드 부하 방지를 위해 고부하 연산의 Web Workers 이관 및 Rust 기반 백엔드 오프로딩 고려 - 잦은 알림 방지를 위한 Temporal Smoothing 및 지속 시간 기반의 알림 트리거 로직 적용

원문 읽기