OCR과 TTS로 비대면 서비스 간단하게 구현하기
오늘은 네이버 클라우드 플랫폼의 OCR 서비스와 TTS(Text To Speech) 서비스인 CSS 상품을 연동해 나만의 비대면 서비스 구현 방법을 소개해드리겠습니다.
OCR 서비스는 Optical Character Recognition으로 ‘광학 문자 인식 서비스’를 뜻합니다.
구현해 볼 서비스를 간단히 살펴보겠습니다. 텍스트가 포함된 이미지 파일을 성우의 목소리로 읽어주는 서비스를 간단하게 구현하고자 합니다. 아래 <그림1>과 같이 텍스트가 포함된 이미지 파일을 API 게이트웨이(Gateway)를 통해 전송합니다. 인보크(Invoke) URL을 통해 OCR 서비스에 전달하고, 분석된 텍스트를 파일로 저장 후 TTS 서비스를 통해 성우의 목소리로 읽어주는 서비스를 만들 수 있습니다.
네이버 클라우드 플랫폼 OCR 서비스 알아보기
‘ICDAR Robust Reading Competition’은 OCR 분야에서 가장 권위 있는 경진 대회입니다. 알리바바, 텐센트, 네이버 등 인공지능(AI) 기업들이 매년 참가하는데, 2018년 이 대회에서 네이버 ‘클로바(Clova) OCR’은 4개 분야에서 1위를 석권했습니다.
‘클로바 OCR’ 기술은 AI 분야 세계적 학회인 ‘CVPR’ ‘ICCV’에서 논문이 채택되었으며, 특히 ICCV에서는 상위 4%인 논문으로 인정받았습니다. 클로바 OCR의 기술은 2020년 1월 16일부터 네이버 클라우드 플랫폼을 통해 사용자들이 손쉽게 이용할 수 있습니다.
클로바 OCR에서 제공하는 원천기술을 안정적으로 서비스할 수 있는 클라우드 환경은 네이버 클라우드 플랫폼을 통해 제공됩니다. <그림3>에서와 같이 클로바 OCR은 이미지 내 텍스트를 정확하고 빠르게 분석하는 기술을 제공하는 것을 보실 수 있습니다.
클로바 OCR은 이미지(사진) 속 글자 위치를 찾고 어떤 글자인지 자동으로 알아내는 기술로, 다양한 형태의 글자를 이해하기 위해 독자적인 글자 영역 검출 및 인식 기술을 보유하고 있습니다. 손쉽게 템플릿을 만들고 원하는 영역을 지정한 뒤, 필요한 글자만 빠르게 추출하는 기능도 제공합니다.
네이버 클라우드 플랫폼의 OCR 서비스는 안정적인 클라우드 인프라 서비스를 바탕으로 문서를 인식하고, 사용자가 지정한 영역의 텍스트와 데이터를 정확하게 추출해 문자 인식 서비스의 품질을 높일 수 있습니다.
네이버 클라우드 플랫폼의 OCR 서비스에서 제공하는 다양한 템플릿을 통해 문서를 자동으로 분류하고, 미리 준비된 이미지 프로세스를 통해 영역을 인식하고 이미지 조정 및 보정 작업을 진행합니다. 학습을 통해 사전 정의된 영역을 검출한 후 이미지 내 텍스트를 정확하게 인식해 추출할 수 있습니다.
네이버 클라우드 플랫폼의 OCR 서비스는 크게 3가지 특장점을 가집니다.
(1) 정확한 데이터 추출
OCR은 방대한 데이터 학습을 통해 다양한 형태의 글자를 이해합니다. 이를 위해 독자적인 글자 텍스트 영역 검출 및 인식 기술을 보유하고 있고, 손쉽게 템플릿을 만들고 원하는 영역을 지정한 뒤, 필요한 글자만 빠르게 추출하는 기능을 제공합니다.
(2) 네이버의 AI 기술을 활용한 차별화된 모델
OCR 서비스는 네이버의 클로바 AI 기술을 활용해 주요 비즈니스 활용에 최적화된 고성능 OCR 인식 모델을 적용했습니다. 한국어, 영어, 일본어를 지원하고, 활자체(Printed) 뿐만 아니라 높은 수준의 필기체(Hand-Written) 인식을 제공해 실제 사용 환경에 적합한 기술을 지원합니다. 특히, 서식 문서에서 인식을 원하는 영역을 설정하면, 구조화된 값으로 추출해 정형화된 인식 결과를 전송합니다.
(3) 더욱 편리한 문서 처리 자동화
직접 손으로 분류하던 문서들을 OCR 서비스를 사용할 경우, 등록된 템플릿과의 유사도를 통해 자동 분류가 가능합니다. 따라서 사용자의 개입을 최소화해 문서 분류가 가능한 효과적인 업무 워크플로우를 설계할 수 있습니다.
폴더 안에 쌓여 있는 이미지들을 하나하나 열어서 눈으로 확인하는 것은 힘들지만, OCR을 활용해 메타 데이터가 자동으로 저장되어 데이터 관리 및 활용이 편리해지면서, 데이터의 가치를 더욱 증가시킬 수 있습니다. 네이버 클라우드 플랫폼의 OCR 서비스는 전달된 RESTFul API를 통해 해당 이미지를 정확하게 분석해 텍스트 추출 결과를 JSON(JavaScript Object Notation) 형태로 가공 및 전달합니다.
아래 <표1>과 같이 다양한 형태의 이미지 인식 및 텍스트 추출 서비스를 제공하고, 이미지 내에 포함된 다양한 오브젝트(Object)를 추출해 낼 수 있는 기능을 지속적으로 업데이트할 예정입니다.
네이버 클라우드 플랫폼 OCR API를 통해 텍스트
추출하기
주요 API 소개
네이버 클라우드 플랫폼의 OCR 서비스 상세한 사용방법은 <그림7>의 설명서를 통해 쉽고 빠르게 학습할 수 있습니다.
1. OCR 사용 설명서
<그림5>는 네이버 클라우드 플랫폼의 OCR 서비스의 전반적인 사용을 위한 설명서입니다.
설명서에는 서비스 사용을 위한 포털 및 콘솔에 대한 내용을 상세히 확인할 수 있습니다.
2. OCR API 연동 설명서
<그림6>은 네이버 클라우드 플랫폼의 OCR 서비스의 API 연동을 위한 설명서입니다.
서비스 구현을 위한 연동 API에 대한 형식과 예제가 상세하게 설명되어 있습니다.
3. OCR API 호출 설명서
<그림7>는 네이버 클라우드 플랫폼의 OCR 서비스의 API 호출을 위한 설명서입니다.
서비스 구현 시 호출이 필요한 API에 대한 정의와 예제가 상세하게 설명되어 있습니다.
4. OCR 커스텀 API Specification
네이버 클라우드 플랫폼의 OCR 서비스의 커스텀(Custom) API 사용을 위한 설명서입니다.
사용자 API 보안과 모니터링 등 사용 편의성이 강화된 API 게이트웨이 상품과의 연동 작업으로 보다 신뢰성 있는 서비스 API를 구현 및 제공할 수 있습니다. <그림9> <그림10> 참조해 주세요.
OCR 서비스 신청 및 등록
1. OCR 약관 확인 및 이용 신청
OCR 서비스는 네이버 클라우드 플랫폼 OCR 이용 약관 확인 후 신청할 수 있습니다.
2. 도메인 생성 및 등록
네이버 클라우드 플랫폼 OCR 서비스는 크게 제너럴(General)과 템플릿(Template) 형태의 서비스를 제공합니다.
아주 일반적인 서비스를 구현해 API로 서비스를 제공할 예정이라 General을 선택 후 도메인을 생성합니다.
몇 번의 클릭으로 <그림13>과 같이 OCR 도메인 생성이 완료되었습니다.
3. Text OCR 등록
<그림13>에서 생성된 도메인을 바탕으로 [Text OCR] 버튼을 클릭하면 API 게이트웨이 자동 연동을 통해 간편하고 쉽게 API 서비스를 구성할 수 있습니다. (API 게이트웨이 상세 설정이 필요하다면, 수동 연동을 통해 생성이 가능합니다.)
<그림14>에서 생성된 비밀번호(Secret Key)와 API 게이트웨이 URL은 이번에 구현할 서비스에서 필요하므로,
필요시 복사 버튼을 클릭해 사용할 수 있습니다.
4. API Gateway 등록 확인
텍스트 OCR 서비스가 API Gateway에 정상적으로 등록되었는지 확인합니다.<그림15>와 같이 API Gateway에서 아무런 설정을 하지 않았지만, OCR 자동 연동을 통해서 생성된 API에 대한 정보를 확인할 수 있습니다.
OCR API 동작 확인 및 테스트
테스트 웹 클라이언트는 사용자가 주로 사용하는 테스트 툴 중에서 사용이 가능합니다. 이번 설명에서는 많이 사용되는 포스트맨(Postman) 툴을 기준으로 테스트를 진행했습니다.
요청 본문(Request Body) 항목에는 <그림17>와 같이 입력 후 저장합니다.
요청 본문 입력 완료 후 [SEND] 버튼을 클릭하면, <그림18>과 같이 테스트 이미지의 텍스트를 분석해 JSON 형태로 분석된 결과를 확인할 수 있습니다.
OCR API 알아보기
상세한 API 설명서는 <그림19>을 참고하면 쉽게 사용할 수 있습니다.
[OCR Custom API] : https://apidocs.ncloud.com/ko/ai-application-service/ocr/ocr/
OCR API Request
<그림20>와 같이 요청 정보를 확인할 수 있습니다.
요청 시 필요한 헤더 정보를 <그림21>과 같이 설정할 수 있습니다.
요청 본문(Request Body)은 <그림22>와 같이 설정할 수 있습니다.
OCR API Response
이미지 인식 결과에 대한 응답 정보는 <그림24>와 같습니다.
서비스 구현 시 주로 사용된 오브젝트인 이미지 필드의 상세 설명은
<그림26>과 같습니다.
이외에도 API 문서에는 각 버전 별 API 설명, 요청 및 응답의 상세 예시까지 잘 설명되어 있습니다.
Simple OCR 서비스 구현
1. Node.js 개발 환경 준비
[NVM 설치] : https://github.com/nvm-sh/nvm
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash[Axios 설치] : https://www.npmjs.com/package/axios
$ npm install axios2. 심플 OCR 서비스 코드 구현
<코드 1>과 같은 서비스 코드에서 사용할 라이브러리와 모듈을 Import 합니다.
<코드 2>과 같이 OCR API 비밀번호와 OCR URL 을 상수로 선언합니다.
<코드 3>과 같이 API 호출을 위한 헤더와 변수를 정의합니다.
<코드 4>과 같이 Axios 라이브러리를 통해 OCR API를 호출하고, 응답 결과를 텍스트 파일로 저장합니다.
이제 코드 구현이 완료되었고, 실행 후 결과를 확인합니다.
해당 소스 코드가 저장된 위치에서 <실행 결과 1>과 같이 노드 모듈
(node module)을 실행합니다.
<실행결과 2> 와 같이 생성된 텍스트 파일을 확인하고, 변환된 텍스트를 확인할 수 있습니다.
Clova Speech Synthesis(CSS) 서비스 알아보기
CSS 소개
Clova Speech Synthesis(CSS) 서비스는 입력한 텍스트를 자연스러운 목소리로 재생해주는 음성 합성 API입니다. 주어진 텍스트를 자연스럽게 말하듯 재생해 음성 안내 시스템, 뉴스/책 읽기 서비스 등에 활용할 수 있습니다.
CSS 서비스는 입력된 텍스트를 RESTful API 방식으로 전달하면 서버에서 인식해 mp3 포맷의 스트리밍 데이터나 파일로 리턴해주는 API를 제공합니다.
CSS API 알아보기
상세한 API 설명서는 <그림 28>을 참고하면 쉽게 사용할 수 있습니다.
[CSS Custom API] : https://apidocs.ncloud.com/ko/ai-naver/clova_speech_synthesis/tts/
요청 및 요청 매개변수에 대해서는 <그림 29>에서와 같이 확인할 수 있습니다.
요청 시 필요한 헤더 정보를 <표4>과 같이 설정할 수 있습니다.
CSS 서비스 신청 및 등록
CSS 약관 확인 및 이용신청
네이버 클라우드 플랫폼 CSS 이용 약관 확인 후 신청을 할 수 있습니다.
네이버 클라우드 플랫폼 콘솔에서 “AI.NAVER > Application” 메뉴에서 사용할 수 있습니다.
API를 사용할 애플리케이션 정보를 등록하고 저장합니다. <그림 32> 참조.
<그림 33>과 같이 정보가 정상적으로 등록됐다면, <그림 34>과 같이 등록된 정보를 확인할 수 있습니다.
심플 CSS 서비스 구현
Simple CSS 서비스도 심플 OCR 서비스와 동일한 개발환경을 사용합니다. Simple CSS 서비스는 심플 OCR 서비스의 결과물로 생성된 텍스트 파일을 음성 파일로 변환하는 기능을 구현합니다. 서비스 코드의 복잡도를 낮추기 위해 별도의 Node.js 파일로 구현합니다.
심플 CSS 서비스 인증 정보 확인
심플 CSS 서비스에서 사용할 인증 정보를 확인 및 저장합니다. 네이버 클라우드 플랫폼 콘솔에서 쉽게 정보를 확인할 수 있습니다. CSS API에서 사용하기 위한 인증정보를 확인합니다.
CSS API 호출 및 응답 정보 획득을 위한 헤더 정보는 <표 5>과 같습니다.
Node.js 개발 환경 준비
[Express 설치] : https://expressjs.com/ko/starter/installing.html
$ npm install express $ npm link express[request 설치] : https://www.npmjs.com/package/request
$ npm install request $ npm link request심플 CSS 서비스 코드 구현
심플 CSS 서비스 코드에서 사용할 라이브러리와 모듈을 Import 합니다.
CSS API 비밀번호, 클라이언트 ID와 CSS URL을 상수로 선언합니다.
<그림 35>와 같이 생성 및 등록한 인증 정보를 확인해 코드에서 사용할 수 있습니다.
<표 6>과 같이 Rest Controller(~/css) 서비스를 구현합니다.
심플 CSS 서비스 구현이 완료됐으니, 실행 후 결과를 확인합니다. 해당 소스 코드가 저장된 위치에서 <실행결과 3>와 같이 노드 모듈을 실행합니다.
<실행결과 3>와 같이 출력되면, `3000`번 포트로 Express Server가
정상적으로 실행된 것을 확인할 수 있습니다. 웹 브라우저에서 접속하면
브라우저에서 MP3 음성파일이 실행됩니다.
로컬 디렉터리에도 파일이 저장되었음을 확인할 수 있습니다.
브라우저에서 아래와 같이 접속합니다.
http://localhost:3000/css<그림 36>과 같이 브라우저에서 CSS API 실행 후 변환된 음성파일이 동작하는 것을 확인할 수 있습니다.
로컬 디렉터리에 <실행결과 4>와 같이 `ccs_service.mp3` 파일이 생성된 것을 확인할 수 있습니다.
이상과 같이 mp3 음성 파일이 생성됐으면, 모든 서비스가 정상적으로 잘 실행됐음을 확인할 수 있습니다.
해당 소스코드는 네이버 클라우드 플랫폼 개발자 Github https://github.com/NaverCloudPlatformDeveloper/Simple-OCR-CSS에 공개했습니다.
맺으며 …
네이버 클라우드 플랫폼의 OCR과 CSS(Text To Speech) 서비스를 융합해
아주 간략하게나마 비대면 서비스를 구현해 보았습니다.
여기에 사용된 서비스 이외에도 네이버 클라우드 플랫폼의 서비스형 플랫폼(Paas), 서비스형 소프트웨어(Saas), API 등 다양한 플랫폼 및 서비스를 활용해 사용자가 원하는 형태의 서비스를 손쉽게 구현하고, 안정적인 인프라 서비스를 바탕으로 서비스 품질을 높일 수 있는 기회가 되지 않을까 기대해 봅니다.
