제로살롱 KIOSK

1. 고객사 소개

• 이름: 주식회사 라이토즈
• 분야: 플라스틱 컵 재활용 사업
• 장비 운영: 카페·상가·공공시설 등에 무인 수거 장비 설치
• 과제: 안내 인력 없이 누구나 사용할 수 있고, 200대 규모에서 개별 관리가 필요 없는 소프트웨어

당사는 키오스크 소프트웨어 개발과 1년간의 유지보수를 담당했으며, 같은 사업의 사용자 앱도 함께 개발했습니다.

2. 도입 배경

앱만으로는 재활용이 일어나지 않습니다. 실제로 컵을 받고, 분쇄하고, 얼마나 처리했는지 세는 장비가 현장에 있어야 합니다. 그리고 그 장비는 사람이 상주하지 않는 곳에서 하루 종일 혼자 돌아야 합니다.

무인 장비가 요구하는 조건

무인 장비의 소프트웨어는 일반 앱과 요구 조건이 다릅니다. 첫째, 사용법을 설명해 줄 사람이 없습니다. 화면만 보고 끝까지 갈 수 있어야 합니다. 둘째, 하드웨어와 붙어 있습니다. 화면에서 "처리 중"이라고 표시하는 동안 실제로 장치가 돌고 있어야 하고, 장치가 멈추면 화면도 그 사실을 알아야 합니다. 셋째, 문제가 생겨도 즉시 사람이 갈 수 없습니다. 200대가 전국에 흩어져 있다면 더욱 그렇습니다.

현장에서 실행하는 장비

제로살롱 KIOSK는 주식회사 라이토즈의 플라스틱 컵 재활용 사업을 현장에서 실행하는 장비의 소프트웨어입니다. 사용자가 로그인하고, 컵을 넣고, 분쇄 결과에 따라 포인트를 받는 전 과정을 키오스크 화면에서 처리합니다. 2025년 4월부터 2026년 4월까지 개발과 1년간의 유지보수를 진행했으며, 200대 이상을 현장에 납품했습니다.

200대라는 수량도 설계에 영향을 미쳤습니다. 장비가 열 대라면 문제가 생겼을 때 방문해서 고치면 됩니다. 200대가 되면 방문 자체가 비용이 되고, 장비마다 조금씩 다른 상태로 운영되기 시작하면 원인 파악이 불가능해집니다. 그래서 개발 초기부터 "모든 장비가 같은 소프트웨어를 돌린다"와 "방문 없이 갱신한다" 두 가지를 조건으로 두고 시작했습니다.

같은 사업의 사용자 앱도 당사가 함께 개발했습니다. 앱과 키오스크가 같은 계정과 포인트를 공유해야 하므로, 양쪽을 함께 다룬 것이 연동 설계에서 이점이 되었습니다.

한 줄 요약 무인 장비에서 가장 중요한 것은 "지금 어떤 상태인가"를 잃지 않는 것입니다.

3. 활용 기능

안드로이드 기반 키오스크 전용 애플리케이션을 구축했습니다. 화면 조작부터 분쇄 장치 제어, 포인트 적립까지 하나의 애플리케이션 안에서 처리합니다.

화면 흐름

흐름은 단순하게 잡았습니다. 대기 화면에서 시작해 로그인 방식을 고르고, 인증이 끝나면 투입과 분쇄가 진행되고, 마지막에 적립 결과를 보여 준 뒤 다시 대기 화면으로 돌아갑니다. 각 단계는 독립된 화면이며, 한 화면에는 하나의 선택만 둡니다.

무인 환경에서는 선택지가 많을수록 멈춰 서는 사람이 늘어납니다. 필요한 정보를 한 화면에 몰아 넣는 대신 단계를 나누고, 각 단계에서 무엇을 해야 하는지만 크게 표시했습니다. 처음 이용하는 사용자를 위한 안내 화면도 별도로 두어, 사용법을 모르는 사람이 흐름을 시작하기 전에 확인할 수 있게 했습니다.

하드웨어 제어

소프트웨어가 분쇄 장치와 직접 통신합니다. 시리얼 통신으로 명령을 보내고 상태를 받아, 투입 감지부터 분쇄 시작과 완료까지의 신호를 화면 상태와 맞춥니다. 중간 서버를 거치지 않기 때문에 네트워크가 불안정해도 장치 제어 자체는 영향을 받지 않습니다.

