"이 버튼 왜 안 눌려요?" 물류 현장의 목소리로 PDA 시스템 완성하기

Context

물류센터의 PDA 단말기는 저해상도, 낮은 처리 속도, 제한된 메모리로 인해 복잡한 UI 실행이 어려웠다. 브라우저 툴바가 화면의 10% 이상을 차지했고, 장갑 낀 손으로 작은 버튼을 정확히 누르기 어려웠으며, 키패드 다음(→|) 버튼이 의도한 대로 동작하지 않아 현장 작업 효율이 저해되었다. 네이티브 앱 개발을 위한 개발 리소스와 일정이 부족한 상황이었다.

Technical Solution

• 웹 기술 기반 시스템 도입: 네이티브 앱 대신 웹 스택으로 WMS 구현하여 유지보수 용이성과 개발 생산성 확보
• PDA 스캐너 연동 구현: 스캔 결과를 키보드 입력으로 처리하고, 포커스 관리 로직과 keydown 이벤트 리스너를 활용해 앱 전반에서 즉시 스캔 기능 활성화
• PDA 스캐너 설정 변경: 일부 기기에서 누락되던 Enter 입력 문제를 기기 설정 변경으로 해결 (스캔 완료 시 항상 엔터 입력 송출)
• PWA 도입: Vite 번들러에서 VitePWA 플러그인 설정, manifest.json 파일 작성(앱명, 아이콘 192x192/512x512, display: standalone), 홈 화면 설치 유도로 전체화면 모드(display: 'standalone') 활성화
• 키패드 다중 입력 제어: 특정 input에 포커스가 있을 때 다른 input을 disabled 처리하여 PDA 키패드의 다음(→|) 버튼을 submit으로 작동

Impact

• 화면 활용도 10% 개선: PWA 전체화면 모드로 기존 모바일 웹의 브라우저 상·하단 UI(약 10%) 영역을 콘텐츠 표시 영역으로 전환
• 작업 시간 25% 이상 단축: 연속 로케이션 조회 시 초기화 프로세스 단계 제외 가능
• 현장 불편 피드백 제거: "PDA 사용 시 불편한 부분" 관련 피드백 완전 해소

Key Takeaway

현장 사용자의 직접적인 피드백을 수집하고 신속하게 반영하는 것이 기술적 완성도보다 중요하며, 제약된 환경에서 PWA와 같은 현실적 솔루션을 선택하여 브라우저 UI 제약을 극복하고 작업 효율을 높일 수 있다.