식권대장 KOSA : 교육생을 위한 식사 정보 서비스

프로젝트 개요

현대퓨처넷 채용연계형 MSA 기반 Full Stack 개발 전문가 양성과정에 참여하면서 식권대장 앱을 사용했습니다. 메뉴 이름과 가격, 이미지를 한 번에 보기 어려웠고 매장 정보도 따로 찾아야 했습니다. 그래서 Next.js로 송파 IT벤처타워 주변 식당 데이터를 정리하고, 교육생들이 점심 메뉴를 확인하는 데 필요한 기능을 한 화면에 모았습니다.

처음에는 식당 정보를 조회하는 서비스였습니다. 이후 교육생들이 여러 명이 동시에 식당을 고르고, 룰렛과 게임으로 점심 장소를 정하고 싶다는 요청을 받았습니다. 이 요청을 반영해 Firebase Realtime Database를 도입하고 참여자, 선택 식당, 룰렛 결과, 게임 상태를 공유하는 실시간 방을 만들었습니다. 매일 오전 10시에서 11시 사이에 게시되는 K밥상 메뉴는 사용자가 직접 확인하지 않아도 되도록 Vercel Cron으로 자동 갱신했습니다. 식당 정보가 잘못되었을 때 바로 알려줄 수 있도록 문의하기 버튼도 추가했습니다.

• 구분: 개인 프로젝트 (1인 개발)
• 기간: 2026.06
• 담당 범위: 기획, 데이터 모델링, API, 화면 구성, Firebase 연동, 자동화, 배포
• 초기 데이터: 송파 IT벤처타워 주변 식당 84개
• 확장 범위: 실시간 식당 선택, 룰렛, 게임, K밥상 메뉴 자동 갱신, 정보 제보
• 배포: Vercel
• 서비스: sikdae-kosa.vercel.app

주요 기능

• 식당 검색, 필터, 정렬: 식당명과 대표 메뉴를 검색하고, 한식, 중식, 일식, 양식, 분식 등 카테고리와 거리순, 평점순, 이름순으로 목록을 정렬합니다.
• 메뉴와 매장 정보 확인: 식당별 메뉴명, 가격, 이미지, 영업시간, 네이버 지도 링크를 상세 모달에서 함께 보여줍니다.
• 리뷰 작성과 메뉴별 평점: Firebase Realtime Database에 리뷰를 저장하고 메뉴별 평균 평점과 최신순, 평점순 필터를 보여줍니다.
• 리뷰 이미지 업로드: 첨부 이미지를 브라우저에서 JPEG로 압축한 뒤 Firebase Storage에 올리고 리뷰와 연결합니다.
• 식당 선택 룰렛: 2km 이내 식당이나 직접 고른 식당만 후보로 두고, 오늘 갈 식당을 무작위로 추천합니다.
• 실시간 방 만들기: 공유 링크로 방에 들어와 참여자, 선택 식당, 룰렛 결과를 함께 확인합니다.
• K밥상 메뉴 자동 반영: RapidAPI Instagram Scraper에서 최신 게시물을 가져온 뒤 당일 메뉴인지 확인하고 Firebase에 저장합니다.
• 정보 제보와 문의: 식당이나 메뉴, 가격에 문제가 있을 때 이메일로 바로 문의할 수 있습니다.

구현 구조

1. 식당 데이터와 API 구성

기본 식당 정보와 메뉴, 가격은 정적 데이터로 관리합니다. 서버는 이 데이터를 읽어 식당 목록과 상세 정보를 화면에 전달합니다. 식당 데이터에는 이름, 카테고리, 좌표, 영업시간, 네이버 링크, 메뉴 배열을 담았습니다.

목록 요청에는 메뉴 이미지를 제외한 요약 데이터를 반환하고, 상세 요청에는 전체 메뉴 이미지를 포함합니다. 화면에서는 API가 전달한 정적 데이터를 식당 목록과 상세 모달에 보여줍니다.

2. Vercel Cron 기반 K밥상 자동 업데이트

K밥상 한식뷔페는 매일 오전 10시에서 11시 사이에 Instagram으로 당일 메뉴를 게시합니다. 사용자가 직접 게시물을 확인하지 않아도 서비스에서 오늘의 메뉴를 보려면 게시 이후에 수집 API를 실행해야 했습니다.

처음에는 GitHub Actions에 일일 스케줄을 등록했습니다. GitHub Actions는 전 세계 사용자가 함께 사용하는 실행 환경이라 작업이 밀리면 예약 시각보다 늦게 실행될 수 있었습니다. K밥상 메뉴는 매일 오전 10시에서 11시 사이에 불규칙하게 올라오고, 교육생들은 11시쯤 점심 식당을 정합니다. 그래서 그 시간에 맞춰 메뉴가 갱신되어야 했습니다.

예약을 너무 일찍 실행하면 새 게시물이 올라오기 전이라 메뉴 갱신에 실패할 수 있습니다. 반대로 한 번만 늦게 실행하면 점심을 정하는 시간까지 메뉴가 비어 있을 수 있습니다. 이를 피하려고 Vercel Cron Jobs에 KST 기준 10시 40분과 11시 4분, 두 개의 일일 스케줄을 등록했습니다.

예약 작업은 K밥상 인스타그램 공식 계정의 최신 게시물을 외부 수집 서비스를 통해 가져와 오늘 메뉴인지 확인합니다. 오늘 게시물이면 메뉴 이미지와 게시물 주소를 Firebase에 저장하고, 아직 새 게시물이 없거나 날짜가 맞지 않으면 기존 메뉴를 유지합니다.

3. 실시간 방과 식당 고르기

초기 Next.js 구현은 한 명이 식당 정보를 조회하고 룰렛을 돌리는 흐름이었습니다. 이후 교육생들은 여러 명이 같은 방에 들어와 후보 식당을 함께 고르고, 같은 룰렛 결과와 게임 진행 상태를 보고 싶다고 했습니다. 짧은 시간 동안 여러 브라우저가 같은 선택 상태를 읽고 바로 반영해야 했기 때문에 Firebase Realtime Database로 상태를 실시간으로 동기화했습니다.

공유 방에는 참여자, 선택 식당, 룰렛 이벤트, 게임 상태를 저장합니다. 참여자가 방에 들어오고 나갈 때 접속 상태를 감지해 목록을 자동으로 관리합니다. 공유 링크로 같은 방의 상태를 실시간으로 확인합니다.

식당 선택은 각자 브라우저에만 두지 않고 방의 공용 상태에 반영했습니다. 한 명이 고른 룰렛 결과를 공용 상태에 기록해 다른 참여자의 화면에도 같은 식당이 나오게 했습니다. 참여자 순서를 섞어 진행하는 악어 이빨 내기 게임도 같은 방 상태에 저장했습니다. 조회만 하던 서비스에 여러 교육생이 점심 장소를 함께 정하는 기능을 더했습니다.

기술 스택

• Frontend: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui
• 지도: Kakao Maps JavaScript SDK
• Backend: Next.js 서버 기능
• Data: 정적 식당 데이터, Firebase Realtime Database, Firebase Storage
• 외부 연동: Instagram 메뉴 게시물 수집, 네이버 지도 링크
• Automation: Vercel Cron Jobs
• Search / AI discovery: 검색 엔진·AI용 메타데이터와 구조화 데이터
• Deployment: Vercel