](https://hits.seeyoufarm.com){kind=icon}
📱 MoodMate | 사이트 바로가기 (서비스 종료)
📌 Official Account | MoodMate Instagram
MoodMate(무드메이트)는 '가천대학교 대학생' 을 대상으로 매일 밤 10시에 사용자의 '데이트 무드', '나이', '학과'를 고려하여 남녀를 1대1로 매칭해주는 서비스입니다.
매칭된 남녀는 채팅방에서 1:1 대화를 나눌 수 있으며, 22시간 동안 유지되어 다음 날 오후 8시에 채팅방이 비활성화 되어 더 이상 대화를 나눌 수 없게 됩니다.
상대방과 더 이야기를 나누고 싶다면, 채팅방이 비활성화되기 전에 연락처나 SNS를 서로 주고 받으세요!
- 기존 데이팅 서비스는 외모 중심의 획일적인 매칭에 집중하여, 진정한 소울메이트를 찾는 사용자들의 갈증을 해소하지 못했습니다.
- 저희는 단순한 외모가 아닌, 깊이 있는 교감과 공통의 가치관을 통해 오래도록 함께할 수 있는 인연을 원하는 사용자들의 목소리에 집중했습니다.
- 이러한 사용자들의 요구를 반영하여, '무드'를 매개로 서로의 내적인 면을 먼저 이해하고 대화를 이어나갈 수 있는 매칭 서비스 'MoodMate'를 기획하게 되었습니다.
로그인 페이지
- URL로 서비스 도메인을 입력하게 되면 로그인 페이지로 이동합니다.
- 소셜 로그인을 통해 로그인 과정이 진행됩니다.
회원 정보 입력
- 사용자는 소셜 로그인 후 회원 정보를 입력하게 됩니다.
- 입력 정보에는 닉네임, 성별, 나이, 학과, 키워드가 포함되며 키워드를 제외한 나머지 정보를 이용하여 매칭이 진행됩니다.
상대 무디 조건 설정
- 사용자는 회원 정보 입력을 완료한 후, 상대방에 대한 조건을 설정하게 됩니다.
- 설정 조건에는 나이 구간, 같은 학과 선호 여부, 선호하는 무드가 포함되며, 이 정보들은 매칭 프로세스에서 중요한 기준으로 활용됩니다.
메인페이지
매칭대기중 | 매칭 후 채팅중 | 비활성화중 메인
- 회원 정보 입력과, 상대 무디 조건 설정이 완료되면 메인페이지로 이동합니다.
- 메인 페이지에서는 매일 밤 10시에 시작되는 매칭 이벤트를 강조하는 카운트다운 타이머가 표시됩니다. 카운트다운이 종료되면 자동으로 매칭 프로세스가 시작되며, 매칭된 사용자는 분홍색 배경의 페이지로 전환되어 채팅방으로 들어가면 매칭된 사람과 대화를 할 수 있습니다.
- 하단의 탭 바를 통해 사용자는 다음과 같은 기능에 쉽게 접근할 수 있습니다
- 채팅방 아이콘: 매칭된 상대와의 대화를 시작하거나 진행 중인 대화를 계속할 수 있으며, 매칭이 되지 않은 사람은 채팅방에 입장이 불가능합니다.
- 마이페이지 아이콘: 사용자의 프로필을 관리하고, 설정을 조정할 수 있는 마이 페이지로 이동합니다.
- 비활성화 아이콘: 사용자가 원할 경우 매칭 이벤트 참여를 일시적으로 비활성화할 수 있으며, 재활성화하기 전까지 매칭에서 제외됩니다.
채팅
채팅 미리보기 | 채팅중 | 상대 무디 정보 조회
- 매칭이 되게 되어 채팅 페이지에 입장하게 되면, 상대로 부터 온 메시지를 미리보기로 확인할 수 있습니다.
- 미리보기 바를 누르면 채팅방에 입장할 수 있으며, 매칭된 상대와 1:1로 대화를 나눌 수 있습니다.
- 상대의 아이콘을 눌러서 상대 무디의 정보도 확인할 수 있습니다.
마이페이지
- 마이 페이지에서는 앞서 설정했던 본인의 정보를 확인할 수 있습니다.
- 무드메이트 시즌1을 마무리 한 후, 웹사이트를 직접 사용한 학우분들의 의견을 듣고 사용자의 니즈를 파악하고 기능을 기획하기 위해 유저 리서치를 위한 설문조사를 실시하였습니다.
- 교내 커뮤니티 에브리타임에 글을 게시하여 총 7명의 학우분들의 답변을 받을 수 있었습니다.
- 구글폼 링크
- 리서치에 참여한 인원은 총 7명으로 남자 5명, 여자 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)
키워드 추가 공지
- 유저 서비스 만족도 조사 결과, 상대방 조건 추가(키, 관심사, 취미 등)에 대한 유저의 요구가 확인되었으며, 이를 반영하여 기존 카테고리를 취미 관련 키워드로 전환하고, 키워드 개수를 확대하여 사용자 경험을 개선하였습니다
- 취미 카테고리로 변경함으로써 상대방의 취미를 이전보다 더 자세히 알 수 있었다는 긍정적인 피드백을 받았습니다.
- 또한, 서비스 도중 유저로부터 받은 추천 키워드(“워커홀릭”, “집순돌이”, “춤”, “애주가”)를 추가하여 사용자들이 자신을 표현할 수 있는 폭을 더욱 넓혔습니다.
매칭 알고리즘 고도화
채팅 고도화
인프라 최적화
시즌 1
시즌 2
시즌 1
시즌 2
시즌 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 |
| @nayoung3669 | @eunji0714 | @One-HyeWon |
앱 알림 서비스, UX, 채팅 기능 개선을 위한 프로그레시브 웹 어플리케이션 제작
- 유저 서비스 만족도 조사 결과, 채팅 알림 기능 구현에 대한 유저 니즈를 파악하였습니다.
- Firebase의 FCM 활용 웹 푸쉬 기능을 추가하였습니다.
- 서비스워커를 등록하였습니다.
- Android, iOS, Desktop 앱 다운로드가 가능하게 하였습니다.
유저가 설정한 데이트 무드, 나이 선호도, 같은 학과 선호 여부 고려
- 기존 Gale-Shapley 알고리즘을 서비스에 맞게 커스텀하여, N명의 남성과 M명의 여성(또는 그 반대)의 세 가지 선호도(무드, 나이, 같은 학과 여부)를 기반으로 최적의 매칭을 제공하도록 개발하였습니다.
- 매칭 활성화 시 하루에 한 번 자동으로 매칭이 이루어지며, 매칭이 비활성화된 경우, 유저가 다시 활성화할 때까지 매칭이 진행되지 않도록 구현했습니다.
- 시즌 1에서는 시스템이 user_id를 테이블에 저장된 순서대로 가져와 이전에 매칭된 사용자가 다시 매칭되는 문제가 있었습니다. 이를 해결하기 위해 매칭 시스템의 무작위성을 높이고, 이미 매칭된 사람과 다시 만날 확률을 최소화하는 작업을 진행했습니다.
- 시즌 2에서는 시즌 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를 제공해줍니다. (색, 위치, 문구 등)
- 현재 시간을 가져와, 특정 시간(매칭 완료 시간, 채팅 완료 시간)까지 남은 시간을 메인페이지에 표시해줍니다.
- 매칭 전 '채팅방 이동 버튼'을 누를 시 이동하지 않고 매칭 미완료 모달창 생성합니다.
각 카테고리 제목을 클릭하여 본인이 입력한 정보 확인 가능함
- 항목을 토글로 만들어 보기 편리하게 만들었습니다.
- 제목, 아이콘, 내용 모두 컴포넌트로 만들어 재활용합니다.