Application | Domain | Language | Framework |
---|---|---|---|
✅ Desktop Web | ✅ AI | ✅ JavaScript | 🔲 Vue.js |
✅ Mobile Web | ✅ Big Data | 🔲 TypeScript | ✅ React |
✅ Responsive Web | 🔲 Blockchain | 🔲 C/C++ | 🔲 Angular |
🔲 Android App | 🔲 IoT | 🔲 C# | ✅ Node.js |
🔲 iOS App | 🔲 AR/VR/Metaverse | ✅ Python | 🔲 Flask/Django |
🔲 Desktop App | ✅ Game | ✅ Java | ✅ Spring/Springboot |
-
프로젝트명: 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 애니메이션 지원 라이브러리. 메인 페이지 진입 애니메이션에 활용
-
배포 환경
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#/
Backend | Backend | Frontend | Frontend | Frontend | Frontend |
marugy |
jinsikhong |
parkheechan |
non-inss |
skqlck- |
park-js515 |
신규람 | 홍진식 | 박희창 | 이명인 | 안종상 | 박주성 |
- 최소 30분, 최대 1시간까지 고민하고 서로에게 질문해요.
- 문제를 빠르게 해결하면 팀 전체의 개발 효율성을 높일 수 있어요.
- 프로젝트 진행시 알게된 지식을 나눠요.
- 다른 이슈에도 적용할 수 있어요.
- MR을 할 때는 항상 코드 리뷰를 진행해요.
- 서로의 코드를 검토하고 피드백을 주고받으면 품질을 높일 수 있어요.
- 무조건적인 좋아요는 금지!
- 솔직한 피드백으로 프로젝트 완성도를 높일 수 있어요.
- 자유롭게 솔직한 의견을 공유해요.
- 다양한 아이디어와 관점을 고려하여 팀의 창의성과 협업을 촉진시킬 수 있어요.
- 정해놓은 Jira, Branch, Commit 컨벤션을 지켜요.
- 통일화된 컨벤션으로 작업에 대한 정보를 쉽게 알 수 있어요.
- 확장성과 구조를 생각하며 구현해요.
- 코드의 품질과 안정성을 중요하게 여기며 탄탄하게 코드를 작성해요
- 힘들어도 웃음을 잃지 않아요.
- 항상 긍정적인 마인드로 좋은 분위기를 형성해요.