장치에서 오는 신호는 순서가 일정하지 않고 중복으로 들어오는 경우도 있습니다. 들어오는 신호를 이벤트 흐름으로 다루면서 상태를 정리하도록 구성해, 화면이 장치보다 앞서가거나 뒤처지는 상황을 줄였습니다.

화면 구성

화면은 열한 개 남짓으로 구성했습니다. 대기, 로그인 방식 선택, 번호 입력, QR 인증, 사용자 확인, 안내 1·2단계, 분쇄 진행, 상세 정보, 포인트 확인, 그리고 상단과 하단의 공통 영역입니다. 공통 영역에는 현재 단계와 도움말, 처음으로 돌아가기를 두어 어느 화면에서든 흐름을 빠져나올 수 있게 했습니다.

화면 수를 늘리는 대신 각 화면의 정보량을 줄이는 방향을 택했습니다. 키오스크 앞에 서 있는 사람은 화면을 읽기보다 훑습니다. 한 화면에서 판단해야 할 것이 두 가지 이상이면 그 자리에서 멈추게 됩니다.

계정 연동

로그인은 QR과 휴대폰 번호 두 가지를 지원합니다. 앱 사용자는 앱에서 QR을 띄워 인증하고, 앱이 없는 사용자는 번호를 입력해 참여합니다. 어느 쪽이든 같은 계정에 연결되므로, 나중에 앱을 설치하면 기존 적립분이 그대로 보입니다.

적립 결과는 키오스크 화면과 앱 양쪽에서 같은 값으로 확인됩니다. 현장에서 받은 숫자와 앱에서 보이는 숫자가 다르면 사용자는 서비스를 신뢰하지 않습니다.

장비별 설정

같은 빌드를 200대에 배포하되, 장비마다 다른 값은 설정으로 분리했습니다. 장비 고유 정보를 조회해 서버와 통신하고, 환경별 설정은 빌드 시점에 주입합니다. 장비마다 다른 버전을 만들면 관리가 불가능해지므로, 차이를 코드가 아니라 설정에 두는 것이 전제였습니다.

서버 통신

서버와 주고받는 것은 인증, 장비 정보, 포인트 세 가지입니다. API 모듈을 이 단위로 나누고 공통 설정을 한 곳에 뒀습니다. 키오스크는 웹 애플리케이션과 달리 사용자가 새로고침할 수 없으므로, 통신 실패 시의 처리를 화면마다 정해 두어야 합니다. 재시도할지, 이전 단계로 돌아갈지, 안내 후 처음으로 보낼지를 단계별로 구분했습니다.

진행 방식

개발 순서는 장치 연동을 먼저 확인하는 방향으로 잡았습니다. 화면을 아무리 잘 만들어도 분쇄 장치와의 통신이 안정적이지 않으면 서비스가 성립하지 않기 때문입니다. 시리얼 통신으로 명령을 보내고 상태를 받는 부분을 먼저 확보한 뒤, 그 위에 화면 흐름을 얹었습니다.

이후에는 현장 조건을 반영하는 작업이 이어졌습니다. 설치 장소마다 조명과 네트워크 상태가 달라, 실제 장비에서 확인해야만 드러나는 문제가 많았습니다. 1년간의 유지보수 기간 동안 이런 조정을 계속했습니다.

현장 설치 조건

설치 장소는 카페, 상가, 공공시설 등으로 제각각입니다. 조명이 밝은 곳도 있고 어두운 곳도 있으며, 통신 품질도 다릅니다. 같은 소프트웨어가 어디에 설치되든 동작해야 하므로, 환경에 따라 달라질 수 있는 요소는 앱이 흡수하도록 구성했습니다. 인식 실패에 대비해 대체 입력 경로를 두고, 통신이 끊겨도 진행이 멈추지 않도록 한 것이 그 결과입니다.

원격 갱신

현장에 설치된 장비의 소프트웨어를 원격으로 갱신할 수 있도록 OTA 업데이트를 적용했습니다. 200대 규모에서 개별 방문으로 업데이트하는 것은 현실적이지 않습니다. 문구 수정이나 화면 조정은 방문 없이 반영됩니다.

