기존의 자세 교정 프로그램들은 주로 측면 촬영 기반으로 측정하기 때문에
기기를 별도로 설치하거나 공간 세팅이 필요한 불편함이 있었다.
본 웹 어플리케이션은 정면 웹캠 영상만으로 거북목 여부를 추정하므로,
추가 장비 없이도 컴퓨터 작업 도중 간편하게 자세를 측정할 수 있다.
- Google MediaPipe의 Pose Landmarker 모델을 사용해 실시간으로 신체 랜드마크를 추출
- 프론트엔드(Next.js)에서 이를 분석하여 거북목 자세를 자동 판별
- Three.js를 활용해 사용자의 평균 자세를 3D 모델로 시각화
- PostgreSQL + NeonDB 기반으로 측정 데이터를 저장 및 관리
| 구분 | 기술 |
|---|---|
| Frontend | Next.js, React, TypeScript, TailwindCSS |
| AI / Pose Estimation | MediaPipe Pose Landmarker |
| 3D Visualization | Three.js |
| Backend / DB | PostgreSQL, AWS EC2 |
| Tools | GitHub, Figma, VS Code, Jira |
Jira link | https://kge0211114.atlassian.net/jira/software/projects/TNA/boards/34?atlOrigin=eyJpIjoiYjhhOGVmODg0ZTdmNGM5NTg1ZTk4ZTQ1ZWI1MjY5NzciLCJwIjoiaiJ9
- 프론트엔드 전체 구조 및 화면 컴포넌트 설계
- 거북목 자세 판별 알고리즘 구현
- EC2 인스턴스 환경 구성 및 PostgreSQL 연동
- 실시간 측정 중 시청각적 피드백 추가
# Repository 클론
git clone https://github.com/CapstoneDesign-KHU-2025/forward_head_posture_detect_application.git
cd forward_head_posture_detect_application
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev
- 김가은(2021105055): AI, Backend
김가은 | kge0211114@gmail.com - 남지민(2022110203): Frontend
남지민 | dnpsel2737@gmail.com - 박승현(2022103410): Frontend(Three.js)
박승현 | seunghyuni00@khu.ac.kr - 허준(2019102242): AI
허준 | heojun8500@naver.com