제로살롱 앱

1. 고객사 소개

• 이름: 주식회사 라이토즈
• 분야: 플라스틱 컵 재활용 사업
• 사업 구성: 현장 수거·분쇄 장비 + 참여자용 모바일 앱 + 포인트 운영
• 과제: 재활용 참여를 일회성 캠페인이 아니라 반복 행동으로 만들 유인 설계

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

2. 도입 배경

재활용은 옳은 일이지만, 옳다는 이유만으로 사람을 움직이게 하지는 못합니다. 분리배출이 귀찮고, 제대로 했는지 확인할 방법도 없고, 참여한 대가도 없기 때문입니다. 플라스틱 컵 재활용 사업을 준비하던 주식회사 라이토즈의 고민도 같은 지점에 있었습니다. 수거 장비를 설치해도 사람들이 찾아오게 만들 유인이 필요했습니다.

캠페인이 끝나면 참여도 끝난다

환경 캠페인이 대부분 일회성으로 끝나는 이유도 여기에 있습니다. 행사 기간에는 참여가 몰리지만 끝나면 원래대로 돌아갑니다. 참여를 반복 행동으로 만들려면 매번 무언가가 남아야 합니다. 그 "남는 것"을 포인트로 잡았습니다. 컵을 반납하면 포인트가 쌓이고, 쌓인 포인트는 실제로 쓸 수 있어야 합니다.

참여에 보상을 남기기

제로살롱 앱은 이 구조를 구현한 사용자 앱입니다. 2025년 4월부터 2026년 4월까지 앱 개발과 1년간의 유지보수를 함께 진행했습니다. 사용자는 앱으로 가까운 수거기를 찾고, 현장에서 본인 인증을 하고, 반납한 만큼 포인트를 받습니다.

앱을 만들 때 전제로 둔 조건이 두 가지 있었습니다. 첫째, 수거기 앞에서 쓰는 앱이라 조작이 빨라야 합니다. 장비 앞에 서서 메뉴를 찾아 들어가야 한다면 사람들은 그냥 버립니다. 둘째, 운영 중에 계속 바뀝니다. 제휴처가 늘고 이벤트가 생기고 포인트 전환처가 추가되므로, 앱 심사 없이 바꿀 수 있는 영역이 넓어야 합니다.

사업 구조상 앱은 혼자 동작하지 않습니다. 현장에는 컵을 받고 분쇄하는 키오스크가 있고, 뒤에는 포인트와 회원을 관리하는 서버가 있습니다. 앱은 그 사이에서 사용자의 신원을 확인하고 결과를 보여 주는 역할을 맡습니다. 당사는 앱 개발과 1년간의 유지보수를 담당했으며, 같은 사업의 키오스크 소프트웨어도 함께 개발했습니다. 앱과 키오스크가 같은 계정과 포인트를 공유해야 하므로, 양쪽을 함께 다룬 것이 연동 설계에 유리하게 작용했습니다.

한 줄 요약 수거기 앞에서 쓰는 앱입니다. 조작이 길어지면 사람들은 그냥 버립니다.

3. 활용 기능

안드로이드와 iOS를 모두 지원하는 사용자 앱을 구축했습니다. 회원 가입과 본인 인증, 수거기 안내, 포인트 적립과 사용, 공지와 고객 지원까지 사용자가 서비스를 이용하는 전 과정을 앱 안에서 처리합니다.

가입과 본인 인증

가입 흐름은 일반 회원 가입과 본인 인증으로 나뉩니다. 포인트가 실제 가치를 가지는 서비스라 계정을 중복으로 만들어 혜택을 반복 수령하는 상황을 막아야 했습니다. 본인 인증 절차와 그에 따르는 약관 동의 화면을 별도로 두고, 동의 항목을 세분해 어떤 정보가 왜 필요한지 화면마다 설명합니다.

비밀번호 재설정, 인증번호 확인, 회원 정보 수정도 각각의 화면으로 제공합니다. 가입 직후의 이탈을 줄이기 위해 가입 완료 화면을 따로 두고, 다음에 무엇을 하면 되는지 안내합니다.

수거기 찾기