주요 기능

QR 로그인

앱 사용자가 앱에서 QR을 띄우면 키오스크가 인식해 로그인합니다. 별도 입력이 없어 가장 빠른 경로이며, 앱을 쓰는 사용자에게는 기본 방식입니다. 인식에 실패하면 번호 입력으로 넘어갈 수 있도록 안내합니다.

휴대폰 번호 로그인

앱이 없는 사용자를 위해 번호 입력 방식을 제공합니다. 키오스크 화면에 숫자 키패드를 띄워 입력받습니다. 앱 설치를 강제하면 현장에서 처음 장비를 본 사람은 그냥 지나가기 때문에, 진입 경로를 하나로 좁히지 않았습니다.

분쇄 장치 직접 제어

시리얼 통신으로 분쇄 장치를 제어합니다. 투입 감지, 분쇄 시작, 완료 신호를 실시간으로 주고받으며, 화면은 장치 상태를 그대로 반영합니다. 사용자가 보는 진행 표시가 실제 장치 동작과 일치해야 "끝났는지 아닌지" 묻는 상황이 생기지 않습니다.

실시간 상태 동기화

장치 상태와 처리 결과를 이벤트 스트림으로 관리하고, 서버와는 웹소켓으로 연결합니다. 처리 도중 화면이 멈추거나 상태가 어긋나는 상황을 줄이기 위한 구조입니다. 서버 연결이 끊겨도 장치 제어는 계속되며, 연결이 복구되면 결과를 다시 전송합니다.

투입 수량 표시

분쇄가 진행되는 동안 처리한 수량을 화면에 표시합니다. 컵을 여러 개 넣는 사용자가 많기 때문에, 몇 개가 처리됐는지 실시간으로 보이지 않으면 중간에 멈춰도 알아차리지 못합니다. 장치에서 오는 완료 신호를 세어 화면에 반영합니다.

포인트 적립과 조회

분쇄 결과에 따라 포인트를 적립하고, 키오스크 화면에서 잔여 포인트를 확인할 수 있습니다. 앱과 같은 계정을 쓰기 때문에 적립 내역이 양쪽에서 동일하게 보입니다.

단계별 이용 안내

처음 이용하는 사용자를 위해 사용 방법을 단계별 화면으로 안내합니다. 현장에 안내 인력이 없는 환경을 전제로, 글보다 화면 구성으로 설명하도록 구성했습니다.

상세 정보 화면

처리 결과와 관련 안내를 확인하는 화면을 별도로 두었습니다. 대기 화면에서 바로 접근할 수 있어, 반납하지 않더라도 서비스가 무엇인지 확인할 수 있습니다. 장비 앞을 지나가다 멈춰 선 사람이 첫 이용자가 되는 경우가 많기 때문에, 설명을 보는 경로를 흐름 바깥에도 열어 두었습니다.

키오스크 모드 고정

시스템 내비게이션 바를 숨겨 사용자가 장비의 다른 기능으로 빠져나가지 못하게 했습니다. 무인 장비에서 애플리케이션 밖으로 나가는 경로가 열려 있으면 장비가 엉뚱한 상태로 방치됩니다.

장비 식별

장비 고유 정보를 조회해 서버와 통신할 때 사용합니다. 어느 장비에서 어떤 처리가 일어났는지 구분되어야 운영 현황을 집계할 수 있고, 특정 장비에서만 발생하는 문제도 찾을 수 있습니다.

원격 업데이트

OTA 업데이트로 현장 장비의 소프트웨어를 갱신합니다. 200대 규모에서 개별 방문 없이 수정 사항을 반영할 수 있어, 운영 중 개선 주기가 짧아집니다.

사용자 확인 화면

로그인 직후 사용자 정보를 확인하는 화면을 두었습니다. 번호를 잘못 입력했거나 다른 사람의 QR을 인식한 경우를 여기서 걸러 냅니다. 적립이 끝난 뒤에 잘못된 계정이었다는 사실을 알면 되돌리기가 번거롭기 때문에, 확인 단계를 앞에 배치했습니다.

처음으로 돌아가기

