Naver 오픈 API 를 활용한 통역앱 개발

네이버랩스

옥상훈

2016-05-31

음성인식 API

기계번역 API

음성합성 API

통역앱 개요

네이버 오픈 API : https://developers.naver.com

한국어에 대해 3 개 국어 ( 영어 , 일어 , 중국어 ) 로 translate & speak 가능

주요 화면

NAVER Open API 이용 방법

네이버 개발자센터 리뉴얼 (2016.1.26)

https://developers.naver.com

( 기존 ) 네이버 개발자센터 http://developer.naver.com/

( 기존 ) 네이버 로그인 개발자센터 https://nid.naver.com/devcenter/main.nhn

개발자 센터 통합

[ 기존 ]

( 변경 ) 네이버 개발자 센터https://developers.naver.com/

[ 변경 ]

새로운 API 추가 (beta)

[ 음성합성 ]

텍스트를 아나운서 음성으로 들으실 수 있습니다 . 현재 4개 언어 ( 한국어 , 영어 , 일본어 , 중국어 ) 를 지원합니다 .

[ 음성인식 ]

음성 데이터를 텍스트로 변환해 줍니다 . 현재 2 개 언어 ( 한국어 , 영어 ) 를 지원합니다 .

[ 기계번역 ]

영어 <-> 한국어 , 중국어<-> 한국어 , 일본어 <->한국어 번역을 지원합니다 .

[ 캡차 ]

자동 입력 방지를 위해 보안 문자가 포함된 이미지를 전송하고 입력 값을 검증합니다 .

개발자의 상식이 통하는 API

( * 일부 API 들은 추후 개선 예정입니다 . )

RESTful 하게 동작

JSON 으로 결과 리턴

