Repertory

🔍 About

브레이킹 댄서들의 온라인 레파토리수첩, Repertory입니다!

우리는 프리스타일도 좋아하지만, 레파토리(이하 레파)를 필연적으로 짜야하는 운명이죠.
이 서비스의 기획자인 bboy Alloy(안준현)도 그 운명안에 있었습니다.
창작의 과정은 고통스러운 법이기에, 그 과정에서 불만도 많았죠
아래는 그 불만들입니다.

불편한 점

1. 연습실에서 괜찮은 소스를 짜놓고 연결하지 못해서 그대로 잊어버리는 경우가 있다.
2. 수첩이나 메모장에 기록해도, 글만 보면 동작이 생각나지 않을 때가 있다.
3. 머리로 생각했을땐 괜찮은 흐름인데, 실제로 해보면 별로일 때가 많다.
4. 레파를 짜놓고 잊어버리는 경우도 있다.

아마 여러분도 비슷한 고민을 하고 계실겁니다. 그래서 저는 이 불만점들을 어떻게 해결할 좋은 방법이 없을까 생각하다가, 웹상에서 소스를 추출하고, 재배치해서 레파토리를 만들고, 소스와 레파토리를 모아서 관리하는 서비스가 있으면 좋겠다고 생각했고, 그게 저희 서비스인 Repertory 입니다. 주요 기능은 아래에서 따로 설명드리고, 이 서비스로 어떤 이점을 얻을 수 있는지 알려드리겠습니다.

Repertory를 사용하면,,,

1. 레파토리를 영상으로 쉽게 관리할 수 있다.
2. 소스를 잊어버리지 않고 보관할 수 있다.
3. 소스를 태그별로 분류하여 원하는 흐름의 레파토리를 짜기 용이하다
4. 레파토리를 미리 짜고, 느낌을 미리 볼 수 있다.
5. 다른사람의 소스도 내 레파토리에 적용해볼 수 있다.

그동안은 갤러리에 저장하거나, 인스타에 저장하거나 하는 등 어떻게든 다른 수단을 이용해서 소스와 레파를 보관하셨겠죠? 그래서 레파토리 수첩을 사용하지 않을 수 없었을 겁니다. 이 서비스를 이용해보세요!! 비보이 7년차의 경험을 녹여 만들었습니다.

미래 비전

• 앱으로 확장
• 소스 공유, 거래기능 추가
• 글로벌 댄서들의 필수 앱

앞으로 더욱 뻗어나갈 우리의 repertory서비스를 지켜봐주세요!!!

📖 용어 사전

레파토리 : 즉흥적으로 나오는 음악에 맞춰 추기위해서 미리 짜놓은 하나의 춤. 보통 40-50초 내외의 길이를 가진다.
소스 : 레파토리보다는 짧은 춤의 단위. 짧게는 1-2초가 될 수 있고, 길게는 10초이상이 될 수 있다. 소스가 모여 레파토리가 만들어진다.
프로젝트 : 레파토리를 만들고 있는 상태의 파일형식을 말한다. 아직 소스 추가, 삭제, 순서바꾸기가 자유로운 상태이지만 커뮤니티에 공유할 수 없는 상태
시작자세, 끝자세 : 하나의 소스는 보통 시작하는 자세가 있고, 끝나는 자세가 있다. 두 개의 소스가 매끄럽게 이어지려면, 앞 소스의 끝자세와 뒷 소스의 시작자세가 일치하면 좋다.

💡 Main Feat

1. 영상편집

a. 소스 생성

오른쪽 위 생성하기 버튼을 이용해서 프로젝트를 만들 수 있다. 여기서 소스 만들기 탭에 들어가, 원하는 영상을 업로드하고, 재생 바를 이용해서 구간을 설정한다. 원하는 곳에 재생바를 놓고 Start와 End를 눌러 구간을 설정하고, Trim을 누르면 원하는 구간이 잘려서 소스가 만들어진다.

b. 소스 설정

소스를 생성하게 되면, 소스 이름과, 태그, 시작자세와 끝자세를 지정할 수 있다. 이 자세들의 이름은 영상의 첫 프레임과 끝 프레임을 기준으로 AI가 자동으로 인식하여 추천해준다. 잘못나왔을 경우에는 수정할 수 있다. 생성한 소스는 왼쪽의 소스 목록에 들어가게 된다.

c. 레파토리 제작

