프로젝트 기간

2024-04-08 ~ 2024-05-20

프로젝트 진행 노션 링크

싸피 자율 프로젝트

• 싸피에서 진행한 마지막 프로젝트이다.
• 싸피 자율 프로젝트는 기업연계, 오픈소스, 자유주제 이렇게 세가지 트랙이 있는데, 원래 기업연계 프로젝트를 희망하여 이전에 했던 팀원들과 모여서 팀을 꾸렸지만 아쉽게 뽑히지 못해서 두번째로 지망했던 자유주제를 택하게 되었다.

1. 초기 설계 및 기획 주차

• 자율 프로젝트는 앞서 진행했던 두 프로젝트와 달리 기획주차가 따로 없다. 그래서 이전 프로젝트에 비해서 시간이 빠듯하기도 하고, 새로운 프로젝트를 벌써 3번째 차례로 할 때가 되니, 새로운 아이디어가 고갈되었고, 팀원들끼리 서로 해보고싶었던 기술들을 얘기하며 주제를 좁혀나갔다.

• 필자는 처음에 시뮬레이션 관련 기술을 써보고 싶었다. (VR, AR, 메타버스 등등 )
• 하지만, 관련해서 나온 아이디어의 스케일이 너무 컸고, 따라서 두번째로 해보고 싶었던 AI 관련 주제를 택하게 되었다.

---

최종 기획안

AI 댄스 선생님 및 숏폼 생성 공유 플랫폼

서비스 개요

서비스 설명

STEP TO DANCE를 이용해 사람들이 다양한 수준의 춤을 영상을 통해서 배울 수 있으며, 우리의 앱은 모션 인식 기술로 사용자의 춤을 분석하고 즉각적인 피드백을 제공합니다. 또한 사용자는 자신의 춤을 숏폼 비디오로 변환해 소셜 미디어에 업로드할 수 있어, 자기 계발과 커뮤니티와의 소통이 가능합니다.

기획 배경

최근 몇 년간 춤 관련 숏폼 콘텐츠의 인기가 폭발적으로 증가함에 따라, 사용자들이 춤 실력을 개발하고 공유할 수 있는 플랫폼에 대한 수요가 크게 증가하였습니다.

이러한 배경을 바탕으로, 모션인식 기술을 활용해 사용자의 춤에 대한 피드백을 제공하고, SNS에 공유할 수 있게 함으로써, 더 많은 사람들이 춤에 접근하고 즐길 수 있도록 하기 위해 프로젝트를 기획하게 되었습니다.

기대 효과

• 숏폼 생성으로 사용자 편의성 향상
• 시공간의 제약 없는 학습 인프라 구축
• 랭킹 시스템을 통한 재미 향상
• SNS 공유로 커뮤니티 활성화

서비스 화면 및 기능 소개

가이드 영상 시청

• 홈 화면에는 유저들이 많이 춘 순서대로 안무 영상을 추천하는 HOT 5와 개인 맞춤형 장르별 안무 추천이 있습니다
• 가이드 화면에서는 영상을 보며 춤을 익힐 수 있습니다
  • 볼륨 조절과 배속 기능이 지원됩니다.

영상 촬영

• 촬영은 사이드 모드와 오버레이 모드를 지원합니다.

피드백 생성

• AI가 영상을 분석하여 점수과 틀린 구간을 계산해줍니다.

숏폼 편집

• 편집 페이지에서 촬영한 영상을 편집할 수 있습니다
• 완성한 숏폼은 카카오톡, 페이스북, X로 공유할 수 있습니다.

숏폼 조회

• 숏폼 페이지에서 유저들이 올린 숏폼을 조회할 수 있습니다

랭킹

• 랭킹 페이지에서는 전체 유저의 랭킹을 확인할 수 있습니다
• 유저 페이지에 들어가 유저의 점수와 숏폼을 확인할 수 있습니다

가이드 업로드

