Skip to content

무드메이트 : 무드기반 1:1 매칭 서비스 💗

Notifications You must be signed in to change notification settings

Leets-Official/MoodMate-FE

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1d1d9d3 · Oct 31, 2024
Nov 6, 2023
May 12, 2024
Jun 1, 2024
Jun 16, 2024
May 10, 2024
May 10, 2024
Nov 6, 2023
Oct 31, 2024
Apr 12, 2024
May 10, 2024
May 10, 2024
Nov 6, 2023
May 15, 2024
May 10, 2024

Repository files navigation

MoodMate - 무드, 나이, 학과를 반영한 대학생 맞춤 1대1 매칭 서비스

MoodMate



📱 MoodMate | 사이트 바로가기 (서비스 종료)
📌 Official Account | MoodMate Instagram


🗓️ 8개월간의 기획, 개발, 출시 및 유지보수 (2023.10 ~ 2024.06)

💏 '가천대학교 대학생'을 대상으로 시즌 1에서 약 400명, 시즌 2에서 약 350명의 학생 사용자 유치


MoodMate(무드메이트)는 '가천대학교 대학생' 을 대상으로 매일 밤 10시에 사용자의 '데이트 무드', '나이', '학과'를 고려하여 남녀를 1대1로 매칭해주는 서비스입니다.

매칭된 남녀는 채팅방에서 1:1 대화를 나눌 수 있으며, 22시간 동안 유지되어 다음 날 오후 8시에 채팅방이 비활성화 되어 더 이상 대화를 나눌 수 없게 됩니다.

상대방과 더 이야기를 나누고 싶다면, 채팅방이 비활성화되기 전에 연락처나 SNS를 서로 주고 받으세요!

📄 목차


✍🏻 프로젝트 기획 개요

  • 기존 데이팅 서비스는 외모 중심의 획일적인 매칭에 집중하여, 진정한 소울메이트를 찾는 사용자들의 갈증을 해소하지 못했습니다.
  • 저희는 단순한 외모가 아닌, 깊이 있는 교감과 공통의 가치관을 통해 오래도록 함께할 수 있는 인연을 원하는 사용자들의 목소리에 집중했습니다.
  • 이러한 사용자들의 요구를 반영하여, '무드'를 매개로 서로의 내적인 면을 먼저 이해하고 대화를 이어나갈 수 있는 매칭 서비스 'MoodMate'를 기획하게 되었습니다.



1️⃣ 시즌 1

✨ 주요 기능 소개

로그인 페이지

  • URL로 서비스 도메인을 입력하게 되면 로그인 페이지로 이동합니다.
  • 소셜 로그인을 통해 로그인 과정이 진행됩니다.



회원 정보 입력

  • 사용자는 소셜 로그인 후 회원 정보를 입력하게 됩니다.
  • 입력 정보에는 닉네임, 성별, 나이, 학과, 키워드가 포함되며 키워드를 제외한 나머지 정보를 이용하여 매칭이 진행됩니다.



상대 무디 조건 설정

  • 사용자는 회원 정보 입력을 완료한 후, 상대방에 대한 조건을 설정하게 됩니다.
  • 설정 조건에는 나이 구간, 같은 학과 선호 여부, 선호하는 무드가 포함되며, 이 정보들은 매칭 프로세스에서 중요한 기준으로 활용됩니다.



메인페이지

매칭대기중 | 매칭 후 채팅중 | 비활성화중 메인

  • 회원 정보 입력과, 상대 무디 조건 설정이 완료되면 메인페이지로 이동합니다.
  • 메인 페이지에서는 매일 밤 10시에 시작되는 매칭 이벤트를 강조하는 카운트다운 타이머가 표시됩니다. 카운트다운이 종료되면 자동으로 매칭 프로세스가 시작되며, 매칭된 사용자는 분홍색 배경의 페이지로 전환되어 채팅방으로 들어가면 매칭된 사람과 대화를 할 수 있습니다.
  • 하단의 탭 바를 통해 사용자는 다음과 같은 기능에 쉽게 접근할 수 있습니다
    • 채팅방 아이콘: 매칭된 상대와의 대화를 시작하거나 진행 중인 대화를 계속할 수 있으며, 매칭이 되지 않은 사람은 채팅방에 입장이 불가능합니다.
    • 마이페이지 아이콘: 사용자의 프로필을 관리하고, 설정을 조정할 수 있는 마이 페이지로 이동합니다.
    • 비활성화 아이콘: 사용자가 원할 경우 매칭 이벤트 참여를 일시적으로 비활성화할 수 있으며, 재활성화하기 전까지 매칭에서 제외됩니다.