현재 위치를 기준으로 주변 수거기를 지도에 표시합니다. 위치 정보는 지도 표시 용도로만 사용하고 서버로 전송하지 않습니다. 앱 심사와 개인정보 안내에서 이 점을 명시하고, 권한 요청 시점에도 같은 내용을 보여 줍니다.

지도에는 수거기와 제휴 매장이 함께 표시됩니다. 매장 상세 화면에서는 위치와 안내 정보를 확인할 수 있습니다. 사용자가 "어디로 가면 되는가"를 앱 안에서 끝낼 수 있어야 실제 방문으로 이어지기 때문입니다.

현장에서의 동선

앱 설계에서 가장 먼저 그린 것은 화면이 아니라 사용자의 동선이었습니다. 집에서 컵을 챙겨 나와 수거기를 찾고, 앞에 서서 인증하고, 컵을 넣고, 결과를 확인하고 돌아섭니다. 이 중 앱이 개입하는 지점은 수거기를 찾을 때와 인증할 때, 그리고 결과를 확인할 때입니다.

세 지점을 각각 최단 경로로 만들었습니다. 수거기 찾기는 홈에서 한 번, 인증 화면도 홈에서 한 번에 닿습니다. 적립 결과는 따로 찾아 들어가지 않아도 홈 화면에서 바로 보입니다. 기능을 많이 넣되 자주 쓰는 세 가지는 깊이 숨기지 않는다는 원칙을 유지했습니다.

적립과 사용

수거기에서 반납이 인식되면 앱 계정에 포인트가 적립됩니다. 사용자는 적립·사용 내역을 시간순으로 확인하고, 포인트를 기프트 구매나 외부 포인트 전환에 사용합니다. 전환 대상은 한 가지가 아니라 여러 제휴처를 지원하며, 각 전환 경로를 별도 화면으로 구성했습니다.

포인트를 다른 사용자에게 보내는 기능도 포함합니다. 가족이나 지인 단위로 모아서 쓰는 경우를 위한 기능입니다.

화면 구성

첫 화면은 포인트를 중심으로 잡았습니다. 보유 포인트가 가장 먼저 보이고, 그 아래에 이벤트 배너와 주요 기능 바로가기, 최근 적립 내역이 이어집니다. 사용자가 앱을 여는 이유의 대부분이 "얼마나 모였는지" 확인하는 것이기 때문입니다.

하단 탭으로 홈, 지도, 내역, 내 정보를 두고, 그 밖의 기능은 사이드 메뉴에 배치했습니다. 자주 쓰는 네 가지는 한 번에 닿게 하고, 가입·인증·약관·고객센터처럼 가끔 쓰는 기능은 메뉴 안으로 넣는 구성입니다.

화면 전환은 로그인 전과 후를 분리했습니다. 가입과 인증 과정은 독립된 흐름으로 두고, 완료되면 메인 흐름으로 넘깁니다. 인증 도중에 앱을 종료해도 다음 실행에서 같은 지점으로 돌아옵니다.

진행 방식

1년간 개발과 유지보수를 함께 진행하면서, 초기 개발과 이후 운영의 작업 성격이 크게 달랐습니다. 초기에는 가입, 인증, 적립, 사용이라는 핵심 흐름을 먼저 완성했습니다. 이 네 가지가 끊기지 않고 돌아가야 서비스가 성립하기 때문입니다.

운영 단계에 들어선 뒤에는 요청의 성격이 바뀌었습니다. 새 전환처 추가, 이벤트 운영, 안내 문구 수정처럼 기능보다 콘텐츠에 가까운 요구가 많았습니다. 이런 요청을 매번 배포로 처리하면 운영 속도가 개발 일정에 묶입니다. 콘텐츠를 서버에서 관리하도록 옮기고 OTA 업데이트를 적용한 것이 이 시기의 주요 작업이었습니다.

운영 콘텐츠

환경 사업은 후원과 제휴가 함께 움직입니다. 참여 자체를 알리는 일이 서비스 운영의 일부이기 때문에, 후원 안내와 사업 소개도 앱 안에서 볼 수 있게 두었습니다. 사용자가 자기 행동이 어디로 이어지는지 확인할 수 있으면 참여의 동기가 포인트에만 머물지 않습니다.

