22. 앱인벤터 AI 번역기 만들기

 

 

 

 

오늘 만들어 볼 앱은 AI 번역기 앱입니다.

앱인벤터에 있는 얀덱스 번역기를 활용해 앱을 만들어 보겠습니다.

 

얀덴스 번역 사이트에서는 언어 코드를 제공하는데,

이 언어 코드는 다른 번역 시스템에서도 공용으로 사용이 됩니다.

아래 링크를 눌러 어떤 언어 코드가 사용되는지 확인해 볼 수 있습니다. 

https://yandex.com/dev/translate/doc/dg/concepts/api-overview.html

Overview. Developer's guide

 

 

 

 

목차

 

 

1. 앱 화면 및 기능 구상하기

 

 

번역기 앱의 기능은 간단합니다.

번역할 내용을 적고, 번역할 언어를 고른 뒤, 번역하기 버튼을 누르면 번역 내용이 나타납니다.

그리고 AI보이스가 번역 내용을 읽어줍니다.

 

 

 

 

2. 앱 화면 만들기

 

먼저 디자이너화면을 살펴볼까요?

 

레이블과 입력창을 넣어주고

그 아래에 수평배치를 넣어서 버튼과 스피너를 추가해주었습니다.

스피너는 항목 중 1가지를 고르는 기능을 말합니다.

 

그리고 수평배치 아래에 레이블2를 넣어준 뒤

아래에 수평배치2를 넣어주었습니다.

이 수평배치2에는 이전/다음 스크린으로 이동하는 버튼들을 넣어주었습니다.

 

보이지 않는 컴포넌트는 2개이고

번역기능과 음성변환 기능입니다. 

 

 

 

 

 

 

3. 코딩하기

 

이제 코딩을 해보겠습니다. 

번역 코드는 간단한데,
스피너 코드가 추가되면서 코딩이 좀 복잡해집니다.

 

 

3-1. 번역 코딩하기

 

번역 코드만 보자면 아래와 같습니다.↓

보이지 않는 컴포넌트 중 번역기 컴포넌트를 누르면 '호출 번역요청하기' 블록이 나옵니다.

이 블록에 번역 언어 코드를 넣어주고, 번역할 텍스트를 넣어주면 되죠.

만약 영어로 번역하고 싶다면 'en', 일본어로 번역하고 싶다면 'ja'를 써주면 됩니다.

언어 코드는 아래 링크에서 확인해서 적어줍니다.

https://yandex.com/dev/translate/doc/dg/concepts/api-overview.html

Overview. Developer's guide

 

 

 

3-2. 스피너 코딩하기

 

이번에는 스피너를 사용할 것이기 때문에

스피너에서 선택한 언어코드를 번역 언어코드에 넣어주겠습니다.

이를 위해 언어코드라는 변수를 만들어 주어야 합니다.

 

그리고 번역 요청하기를 호출했을 때 언어 코드를 '언어코드'라는 변수로 넣어줍니다.

번역결과라는 이름의 레이블에 번역 결과를 가져오면 됩니다.

 

 

 

다음은 스피너와 관련된 코드입니다.

스크린이 초기화 되었을 때 스피너에 요소값을 넣어줍니다.

즉 이 앱이 실행되었을 때 스피너에 영어, 일본어, 스페인어를 넣어주고 기본 선택값은 영어로 해 놓는 것이죠.

 

그리고 사용자가 스피너에서 항목을 선택했을 때를 코딩해준다.

만약 선택된 항목이 영어라면 언어코드 변수 값을 en으로 해주고

만약 선택된 항목이 일본어라면 언어코드 변수 값을 ja로 해주고

만약 선택된 항목이 스페인어라면 언어코드 변수값을 es로 해줍니다.

 

이 외 다른 언어를 넣고 싶다면 리스트에 항목을 더 추가하고, 조건문도 더 추가해주면 된다. 

이제 스크린 이동 버튼 2개만 코딩해주면 끝이다~!

 

완성된 최종 코드는 다음과 같습니다. ↓

 

 

 

 

 

4. 업그레이드하기

 

만약 여기서 음성 변환까지 추가한다면 어떨까요?

번역된 내용을 AI 보이스가 말해주는 것이죠. 

 

이 경우는 번역을 받았을 때! 여기만 조금 추가해주면 됩니다.

**일단 음성변환 언어 값은 언어코드 변수로 바꾸어줍니다.

이렇게 해야 음성변환을 할 때 오류가 없이 잘 작동합니다.

안해주면 콩글리시처럼 읽습니다...

 

그리고 나서 음성변환 말하기 블록을 가져오고, 메시지에는 번역한 결과를 넣어줍니다.

 

 

---

음성변환까지 추가한 최종 코드는 아래와 같다.

 

 

 

5. 테스트하기

 

 

마지막 테스트입니다.

번역하고 싶은 내용을 입력하고

언어를 선택합니다.

그리고 번역하기 버튼을 클릭하면!

번역이 완료되고, 음성으로도 읽어줍니다.