구부정 자세를 멈추세요! MediaPipe와 Electron으로 AI 기반 자세 모니터 만들기 🚀
Source: Dev.to
키보드 앞에 고블린처럼 웅크리고 읽고 있나요? 🧙♂️ 걱정 마세요, 우리 모두 그런 경험이 있습니다. 테크 넥(Tech Neck) 은 21세기의 조용한 생산성 저해 요인입니다. 하지만 개발자들은 단순히 허리 통증을 불평하지 않고, 이를 해결하는 코드를 작성합니다.
이번 튜토리얼에서는 실시간 자세 교정 시스템을 만들어 보겠습니다. 실시간 포즈 추정, MediaPipe, 그리고 WebRTC 를 활용해, 여러분의 등을 (말 그대로) 감시하고 자세가 흐트러지기 시작하면 시스템 수준의 알림을 보내는 데스크톱 애플리케이션을 만들 것입니다. JavaScript 컴퓨터 비전을 사용해 웹캠을 고급 인체공학 컨설턴트로 변신시킬 것입니다.
보다 고급스럽고 프로덕션에 적합한 AI 패턴 및 비전 모델에 대한 심층 탐구를 원한다면, 공식 WellAlly Tech Blog 를 확인해 보세요!
🏗 아키텍처
코드에 들어가기 전에, 웹캠에서 신경계(알림을 통해)까지 데이터가 어떻게 흐르는지 살펴보겠습니다.
graph TD
A[Webcam / WebRTC] -->|Raw Video Stream| B(MediaPipe Pose Engine)
B -->|Landmark Coordinates| C{Geometry Logic}
C -->|Angle > Threshold| D[Slouch Detected]
C -->|Angle |IPC Communication| F[Electron Main Process]
F -->|System Notification| G[User's Desktop]
G -->|User Sits Up Straight| A🛠 사전 요구 사항
따라 하려면 JavaScript에 대한 기본적인 이해가 필요합니다. 여기 우리의 “Anti‑Slouch” 기술 스택이 있습니다:
- MediaPipe – 크로스‑플랫폼 머신러닝 솔루션을 위한 구글의 강력한 도구.
- TensorFlow.js – 브라우저/Electron에서 직접 모델을 실행합니다.
- WebRTC – 카메라 스트림을 처리합니다.
- Electron – 시스템 알림을 보낼 수 있는 데스크톱 툴로 앱을 감싸줍니다.
👨💻 단계 1: 카메라 스트림 설정 (WebRTC)
먼저, 비디오 피드를 가져와야 합니다. getUserMedia API를 사용하는 것이 비디오를 우리 ML 모델에 전달하는 표준 방법입니다.
// renderer.js
async function setupCamera() {
const video = document.getElementById('webcam');
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: 640, height: 480 },
audio: false,
});
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => resolve(video);
});
}🧠 단계 2: MediaPipe로 골격 감지
MediaPipe의 Pose 모델은 33개의 3D 랜드마크를 제공합니다. 자세를 분석할 때 우리는 특히 **코 (0)**와 **어깨 (11, 12)**에 관심을 가집니다.
import { Pose } from "@mediapipe/pose";
const pose = new Pose({
locateFile: (file) =>
`https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`,
});
pose.setOptions({
modelComplexity: 1,
smoothLandmarks: true,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5,
});
pose.onResults(onResults); // We'll define the logic here📐 Step 3: “구부정 로직” (기하학적 계산)
우리는 “구부정”을 어떻게 정의할까요? 일반적으로 코와 어깨 사이의 수직 거리가 너무 작아져서 머리가 앞으로 기울어졌음을 나타낼 때를 말합니다.
function calculateSlouch(results) {
const landmarks = results.poseLandmarks;
if (!landmarks) return;
// Grab the nose and the average shoulder position
const nose = landmarks[0];
const leftShoulder = landmarks[11];
const rightShoulder = landmarks[12];
const shoulderY = (leftShoulder.y + rightShoulder.y) / 2;
const neckDistance = shoulderY - nose.y;
// If the vertical distance drops below a threshold,
// the user is likely slouching.
const THRESHOLD = 0.15;
if (neckDistance 60_000) {
window.electronAPI.sendAlert(); // IPC to main process
lastAlertTime = Date.now();
}
}🌟 “공식적인” 확장 방법
이 초보자 친화적인 버전은 로컬에서 작동하지만, 프로덕션 수준의 비전 앱은 보다 견고한 처리가 필요합니다—예를 들어, 조명 조건 변화, 카메라 각도, 그리고 성능을 위한 모델 양자화 등입니다.
MediaPipe를 프로덕션 환경에 최적화하거나 대형 멀티모달 모델(예: GPT‑4o)을 통합하여 고급 시각적 추론을 구현하는 심층 아키텍처 패턴에 대해 자세히 알아보려면 **wellally.tech/blog**의 리소스를 확인하세요. 여기서는 엣지 배포부터 단순 좌표 연산을 훨씬 뛰어넘는 정교한 비전 파이프라인까지 모든 내용을 다룹니다. 🥑
🎯 결론
당신은 이제 척추를 보호하는 기능적인 AI 어시스턴트를 만들었습니다! 🦴 여기서 다룬 내용은 다음과 같습니다:
- WebRTC를 통한 비디오 캡처.
- MediaPipe로 인간 랜드마크 추출.
- 간단한 기하학을 이용한 구부정함 지표 계산.
- Electron을 통한 OS‑level 알림 전송.
바른 자세를 유지하고, 생산성을 높이세요! 🚀
MediaPipe 사용
- Geometry Logic을 적용하여 나쁜 자세를 감지합니다.
- Electron Notifications을 트리거하여 사용자에게 알립니다.
다음 단계
- “보정” 버튼을 추가하여 사용자가 “완벽한” 자세를 기준선으로 설정할 수 있게 합니다.
- 시간에 따라 “구부정 자세 빈도”를 추적할 수 있는 대시보드를 추가합니다.
어떻게 생각하시나요? AI가 당신의 자세를 판단하는 것을 신뢰하시겠습니까, 아니면 조금 “빅 브라더” 같나요? 댓글로 알려주세요! 👇