채팅

채팅 미리보기 | 채팅중 | 상대 무디 정보 조회

  • 매칭이 되게 되어 채팅 페이지에 입장하게 되면, 상대로 부터 온 메시지를 미리보기로 확인할 수 있습니다.
  • 미리보기 바를 누르면 채팅방에 입장할 수 있으며, 매칭된 상대와 1:1로 대화를 나눌 수 있습니다.
  • 상대의 아이콘을 눌러서 상대 무디의 정보도 확인할 수 있습니다.



마이페이지

  • 마이 페이지에서는 앞서 설정했던 본인의 정보를 확인할 수 있습니다.

2️⃣ 시즌 2

🧐 시즌 1 유저 리서치 결과

리서치 홍보

  • 무드메이트 시즌1을 마무리 한 후, 웹사이트를 직접 사용한 학우분들의 의견을 듣고 사용자의 니즈를 파악하고 기능을 기획하기 위해 유저 리서치를 위한 설문조사를 실시하였습니다.
  • 교내 커뮤니티 에브리타임에 글을 게시하여 총 7명의 학우분들의 답변을 받을 수 있었습니다.
  • 구글폼 링크

리서치 분석

  • 리서치에 참여한 인원은 총 7명으로 남자 5명, 여자 2명이었습니다.
  • 비록 적은 인원이었지만, 지인들의 피드백과 교내 커뮤니티의 반응을 함께 참고하여 분석을 진행하였습니다.

  • '추가로 필요한 서비스'에 대한 의견 남성 응답자의 경우 다양한 항목이 제시되었으며, 특히 ‘채팅 알림’과 ‘상대방 조건 추가’가 높은 빈도로 언급되었습니다. 여성 응답자는 ‘채팅 알림’이 높은 빈도로 언급되었습니다.

  • '서비스 개선이 필요하다고 느낀 부분'에 대해서 총 다섯 분께서 의견을 주셨고,'채팅 알림 도입'을 가장 많이 제안해 주셨습니다.

시즌 2 방향성 설계

채팅 알림 기능 우선 도입

  • ‘채팅 알림 도입’이 남성 및 여성 응답자 모두에게서 높은 빈도로 언급되었습니다.
  • 이는 사용자들이 실시간으로 소통할 수 있는 환경을 필요로 하고 있음을 시사한다고 생각했습니다.
  • 따라서 FCM을 활용한 채팅 알림 기능을 우선적으로 도입하여 사용자 경험을 개선하는 방향으로 계획을 수립했습니다.

상대방 조건 추가

  • 남성 응답자들 사이에서 ‘상대방 조건 추가(키, 관심사, 취미 등)’에 대한 요구가 다수 제기되었습니다.
  • 하지만 키를 상대방 조건으로 등록하게 되면 서비스 취지인 ' 내적인 면을 먼저 이해하고 대화를 이어나갈 수 있는 매칭 서비스'에 적합하지 않다고 생각했습니다.
  • 따라서 나를 나타낼 수 있는 키워드 개수를 확대하고, 기존 카테고리를 취미 관련 키워드로 전환하여 사용자 경험을 개선하는 방향으로 계획을 수립했습니다.

서비스 성능 및 안정성 개선

  • 로딩 속도, 오류 개선과 같은 기능적 문제가 지적되었습니다.
  • 기존에 개발진도 이러한 문제를 인지하고 있었기 때문에, 안정성과 성능 최적화에 주력하여 사용자 경험을 개선하는 방향으로 계획을 수립했습니다.

지속적인 사용자 피드백 수집 및 반영

  • 적은 인원이었지만 다양한 의견이 제공되었으며, 이는 서비스 개선 방향성에 중요한 자료가 되었습니다.
  • 보다 빠르게, 보다 많은 유저의 의견을 받기 위해 '에브리타임' 커뮤니티에서 유저와 실시간으로 소통하며 지속적으로 피드백을 받아 서비스를 개선하는 방향으로 계획을 수립했습니다.

🌊 주요 변경 사항

PWA 도입