메인 배너, 공지, 이용 안내, 고객센터, 후원 안내를 서버에서 내려받아 표시합니다. 공지 본문은 HTML로 작성할 수 있어 이미지와 서식을 포함할 수 있습니다. 이벤트를 열거나 안내 문구를 바꿀 때 앱 스토어 심사를 기다리지 않아도 됩니다.

이용 안내는 여러 단계로 나눠 제공합니다. 처음 이용하는 사용자가 수거기 사용법을 앱에서 미리 확인할 수 있어야, 현장에서 헤매지 않습니다.

주요 기능

수거기 연동 포인트 적립

수거기에서 반납을 인식하면 앱 계정에 포인트가 적립됩니다. 사용자는 수거기 화면과 앱 중 어느 쪽을 봐도 같은 결과를 확인합니다. 적립이 지연되면 사용자는 실패로 받아들이므로, 적립 결과를 앱에서 즉시 확인할 수 있게 하는 것이 중요했습니다.

지도 기반 수거기 안내

현재 위치를 중심으로 주변 수거기를 지도에 표시합니다. 국내 지도 서비스를 연동해 실제 도로와 건물 정보를 함께 보여 줍니다. 위치 권한은 지도 표시에만 사용하며 수집한 위치를 서버로 보내지 않습니다.

QR·카메라 인식

앱에서 QR 코드를 띄워 수거기에 본인을 확인시키거나, 카메라로 코드를 인식합니다. 수거기 앞은 조명이 일정하지 않고 각도도 제각각이라 인식 성능이 중요합니다. 고성능 카메라 모듈을 적용해 인식 실패로 줄이 밀리는 상황을 줄였습니다.

포인트 내역 관리

적립과 사용 내역을 시간순으로 확인합니다. 어떤 수거기에서 언제 얼마를 받았는지 남기 때문에, 적립이 누락됐다고 느낄 때 사용자가 직접 확인할 수 있습니다. 잔여 포인트와 사용 가능한 항목을 같은 화면에서 보여 줍니다.

기프트 구매와 전환

포인트로 기프트를 구매하거나 외부 포인트로 전환합니다. 전환처가 여러 곳이라 각각의 절차를 별도 화면으로 구성하고, 구매·전환 이력을 따로 조회할 수 있게 했습니다. 포인트가 실제로 쓰이는 경로가 많을수록 적립의 동기도 커집니다.

포인트 전송

보유 포인트를 다른 사용자에게 보냅니다. 개인이 모으는 양이 많지 않은 서비스 특성상, 모아서 쓰려는 요구가 있었습니다. 전송 내역도 기록으로 남아 어디로 얼마가 나갔는지 확인할 수 있습니다. 포인트를 다루는 기능은 예외 없이 이력을 남기는 것을 원칙으로 삼았습니다.

본인 인증과 약관 관리

본인 인증 절차와 약관 동의를 단계별 화면으로 나눴습니다. 동의 항목마다 목적을 설명하고, 필수와 선택을 구분합니다. 개인정보를 다루는 화면은 내용이 바뀔 수 있으므로 문구를 서버에서 관리합니다.

배너와 공지

메인 배너와 공지를 서버에서 내려받습니다. 공지 본문은 HTML 렌더링을 지원해 서식과 이미지를 포함할 수 있습니다. 운영자가 앱 업데이트 없이 콘텐츠를 교체합니다.

구매·전환 이력 조회

기프트 구매와 포인트 전환 이력을 각각 조회합니다. 적립 내역과 분리해 둔 이유는 사용자가 찾는 맥락이 다르기 때문입니다. "얼마나 모였나"를 볼 때와 "지난번에 뭘 바꿨나"를 볼 때 필요한 화면이 다릅니다.

쿠폰과 이벤트

쿠폰 발급과 사용을 지원합니다. 특정 기간이나 특정 수거기에서 추가 혜택을 주는 이벤트를 쿠폰으로 운영할 수 있어, 참여가 저조한 시기나 지역을 겨냥한 운영이 가능합니다.

고객 지원

고객센터와 이용 안내, 후원 안내를 앱 안에 두었습니다. 문의를 위해 외부 채널로 나가야 하면 대부분 그냥 이탈합니다. 자주 묻는 내용은 안내 화면에서 먼저 해결하도록 구성했습니다.

제휴 매장 정보

