바리스타 앱

바리스타 앱

카페 매장에 설치된 바리스타 로봇을 제어하고 주문을 관리하는 Android 태블릿 애플리케이션입니다. 직원이 한 대의 태블릿으로 로봇 상태를 실시간 모니터링하고, 키오스크 주문을 자동/수동으로 조리하며, 매장 오픈·마감 절차까지 수행할 수 있도록 설계했습니다.

• •기간: 2025.07 ~ 2026.03 (실매장 운영)
• •플랫폼: Android 태블릿 (가로/세로 모드 대응)
• •팀: Cutshion 프론트엔드팀
• •실 적용: 실제 매장에 배포되어 운영

담당 역할

React Native 앱의 프론트엔드 개발과 유지보수를 담당했습니다. 키오스크·로봇·태블릿이 실시간으로 연결되는 환경에서 단순 기능 구현보다 상태 일관성, 장애 복구, 현장 운영성을 우선해 설계했습니다.

• •실시간 주문·로봇 이벤트 처리 구조 설계 (Socket.io)
• •연속 추출·디카페인 우선 처리 등 운영 시나리오 로직 구현
• •ROS 기반 3D 로봇 뷰어 및 관절 오차 시각화
• •알람·TTS 기반 장비 이상 감지 시스템
• •다국어(한·영·일) 지원 및 폴백 체계 구축

기술 스택

핵심 기능

실시간 주문 관리

키오스크에서 들어오는 주문을 Socket.io로 수신해 즉시 화면에 표시합니다. 자동 모드에서는 수신 즉시 로봇이 조리를 시작하고, 수동 모드에서는 직원이 직접 카페인 타입·샷 수·수량을 지정해 조리를 요청합니다. 디카페인 주문은 전용 포터필터를 사용하므로, 대기열 앞으로 이동시켜 먼저 처리하도록 우선순위를 부여했습니다.

연속 추출 제어

복수 음료를 끊김 없이 이어서 추출하는 기능입니다. 추출 중에는 자동/수동 토글과 모드 전환을 비활성화해 상태 혼란을 막고, 로봇·네트워크 이상이 감지되면 자동으로 추출을 종료합니다.

로봇 상태 모니터링

컵 디스펜서, 넉박스, 그라인더, 커피머신 등 주요 디바이스 상태를 실시간으로 표시합니다. 이상이 감지되면 팝업 알림·알람음·TTS 음성 안내를 조합해 현장 직원이 상황을 즉시 파악할 수 있도록 했습니다.

3D 로봇 뷰어

ROS Bridge를 통해 로봇의 6축 관절 각도를 실시간으로 수신하고, Three.js로 현재 자세를 시각화합니다. 현재 자세와 목표 자세를 함께 렌더링해 관절 오차를 직관적으로 파악할 수 있고, 관절별 허용 편차를 초과하면 해당 관절을 색상으로 강조합니다.

준비 / 마감 가이드

오픈·마감 절차를 이미지 기반으로 순서대로 안내합니다. 한·영·일 언어별 이미지를 서버에서 받아오고, 화면 진입 시 전체 이미지를 Prefetch해 페이지 전환이 끊기지 않도록 했습니다.

정산 및 로그

날짜 범위 선택으로 조리 통계를 바·파이 차트로 시각화하고, 로봇 동작 로그를 날짜별로 필터링해 무한 스크롤로 조회할 수 있습니다.

성과

• •실제 매장에 배포되어 안정적으로 운영
• •v1.0 → v1.0.43+ 지속적인 버전 업데이트로 기능 고도화
• •자동 조리 모드 도입으로 주문 수신부터 추출까지 직원 개입 없이 완결
• •TTS·팝업 알람 도입으로 로봇 이상 상황 대응 속도 향상
• •한·영·일 다국어 지원으로 외국인 직원 근무 환경 대응

구현 상세

실시간 제어 앱을 운영하면서 가장 신경 쓴 부분은 여러 장비 사이에서 상태가 어긋나지 않게 만드는 일이었습니다. 이 문서에서는 로봇 뷰어, 연속 추출 상태, 소켓 요청 복구 흐름을 중심으로 정리했습니다.

1. 3D 로봇 뷰어 (ROS + WebView + Three.js)