온보딩 페이지

  • 앱 알림 서비스와 UX, 채팅 기능을 개선하기 위해 프로그레시브 웹 어플리케이션(PWA)을 도입하였습니다.
  • 유저 서비스 만족도 조사 결과, 채팅 알림 기능에 대한 유저의 요구가 확인되었고, 이를 Firebase의 FCM을 활용한 웹 푸쉬 기능을 적용하여 사용자 경험을 개선하였습니다.
  • Android, iOS, Desktop 앱으로 다운로드할 수 있습니다.

구글 로그인 → 카카오 로그인

구글 로그인(시즌1) | 카카오 로그인(시즌2)

  • 시즌 1에서는 구글 로그인 기능을 도입하여 서비스를 운영하였습니다.
  • 그러나, 일부 유저가 여러 개의 구글 계정을 보유한 경우, 하나의 유저가 여러 계정으로 가입하는 문제를 완전히 방지할 수 없다는 한계가 있었습니다.
  • 때문에, 시즌 2에서는 카카오 로그인으로 변경하여 중복 가입 문제를 막을 수 있었습니다.

회원 탈퇴 및 닉네임 수정 API 도입

회원 탈퇴 및 닉네임 수정 기능 공지

회원 탈퇴

  • 시즌 1에서는 회원 탈퇴 기능 없이 배포했으며, 관련 피드백이 없었기 때문에 시즌 2에서도 회원 탈퇴 기능을 포함하지 않고 배포했습니다.
  • 그러나 시즌 2에서는 회원 탈퇴 기능을 문의하는 유저가 많아졌습니다.
  • 이에 따라 회원 탈퇴 기능의 필요성을 인지하고, 신속하게 탈퇴 회원 API를 제작하여 배포했습니다.

닉네임 수정

  • 시즌 1에서도 실수로 본인의 이름으로 가입하여 닉네임 수정을 원하는 유저가 많았습니다.
  • 그러나 매칭 로직을 변경해야 했기 때문에, 짧은 서비스 기간 내에 이를 수정하고 닉네임 수정 API를 제작하는 데 어려움이 있었습니다.
  • 이에 따라 시즌 2에서는 매칭 로직을 변경하고, 중복 체크 기능을 포함한 닉네임 수정 API를 제작하여 배포했습니다

유령 회원 방지

  • 시즌 1에서는 매칭 비활성화 버튼을 누르지 않은 채 서비스를 이용하지 않는 유령 회원들이 매칭에 참여하게 되어, 대화가 원활하게 이어지지 않는 문제가 있었습니다.
  • 이를 해결하기 위해 스프링 스케줄러(cron)를 활용하여, 매칭 시점부터 다음 날 채팅방 비활성화 시간까지 채팅을 입력하지 않는 유령 회원을 자동으로 매칭에서 제외하도록 했습니다.

무드 초점 전환(데이트 무드 -> 연애 무드)

데이트 무드(시즌1) | 연애 무드(시즌2)

무드 변경 공지

무드 초점 전환

  • 시즌 1에서는 “어떤 무드의 데이트를 하고 싶은지”에 초점을 맞춰 4개의 데이트 무드로 카테고리를 나누어 진행했습니다.
  • 시즌 1 회고에서, 데이트 무드로 나누는 것이 데이트의 일회성 활동에 중점을 두는 것 같다는 의견이 제기되었습니다.
  • 이에 따라 내부 회의에서 시즌 2에서는 “어떤 연애를 하고 싶은지“로 초점을 전환하고, 연애 스타일에 맞춰 카테고리를 재구성하여 사용자가 더 깊이 있는 관계 형성을 목표로 할 수 있도록 개선하기로 결정하였고, 시즌 2에 이를 반영하여 배포하였습니다.

무드 변경(뜨거운 -> 잔잔한)

  • 연애 카테고리(뜨거운, 편안한, 설레는, 재밌는)를 나누어 배포했을 때, “뜨거운” 무드에 대한 유저의 선호도가 매우 낮다는 것을 확인했습니다.
  • 이에 따라 효율적인 서비스 운영을 위해 카테고리 조정이 필요하다고 판단하였고, 내부 회의를 통해 “뜨거운” 무드를 “잔잔한” 무드로 변경했습니다.
  • 그 결과, 잔잔한 무드를 선택하는 사용자가 점차 늘어나면서 사용자들이 고르게 분산되었고, 서비스 효율성이 향상되었습니다.

