팀 프로젝트 / 익명 물류 운영사

NP WMS Picking

창고 작업자가 PDA와 물리 스캐너로 위치·상품·수량을 확인하며 피킹을 진행하는 현장 작업 화면입니다.

2026.07 - 2026.08 · PDA Frontend 직접 구현 / Android 스캐너 입력 연동

ReactTypeScriptViteIndexedDB

사용자: 창고 현장 작업자
해결 과제: 창고 작업자는 작은 PDA에서 배정된 작업을 확인하고 위치·상품·수량·분류를 빠르게 검증해야 했습니다. 물리 스캐너 입력과 불안정한 네트워크에서도 작업이 중단되거나 같은 수량이 중복 반영되지 않는 실행 화면이 필요했습니다.
내 기여: PDA 작업 단계 UI와 Android 물리 스캐너 연동을 구현했습니다. 여러 입력 경로를 하나의 바코드 흐름으로 정리하고, IndexedDB 대기 목록과 서버 응답을 연결해 연결 끊김·재전송·충돌 상태를 화면에 반영했습니다.
결과: 작업자가 PDA 한 화면에서 배정 확인부터 위치·상품·수량·분류 스캔까지 순서대로 진행하고, 연결이 끊겨도 작업 명령을 보존해 복구 후 이어서 전송할 수 있는 피킹 흐름을 구현했습니다.

사내 코드는 비공개입니다.

User flow

서비스 이용 흐름

01
배정된 작업 확인
02
위치·상품 스캔
03
수량·분류 확인
04
연결 복구 후 전송

Contribution

나의 역할

작은 PDA에서 현재 단계와 다음 행동을 확인할 수 있도록 작업 화면을 구성했습니다.
키보드·붙여넣기·IME·WebView 이벤트를 하나의 바코드 입력 흐름으로 정규화하고, IndexedDB에 작업 명령을 보관해 재연결 시 순서대로 다시 보내도록 했습니다.
서버의 배정·버전·완료 응답을 PDA 작업 상태에 반영했습니다.

System flow

스캔부터 서버 확인까지

스캔 입력: 물리 스캐너의 키 입력을 Android에서 완성된 바코드로 모아 WebView 이벤트로 전달합니다.
작업 확인: React 화면에서 바코드가 현재 위치·상품 단계에 맞는지 검사합니다.
전송 전 보관: 작업 명령을 IndexedDB 대기 목록에 먼저 저장하고 서버로 보냅니다. 기기에 저장된 상태는 서버 수락과 구분합니다.
서버 응답 반영: 서버의 배정·버전·완료 응답에 맞춰 다음 행동이나 충돌 상태를 보여 줍니다.

Case studies

대표 기술 문제

바코드를 스캔했는데 값이 중복되거나 누락되는 문제

문제

현장 PDA의 물리 스캐너는 바코드 문자와 입력 완료 키를 빠르게 보냅니다. 한글 키보드가 켜져 있거나 입력 초점이 다른 곳에 있으면 웹 입력 이벤트가 겹쳐 같은 바코드가 두 번 처리되거나 아예 누락될 수 있었습니다.

해결

Android는 dispatchKeyEvent에서 스캐너가 보낸 문자를 완성된 바코드 하나로 모아 WebView에 전달했습니다. 웹 화면에서는 키 입력·붙여넣기·한글 입력을 같은 규칙으로 처리하고, 바코드 형식 확인과 불완전 입력 경고를 넣었습니다. Android가 장치 입력을 모으고, React 화면이 작업에 맞는 바코드인지 확인하도록 나눴습니다.

통신이 끊긴 뒤 다시 보내면 피킹 수량이 두 번 기록될 수 있음

문제

작업자가 상품 3개를 피킹했다고 입력하면 WMS 서버가 그 수량을 저장합니다. 그런데 저장은 성공했어도 PDA로 돌아오는 응답만 끊길 수 있습니다. 이때 PDA가 새 작업으로 다시 보내면 서버에는 3개를 두 번 피킹한 것처럼 기록될 위험이 있었습니다.

해결

PDA는 전송 전에 작업 내용과 고유 번호(clientEventId)를 IndexedDB의 대기 목록(outbox)에 저장합니다. 연결이 돌아오면 같은 번호로 작업을 순서대로 다시 보내고, WMS가 접수했다고 확인할 때까지 목록에서 지우지 않습니다. 서버에 저장된 작업 버전이 그사이 달라졌다면 자동 재전송을 멈추고 충돌 상태로 표시해 최신 수량을 덮어쓰지 않게 했습니다.

추가 문제 해결 · 서버 응답을 다음 행동으로 연결

Case studies

서버 상태 표시

서버 상태만 보면 다음 작업을 알기 어려움

문제

WMS 서버는 작업 배정, 위치 확인, 상품 확인, 수량 입력, 완료를 각각의 상태로 돌려줍니다. PDA 화면은 작업자가 지금 해야 할 행동 중심으로 구성돼 있어 서버 상태를 그대로 보여주면 다음에 무엇을 해야 하는지 알기 어려웠습니다.

해결

WMS 응답을 PDA의 작업 단계에 맞게 연결하고, **진행 불가(BLOCKED)·나중에 처리(DEFERRED)·버전 충돌(conflict)**을 각각 다른 화면 상태로 표시했습니다. 배정·완료 여부는 WMS 응답을 기준으로 판단했습니다. PDA의 IndexedDB에는 피킹 수량 반영처럼 서버 상태를 변경하는 전송 대기 요청을 작업 내용, clientEventId, expectedVersion과 함께 저장했습니다. 서버가 요청을 수락하면 대기 목록에서 제거하고, 응답이 유실되면 같은 ID로 재전송했습니다. 서버 상태가 이미 변경된 경우에는 자동 재전송을 중단하고 충돌 상태를 표시했습니다.