📺 소개 영상 보기: UCC 링크
2023.02.27(월) ~ 2023.04.07(금)
SSAFY 8기 2학기 공통프로젝트 - OMZ
사회에는 Y2K의 열풍이 불고 있습니다. Y2K란 Year 2000의 약자로 2000년대를 의미합니다. Y2K는 기존 세대에겐 추억의 향수를 불러오고, Z세대에겐 Y2K 패션의 특징인 화려한 스타일링과 과감한 컬러가 세대의 가치관과 부합하여 긍정적인 반응이 주를 이루었습니다.
OMZ는 이러한니즈를 충족시켜주기 위해 탄생한 차세대 SNS입니다. OMZ와 함께라면, SNS에서도 나만의 개성을 쉽게 표현할 수 있습니다!
'매력 있는 건 같지만 우리는 모두 다르잖아'
OMZ는 ‘오늘의 엠지’의 약자입니다.
OMZ는 기본적으로 채팅과 커뮤니티를 통해 타인과 소통한다는 점의 SNS 기능을 개발하였습니다. 또한, 본인 얼굴을 바탕으로 생성된 3D 동물 아바타와 3D 아이템을 이용한 아바타, 미니룸 커스텀을 이용해 나만의 개성을 표현할 수 있습니다. 또한, MBTI 정보 등으로 나와 꼭 맞는 친구를 추천 받을 수 있고 미니룸에서 나의 감정을 통해 배경 음악도 추천받을 수 있습니다.
- 사진을 입력하면 강아지, 고양이, 여우, 곰, 토끼, 공룡 총 6가지의 동물로 분석해줘요.
- 가장 크게 나타난 확률을 통해 동물 직접 제작한 3D modeling 아바타를 생성해요.
- MBTI 궁합과 내가 좋아하는 동물상의 정도를 통해 잘 맞는 친구 3명을 추천해줘요.
- 친구의 닉네임을 통해 검색할 수도 있고 짧은 메세지와 함께 친구 신청을 보낼 수 있어요.
- 친구 수락, 거절, 끊기를 통해 친구를 관리할 수 있어요.
- 1:1 실시간 채팅을 통해 회원들끼리 소통할 수 있어요.
- 사진을 포함한 글을 쓰고 공유할 수 있어요.
- 좋아요 기능을 통해 좋아하는 글을 모아볼 수 있어요.
- 상태 메세지를 작성하고, 오늘 듣고 싶은 노래를 선택하면 감정 분석에 기반한 음악 추천을 받을 수 있어요.
- 선택한 음악은 미니룸에서 동영상으로 볼 수 있어요.
- 3D 미니룸을 확대 및 이동하고, 조명을 켜볼 수 있어요.
- 3D 아이템으로 나만의 미니룸을 꾸며볼 수 있어요.
- 친구의 미니룸에 방명록을 작성할 수 있어요.
- 3D 아이템으로 동물 아바타를 커스텀해 나만의 개성을 뽐내볼 수 있어요.
- 꾸민 내용으로 프로필 사진을 새롭게 만들 수 있어요.
| Frontend | Backend - Spring | Backend - Django | CI/CD |
|---|---|---|---|
| VSCode | IntelliJ IDE | Python 3.10.9 | AWS EC2 |
| react 18.2.0 | java 11.0.18 | Scikit-learn | Docker |
| node.js 18.15.0 LTS | Springboot | Tensorflow | Jenkins |
| vite 4.1.0 | gradle Openjdk 11.0.18+10 | SQLite | NGINX |
| typescript 4.9.3 | Spring Web | Webhook | |
| three.js 0.150.1 | Spring Data JPA | ||
| react-three-fiber 8.12.0 | jUnit | ||
| blender 3.4.1 | Redis | ||
| react query 3.39.3 | WebSocket | ||
| react-router-dom 6.8.2 | MySQL 8.0.30 | ||
| tailwindcss 3.2.7 | swagger 2.0.0 | ||
| recoil 0.7.7 |
| 메인 페이지 | 회원가입 |
|---|---|
 |
 |
| 친구 추천 | |
|---|---|
 |
 |
| 내 친구와 친구 신청 목록 | 친구 관리 |
|---|---|
 |
 |
| 친구와의 채팅 | 친구가 아닌 사람과의채팅 |
|---|---|
 |
 |
| 글 작성, 검색, 좋아요와 회원별 글 목록 | 작성 글 관리 | 댓글 작성 & 관리 |
|---|---|---|
 |
 |
 |
| 음악 추천 | 커스텀 | 메인 |
|---|---|---|
 |
 |
 |
| 메인 | 정보 수정 |
|---|---|
 |
 |
| 커스텀 | 프로필 사진 촬영 |
|---|---|
 |
 |
| 정채린 | 최유태 | 한선희 |
|---|---|---|
 |
 |
 |
