우리문화 태권도를 세계에 홍보하기 위한 웹 기반 AI 체험형 콘텐츠 서비스, Black Belt: Master of Taekwondo

집에서 쉽고 재미있게 태권도를 학습할 수 있습니다.
AI pose detection 기술이 올바른 태권도 동작을 학습할 수 있도록 도와줍니다.
충분한 연습 후에는 국기원과 동일한 방식으로 심사를 받아 보세요. 심사에 통과하면 단증을 획득합니다.
겨루기 기능을 통해 상대와 1:1로 배틀을 진행하여 승패를 가릴 수도 있습니다

태권도 짱이 되고 싶다면 지금부터 BlackBelt로 수련을 시작하세요!

1. 개요

2. 주요 기능

3. 기술스택

​ 3-1. Front-end

​ 3-2. Back-end

​ 3-3. AI

4. 멤버소개

• 프로젝트명: 검은띠 휘날리며 [Black Belt: Master of Taekwondo]
• 서비스 특징: AI 모션인식을 통한 태권도 학습 web service
• 주요 기능
  • 태권도 동작 학습 모델 기반 태권도 연습 및 심사
  • WebSocket을 통한 겨루기 매칭
  • WebRtc기술을 활용한 겨루기 화면
• 주요 기술
  • react 17.0.2
  • recoil 0.6.1
  • sockjs-client 1.6.0
  • styled-components 5.3.3
  • axios 0.26.1
  • teachablemachine-pose 0.8.6
  • spring boot 2.6.4
  • maven 3.8.4
  • nodejs 16.13.1
  • openjdk 11
  • ubuntu 20.04 LTS
  • mysql 8.0.28
  • docker + jenkins
• 참조 리소스
  • openvidu - webRtc
• 배포 환경
  • URL: https://j6a506.p.ssafy.io/

• 글로벌 서비스를 지향하는 저희 블랙벨트는, 번역 서비스를 제공합니다
• 네비게이션바에서 언제든지 원하는 언어로 편하게 바꾸어보실 수 있습니다

• 연습모드, 심사모드, 겨루기로 나뉘어져 있습니다
• 태권도 영상을 배경으로 두어 웅장함을 더했습니다

1. 기본동작

• 태권도의 7가지 기본동작들을 학습합니다
• 레벨에 따라 스테이지의 잠금이 해제됩니다
• 해당 스테이지를 클리어 하면 정확도에 따라 별을 1개부터 3개까지 얻을 수 있습니다
• 동작 카드 위에 마우스를 올려 동작에 대한 간단한 설명을 확인할 수 있습니다
• 자세한 설명은, 카드를 클릭시 연습 화면에서 확인할 수 있습니다

2. 연결동작 & 품새

• 하나의 품새를 4단락으로 나누어 연습할 수 있도록 연결동작 코너를 만들었습니다
• 연결동작을 정확히 익힌 후 품새를 연습해보세요!
• 카드를 눌러 연습 스테이지로 입장하면, 상단에 동작 순서가 명시됩니다
• 명시된 동작을 정확하게 취하면 다음 동작으로 넘어갈 수 있습니다

• 겨루기 일반모드에서는 원하는 사용자를 지정해 겨루어볼 수 있습니다

• 상대의 닉네임을 검색하고 겨루기 신청을 보내보세요!

• 단, 상대가 다른 사람과 겨루기중이거나 로그아웃이거나 혹은 심사중인 경우, 겨루기 신청을 보낼 수 없습니다

• 유저의 상태는 닉네임 검색을 하면 이름 바로 아래에 나타납니다

• 상대가 겨루기 신청을 수락하면, 페이지에 상대의 정보가 나타나고 겨루기 시작 버튼이 활성화됩니다
• 겨루기 시작 버튼을 눌러 겨루기를 시작해봅시다!

• 상대방에 대한 예의를 갖추고 태권도 기본 준비동작을 취하면, 인공지능이 이를 인식하고 겨루기가 시작됩니다
• 방어 동작을 성공하면 상단에 노란색 방패 이모티콘이 나타나며, 공격을 성공하면 상대에게 데미지 이펙트가 들어갑니다
• 30초 동안 상대의 공격을 막거나, 공격을 하면서 열심히 겨루어봅시다!

• 내 정보를 한눈에 확인할 수 있는 마이페이지입니다
• 지금까지 획득한 띠 및 단증을 확인할 수 있으며 겨루기와 관련된 전적을 확인할 수 있습니다
• 프로필사진 변경 및 닉네임 변경도 가능합니다

