DataPlay Project - 2 : 이미지 텍스트 번역기 (1) 파파고 API & Tesseract OCR

DataPlay - 데이터 갖고 놀기 2탄 : 이미지 번역기

이번 프로젝트는 DataPlay 2탄으로 Tesseract OCR 을 이용한 이미지 번역기 사이트를 만들어 보았다. 사실 이미지를 번역해주는 기능은 핸드폰의 파파고 번역기나 구글 번역기를 이용해서 보다 쉽게 가능한 편이다. 다만 핸드폰의 이러한 기능을 사용하기 힘든 사람들에게는 결코 '쉬운' 편은 아니다.

사실 이 프로젝트 - 이미지 번역기 - 프로젝트를 시작한 계기는 이러한 기능을 사용하기 어려워하던 한 시각장애인 친구와의 대화에서 시작되었다. 한창 사회복지를 공부하고 있던 때 만났던 그 친구는 나에게 이렇게 이야기했다.

"너무나 좋고 다양하고 재미있는 것들은 많은데 그것들을 사용하는게 힘들어. 지금도 단순하게 핸드폰 카메라로 사진을 찍고, 어플을 쓰고 하는것도 힘는데 앞으로 이런 것들이 더욱 많아질거라는게 더욱 힘든거 같아"

 나는 다행히도 한쪽 눈이라도 보이는 편이었기에 그 친구의 말은 전부 이해할 수는 없었다. 다만 나만큼이나 노는 것을 좋아하고 기술을 좋아하고 알아가고 싶어하던 친구가 저런 이야기를 하는 것을 들었을때 정말 많은 것들을 생각하는 계기가 되었던 것은 분명하다.

이번에 이미지 번역기를 만드는 프로젝트를 해본 것은 그때 그 친구의 말이 떠올랐기 때문이었다. '이미지의 텍스트를 번역'이라는 기능을 모두가 접근 가능한 웹에서 jpg, png 파일로 받고 해당 이미지의 텍스트를 추출해서 바로 텍스트 영역에 넣어줌으로써 '누구나 접근해서 누구라도 사용할 수 있는 이미지 번역'을 만들어 보고 싶다라는 생각으로 만들게 된 것이 바로 이번 프로젝트이다.

 

근데 실제로 이런 사이트 있다는 것과 네이버 웨일에서 비슷한 기능을 지원한다는 것, 크롬에서 확장 프로그램을 받아서 이미지 번역을 할 수 있다는 것 등을 안 것은 이 프로젝트를 끝내고 이 글을 정리하면서이다ㅠ.ㅠ

 

심지어 네이버쪽에서는 Papago Image Translation 이라는 것을 통해서 동일한 기능을 지원한다는 것도 알았다. 다만 이쪽은 유료!

https://www.ncloud.com/product/aiService/papagoImageTranslation

NAVER CLOUD PLATFORM

 

프로젝트 설명

- Tesseract OCR 을 사용해서 이미지에서 텍스트를 추출 후 추출된 텍스트를 파파고 API 를 사용해서 번역합니다.

- 이전과 마찬가지로 Git 에 올라간 파일들 중 네이버 파파고 API 에 관한 정보를 넣어둔 - API ID 와 API secret - interface 는 올리지않았습니다. 이 부분은 해당 코드를 사용하시는 분께서 직접 interface 를 만들고 해당 정보를 넣어둔 후 구현하시거나 애초에 따로 빼지 않고 바로 넣어서 사용하시거나 어느쪽을 택해도 무방할 듯 합니다.

 

어떻게 실행될까?

1. 추출하고자하는 텍스트의 언어를 선택한다

2. 내가 추출하고자 하는 텍스트가 있는 이미지를 웹에 업로드 한다 => 파일 선택 버튼 클릭

3. 텍스트가 추출 된 후 '번역하기' 버튼을 눌러 텍스트를 번역한다.