수거기뿐 아니라 제휴 매장 정보를 함께 제공합니다. 매장 상세 화면에서 위치와 안내를 확인할 수 있어, 포인트를 쓸 수 있는 곳을 앱 안에서 찾습니다. 적립과 사용이 같은 앱 안에서 연결되어야 포인트가 쌓이기만 하고 남아 있는 상태를 피할 수 있습니다.

스플래시와 첫 진입

앱 실행 직후의 스플래시 화면에서 로그인 상태와 필수 업데이트 여부를 확인합니다. 사용자가 수거기 앞에서 앱을 열었는데 업데이트 안내부터 뜨면 흐름이 끊기므로, 필수 업데이트와 선택 업데이트를 구분해 처리합니다.

핵심 설계 자주 쓰는 세 가지 동작(수거기 찾기 · 인증 · 적립 확인)은 홈에서 한 번에 닿도록 배치했습니다.

4. 성과

누적 다운로드 1,000만 건 이상을 기록했습니다. 수거기 앞에서 쓰는 앱이라는 조건에 맞춰 동선을 줄인 것이 사용 빈도로 이어졌습니다.

포인트 적립이라는 즉각적인 보상을 만들어, 재활용 참여를 일회성 캠페인이 아니라 반복 행동으로 이어지게 했습니다. 컵을 넣으면 그 자리에서 포인트가 쌓이고, 쌓인 포인트는 기프트 구매와 외부 포인트 전환으로 실제로 쓰입니다. 보상이 추상적이지 않고 손에 잡혔다는 점이 참여를 이끌었습니다.

지도에서 수거기를 찾고, QR로 인증하고, 적립 내역을 확인하는 과정을 앱 하나에서 끝내도록 구성해 현장 체류 시간을 줄였습니다. 수거기 앞에서 오래 머물러야 하는 서비스는 줄이 생기고, 줄이 생기면 참여가 떨어집니다.

운영 콘텐츠를 서버에서 관리하고 OTA 업데이트를 적용한 덕분에, 1년간의 운영 기간에 이벤트와 안내를 빠르게 반영할 수 있었습니다. 앱 심사 대기 때문에 운영이 밀리는 일이 줄었습니다.

앱과 키오스크를 같은 팀이 개발한 것도 결과에 영향을 미쳤습니다. 두 소프트웨어가 계정과 포인트를 공유하는 구조라, 연동 규격을 협의하는 데 드는 시간이 줄었습니다. 현장에서 문제가 생겼을 때도 앱과 장비 중 어느 쪽 문제인지 양쪽을 함께 보고 판단할 수 있었습니다.

1년간의 유지보수를 계약에 포함한 점도 서비스 지속에 기여했습니다. 출시 직후가 아니라 운영이 자리 잡는 기간 동안 같은 팀이 대응했기 때문에, 초기 설계의 의도를 유지하면서 개선을 반영할 수 있었습니다.

2025년 4월부터 2026년 4월까지 개발과 유지보수를 연속으로 담당하며, 운영 중 나온 요구사항과 OS 업데이트를 계속 반영했습니다.

5. 기술 구성

Mobile

React Native와 Expo 기반으로 안드로이드와 iOS를 함께 개발했습니다. TypeScript로 작성하고, UI는 Gluestack UI 컴포넌트 시스템으로 구성했습니다. 화면 이동은 React Navigation의 스택과 드로어 구조를 사용하며, 로그인 전후의 내비게이션을 분리했습니다.

기기 기능

카메라(QR·바코드 인식), 위치 권한, 국내 지도 서비스 연동을 포함합니다. 고성능 카메라 모듈을 별도로 적용해 인식률을 확보했습니다. 웹뷰와 HTML 렌더러로 공지와 안내 콘텐츠를 표시합니다.

데이터 / 검증

Axios로 API를 호출하고, 입력값은 React Hook Form과 Zod로 검증합니다. 로그인 정보와 설정은 로컬 저장소에 보관합니다. API는 인증, 배너, 쿠폰, 공지, 포인트, 수거기, 상품 등 기능별 모듈로 나눠 관리합니다.

배포 / 운영

Expo 빌드 파이프라인으로 배포하고, OTA 업데이트를 적용했습니다. 문구 수정이나 간단한 화면 변경은 스토어 심사 없이 반영됩니다. 1년간 유지보수를 담당하면서 OS 업데이트 대응과 운영 중 개선 요청을 이 경로로 처리했습니다.

