[아래로 _ ]: [C/C++] 바람창 프로그램, Qt QWebEngineView 기반 웹정보 획득 및 OCR (Wind_Window, 'https://earth.nullschool.net' + tesseract ocr)

Download link :

웹에서 얻을 수 있는 정보가 점점 풍요로워지는 것 같습니다.

외출할 때마다 사용하는 실시간 버스노선 알림 앱에서부터,

실시간으로 국제 우주 정거장에서 지구를 내려다볼 수 있는 동영상 중계까지.

Broadcast live streaming video on Ustream

그 중 특히나 눈에 들어왔던 기상정보 사이트 한 곳이 있었습니다.

오늘 Qt 프레임워크의 QWebEngineView 모듈을 활용한 프로젝트를 소개하기에 앞서서

'earth.nullschool.net' 사이트와 'QWebEngineView' 모듈을 먼저 말씀드리겠습니다.

1. https://earth.nullschool.net/

'https://earth.nullschool.net/' 사이트는 슈퍼컴퓨터들로 예측한 지구의 기상 정보를

3시간마다 업데이트해 보여줍니다. 파도의 흐름 또한 3시간마다 업데이트 해주는 데요.

동적인 그래픽으로 표현해주기에 직감적으로 이해하기 수월합니다.

제가 주목한 측정치는 Chem 항목, 화학(chemistry) 수치입니다. 웹 이미지에서 마우스로

클릭하면 해당 좌표의 정보를 얻을 수 있습니다. 여기에는 위도-경도 좌표, 풍속,

그리고 바람창 프로젝트에서 활용할 부피에 대한 화학물질 10억분율 ppbv

(Part Per Bilion Volume)도 나타납니다.

한 해 전세계에서 60만명의 유아가 대기오염으로 사망한다는 기사를 보았습니다. 링크

세계의 공장을 이웃으로 하는 한국도 여기에 민감하다고 생각합니다.

국내 포털 사이트에서 미세먼지에 대한 정보를 제공하고 있지만, 사용자가 그래픽적으로

'직감'할 수 있는 수단도 있으면 좋겠다는 생각이 들었습니다.

2. QWebEngineView

'Qt로 웹을 띄울 수 있는 모듈은 무엇인가?'

이 물음에 대한 답을 찾고있던 저는 작은 혼란을 겪었습니다.

Qt에서 웹을 다루는 모듈이 QtWebKit, QtWebEngine의 2가지로 나타났기 때문입니다.

Qt는 구글의 오픈소스 웹브라우저 프로젝트, 크로미엄(chromium)을 기반으로

웹 기능을 지원해왔습니다. 네, 크롬 브라우저가 이를 기반으로 하고 있죠.

그런데 구글 또한 애플의 WebKit 레이아웃 엔진을 기반으로 하는 입장이었습니다.

애플 주도의 WebKit 레이아웃 엔진은 오픈소스였지만 일반 사용자나 타기업이 아닌

자사 개발자 위주의 배타적인 정책을 펼쳤습니다. 자사 웹브라우저 사파리가 있는

애플이 WebKit 소스코드에 대한 중요 결정을 내릴 수 있는 리뷰어를 애플 직원에게만

한정하는 등. WebKit 엔진에 공헌해 온 구글 또한 등을 돌릴 수 밖에 없었던 것 같습니다.

애플은 현재 자사 앱스토어에 WebKit 엔진을 사용하지 않은 브라우저 앱의 배포를

금지하고 있습니다. 링크

구글은 2013년 4월, WebKit 컴포넌트에서 분리된 블링크(blink) 레이아웃 엔진을

발표했습니다. Blink는 현재 크로미엄 프로젝트 아래에서 개발 중입니다.

이제 크로미엄 프로젝트는 WebKit이 아닌 Blink 엔진을 기반으로 하고, 따라서

크로미엄 프로젝트를 기반으로 하는 Qt의 QtWebEngine 또한 QtWebKit을

대체하기 위해 공개된 것입니다.