React Native에서는 WebGL을 직접 못 쓰기 때문에, WebView 안에 Three.js + ROSLib 환경을 구성하고 RN과 postMessage / injectJavaScript로 양방향 통신하는 구조를 택했습니다.

로봇 (JAKA Minicobo 6DOF)
  ↓ ROS 토픽 /jaka_driver/joint_position → ROS Bridge WebSocket
WebView (JavaScript)
  ├─ 라디안 → 도 변환 / Quaternion 기반 관절 회전
  └─ Three.js 렌더링 루프
  ↓ postMessage({ type: 'jointUpdate', joints }) → React Native

기구학: URDF 규격대로 6개 관절을 Three.js Group 계층으로 표현하고, 관절 회전은 오일러 각 덧셈이 아닌 Quaternion 곱으로 처리해 짐벌락을 방지했습니다.

듀얼 렌더링: 현재 자세(흰색 불투명)와 목표 자세(파란색 반투명)를 동시에 렌더링하고, 관절별 허용 편차(예: J1 ±20°, J6 ±120°)를 초과하면 색상으로 강조합니다. 단순 시각화보다 현장에서 오차를 판단하는 도구로 쓰일 수 있게 구성했습니다.

2. 연속 추출 상태의 전역화 — 비정상 시나리오 우선 정의

연속 추출 상태(isContinuousExtracting)를 컨트롤러의 로컬 useState로 두자, 참조 화면이 늘면서 props drilling·스냅샷 불일치·Maximum update depth exceeded가 발생했습니다.

해결: 상태를 Redux 전역으로 이관해 단일 출처로 통합하고, 정상 시나리오보다 비정상 종료 시나리오를 먼저 정의했습니다. 소켓·인터넷·로봇 온라인·로봇 연결 중 하나라도 비정상이면 자동으로 추출을 종료하고, 모든 주문이 취소되면 연속 추출도 중단합니다.

그 결과 추출 중 UI 비활성화, 주문 전체 취소 연동, 로봇 오프라인 자동 중단이 한 상태로 일관되게 동작합니다.

3. 소켓 요청 타임아웃 — "에러 처리"가 아니라 UX 복구

로봇 제어 버튼은 응답 전까지 비활성화되는데, 응답이 지연·누락되면 버튼이 영구히 잠기는 문제가 있었습니다.

해결: 소켓 요청마다 setTimeout으로 타임아웃을 걸고, 만료 시 로딩/비활성화를 강제 해제한 뒤 에러 토스트를 노출합니다. 정상 응답 시 clearTimeout으로 중복 처리를 방지하고, 상태 조회용·액션 실행용 타임아웃을 별도 ref로 분리해 서로 간섭하지 않게 했습니다. 이 패턴을 공통 훅으로 추출해 신규 요청도 같은 복구 흐름을 따르도록 표준화했습니다.

덕분에 네트워크가 불안정하거나 응답이 누락돼도 운영자가 같은 화면에서 다시 시도할 수 있었습니다.

그 외 구현

• •단일 소켓 인스턴스 + 훅 추상화: SocketProvider가 앱 최상단에서 단일 인스턴스를 전역 관리, useSocketSender/Receiver로 리스너 등록·cleanup 자동화, 로그아웃 시 removeAllListeners로 중복 등록 차단
• •알람 운영 맥락 반영: "조리 중 컵 필요" 플래그로 휴식 중 오알람 방지, 마감 자세 전환 시 알람 자동 비활성화, TTS 재생 완료를 await 후 알람음 순차 재생
• •다국어 폴백 체계: 서버 번역 → AsyncStorage 캐시 → 번들 JSON 단계 폴백, 응답 result 코드 기반으로 클라이언트에서 t(key) 매핑해 서버 언어에 비종속

트러블슈팅

• •RN `Modal` 시스템 UI 충돌: 기본 Modal이 별도 Window 계층이라 앱이 숨긴 Android 시스템 바가 복원됨 → absoluteFillObject + 높은 zIndex 커스텀 모달로 전환.
• •중복 로그인 세션 중첩: 다른 기기 로그인 시 기존 세션이 유지됨 → 중복 로그인 이벤트 수신 시 로컬 인증 초기화 + 소켓 해제 + 로그인 이동 일괄 처리.
• •앱 버전 비교 오류: 서버 "v1.0.30" vs 앱 "1.0.30" 문자열 불일치로 업데이트 미탐지 → v prefix 정규화 전처리 추가.