키워드 개수 확대 및 취미 관련 카테고리로 변경

키워드(시즌1) | 키워드(시즌2)

키워드 추가 공지

  • 유저 서비스 만족도 조사 결과, 상대방 조건 추가(키, 관심사, 취미 등)에 대한 유저의 요구가 확인되었으며, 이를 반영하여 기존 카테고리를 취미 관련 키워드로 전환하고, 키워드 개수를 확대하여 사용자 경험을 개선하였습니다
  • 취미 카테고리로 변경함으로써 상대방의 취미를 이전보다 더 자세히 알 수 있었다는 긍정적인 피드백을 받았습니다.
  • 또한, 서비스 도중 유저로부터 받은 추천 키워드(“워커홀릭”, “집순돌이”, “춤”, “애주가”)를 추가하여 사용자들이 자신을 표현할 수 있는 폭을 더욱 넓혔습니다.

매칭 알고리즘 고도화

✍🏻 매칭 알고리즘 고도화 Wiki 보러가기

채팅 고도화

✍🏻 채팅 고도화 Wiki 보러가기

인프라 최적화

✍🏻 인프라 최적화 Wiki 보러가기

📊 서비스 배포 결과

🎤 홍보 과정

1. 교내 커뮤니티 사이트 '에브리타임'에 홍보게시물 게시

시즌 1

시즌 2

2. 공식 인스타그램 계정에 홍보글 게시

시즌 1

시즌 2

3. 교내 홍보 포스터 부착

시즌 1

시즌 2

🙋‍ 유저 수

시즌 1

  • 배포기간 (2023.12.18 - 2023.12.26 총 9일) 운영 DB 기준 회원가입 수 총 396명을 기록하였습니다.

시즌 2

  • 배포기간 (2024.05.17 - 2023.06.01 총 16일) 운영 DB 기준 회원가입 수 총 342명을 기록하였습니다.
  • 첫날 가입한 9명은 정식 출시 전에 QA를 위해 가입한 팀원들입니다.

💬 매칭을 통해 생성된 채팅방 수

시즌 1

  • 매칭 서비스 기간 (2023.12.19 - 2023.12.25, 총 7일) 동안 운영 DB 기준으로 하루 평균 약 87개의 채팅방이 생성되었으며, 이는 하루 평균 약 174명의 남녀가 매칭되었다는 의미입니다.
  • 시간이 지남에 따라 매칭된 남녀 수가 꾸준히 증가하면서 더 많은 채팅방이 생성되었습니다. 특히 2023년 12월 25일에는 가장 많은 110개의 채팅방이 생성되었으며, 이는 총 220명의 남녀가 매칭된 것을 의미합니다.

시즌 2

  • 매칭 서비스 기간 (2024.05.18 - 2024.05.31, 총 14일) 동안 운영 DB 기준으로 하루 평균 약 59개의 채팅방이 생성되었으며, 이는 하루 평균 약 118명의 남녀가 매칭되었다는 의미입니다.
  • 유령 회원을 비활성화함으로써 실제로 서비스를 사용하는 사용자들 간의 매칭이 이루어져 매칭의 질이 향상되었고, 실제 대화가 이루어질 가능성이 높힐 수 있었습니다.
  • 또한, 유령 회원을 제외했음에도 불구하고 매칭된 채팅방 수가 꾸준히 증가하는 것은 유효 사용자 기반이 지속적으로 확대되고 있음을 시사하며, 이는 서비스 개선 노력의 성공과 사용자 경험이 긍정적임을 의미합니다.

🧡 FE 팀원 소개

김나영 신은지 조혜원
FE FE FE
@nayoung3669 @eunji0714 @One-HyeWon

🚀 핵심 기능 및 FE 기술적 도전

PWA 적용

앱 알림 서비스, UX, 채팅 기능 개선을 위한 프로그레시브 웹 어플리케이션 제작

  • 유저 서비스 만족도 조사 결과, 채팅 알림 기능 구현에 대한 유저 니즈를 파악하였습니다.
  • Firebase의 FCM 활용 웹 푸쉬 기능을 추가하였습니다.
  • 서비스워커를 등록하였습니다.
  • Android, iOS, Desktop 앱 다운로드가 가능하게 하였습니다.

매칭 시스템

