앱인벤터 나에게말해줘 세계를 앱

앱인벤터 나에게말해줘 세계를 앱

 

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

첫번째 튜터리얼은 헬로코디 라는 앱을 만들어보았다. 처음이라면 헬로우코디 앱을 먼저 만들어보기를 추천한다.

만드는데 30분도 걸리지 않는다.

 

이번에는 '나에게말해줘'라는 앱을 조금 응용해서 한국어를 세계 주요 언어로 번역해서 말하고 보여주는 나에게말해줘 세계를 앱을 만들어 보자.

기본 개념은 다음과 같다.

- 언어를 선택한다.

- 텍스트를 입력받는다.

- 입력한 텍스트를 소리로 읽어주고 레이블에 보여준다.

 

자, 이제 시작해보자...

 

앱인벤터 환경설정 등은 아래 글을 참고바란다. 개발환경과 애뮬레이터 설치 등은 아래 글을 참고바란다.

 

. 나에게말해줘 세계를 기본 설계

텍스트를 입력받는다. 

버튼을 통해 입력한 텍스트를 읽는다.

 

필요한 컴포넌트는 목록선택버튼, 텍스트박스, 버튼, 음성변환 컴포넌트를그리고 Translator 컴포넌트를 사용한다.

 

컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.

 

목록선택버튼으로 번역할 언어를 선택한다.

텍스트박스 컴포넌트 : 글자를 입력받는 컴포넌트이다.

버튼 컴포넌트 : 클릭 이벤트를 사용자에게 제공하며, 버튼을 클릭하면 이벤트를 사용자에게 제공한다. 클릭 이벤트 때 텍스트박스 컴포넌트의 글자를 읽어줄 것이다.

수평배치 컴포넌트 : 텍스트입력과 버튼 컴포넌트를 수평하게 배치하기 위해 사용한다.

음성변환 컴포넌트 : 텍스트를 음성으로 변환하는 컴포넌트이다.

Translator 컴포넌트 : 텍스트를 목록선택에서 선택한 언어로 번역한다.

 

목록선택버튼 컴포넌트 설정값 설정하기

목록선택버튼 컴포넌트에 알고 싶으면 아래 글을 참고하세요

 

앱인벤터 목록선택버튼 컴포넌트

앱인벤터 목록선택버튼 컴포넌트

한글을 세계 주요 언어로 번역하여 말하고 화면에 보여주는 기능 중, 세계 언어를 선택하기 위해 목록선택버튼 컴포넌트를 사용한다.

 

요소값에 "영어, 프랑스어, 일어, 중국어, 스페인어, 이탈리어"를 설정하고 목록선택에서 6개 주요 언어를 선택할 수 있도록 한다.

 

텍스트박스 컴포넌트 설정값 설정하기

텍스트박스 컴포넌트에 알고 싶으면 아래 글을 참고하세요

 

 

앱인벤터 텍스트박스 컴포넌트

 

. 사용자 인터페이스에서 텍스트박스 컴포넌트를 뷰어에 드래그&드롭한다.

. 속성값을 설정한다.

  - 힌트 : '글자를 입력하세요' 입력한다.

 

버튼 컴포넌트 설정값 설정하기

. 사용자 인터페이스에서 버튼 컴포넌트를 뷰어에 드래그&드롭한다.

. 속성값을 설정한다.

  - 텍스트 : "읽어줘요"를 입력한다.

 

수평배치 컴포넌트 설정값 설정하기

. 팔레트에서 레이아웃 안에 있는 수평배치 컴포넌트를 뷰어에 드래그&드롭한다.

. 속성값을 설정한다.

  - 수평정렬 : 가운데

  - 수직정렬 : 가운데

  - 너비 : '부모 요소에 맞추기'로 설정한다.

 

음성변환 컴포넌트 설정값 설정하기

. 팔레트의 '미디어'에서 '음성변환' 컴포넌트를 드래그&드롭한다.

. 음성변환 컴포넌트는 화면에 보이지않는 컴포넌트이다.

 

. 음성변환컴포넌트 속성값 설정하기

  - 별도로 설정은 없다.

 

음성변환 컴포넌트에 대해 더 자세히 알고 싶으면 아래 글을 참조바란다.

 

 

앱인벤터 음성변환 컴포넌트

 

Translator 컴포넌트 설정값 설정하기

. 팔레트의 '미디어'에서 'Translator' 컴포넌트를 드래그&드롭한다.

설정값은 특별히 없다.

 

설계 아이디어

목록선택버튼을 통해 번역할 언어를 선택한다.

텍스트를 선택한 언어로 번역하여 음성으로 변환하여 읽어주는 프로그램이다.

텍스트는 텍스트박스 컴포넌트를 통해서 입력한다.

