[APP Inventer] 음성변환을 사용한 <Hello World> 어플리케이션 만들기

1. 어플리케이션 소개

<어플리케이션 실행화면>

첫번째로 만들어볼 어플리케이션은 "Hello World" 버튼을 누르게 되면 이미지가 변경되고 사용자가 직접 입력해 놓았던 텍스트를 [음성변환]으로 변경하여 핸드폰에 내장되어 있던 음성으로 변환하여 들려주는 어플리케이션이다.

2. 디자이너

(1) 사용할 컴포넌트 구성 설명

[Hello World] 어플에 사용할 디자이너 컴포넌트는 아래와 같다.

팔레트	컴포넌트	설 명
이미지		원하는 이미지를 넣을 수 있는 컴포넌트
사용자 인터페이스		버튼을 클릭하게 되면 코딩된 동작을 하게 되는 컴포넌트
레이아웃		컴포너트들을 수직방향으로 쌓아주는 컴포넌트
미디어		텍스트를 음성으로 변경해주는 컴포넌트

그리고 컴포넌트들의 구성은 [수직배치]를 바탕에 깔아두고 [수직배치] 안에 [이미지]와 [버튼] 컴포넌트들을 넣는다. [음성변환]은 보이지않는 컴포넌트이므로 포함관계를 생각안해도 된다. 디자이너 위치구성은 아래와 같다.

<[Hello World] 어플 위치 구성>

(2) 사용할 컴포넌트 속성 설명

각 컴포넌트의 속성은 [디자이너]창에서 [컴포넌트] 목록의 각 컴포넌트들을 선택하고 [속성]에서 변경이 가능하다.

- 

변경할 속성은 높이와 너비이며 모두 [부모에 맞추기]를 선택한다.

- 

변경할 속성은 높이와 너비, 사진이다. 높이는 [80percent]로 너비는 [부모에 맞추기], 사진은 미디어에 있는 사진 아무거나 클릭하면 된다. (포스팅에 업로드한 이미지를 미디어에 업로드)

- 

변경할 속성은 높이와 너비, 텍스트이다. 높이는 [10percent]로 너비는 [부모에 맞추기], 텍스트에는 [Hello World]로 바꾸어준다.

3. 블록

컴포넌트	블록	설 명
버튼		버튼을 클릭하게되면 블록안에 코딩되어 있는 코드가 실행되는 블록
이미지		이미지 컴포넌트 안에 들어갈 사진값을 설정하는 블록
텍스트		원하는 텍스트를 입력할 수 있는 블록
리스트		리스트를 만들 수 있는 블록
리스트		리스트 중 임의의 리스트목록을 불러올 수 있는 블록
음성변환		텍스트를 음성으로 변환하여 출력하는 블록

4. 블록 코드 상세설명

앱 인벤터로 어플을 개발하기 위해서는 순서가 존재하는데 이유는 디자이너에서 각 컴포넌트들을 위치시켜야지 블록에서 컴포넌트에 해당하는 블록을 확인 할 수 있기 때문이다.

그러므로 위에서도 컴포넌트와 블록을 소개할때도 순서를 디자이너부터 진행했다.

아래는 블록코드를 소개하겠다. 블록코딩 같은 경우 절차지향적 코드를 제공하는데 이말은 차례대로 코딩을 해야한다는 것이다. 말로 표현하기엔 제한적인 부분이 존재하기 때문에 코드를 직접 만져가면서 설명을 하겠다.

---

(1) 버튼 클릭 시 이미지 변경하기

<그림 1>

앞에서 어플 설명에서 버튼을 눌러서 이미지를 바꾸고자 하였다. 그렇다면 위의 블록들 중 [그림1] 안에 포함되어야 할 블록은 [여러가지 이미지들이 들어간 리스트]이다. 이해를 돕기 위하여 많은 양이 아닌 3개의 이미지만을 사용하여 제작해 보겠다. 

<그림 2>

