React Native) 바코드 스캐너 라이브러리를 찾아서 1편

현 직장의 개발된 어플리케이션의 가장 중요한 부분이라고 하면... 난 바코드 스캐너라고 생각한다.

 

expo팀의 react-native-barcode-expo 바코드 스캐너부터 시작해서

테슬라의 react-native-camera-kit의 스캐너

무료 라이브러리중에서 가장 괜찮았던 rodgomesc의 vision-camera-code-scanner,

그리고 결국 고르게 된 유료 라이브러리 Dynamsoft 의 dynamsoft-capture-vision-react-native 까지...

 

전부 다 써보고 결국 유료 라이브러리를 고르게 된 계기에 대해서 적어보고자 한다.

해당 경험은 바코드 중에서도 1D, 2D 바코드 위주의 서비스 때문에 불가피하게 유료 라이브러리를 고를 수 밖에 없었던 이야기를 포함하고 있다.

QR 이나 Data Metrix는 회사 서비스에서 잘 사용하지 않아서 해당 부분을 잘 모른다.

지난 1년 동안 홀로 개발해오면서 RN 바코드 라이브러리 중에서 우리가 흔히 보는 2D 바코드 스캔에서는 어디가 가장 좋구나 말해줄수는 있을 것 같다.

 

 

내가 생각하는 보통의 바코드(code128 방식)

 

 

 

---

react-native-barcode-expo

 

 

입사하기 전까지만 해도 바코드가 그냥 다 똑같은 검은 줄만 있는 줄 알았는데, code128, EAN, UPC, MSI 등 꽤나 다양한 형식이 존재하고, 이를 다 스캔할 수 있게 개발해달라는게 첫 요구사항이었다. (들어오자마자 그것도 신입인 나한테...?)

 

그때 선택했던게 바로 expo바코드 스캐너

https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/

BarCodeScanner

그 당시 회사의 앱이 전부 expo 로 개발되어 있기도 했고, 엑스포 핵심 모듈이 이미 깔려있었기 때문에 손 쉽게 사용할 수 있었다.

왠만한 바코드 종류들은 전부 다 지원하고, 꽤나 높은 정확도를 보여준다. 무료 개발 템플릿의 이 정도 기술 지원이면 말도 안된다고 생각한다.

만약 앱을 expo로 개발하고, 바코드 스캐너를 적용시키고 싶다면 꼭 사용하길 바란다.

 

그러나 이 바코드 스캐너를 얼마 지나지 않아 해당 라이브러리를 사용하지 않게된다.

그 이유는 바로 expo의 확장성 때문이다.

회사에서 요구하는 기능 개발중에 라이브러리 사용이 아니면 도저히 구현할 수 없는 몇가지 기능들이 있었는데

대표적으로 달력(단순한 달력 수준이 아니고 라이브러리 아니고서야 도저히 그 기능들을 버그 없이 개발 해 줄 수 없는...)

뭐 여러 기능 및 동작이 많은 모달, 지도 등.. 더 이상 expo 환경에서는 개발 할 수 없는 수준에 도달했기 때문이다.

expo는 본인들 지원하는 라이브러리 아니면 다른 라이브러리를 가져다가 쓰기 너무너무 어렵다..

 

안그래도 상태관리 라이브러리도 하나도 안쓰고 레거시 코드 양이 너무 방대했기 때문에 과감하게 동일한 앱을 신규 개발해야 겠다는 판단을 하게된다.

엑스포 바코드 스캐너 말도안되는 성능을 가졌지만, 더 이상 그 환경을 사용하지 않게 되면서 아쉽게도 버리게 되었다.

(나중에 회사 내 한 개발자가 이 모듈을 뜯어와 바코드 스캔 기능을 사용하겠다고 3개월이나 억지부렸지만, 이는 나중에 설명해보겠다.)

 

 

 

 

---

React-Native-Camera-Kit

그래서 새 환경에서 적용하게 된 새로운 바코드 스캐너 라이브러리는 바로 테슬라의 react-native-camera-kit이다.

RN 환경에서 바코드 스캐너는 QR 스캐너를 의미하는 경우가 많아서 상당히 찾기 어려웠다. 한참 고민하고 찾은 라이브러리!

 

https://github.com/teslamotors/react-native-camera-kit

GitHub - teslamotors/react-native-camera-kit: A high performance, easy to use, rock solid camera library for React Native apps.

문서도 상당히 잘 나와있다. barcode 쳐보면 확인해볼 수 있다.

 

근데 해당 라이브러리를 도입후 진짜 해결할 수 없는 문제에 봉착하게 되는데...

그건 바로 인식률이 7~80% 를 오락가락 한다는 것...

 

무료 라이브러리에 성능까지 바라면 욕심이긴 하지만... 이전에 사용했던 엑스포 바코드 스캐너에 비하면 너무 높은 오인식률을 보였다.

가장 치명적인건 오인식도 패턴없이 마구잡이로 인식한다는 것이다. (엑스포 바코드도 오인식 할 때 패턴 없이 발생한다.)

 

예를 들어 ABC1234 라는 바코드를 인식 시키는데,

이번에는 BBA{ 라고 인식을 했다가, AEQ 이렇게 인식을 하지않나... 오인식의 패턴이 전혀 없다는게 가장 치명적이었다.

물론 엑스포 바코드 스캐너도 오인식의 패턴이 없었지만, 인식률이 매우 높았기 때문에 유저들의 불만이 별로 없었다.(정확도 약 98.0 ~ 99%)

근데 해당 라이브러리는... 너무 안좋아서...

결국 몇 백명의 유저의 분노로 나는 매일 14시간씩 일하게 되었다... ㅠㅠ 하필 다른 앱개발자도 없어서 모든 짐을 짊어지고 가야했기에 매일같이 밤새도록 눈물 흘리면서 최대한 다른 라이브러리를 찾고 노력했다.

 

그러다 괜찮은 바코드 스캐너 라이브러리를 하나 더 찾게 되는데, 그것이 바로 react-native-vision-camera 라이브러리를 한번 더 가공한 vision-camera-code-scanner라는 라이브러리었다.

 

vision-camera-code-scanner 라이브러리에 대해서는 다음편에 이어서 쓰겠다.

해당 라이브러리는 RN Cli 환경에서 고를 수 있는 그나마 가장 괜찮은 라이브러리라고 생각한다!