어느 화면에서든 처음으로 돌아갈 수 있습니다. 무인 장비에서 가장 흔한 문제는 앞 사용자가 중간 화면에 머문 채 자리를 뜨는 것입니다. 일정 시간 조작이 없으면 자동으로 대기 화면으로 복귀해, 다음 사용자가 항상 같은 지점에서 시작합니다.

핵심 설계 200대 규모를 전제로 "모든 장비가 같은 소프트웨어를 돌린다", "방문 없이 갱신한다" 두 조건을 먼저 고정했습니다.

4. 성과

200대 이상을 현장에 납품했습니다. 장비 수가 늘어도 운영 방식이 달라지지 않도록 설계한 것이 이 규모를 감당한 기반입니다.

하드웨어 제어와 사용자 화면을 하나의 애플리케이션에서 처리해, 분쇄 상태와 화면 표시가 어긋나는 문제를 줄였습니다. 무인 장비에서 이 불일치는 곧바로 문의와 현장 출동으로 이어지기 때문에, 구조 선택이 운영 비용에 직접 영향을 미쳤습니다.

OTA 업데이트를 적용한 덕분에 200대 규모에서도 개별 방문 없이 소프트웨어를 갱신합니다. 운영 중 나온 개선 요청을 반영하는 주기가 짧아졌고, 유지보수 1년 동안 이 경로로 대응했습니다.

앱과 계정·포인트를 공유하는 구조라, 사용자는 앱과 키오스크 중 어느 쪽에서 확인해도 같은 적립 내역을 봅니다. QR과 번호 입력 두 가지 로그인 경로를 모두 제공해, 앱을 쓰지 않는 사용자도 참여할 수 있게 했습니다.

로그인 경로를 둘로 나눈 판단도 결과에 영향을 미쳤습니다. 앱 설치를 전제로 했다면 현장에서 장비를 처음 본 사람은 참여하지 못합니다. 번호 입력 경로를 남겨 두면서, 앱 사용자에게는 더 빠른 QR 경로를 제공하는 구성이 두 집단을 모두 수용했습니다.

장비 상태와 화면 상태를 한 애플리케이션에서 관리한 덕분에, 처리 도중 문제가 생겨도 어느 단계에서 멈췄는지 화면에서 확인됩니다. 현장 담당자가 장비를 열어 보지 않고도 상황을 설명할 수 있다는 점이 원격 대응에서 특히 도움이 되었습니다.

같은 사업의 앱과 키오스크를 한 팀이 함께 개발하면서 연동 규격 협의에 드는 시간이 줄었고, 현장 문제를 양쪽에서 함께 확인할 수 있었습니다. 2025년 4월부터 2026년 4월까지 개발과 유지보수를 연속으로 담당했습니다.

5. 기술 구성

Kiosk App

React Native 기반 안드로이드 전용 애플리케이션입니다. TypeScript로 작성하고, 화면 전환은 React Navigation으로 구성했습니다. 터치 조작만 사용하는 환경이라 입력 요소는 크게 배치하고, 화면 비율은 세로형 장비에 맞춰 고정했습니다.

하드웨어 연동

시리얼 포트 통신으로 분쇄 장치를 제어합니다. 장비 고유 정보 조회, 시스템 내비게이션 바 제어(키오스크 모드 고정)를 함께 적용했습니다. 하드웨어 연동 부분은 화면 로직과 분리해, 장치 프로토콜이 바뀌어도 화면 코드를 건드리지 않도록 했습니다.

실시간 처리

RxJS 기반 이벤트 스트림으로 장치 신호와 화면 상태를 연결합니다. 서버와는 웹소켓으로 연결해 상태를 주고받습니다. 신호가 중복으로 들어오거나 순서가 어긋나는 상황을 스트림 단계에서 정리합니다.

인증 / 화면

QR 코드 생성과 전화번호 입력을 지원합니다. 로그인 방식에 따라 화면을 나누되, 인증 이후의 흐름은 하나로 합쳤습니다. 분기를 앞단에서 끝내면 이후 코드가 단순해집니다.

세로형 화면 대응

키오스크 장비는 세로형 화면을 씁니다. 일반적인 모바일 레이아웃과 비율이 달라, 버튼 크기와 여백을 장비 기준으로 다시 잡았습니다. 서 있는 사람이 팔을 뻗어 누르는 조작이므로 터치 영역을 크게 두고, 화면 상단과 하단에 고정 영역을 배치했습니다.

