엔지니어들은 장시간 컴퓨터 사용으로 인해 좋지 않은 자세를 갖게 되는 경우가 많으며, 이는 허리 통증과 생산성 저하로 이어집니다. 이 글은 컴퓨터 비전과 자세 추정 기술을 사용하여 사용자의 구부정한 자세와 앞으로 숙인 머리 자세를 감지하고 경고하는 브라우저 도구인 Posture Guardian을 소개합니다. 이 도구는 자세 추정을 위해 MediaPipe를, 사용자 인터페이스를 위해 Vue.js를 활용합니다. 아키텍처는 웹캠 프레임을 캡처하고, MediaPipe로 처리하여 골격 랜드마크를 감지하며, 삼각법을 사용하여 좋지 않은 자세를 나타내는 각도를 계산하는 과정을 포함합니다. 사전 요구 사항으로는 Vue.js 3, MediaPipe Pose, 기본적인 JavaScript 지식, 그리고 웹캠이 있습니다. 설정 과정에는 주요 신체 랜드마크를 식별하기 위해 MediaPipe Pose 모델을 초기화하는 것이 포함됩니다. "앞으로 숙인 머리" 자세는 귀와 어깨 사이의 수평 거리를 계산하여 감지됩니다. 이 로직은 Webcam API를 사용하여 비디오 스트림을 자세 모델에 공급하는 Vue 컴포넌트에 통합됩니다. 이 컴포넌트는 실시간 자세 상태를 표시하고 좋지 않은 자세가 감지될 때 브라우저 알림을 트리거합니다. 프로덕션 준비를 위해서는 조명 변화, 카메라 보정 처리, 알림 스팸 방지가 필요합니다. 이 도구는 스트레칭 타이머 및 자세 점수와 같은 기능으로 확장될 수 있습니다.