음성변환은 텍스트박스 컴토넌트에 입력한 텍스트를 입력받아 소리로 변환시켜 말한다.

버튼은 음성변환을 실행시키는 이벤트를 제공한다.

 

- 목록선택버튼에서 언어를 선택한다.

- 텍스트박스에 글자를 입력한다.

- "읽어줘요" 버튼을 클릭한다.

  . 텍스트박스의 글을 사용하여 목록선택한 언어로 번역을 요청한다. 

  . 번역을 받았을 때, '번역'한 글을 음성변환의 말하기를 통해 글을 읽는다.

  . 레이블에 번역한 글을 보여준다.

 

코딩블럭

블록 코딩은 정말 간단한다.

우리가 무엇을 할 것인지 생각해보라

- 목록선택번트에서 언어를 선택한다.

- 텍스트박스를 통해 글자를 입력한다.

- "읽어줘요" 버튼을 클릭한다. 

  - 번역을 요청한다.(언어, 텍스트박스의 텍스트)

- 번역이 완료되었을 때

  - 음성변환에서 '말하기' 호출한다.

  - 레이블에 번역한 글을 보여준다.

 

말하는 그대로 코딩을 하면 된다.

 

. 전역변수

. 언어 : 목록선택버튼에서 선택한 언어를 ISO 639-1 코드를 저장하는 변수이다.

 

앱인벤터 나에게말해줘세계를 언어 변수

 

. 목록선택버튼을 클릭했을 때

목록선택버튼을 클릭하면 "영어, 프랑스어, 일어, 중국어, 스페인어, 이탈리어" 중에 하나를 선택한다.

언어를 선택한 후에, 해야 할 작업이 하나 있다.

목록선택에서는 영어, 프랑스어 등 한글로 표기되어 있는데, Translator 블록에서 "번역언어코드"로 변환해야 한다.

영어는 'en', 프랑스어는 'fr', 일어는 'ja', 중국어는 'zh', 스페인어는 'es', 이탈리어는 'it'로 변경해주어야 한다.

 

https://ko.m.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D

ISO 639-1 코드 목록 - 위키백과, 우리 모두의 백과사전

 

앱인벤터 나에게말해줘세계를 앱 목록선택버튼 선택후에 블록

 

. 버튼을 클릭했을 때

왼쪽 스크린1에서 버튼 컴포넌트를 클릭하면 블럭들이 나오는데, 그중에서 '클릭했을때' 블록을 드래그&드롭한다.

그리고 Translator 블록들 중에서 '번역요청하기' 블록을 드래그&드롭한다.

번역언어코드는 전역변수 언어에 가져오기를 입력한다.

번역할텍스트는 텍스트박스의 텍스트를 입력한다.

 

앱인벤터 나에게말해줘세계를 버튼 클릭했을때 블록

 

텍스트를 Traslator 컴포넌트에 번역요청하기를 실행한다.

이후는 번역이 완료되면 처리하는 블록을 완성해보자

 

. 번역을받았을때

왼쪽 스크린1에서 Translator 컴포넌트를 클릭하면 블럭들이 나오는데, 그중에서 '번역을받았을때' 블록을 드래그&드롭한다.

번역을 요청한 후, Translator 컴포넌트는 번역을받았을때 블록을 제고하여 번역이 완료되면 실행할 일들을 제공한다.

번역한 후, 나에게말해줘세계를 앱에서는 번역한 글을 '음성변환'의 말하기를 통해 소리로 글을 읽고, 레이블의 텍스트에 번역값을 보여준다.

 

 

앱인벤터 나에게말해줘세계를 번역을받았을때 블록

 

실행결과 화면

 

앱인벤터의 나에게말해줘 앱을 작성하였다. 실행 결과 화면은 아래와 같다. 

 

첫번째 화면은 앱이 처음 구동되었을 때 화면이다. 

앱인벤터 나에게말해줘세계를 첫실행화면

 

번역할 언어를 선택한다.(목록선택버튼을 클릭한다.)

앱인벤터 나에게말해줘세계를 언어선택화면

 

언어를 선택한 후의 화면이다.

앱인벤터 나에게말해줘세계를 언어선택 후 화면

 

읽어줘요 버튼을 클릭하였을 때의 화면이다.

레이블에는 'Tell me'라고 나오고 소리로 '텔미'라고 읽어준다.

앱인벤터 나에게말해줘세계를 읽어줘버튼 클릭후 화면

아래는 실행 동영상을 실행한 결과 화면이다.

 

앱인벤터 나에게말해줘세계를 동영상 실행화면

 

 

지금까지 '나에게말해줘' 앱을 리뉴얼해서 '나에게말해줘세계를' 앱을 작성하였다. 단순히 텍스트를 소리로 바꾸는 앱을 언어 변환하여 여행갔을 때 활용할 수 있는 앱을 만들어 보았다. 

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.