앱인벤터 강좌 - 텍스트 음성으로 변환하기

앱인벤터 강좌 - 텍스트 음성으로 변환하기

앱인벤터로 간단한 예제를 한번 만들어보겠습니다.

텍스트 상자에 글씨를 입력하고 버튼을 누르면 

텍스트 상자에 있는 문자를 음성으로 변화하여 읽어주는 앱을 만들어 보겠습니다.

앱인벤터 텍스트 음성으로 변환 실행 동영상

꼭 알아두기

컴퍼넌트를 추가하는 방법과 이름을 변경하는 방법

블록 사용하는 방법을 꼭 알아두시기 바랍니다.

어플리케이션 실행 조건

1. 텍스트 상자에 문자를 입력한다.

2. 버튼을 클릭하면 텍스트 상자에 있는 문자를 음성으로 변환시켜 준다.

화면 구성하기

▲ 먼저 새로운 프로젝트를 생성해 줍니다.

파일이름은 꼭 시작을 영문으로 시작해야합니다.

 ▲ 사용자 인터페이스에 있는 텍스트 상자와 

버튼 상자를 클릭하여 위에 그림 처럼 배치를 시켜 줍니다.

▲ 컴포넌트에서 텍스트 상자를 클릭한 다음 

2번 이름바꾸기를 클릭하여 3번 처럼 "텍스트_입력상자"라고 이름을 변경해 줍니다.

여기서 앞에 "텍스트"라는 단어는 그대로 두고 뒤에 이름만 변경해 줍니다. 

앞에 부분을 그대로 두는 이유는 코딩을 할때 어떤 종류의 컴퍼넌트인지 알기 위해서입니다. 

다시 말해 앞부분까지 지워버리면 코딩 작업을 할때

이 블록이 텍스트 박스였는지 버튼이였는지 이미지였는지 

알 수 없기에 앞부분은 남겨 두고 뒤에 이름만 변경하는 것입니다. 

▲ "버튼1"도 이름을 "버튼_말하기"로 변경을 해줍니다.

▲ 팔레트에서 미디어를 클릭한 후 

"음성 변환" 컴퍼넌트를 클릭하여 화면에 떨거 줍니다.

▲ "보이지 않는 컴포넌트: 라는 부분이 생기면서 

음성변환 컴퍼넌트가 들어갔습니다.

▲ 버튼에 보여지는 속성에서 변경해 보겠습니다. 

먼저 버튼을 클릭하고 2번 속성에서 텍스트를 "말하기 버튼" 이라고 변경해 줍니다.

▲ 버튼의 글자가 "말하기 버튼"으로 변경되었습니다.

블록설정하기

▲ 오른쪽 상단에 잇는 "블록" 버튼을 클릭합니다.

▲ 블럭 안에 있는 공통 블록과 스크린 안에 있는 컴포넌트를

클릭하여 블록을 뷰어 안에 올려 놓습니다.

▲ 1번 "버튼_말하기"를 클릭하면 뷰어 화면에 

버튼에서 사용할 수 있는 블록들이 나옵니다. 

여기서 "언제실행 버튼_말하기.클릭"블록을 클릭합니다.

▲ 뷰어 화면에 블록이 놓여집니다.

▲ 음성변환도 클릭하여 "호출 음성변환1 말하기 메세지" 블록을 클릭합니다.

▲ 버튼 블록에 그림처럼 넣습니다.

▲ 텍스트 입력상자를 클릭하고 

"텍스트_입력상자.텍스트"블록을 가져와 놓습니다.

▲ 음성_변환 블럭에 텍스트 블록을 넣습니다.

▲ AI 컴패니언을 통해 스마트폰에서 앱을 실행합니다.

▲ 텍스트 상자에 문자를 입력하고  

버튼을 클릭하면 "사랑해"라는 음성이 나옵니다.

앱인벤터를 이용하여 간단한 앱을 만들어보았습니다.

복잡한 앱은 어렵겠지만 한번 해보니 그렇게 어렵지 않지요?

여러분도 여러분들의 앱을 한번 만들어보세요^^