코로나19로 인해 집에 있는 시간이 늘어난 만큼 자기관리에 대한 관심도가 높아지고 있으며, 현대인들은 단체가 아닌 개인 중심적인 생활습관을 갖게 되었다. 또 헬스장, 체육관 등 외부에서 쉽게 운동할 수 없어 어려움을 겪는 사람들이 많아졌다.
홈 트레이닝을 하는 사람들은 전문가의 부재로 바른 자세로 운동하기 어렵고 꾸준히 운동하게 하는 원동력이 없다. 따라서 우리는 AI트레이너를 통해 올바른 자세로 정확한 운동을 할 수 있게끔 도와주고 프로필을 바꿀 수 있는 캐릭터 상점으로 사용자의 흥미를 유발하는 홈 트레이닝 웹 애플리케이션을 개발하려고 한다.
https://gaemistorming-healthu.com 으로 접속했을 때 가장 먼저 볼 수 있는 커버 화면으로 로고가 있고, Let’s go를 클릭하면 홈 화면으로 접속할 수 있다.
Workout 메뉴를 누르면 원하는 운동만 자유롭게 선택할 수 있는 Choice 와 정해진 루틴을 통해 집중적인 운동을 할 수 있는 Collection 두 가지 방식으로 접근할 수 있다.
운동 화면은 좌측 상단의 운동 자세 이미지, 좌측 중앙의 타이머, 좌측 하단의 자세에 대한 Great, Again 등의 평가로 이루어져 있고, 처음 들어가면 카메라 권한을 묻고, 권한을 받으면 우측에서 카메라를 통해 동작을 확인하며 운동을 시작한다.
시간이 부족한 사람들이 헬스장을 다니지 않으면서도 집에서 쉽고 간편하게 운동하여 운동에 대한 흥미를 키울 수 있다. 또한, 사용자의 포즈 인식으로 AI트레이너가 정확한 자세를 코치하여 현실 트레이너가 필요 없어 금전적인 부담을 줄일 수 있고, 올바른 운동 자세를 배워 완벽한 운동 효과를 일으킬 수 있다. 또한 시간과 장소에 구애받지 않고 데스크 탑이나 핸드폰만 있으면 사용하며, 언택트 시대에 돈을 내고 헬스장을 갈 필요 없이 핸드폰과 데스크 탑을 이용해서 운동을 할 수 있다.
운동 자세를 측정할 때 Teachable Machine에서 학습시킨 자세들로 정확도를 판단하는데 잘못된 자세를 행하여 오 분류의 가능성이 증가하고, 이로 인한 사용자의 신뢰성과 성취도가 떨어질 수 있다.
운동 웹 애플리케이션이다 보니 운동에 관심이 있는 사람만 접근하게 될 가능성이 있다. 캐릭터 상점 등 사용자의 흥미를 유발할 수 있는 요소를 추가하여 누구나 쉽게 이용하고 운동에 대한 흥미를 유발하게 한다.
| 구분 | 설명 |
|---|---|
| Apache/Tomcat | Apcache는 클라이언트에서 요청하는 HTTP요청을 처리하는 웹서버를 의미하며, 정적타입의 데이터만을 처리한다. Tomcat은 DB처리와 같은 동적인 기능들을 가공하여 HTML파일로 만들어 클라이언트에게 제공한다. 8080 포트를 사용한다. |
| Hibernate | Hibernate는 JPA를 기반으로 ORM을 사용하기 위한 실제 기능들을 구현한 인터페이스 모음이다. ORM은 모델 객체와 DB 테이블을 연결함으로써, 데이터베이스 관련 기술을 코드로 구현/관리 할 수 있도록 하는 기술이다. |
| Bootstrap | Bootstrap는 반응형 웹 디자인을 지원하며 모바일 우선인 웹프로젝트 개발을 위한 HTML, CSS, JS 프레임워크이다. 부트스트랩을 사용하므로써 코딩의 양을 줄이고, 모바일과 PC 환경에 맞게 개발할 수 있다. |
| Spring MVC | MVC란 Model, View, Controller를 분리한 디자인 패턴이다. MVC 패턴을 사용하므로써 코드의 가독성, 확장성, 유지보수성을 늘릴 수 있고 코드의 중복을 최소화 할 수 있다. |
| Teachable Machine | Teachable Machine는 내부적으로 전이학습 기술을 이용한다. 사전에 학습되어 있는 검증된 model을 가져오고, 커스텀 class를 추가함으로써 새로운 model을 생성할 수 있다. 이미 만들어진 model을 가져와서 학습하는 것이기 때문에, 비교적 짧은 시간과 적은 데이터 량으로도 높은 정확도를 달성할 수 있다. |
| ACM | AWS Certificate Manger(ACM)는 https를 접근하기 위한 외부가 아닌 아마존 자체에서 보장하는 SSL인증서를 발급받을 수 있는 서비스이다. |
| 구분 | 설명 |
|---|---|
| Eclipse | Eclipse는 가장 대표적은 IDE 자바 개발도구이다. IDE는 개발에 필요한 다양한 기능들이 결합되어 있다. Eclipse는 Java 뿐만 아니라 다른 개발 언어를 위한 IDE로 개발되고 있다. |
| MySQL | MySQL는 전 세계적으로 가장 널리 사용되고 있는 오픈 소스 데이터베이스이며, MySQL AB사가 개발하여 배포/판매하고 있는 데이터베이스이다. 프로젝트에서는 MySQL Workbench를 사용하여 DB 설계 및 구축을 진행했다. |
| AWS RDS | AWS RDS는 클라우드에서 관계형 데이터베이스를 쉽게 설치하고 운영 및 확장할 수 있는 관리형 서비스이다. RDS에 MySQL DB 엔진에 액세스하여 간편하게 관리할 수 있다. 프로젝트에서는 MySQL과 RDS를 연결했다. |
| AWS | Amazon Web Services(AWS)는 전 세계적으로 분포한 데이터 센터에서 200개가 넘는 완벽한 기능의 서비스를 제공하는 클라우드 플랫폼이다. 프로젝트에서는 EC2 인스턴스를 발급받아 브라우저 환경에서도 웹 애플리케이션 동작하도록 했다. |
| 구분 | 설명 |
|---|---|
| Java | 객체지향 언어이며, 객체를 생성하기 위해 클래스를 작성하고 객체와 객체를 연결하여 목적에 맞는 프로그램을 만들어 낸다. 객체 지향언어의 특징인 캡슐화, 상속성, 다형성을 완벽하게 지원한다. |
| CSS | HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. 프로젝트에서는 JSP를 꾸밀 때 사용했다. |
| Javascript | 객체 기반의 언어이지만 상속과 클래스라는 개념은 없다. JavaScript는 인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행된다. 프로젝트에서는 대표적으로 그래프와 운동 학습 model에서 값을 읽어와 판단하는 부분에서 js를 사용했다. |
| JQuery | 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리이다. 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작, 이벤트 처리 등을 훨씬 더 간단하게 만들어준다 프로젝트에서는 카운트다운(운동 시간)과 운동 카운트를 계산하고 jsp 코드로 값을 전달할 때 JQuery를 사용했다. |