4. 번역된 텍스트는 오른쪽 창에 똭!! 하고 출력된다

 

배운것 && 아쉬운 점

- 이미지 인식을 위해 사용되는 기술인 OCR 기술에 대해서 공부할 수 있었다. 사실 이러한 부분에서 전혀 관심도 없었고, 이해도 못하고 있었는데 이번 기회를 통해서 조금이지만 공부해보았고, 스캔이나 카메라 등에서 의외로 많이 사용되는 기술이라는 것을 보고 다시 한 번 놀랐다.

- 이전 프로젝트는 검색 API 부분을 다른 분의 코드를 많이 참고해서 만들었는데 이번에는 참고하는 것보다는 내가 직접 짜고 실행되는지 확인해보면서 만들어서 그런지 조금 더 애착도 가고 이전보다도 공부가 많이 되었던 것 같다.

- 이미지를 인식하는데 Tesseract JS 를 사용했는데 문제는 이 JS 의 동작 원리? 동작 코드? 를 나름 이해해보려고 했지만...솔직히 너무 어려웠다. 대충 '이미지를 데이터로 읽어와서 worker 이라는 일종의 스레드가 동작하면서 번역하고 이를 출력한다' 정도로만 생각을 하고 있는데 이러한 부분은 이전 프로젝트와 마찬가지로 JS 에 대한 공부, 이해도가 많이 부족하구나...를 느낄 수 있었다

 

Git

코드는 git 에 올려두었고 코드에 대한 자세한 설명은 다음 글부터 하겠습니다

https://github.com/SeJonJ/java-Image-Translator.git

GitHub - SeJonJ/java-Image-Translator

 

구현 결과

이번 프로젝트 결과물

---

OCR 이란?

- ‘OCR’이란 ‘Optimal Character Recognition’의 줄임말로, 광학 문자 인식 기술이라고도 불립니다. 사람이 직접 쓰거나 이미지 속에 있는 문자를 이미지 스캔으로 얻은 다음, 이를 컴퓨터가 인식할 수 있도록 문자를 디지털화 하는 기술로 문자를 디지털화 함으로써 인쇄물을 영구적으로 보관하고, 내용 검색을 가능케한다.

최근에는 딥러닝 기반의 OCR 이 사용되고 있으며 이러한 딥러닝 기반 OCR 은 전 처리 -> 글자 검출 -> 글자 인식 -> 후처리 의 단계를 거친다.

- 좀 더 자세한 내용은 아래 과학기술정보통신부 블로그를 참고해주시기 바랍니다.

 

나는 이번 프로젝트에서 이 OCR 기능을 도와줄 라이브러리로 Tesseract JS 를 사용하였다. 생각보다 유명한 OCR 구현 라이브러리라는 것을 알 수 있었는데 Java 관련 라이브러리가 없어서 그나마 사용할 수 있는 JS 로 대체해서 관련 기능을 사용하였다. 다만 아무리봐도 도저히 이해 안되는게 진짜 넘 어려움ㅠㅠ

때문에 html 에 있는 Tesseract JS 코드 부분은 다른 분들이 만들어두신 것, github 에 있는 내용들을 거의 긁어다가 썼고 나머지(이미지 변수 처리 등?) 만 내가 짜서 넣었다.

 

---

Reference

- OCR 이란?

https://m.blog.naver.com/with_msip/221846680863

이미지 속 문자를 손쉽게 디지털화하는 'OCR'

- 파파고 API

https://developers.naver.com/products/papago/nmt/nmt.md

Neural Machine Translation - INTRO

 

- Tesseract JS github

https://github.com/naptha/tesseract.js?files=1

GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥

 

- Tesseract JS 참고 자료

https://bensonruan.com/image-to-text-ocr-with-tesseract-js/

Image to Text OCR with Tesseract.js - Benson Technology

 

https://webdoli.tistory.com/625

「Tesseract.js」사진·영상에서 글씨 추출하기