미리 제작해놓은 소스들을 작업대에 끌어다 놓으면, 소스가 추가된다. 이 소스들은 순서를 바꾸거나 다시 삭제할 수 있다. 배치해놓은 상태에서 재생을 누르면 그대로 재생이 된다.

d. 레파토리 저장

레파토리이름을 지정하고, 저장할 수 있다. 레파토리는 더이상 수정할 수 없으며, 커뮤니티 기능을 통해서 다른 사람과 공유할 수 있다. 비공개로 설정하여 관리할 수도 있다.

e. 레파토리, 소스 검색

<이미지>

검색창에 검색을 하면, 제목과 태그이름을 모두 포함해서 검색해준다. 태그를 눌러서 특정 태그만 필터링하여 볼 수도 있다.

2. 커뮤니티

a. 피드

다른사람의 소스나 레파토리를 무작위로 볼 수 있다. 특정 사용자를 구독하게 되면, 그 사용자의 영상들이 우선적으로 뜨게 된다. 목록을 누르면 그 영상을 볼 수 있고, 내 보관함에 저장하거나, 좋아요를 누를 수 있다.

b. 소스 클론

다른 사용자의 소스를 저장하면, 내 소스 보관함으로 들어오게 된다. 소스 정보를 그대로 가져오고, 추후 내가 레파토리를 만들때 사용할 수 있다.

3. 기타 기능

a. 로그인

자체 로그인과 구글 소셜로그인을 지원한다. 둘 모두를 필수로 입력해야한다.

b. 회원가입

정규식을 이용해서, 아이디, 패스워드, 이메일 규칙을 설정해놓았다. 댄서네임까지 모든 정보를 입력하면 회원가입이 진행된다.

⚙ Core Logic

FFMPEG

우리 서비스의 처음이자 끝이 되는 기능이다. 웹 환경에서 영상을 편집할 수 있도록 해준다. 현재는 클라이언트에서 영상편집을 모두 마치고, 그 정보만 서버로 보내준다. 영상 편집이 수시로 일어나는 환경이기 때문에, 그때 그때 요청을 보내는 것은 효율적이지 않다고 판단하여 클라이언트측에서 처리하기로 했다. 영상을 프레임단위로 자르고, 붙이고, 순서를 바꾸고 하는 기능은 모두 이 라이브러리를 이용하여 직접 구현했다.

검색

소스나 레파토리는 공개, 비공개를 설정할 수 있다. 검색을 할 때 기본적인 로직은, 조건에 맞는 결과를 가져와서 그 결과들의 공개, 비공개 여부에 따라 한 번 더 필터링 해야하는데, 서버가 여러개이기 때문에 검색 한 번에 너무 많은 통신이 일어나게된다. 이를 효율적으로

MSA

우리의 핵심 기능은 레파토리제작인데, 커뮤니티부분에서 문제가 생겼다 해서 레파토리 제작기능을 사용할 수 없게되면 UX가 굉장히 좋지않다. 두 기능이 독립적으로 작동할 필요가 있다고 판단해서, MSA구조를 도입했다. 현재는 한가지 기능밖에 고려하지 않았지만, 추후 다양한 기능을 추가할 수 있도록 하기 위해서도 이 구조를 택했다.

NoSQL

우리 서비스에서 다루는 모든 객체들은 영상이라는 공통점이 있지만, 소스인지, 레파토리인지에 따라서 다양한 추가 정보를 가지고 있다. 이를 RDB로 관리하기에는 효율적이지 않다고 판단, nosql을 도입하기로 했다.

Redis

입출력이 잦은 정보들을 관리하기 위해서 도입했다. 주로 인증토큰을 처리하기도 하고, 공개, 비공개 여부 때문에 복잡했던 로직을 최대한 빨리 처리하려면 레디스에 캐싱하는 작업이 필요했다.

Architecture

ER Diagram

• Community, Member

• Dance

🛠 Tech Stack

역할	종류
Backend Framework
Front Framework
Database
CI/CD
Version Control
Communication

📦 How to Build

npm i
npm run build

License

Repertory.online is GNU Licensed

팀원 정보

김세진	김형진	안준현	이성호	이주희	최세은
FE	FE	팀장, BE	BE	BE	BE
커뮤니티 프로필	영상편집	발표 멤버서비스	프로젝트서비스 댄스서비스	CI/CD 커뮤니티서비스	DB설계 포즈감지서비스