Error Code 는 http status 코드에 맞게 if (errorCode == 200) { // success } else if (errorCode >= 400) { // error }

{"message":{"@type":"response","@service":"naverservice.labs.api","@version":"1.0.0","result":{"translatedText":"I love you."}}}

https://openapi.naver.com/v1/language/trans-late

( 기존 ) 14 개의 사항 입력 ( 변경 ) 4 개의 필수 사항 입력

제휴 신청 간소화

기존에 제휴 신청을 하려면 회사명부터 담당자 연락처 까지 14 개의 항목을 입력해야 했지만 , API 사용 목적과 예상 사용량 , 활용화면만 올려 주시면 됩니다 . 또한 제휴 진행 상황을 확인하는 화면도 함께 추가하였습니다 .

[ 기존 ] [ 변경 ]

( 기존 ) 각 API 별로 API 키를 발급 받아 사용 ( 변경 ) API 이용신청 또는 애플리케이션 등록 후 API 권한 설정화면에서 사용할 API 체크

API 키 대신 API 이용 신청

기존에는 각 API 별로 API 키를 발급받아 사용하였지만 , 이제는 API 이용 신청 또는 애플리케이션을 등록한 다음 , API 권한 설정화면에서 사용하려는 API 를 체크해 주시면 됩니다 . API 를 호출할 때는 API 키 대신 애플리케이션 등록 시 발급 받은 클라이언트아이디와 시크릿 값을 HTTP 헤더에 전송하는 것으로 변경되었습니다 .

[ 기존 ] [ 변경 ]

API 호출 방법

[ 비 로그인 오픈 API ] [ 로그인 오픈 API]• 방법

– REST API 호출 – HTTP 헤더에 클라이언트 아이디와

시크릿값 포함해서 호출

• 대상 – 지도 , 검색 , 좌표변환 , 단축 URL– 음성인식 , 기계번역 , 음성합성 ,

캡차

• 주의 사항 – 클라이언트 아이디와 시크릿은 반드시

헤더값에 포함해야 함 – http method 일치 여부 확인 ( 예 :

검색은 GET, 기계번역은 POST)– 텍스트는 대부분 UTF-8 로 인코딩

필요 ( 예 : 검색 쿼리 , 기계번역 텍스트 값 )

• 방법– REST API 호출 – 로그인 인증 후 발급 받은 접근 토큰

값을 Authorization 헤더에 포함해서 호출

• 대상 – 회원 프로필 조회 , 블로그 글쓰기 ,

카페 가입 및 글쓰기 , 캘린더 일정 담기

• 주의 사항 – 단체아이디는 네이버 로그인이

지원되지 않으므로 개인아이디로 호출해야함

– 카페 글쓰기 API 에서 텍스트는 UTF-8 -> MS949 로 이중 인코딩을 해야 한글이 깨지지 않음

검색 API 호출 데모 – 1 단계 : 애플리케이션 등록

( 경로 1) Application – 애플리케이션 등록( 경로 2) 검색 API 개발 가이드 – 오픈 API 이용 버튼 클릭

검색 API 호출 데모 – 2 단계 : 서비스 환경 설정

• 주의 : 서비스 URL 은 실제 환경과 일치해야 인증오류가 발생하지 않음• 로컬에서 개발 중일 때는 127.0.0.1: 포트번호로 설정

검색 API 호출 데모 – 3 단계 : 클라이언트 아이디 / 시크릿 확인

• 주의 : 클라이언트 시크릿 값은 ‘보기’버튼 클릭하면 재발급 가능

검색 API 호출 데모 – 4 단계 : API 호출 // 클라이언트 아이디 및 시크릿 그리고 요청 URL 선언 String clientId = "클라이언트아이디 "; String clientSecret = "클라이언트시크릿 "; try { String text = URLEncoder.encode("설현 ", "UTF-8"); String apiURL = "https://openapi.naver.com/v1/search/news.xml?query="+ text +"&s-tart=1&display=100"; URL url = new URL(apiURL); HttpURLConnection con = (HttpURLConnection)url.openConnection(); con.setRequestMethod("GET"); con.setRequestProperty("X-Naver-Client-Id", clientId); con.setRequestProperty("X-Naver-Client-Secret", clientSecret); // response 수신 int responseCode = con.getResponseCode(); if (responseCode==200) { BufferedReader in = new BufferedReader( new InputStreamReader(con.getInputStream())); String inputLine; StringBuffer response = new StringBuffer(); while ((inputLine = in.readLine()) != null) { response.append(inputLine); } in.close(); System.out.println(response.toString()); } else { System.out.println("API 호출 에러 발생 : 에러코드 =" + responseCode); }} catch (Exception e) { System.out.println(e);}

검색 API 호출 데모 – httpclient 사용한 api 호출

// 클라이언트 아이디 및 시크릿 그리고 요청 URL 선언 String clientId = "클라이언트아이디 "; String clientSecret = "클라이언트시크릿 "; String text = URLEncoder.encode("설현 ", "UTF-8"); String apiURL = "https://openapi.naver.com/v1/search/news.xml?query="+ text +"&start=1&display=100"; try { // HTTP 헤더에 클라이언트 아이디와 시크릿을 추가하기 위한 과정 CloseableHttpClient client = HttpClientBuilder.create().build(); HttpGet request = new HttpGet(apiURL); request.addHeader("X-Naver-Client-Id", clientId); request.addHeader("X-Naver-Client-Secret", clientSecret); HttpResponse response = client.execute(request); int responseCode = response.getStatusLine().getStatusCode(); if(responseCode==200) { String results = null; HttpEntity responseEntity = response.getEntity(); if(responseEntity!=null) results = EntityUtils.toString(responseEntity); System.out.println("results: " + results); } else { System.out.println("API 호출 에러 발생 : 에러코드 =" + responseCode); } } catch (Exception e) { System.out.println(e); }

번역 API 호출 데모 – POST 방식// 클라이언트 아이디 및 시크릿 그리고 요청 URL 선언String clientId = "클라이언트아이디 ";String clientSecret = "클라이언트시크릿 ";try { String text = URLEncoder.encode("사랑합니다 ", "UTF-8"); String apiURL = "https://openapi.naver.com/v1/language/translate"; URL url = new URL(apiURL); HttpURLConnection con = (HttpURLConnection)url.openConnection(); con.setRequestMethod("POST"); con.setRequestProperty("X-Naver-Client-Id", clientId); con.setRequestProperty("X-Naver-Client-Secret", clientSecret); // post request 전송 String postParams = "source=ko&target=en&text=" + text; con.setDoOutput(true); DataOutputStream wr = new DataOutputStream(con.getOutputStream()); wr.writeBytes(postParams); wr.flush(); wr.close(); // response 수신 int responseCode = con.getResponseCode(); System.out.println("responseCode="+ responseCode); if(responseCode==200) { BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream())); String inputLine; StringBuffer response = new StringBuffer(); while ((inputLine = in.readLine()) != null) { response.append(inputLine); } in.close(); System.out.println(response.toString()); } else { System.out.println("API 호출 에러 발생 : 에러코드 =" + responseCode); }} catch (Exception e) { System.out.println(e);}

통역앱 개발 - 음성인식 API

음성인식

가이드 : http://developers.naver.com/docs/labs/vrecog

SDK 및 예제 : https://github.com/naver/naverspeech-sdk-android

- Android 2.3.3 (API10)- Android SDK Build-Tools 22

애플리케이션 등록 ( 오픈 API 이용신청 )

애플리케이션 등록 - Client ID 확인

애플리케이션 설정

애플리케이션 권한 확인

음성인식 예제 – Android Studiohttps://github.com/naver/naverspeech-sdk-android/tree/master/sample/NaverspeechClient-android-studio

<uses-permission android:name="android.permission.INTERNET" /><!-- 오픈 API 호출 -->

<uses-permission android:name="android.permission.RECORD_AUDIO"/><!-- 음성인식을 위한 녹음 입력값 -->

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><!-- 음성 파일 저장 -->

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><!-- 음성합성 파일 재생 -->

권한 설정

클라이언트 아이디 설정

실행시 권한 세팅 에러

안드로이드 6.0 이상에서는 설치할때 권한허용 여부를 묻지 않기때문

권한 체크 – 주의 사항

음성인식 서버 연결 확인

음성인식 클라이언트 주요 클래스

• MainActivity extends Activity– onCreate : 음성인식 서버 연결 (NaverRecognizer 는 쓰레드로 작동하며 , 여기에 대한 핸들러 선언 )– onResume: 음성인식 서버 다시 연결 naverRecognizer.getSpeechRecognizer().initialize();– onPause: 음성인식 서버 접속 종료 naverRecognizer.getSpeechRecognizer().release();– handleMessage: 음성인식 서버 이벤트에 따른 처리

• NaverRecognizer implements SpeechRecognitionListener– 개발자센터에서 발급받은 클라이언트 아이디값을 이용해 음성인식 서버에 소켓 연결– 네이버 음성인식 SDK 의 SpeechRecognitionListener 인터페이스를 구현한 클래스 – 인터페이스의 필수 구현 함수들은 서버 동작에 따라 호출

• utils.AudioWriterPCM – 지정된 경로에 음성 녹음 파일을 생성 , 저장하는 util 클래스 – 음성 녹음 파일은 음성인식 서버 소켓으로 전송하기 위한 용도

통역앱 UI 구성

통역앱 UI 구성 -ImageButton

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/an-droid"><item android:state_pressed="false" android:drawable="@drawable/mic"/><item android:state_pressed="true" android:drawable="@drawable/mic_click"/></selector>

* 파일명 : res/drawable/mic_btn.xml

* 파일명 : res/drawable/mic.png * 파일명 : res/drawable/mic_click.png

통역앱 UI 구성 - RelativeLayout<ImageButton android:background="@drawable/mic_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn_start" android:layout_centerVertical="true" android:layout_centerHorizontal="true" />

<TextView android:id="@+id/txt_result" android:textSize="13dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/btn_start" android:layout_centerHorizontal="true" android:singleLine="false" />

<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="13dp" android:id="@+id/trsView" android:layout_below="@+id/txt_result"/>

* 파일명 : res/layout/activity_main.xml

통역앱 MainActivity 수정

private ImageButton btnStart;//private Button btnStart;

@Overrideprotected void onCreate(Bundle savedInstanceS-tate) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

// … … … … … …

btnStart = (ImageButton) findViewById(R.id.btn_start); //btnStart.setText(R.string.str_listening);

Button ImageButton

통역앱 UI 구성

기계번역 API 호출 & Thread

기계번역 API

가이드 : http://developers.naver.com/docs/labs/translator

API URL: https://openapi.naver.com/v1/language/translate

기계번역 API 호출은 Thread 에서

• Thread 를 생성해서 API 를 호출 – API 호출 처리를 하는 동안에도 UI 는 조작 가능– Thread 에서 호출한 결과값을 화면으로 업데이트 하려면 runOnUiThread() 이용

new Thread(new Runnable() { @Override public void run() { //TO-DO 기계번역 API 호출 runOnUiThread(new Runnable() { @Override public void run() { //TO-DO UI 업데이트 } }); }}).start();

기계번역 API – Request 전송 private static final String CLIENT_ID = " 개발자센터 - 내애플리케이션 -클라이언트아이디 "; private static final String CLIENT_SECRET = " 개발자센터 - 내애플리케이션 -클라이언트시크릿 ";

private String callTranslateAPI(String src) { String result = null; try {

String param = "source=ko&target=en&text=" + URLEncoder.encode(src, "UTF-8"); URL url = new URL("https://openapi.naver.com/v1/language/translate"); HttpsURLConnection con = (HttpsURLConnection)url.openConnection(); con.setRequestMethod("POST"); con.setRequestProperty("X-Naver-Client-Id", CLIENT_ID); con.setRequestProperty("X-Naver-Client-Secret", CLIENT_SECRET); con.setDoOutput(true); con.setDoInput(true); // API 호출 OutputStreamWriter wr = new OutputStreamWriter(con.getOutputStream()); wr.write(param); wr.flush();

//TO-DO API 서버 응답 처리 구현 필요

con.disconnect(); } catch (Exception e) { e.printStackTrace(); } return result;}

기계번역 API - Response 처리

String trsData = ""; int responseCode = con.getResponseCode(); if(responseCode==200) { InputStream is = con.getInputStream(); BufferedReader br = new BufferedReader(new InputStreamReader(is)); String line = ""; trsData = ""; while ((line = br.readLine()) != null) { trsData += line; } br.close(); is.close(); result = trsData; } else { Log.d("callTranslateAPI", "###### responseCode:" + respon-seCode); }

기계번역 API – JSON 파싱

JSONObject json = new JSONObject(trsData);try { JSONObject json1 = json.getJSONObject("message"); JSONObject json2 = json1.getJSONObject("result"); result = json2.getString("translatedText");} catch (Exception e) { e.printStackTrace();}

기계번역 API 메소드 – 호출 UI 처리

private TextView trsView;

@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

// … … … … … … trsView = (TextView) findViewById(R.id.trsView);

기계번역 API 메소드 –호출은 음성인식 완료 시점

case R.id.finalResult: // Extract obj property typed with String array. // The first element is recognition result for speech. String[] results = (String[]) msg.obj; mResult = results[0]; txtResult.setText(mResult);

//TO-DO 음성인식이 완료된 시점에 기계번역 API 호출

기계번역 API 메소드 –호출 처리 - Thread

new Thread(new Runnable() { @Override public void run() { trsRes = callTranslateAPI(mResult); if(trsRes == null ) trsRes = ""; if(!trsRes.equals("")) { runOnUiThread(new Runnable() { @Override public void run() { trsView.setText("* 통역된 결과 ::" + trsRes); } }); } }}).start();

음성합성 API 호출 & MediaPlayer

음성합성 API

가이드 : http://developers.naver.com/docs/labs/tts

API URL: https://openapi.naver.com/v1/voice/tts.bin

핵심기능 : Text MP3

음성합성 API 호출 결과 처리 개요

• InputStream 은 byte 단위로 읽어서 File 로 저장 – InputStream is = con.getInputStream();

int read = 0;byte[] bytes = new byte[1024];

– OutputStream outputStream = new FileOutputStream(f);while ((read = is.read(bytes)) != -1) { outputStream.write(bytes, 0, read);}

• 호출 결과는 File() 객체로 저장 – 파일경로는 Environment.getExternalStorageDirectory().getAbsolutePath(); – File f = new File(” 임시파일이름” ); – f.createNewFile();

• MediaPlayer 를 이용한 mp3 파일 재생 – 파일재생 준비 mp.setDataSource(f.getAbsolutePath()); mp.prepare();

– 파일은 즉시 재생하면 안되고 , 준비 완료시 재생되도록 , setOnPreparedListener 에서 재생

– 파일재생이 완료되면 MediaPlayer 자원을 반환하도록 setOnCompletionListener 에서 종

MediaPlayer 초기화

private MediaPlayer mp;

@Overrideprotected void onCreate(Bundle savedInstanceS-tate) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

// … … … … … … mp = new MediaPlayer();

음성합성 API 호출 메소드 구현private void callTTSAPI(String src) { try { String param = "speaker=clara&speed=0&text=" + URLEncoder.encode(src, "UTF-8"); URL url = new URL("https://openapi.naver.com/v1/voice/tts.bin"); HttpsURLConnection con = (HttpsURLConnection) url.openConnection(); con.setRequestMethod("POST"); con.setRequestProperty("X-Naver-Client-Id", CLIENT_ID); con.setRequestProperty("X-Naver-Client-Secret", CLIENT_SECRET); con.setDoOutput(true); con.setDoInput(true); OutputStreamWriter wr = new OutputStreamWriter(con.getOutputStream()); wr.write(param); wr.flush(); int responseCode = con.getResponseCode(); if (responseCode == 200) {

//TO-DO 음성합성 API 호출 성공시 파일 생성 처리

} else { System.out.println("api error!! status code =" + responseCode); } con.disconnect(); } catch (Exception e) { e.printStackTrace(); }}

InputStream -> FileOutputStream

InputStream is = con.getInputStream(); int read = 0; byte[] bytes = new byte[1024]; String tempname = Long.valueOf(new Date().getTime()).toString(); File f = new File(Environment.getExternalStorageDirectory().getAbsolutePath() + "/" + tempname + ".mp3"); f.createNewFile(); OutputStream outputStream = new FileOutputStream(f); while ((read = is.read(bytes)) != -1) { outputStream.write(bytes, 0, read); } is.close();

생성된 파일을 MediaPlayer 에서 재생

if (f.exists()) { mp.setDataSource(f.getAbsolutePath()); mp.prepare(); mp.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { @Override public void onPrepared(MediaPlayer mp) { mp.start(); mp.setVolume(1.0f, 1.0f); } }); mp.setOnCompletionListener(new MediaPlayer.OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.stop(); mp.reset(); } }); } else { Log.d("TTS", "###### 파일 없다 ######"); }

음성합성 API 메소드 호출

new Thread(new Runnable() { @Override public void run() { trsRes = callTranslateAPI(mResult); if(trsRes == null ) trsRes = ""; if(!trsRes.equals("")) {

callTTSAPI(trsRes); runOnUiThread(new Runnable() { @Override public void run() { trsView.setText("* 통역된 결과 ::" + trsRes); } }); } }}).start();

UX 개선을 하려면

• API 가 호출 되는 동안은 ProgressBar 를 보여 주도록

• 버튼 click 이 아니라 touch 이벤트를 이용해서 조작하도록

<ProgressBar android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/progressBar" android:layout_centerVertical="true" android:layout_centerHorizontal="true" />

btnVoice.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { int key = event.getAction(); switch (key) { case MotionEvent.ACTION_DOWN: //TO-DO 음성인식 시작 naverRecognizer.recognize(); break; case MotionEvent.ACTION_UP: //TO-DO 음성인식 중지 naverRecognizer.getSpeechRecognizer().stop(); break; } return false; }});

정리하며

- Open API 호출- HTTP 핸들링- JSON 파싱- File 처리- Thread 활용- MediaPlayer 컨트롤 - 앱은 각 요소 기술에 대한 섬세한 컨트롤이 중요 (Medi-

aPlayer, 버튼 제어 , 데이터 호출 후 화면 처리 등등 ...)

API 마이그레이션 FAQ

• 마이그레이션 해야 하는 이유 – 2016 년 1 월 26 일에 개편된 개발자센터를 오픈하면서 API 인증체계를 개선하였습니다 . – 이에 따라 API 호출하는 방식도 함께 변경하였습니다 . .

• 누가 마이그레이션 대상인가요 ?– 네이버와 별도의 제휴키를 발급받아 사용하는 개발사– 구 개발자센터에서 API 키를 발급받아 사용하는 개발사

• 언제까지 마이그레이션 해야 하나요 ? – 기존 API 호출 방식은 2016 년 12 월 말까지만 지원합니다 . – 따라서 2016 년 12 월 중순까지 마이그레이션 완료해야 하며 , 이는 제휴신청 승인까지 포함이므로 2

주 이상 여유를 두시는 것이 좋습니다 .

• 마이그레이션 작업은 어떻게 해야 하나요 ? – 네이버 개발자센터에서 처리할 것들

• 애플리케이션 정보 등록 및 설정• 제휴 신청

– 애플리케이션에서 해야할 것들• API 호출 방법 변경• 서비스 URL 과 애플리케이션 등록 정보 확인

- 감사합니다 -

https://developers.naver.com