콘텐츠 렌더링

공지와 안내는 서버에서 HTML로 내려받아 앱에서 렌더링합니다. 서식과 이미지를 포함할 수 있어 운영자가 별도 도구 없이 콘텐츠를 만들 수 있고, 앱은 내용에 관여하지 않습니다. 일부 화면은 웹뷰로 표시해, 외부 페이지를 그대로 보여 줘야 하는 경우에도 앱을 벗어나지 않습니다.

기술 선택의 기준

이 앱의 성패는 현장에서 얼마나 빨리 끝나는가에 달려 있습니다. 그래서 기술 선택도 속도와 운영 유연성에 맞췄습니다. 크로스 플랫폼 프레임워크를 택한 것은 두 OS의 기능을 동시에 따라가기 위해서이고, OTA 업데이트를 넣은 것은 운영 중 변경이 잦을 것을 예상했기 때문입니다.

반대로 인식 성능처럼 사용자 경험을 직접 좌우하는 부분은 기본 제공 기능에 의존하지 않고 전용 모듈을 붙였습니다. 전체를 단순하게 가져가되, 체감에 영향을 주는 지점에는 비용을 들이는 방식입니다.

앱 구조

화면은 기능 단위로 나누고, 공용 컴포넌트를 분리했습니다. 다이얼로그와 드로어 메뉴, 포인트 표시처럼 여러 화면에서 반복되는 요소는 공용으로 두고, 화면별 로직은 각자 관리합니다. 화면 수가 많은 앱이라 공용 요소를 먼저 정리해 두지 않으면 같은 UI가 여러 벌로 갈라집니다.

API 호출도 기능별 모듈로 나눴습니다. 인증, 포인트, 수거기, 공지, 배너, 쿠폰, 상품이 각각의 모듈이며, 공통 설정은 한 곳에서 관리합니다. 서버 주소나 헤더 정책이 바뀌어도 한 파일만 고치면 됩니다.

구현하면서 다룬 문제

권한 요청 시점. 위치와 카메라 권한을 앱 실행 직후에 한꺼번에 물으면 거부율이 올라갑니다. 해당 기능을 쓰는 화면에서 요청하고, 왜 필요한지 먼저 설명하도록 순서를 조정했습니다.

인식 실패. 수거기 앞의 조명과 각도는 통제할 수 없습니다. QR 표시와 카메라 인식 두 경로를 모두 제공해, 한쪽이 안 되면 다른 쪽으로 넘어갈 수 있게 했습니다.

콘텐츠 변경 주기. 운영 문구와 이벤트는 자주 바뀌는데 앱 배포는 느립니다. 바뀔 만한 콘텐츠를 서버에서 내려받는 구조로 옮겨, 배포 주기와 운영 주기를 분리했습니다.

포인트 신뢰성. 포인트는 사용자가 가장 민감하게 보는 값입니다. 적립·사용 내역을 항상 조회할 수 있게 하고, 잔액과 내역이 어긋나지 않도록 화면 진입 시점에 갱신합니다.

중복 가입. 포인트에 실제 가치가 있으면 계정을 여러 개 만들려는 시도가 생깁니다. 본인 인증을 가입 흐름에 넣되, 인증 없이도 기본 기능은 쓸 수 있게 단계를 나눠 진입 장벽과 악용 방지 사이를 조정했습니다.

OS 정책 변경. 1년 동안 두 OS의 권한 정책과 빌드 요구사항이 여러 번 바뀝니다. 크로스 플랫폼 프레임워크를 쓰더라도 이 대응은 피할 수 없어, 유지보수 기간 동안 정기적으로 처리했습니다.

1년간의 유지보수. 개발 종료 후에도 OS 업데이트와 정책 변경은 계속됩니다. 유지보수 기간을 계약에 포함해, 릴리스 이후에도 같은 팀이 대응했습니다.

6. 프로젝트 정보

항목	내용
사업명	제로살롱 앱 (플라스틱 → 포인트) 개발
담당 범위	앱 개발 및 유지보수 1년
적용 기술	React Native, Expo, TypeScript, Gluestack UI, 네이버 지도, OTA 업데이트