WebRTC를 활용하여 다양한 사람들과 함께 소통하며 개인의 얼굴, 분위기와 어울리는 색상을 찾을 수 있는 서비스 개발
기능 | 내용 |
---|---|
기능 1 | 자신의 얼굴 주변에 여러 색상을 배치해보면서 어울리는 색상 비교 |
기능 2 | 나만의 색상 팔레트에 원하는 색상 담기 |
기능 3 | 친구, 랜덤, 개인으로 구분된 미팅 방에 입장하여 서로 소통하며 색상 비교 및 선택 |
기능 4 | 어울리는 색상을 찾기 위해 투표 가능(토너먼트 / 원 픽) |
기능 5 | 마이페이지에서 최근 참여했던 미팅에서 선택했던 팔레트 내역 확인 가능 |
기 간 | 내 용 |
---|---|
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. | 서비스 배포 및 유지보수 |
SSAFY 7th 대전캠퍼스 B208
Name(Git) | 송다경 | 김민영 | 김찬일 | 이한기 | 강민성 | 오정환 |
---|---|---|---|---|---|---|
Github | ||||||
Position | 👑 / Frontend | Frontend | Frontend | Frontend | Backend | Backend |
1) Figma (link)
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 |
5) REST API (link)
전체 기능 요약 |
---|
미팅 참여 | 색상 팔레트 |
---|---|
- 개인, 친구와 함께 하기, 토픽으로 참여하기 등 사용자의 선택에 따라 미팅 방에 참여하여 서비스 이용
- 색상 팔레트에서 원하는 색을 선택하여 얼굴 주변에 배치
- 최대 8개의 색상 선택 가능
원 픽 방식 | 토너먼트 방식 |
---|---|
- 원 픽 방식 : 선택한 8개의 색상 중 나 또는 미팅 참여자에게 가장 잘 어울리는 색을 선택할 수 있음
- 토너먼트 방식 : 개인 미팅에서만 사용 가능하며, 색상을 2개씩 비교하여 가장 잘 어울리는 색상을 선택할 수 있음
결과 화면 | 마이페이지 |
---|---|
- 미팅이 종료되면 결과지를 표시
- 마이페이지에서 최근 참여했던 미팅에서 선택했던 팔레트 내역을 확인 가능
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