UpBox Cloud
Upbox Cloud는 무슨 문제를 해결하고 있는가
폐기물 처리 시장의
'정보 비대칭성'과 '불투명성'
- 전통적인 수거 방식에서는 배출 기업이 폐기물의 정확한 중량, 운반 차량, 최종 처리 장소, 재활용 여부를 확인하기 어렵습니다.
- 수거 업체의 종이 장부나 구두 보고에 의존하여 데이터 조작이나 오입력 가능성이 존재합니다.
- 이러한 불투명성은 무단 투기나 부적절한 처리가 발생할 수 있는 토양이 됩니다.
비효율적인 행정 비용과
법적 리스크
- 한국환경공단 '올바로 시스템'에 신고해야 하지만, 수기 데이터를 다시 입력하는 과정에서 행정적 피로도와 오류가 발생합니다.
- 단순 입력 실수는 기업에 과태료 리스크를 부과하는 등 비효율적인 사회적 비용을 초래합니다.
선형 경제(Linear Economy)에서
순환 경제(Circular Economy)로의 체제 전환
폐기물의 배출부터 수거, 운반, 그리고 최종 자원화에 이르는
전 과정을 통합 관리하는 서비스형 소프트웨어(SaaS) 기반의 플랫폼
초기 음식물류 폐기물 수거에서 시작한 리코는 현재
플라스틱, 종이, 캔 등 사업장에서 발생하는 다양한 폐기물 전반으로 사업 영역을 확장했습니다.
사용 기술
인원 구성 (Growth)
역할 및 기여
리코에 입사한 후 바로 맡아서 진행하게 된 프로젝트입니다. 프론트엔드 개발 1명으로 시작해, 현재 두명이 함께 개발하고 있습니다. 직급의 차이는 없지만 주도적으로 프론트엔드 파트를 리드하고 있습니다. 업무 할당, 일정 관리, 우선순위 관리, 메인 전략 과제에 대한 기획과 디자인 소통 주도 등 업무 프로세스 전반적으로 소통의 창구 역할을 합니다.
애자일 방법론을 기반으로 프로젝트를 진행했습니다. 지라, 데이터독을 도입 및 사용하면서 기능과 사용법을 주도적으로 학습하고 가이드합니다. 가장 오랜 기간 개발에 참여한 인원으로서 기능 설명, 기획 검토, 디자인 검토, 에러 발생 시 추적 및 대응을 해왔습니다.
🛠️ 1.0 초기 설계와 기반 구축
프론트엔드 파트의 초반 설계부터 기반을 다졌습니다.
프로젝트 구조
(One Codebase)
운영/관리
수거/차량
매장/일정
- 3개 앱 구조 (One Codebase)
업박스는 사용자에 따라 3개 앱(어드민, 드라이버, 커스터머)으로 구분됩니다. 하나의 프로젝트와 빌드 결과물로 3개 앱을 동시에 제공하며, 공통 디자인 시스템을 기반으로 설계된 컴포넌트와 톤앤 매너로 제작되었습니다.
- Vue 3 & Nuxt.js 선택 이유
초기 개발 당시 Vue 2에서 3로의 과도기였으나, Composition API의 재사용성과 TypeScript 지원의 이점을 고려하여 과감하게 Vue 3를 도입했습니다. SEO와 초기 로딩 속도, 그리고 파일 기반 라우팅의 생산성을 위해 Nuxt.js를 프레임워크로 채택하여 개발 속도를 가속화했습니다.
- 메뉴 및 Bread Crumb 구조
내부 사용자가 사용하는 어드민 앱은 라우트 경로를 인식하여 선택된 메뉴와 BreadCrumb를 자동으로 표시할 수 있도록 구성하여 사용 편의성을 높였습니다.
- 웹뷰 및 하이브리드 앱
메인 기능은 웹으로 제공하되, 네이티브로 필요한 기능을 위해 웹뷰로 래핑하여 모바일 어플리케이션을 제공합니다. 모바일 앱 전문 인력이 부재한 상황에서 효율적인 관리를 위해 안드로이드 앱을 직접 개발하고 유지보수하였습니다. Build Variant를 구분하여 드라이버와 커스터머 앱을 분리 빌드하도록 구현했습니다.
공통 기능 설계 및 컴포넌트
- 폼 데이터 유효성 검증 로직
데이터 입력 조건이 많은 특성을 고려해, 자체 검증 시스템을 구축하여 치밀한 유효성 검증과 상세한 피드백을 사용자에게 제공합니다.
- Popup & Toast 기능
개발자가 가장 간단한 방법으로 사용할 수 있도록 Popup과 Toast 시스템을 직관적으로 구현하여 생산성을 높였습니다.
- 데이터 테이블 구현
필드가 많은 데이터를 효율적으로 표현하기 위해 조회 항목 조정, 순서/너비 변경 등 커스텀 기능을 모아 직관적인 테이블 UI를 구성했습니다.
- 권한 체계
프론트엔드에서 사용자 권한을 관리하고, 권한별로 UI 노출 및 API 동작을 제어하는 로직을 구현했습니다.
🚀 2.0 업그레이드 및 프로세스 개선
운영 단계에서 발생한 문제점을 해결하고, 시스템을 고도화했습니다.
- CI/CD 개선 (Github Actions)
초기 단순 빌드/배포 방식에서 발생하는 실패 및 지연 문제를 해결하기 위해 CI와 CD를 분리했습니다. Github Release를 자동 생성하여 버전 관리를 체계화하고, 원하는 시점에 정확히 배포 및 롤백이 가능하도록 구성했습니다. 또한 앱별/파일서버 분리를 통해 배포 영향도를 최소화했습니다.
- DTO 와 모델 구조 정립
같은 스키마를 공유하는 다양한 형태의 DTO(리스트, 상세 등)를 하나의 프론트엔드 모델에서 관리하여, 상호 변환 및 브릿지 역할을 수행하도록 구조화했습니다.
- 모바일 푸시 (Android Room)
서버에 푸시 데이터를 저장하지 않는 구조적 한계를 극복하기 위해, 안드로이드 Room DB를 활용했습니다. 백그라운드 수신 시 Room에 저장하고, 앱 실행 시 웹뷰로 전달하여 데이터 유실 없는 푸시 알림을 구현했습니다.
- 웹뷰 캐시 개선 & 강제 업데이트
배포 후에도 구버전 캐시가 남아 발생하는 오류를 해결하기 위해, CI 과정에서 버전 정보를 S3에 업로드하고 클라이언트가 이를 체크하여 강제 업데이트를 수행하도록 로직을 구현했습니다.
- TailwindCSS 도입
파편화된 CSS와 단일 속성 클래스의 난립을 해결하기 위해 TailwindCSS를 도입했습니다. Typography, Spacing, Color 등 디자인 시스템을 Tailwind 체계에 통합하여 일관성 있고 생산성 높은 스타일링 환경을 구축했습니다.
- DataDog & ESLint
DataDog RUM/Analytics로 사용자 행동을 측정하여 기획/디자인 의사결정의 근거로 활용했습니다. 또한 팀만의 ESLint 규칙(defineModel 사용 등)을 추가하여 휴먼 에러를 방지하고 코드 품질을 높였습니다.
- i18n 도입
용어 통일과 글로벌 확장을 위해 i18n을 도입했습니다. 이를 기반으로 최근 인도네시아어 앱 개발 시간을 획기적으로 단축하는 성과를 거두었습니다.
💼 전략 과제 및 비즈니스 문제 해결
폐기물 수집운반 서비스 관점에서 비즈니스 과제를 팀과 함께 해결해왔습니다.
기사님의 수거 일정과 동선을 최적화하고 시각화하는 지도를 구현하여, 적법한 수거 처리를 안내했습니다.
폐기물 처리 신고/허가 정보를 데이터화하고, 올바로 시스템 등록 과정을 자동화하여 고객의 행정 업무를 줄였습니다.
업박스 데이터와 전자계약 서비스를 연동하여, 계약 생성부터 승인까지 원스톱 시스템을 구현했습니다.
수거 과정의 GPS 데이터를 수집하여 동선을 파악하고, 수거 스케줄의 적법성을 사용자에게 피드백했습니다.
🤝 협업 및 리딩
- 프론트엔드 파트 리드: 1인 개발로 시작해 현재 2인 체제로 확장되는 과정에서 주도적으로 파트를 리드했습니다. 업무 할당, 일정 관리, 그리고 타 직군과의 소통 창구 역할을 수행합니다.
- 기획/디자인 제안: 기사님의 연령층을 고려하여 복잡한 UI 대신 단순하고 직렬적인 UI를 제안 및 채택했습니다. 확인이 빠른 프론트엔드 단에서의 스타일링(Font-weight 등) 조정을 제안하여 의사결정 속도를 높였습니다.
- 프로세스 최적화: 복잡한 입출금 정산 로직 대신 환불 프로세스를 분리하는 아이디어를 제시하여 시스템의 복잡도를 낮추고 관리를 용이하게 만들었습니다.