메뉴 고르기 앱

메뉴 선택 시간을 줄이기 위해 크롤링·추천·운영 도구를 하나로 묶은 카페 메뉴 추천 서비스

기간

2024.01 - 2024.03

개인 프로젝트

역할

풀스택 개발 (Next.js, MongoDB, 크롤링)

메뉴 고르기 앱

프로젝트 개요

배경

브랜드별 메뉴가 빠르게 바뀌는 카페 환경에서는 사용자가 메뉴판 앞에서 오래 고민하거나, 자주 마시는 메뉴를 다시 찾는 데 불필요한 시간이 들었습니다.

목표

사용자가 취향에 맞는 메뉴를 빠르게 고를 수 있도록 추천 경험을 만들고, 운영 측면에서는 메뉴 정보를 수집·정리하는 흐름을 자동화하는 것이 목표였습니다.

주요 기능

  • 브랜드별 메뉴 정보를 수집해 저장하는 크롤링 파이프라인
  • 사용자 선호 메뉴를 저장하고 다시 불러오는 개인화 기능
  • 선택 이력 기반 메뉴 추천 로직
  • 운영자가 메뉴를 수정·보완할 수 있는 관리자 화면
  • 브랜드/카테고리 기준 검색과 필터링

기술 스택

Next.jsTypeScriptMongoDB

기술적 챌린지 & 해결

챌린지 1

카페 메뉴 데이터 크롤링

브랜드별로 다른 DOM 구조에서 메뉴 정보를 안정적으로 수집해야 했고, 수집 실패가 곧 추천 품질 저하로 이어졌습니다.

해결책

Puppeteer를 활용한 웹 크롤링

Puppeteer 기반 수집 흐름으로 브랜드별 메뉴 정보를 정리하고, 추천 로직이 사용할 수 있는 형태로 저장했습니다.

챌린지 2

메뉴 추천 알고리즘

초기 데이터가 많지 않은 상태에서 사용자가 다시 방문할 이유를 만들 수 있는 추천 기준이 필요했습니다.

해결책

협업 필터링 기반 추천 시스템

사용자 선택 이력을 기반으로 유사 취향 패턴을 묶어, 메뉴판을 모두 읽지 않아도 빠르게 다음 선택지를 제안하도록 구성했습니다.

챌린지 3

MongoDB 스키마 설계

메뉴, 브랜드, 사용자 선호 데이터가 계속 늘어나는 구조에서 읽기 성능과 확장성을 함께 고려해야 했습니다.

해결책

유연한 MongoDB 스키마 설계

브랜드와 메뉴는 분리하고 선호 정보는 사용자 중심으로 묶어, 운영 수정과 추천 조회가 서로 발목 잡지 않도록 데이터 흐름을 분리했습니다.

성과

주요 지표

개발 기간
2개월
크롤링 메뉴
200+
지원 카페
5개 브랜드

배운 점 / 다음 단계

  • 문제 해결 가치가 분명한 제품이라도 데이터 수집 파이프라인이 먼저 안정화되어야 추천 경험이 설득력을 가진다는 점을 배웠습니다.
  • 운영 화면을 함께 설계해야 추천 시스템이 일회성 데모가 아니라 지속적으로 유지될 수 있다는 기준을 세웠습니다.
  • 다음 단계에서는 사용자 피드백과 재선택률을 함께 측정해 추천 품질을 더 정교하게 보정할 계획입니다.

스크린샷

프로젝트 목록으로 돌아가기