메뉴 고르기 앱

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

Period

2024.01 - 2024.03

Team

개인 프로젝트

Role

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

메뉴 고르기 앱

Project Overview

Background

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

Goal

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

Key Features

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

Tech Stack

Next.jsTypeScriptMongoDB

Technical Challenges & Solutions

Challenge 1

카페 메뉴 데이터 크롤링

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

Solution

Puppeteer를 활용한 웹 크롤링

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

Challenge 2

메뉴 추천 알고리즘

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

Solution

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

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

Challenge 3

MongoDB 스키마 설계

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

Solution

유연한 MongoDB 스키마 설계

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

Achievements

Key Metrics

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

Learnings / Next Steps

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

Screenshots

Back to Projects