올리브영 물류 WMS PDA UX 개선: PWA 및 웹 기술 활용 여정

물류 현장 PDA 환경의 기술적 제약 및 초기 도전 과제

• 하드웨어 한계: 저해상도, 낮은 처리 속도, 제한된 메모리 용량의 PDA 단말기로 복잡한 UI 및 무거운 애플리케이션 실행에 어려움 발생.
• 사용성 특성: 장갑 착용 및 한 손 작업 환경으로 인해 작은 버튼과 복잡한 인터페이스 사용이 비효율적이며, 빠른 작업 처리가 요구됨.
• 개발 리소스 제약: 네이티브 앱 개발 및 운영 리소스와 촉박한 일정으로 인해 웹 기반 시스템이 현실적인 대안으로 선택됨.
• 스캐너 연동 딜레마: 웹 환경에서 PDA 스캐너의 하드웨어 직접 제어 및 이벤트 감지, 입력 필드 포커스 제어의 어려움이 초기 과제.

웹 기반 스캐너 연동 및 PWA 도입을 통한 사용자 경험 극대화

• 스캐너 데이터 처리: PDA 스캐너의 결과값을 키보드 입력처럼 처리하기 위해 특정 input 요소에 포커스를 유지하고, 스캔된 문자열을 직접 처리하는 로직 구현.
• 엔터 키 누락 해결: 일부 기기에서 스캔 후 엔터(Enter) 입력 누락 문제 발생, PDA 단말기 설정 변경으로 스캔 완료 시 항상 엔터 입력이 전송되도록 조치.
• PWA (Progressive Web App) 적용: 모바일 브라우저 툴바가 화면을 가리는 문제 해결을 위해 PWA를 도입하여 display: 'standalone' 모드로 전체 화면 활용도 극대화.
• 접근성 개선: 홈 화면 앱 아이콘 추가로 URL 입력 없이 시스템 즉시 진입 가능하게 하여 작업 시작 시간 단축.

현장 피드백 기반 키패드 및 워크플로우 효율 개선

• 키패드 '다음' 버튼 이슈: 다중 input 환경에서 키패드의 다음(→|) 버튼이 다음 탭 이동으로 작동하는 문제 발생, 실사용자가 원하는 submit 기능 미동작.
• 이슈 해결 로직: 특정 input에 포커스 시 다른 input들을 disabled 처리하여 키패드의 다음 버튼이 submit으로 작동하도록 구현.
• 운영 효율성 증대: 개선 작업 이후 연속된 로케이션 조회 프로세스에서 초기화 단계 제외로 25% 이상의 작업 시간 단축 및 현장 사용자 만족도 향상.