유저가 설정한 데이트 무드, 나이 선호도, 같은 학과 선호 여부 고려

  • 기존 Gale-Shapley 알고리즘을 서비스에 맞게 커스텀하여, N명의 남성과 M명의 여성(또는 그 반대)의 세 가지 선호도(무드, 나이, 같은 학과 여부)를 기반으로 최적의 매칭을 제공하도록 개발하였습니다.
  • 매칭 활성화 시 하루에 한 번 자동으로 매칭이 이루어지며, 매칭이 비활성화된 경우, 유저가 다시 활성화할 때까지 매칭이 진행되지 않도록 구현했습니다.
  • 시즌 1에서는 시스템이 user_id를 테이블에 저장된 순서대로 가져와 이전에 매칭된 사용자가 다시 매칭되는 문제가 있었습니다. 이를 해결하기 위해 매칭 시스템의 무작위성을 높이고, 이미 매칭된 사람과 다시 만날 확률을 최소화하는 작업을 진행했습니다.
  • 시즌 2에서는 시즌 1에서 보수하지 못했던, 매칭 과정에서 모든 사용자가 참여할 수 있도록 보장하고, 매칭되지 않는 문제를 해결하며, 예외 처리를 통해 시스템 안정성을 강화하는 등 핵심적인 기술 개선 작업을 진행했습니다. 또한, 매칭 알고리즘 작동 중 회원 탈퇴를 방지하여 프로그램의 신뢰성을 높였습니다.

1:1 실시간 채팅

웹소켓과 Stomp 프로토콜을 이용한 1:1 채팅방 구현

  • 실시간 채팅에 적합하며 양방향 통신을 지원하는 Socket통신 방식을 WebSocket 프로토콜을 사용하여 개발하였습니다.
  • pub, sub 모델을 통한 양방향 통신을 구현하였습니다.
  • recoil 전역 상태 관리툴을 이용해 실시간 채팅이 올 때 마다 클라이언트 사이드에 저장함으로서 백엔드 api 요청 횟수 조절하였습니다.

채팅방 무한스크롤

리액트 쿼리와 IntersectionObserver를 활용한 무한 스크롤 구현으로, 사용자가 원할 때만 채팅 내용을 가져옴

  • Intersection Observer를 통한 컨테이너 컴포넌트의 스크롤 조절로 UX를 향상하였습니다.
  • 유저가 스크롤을 위로 올리면 이전의 채팅이 설정한 사이즈만큼 보여지게 하였습니다. (채팅 미리보기 Size = 1, 채팅방 Size = 40)
  • 다음 페이지의 element가 없다면 더이상의 불필요한 백엔드 api 요청을 하지 않습니다.
  • 스크롤이 맨 위 또는 중간에 있을 때, 실시간 메시지를 송수신하면 스크롤이 가장 아래로 내려갑니다.
  • Tanstack Query의 useInfiniteQuery 활용 커스텀훅으로 캐싱합니다.
  • Portal로 모달을 구현하여 semantic 코드 일관성을 유지하였습니다. ****

구글 소셜 로그인

서버에서 accessToken과 refreshToken을 발급받아 로그인을 진행함

  • 토큰의 여부에 따라 접근할 수 있는 주소가 달라집니다.
  • 로그인 직후 유저의 정보가 입력되어 있으면 메인페이지로, null이면 정보입력페이지로 redirect 됩니다.
  • accessToken가 만료되면 refreshToken으로 accessToken을 재발급 받습니다.

메인페이지 상태 변화 (+타이머)

매칭 여부에 따라 메인페이지의 UI가 변화됨

  • roomActive에 따라 매칭 전후를 구분하여 알맞은 UI를 제공해줍니다. (색, 위치, 문구 등)
  • 현재 시간을 가져와, 특정 시간(매칭 완료 시간, 채팅 완료 시간)까지 남은 시간을 메인페이지에 표시해줍니다.
  • 매칭 전 '채팅방 이동 버튼'을 누를 시 이동하지 않고 매칭 미완료 모달창 생성합니다.

마이페이지 카테고리

각 카테고리 제목을 클릭하여 본인이 입력한 정보 확인 가능함

  • 항목을 토글로 만들어 보기 편리하게 만들었습니다.
  • 제목, 아이콘, 내용 모두 컴포넌트로 만들어 재활용합니다.