설정과 배포

환경별 설정을 빌드에 주입하고, OTA 업데이트로 현장 장비를 갱신합니다. 같은 빌드가 모든 장비에서 동작하도록 유지하는 것이 운영의 전제였습니다.

기술 선택의 기준

무인 장비 소프트웨어에서 가장 중요한 것은 "지금 어떤 상태인가"를 잃지 않는 것입니다. 하드웨어 제어와 화면을 같은 애플리케이션 안에 둔 이유가 여기에 있습니다. 둘을 나누면 그 사이에 상태를 주고받는 구간이 생기고, 그 구간이 끊기면 화면과 장치가 다른 이야기를 하게 됩니다.

서버 의존도를 낮춘 것도 같은 판단입니다. 네트워크는 현장 조건에 따라 불안정할 수 있으므로, 장치 제어와 화면 진행은 서버 없이도 끝까지 갈 수 있어야 합니다. 서버는 결과를 저장하고 계정을 확인하는 역할에 두었습니다.

코드 구성

화면, API, 공통 설정, 훅을 분리했습니다. 장치 제어와 서버 통신처럼 화면과 무관한 로직은 화면 컴포넌트 밖에 두고, 화면은 상태를 받아 표시하는 역할에 집중합니다. 키오스크는 화면 수가 많지 않은 대신 각 화면이 장치 상태에 묶여 있어, 이 분리를 해두지 않으면 화면마다 장치 처리 코드가 중복됩니다.

QR 표시 같은 재사용 요소는 공용 컴포넌트로 뺐습니다. 앱과 키오스크 양쪽에서 같은 인증 방식을 쓰기 때문에, 표시 규격을 맞춰 두는 것이 연동 오류를 줄입니다.

구현하면서 다룬 문제

장치 신호의 불규칙성. 시리얼 통신으로 들어오는 신호는 중복되거나 순서가 바뀌기도 합니다. 신호를 그대로 화면 상태로 연결하면 진행 표시가 튑니다. 이벤트 스트림 단계에서 정리한 뒤 화면에 반영하도록 나눴습니다.

네트워크 불안정. 설치 장소에 따라 통신 품질이 크게 다릅니다. 연결이 끊긴 동안에도 처리를 계속하고, 복구 시점에 결과를 다시 보내는 방식으로 처리했습니다.

사용법 안내. 안내 인력이 없는 환경이라 화면이 곧 설명서입니다. 한 화면에 하나의 선택만 두고, 다음에 무엇을 해야 하는지 크게 표시하는 원칙을 끝까지 지켰습니다.

장비 개별 관리. 200대 규모에서는 장비마다 다른 빌드를 두는 순간 관리가 불가능해집니다. 차이를 설정으로 분리하고 빌드를 하나로 유지했습니다.

현장 접근성. 문제가 생겨도 즉시 방문할 수 없습니다. 원격 갱신 경로를 확보하고, 장비 식별 정보를 함께 남겨 어떤 장비에서 무슨 일이 있었는지 확인할 수 있게 했습니다.

대기 상태 복귀. 사용자가 중간에 자리를 뜨면 장비는 그 화면에 멈춰 있게 됩니다. 다음 사람이 남의 계정으로 적립하는 상황을 막기 위해, 일정 시간 조작이 없으면 자동으로 대기 화면으로 돌아가도록 했습니다.

대기 화면의 역할. 하루 중 대부분의 시간 동안 장비는 대기 화면을 띄우고 있습니다. 이 화면이 곧 옥외 광고 역할을 하므로, 서비스가 무엇인지와 어떻게 참여하는지를 멀리서도 읽히도록 구성했습니다.

앱과의 값 불일치. 키오스크에서 받은 포인트와 앱에서 보이는 포인트가 다르면 사용자는 둘 다 믿지 않습니다. 적립 처리를 서버 기준으로 통일하고, 키오스크 화면은 서버가 확정한 값을 보여 주도록 했습니다.

6. 프로젝트 정보

항목	내용
사업명	제로살롱 KIOSK 개발
담당 범위	키오스크 개발 및 유지보수 1년 (200대 이상 납품)
적용 기술	React Native, TypeScript, 시리얼 통신, RxJS, WebSocket, OTA 업데이트