• 프로젝트명: RE:ON (레온) AI를 활용한 연기 플랫폼

• 주요 기능

  • 연기 배틀 (1vs1로 연기 배틀)
  • 연기 연습 (제공되는 영상으로 연기 연습 가능)
  • AI를 활용한 연기 점수 측정
  • 본인의 연기 영상을 업로드하여 소통할 수 있는 SNS

• 주요 기술

  • WebRTC, WebSocket, OpenVidu

  • EC2, GCP(Google Cloud Platform)

  • Springboot, Spring Security, JPA, QueryDSL, JWT Authentication, OAuth, REST API, Swagger

  • React.js, Tailwind, Node.js, Tailwind, MUI

  • Face API, ONNX, axios

• 참조 리소스

  • Vuetify: 디자인 전반 적용
  • Vue Argon Design System: 디자인 전반 적용
  • Vue Black Dashboard Pro(유료): 캘린더 컴포넌트 사용
  • AR Core: 구글에서 제공하는 AR 지원 라이브러리. 이미지 인식 및 오버레이 영상에 활용
  • Color Thief: 이미지 색상 추출 라이브러리. 커버 사진 색상 추출 및 배경 변경에 활용
  • Animation.css: CSS 애니메이션 지원 라이브러리. 메인 페이지 진입 애니메이션에 활용

• 배포 환경

  • URL: https://i9c203.p.ssafy.io

SNS와 유튜브 등에서 밈과 성대모사가 활발하게 퍼져나가고 있습니다.
이러한 트렌드를 반영하여, 사용자들이 연기를 손쉽게 연습하고, 공유하고 즐길 수 있는 플랫폼의 필요성을 인지하게 되었습니다.

• REON은 다양한 작품의 명장면을 따라하며 즐겁게 연기하는 서비스입니다.:astonished:
• 홀로 연기 연습, 다른 유저와 연기 베틀이 가능합니다.:film_frames:
• 사용자의 연기를 AI가 평가한 후 연기 점수를 제공합니다.:100:
• 자신의 연기 영상을 공유하며 다른 사용자들과 소통할 수 있습니다. :clap:

• REON의 주요 기능은 다음과 같습니다!

같이하기-백스테이지	같이하기-베틀룸
연기 대결을 하기 전 백스테이지입니다!	연기 대결을 진행하는 베틀룸입니다!

• 1:1 화상 연기 배틀을 진행합니다.
• 표정과 음성을 이용하여 연기를 채점합니다.
• AI 모델로 원본 영상과의 감정을 비교하여 채점합니다.
• 사용자의 음성을 STT로 변환하여 원본 영상의 대본과 비교하여 채점합니다.

연기영상 업로드	투표해줘 게시판
저장한 연기영상을 투표해줘 게시판에 업로드 할 수 있습니다!	유저들이 업로드한 연기영상을 볼 수 있습니다!

이달의 인기영상	커뮤니케이션
유저들이 업로드한 연기영상을 볼 수 있습니다!	댓글과 좋아요로 소통할 수 있습니다!

• 연기 배틀을 종료하고, 여러분의 연기를 저장할 수 있습니다.
• 저장한 연기 영상을 공유하여 다른 사용자들과 소통하고 평가할 수 있습니다.
• 많은 사랑을 받은 연기는 REON 인기 영상으로 진입합니다.

연기 연습	연기 영상 교체
혼자 연기연습을 할 수 있습니다!	연기 영상 변경이 가능합니다!

• 연기 배틀에 부담을 느끼거나 연습을 하고 싶을때 홀로 연기연습을 할 수 있습니다.
• 홀로 연기하고 채점을 진행하면서 연기 실력을 향상시킬 수 있습니다.

메인페이지	메인페이지
상단 메뉴바를 이용하여 원하는 서비스를 이용할 수 있습니다.	사용자 메뉴를 선택하여 로그인, 로그아웃, 마이페이지 이동이 가능합니다.

