앱 인벤터2 책을 만드는 중입니다. 중간 중간 원고를 MS워드의 블로그 보내기 기능을 이용해서 블로그에도 공개해보려고 했는데... 밑에 보시는 것처럼 보기 좋지 못하네요.
원고를 그대로 블로그에 올리는 작업은 그만두고, 앞으로는 예제를 하나씩 소개 하겠습니다.^^
3장_ 첫 번째 앱 따라하기
1. 앱 인벤터 시작
이제 준비가 끝났으니 크롬 브라우저를 실행시켜 아래 주소로 앱 인벤터에 들어가자.
그림 2. 화면이 온통 영어라고 지레 겁먹을 필요는 없다. 필요한 기능만 사용하면 된다.
2. 프로젝트(Project) 생성하기
이제 간단한 앱을 만들어 보자. 스마트폰 화면에 글자를 입력하면, 입력한 글자를 읽어 주는 앱을 만들어 볼 것이다.
오른쪽 상단에 있는 [Create] 버튼을 클릭한다.
만약 구글 계정에 로그인이 안되어 있다면 로그인하라는 메시지가 뜬다.
아래 그림처럼 메시지가 뜨지만 [Continue]를 눌러 넘어가자.
이번 장은 그냥 따라하기만 하면 된다. 자세한 설명은 다음 장에서 하나씩 하게 된다.
그림 4. 이런 화면이 뜬다. 에러 메시지가 아니니 걱정하지 말자. 개발한 앱을 실행하는 방법을 설명하는 화면으로 다음 장에서 실행 방법을 설명한다.
이제 본격적으로 앱을 만들어 보자.
우선 새로운 프로젝트를 생성해야 한다.
화면 상단에 있는 메뉴에서 [Connet] > [Start new project …]를 선택하자.
그림 5. 화면 상단 메뉴. [Connect] 메뉴를 클릭하면 그림처럼 서브 메뉴가 활성화 된다.
프로젝트 이름(Project name)에 "talkTest"라고 입력하고 [OK] 버튼을 클릭한다.
그림 6. 프로젝트 이름을 입력한다.
이제 "talkTest"라는 이름으로 프로젝트가 생성되고 아래 그림처럼 작업할 수 있는 화면이 뜬다.
처음보는 사람은 화면이 다소 복잡해 보일 수도 있겠지만, 알고보면 정말 간단하고 직관적인 개발환경을 갖추고 있다. 가장 왼쪽에 있는 팔레트(Paletter)에서 필요한 기능을 화면(Viewer)로 끌어다 놓으면서 화면 구성을 하면 된다.
이번 장은 순수하게 따라하면서 첫 번째 앱을 만들어 보는 것이 목적이므로 화면 설명은 다음 장으로 미루고 그냥 따라해보자.
그림 7. 처음에는 복잡해 보일지 모르지만 사용하다 보면 너무나 간단하게 작업할 수 있다.
3. 디자이너(Designer)에서 화면 구성하기
지금 만드는 앱은 사용자가 스마트폰에 글자를 입력하고 버튼을 누르면 음성으로 입력한 글자를 읽어 주게 된다.
도식 1. 이 앱의 작동 순서를 간단히 표시해 봤다.
화면 구성에 필요한 요소를 생각해 보자.
먼저 사용자가 글자를 입력할 수 있는 글상자가 필요하고, 입력 후에 터치할 버튼이 필요하다.
왼쪽 팔레트(Palette)에 있는 "TextBox"가 글상자, "Button"이 버튼을 만들어 준다. TextBox와 Button을 아래 그림처럼 뷰어(Viewer)로 끌어다 배치하자.
그림 8. 작업화면 가장 왼쪽에 있는 팔레트(Palette)에서 뷰어(Viewer)로 끌어다 놓는 것으로 화면 구성을 마칠 수 있다.
그리고 한 가지 기능이 더 필요하다.
바로 입력한 글자를 음성으로 읽어주는 기능이다.
이 기능은 "Media"에 있는 "TextToSpeech"를 이용하면 된다.
아래 그림처럼 TextToSpeech 를 뷰어(Viewer)로 끌어가면 뷰어 하단에 "TextToSpeech1"이 추가된 것을 볼 수 있다. "TextToSpeech"는 화면에 표시되는 요소가 아니라 기능적인 부분만 담당하기 때문에 화면에 표시되지 않는다.
이 때, 반드시 화면 안쪽으로 끌어다 놓아야 한다. 화면 아래쪽에 끌어다 놓으면 제대로 추가되지 않는다.
그림 9. Media에 있는 TextToSpeech룰 뷰어(Viewer)로 끌어간다. TextToSpeech는 화면에 표시될 필요가 없는 기능이기 때문에 뷰어에 표시되지 않고, 뷰어 하단에 별도로 표시된다.
화면 배치는 끝났지만 어색한 부분이 하나 있다.
버튼에 "TextToSpeech1"이라고 표시되어 있어 이 버튼이 어떤 동작을 하는지 알기 어려운 문제가 있다.
이 번에는 버튼에 있는 "TextToSpeech1" 문구를 "읽기"로 바꿔보자.
아래 그림처럼 뷰어(Viewer)에 있는"Text for Button 1"이라고 적힌 버튼을 클릭하거나, 컴포넌트(Components)에 있는 "Button1"을 클릭해보자. 그럼 가장 오른쪽에 있는 프로퍼티(Properties)에 버튼 속성을 변경할 수 있도록 준비된다.
그림 10. 뷰어(Viewer)에 있는 버튼을 클릭하거나, 컴포넌트(Components)에 있는 Button1을 클릭하면 가장오른쪽에 있는 프로퍼티(Properties)를 수정할 수 있다. 프로퍼티(Properties)에서 Text를 원하는 문구로 수정하면 버튼에 표시된 문구가 변경된다.
그 중에 "Text" 항목에 "Text for Button 1"이라고 입력된 것을 확인 할 수 있다. 이 문구를 "읽기"라고 변경하면 된다.
컴포넌트(Components)는 앱에 추가한 화면 구성요소나 기능들을 목록으로 보여주는 역할을 하고, 프로퍼티(Properties)는 각 요소나 기능들의 속성을 변경할 수 있도록 해준다. 다음 장에서 화면 구성과 사용법을 더 자세히 다룬다.
4. 블록(Blocks) 코딩(Coding)하기
이제 디자인은 모두 마쳤으니 코딩만 하면 된다.
이전 장에서도 설명했지만 앱 인벤터는 일반적인 텍스트 입력 방식이 아닌 블록(Blocks)을 쌓아 나가는 방식으로 코딩한다.
앱 인벤터는 앞서 디자인을 했던 디자이너(Designer) 화면과 코딩을 하는 블록(Blocks) 두 가지 화면으로 구성되어 있다.
먼저 블록 코딩을 위해서 화면을 전환해 보자.
화면 오른쪽 상단에 보면 아래처럼 두 개의 버튼이 있다. 여기서
버튼을 클릭하면 블록 코딩 화면으로 전환된다.
그림 12. 디자이너와 블록 화면을 전환할 수 있는 버튼. 앱 인벤터 화면 오른쪽 상단에 있다.
이제 아래 화면처럼 블록 코딩을 위한 화면이 준비되었다.
그림 14. 블록 코딩을 위한 화면. 좌측에 있는 블록을 끌어다 중앙에 있는 넓은 화면에 쌓아 나가면서 앱을 만든다.
좌측에 있는 "Button1"을 클릭하면 사용할 수 있는 블록 목록이 나타난다.
그 중에서 "When Button1.Click do" 블록을 중앙 화면으로 끌어다 놓는다.
그림 15. 좌측에서 블록을 선택해서 중앙화면으로 끌어다 놓는 작업으로 코딩이 이루어 진다.
이제 중앙에 아래처럼 블록 하나가 배치되어 있게 된다.
그림 16. 중앙 화면에 끌어다 놓은 블록이 배치되어 있다.
다음은 입력한 글자을 읽어주는 블록을 추가할 차례다.
블록에서 "TextToSpeech1"를 선택하고 나타난 블록 목록중에서 "call TextToSpeech1.Speak" 블록을 화면으로 끌어다 놓는다. 이 때 블록 모양을 잘 보면서 끌어다 놓아야 한다. 블록 모양을 보면 딱 들어 맞게 생겼다는 것을 알 수 있다.
그림 17. 블록을 모양에 맞게 쌓는 것이 중요하다.
그림 18. Button1을 눌렀을 때, TextToSpeech1의Speak가 동작한다.
다음은 글상자에 입력된 글자를 가져와야 한다.
"TextBox1"에
있는
블록
중에
"TextBox1.Text"를
끌어다
놓는다. 역시
모양에
맞게
배치해야 한다.
이제 완성된 블록 코드를 보자.
그림 20. 완성된 블록 코드.
이걸로 앱이 완성되었다. 이제 만든 앱을 실행시켜 보자.
5. 앱 실행하기
너무나 간단해서 허무하게 느껴질지도 모르겠다.
앱을 실행하는 과정도 간단하다.
앱을 실행하는 방법은 세 가지가 있지만 이번 장에서는 안드로이드 스마트폰을 갖고 있고, 스마트폰과 컴퓨터가 모두 동일한 WiFi에 연결되어 있다는 전제하에서 실행해 볼 것이다.
스마트폰이 없거나, WiFi로 연결할 수 없다면 다음 장에 있는 설명을 봐야한다. 다만, 앱 인벤터 2에서 가장 손쉽고 빠르게 결과를 확인할 수 있는 방법이기 때문에 이 방법을 추천한다.
(1) 작업중인 컴퓨터와 스마트폰이 동일한 WiFi에 연결되어 있어야 한다.
(2) 스마트폰 구글 플레이에 접속하여 "MIT AI2 Companion" 앱을 설치한다.
그림 21. QR코드를 인식시켜서 MIT AI2 Companion 앱을 설치할 수 있다.
(3) 앱 인벤터 "Connect" 메뉴에 있는 "AI Companion"을 클릭한다.
그림 22. AI Companion을 이용해서 앱을 실행시킨다.
(4) 스마트폰에서 방금 설치한 MIT AI2 Companion 랩을 실행하고, "scan QR code" 버튼을 눌러 화면에 뜬 QR코드를 스캔한다. 또는 모니터에 뜬 6자리 코드를 입력하고 "connect with code" 버튼을 눌러도 된다.
그림 23. 화면에 QR코드와 6자리 코드가 나온다. 스마트폰 MIT AI2 Companion 앱으로 QR코드를 스캔하거나, 6자리 코드를 직접입력해서 실행시켜 볼 수 있다.
그림 24. MIT AI2 Companion 앱 실행화면. 파란색 "scan QR code"를 눌러 모니터에 나타난 QR코드를 스캔하면 간단하게 앱을 실행시킬 수 있다.
(5) 이제 앱이 실행된 화면을 볼 수 있다. 글사장에 "안녕하세요"라고 입력하고 "읽기" 버튼을 눌러보자. 스마트폰에서 "안녕하세요"라고 명쾌하게 읽어 주는 것을 들을 수 있다.
그림 24. 원하는 문구를 입력하고 "읽기" 버튼을 눌러보자.
처음으로 따라하며 만들어 본 결과 어떤가?
이 정도면 나도 멋진 앱을 만들어 볼 수 있겠다는 자신감이 들 것이다.
여기까지 잘 안되었더라도 다음 장부터 차근 차근 살펴보며 따라하면 즐겁게 나만의 앱을 만들 수 있게 될 것이다.
'SW교육 > 앱인벤터' 카테고리의 다른 글
| 들어가기. 앱인벤터 소개 (0) | 2015.03.30 |
|---|---|
| 앱인벤터 앱 만들기, 새롭게 연재를 시작합니다. (0) | 2015.03.29 |
| 앱 인벤터 따라하기 2 - 2장 따라할 준비하기 (2) | 2014.08.24 |
| 앱 인벤터 화면 설명 (1) | 2014.08.17 |
| 앱 인벤터 프로젝트 실행방법 1,2,3 (0) | 2014.08.17 |