앱인벤터 나에게말해줘 앱

앱인벤터 나에게말해줘 앱

 

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

 

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

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

 

이번에는 '나에게말해줘'라는 앱을 만든다. 기본 개념은 아래와 같다.

- 텍스트를 입력받는다.

- 입력한 텍스트를 소리로 읽어준다.

 

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

 

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

 

0. 앱인벤터 개발환경, hello World

0. 앱인벤터 개발환경, hello World

 

1-1 앱인벤터 개발환경-애뮬레이터 설치

1-1 앱인벤터 개발환경-애뮬레이터 설치

 

. 나에게말해줘 기본 설계

텍스트를 입력받는다. 

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

 

필요한 컴포넌트는 텍스트입력 컴포넌트와 버튼 컴포넌트 그리고 음성변환 컴포넌트를 사용한다.

 

컴포넌트

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

 

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

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

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

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

 

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

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

 

 

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

 

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

. 속성값을 설정한다.

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

 

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

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

. 속성값을 설정한다.

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

 

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

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

. 속성값을 설정한다.

  - 수평정렬 : 가운데

  - 수직정렬 : 가운데

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

 

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

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

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

 

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

  - 별도로 설정은 없다.

 

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

 

 

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

 

 

설계 아이디어

텍스트를 음성으로 변환하여 읽어주는 프로그램이다.

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

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

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

 

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

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

. 음성변환을 호출하고 말한다.

 

 

코딩블럭

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

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

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

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

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

 

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

 

. 버튼을 클릭했을 때

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

그리고 음성변환 블록들 중에서 '말하기' 블록을 드래그&드롭한다.

'말하기' 블록에서 메시지 입력값을 텍스트박스의 텍스트를 선택하여 입력한다.

 

앱인벤터 나에게말해줘 블록코딩

 

코딩은 완성하였다.

지금까지는 블록코딩이 매우 단순하고 쉽다. 그러나 코딩을 반복하면서 점점 어려워질 것이니 간단하게 넘기지 말고 하나씩 생각하고 블록을 쌓기를 추천한다.

 

실행결과 화면

 

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

 

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

앱인벤터 나에게말해줘 앱 실행화면

 

 

앱인벤터 나에게말해줘 앱 실행 동영상

 

 

좀더 생각해보기

'나에게말해줘' 앱에서 몇가지 기능을 추가해보자.

. 먼저 텍스트박스에 글자가 없으면 알림을 띄워서 사용자에게 알려주는 기능을 추가해보자.

. 번역을 통해 말해주는 프로그램 기능을 추가해보자.(translator 컴포넌트를 활용해보자)

. 번역해주는 언어를 선택하고 번역하는 앱을 만들어보자

 

다음 글에 추가해서 작성을 해 볼 것이다.

 

지금까지 '나에게말해줘' 앱을 작성하였다. 버튼과 레이블 그리고 소리 컴포넌트를 활용하여 간단한 블록 코딩까지 해보았다. 블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.