팀이 한 일
SSAFY 교육 과정 팀 프로젝트로 6명이 만들었습니다. 이 가운데 1명이 지금 포너즈 구성원으로, 팀에서 PM과 CI/CD를 맡았습니다.
- 요구사항 정의서, 와이어프레임, 유저 플로우 작성
- 강사·강의·수강·출석 데이터베이스 설계와 강의·후기·출석 API(Spring Boot)
- 강사 스튜디오와 강의 예약·일정 화면(React)
- OpenVidu 기반 화상 수업 방
- 브라우저 자세 추정과 강사·수강생 자세 비교
- Jenkins·Docker·Nginx 배포
문제
예약과 수업이 다른 곳에 흩어진 온라인 요가
Yuj는 SSAFY 교육 과정 팀 프로젝트로 만든 서비스입니다. 팀은 코로나 이후 늘어난 비대면 수업과 요가 수요를 보고 주제를 골랐습니다. 예약과 실시간 수업을 한 곳에서 하는 요가 서비스는 없다고 봤습니다.
온라인으로 가르치는 요가 강사는 예약받는 곳과 수업하는 곳이 달랐습니다. 예약은 강의 플랫폼이나 메신저로 받습니다. 수업은 화상회의 링크를 따로 보내 엽니다. 누가 들어왔는지도 강사가 손으로 챙깁니다.
수강생은 화면 너머에서 강사 동작을 따라 하지만 자세가 맞는지 알기 어렵습니다. 강사도 작은 화면 여러 개를 하나하나 봐 주기 어렵습니다.
팀은 예약부터 수업, 자세 확인까지를 한 서비스에서 하기로 했습니다.
해결
수업 방 안에서 강사와 수강생 자세를 비교하는 골격선
강사가 연 강의를 수강생이 예약하고 같은 서비스의 화상 방에서 듣습니다. 자세 비교는 수강생의 브라우저 안에서 돌아갑니다.
- 강사 스튜디오: 강사는 소개·강의 목록·공지·수강 후기가 모인 스튜디오 페이지에서 강의를 엽니다.
- 예약과 출석: 수강생이 강의를 예약하면 일정이 생깁니다. 수업에 들어오면 시스템이 출석을 기록합니다. 마이페이지에 출석률과 주간 수강 차트가 나옵니다.
- 화상 수업: OpenVidu로 강사와 수강생을 한 방에 연결합니다. 비디오·음소거·채팅·참가자 목록을 켜고 끕니다.
- 자세 추정: MoveNet Lightning 모델(TensorFlow.js)이 두 사람 영상에서 관절 위치를 뽑습니다.
- 자세 비교: 두 사람의 키포인트 17개로 거리를 계산합니다. 기준 안이면 수강생 골격선이 초록, 벗어나면 흰색입니다. 강사 골격선은 늘 초록입니다.
- 피드백 끄기: 수강생은 "AI 피드백" 버튼으로 골격선 표시를 끌 수 있습니다.
자세 추정은 수강생 브라우저에서
MoveNet 가운데 가장 가벼운 Lightning 모델을 브라우저에 올렸습니다. 영상을 서버로 보내지 않고 브라우저에서 자세를 계산합니다. 수업 영상은 이미 OpenVidu 서버를 거칩니다. 자세 분석까지 서버에서 하면 수강생이 늘수록 서버 부담도 커집니다. 브라우저에서 계산하면 서버를 늘리지 않아도 되고 판정도 곧바로 화면에 나옵니다.
판정 결과는 골격선 색 두 가지로
수강생은 점수나 각도 대신 초록과 흰색 골격선으로 결과를 봅니다. 기준은 키포인트 거리 0.1(posenet-similarity 라이브러리 거리값) 이하입니다. 동작을 따라 하는 중에는 숫자를 읽기 어렵고 색은 곁눈으로도 알아봅니다.
결과
수업 중에 골격선 색으로 바로 보는 자세 피드백
시연 수업에서 수강생은 골격선 색이 바뀌는 것을 보며 자세를 고쳤습니다. 강사는 예약과 출석을 다른 곳에서 따로 챙기지 않았습니다.
