Skip to content

WebRTC를 활용하여 다양한 사람들과 함께 소통하며 개인의 얼굴, 분위기와 어울리는 색상을 찾을 수 있는 서비스 개발

Notifications You must be signed in to change notification settings

Kkal-mat-chum/colors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ColorsBanner


목차

1. 프로젝트 개요

2. 프로젝트 설계

3. 프로젝트 소개

4. 프로젝트 파일 구조

5. 프로젝트 산출물


1. 프로젝트 개요

1) 프로젝트 목표

WebRTC를 활용하여 다양한 사람들과 함께 소통하며 개인의 얼굴, 분위기와 어울리는 색상을 찾을 수 있는 서비스 개발

2) 주요 기능

기능 내용
기능 1 자신의 얼굴 주변에 여러 색상을 배치해보면서 어울리는 색상 비교
기능 2 나만의 색상 팔레트에 원하는 색상 담기
기능 3 친구, 랜덤, 개인으로 구분된 미팅 방에 입장하여 서로 소통하며 색상 비교 및 선택
기능 4 어울리는 색상을 찾기 위해 투표 가능(토너먼트 / 원 픽)
기능 5 마이페이지에서 최근 참여했던 미팅에서 선택했던 팔레트 내역 확인 가능

3) 전체 일정

2022. 07. 05. ~ 2022. 08. 19. (7주)

기 간 내 용
07. 05. ~ 07. 19. 아이디어 선정 및 사용자 요구사항 분석
07. 15. ~ 07. 27. 요구사항 정의서 작성, Mock-up / ERD / REST API 설계
07. 25. ~ 07. 29. 회원가입, 로그인 등 기본 서비스 개발
07. 30. ~ 07. 15. OpenVidu를 이용한 화상 미팅 서비스 개발 / Face-Detection 적용 / Rest API 서버 개발
08. 16. ~ 08. 19. 서비스 배포 및 유지보수

4) 구성원

SSAFY 7th 대전캠퍼스 B208

Name(Git) 송다경 김민영 김찬일 이한기 강민성 오정환
Github 송다경 프로필 김민영 프로필 김찬일 프로필 이한기 프로필 강민성 프로필 오정환 프로필
Position 👑 / Frontend Frontend Frontend Frontend Backend Backend

2. 프로젝트 설계

1) Figma (link)

2) 개발환경

Backend Frontend CI/CD Collaboration Tools
Java Open-JDK zulu 8.33.0.1 Vue 2.6.14 AWS EC2 GitLab
SpringBoot Gradle 2.7.2 Vue/cli 5.0.8 Ubuntu 20.04 LTS Jira
Spring Data JPA Vuex 3.6.2 Docker 20.10.17 Webex
Lombok Vue Router 3.5.1 Notion
Swagger 2.9.2 OpenVidu 2.22.0
jjwt 0.11.2 aws-sdk 2.1192.0
MySQL 8.0.29 color-name-list 9.19.0
nearest-color 0.4.4
face-api.js 0.22.2

3) ERD

ERD

4) 아키텍처

architecture

5) REST API (link)


3. 프로젝트 소개

전체 기능 요약
전체기능요약

미팅 방 참여

미팅 참여 색상 팔레트
미팅참여 팔레트
  • 개인, 친구와 함께 하기, 토픽으로 참여하기 등 사용자의 선택에 따라 미팅 방에 참여하여 서비스 이용
  • 색상 팔레트에서 원하는 색을 선택하여 얼굴 주변에 배치
  • 최대 8개의 색상 선택 가능

투표 방식

원 픽 방식 토너먼트 방식
원픽 토너먼트
  • 원 픽 방식 : 선택한 8개의 색상 중 나 또는 미팅 참여자에게 가장 잘 어울리는 색을 선택할 수 있음
  • 토너먼트 방식 : 개인 미팅에서만 사용 가능하며, 색상을 2개씩 비교하여 가장 잘 어울리는 색상을 선택할 수 있음

결과 및 마이페이지

결과 화면 마이페이지
결과화면 마이페이지
  • 미팅이 종료되면 결과지를 표시
  • 마이페이지에서 최근 참여했던 미팅에서 선택했던 팔레트 내역을 확인 가능

4. 프로젝트 파일 구조

Frontend

colors
├── build
├── node_modules
├── public
└── src
    ├── api
    ├── assets
    │   ├── font
    │   ├── imagedefault
    │   ├── models
    │   ├── mypage
    │   └── videos
    ├── components
    │   ├── common
    │   ├── EnterancePage
    │   ├── main
    │   ├── myPage
    │   ├── topic
    │   ├── user
    │   ├── videochat
    │   │   └── colorPallete
    │   └── Voting
    ├── router
    ├── store
    │   └── modules
    └── views
        ├── MeetingView
        └── VotingView

Backend

└── colors
      ├── config
      ├── controller
      ├── database
      |     ├── entity
      |     └── repository
      ├── enumdata
      ├── interceptor
      ├── request
      ├── response
      ├── service
      └── util

5. 프로젝트 산출물

About

WebRTC를 활용하여 다양한 사람들과 함께 소통하며 개인의 얼굴, 분위기와 어울리는 색상을 찾을 수 있는 서비스 개발

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published