그리고 꼭 위의 파일 3개는 왼쪽하단에 있는 미디어에 업로드가 되어있어야한다.

<미디어에 이미지 파일 3개를 업로드한 화면>

이미지 3개가 들어가있는 리스트를 만들었다면 우리는 이 이미지들을 버튼이 클릭할 때마다 임의로 선택해야한다. 앱 인벤터에서는 3개 중 무작위로 선택을 할 수 있는 블록이 있으며 이 블록은 [그림 2]의 버튼과 같이 사용하면 된다.

<그림 3>

이미지 리스트를 만들었고 임의의 항목을 선택하도록 코딩하였다면 이제 할일은 [이미지] 컴포넌트의 이미지에 넣어야한다. 그러기 위해서는 아래와 같은 [이미지] 컴포넌트를 사용하면 된다.

<그림 4>

그리고 <그림 3>과 <그림 4>를 연결하게되면 [버튼을 클릭하면], [이미지 컴포넌트의 이미지가], [이미지 리스트안에서 임의의 선택되어 입력된다.]라는 블록 코드가 완성되고 아래와 같다.

<그림 5>

---

(2) 버튼 클릭 시 원하는 텍스트 음성으로 변환하기

버튼을 클릭하면 이미지변경하는 코드는 완성했다. 그 다음 코드는 원하는 텍스트를 [음성변환] 컴포넌트를 사용하여 음성으로 바꾸어야한다.

텍스트를 음성으로 바꾸는 블록은 아래와 같다.

<그림 6>

그리고 원하는 텍스트를 넣는 방법은 아래의 블록 안에 텍스트를 입력하면 된다.

<그림 7>

이번 어플은 "Hello World"를 음성으로 바꾸어 주는 어플이므로 아래와 같이 코딩하면 된다.

<그림 8>

---

(3) 코딩 완료하기

위에서 제작한 (1)과 (2)를 아래와 합쳐주면 블록 코딩이 끝나게 된다.

<그림 9>

5. 어플리케이션 구동 확인하기

앱 인벤터는 어플리케이션을 개발 후 아직 설치하지 않고 잘 운영 중인지 확인이 가능하다. 앱 인벤터 개발 화면의 위쪽을 보면 [연결]이라는 부분에서 [AI 컴패니얼]을 통해서 스마트폰에서 확인이 가능하다.

이때 주의해야하는 것은 컴퓨터와 스마트폰은 둘다 같은 와이파이에 연결되어있어야 합니다.

<그림 10>

<그림 11>

이때 컴퓨터와 같은 와이파이에 연결되어있는 스마트폰에서 [MIT AI2 Companion]의 [scan QR code]를 눌러 화면의 QR코드를 스캔하면 아래의 화면이 나오면서 연결되고 어플을 확인 할 수있다.

<그림 12>

<그림 13>

컴패니얼을 통하여 어플이 잘 운영되는지 확인되면 스마트폰에 직접 설치를 위하여 아이콘을 설정하고 직접 설치를 해보도록 하겠다.

6. 어플리케이션 설치

컴패니얼 연결을 통하여 어플리케이션의 정상적인 구동을 확인하였다면 스마트폰에 직접 설치를 해보자. 그 전에 스마트폰에서 보일 어플리케이션의 아이콘을 설정하자.

[디자이너] 모드에서 [컴포넌트] 목록에서 [Screen1]을 클릭하고 [속성]의 [아이콘]에 미디어에 올려놓았던 이미지 중 하나를 선택하면 아이콘이 설정된다. 필자는 라이언 사진 1번을 그대로 사용하겠다.

<그림 14>

아이콘 설정을 끝냈다면 본격적인 설치를 해보자. 앱 인벤터 화면의 상단의 [빌드]에 [앱(.apk 용 QR 코드 제공)]을 통하여 설치 QR코드를 발급받고 스마트폰에서 QR코드를 스캔하면 아래의 순서에 따라 설치를 진행하면 설치가 가능하다.

<그림 15>

<그림 16>

 

<설치과정과 설치한 화면>