식재료 관리 앱 구현방안 고민

 

지금 상황 

 

식재료 관리 웹앱 및 반응형 모바일 PWA 앱을 만드려고 계획중이다. 

실제 본인이 쓰고싶어서 만들고 있는 것이다 보니 

사용성에 많이 고민을 하게 된다. 

 

 

관리를 위해

식재료를 추가하는 기능을 만드려 하는데, 

여기서 문제점 

 

아무리 한 가정에서 식재료를 사더라도 

한번에 최소 10개이상은 살 것 같다. 

이걸 일일이 하나씩 입력하고 있으려면 

귀찮아서 식재료 관리하려다 포기할 것만 같다. 

 

구매한 식재료를 한번에 입력할 수 있는 효율적인 방법이 없을까? 

 

우선 가장 먼저 생각해 볼 수 있는 것 두가지는 

 

1. 상품 바코드를 입력한다. 

2. 영수증을 인식한다. 

 

정도가 될 것이다. 

시장에서 사는 것은 불가능 하겠지만, 

그걸 위해선 직접입력을 하는 수밖에 없다. 

 

바코드를 입력하는 것이나 영수증을 인식하는 것은 생각보다 어렵지 않다. 

문제는 그것을 입력해서 실제 내 어플의 식재료에 입력이 될 수 있는가이다. 

 

카메라 실행 기능 구현 초안

 

바코드나, 영수증 OCR 방식이나 

모두 카메라로 사진을 찍어야 하는 것은 똑같기에 

카메라 기능 구현 방안을 먼저 서칭해두기로 하자. 

 

navigator.mediaDevices.getusermedia를 활용하여 

카메라 기능 구현 

https://www.youtube.com/watch?v=0iteBJ-fuRA

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

 

사진은 저장하지 않고

가능한 한 바로 api호출을 하기로 한다. 

(저장도 db에 하려면 돈이고,

유저의 컴퓨터에 저장되는 것은 

유저입장에선 귀찮게 느껴질 것 같다.)

 

 

1. 상품 바코드를 입력하는 방법

 

웹앱일 때는 컴퓨터의 내장 카메라로 인식해야 한다. 

보통 내장 카메라는 사용자의 얼굴을 바라보고 있는데 

그걸 찍으려면 내 얼굴 쪽에 바코드를 갖다 대고 

입력이 될 때까지 위치를 조정해야 할 것이다. 

 

과연 누가 할까? 하는 생각도 든다.

(나부터 번거로워서 안할것도 같다. 

하지만 이걸 인식시키고 나면 api호출하여 

해당 상품의 상품명, 중량, 유통기한, 구매금액이 

잘 응답이 오게 된다. 

 

바코드 하나만 입력하게 되면 사용자가 입력하기 위해 조작할 것이 많이 없단 뜻이다.

 

2. 바코드 구현 방향 초안 정리

 

촬영한 사진에서 바코드 인식 라이브러리 활용 

라이브러리 각 장단점 서치 필요

- use-scan-detection

- react-zxing 

 

그러나 걸림돌이 있었으니 

바코드 번호를 인식해서 상품명과 가격 등의 응답값을 주는 API를 활용해야 하는데 

해당 API는 2018년부터 무료 서비스가 중지되고 

사업자와 제휴를 맺어야 제공해주는 API 유료서비스가 되어 버렸다. 

 

아예 사업자가 없다면 사용하지 못하고, 

2018년까지면 정확도가 떨어지고 

안쓰느니만 못할 수 있다. 

 

안될 확률이 높겠다. 

 

 

 

 

3. OCR

 

tesserct 와 MLKit를 테스트하여 비교분석 해놓은 블로그 글이 있다. 

대신 해주신 것에 대해 감사... 

[Swift iOS] Google ML Kit 이용하여 OCR 한글 인식 테스트

 

이 글에서는 tesserct는 한글 인식률이 떨어져 결국 

MLKit를 사용했다는 결론이었다. 

 

 

다른 종류들도 있었다. 

대표적인 것이 naver CLOVA

 

OCR 찾아 삼만리

 

 

naver CLOVA에서는 

영수증 인식 서비스도 있었는데, 

항목별로 분류해주어, 

가격, 항목, 상품명 등을 잘 분류해 응답값으로 보내주고 있었다. 

 

또한 굴곡형태 이미지 보정해 주고 문서의 포맷을 읽어 

구조화된 형태로 문자를 추출해준다고 한다. 

 

 

 

 

가장 큰 단점은 가격.

지금 나에게 딱 맞는 API이므로 다른 대안이 없다면 이걸 활용해보기로 한다. 

 

가격은 Document OCR기능으로 300건 이하는 무료, 초과 건수당 100원. 

생각보다(?) 저렴(?)하다

아마 구현할때 반이상은 쓰지 않을까 싶기는 하지만...

사용자 경험을 중점적으로 고려해 본다면 

프로젝트에 CLOVA를 쓸 확률이 거의 높은 편이다.