[앱 개발] Pose Estimation 기능을 탑재한 운동 동작 분석 앱 만들기

안녕하세요. 오늘은 Flutter을 활용해서  Pose Estimation 기능이 있는 앱 구현을 해봤습니다. 핸드폰으로 자세를 분석하는 앱은 많이 출시가 되어있지만, 대부분 2D로 분석하여 움직임 정보를 제공하고 있습니다. 하지만, 움직임은 x, y, z의 3축으로 구성되기 때문에 3차원으로 분석하여 움직임에 대한 정보를 제공하는 것이 필요합니다. 이를 위해 저번에도 소개해 드렸던, 3차원 모션 캡처 장비를 golden standard로 활용하고 있지만, 실험실 환경, 물리적 마커를 이용해야 하는 불편함이 존재하기 때문에 3D human pose estimation을 활용한다면, 더 정확하고 의미 있는 데이터를 제공할 수 있을 것이라고 생각되어 도전을 해 보았습니다. 정식으로 만든 것은 아니고 UI 화면과 기능 정도 구현하였고, 특히 서버를 활용하여 동영상 촬영을 하면 동영상 파일을 서버를 통해 3D HPE를 진행하고 다시 업로드하는 방식까지 구현해 보았습니다. 앱 구현을 위해 다음과 같은 단계를 거치게 되었습니다.

 

1. 와이어프레임

 

와이어프레임은 앱을 만들기 전에 화면의 구성 요소와 레이아웃을 간략하게 스케치하는 설계도를 의미합니다.

먼저, 피그마를 활용해서 와이어프레임을 만들어 보았습니다.

구성은, 로그인 창에서 시작해서 소개 및 맞춤형 운동 동작 분석을 위한 메인 페이지, 세분화된 운동 동작 페이지 및 카메라 촬영 페이지들로 구성하였습니다.

 

 

 

2. 핸드폰과 카메라 연동

 

그 다음 실제로 핸드폰 카메라와 연동하여 촬영 기능을 구현하기 위해서 vscode로 앱 UI 화면과 카메라 기능을 할 수 있도록 코드를 짰습니다.

 

카메라 연동을 위해 필요한 dependencies를 설치해 주었고요.

3D_HPE_App이라는 폴더에 다양한 UI 화면 구성을 위한 코드들을 dart로 짰습니다. 

 

3. 로컬 서버 준비 및 구축

다음 핸드폰 앱에서 촬영한 동영상을 분석하고 다시 핸드폰으로 전송하기 위한 서버를 구축하였습니다.

 

3D HPE를 적용하기 위해서 동영상을 프레임 단위로 잘라 이미지 파일로 바꾸어 준 다음, 3D HPE 분석 후 다시 동영상으로 만들어서 서버로 전송할 수 있는 코드를 작성하였습니다.

 

 

3. 핸드폰 - 앱 연동 및 카메라 테스트

 

핸드폰 화면에 flutter 앱을 설치하고 실행해 보았습니다. 우선 운동 카테고리 선택 후 인터넷에 있는 역도 선수 영상으로 테스트해보았습니다. 

 

 

 

 4. 동영상 서버 전송 및 처리

 

촬영한 동영상이 서버로 잘 넘어온 것을 확인하였고, 동영상을 이미지 프레임으로 분할하여 각 이미지를 3D HPE 분석하고 있는 것을 확인하였습니다. 

 

우선, 촬영된 동영상을 서버로 전송 후 uploads라는 폴더에 저장하였습니다.

촬영된 동영상 서버 저장

 

저장된 동영상을 프레임화 하여 개별 이미지로 저장 완료 후

 

각 이미지에 3D HPE를 적용 및 처리를 진행합니다. 각 한장씩 진행하여 시간이 조금 소요됩니다.

 

visualizations 폴더에 처리된 사진이 저장되고나서, 다시 동영상으로 변환시킵니다.

 

 

 

위 과정을 동영상으로 확인하면 다음과 같습니다.

 

 

5. 최종 결과물 확인

 

3D HPE한 영상을 다시 앱으로 전송하는 과정에서 오류가 자꾸 나서 인터넷 URL에 직접 입력하여 다운로드하는 것으로 마무리하였습니다.

 

---

사실은, 실시간으로 HPE를 할 수 있는 앱을 구현해 보고 싶었으나, HPE 모델 선택 및 저의 GPU 성능의 한계로 실패로 돌아갔습니다. 앱에 실시간 구현을 위해서 Google ML Kit을 사용하면 된다고 합니다. Google ML Kit은 경량 모델을 활용하여 실시간으로 human pose estimation이 가능하다고 합니다. 이번에는 실패로 끝났지만, 다음에는 더 발전하여 언젠가는 출시할 수 있을만한 퀄리티의 앱을 개발해 보면 좋을 것 같습니다.

 

감사합니다.