아쉬운 점은 현재 QtWebEngine은 MSVC 컴파일러만 지원합니다. GCC 기반 리눅스나

윈도우즈에서 GCC를 끌어다쓸 수 있는 MinGW에서 또한 사용할 수 없습니다. 그래서

저또한 Qt 홈페이지에서 MSVC 기반의 Qt Creator를 다운로드 받았습니다. 저의 블로그

방문자 OS 통계를 보면 리눅스 사용자분들이 적지 않았는데.. 이렇게 프로젝트를

구성하고도 소개만 가능한 점이 아쉽습니다. 윈도우즈 응용프로그램을 리눅스와 같은

다른 OS에서 사용할 수 있게 해주는 와인(Wine) 프로그램이 적용 가능할 지 모르겠습니다.

3. 프로그램 소개

혹시 첨부한 프로젝트와 프로그램이 구동 가능한 지, 일찍 게시물을 접하신 분이

말씀해주시면 좋겠습니다. 이제 소스코드에서 특징적인 부분 위주로 말씀드리겠습니다.

소스코드는와 실행프로그램은 게시물 상단에 링크해두었습니다.

프로젝트는 Windows에서 Qt Creator MSVC 64비트, cmake 툴로 생성한 64비트 모드

Tesseract, Leptonica DLL 라이브러리를 활용했습니다.

첨부된 프로젝트는 Release 버전입니다.

이전 자동차 번호판 영역 추출 프로젝트에서 소개만 드린 Tesseract, Leptonica

라이브러리는 이미지의 OCR(Optical Character Recognition) 처리를 가능하게 합니다.

Qt의 QImage나 OpenCV의 Mat 데이터를 '1234'와 같은 문자 데이터로 교환해 줍니다.

렙토니카는 이미지 포맷을 처리하기 위해 테서렉트에 추가된 부속 라이브러리입니다.

테서렉트는 2006년부터 구글이 개발을 지원하고 있습니다.

cmake를 통해 DLL 파일을 얻는 방법은 이전에 CUDA 라이브러리에 대한 빌드를

친절히 소개해주신 다크 프로그래머님의 블로그 게시물을 통해 익힐 수 있었습니다. 링크

Tesseract와 Leptonica에 대한 빌드과정을 다이렉트로 소개해주는 게시물도 찾았습니다.

링크

여러분은 테서렉트 빌드에 대해 친절히 설명해주는 두 게시물을 참고해서 라이브러리를

빌드하시면 됩니다. 물론 첨부한 프로젝트에는 제가 빌드한 64비트 Release용

라이브러리가 이미 포함되어 있습니다.

우분투 리눅스에서 'sudo apt-get install ~' 패키지 명령어 한줄로 단번에 설치한

테서렉트가 윈도우즈에서는 cmake로 빌드해서 번거로운 감이 있습니다.

윈도우즈는 마이크로소프트라는 단일기업에 의해 7, 8.1, 10 등 비교적 통일된 체계를

가지지만, 리눅스는 Linux라는 그 커널을 두뇌로 하는 데비안, 우분투, 레드헷, 페도라,

오픈수세 등 다양한 OS가 존재합니다. 따라서 그 개발환경을 정의하는 과정이 중요하며

결정되고 난 뒤 직접 라이브러리를 빌드하는 과정에 익숙합니다. Windows처럼

특정 OS를 타겟으로 해도 무리 없는 프로그램은 세대가 7, 8.1, 10인지 아키텍처가

32비트인지 64비트인지 결정되면 'exe' 실행파일로 묶어서 사용자가 'next~next

~finish' 버튼만 눌러도 필요한 파일들을 디렉토리에 넣어주고 시스템 환경변수까지 말끔히

등록해주지만.. 개발자 입장에서는 cmake와 같은 정의단계를 거치는 게 번거롭지만

그 프로그램의 기반을 체감할 수 있기에 더 의미있다고 봅니다.

프로그램을 실행하면 제일 먼저 tesseract-ocr 폴더 내의 tessdata 디렉토리 경로를

