류마 관리 시스템
레스토랑 테이블 및 예약 관리를 위한 PWA(Progressive Web App)입니다.
목차
- 개요
- 주요 기능
- 시작하기
- 화면 구성
- 기능 상세 안내
- 외부 서비스 연동
- 설정
- 기술 스택
개요
류마 관리 시스템은 레스토랑 현장에서 iPad/태블릿으로 사용하도록 설계된 테이블·예약 통합 관리 앱입니다.
- 여러 매장(코벤트, 파라곤 등)을 비밀번호로 분리 관리
- Firebase 실시간 데이터베이스로 여러 기기 간 동기화
- 오프라인에서도 동작 (서비스 워커 캐싱)
- Gemini AI를 이용한 네이버 예약 스크린샷 자동 파싱
- Notion API 연동으로 예약 데이터 백업
주요 기능
| 기능 | 설명 |
|---|
| 테이블 플로어 관리 | 드래그로 테이블 배치, 상태 시각화 |
| 예약 관리 | 예약 등록·수정·완료·취소 처리 |
| 웨이팅 | 현장 대기 고객 줄 세우기 |
| 일간 관리 | 당일 업무 메모 및 이벤트 기록 |
| 고객 정보 | 방문 이력·메모·태그 관리 |
| 발주 | 발주 목록 체크·수량·예상 금액·복사, 상품 단가 관리, 발주 내역·주기(D-Day) |
| 네이버 예약 파싱 | 스크린샷 업로드 → AI 자동 입력 |
| Notion 백업 | 예약 데이터 Notion DB 동기화 |
| 다크/라이트 테마 | 현장 조명 환경에 맞게 전환 |
시작하기
앱 설치 (PWA)
- iPad/태블릿 Safari(또는 Chrome)에서 앱 URL에 접속합니다.
- 공유 → 홈 화면에 추가를 탭합니다.
- 홈 화면 아이콘으로 전체화면 앱처럼 사용할 수 있습니다.
매장 선택 및 로그인
- 앱을 실행하면 매장 선택 화면이 나타납니다.
- 사용할 매장을 탭합니다.
- 매장 비밀번호를 입력하고 입장 버튼을 탭합니다.
비밀번호는 Firebase에 저장된 매장별 설정값입니다. 관리자에게 문의하세요.
화면 구성
┌─────────────────────────────────────────────────┐
│ 헤더: 로고 / 날짜·시간 / 예약건수 배지 / 테마 전환 │
├──────────────────────────────────────────────────┤
│ 탭: 홈 | 발주 | 재고 | 이미지 | 스케줄 | 손님 │
├────────────┬────────────────────────────────────┤
│ │ │
│ 사이드바 │ 메인 콘텐츠 영역 │
│ (예약 목록/ │ (플로어 캔버스 / 예약 카드 목록 등) │
│ 웨이팅 등) │ │
└────────────┴────────────────────────────────────┘
- 헤더 — 현재 날짜·시간, 오늘 예약 총 인원, 테마 전환 버튼
- 탭 바 — 홈 · 발주 · 재고 · 이미지 · 스케줄 · 손님 (6개 섹션)
- 사이드바 — 해당 탭에서 좌측 목록 (예약 리스트, 웨이팅 리스트 등)
- 메인 영역 — 플로어 캔버스 또는 상세 카드 목록
기능 상세 안내
플로어 뷰 (테이블 관리)
플로어 탭에서 레스토랑 테이블 배치를 시각적으로 관리합니다.
테이블 상태 색상
| 색상 | 상태 |
|---|
| 기본(회색) | 비어 있음 |
| 파란색 | 예약 있음 |
| 빨간색 | 사용 중 (착석) |
| 주황색 | 결제 대기 |
테이블 조작
- 탭 — 테이블 상세 정보 열기
- 길게 탭 — 테이블 이동 모드 (드래그로 위치 변경)
- + 버튼 — 새 테이블 추가
- 테이블 상세 → 예약 연결 — 해당 테이블에 예약 배정
- 테이블 합치기 — 여러 테이블을 병합해 단체 좌석 처리
날짜 이동
헤더의 ← / → 버튼으로 당일 기준 ±2일 이내의 플로어 상태를 미리 확인할 수 있습니다.
예약 관리
예약 탭(또는 플로어 탭 사이드바)에서 예약을 등록하고 관리합니다.
예약 등록
- 사이드바 상단 + 추가 버튼 탭
- 다음 정보를 입력합니다:
- 고객명
- 인원수
- 예약 일시
- 테이블 (선택)
- 전화번호 (선택)
- 메모 (선택)
- 태그 (선택)
- 저장 탭
예약 상태
| 상태 | 설명 |
|---|
| 확정 | 예약 접수 완료 |
| 착석 | 고객 입장, 테이블 사용 중 |
| 완료 | 식사 마침 및 퇴장 |
| 취소 | 예약 취소 |
| 노쇼 | 고객 미방문 |
예약 수정 및 완료 처리
- 사이드바에서 예약 항목 탭 → 상세 시트 열림
- 상태 변경, 테이블 재배정, 메모 수정 가능
- 완료 처리 시 고객 방문 이력이 자동 기록됨
웨이팅 관리
웨이팅 탭에서 현장 대기 고객을 관리합니다.
- + 추가 버튼으로 대기 고객 등록 (이름, 인원, 연락처)
- 대기 번호는 자동 부여됩니다.
- 자리가 나면 대기 항목을 탭 → 착석 처리
- 착석 처리 시 예약으로 자동 전환할 수 있습니다.
일간 관리
일간 탭에서 당일 운영 관련 메모 및 이벤트를 기록합니다.
- 공지사항, 특별 행사, 직원 전달 사항 등 자유롭게 기록
- 날짜별로 저장되어 이력 확인 가능
당일 식사 선택
홈 달력에서 날짜를 탭하면 열리는 예약 박스(당일 메모 아래)에서 그날의 식사 · 런치 국물 · 런치 반찬을 고릅니다.
- 세 항목이 가로 한 줄에 드롭다운으로 표시되고, 항목마다 하나씩 골라 그 값만 보여줍니다
- 드롭다운의 ＋ 항목 추가로 새 선택지를 만들면서 바로 선택, ⚙ 항목 관리에서 선택지 추가·삭제
- 선택지를 삭제해도 이미 고른 날짜의 기록은 남습니다
고객 정보
고객정보 탭에서 방문 고객 데이터베이스를 관리합니다.
고객 카드 정보
- 고객명
- 총 방문 횟수 및 최근 방문일
- 메모 (식사 선호, 알레르기, VIP 여부 등)
- 태그 (VIP, 주의, 단골 등 커스텀 태그)
검색 및 정렬
- 이름·연락처로 검색, 상단 우측에 전체 손님 수(검색·탭 적용 시
표시 인원 / 총 인원) 표시
- 정렬 기준에 따라 묶음 탭으로 나눠 보기 (각 탭에 인원 수 표시, 전체 탭에서는 묶음별 소제목)
| 정렬 기준 | 묶음 탭 | 기본 순서 → 역순(⇅ 버튼) |
|---|
| 방문 횟수 | 10회 이상 · 9회 … 1회 · 방문 없음 | 많은 순 → 적은 순 |
| 최근 방문 | 마지막 방문 월별(예: 26년 10월) · 방문 없음 | 최신 순 → 오래된 순 |
| 이름 | ㄱ ㄴ ㄷ … ㅎ (된소리는 예사소리에 포함) · A-Z · 기타 | ㄱ→ㅎ → ㅎ→ㄱ |
발주
🛒 발주 탭은 식자재 발주를 체크리스트로 관리합니다. (구 order-checklist 앱 기능 통합)
| 서브탭 | 기능 |
|---|
| 📋 발주 목록 | 담은 품목 완료 체크, 수량 조절, 예상 발주 금액(단가 범위 합산), 발주 문구 미리보기·복사, 목록 초기화 |
| 🗂 상품 관리 | 품목 검색, 이름순/사용빈도순 정렬, 카테고리 접기, 품목 탭으로 담기/빼기, 품목 등록·수정·삭제(단위·최소/최대 단가·카테고리) |
| 📅 발주 내역 | 복사·초기화 시 자동 기록, 내역에서 다시 담기, 내역 삭제 |
- 발주일이 2회 이상 쌓인 품목은 평균 발주 주기와 다음 발주 예상일(D-Day)이 표시됩니다.
- 재고 탭의
🛒 발주 담기 → 품목 선택 → 발주 목록에 담기로 재고 품목을 바로 발주 목록에 넣을 수 있습니다. (수량 = 최소 기준, 없으면 1)
- 처음에는 기본 식자재 21개로 시작합니다.
외부 서비스 연동
네이버 예약 자동 등록
Gemini AI 비전 기능을 이용해 네이버 예약 스크린샷을 자동으로 파싱합니다.
설정
- 설정 화면에서 Gemini API 키 입력
사용 방법
- 예약 추가 버튼 옆 카메라/이미지 아이콘 탭
- 네이버 예약 화면 스크린샷 선택 (앨범 또는 카메라)
- AI가 예약자명, 인원, 일시를 자동 추출하여 입력 폼에 채워줍니다.
- 내용 확인 후 저장
Notion 백업
예약 데이터를 Notion 데이터베이스에 백업할 수 있습니다. (설정 → 노션 백업 → 예약 백업)
설정
- 설정 화면에서 다음 항목 입력:
- Notion Integration Token — Notion 내부 통합 토큰
- 예약 DB ID — 예약 정보를 저장할 Notion 데이터베이스 ID
Notion 통합 토큰 발급 방법
- Notion Integrations에서 새 통합 생성
- 대상 데이터베이스에 통합 연결 (데이터베이스 → ··· → 연결 → 통합 선택)
- 발급된
secret_... 토큰을 앱 설정에 입력
설정
헤더 우측 설정(⚙) 아이콘에서 다음 항목을 설정할 수 있습니다.
| 항목 | 설명 |
|---|
| 테마 | 다크 / 라이트 모드 전환 |
| Gemini API 키 | 네이버 예약 자동 파싱용 |
| Notion 토큰 | Notion 백업 연동용 |
| Notion DB ID | 예약 데이터베이스 ID |
| 데이터 초기화 | 로컬 캐시 초기화 (Firebase 데이터는 유지) |
API 키와 토큰은 기기의 localStorage에만 저장되며, 서버로 전송되지 않습니다.
기술 스택
| 분류 | 기술 |
|---|
| 프론트엔드 | Vanilla HTML/CSS/JavaScript (프레임워크 없음) |
| 데이터 저장 | Firebase Realtime Database (실시간 동기화) |
| 로컬 캐시 | localStorage |
| AI 파싱 | Google Gemini API (gemini-2.5-flash-lite) |
| 예약 백업 | Notion API |
| PWA | Web App Manifest + Service Worker |
| 배포 | 정적 파일 (빌드 과정 없음) |
데이터 구조 (Firebase)
tableApp/
{store}/ ← 매장 코드 (예: covent, paragon)
tables/ ← 테이블 목록 및 상태
ress/ ← 예약 목록
waits/ ← 웨이팅 목록
daily/ ← 일간 메모
customers/ ← 고객 정보
tags/ ← 커스텀 태그
orderProducts/ ← 발주 상품(단가·사용횟수·발주일)
orderItems/ ← 현재 발주 목록
orderHistory/ ← 발주 내역
mealOptions/ ← 식사·런치 국물·런치 반찬 선택지
dailyMeals/ ← 날짜별 식사 선택
tableAppImages/
{store}/{id} ← 이미지 원본 (사진을 열거나 공유·다운로드할 때만 1장씩 받음)
_meta/{store}/{id} ← 이미지 목록용 정보 + 썸네일 (이미지 탭 목록은 이것만 받음)
(기기 IndexedDB에도 캐시해 다음 실행부터 바로 표시, 웹소켓이 느리면 REST로도 받음)
자주 묻는 질문
Q. 앱이 오프라인일 때 데이터가 저장되나요?
A. 서비스 워커가 앱 리소스를 캐시하여 오프라인에서도 앱이 열립니다. 단, 데이터 변경은 Firebase에 연결될 때 동기화됩니다. 로컬 변경 사항은 임시로 localStorage에 저장됩니다.
Q. 여러 iPad에서 동시에 사용할 수 있나요?
A. 네. Firebase 실시간 동기화로 여러 기기의 데이터가 자동으로 맞춰집니다.
Q. 비밀번호를 분실했을 경우 어떻게 하나요?
A. Firebase 콘솔에서 해당 매장의 비밀번호 값을 직접 수정해야 합니다. 관리자에게 문의하세요.
Q. Gemini API 무료 한도는 어느 정도인가요?
A. gemini-2.5-flash-lite 모델은 Google AI Studio 무료 티어에서 사용 가능합니다. 일반적인 레스토랑 운영 규모에서는 무료 한도 내에서 충분히 사용 가능합니다.