• React를 이용해 웹 페이지를 구현하고 Recoil 및 React Query를 이용해 상태관리를 진행했습니다
• Styled Components를 이용해 css를 구현했습니다
• 겨루기를 위한 웹소켓은 SockJS를 이용했습니다
• Atomic 방식으로 개발을 진행하여 컴포넌트의 재사용성을 높이고 팀원과 디자인 통일성을 맞췄습니다

├── _foundation
│   ├── colors
│   ├── icons
│   ├── translation
│   └── typography
├── api
├── components
│   ├── atoms
│   │   ├── Buttons
│   │   │   └── GoogleButton
│   │   ├── Evaluation
│   │   ├── Icons
│   │   ├── Texts
│   │   └── Videos
│   ├── molecules
│   │   ├── Carousel
│   │   ├── DialogExtension
│   │   ├── Gyeorugi
│   │   ├── Layout
│   │   ├── Navbar
│   │   └── Stream
│   ├── organisms
│   │   ├── ChangeNickModal
│   │   ├── LoginModal
│   │   ├── PushAlarm
│   │   ├── SignupModal
│   │   ├── TaekwondoModal
│   │   ├── Timer
│   │   └── VideoRoom
│   └── templates
├── hooks
├── pages
│   ├── Gyeorugi
│   │   ├── GyeorugiStage
│   │   │   └── models
│   │   ├── Normal
│   │   └── Rank
│   ├── MainPage
│   │   └── SlideInfo
│   ├── Mypage
│   ├── Practice
│   └── Promotion
├── recoils
├── style
└── utils

Web Socket

• Spring Framework에서 더 안정적인 SockJS 라이브러리를 선택하여 웹소켓 통신을 구현했습니다
• 통신규약을 위해 메시징 프로토콜 STOMP를 사용했습니다

• 동작 방식

  • http→ws 통신 헤더 요청으로 프로토콜 upgrade

  

  • Server측 endpoiont 설정
  • Client 측 지정 endpoint로 socket 객체생성
  • Server 측 수신한 데이터 재발행하는 메서드 작성
  • Client 소켓데이터 send, receive

• WebSocket API

• 시퀀스 다이어그램 (겨루기-일반모드)

  

Server

1. 서버 접속 정보

server ip : j6a506.p.ssafy.io
client id : ubuntu
client pw : pem파일로 대체 (MM첨부파일 확인, 팀원 이외에 공유 금지)

2. 포트 정보

3. 서버 설계 상세 내용

• 주피터 접속 정보 및 상세 설명 - >

  • server ip : j6a506.p.ssafy.io:8888
  • https로 하기위해 사설 cert 키로 진행해서 크롬에서 안전하지 못한 페이지로 인식합니다.
  • 주피터 노트북 설치과정

• 도커 및 도커 컴포즈 설치

• 젠킨스-깃 연동 및 자동 빌드/배포

• 엔진엑스 세팅 및 프록시 설정

• 서버 mysql 세팅 과정

• 프론트 / 백 도커

구현한 모델

• 기본동작 - 13가지 기본동작을 판단해주는 인공지능 모델

• 연속동작/품새 - 1장~8장, 고려, 금강 등 품새별 4개의 구간으로 나눠서 해당 구간의 동작을 구분하는 인공지능 모델

• 겨루기 - 얼굴막기, 몸통지르기, 발차기 등의 동작을 구분하는 인공지능 모델

제작 과정

• 인식의 정확성을 높이기 위해 Teachable Machine 사용했습니다
• 각 동작별 데이터를 직접 수집하고 정제하여 학습시켰고, 각 클래스가 정확하게 도출되는지 검증했습니다
• 학습된 모델은 Frontend에 전달하여 서비스를 완성했습니다

연승은 Frontend | Leader | Design	정지영 Frontend | Design	최영운 AI
Figma 디자인 기본 디자인 컴포넌트 생성 웹소켓 통신으로 겨루기 매칭	Figma 디자인 추가예정 추가예정	추가예정 추가예정 추가예정

이지우 Backend | CI/CD	임영택 Backend	최윤수 Backend
서버 설계 | 자동 빌드&배포 DB 설계 | 프로시저 등 기초작업 계정, WebRTC 관련 API 작성	추가예정 추가예정 추가예정	DB & API 설계 겨루기 매칭 시스템 웹소켓