Portfolio
PROPOSAL CONCEPT · 제안 기반 설계 프로토타입
PROJECT #287 · HYBRID APP
Lunch App Hybrid (WebView)

점심 구독
하이브리드 앱

WebView 래퍼 기반 Android/iOS 단일 코드베이스, 주간 메뉴 + 정기 구독 설정 + 배송 실시간 트래킹을 담은 소비자용 구독 식사 앱. 위시켓 제안 #154388 기반 설계 프로토타입.

Type
제안 기반 설계
Platform
Android · iOS · Web
Stack
WebView Hybrid
Domain
B2C Food Subscription
Role
Full-Stack Proposal

Concept Preview // multi-screen showcase

Overview // why hybrid?

한 번 작성, 두 스토어 배포

식사 구독 앱의 핵심 기능 — 메뉴 탐색 · 주문 · 결제 · 배송 트래킹 · 알림 — 대부분은 Native 성능이 필수가 아닙니다. 따라서 Core UI 는 Vue/React 기반 웹 으로 개발하고, 이를 WebView 래퍼(Android/iOS)에 실어 동일한 화면·동일한 코드로 양 플랫폼에 배포합니다.

Native 가 필요한 부분(푸시 알림 · 카메라 · 위치 · 생체인증)만 JSBridge 로 연결해, 개발 공수 40% 절감 + 유지보수 단일화 효과를 얻습니다.

실시간 배송 트래킹

주문 → 조리 → 라이더 배정 → 배송 중 → 완료의 5단계를 WebSocket 실시간 으로 추적하고, 지도 위에 라이더 위치를 실시간 표시합니다.

FCM/APNS 푸시로 각 단계 진입 시 즉시 알림, 예상 도착 시간은 ML 기반 ETA 예측으로 정확도 ±2분 수준 유지.

📱 라이브 데모 보기 →
📱
1CodeBase
Hybrid WebView
±2
ETA 예측 정확도
🔔
FCM
Push Notification
💰
40%
개발 공수 절감

Core Modules // 6 main features

📋

주간 메뉴

운영자가 주 단위로 메뉴 등록, 사용자는 월~금 중 원하는 요일 선택. 영양/알레르기 필터.

🔁

정기 구독

주기(주1/3/매일) · 요일 · 시간대 · 결제수단 설정, 휴무일 자동 스킵, 일시 정지 가능.

💳

간편 결제

PG(토스/카카오페이) · 카드 정기결제 · 쿠폰/포인트. 결제 실패 자동 재시도 + 알림.

🗺

실시간 트래킹

WebSocket + 지도 API 로 라이더 위치·ETA 표시, 배송 완료 사진 자동 업로드.

🔔

푸시 알림

FCM/APNS 연동, 주문 접수/조리 시작/배송 출발/도착 4단계 맞춤 알림.

리뷰 · 별점

배송 완료 후 메뉴별 평점, 사진 리뷰, 알레르기 경험 태그, 운영자 답변.

Tech Stack // hybrid architecture

App Screens // 10 key mobile screens

9:41•••• 5G
// 01 · Login
9:41•••• 5G
// 02 · Home · 메뉴 탐색
9:41•••• 5G
// 03 · 메뉴 상세 · 영양성분
9:41•••• 5G
// 04 · 장바구니
9:41•••• 5G
// 05 · 정기 구독 설정
9:41•••• 5G
// 06 · 주문 내역
9:41•••• 5G
// 07 · 실시간 배송 트래킹
9:41•••• 5G
// 08 · 리뷰 작성
9:41•••• 5G
// 09 · 마이페이지
9:41•••• 5G
// 10 · 알림 센터