앱인벤터 OCR(광학문자판독기) 앱 만들기
안녕하세요. 이지이지입니다.
이번 포스팅에서는앱인벤터로 OCR 앱(앱이라고까지 하기엔 뭣하지만) 구현 방법을 설명드리겠습니다.
cf.) 디자인은 전혀 고려하지 않았습니다.
앱인벤터 자체에는 OCR 기능이 없어 타사에서 제공하는 API를 사용해야 하는데,
들어가기전 가장 유명한 몇 가지 OCR API를 비교해보도록 하겠습니다.
1. Google Vision API
- 가격: 부분 유료(월 1,000건 이하: 무료 / 월 1,001~5,000,000건: 1,000건당 $1.5 / 월 5,000,001건 이상: 1,000건당 $0.6)
- 핸드폰의 내장 이미지 또는 웹상의 이미지 사용 가능
- 이미지 파일을 base64로 encoding해야 함.
- 초기 설정이 어렵지는 않으나 신용카드 등을 등록해야 하는 번거로움이 있음.
2. 네이버 CLOVA OCR
- 가격: 부분 유료(월 100건 이하: 무료 / 월 100건 초과시: 건당 3원)
- 이용가능하도록 등록까지 복잡한 과정이 있어 시도해보지 않음.
3. 카카오 VISION API
- 가격: 무료
- 핸드폰의 내장 이미지만 사용 가능, 이미지의 최대 용량 2MB로 제한
- 이미지 파일을 binary로 업로드 해야하는데, 방법을 찾지 못함.
제가 아직 실력이 부족한 것인지 위에서 보는 것 처럼 네이버와 카카오는 이용 자체를 못해봤기 때문에,
초기 설정이 조금 번거럽더라도 Google Vision API를 사용하게 되었습니다.
본 예제 앱에서는 핸드폰의 카메라로 촬영 또는 이미 핸드폰에 저장된 이미지만 활용하도록 되어 있습니다.
| Google Vision API 초기 설정하기 |
먼저 Google Vision API를 사용하기 위한 설정을 해보도록 하겠습니다.
좀 긴 과정을 거쳐야 하지만 어렵지는 않습니다.
신용카드가 필요합니다. (자동가입을 방지하기 위한 것, 실제 결제 되지는 않음.)
1. 다음 링크를 통해 Google Cloud Platform으로 이동한 후, 구글 계정으로 로그인합니다.
클라우드 컴퓨팅 서비스 | Google Cloud
데이터 관리, 하이브리드 및 멀티 클라우드, AI와 머신러닝 등 Google의 클라우드 컴퓨팅 서비스로 비즈니스 당면 과제를 해결하세요.
cloud.google.com
2. 화면 상단 우측에서 [콘솔]을 선택합니다.
3. 상단에서 [프로젝트 선택]을 클릭하고 팝업창에서 [새 프로젝트]를 선택합니다.
4. 적당한 프로젝트 이름을 입력하고, [만들기]를 클릭합니다.
5. 메뉴(줄 세개 아이콘)를 클릭 후, [API 및 서비스]를 선택합니다.
6. API를 사용할 프로젝트를 선택합니다. 위에서 만들어 둔 프로젝트를 선택합니다.
7. [API 및 서비스 사용 설정]을 클릭합니다.
8. 검색창에 "vision api"를 입력합니다.
9. [Cloud Vision API]를 선택합니다.
10. [사용]을 클릭합니다.
11. 왼쪽 메뉴에서 [사용자 인증 정보]를 선택합니다.
12. [동의화면 구성] 또는 왼쪽 메뉴에서 [OAuth] 동의 화면을 클릭합니다.
13. User Type을 [외부]로 선택하고 [만들기]를 클릭합니다.
14. "앱 정보"와 하단의 "개발자 연락처 정보"에 별표된 부분을 입력한 후 화면 하단의 [저장 후 계속]을 선택합니다.
(앱 이름, 사용자 지원 이메일, 개발자 연락처 정보의 이메일 주소)
cf.) OAuth 동의화면은 구글 아이디를 통해 다른 앱이나 사이트를 이용할 때 필요한 것으로 OCR과 직접 관련은 없습니다.
하지만 Google Vision API를 사용하기 위해서는 API Key가 필요한데 이를 얻으려면 반드시 거쳐야 하는 과정입니다.
15. 그 다음 진행되는 [범위]와 [테스트 사용자] 부분은 따로 설정할 필요없이 하단의 [저장 후 계속]을 선택합니다.
16. 왼쪽 메뉴에서 [사용자 인증 정보] - [사용자 인증 정보 만들기] - [API키]를 차례로 선택합니다.
17. API Key가 생성되었다는 팝업창이 나타날 것입니다.
언제라도 API Key를 알아내고 싶다면 왼쪽 메뉴에서 [사용자 인증정보]를 선택하고, "키 표시"를 선택하면 됩니다.
이 API 키를 앱인벤터에서 사용할 것입니다.
18. 위쪽 우측 상단에서 [활성화]를 선택합니다.
19. "국가", "조직 또는 니즈", "서비스 약관 동의" 후 [계속] 버튼을 클릭합니다.
20. 전화번호를 입력하고 코드를 전송하여 2단계 인증을 완료합니다.
21. 3단계에 필요한 결제 프로필을 입력합니다.
아래쪽으로 보면 결제 수단에 카드 정보를 입력하도록 되어 있습니다.
맨 처음에 언급했지만 월 1,000건 까지는 무료이므로 카드 정보를 입력하여도 1,000건 이하에서는 요금이 부과되지 않습니다.
이제 Google Vision API를 사용하기 위한 준비는 모두 끝이 났습니다.
| 화면 구성 |
OCR 앱의 화면 구성입니다.
다음 소스를 내려받아 참고하시기 바랍니다.
① Image1: 카메라로 촬영한 이미지 또는 갤러리에서 선택한 이미지를 표시할 Image 컴포넌트
- height 속성: 300 pixels (절대적 값은 아님)
- width 속성: 300 pixels (절대적 값은 아님)
② btn_camera: 카메라를 실행시킬 Button 컴포넌트
③ btn_gallery: 이미지를 선택할 수 있도록 갤러리를 열어줄 Button 컴포넌트
④ btn_scan: 카메라 또는 갤러리에서 선택한 이미지를 스캔하기 위한 Button 컴포넌트
⑤ lbl_output: 광학문자인식결과를 표시할 Label 컴포넌트
⑥ CameraBase641: 카메라로 찍은 이미지를 base64로 인코딩하기 위한 확장 프로그램(Extension)
⑦ ImageBase641: 갤러리에서 선택한 이미지를 base64로 인코딩하기 위한 확장 프로그램(Extension)
⑧ Web_OCR: Google Vision API와 통신하기 위한 Web 컴포넌트
※ CameraBase641, ImageBase641 확장 프로그램은 위에서 공유한 소스파일에 포함되어 있습니다.
저작권자의 허락없이 확장 프로그램만 따로 올리지 못하였으니 필요하신 분께서는 댓글로 요청하세요.
⑨ ImagePicker1: [갤러리] 버튼을 클릭했을 때, 이미지를 선택할 수 있도록 하는 ImagePicker 컴포넌트
- visible 속성: 체크 해제
화면 구성은 여기까지 입니다. 기타 사소한 사항은 소스 파일을 열어 참고하시기 바랍니다.
| 블록 코딩 |
먼저 OCR 앱에 사용된 전체 블록입니다.
변수와 카메라 버튼을 클릭했을 때 발생하는 이벤트에 대한 설명입니다.
① 카메라로 찍은 또는 갤러리에서 선택한 이미지를 base64 형식으로 변환하여 저장할 변수입니다.
② [카메라] 버튼을 클릭했을 때,
③ 카메라로 base64형식으로 썸네일 이미지를 촬영합니다.
④ CameraBase641 확장 프로그램을 통해 사진을 찍은 후에 발생하는 이벤트입니다.
⑤ 변수 base64String에 CameraBase641을 통해 얻은 base64Data를 저장합니다.
⑥ Image1 컴포넌트의 이미지를 CameraBase641 확장 프로그램으로 찍은 이미지로 설정합니다.
다음은 갤러리 버튼을 클릭했을 때 발생하는 이벤트입니다.
① [갤러리] 버튼을 클릭했을 때
② ImagePicker1 컴포넌트를 열어 이미지를 선택할 수 있도록 합니다.
③ ImagePicker1 컴포넌트로 이미지를 선택한 후 발생하는 이벤트입니다.
④ Image1 컴포넌트의 Picture을 ImagePicker1에서 선택한 이미지로 설정합니다.
⑤ ImageBase641 확장 프로그램을 통해 Image1 컴포넌트의 이미지를 Base64형식으로 가져옵니다.
⑥ ImageBase641 확장 프로그램을 통해 base64형식의 이미지를 가져온 후 발생하는 이벤트입니다.
⑦ 변수 base64String에 ImageBase641 확장 프로그램을 통해 가져온 base64Data를 저장합니다.
마지막으로 [스캔하기] 버튼을 클릭했을 때 발생하는 이벤트입니다.
※ 정확한 이해를 위해서는 다음 Google Vision API 문서를 참고해 보는 것이 좋습니다.
이미지의 텍스트 감지 | Cloud Vision API | Google Cloud
의견 보내기 이미지의 텍스트 감지 이 API를 모바일 앱에서 사용하는 경우 Firebase 머신러닝 및 ML Kit를 사용해 보세요. 이 키트는 Cloud Vision 서비스를 사용하기 위한 네이티브 Android 및 iOS SDK와 함
cloud.google.com
① [스캔하기] 버튼을 클릭했을 때
② Web_OCR의 RequestHeaders 속성을 위의 그림과 같이 설정합니다.
- RequestHeaders 속성을 설정할 때는 리스트 안의 리스트 형태로 설정합니다.
- 리스트 안의 리스트 내용에서 첫 번째는 항목명이고 두 번째는 항목에 해당하는 값입니다.
- Google Vision API 문서를 참고하세요.
③ Web_OCR의 URL 주소를 설정합니다.
- Google Vision API 문서에 나와 있는 주소입니다.
- "여러분의 Google Vision API ~" 부분에는 여러분이 맨 처음에 준비해 두었던 API Key를 입력합니다.
④ Google Vision API에 POST 방식으로 text 부분의 정보를 전달합니다.
- Google Vision API 문서에 나와 있는 내용입니다.
- API와 데이터를 주고받을 때는 POST 방식, GET 방식 등이 있고, Parameter에 담아서 전달하는 경우, Body(요청 본문)에 실어서 전달하는 경우 등 다양한 방식이 있어 각 API 문서를 참고하여 그에 맞게 데이터를 전송해야 합니다.
- Google Vision API는 POST 방식으로, Body에 실어 데이터를 보내야 하는 경우입니다.
⑤ Google Vision API로 부터 ④에서 정보를 전달한 후, 그에 대한 응답을 받았을 때 발생하는 이벤트입니다.
⑥ 지역변수 text에 Google Vision API로 부터 받은 내용을 Dictionary 형식으로 저장합니다.
- 지역변수는 전역(global)변수와 마찬가지로 Variables블록에서 가져올 수 있습니다.
- Google Vision API는 우리에게 json 형식의 데이터를 전달합니다.
- json 형식과 어울리는 앱인벤터의 블록이 Dictionary 블록입니다.
⑦ 스캔 결과를 보여줄 레이블에 text 변수에 저장되어 있던 내용 중, 문자 정보만 표시합니다.
- Dicitonary 형태로 저장된 데이터에서 필요한 부분만 가져오는 방법과, API에 대한 전반적인 내용을 공부하고 싶으신 분은 저의 아래 예전 포스팅을 참고하시기 바랍니다.
앱인벤터 강좌 #5 API, JSON 사용방법 및 Dictionary 컴포넌트 활용하기
안녕하세요. 이지이지입니다. 이번 포스팅에서는 각종 API 사용방법과 API를 통해 데이터를 받았을 때 가장 흔히 쓰이는 데이터 형식인 JSON 다루기, 그리고 앱인벤터에서 JSON과 잘 어울리는 Dictiona
egeasy.tistory.com
이상 앱인벤터로 OCR을 구현하는 법에 대해 알아보았습니다.
궁금한 사항이 있으시면 댓글 또는 이메일로 연락주시기 바랍니다.~~~