2-2강. 글자 읽어주는 앱 - 디자이너 작업하기

디자이너 작업

앱 소개에서 설명한 내용을 바탕으로 간단히 앱에 필요한 기능을 정리해보면, 글자 입력상자, 읽어주기 버튼, 글자를 읽어주는 기능이 필요하다는 것을 알 수 있습니다.

글상자(TextBox) - 글자 입력상자 만들기

왼쪽 팔레트에서 TextBox(글상자)를 뷰어(Viewer)로 끌어다 놓습니다.

이제 글상자를 만들었으니 버튼을 만들어야겠군요.

버튼(Button) - 읽어주기 버튼 만들기

(1) 버튼(Button)을 뷰어(Viewer)로 끌어다 놓습니다.

(2) 프로퍼티(Properties)에서 Text속성을 "읽어주기"로 바꿔줍니다. Text속성을 바꾸면, 버튼에 있는 글자가 "읽어주기"로 바뀐 것을 볼 수 있습니다.

다음은 글자를 읽어주는 기능이 필요합니다.

글자읽기(TextToSpeech) - 글자 읽어주기 기능

TextToSpeech는 글상자(TextBox)와 버튼(Button)과 달리 Media(미디어) 항목에 있습니다.

위에 그림을 참고해서 먼저 Media를 누르면 나오는 항목중에 TextToSpeech를 뷰어(Viewer)로 끌어다 놓습니다.

TextToSpeech 기능은 화면에 보일 필요가 없는 기능이기 때문에 뷰어(Viewer) 하단에 위치합니다. (첫 번째 만들었던 앱에서 Sound 기능도 아래에 위치했었습니다.)

이제 디자이너 작업을 모두 마쳤습니다. 

다음은 블록에디터에서 코딩을 해보겠습니다. => 블록에디터 코딩하기

연재 바로가기 => http://www.educoding.kr/appinventor_info