한화비전 × 한화푸드테크 · 2024.12 – 2025.05
한화푸드테크 × 한화비전 푸드테크 매장 자동화 – 무인 우동매장 실시간 관리 웹앱
무인 우동매장의 조리 로봇·포스기·CCTV를 실시간으로 다루는 관리 웹앱, Lighthouse 100점
개요
로봇이 조리하는 무인 우동매장을 관리하는 실시간 제어 앱의 웹뷰를 개발했습니다. 하드웨어 연동, 인증, 데이터 시각화를 함께 다룬 푸드테크 매장 자동화 프로젝트입니다.
배경
문제
무인 매장을 운영하려면 조리 로봇, 포스기, CCTV 같은 장비 상태를 한 화면에서 실시간으로 보고 제어할 수 있어야 했습니다.
주요 작업
- 별도 백엔드 서버 없이 Next.js API Routes에서 한화비전 하드웨어 프로토콜(SUNAPI) Digest 인증(MD5 해싱, QOP 처리)을 직접 구현해 CCTV 장비 연동과 스피커 음원 송출
- SSE로 조리 로봇과 포스기 상태를 실시간 반영
- 매장 체류시간, 일별·시간대별 방문객 대시보드(BarGraph 직접 구현), 매장 알림과 상태 업데이트 기능
- NextAuth와 httpOnly·sameSite·secure 쿠키 인증으로 XSS·CSRF 대응
성과
- Lighthouse 100점
데이터 시각화 차트와 렌더링을 최적화해 Lighthouse 100점을 기록했습니다.
- 1주일 안에 전체 화면 구성
합류 후 1주일 안에 전체 UI·UX 화면을 구성했습니다.
핵심 기능
- 01
장비 실시간 상태
SSE로 조리 로봇과 포스기 상태를 실시간으로 받아 화면에 반영합니다.
- 02
CCTV 연동과 음성 송출
Next.js 서버에서 SUNAPI Digest 인증을 처리해 CCTV 장비와 통신하고 안내 음성을 송출합니다.
화면