같이하기-백스테이지	같이하기-튜토리얼
상단 메뉴 같이하기 선택 시 입장하게 되는 페이지입니다. 개인의 배틀 정보와 현재 top랭킹을 확인 할 수 있습니다.	게임을 시작하기에 앞서 튜토리얼을 통해 게임 방법을 확인 할 수 있습니다.

같이하기- 베틀페이지(1)	같이하기- 베틀페이지(2)
매칭된 유저의 화면이 보이고 가운데에 연기할 연기 영상 및 대본이 보입니다.	연기 영상이 보여진 후 차례대로 연기를 진행합니다.

같이하기-베틀페이지(3)	같이하기-베틀페이지(4)
자신의 차례가 아니라면 음소거 처리됩니다.	게임이 종료되면 승패 여부가 보여지고 자신의 연기 영상을 저장할 수 있습니다.

마이페이지	마이페이지-프로필 수정
유저 정보와 공개 연기영상, 비공개 연기영상, 좋아요를 누른 연기영상을 볼 수 있습니다. 다른 유저의 페이지라면 해당 유저가 공개한 연기 영상만 확인이 가능합니다.	프로필 이미지 수정이 가능합니다.

마이페이지-프로필 수정	마이페이지-비공개 영상 상세보기
자신의 닉네임, 자기소개 수정이 가능합니다.	저장된 연기영상을 볼 수 있고 투표해줘 게시판에 작성이 가능합니다.

마이페이지-게시글	마이페이지-좋아요
투표해줘 게시판에 올린 연기영상을 의미합니다. 좋아요와 댓글로 소통이 가능합니다.	내가 좋아요를 누른 다른 사람의 연기영상을 볼 수 있습니다.

투표해줘 게시판	투표해줘-인기영상
소통과 평가를 위해 공개한 연기 영상들을 볼 수 있습니다.	한달동안 가장 좋아요를 많이 받은 영상들을 보여줍니다.

혼자하기	혼자하기
혼자 연기 연습을 할 수 있는 페이지입니다.	연기를 진행한 뒤 베틀과 동일하게 AI로 채점을 진행합니다.

• 비교 방법은 감정 분류를 통해 나온 감정 확률 값의 차이를 이용합니다.

• 감정 분류는 얼굴 검출과 이미지 분류, 2가지 Task로 구성됩니다.

• 

• AI 모델 설정과 학습에 대한 상세한 설명은 Chorong.md.

https://i9c203.p.ssafy.io/swagger-ui/index.html#/

{: width="600" height=""}

{: width="600" height=""}

{: width="500" height=""}

Backend	Backend	Frontend	Frontend	Frontend	Frontend
marugy	jinsikhong	parkheechan	non-inss	skqlck-	park-js515
신규람	홍진식	박희창	이명인	안종상	박주성

• 최소 30분, 최대 1시간까지 고민하고 서로에게 질문해요.
• 문제를 빠르게 해결하면 팀 전체의 개발 효율성을 높일 수 있어요.

• 프로젝트 진행시 알게된 지식을 나눠요.
• 다른 이슈에도 적용할 수 있어요.

• MR을 할 때는 항상 코드 리뷰를 진행해요.
• 서로의 코드를 검토하고 피드백을 주고받으면 품질을 높일 수 있어요.

• 무조건적인 좋아요는 금지!
• 솔직한 피드백으로 프로젝트 완성도를 높일 수 있어요.

• 자유롭게 솔직한 의견을 공유해요.
• 다양한 아이디어와 관점을 고려하여 팀의 창의성과 협업을 촉진시킬 수 있어요.

• 정해놓은 Jira, Branch, Commit 컨벤션을 지켜요.
• 통일화된 컨벤션으로 작업에 대한 정보를 쉽게 알 수 있어요.

• 확장성과 구조를 생각하며 구현해요.
• 코드의 품질과 안정성을 중요하게 여기며 탄탄하게 코드를 작성해요

• 힘들어도 웃음을 잃지 않아요.
• 항상 긍정적인 마인드로 좋은 분위기를 형성해요.