🌟맛스페이스

📝 목차

• ⛳기획 배경
• 🎇핵심 기능
• 🎯결과물
• 🏅기술적 챌린지
• 🗼기술스택
• 👏팀원 소개

⛳기획 배경

1) 모두의 취향을 고려하고, 2) 각자의 선호도 투표를 반영하여, 3) 같이 먹을 ‘맛집’을 알아서 추천해주는 서비스는 없을까?

'맛 스페이스'에서는 임베딩 벡터 유사도를 기반으로 맛집을 검색합니다.
텍스트로 치지 않아도, 대화만으로 키워드를 감지하여 근처 맛집을 추천해요!

❓ 임베딩 벡터를 사용한 이유: 새로운 방식으로 추천 시스템을 구현하기 위해

저희 팀원은 1달이라는 짧은 시간 안에 AI 모델을 구축하고 학습시키는 일에 시간을 쏟기 보다는, 새로운 방법으로 내 취향에 맞는 식당을 찾는 방법을 고민했습니다. 이때, Elastic search에서 텍스트를 사전 학습된 모델을 활용하여 Imbedding Vector로 변환하고 Vector Search를 통해 유사한 것을 검색하는 기능이 있다는 것을 알게 되었습니다.

그렇다면, 서울의 맛집들의 리뷰들에서 '취향 키워드'를 자동으로 추출하고 이를 벡터화하여 저장해두었을 때, 입력 텍스트의 임베딩 벡터와 유사한 값(식당)을 찾는다면 어떨까? 라는 생각이 들었습니다. 추천 시스템에서 직관적인 방법이 무조건 더 나은 결과물을 나오게 하는게 아니라는 말을 들었던 기억을 회상하며, 기획을 확정했습니다.

그리고 이런 방법이라면 최대한 좋은 결과물을 끌어내면서 즐겁게 개발할 수 있을 것이란 확신했습니다. 🚀🚀

🎇핵심 기능

맛집 추천

• 약 7만 개의 서울 시 맛집 데이터와 리뷰 수집 -> 분위기 키워드 추출
• 데이터를 정제한 결과 1만 8천 식당을 대상으로 식당에 해당하는 '키워드'를 벡터화
• 유저의 니즈에 따른 식당 추천

식당 조합

• 분위기와 메뉴를 활용한 식당 데이터 벡터화
• 유클리드 거리 계산을 통해 식당 간의 유사도 측정
• K-NN 알고리즘을 통한 인접한 식당 탐색

연관 키워드 추천

• 유저가 말한 문장을 Konlpy로 토큰화
• 수집한 문장으로 벡터 모델 학습
• Word2Vec를 활용하여 위 모델을 통해 연관 단어 맵핑

실시간 유저소통

• Mesh방식 WebRTC 구현하여 4명 간 화상 통화
• Socket.IO를 활용한 실시간 선택 공유

🎯결과물

(클릭 시, Youtube로 이동됩니다!)

🏅기술적 챌린지

벡터화 모델 직접 학습으로 키워드 연관도 개선

• 문제 : 기존에 존재하는 모델인 FastText를 사용했을 때, 키워드의 연관성이 높지 않고, 그 유사도가 기대하던 수준에 미치지 못함
• 해결 : 식당 리뷰 데이터 수집 후 Word2Vec 를 활용하여 자체 모델 학습으로 연관도 개선

1. 알고리즘을 통한 식당 조합 기능 구현

⚠️문제1 : 식당과 식당을 조합하는 기능을 구현할 때, *유사도가 먼 경우 조합 결과가 나오지 않는 현상을 경험 - 벡터화된 식당들을 공간 상에 존재한다 여긴다면 기하학과 관련된 알고리즘을 사용할 수 있지 않을까?

✔️해결1: 각각의 식당벡터의 중간 지점을 유클리드 거리를 통해 구할 수 있었다

⚠️문제2 : 그러나 해당 지점과 일치하는 식당 벡터가 있다는 보장이 없다 생각하였기에 추가적인 알고리즘이 필요하였다 - 이 지점과 가능한 가까운 실제 식당을 구하면 될 것 같은데??

✔️해결2: K-최근접 이웃 (K-Nearest Neighbors, KNN) 을 통해 해당하는 중간 지점과 가까운 식당을 찾아 추천할 수 있게 되었다

2. Buffer 활용을 통한 소켓 요청과 API Throttling - 응답 안정화

⚠️문제 : 음성 인식을 통한 키워드 분석을 위해 ‘대량’의 소켓 요청을 보낸 결과, 간헐적으로 서버 다운 or 서버 부하 증가 - 매 요청마다 데이터를 전송하는 것이 아니라, 일정 주기로 모았다 보내준다면 이러한 현상을 개선할 수 있지 않을까 고려 - Buffer 개념을 소켓 요청에 응용하여, 많은 양의 데이터를 하나의 소켓에 모아 보낸다면 가능할 것이라 생각 - 조사를 해보니 다양한 이벤트 처리 방식 중, Debouncing과 Throttling이 데이터를 모아 보내는 것에 적합하다 판단

✔️해결: 일정 시간마다 반응**을 보여주어야 UX에 더 좋은 결과를 얻을 수 있다고 여겨 Frontend에서는 Throttling 방식을 채택하여 버퍼 구현 및 응답 안정화, Backend에서는 Throttler 패키지의 기능을 활용하여 Rate Limiting을 걸어 API 요청 초과 방지

🗼기술스택

👏팀원 소개

마찬옥 (깃허브) - 팀장 - 프론트엔드 - UI / UX 설계 및 구현 - 디자인 및 컨셉 담당 - 미디어 스트리밍 구현(WebRTC) - 실시간 기능 구현 (Socket.io) - 클라이언트 - 서버 API 구현 (Axios)

천지영 (깃허브) - 팀원 - 백엔드 - Python 서버 구축 - 데이터 수집 - 프로그램 메인 로직 구현

이서연 (깃허브) - 팀원 - 백엔드 - nest js 서버 구축 - Redis 서버 구축 - 데이터 수집 - Python ↔ nest ↔ Front 의 API , Socket의 명세 및 구성 - 배포

현재훈 (깃허브) - 팀원 - 프론트엔드 - 프론트 fast API 및 socket 관련 명세 및 구성 참여 - 애니메이션 및 effect 담당 (css, tailwind, gsap 등) - git 관련 이슈 해결 및 프론트 git 전략 - 데이터 수집 작업 참여 - 팀 내 이슈 해결에 적극 참여 (언어, 로직 관련) - 제안된 아이디어 구현 (Throttling Buffer) - UX 경험 증감에 기여