요구하도록 했습니다. 저는 tessdata 폴더만 실행 프로그램 바로 위 폴더로 가져왔습니다.

저 폴더 안에는 학습시킨 trained data가 들어있어야합니다. trained data는 tesseract를

지원하는 구글코드 사이트에서 받으면..

안 되겠네요. 안 본 사이에 github로 이전했군요. 링크

위 링크에서 'eng.traineddata'를 받아서 tessdata 폴더에 넣어줍니다. 물론 영어팩에도

숫자가 포함되어 있기에 프로그램에서 필요한 ppbv 수치를 읽어올 수 있습니다.

학습 데이터를 만드는 방법은 이 링크의 게시물에 잘 정리되어 있습니다.

사실 웹에 띄워지는 반듯한 문자열은 웬만큼 특이한 폰트가 아니라면 기본 학습

데이터로도 잡아내기에 저는 바로 사용했습니다.

바람창의 인터페이스입니다. 각 영역에 대해 설명하면

1. 'https://earth.nullschool.net'을 그대로 띄운 것. 일반 웹 브라우저에서처럼 사용자가
제어가능.

2. '5번' 관심도시가 정리된 텍스트 파일을 불러들이면 해당 도시에 대해 접근하는
창입니다.

3. '1번'과 '2번' 웹 영역을 단순히 새로고침하는 버튼입니다.

4. 타이머를 통한 주기적인 새로고침입니다. 그런데 기능을 넣고나서
이 사이트의 정보가 3시간 단위로 갱신되는 것을 알았습니다.. -ㅅ-; 큰 의미는 없겠네요..

5. 도시의 이름과 위도-경도 좌표가 저장된 txt 파일을 불러옵니다.

6. 웹 화면에서 ppbv 항목의 숫자를 OCR 처리하는 버튼입니다.

텍스트 파일 포맷은 아래와 같이 구성했습니다.

이렇게 구성한 이유는 'https://earth.nullschool.net' 사이트의 URL 정보의 규칙성

때문입니다.

왼쪽 사각형 영역이 현재 화면의 중심좌표, 오른쪽 사각형이 마우스로 클릭한 점의

좌표더군요. 2개를 똑같이 줘서 QtWebEngine에서 띄우면 프로그램이 그 도시를

중심으로 클릭된 상태를 나타낼 수 있습니다. 구글 지도 사이트 또한 위도-경도 포맷을

사용하기에 이와 비슷한 방법으로 응용할 수 있겠네요.

여담으로 한국 도시를 서울-평양-평창으로 한 것은 평창행 비행기에 오른 줄 알았는데

평양에 내렸다는 한 케냐인이 생각나서였습니다. 링크

2018 동계 올림픽은 평창 ( Pyeongchang )에서 열립니다.

텍스트 파일을 불러오면 아래에 도시들의 라디오 버튼이 생깁니다. 선택한 도시를 중심으로

하는 웹 이미지가 오른편 뷰에 나타납니다.

이제 'Check ppbv' 버튼을 누르면 웹 영역을 QPixmap으로 그랩한 뒤, 다시 QImage

포맷으로 변경해 tesseract-ocr에 넘겨줍니다. 수치에 따라 색을 씌워 도시항목 옆에

띄웠습니다. 괜찮아보이면 초록색, 심하면 노란색, 그보다 더해보이면 빨간색으로 했는데,

과학적 근거는 없습니다. OpenCV라이브러리까지 묶으면 저 숫자만 남기게 이진화해서

훨씬 안정도를 높일 수 있습니다. 그런데 그렇게하면 Qt WebEngine과 tesseract 활용만

소개하려는 프로그램이 복잡해지기에 그러지는 않았습니다. QImage 자체의 픽셀

하나하나를 읽어와 이진화해서 다시 쓰는 방법도 가능할 것 같습니다.

위 이미지의 크게 확대된 창은 디버깅 용으로, 기본은 주석처리되어 있습니다.

소스코드는 특별한 알고리즘 없이 기본 라이브러리 기능을 활용한 거라 단순합니다.