DB Dump, Default JWT Token 제외 등 소스 반출 사전 조치 완료

SSAFY 9기 공통 프로젝트 우수상

🎥 Mozzi

SSAFY 9기 공통 프로젝트 - A109 Team Garlic

비대면 단체 클립영상 촬영 플랫폼, Mozzi

https://mozzi.lol/

👨‍👩‍👧‍👦 팀원 소개

곽민규 : Frontend&Backend / Leader
김민정 : Backend / Backend Leader
박준홍 : Frontend / Frontend Leader
유창재 : Backend
윤태영 : Frontend
정우정 : Backend / DevOps

📆 프로젝트 소개

프로젝트명
비대면 단체 클립영상 촬영 플랫폼, Mozzi
서비스 특징
WebRTC 기술을 활용해 각 참가자의 웹캠 영상에서 실시간으로 배경을 제거해 한 화면에 합성, 서로 다른 공간에 있어도 함께 있는 것처럼 영상 찍기
UCC 영상, 시연 영상

✨기획 배경

1. 단체사진/영상 수요의 지속적인 성장

시간이 갈수록 단체사진에 대한 수요는 꾸준히 증가하고 있다.

2. 공간상의 제약

단체사진에 대한 수요는 증가하지만 그 특성상 공간상의 제약으로 인원의 제한이 생기거나 자리에 없는 사람의 촬영이 불가능하다.

3. Zoom과 같은 비대면 회의 서비스의 한계

분리된 UI로 인해 단체로 사진이나 영상을 남기고 싶어도 같은 장소에 있는 현장감이나 소속감에 한계가 존재한다.

🙌주요 기능

1. 촬영 준비 및 개인 설정

함께 촬영할 사용자들을 위한 부스를 제공하고 촬영에 사용될 기능들을 제공한다

로그인한 유저는 메인페이지의 부스생성을 통해 부스를 만들고 해당 부스의 공유코드를 이용해 다른 유저들을 초대할 수 있다
촬영에 사용할 프레임을 확인하고 선택할 수 있다
채팅을 이용하여 마이크를 사용하지 못하는 사용자와도 원할한 소통이 가능하다
개인설정을 이용하여 카메라 기울임, 크기, 자동 설정을 할 수 있다

2. 촬영 및 영상 합성

배경을 제공하고 영상 합성에 적합한 기능들을 제공한다

배경 변경하기를 통해 방장이 가진 배경을 업로드하거나 제공된 배경을 이용하여 영상을 촬영할 수 있다.
유저목록을 확인하고 드래그를 통해 사용자들의 앞 뒤 위치를 조정할 수 있다
촬영 버튼을 이용하여 배경과 사용자들의 움직임을 영상으로 저장한다

3. 영상편집 및 저장

제공한 프레임을 기반으로 영상 편집을 도와주고 완성된 영상과 개별 클립들에 대한 다운로드를 지원한다

클릭이나 드래그로 프레임을 편집할 수 있다
만들기를 눌러 완성된 클립을 mp4, gif 등 다양한 확장자로 다운로드할 수 있다
클립을 만들기 위해 저장된 개별 클립들에 대한 저장 또한 mp4, gif 등 다양한 확장자로 다운로드 할 수 있다.

4. 공유 및 좋아요

마음에 드는 클립을 커뮤니티에 등록할 수 있다
커뮤니티를 통해 다른 사람들의 클립을 구경하고 좋아요를 할 수 있다

시연 설명

메인 페이지

- 로그인 된 사용자는 부스 생성하기를 클릭하여 새로운 부스를 생성할 수 있습니다. - 공유코드를 알고있다면 부스 참가하기를 클릭하여 생성된 부스로 참가할 수 있습니다.

촬영 준비 페이지

부스 화면에서는 촬영에 사용할 원하는 프레임을 선택할 수 있습니다.
개인 설정 기능을 사용하여 카메라 회전, 크기 조절, 마이크/비디오 on&off가 가능합니다.
채팅 기능을 사용하여 마이크가 되지 않는 사용자와도 대화를 할 수 있습니다.

촬영 페이지

실제 촬영이 진행 될 배경을 선택하거나 원하는 배경을 업로드하여 사용할 수 있습니다.
카메라 소스의 위치, 크기를 마우스를 이용해 조절 할 수 있습니다.
유저 목록의 순서를 바꾸어 영상에 표시되는 사용자들의 위치를 변경할 수 있습니다.

편집 및 저장 페이지

촬영한 클립들을 클릭이나 드래그하여 프레임을 편집할 수 있습니다.
완성한 클립과 촬영한 개별 클립들을 webm, mp4, gif의 형태로 저장할 수 있습니다.
로그인한 참가자의 경우 제목을 지정하여 마이페이지에 등록할 수 있습니다.

커뮤니티

촬영한 모찌롤들을 커뮤니티에 게시할 수 있다.
다양한 사람들이 찍은 모찌롤들을 보고 다른 아이디어를 얻을 수 있다.
좋아요/시간 순으로 모찌롤 게시물들을 볼 수 있다.
내 모찌롤은 나중에 다운로드 받을 수 있고, 커뮤니티에 공유 여부를 정할 수 있다.

💁 설계

🧱 서비스아키텍쳐

📱 화면흐름도

🎩 와이어프레임

🎨 ERD

📬 API 명세서

명세서는 링크로 참고해주세요.

📋 컨벤션

컨벤션은 링크로 참고해주세요.

향후 계획

현재에는 Host에서 집중된 권한들을 다른 유저들에게도 분산시키거나 다른 유저들이 보고 있는 배경을 공유하는 등 사용자들간의 상호작용을 더욱 확장시킬 수 있다.
실제 서비스를 통해 다양한 컨텐츠들을 만들어볼 수 있다.

⚙ 개발 환경 및 IDE

Frontend

Backend

Server

WebRTC

Team Work

카테고리

Application	Danguage	Language
✅ Desktop Web	✅ 웹 기술	✅ JavaScript
✅ Mobile Web	🔲 웹 디자인	🔲 TypeScript
✅ Responsive Web	🔲 웹 IoT	🔲 C/C++
🔲 Android App	🔲 IoT	🔲 C#
🔲 iOS App	🔲 모바일	🔲 Python
🔲 Desktop App		✅ Java
		🔲 Kotlin

TeamGarlic/Mozzi