물류 태그 트래킹 어플리케이션

2025. 7. 23.

물류 태그의 위치와 상태를 실시간으로 확인할 수 있는 하이브리드 앱을 의뢰받아 개발했습니다.

클라이언트가 자체 백엔드를 제공했고, 우리는 프론트엔드 개발을 맡아 빠른 납기일 내에 프로젝트를 성공적으로 완료했습니다.

디자인

클라이언트의 요구사항 중 하나는 다양한 납품사별 커스터마이징이 용이하면서도 호불호가 적은 디자인이었습니다.

이를 위해 MUI(Material-UI)를 기반으로 설계하여 일관된 사용자 경험을 제공하고, 유지보수가 편리한 구조를 마련했습니다.

디자인 단계에서는 MUI의 공식 Figma 라이브러리를 활용해 프로토타입을 신속하게 제작하고, 검토와 수정이 빠르게 이뤄질 수 있도록 최적화했습니다. 이를 통해 프로젝트의 초기 설계 단계부터 개발까지의 리드타임을 단축하며, 품질 높은 결과물을 제공했습니다.

하이브리드 앱

본 프로젝트는 PC, 모바일 웹, 모바일 앱 환경 모두를 지원해야 하는 요구사항을 충족하기 위해 CapacitorJS 기반의 하이브리드 앱으로 개발되었습니다.

일반적인 웹뷰 방식의 하이브리드 앱이 가지는 단점을 보완하여, 네이티브 앱과 유사한 스택 기반 라우팅 구조를 적용함으로써 사용자가 각 화면 간의 흐름을 쉽게 파악하고 몰입할 수 있도록 구현했습니다. 이를 통해 웹과 앱 환경을 일관성 있게 유지하면서도, 각 플랫폼에 최적화된 사용자 경험을 제공합니다.

도면 내 구역 설정 기능

프로젝트의 핵심 기능 중 하나였던 ‘도면 내 구역 설정’은 높은 난이도의 기능이었습니다.

모바일에서는 도면을 터치 및 드래그하여 영역을 지정할 수 있도록 하고, PC 환경에서는 클릭 인터랙션으로 쉽게 설정할 수 있도록 설계했습니다.

이를 위해 Konva.js를 활용하여 정교한 드로잉 기능을 구현했으며, 각 기기 환경별 UI와 동작을 차별화하여 최적화된 사용성을 제공했습니다.

빠른 피드백 환경 제공

프로젝트 진행 과정에서 고객이 개발 현황을 실시간으로 확인하고 피드백을 제공할 수 있도록 미리보기 환경을 운영했습니다.

주요 개발 단계마다 Preview URL을 제공해 클라이언트가 중간 산출물을 직접 검토할 수 있도록 했고, 이를 통해 피드백 주기를 단축하고 의사결정의 신속성을 높였습니다.

또한 앱의 경우에는 Firebase App Distribution을 활용해 기능 업데이트 시 내부 테스터들에게 최신 빌드가 자동 배포되도록 시스템화하여, 품질 관리와 피드백 수집이 원활히 이뤄지도록 지원했습니다.

맞춤형 하이브리드 앱이 필요하시다면 지금 상담해 보세요.

저희는 다양한 환경과 까다로운 요구사항에도 유연하게 대응하며, 빠르고 안정적인 서비스를 제공합니다. 프로젝트에 대해 상담하고 싶으시다면 지금 문의해 주세요.