올리브영, PWA와 웹 기술로 물류센터 WMS 사용자 경험(UX) 혁신

핵심 기술: 저해상도 PDA 환경에서 네이티브 앱 개발 리소스 및 일정 제약을 극복하기 위해 PWA(Progressive Web App)를 도입하고, 웹 기술을 활용하여 물류센터 WMS의 사용자 경험(UX)을 혁신한 사례를 다룹니다.

기술적 세부사항:
* 문제 정의: 낡은 PDA의 낮은 해상도, 브라우저 툴바의 화면 점유, 키패드 반응 없음, 작은 버튼 등 현장 작업자의 불편함으로 인한 물류 속도 및 정확성 저하.
* 기술 스택 선정: 네이티브 앱 대신 웹 기술(PWA)을 선택한 이유 (개발 리소스/일정 제약, 유지보수 용이성, 개발 생산성).
* 하드웨어 제약: PDA의 낮은 해상도, 처리 속도, 메모리 용량, 장갑 착용 등 사용 환경의 특성.
* 바코드 스캐너 연동: PDA 스캐너 입력값을 키보드 입력처럼 처리하고, 특정 input에 포커스를 유지하며 스캔된 문자열을 즉시 처리하는 로직 구현.
* 스캔 후 Enter 입력 누락 문제 해결 (PDA 설정 변경).
* 포커스 관리 로직 고도화 (전역 keydown 이벤트 리스너, 유기적인 input 초기화).
* PWA 도입: 브라우저 툴바로 인한 화면 제약 해소 및 전체 화면 모드 활용.
* Manifest 파일 (manifest.json) 및 Vite 설정을 통한 PWA 설정.
* 홈 화면 아이콘 추가 및 앱 설치 유도.
* 로딩 속도 개선, 데이터 캐싱, 푸시 알림 등 기능 활용.
* 키패드 버튼 개선: 여러 input이 있는 화면에서 PDA 키패드의 '다음(→|)' 버튼이 submit으로 작동하지 않는 문제 해결.
* 특정 input에 포커스 시 다른 input 비활성화 처리하여 '다음' 버튼을 submit으로 강제 작동.

개발 임팩트:
* PWA 도입으로 화면 활용도 극대화 및 체감 성능 향상.
* 홈 화면 아이콘 추가로 작업 시작 시간 단축.
* 키패드 버튼 작동 로직 개선으로 현장 작업자의 불편함 해소 및 작업 효율 증대 (25% 이상 작업 시간 단축).
* 현장 피드백을 통해 시스템 사용성 대폭 개선.

커뮤니티 반응:
* 글쓴이(무계획)가 개발팀에게 공유하는 글이며, 비슷한 고민을 가진 개발팀에게 도움이 될 것이라 기대하며 공유함.