• 직접 연습할 안무를 올릴 수 있는 가이드 업로드 페이지입니다.

카카오 로그인

마이페이지

• Home에서는 랭킹 순위, 총점, 평균 점수 등을 확인 할 수 있습니다.
• FeedBack에서는 피드백 리스트 최신순으로 확인 할 수 있습니다.
• Shorts에서는 숏츠 리스트 확인할 수 있습니다.

---

기술 스택

Frontend

React

• React 18.3.1
• Vite 5.2.0
• emotion 11.11.4
• material 5.15.15
• redux 2.2.3
• axios 1.6.8
• react-dom 18.3.1
• react-router-dom 6.23.0
• styled-components 6.1.8
• three 0.164.1
• vite-plugin-pwa 0.19.8

Backend

Spring 서버

• Springboot 3.2.4
• Spring Data JPA
• Spring Data mongodb
• Spring Data redis
• Spring Security
• Spring Kafka 3.1.3
• JWT
• Java JDK 17
• QueryDSL 5.0.0
• AWS S3
• gson 2.10.1

Fast Api 서버

• Python 3.11.2
• pip 22.3.1
• fastapi 0.110.2
• uvicorn 0.29.0
• confluent_kafka 2.3.0
• redis 5.0.4
• tensorflow 2.16.1
• tensorflow_hub 0.16.1
• opencv-python 4.9.0

  AI

• Openpose
• Movenet thunder

인프라

CI/CD

• AWS EC2
• AWS S3
• jenkins 2.454
• Docker 26.1.0
• NginX 1.18.0 (Ubuntu)
• MatterMost Webhook
• GitLab Webhook
• MySQL 8.0.36
• Redis 7.2.4

기타

이슈 관리

• Jira

형상 관리

• Git, Gitlab

소통, 협업

• Notion
• Mattermost

개발 환경

• OS: Windows 10
• IDE: Intellij, VSCode
• EC2: Ubuntu 20.04.6 LTS (GNU/Linux 5.15.0-1051-aws x86_64)
• Reverse Proxy: Nginx
• SSH: WSL , MobaXterm
• SSL: CertBot, Let’s Encrypt

REACT PWA

• 모바일 환경에서도 접근이 가능할 수 있도록 PWA를 적용하였다.
  PWA를 통해 일반적인 웹 기술을 활용해 모바일에서도 사용이 가능하다.

KARKA

(n= 분석할 초당 프레임 수) 1/n초마다
하나의 이미지를 전송하여 분석해야 함

분석 결과 list를 1/n초마다 반환해야 함

많은 양의 데이터를 서버 사이에서
수송신 해야하는 환경에 적합

MOVENET

동영상에 대한 사람 분석은 영상 자체가 아닌
프레임 마다의 human estimation을 수행

서비스 이용자 수가 많더라도
안정적인 유사도 비교 역할 수행 필요

Openpose 일부 모델 대비 1분 영상 기준
약 8배 빠른 성능
(Tensorflow를 서버 내 cpu로 구동한 결과)

유사도-비교방식

기존의 가이드 영상에서의 사람 모델과 사람들이 점수를 보기 위해 올린 영상에서의 사람 모델을 비교하는 방법.

기획 단계에서의 계획 : 관절간의 각도에 대한 유사도 비교
-> 360도에 대한 정확한 각도를 구하기가 어려운 문제

대안: 유클리드 거리를 통해 유사도를 비교하게 됨
두 점 사이의 거리를 재는 것

유사도-정규화

사람 모델을 정규화

두 개의 사람 모델
(가이드 영상,
사용자의 업로드 영상)
거리 비교 수행

-> 개선사항
정규화된 키포인트 좌표를 통해 코사인 유사도를 계산 (정확도)

프로젝트 산출물

ERD

요구사항 정의서

API 명세서

시스템 설계서

---

최종 목업

피그마 화면 목업

---

최종 GITHUB

STEPTODANCE github