| 팀원 | 부팀장 | 팀장 |
| Frontend | Frontend | Backend |
| - 와이어프레임 총괄 - 프로젝트 초기 구조 정립 - 3D 아바타 커스텀 및 모션 적용 - StopmJS를 이용한 채팅 서비스 구현 및 무한 스크롤 구현 - 실시간 커뮤니티 구현 - GCS를 이용한 커뮤니티 & 회원 사진 관리 - React 폴더 구조 설계 |
- three.js, react-three-fiber 로직 구현 - 아이템 커스텀 로직 - 새로운 친구, 친구 목록 - 카카오톡 소셜 로그인 - 회원가입 단계 관상분석 Teachable Machine 연동 - 미니룸 아이템 자체 제작 - 아바타 프로필 사진 생성 - 와이어프레임 - React 폴더 구조 설계 |
- Redis Pub/Sub 메세징 기반 채팅 서비스 구현 - 커서 페이지네이션 구현 - scheduler를 이용한 Redis 캐시 전략 설계 - Redis 운영 관리 - 메인 페이지 애니메이션 제작 - Blender를 통한 UCC 제작 - ERD 설계 - Spring 파일 초기 구조 생성 |
| 강윤주 | 배서연 | 정원영 |
|---|---|---|
 |
 |
 |
| 팀원 | 팀원 | 팀원 |
| Backend, Frontend, Devops | Backend | Backend |
| - 미니룸 정보 관리 및 아이템 커스텀 REST API 구현 - 미니룸 정보 관리 및 아이템 커스텀 비동기 통신 - Docker, Jenkins, Nginx를 이용한 EC2 서버 배포 - CI/CD 파이프라인 구축 - 와이어프레임 & ERD 설계 - 발표 자료와 웹사이트에 쓰인 시각 자료 서치 |
- 회원 정보와 친구 관리, 커뮤니티, 마이페이지 커스텀 REST API 구현 - GCS를 이용한 커뮤니티 사진 관리 - 미니룸 상태메세지 감정 분석 & 음악 추천 API 구현 - UX/UI - Blender를 통한 동물 아바타 자체 제작 - 와이어프레임 & ERD 설계 - 발표 자료 제작 |
- 카카오톡 소셜 로그인 REST API 구현 - selenium을 이용한 연예인 이미지 크롤링 - Teachable Machine을 이용한 얼굴상 학습 및 동물상 분석 - 회원 정보를 활용한 친구 추천 알고리즘 구현 - GCS를 이용한 프로필 사진 관리 - ERD 설계 |
- Git
- Notion
- JIRA
- MatterMost
- Webex
- Gitlab
- 코드의 버전을 관리
- 기능별 브랜치 관리
- 기능이 끝나면 브랜치 삭제
- JIRA
- 매주 목표량을 설정하여 Sprint 진행
- 업무의 할당량을 정하여 Story Point를 설정하고 작업
- 회의
- 매일 아침 Daily Scrum 진행
- 빠른 소통과 신속한 대응 가능
- Notion
- 회의가 있을때마다 회의록을 기록하여 보관
- 기술확보 시, 다른 팀원들도 추후 따라할 수 있도록 보기 쉽게 작업 순서대로 정리
- 컨벤션 정리
- 간트차트 관리
- 기능명세서 등 모두가 공유해야 하는 문서 관리
src
├── api
│ ├── chatting.ts
│ ├── community.ts
│ ├── index.ts
│ ├── kakaoLogin.ts
│ ├── member.ts
│ ├── miniRoom.ts
│ ├── myFriends.ts
│ ├── myPage.ts
│ ├── newFriend.ts
│ └── youtube.ts
├── components
│ ├── chatting
│ ├── common
│ ├── communityPag
│ ├── login
│ ├── miniRoom
│ ├── myFriends
│ ├── mypage
│ ├── newFriends
│ └── signUp
├── pages
├── recoil
├── App.css
├── App.tsx
├── index.css
├── main.tsx
└── vite-env.d.ts
omz
├── api
├── config
│ ├── RedisConfig.java
│ ├── StompHandler.java
│ ├── StompWebSocketConfig.java
│ ├── SwaggerConfig.java
│ └── WebConfig.java
├── dto
│ ├── req
│ └── resp
├── entity
├── exception
├── interceptor
├── repository
├── service
├── util
│ ├── scheduler
│ └── ChatUtils.java
├── DataLoader.java
└── OmzApplication.java
django
├── data
│ ├── anger.csv
│ ├── happiness.csv
│ ├── sadness.csv
│ ├── song_similarity.csv
│ ├── song_total.csv
│ └── surprise.csv
├── music_choice
├── omz_django
├── reco_friend
├── trained_KoBERT
├── db.sqlite3
├── Dockerfile
├── manage.py
├── requirements.txt
└── test.json