뷰덕 - BeauDuck 뷰티 서비스

뷰티 덕후를 위한 Web RTC 기반 뷰티 컨텐츠 제공 서비스

뷰티에 관심있는 모든 사람이 비용 부담 없이 퍼스널 컬러 진단, 메이크업 튜토리얼 등 뷰티 컨텐츠를 즐길 수 있습니다.

🐥 소개 영상 보기 : https://youtu.be/O0s7edaADMQ

🐥 프로젝트 진행 기간

2023.01.02(월) ~ 2023.02.17(금) (총 7주동안 진행)

SSAFY 8기 2학기 공통 프로젝트 - BeauDuck

🐥 BeauDuck - 배경

뷰티의 주체가 “남”에서 “나”로 옮겨가고 있다는 것을 알고 계신가요? 남들이 많이 입는 코디, 남들이 자주 하는 메이크업이 아닌 나에게 잘 어울리는 코디와 메이크업을 요구하는, 퍼스널 뷰티의 시대가 도래했습니다!

나를 더 잘 이해하고 나에게 꼭 맞는 메이크업을 찾고 싶지 않으신가요?? 비대면 무료 퍼스널 컬러 진단부터 다양한 메이크업 콘텐츠와 가이드를 제공하는 웹 서비스 플랫폼 **“뷰덕(Beauduck)”**에 모두 준비되어 있습니다.

🐥 BeauDuck - 개요

“뷰티 덕후도, 덕후가 되고 싶은 사람도 모두 사용할 수 있는 서비스”

뷰덕은 뷰티 덕후의 약자입니다.

뷰덕의 핵심 컨셉은 비용 부담 없이 퍼스널 컬러 진단, 메이크업 튜토리얼 등 뷰티 컨텐츠를 즐길 수 있는 웹 서비스입니다.

🐥 주요 기능

1️⃣ Web RTC를 이용한 퍼스널컬러 진단

2️⃣ 메이크업 튜토리얼 생성 및 체험

3️⃣ AI를 이용한 닮은 꼴 메이크업 튜토리얼 추천

4️⃣ 유저 실시간 소통 서비스 및 자유 게시판

🎨 도와덕

퍼스널 컬러 진단

▫ 퍼스널 컬러를 무료로 쉽고 빠르게 진단받을 수 있습니다.

▫ 진단을 받고자 하는 유저(호스트)의 화면 배경이 3초마다 바뀝니다.

▫ 다수의 평가단이 호스트의 화면을 보고 색상이 어울리는지 선택합니다.

▫ 모든 평가단의 투표 결과를 수집하여 퍼스널 컬러 진단 결과를 도출합니다.

▫ 호스트는 평가 결과 진단서를 평가 종료 직후 실시간으로 확인 가능합니다.

뷰티 관련 정보 제공

▫ 네이버 검색 API를 사용한 데이터 크롤링을 통해 퍼스널 컬러, 메이크업 등 뷰티 관련 키워드의 기사, 블로그, 상품 정보를 제공합니다.

▫ 해당 정보를 클릭하면 원본 링크로 이동할 수 있습니다.

✨ 따라해덕

메이크업 튜토리얼

▫ 상위 10개 메이크업, 랜덤 추천 메이크업, AI 추천 메이크업, 전체 메이크업 리스트 등 화면 내 유저가 다양한 접근 방식으로 메이크업 튜토리얼을 선택할 수 있습니다.

▫ 메이크업 대표사진, 각 세부 과정에 대한 상세설명, 사용 색상, 가이드 이미지를 제공합니다.

▫ facemesh를 사용하여 유저의 얼굴 좌표에 가이드라인을 제공합니다.

▫ 메이크업을 완성한 모습을 화면 캡쳐를 통해 저장할 수 있고, “마이페이지 > 갤러리” 탭에서 모아보기가 가능합니다.

▫ 메이크업이 종료되면 해당 메이크업을 평가할 수 있습니다. 별점과 조회수가 높으면 화면 상단부인 TOP10 에 노출되어 더 많은 유저가 이용할 수 있도록 유도할 수 있습니다.

메이크업 컨텐츠 커스터마이징

▫ 원하는 단계와 원하는 컬러, 모양 등 디테일한 부분을 하나의 메이크업 컨텐츠로 커스터마이징하는 것이 가능합니다.

▫ 모든 단계는 초보자도 알기 쉽게 시각화된 UI를 통해 제공됩니다.

▫ 완성한 각 컨텐츠는 마이페이지에서 모아보기가 가능합니다.

닮은꼴 메이크업 추천

▫ 사용자의 정면 얼굴 사진을 등록하여 닮은꼴 회원들이 만든 메이크업을 추천해줍니다.

▫ “마이페이지>이미지 저장” 탭에서 화면 캡쳐를 통해 정면 사진을 저장할 수 있습니다.

▫ 이때 저장된 이미지는 추천을 위해서만 사용되며 저장되지 않습니다.

▫ 최대 5개의 메이크업을 추천해주며 닮은 회원이 없을 경우 추천 메이크업이 없을 수 있습니다.

👨‍👧‍👧 투게덕

실시간 화상 채팅

▫ WebRTC를 이용하여 유저들과 자유롭게 화상으로 소통할 수 있습니다.

▫ Openvidu 라이브러리를 통해 간단히 Custom하였습니다.

🤼‍♂️ 쑥덕쑥덕

게시판

▫ 뷰티와 관련된 정보, 사담 등을 작성할 수 있습니다.

▫ 작성하는 게시물의 목적에 따라 정보 게시판과 질문 게시판으로 분리하였습니다.

▫ 댓글을 작성하여 다른 사용자들과 소통할 수 있습니다.

🏠 마이페이지

메이크업

▫ 따라해덕에서 실행한 메이크업과 만든 메이크업 정보를 확인할 수 있습니다.

갤러리

▫ 메이크업 튜토리얼 종료 후 저장한 사진을 볼 수 있습니다.

사진 저장

▫ 메이크업 추천에 사용되는 얼굴 사진을 촬영할 수 있습니다.

🐥 기술 스택

🧙‍♂️ FrontEnd

React 버전 : 18.2.0
node.js 18.13.0
상태 관리 라이브러리
- react-redux v8.0.5
- redux-tool-kit 1.9.1
router v6.6
JSX
WebRTC
- openvidu
Facemesh 라이브러리
SCSS

👷‍♂️ BackEnd

Intellij 2022.3.1
Spring boot 2.7.7
Java 1.8
Gradle 7.6
Spring Data JPA
Swagger 2.0
Spring Security
Lombok
flask

DB

MySQL 8.0.31
Redis 7.0.8

OS

Ubuntu
Docker 23.0.1
Jenkins LTS

기타 편의 툴

Postman
Termius

🐥 산출물

ERD

와이어프레임

BEAUDUCK/beauduck_project