개요
직전에 블루투스 바코드 리더기를 이용해서 입출고를 처리하는 기능을 개발했습니다. 다음으로 엔지니어들이 제품을 설치하고 설치완료를 위해 핸드폰 바코드 리더기로 인식하는 기능이 필요합니다. 기존 기능이 너무 인식률이 떨어져 개선해야 했습니다.
조건
최대 효율을 내기 위해서 4가지 조건을 준수해야 했습니다.
- 모바일이 아닌 웹에서 필요한 기능이다.
- 바코드 리더기와 실제 바코드 규격이 호환되어야 한다.
- 현재 Quagga.js보다 인식률이 좋아야 한다.
- 가급적 프런트 프레임워크 없이 순수 js로 개발한다.
주로 백엔드를 공부했기 때문에, 프런트는 잘 몰라서 걱정이 많았습니다. 아무래도 기본 js 문법은 알고 있으나, 프레임워크를 활용해서 코드를 적용하거나 개발하는 것은 낯설었습니다. 처음에는 팀장님이 솔루션을 찾아보라고 하셔서 여러 가지를 보았는데, 아무리 생각해도 비용 측면에서 직접 개발이 낫다고 생각하여 오픈소스를 확인해 보기 시작했습니다.
기술 비교하기
- JavaScript Barcode Scanner
장점 : 코드가 굉장히 간단하며, 인식률이 엄청 좋다
단점 : EAN-19 규격의 바코드만 지원하며 이는 주로 남미에서 사용되는 종류이다.
(https://www.webondevices.com/javascript-barcode-scanner/)
- quaggaJS
장점 : 깃허브 Star 4.8K일만큼 유명하고 대중적인 오픈소스이다.
단점 : 마지막 업데이트가 2017년 6 월일만큼 오래된 기술이며 인식률이 좋지 않다.
(https://github.com/ericblade/quagga2#installing)
- dynamosoft
장점 : 하나의 카메라에 멀티 인식을 지원할만큼 성능이 좋다.
단점 : 무료는 30일만 가능하며, 멀티 인식은 필요 이상의 기능으로 과하다.
(https://www.dynamsoft.com/codepool/webgl-accelerate-web-barcode-decoding-speed.html)
- html5-qrcode
장점 : 최근까지도 계속 기능이 업데이트되며 바코드 인식률이 굉장히 좋다.(QR도 지원)
단점 : 최근 버전은 타입 스크립트로 만들어져 있어 공부가 필요하다.
(https://github.com/mebjas/html5-qrcode)
현존하는 수많은 바코드 리더기 오픈소스를 확인하며 조건을 고려해 4개를 추렸습니다. 각 장단점을 파악하였고, 최종적으로 현 상황에서 사용할 수 있는 기술은 html5-qrcode로 결론 내렸습니다. 현재는 바코드만 인식하지만 추후 QR을 만들 예정이 있으며 인식률이 훌륭하고 지속적인 기능 업데이트가 활발이 이루어지고 있습니다. 물론, 상황에 맞게 일부 코드를 수정하기 위해서 타입스크립트 소스코드 분석을 해야 했지만 이는 옵션으로 꼭 커스터마이징이 되지 않아도 되는 부분이었습니다.
빠르게 기능 만들고 피드백 받기
html5-qrcode.min.js가 기능을 거의 담당하고 있어서 빠르게 html을 사용해 기능을 만들고 피드백을 받았습니다.
<body>
<main>
<div id="reader"></div>
<div id="result"></div>
</main>
<script>
const scanner = new Html5QrcodeScanner( "reader", {
fps: 20,
});
scanner.render(success, error);
function success(result) {
document.getElementById('result').innerHTML = result;
scanner.clear();
document.getElementById('reader').remove();
if (window.NEXACROWEBBROWSER) {
window.NEXACROWEBBROWSER.on_fire_onusernotify(window.NEXACROWEBBROWSER, result);
}
}
function error(err) {
console.error(err);
}
</script>
</body>
훨씬 성능이 좋아졌다는 피드백과 함께, 바코드 리더기 스캐너를 시작하기 전까지 너무 많은 수동 설정이 필요하므로 간소화하라는 요청을 받았습니다. 해당 html을 실행하면 총 3가지 설정을 해야 합니다.
- 카메라 권한요청
작년 버전으로 데모 시연을 했는데, 해당 오픈소스가 업데이트됨에 따라 초기 1번만 권한을 요청하면 이후 자동으로 넘어가도록 최신 버전을 적용했습니다.
- 카메라 모드 선택 및 카메라 시작버튼
해당 오픈소스는 핸드폰뿐만 아니라 웹에서도 사용하도록 개발되었으므로 모든 카메라 리스트를 로딩하고 사용자가 1개를 선택해서 시작하도록 되어 있습니다. 따라서 카메라의 경우 전면카메라, 후면카메라로 최소 2개 이상이 리스트로 주어집니다. 사실 핸드폰은 후방 카메라만 사용하기 때문에 무조건 후방 카메라로 설정되면 됩니다. 따라서 후방 카메라 자동 선택 및 카메라 시작을 하기 위해 소스코드를 커스터마이징 해야 했습니다.
그렇지 않아도 누군가가 자동으로 후면 카메라를 기본으로 설정할 수 있는지 문의한 issue가 있습니다. Html5QrcodeScanner 라이브러리의 경우 자동으로 후면 카메라를 적용하는 기능이 없었습니다.
(https://github.com/mebjas/html5-qrcode/issues/139)
하지만 아쉽게도 답변은 아래와 같습니다.
Html5Qrcode와 달리 Html5QrcodeScanner는 모바일과 데스크탑 2개를 모두 지원하는 오픈소스이다 보니, 어느 환경에서 사용할지 몰라 정확히 판단하기 어렵다고 합니다. 따라서 어떻게 개선하면 좋을지 고민이라고 하였는데 2020년에 논의된 이후 별다른 조치가 없는 것을 보니 우선순위가 밀렸다고 생각하여 완성된 코드는 포기했습니다. 대신에 직접 코드를 수정하기로 선택했습니다.
소스코드 커스터마이징하기
- 빌드하는 방법
가장 먼저 중요한 것은 내가 수정한 코드를 빌드해서 min.js 파일로 만드는 것이었습니다. 아무리 소스코드를 수정해도 적용하지 못한다면 소용이 없습니다. Readme를 열심히 살펴보다가 아래 안내를 확인했습니다.
npm을 사용해 빌드를 하고, 그 결과 dist 폴더 안에 html5-qrcode.min.js를 만드는 방법을 알았습니다.
- 수정해야 할 소스코드 위치 찾기
타입 스크립트 소스코드는 프로젝트 계층도도 몰라서 어떻게 확인해야 하는지 힘들었지만, 화면에 보이는 단어들을 검색해서 소스코드 위치를 파악했습니다.
카메라가 1개인 경우에는 그대로, 여러 개인 경우에는 전부 option으로 만드는 부분입니다.
기존에는 모든 카메라들이 조회되도록 하였으나, 후면 카메라만 1개 리스트에 넣도록 커스터마이징 했습니다. 아이폰의 경우는 "후면 카메라", 안드로이드폰의 경우 "facing back"이라고 나왔기 때문에 "후면"과 "back" 2개의 키워드를 사용해 후면카메라가 인식되면 해당 카메라만 select opion에 넣고 나머지는 무시합니다. 카메라가 1개인 경우에는 자동으로 촬영을 시작하도록 되어 있기 때문에 단지 10줄도 안 되는 코드를 추가하여 자동화가 되도록 개선했습니다.
엔지니어의 설치완료를 어떻게 개선할지 고민을 시작해 바코드 스캔 개발을 결정했습니다. 오픈소스를 활용하고 커스터마이징 할 수 있었던 좋은 기회였습니다. 오픈소스에 감사한 마음과 나 또한 기여하고 싶다는 생각이 들었고 배경을 잘 파악해 필요한 기능을 선택하며 적절하게 수정하는 것이 중요하다는 것을 다시 한번 느꼈습니다.
'문제 해결, 기술 비교 > 실무 업무 회고' 카테고리의 다른 글
| 조직 현장 입출고 모바일 바코드리더기 연동 개발하기 (0) | 2023.07.18 |
|---|---|
| 물류 재고 관리 개선하기 (0) | 2023.01.16 |
| 기존 로그를 스프링 AOP 로 개선하기 (0) | 2023.01.11 |
| UNION을 CASE WHEN THEN으로 개선하기 (0) | 2023.01.09 |
| 할인 쿠폰 개선하기 (0) | 2022.12.28 |
