앱 실행하기

앱 실행하는 방법은 앞서 두 차례 설명했기 때문에 생략하도록 하겠습니다.

잘 안되신다면 앞에 있는 "첫 번째 앱 만들기 - 블록에디터"의 마지막 부분이나, "앱인벤터 실행 방법"을 참고하시기 바랍니다.

Screenshot_2014-08-04-23-36-33.png

실행해 보시면, 화면처럼 글상자와 읽어주기 버튼이 나타납니다.

글상자에 원하는 글자를 입력하고, "읽어주기"버튼을 눌러보세요. 스마트폰이 읽어주는 멋진 소리를 듣게 되실 겁니다. ^^


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

저작자 표시 비영리 동일 조건 변경 허락
신고
  1. Malta 2015.04.19 17:01 신고

    와 감사히 잘보았습니다!! 정말 이해가 잘되네요 다음 포스팅이 기대됩니다

    • k2man 2015.04.21 16:38 신고

      방문해 주셔서 감사합니다.^^
      요즘 코딩교육관련 다른 프로젝트를 진행하느라 다음 포스팅 자꾸 늦어졌습니다.
      님 댓글 덕분에 꾸준히 포스팅해야 할 힘이 생겼습니다. ^^

  2. Pang 2015.05.08 01:53 신고

    안녕하세요~~저도 어플을 한번만들어보고싶은데 메모장같은 어플도 앱인벤터로 만들수 있나요??

블록에디터 화면전환

Blocks 버튼을 눌러 블록에디터 화면으로 전환합니다.

4.png

블록에디터 코딩하기

버튼이 클릭되었을 때

5.png

(1) 블록(Blocks)에서 Button1을 클릭하면 Button1의 사용가능한 블록 목록이 나타납니다.

(2) 우리는 읽어주기 버튼을 클릭했을 때 글자를 읽어줄 예정입니다. 따라서, when (Button1).Click do ... 블록을 뷰어(Viewer)로 끌어다 놓습니다.

해석해 보면 Button1이 클릭(Click) 되었을 때(when) ... 을 실행(do)하라는 의미가 됩니다.

글자 읽어주기

6.png

(1) 블록(Blocks)에서 TextToSpeech1을 선택합니다.

(2) 오른쪽에 나타난 블록 목록에서 call (TextToSppech1).Speak message ... 을 끌어다 방금 전 블록에 끼워 넣습니다.

참고로 블록 모양을 보면 끼워 넣을 수 있는 블록인지 알 수 있습니다. 지금 이 블록 말고는 기존 버튼 블록에 끼워넣을 수 없는 모양인 것을 볼 수 있습니다.

20140804_231540.png

현재까지 이런 형태로 만들어 졌으면 제대로 따라오신 겁니다.

읽어줄 대상 - 글상자(TextBox)에 입력된 글자(Text)

이제까지 작성된 내용을 보면, "버튼을 눌렀을 때 읽어 준다." 까지는 되었습니다. 그런데, 무엇을 읽어 줄 것인지는 정해지지 않습니다.

우리가 원하는 것은 "버튼을 눌렀을 때, 글상자에 입력된 글자를 읽어 준다." 입니다.

이제 글상자에 입력된 글자를 블록으로 코딩해 보겠습니다.

7.png

(1) 블록(Blocks)에서 TextBox1을 선택합니다.

(2) 오른쪽 블록 목록에서 (TextBox1).(Text)를 선택해야 합니다. 블록이 많아서 아래쪽으로 스크롤을 해야 합니다.

(3) (TextBox1).(Text) 블록을 뷰어(Viewer)로 끌어다 기존 블록과 아래처럼 조립합니다.

20140804_231752.png

이제 완성된 코드 의미를 생각해 볼까요?

when (Button1).Click do {call (TextToSpeech1).Speak message (TextBox1).(Text)}

버튼(Button1)이 클릭(Click) 되었을 때(when) 글상자(TextBox1)에 입력된 글자(Text)를 읽어라.(Speak)

다르게 의미를 생각해 보면, 글상자(TextBox1)에 입력된 글자(Text)를 TextToSpeech1으로 읽어라(Speack)! 버튼(Button1)이 클릭(Click)되었을 때(When). 

여기에는 프로그래밍 언어의 많은 요소들과 개념들이 포함되어 있지만, 지금 모두 설명하기보다는 다음 개발하게 되는 앱에서 순차적으로 설명하도록 하겠습니다.


이제 코딩을 마쳤으니 앱을 실행해 보겠습니다. => 앱 실행하기


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

저작자 표시 비영리 동일 조건 변경 허락
신고


디자이너 작업

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

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

1.png

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

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

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

2.png

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

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

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

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

3.png

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

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

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


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

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


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

저작자 표시 비영리 동일 조건 변경 허락
신고

글자 읽어주는 앱 소개

앱을 실행하게 되면, 글자를 입력할 수 있는 글상자가 하나 있습니다.

이 글상자에 원하는 글자를 입력하고, 읽어주기 버튼을 누르면 스마트폰에서 입력한 글자를 음성으로 읽어주게 됩니다.

뭔가 대단한 것 같지만 앱인벤터를 사용하면 쉽게 만들 수 있습니다.

앱 인벤터에 접속하는 방법을 모르시면 바로 전 단계인 "앱인벤터 시작하기"를 참고해 주시기 바랍니다.

새 프로젝트 만들기

스크린샷 2015-03-29 오후 9.48.59.png

앱인벤터 상단 메뉴 [Projects] > [Start new project]를 선택합니다.

스크린샷 2015-03-29 오후 9.54.47.png

프로젝트 이름을 적습니다. 저는 "HelloInventor"라고 했는데, 다른 이름을 사용하셔도 무방합니다. 다만, 앱인벤터에서는 아직 프로젝트 이름을 한글로 쓰는 것이 안됩니다.


다음은 디자이너 작업을 통해서 화면을 만들어 보겠습니다. => 디자이너 작업하기


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

저작자 표시 비영리 동일 조건 변경 허락
신고

앱인벤터로 만든 프로젝트를 실행하는 방법은 세가지가 있습니다.

그 중에서 저는 첫 번째 MIT AI2 Companion을 사용하는 것을 추천합니다만, 안드로이드 폰과 무선Wifi공유기가 있어야 하기 때문에 없는 분들을 위해 세가지 방법을 정리해 드리겠습니다.

AI Companion

안드로이드 폰이 있고, 컴퓨터와 스마트폰이 동일한 무선(Wifi)공유기에 연결되어 있다면 무조건 이 방법을 사용하시는 것이 좋습니다.

실행속도도 빠르며, 앱인벤터에서 앱을 수정할 경우 실행결과를 빠르게 확인할 수 있어 편리합니다.

안드로이드폰이 꼭 통신사를 통해 개통되어야 할 필요도 없습니다. 중고 안드로이드 폰이 있다면 Wifi에 연결만 하면 바로 사용할 수 있습니다.

스마트폰에 MIT AI2 Companion 설치

Play스토어에서 "MIT AI2 Companion"을 검색하여 설치하거나, 아래 QR코드를 통해서 바로 설치할 수 있습니다.

20140817_200442.png

앱인벤터 AI Companion

MIT AI2 Companion이 설치되었다면 앱인벤터에서 [Connect] > [AI Companion] 메뉴를 선택합니다.

connectSnapshot2.png

스마트폰 MIT AI2 Companion에서 [scan QR code]를 선택하고 앱인벤터 화면에 나타난 QR코드를 인식시켜도 되며, 화면에 나타난 6자리 문자를 입력한 후 [connect with code]를 선택해도 됩니다.

connectIt.png


에뮬레이터(Emulator)

안드로이드폰과 무선공유기가 모두 없을 경우 사용할 수 있는 방법입니다.

앱인벤터를 실행하는 컴퓨터에 프로그램을 설치해야하고 실행속도도 느리다는 단점이 있습니다. GPS와 같은 스마트폰에 내장된 센서를 이용하는 앱의 경우에는 실행할 수 없는 단점도 있습니다.

에뮬레이터 설치

아래 링크를 클릭해서 AI Starter 설치파일을 다운로드 받습니다.

http://appinv.us/aisetup_windows

설치를 마치면 aiStarter라는 바로가기가 생성됩니다. aiStarter를 실행시켜 주세요.

successful_ai_starter_1.png

정상적으로 실행되면 위와 같은 화면을 볼 수 있습니다.

에뮬레이터로 실행하기

이제 앱인벤터로 돌아와서 [Connect] > [Emulator] 메뉴를 선택합니다.

connectSnapshot2.png

그럼 아래 화면처럼 aiStarter가 작업하는 모습을 볼 수 있습니다.

emulator_connect_progress.png

잠시 후, 아래 화면처럼 가상 스마트폰이 뜨면서 실행된 앱을 볼 수 있습니다.

middle.png

앱에 따라 다르지만 실행하는데 수분에서 수십분 정도의 많은 시간이 걸리기도 합니다.


USB연결

안드로이드폰은 있지만 무선(Wifi)공유기가 없을 때 쓸 수 있는 방법입니다.

스마트폰에 있는 GPS와 같은 센서를 활용한 앱도 실행시켜 볼 수 있지만, 에뮬레이터를 활용하는 것만큼이나 속도가 느린 단점이 있습니다.

MIT AI2 Companion 설치

앞서 첫 번째 방법에서 설명한 MIT AI2 Companion을 스마트폰에 설치합니다.

에뮬레이터 설치

앞서 두 번째 방법에서 설명한 프로그램(aiStarter)을 컴퓨터에 설치합니다.

스마트폰 USB연결

스마트폰을 컴퓨터와 USB로 연결하기 위해서는 컴퓨터에 스마트폰 USB드라이버가 설치되어 있어야 합니다. 스마트폰 회사가 다르기 때문에 자신의 스마트폰을 만든 회사 홈페이지에서 다운로드 받아 설치해야 합니다.

스마트폰의 개발자 옵션에 있는 USB디버깅 옵션을 켜주어야 합니다. 스마트폰을 만든 회사마다 조금씩 다르지만 일반적으로 [설정] > [개발자옵션] > [USB디버깅] 메뉴에 있는 경우가 많습니다.

USB연결로 실행하기

스마트폰을 컴퓨터와 USB케이블로 연결하고, 컴퓨터에서 aiStarter를 실행시킵니다.

다음 앱인벤터에서 [Connect] > [USB] 메뉴를 선택합니다.

connectSnapshot2.png

잠시 기다리면 스마트폰에서 실행되는 앱을 볼 수 있습니다.


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

저작자 표시 비영리 동일 조건 변경 허락
신고
  1. 2015.05.11 23:19 신고

    다운받아서 ai 실행시키면 바로 중지되었다고 뜨고 절대 안 되네요ㅠ.ㅠ 삭제했다 다시도 깔아 보고 재부팅도 해 봤는데 혹시 어떻게 해야 하는지 도움 주실 수 있으신가요? 학교컴에선 됐는데 정작 급한 집에선 안 되는군요,,,

블록 코딩하기

화면 오른쪽에 있는 [Blocks] 버튼을 클릭하면 블록에디터로 화면이 전환됩니다.

11.jpg

블록(Blocks)에서 "Button1"을 선택하면 아래 그림처럼 Button1에 연결된 여러 기능의 블록들이 나타납니다.

12.jpg

우리는 고양이 사진이 있는 버튼을 터치(클릭) 했을 때 고양이 소리를 들려줄 예정입니다.

그래서 화면처럼 "when (Button1).Click do ..." 블록을 사용하게 됩니다. 글자 그대로 해석해 보면  "Button1을 클릭했을 때 ... 을 실행해라"라고 할 수 있습니다.

이 블럭을 뷰어(Viewer)로 끌어다 놓습니다.

다음은 버튼일 눌렸을 때 실행할 대상을 블록으로 조립하면 됩니다. 이 앱에서는 고양이 소리를 들려줄 예정이였습니다.

13.jpg

블록(Blocks)에서 Sound1을 선택하면 그림처럼 Sound1과 관련된 기능들을 가진 블록들이 표시됩니다. 

이 중에 우리가 필요한 것은 Sound를 들려주는 기능입니다. 그래서 "Call (Sound1).Play"를 선택했습니다. Sound1을 재생해라는 의미를 갖고 있죠.

블록 모양을 보시면, 앞서 끌어다 놓은 "when (Button1).Click do ..." 블록의 중간에 딱 들어 맞게 생긴 것을 알 수 있습니다.

그럼 화면처럼 끌어다 놓아 볼까요?

스크린샷 2015-03-22 오후 3.51.36.png

이제 모든 작업이 끝났습니다.

만든 블록의 의미를 다시 해석해 볼까요?

when (Button1).Click do { call (Sound1).Play }

"Button1을 클릭했을 때 Sound1을 재생해라." 정도로 해석할 수 있겠습니다.


실행하기

앱인벤터로 만든 앱을 실행해 보는 방법은 세 가지가 있습니다.

그 중에서 안드로이드 스마트폰이 있고, 같은 무선공유기(wifi)에 컴퓨터와 스마트폰이 모두 연결되어 있다는 전제하에 설명을 하겠습니다.

만약 안드로이드 스마트폰이 없거나, 무선공유기가 없다면 다음에 설명하는 "앱인벤터 실행 방법"을 보고 실행하면 됩니다.

MIT AI2 Companion으로 실행하기

먼저 스마트폰의 Play스토어를 열고 "MIT AI2 Companion"을 검색하여 설치합니다.

아니면 아래 QR코드를 인식시키면 바로 설치할 수 있습니다.

20140817_200442.png

스마트폰에서는 설치한 MIT AI2 Companion을 실행시키고, 

앱인벤터의 [Connect] > [AI Companion] 메뉴를 선택합니다.

14.jpg

그럼 아래 그림처럼 QR코드와 6자리 문자가 나오게 됩니다.

connectIt.png

스마트폰에서 [scan QR code] 버튼을 선택하여 QR코드를 스캔해도 되며, 6자리 문자를 입력한 후에 [connect with code] 버튼을 선택해도 됩니다.

그럼 잠시 후에 스마트폰에서 앱이 실행된 것을 볼 수 있습니다.

Screenshot_2015-03-22-16-13-23.png

고양이 사진을 터치해 보세요. "야옹~~" 소리가 들리나요?


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

저작자 표시 비영리 동일 조건 변경 허락
신고

이제 첫 번째 앱을 만들어 보겠습니다.

어떤 앱을 만들까?

앱인벤터에서 가장 유명한 고양이 키티를 터치하면 "야옹~"하고 소리를 내는 앱을 만들어 보겠습니다.

앱을 실행하면 스마트폰에는 아래 고양이 키티 사진이 나타납니다.

kitty.png

그리고 이 사진을 터치하면 아래 고양이 소리가 나오는 것이죠.

보기에는 아주 간단하지만 몇 가지 고민을 해야 합니다. 

하지만 지금은 앱인벤터 사용법을 우선 익히기 위한 것이니 우선 따라해 보도록 하겠습니다.


사전준비

이 앱에는 고양이 사진과 고양이 소리가 필요합니다. 먼저 아래 링크를 클릭해서 사진과 MP3파일을 다운로드 받습니다.

사진파일 다운로드 / MP3파일 다운로드 

- 마우스 오른쪽 버튼을 눌러 "다른 이름으로 저장"을 선택해서 저장합니다.

이제 앱인벤터에서 [Projects] > [Start new project] 메뉴를 선택해서 새로운 프로젝트를 생성합니다.

01.jpg


아래 그림처럼 프로젝트 이름을 입력해야 합니다. 저는 "HelloKitty"라고 넣어 봤습니다.

02.jpg

아래 화면처럼 디자이너(Designer) 화면이 나타나면서 모든 준비가 끝났습니다.

스크린샷 2015-03-22 오후 2.40.17.png


디자이너(Designer)에서 작업하기

디자이너에서는 앱에 필요한 화면을 구성하게 됩니다.


버튼(Button) 추가하기

이 앱에서는 고양이 사진을 보여주고, 고양이 사진을 터치하면 고양이 소리를 들려주게 됩니다.

화면에는 고양이 사진을 보여주지만, 이 사진이 버튼 기능을 해야 합니다.

그래서 우선 버튼을 추가해 보겠습니다.

06.jpg

팔레트(Palette)에서 버튼(Button)을 뷰어(Viewer)로 드래그해서 옮깁니다.

그러면 화면에 "Text for Button1"이라는 버튼이 하나 만들어진 것을 볼 수 있습니다.

이제 버튼에 있는 "Text for Button1" 글자 대신 준비과정에서 다운로드 받은 kitty.png 사진이 보이도록 속성을 변경하겠습니다.

05.jpg

뷰어(Viewer)에 있는 버튼을 선택하면, 프로퍼티(Properties)에서 버튼에 대한 속성을 변경할 수 있습니다. 속성 중에 Image에 있는 "none"이라는 글자를 클릭합니다.

그럼 아래 그림처럼 이미지를 선택할 수 있도록 목록창이 나옵니다.

스크린샷 2015-03-22 오후 2.57.39.png

여기서 [Upload Files ...] 버튼을 클릭하세요.

스크린샷 2015-03-22 오후 2.57.57.png

그럼 이미지 파일을 업로드 할 수 있는 창이 뜨게 됩니다. 

여기서 [파일 선택] 버튼을 클릭하여, 다운로드 받아 둔 kitty.png 파일을 선택합니다.

파일을 선택했으면 [OK] 버튼을 눌러 등록합니다.

07.jpg

화면에 고양이 사진이 들어갔습니다.

그런데, 버튼에 있는 "Text for Button1" 글자는 그대로 인 것을 볼 수 있습니다.

프로퍼티(Properties)의 Text 속성에 있는 "Text for Button1" 글자를 지워버리면, 사진에서도 글자가 지워집니다.


사운드(Sound) 추가하기

고양이 소리가 나야하므로 사운드 기능을 추가해야 합니다. 

08.jpg

팔레트(Palette)에서 미디어(Media) 항목을 선택합니다.

09.jpg

사운드(Sound) 컴포넌트를 뷰어(Viewer)로 드래그하면 화면 아래쪽으로 표시가 됩니다. 사운드 기능은 화면에 보이지는 않고 소리만 들려주는 기능이기 때문에 아래 쪽에 별도로 표시가 됩니다. 

10.jpg

뷰어(Viewer)에서 Sound1 컴포넌트를 선택하고(컴포넌트(Componets)에서 Sound1을 선택해도 됩니다), 프로퍼티(Properties)에서 Source 속성의 "None..."을 선택합니다.

좀 전에 고양이 사진을 업로드 하던 방법과 같은 방법으로 다운로드 받은 "meow.mp3" 파일을 업로드하면 됩니다.

스크린샷 2015-03-22 오후 2.57.39.png

[Upload File ...] 버튼을 눌러 줍니다.

스크린샷 2015-03-22 오후 2.57.57.png

[파일 선택] 버튼을 눌러 meow.mp3 파일을 선택하고, [OK] 버튼을 누릅니다.


이제 디자이너(Designer)에서의 작업은 모두 끝났습니다.

이제는 블록에디터(Blocks)에서 추가한 버튼과 사운드가 어떻게 작동할지 코딩해주는 일만 남았습니다.

블록 코딩을 시작해 볼까요? => 첫 번째 앱 만들기 - 블록에디터


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

저작자 표시 비영리 동일 조건 변경 허락
신고

크롬 브라우저 설치, 구글 회원가입이 끝났다면 앱인벤터에 접속하여 화면이 어떻게 구성되어 있는지 살펴보겠습니다.

앱인벤터 접속하기

크롬 브라우저에서 다음 아래 주소로 접속하세요. 

http://appinventor.mit.edu

스크린샷 2015-03-22 오전 10.05.31.png

영어가 많네요. 그렇다고 어려워 할 필요는 없습니다. 영어를 번역해야 할 일은 없으니까요. 

화면 오른쪽 상단에 있는 주황색 버튼 [Create]를 눌러주세요. 

스크린샷 2015-03-22 오후 12.25.39.png

그럼 아래 그림처럼 안드로이드 폰이나 에뮬레이터를 준비하라는 메시지가 뜨게됩니다. 이와 관련해서는 앞서 설명했으니 넘어가도 됩니다. [Continue] 버튼을 눌러주세요.

스크린샷 2015-03-22 오후 12.02.53.png


앱인벤터 화면구성

앱인벤터는 크게 디자이너(Designer)와 블록에디터(Blocks) 화면으로 구성되어 있습니다.

디자이너(Designer)는 스마트폰에 보여질 화면을 구성하는 역할을 하고, 블록에디터(Blocks)에서는 디자이너에서 만든 화면의 기능을 코딩하는 역할을 합니다.


디자이너(Designer) 화면구성

실제 스마트폰에 보여지는 화면을 만드는 곳입니다.

왼쪽에서 오른쪽 방향으로 순서대로 작업하면 됩니다.

왼쪽 팔레트(Palette)에서 필요한 기능이 있는 컴포넌트(Component)를 가운데 있는 뷰어(Viewer)로 끌어와서 배치합니다. 글상자나 버튼 같은 컴포넌트는 화면에 보이기 때문에 화면상에 배치되지만, 센서와 관련된 기능 종류는 화면에 보여질 필요가 없기 때문에 뷰어 아랫쪽 화면 밖에 배치됩니다.

컴포넌트(Component)에서 하나를 선택하면 가장 오른쪽에 있는 프로퍼티(Properties)에서 속성을 변경할 수 있습니다. 버튼이라면 색상, 버튼에 있는 글자, 글자 크기 등을 바꿀 수 있습니다.

스크린샷-2015-03-22-오후-12.06.53.jpg

(1) 팔레트(Palette) : 앱 개발에 필요한 컴포넌트(Component)를 모아놓은 곳으로, 컴포넌트를 뷰어(Viewer)로 끌어다 놓아서 기능을 추가합니다.

(2) 뷰어(Viewer) : 앱이 실행되었을 때 보여질 화면입니다. 팔레트에서 끌어온 컴포넌트를 이 곳에 배치합니다.

(3) 컴포넌트(Components) : 앱을 만들기 위해서 팔레트에서 꺼내온 컴포넌트를 모아 놓은 공간입니다. 여기서 컴포넌트를 선택하면 컴포넌트의 프로퍼티(Properties)를 변경할 수 있습니다.

(4) 미디어(Media) : 앱을 만들기 위해 필요한 사진, 음악, 영상들을 업로드하기 위한 공간입니다.

(5) 프로퍼티(Properties) : (3)에서 선택한 컴포넌트의 속성을 변경할 수 있습니다. 예를 들면, 버튼의 크기, 색상 등을 변경할 수 있습니다.

(6) 디자이너(Designer) 버튼 : 디자이너 화면으로 이동하기 위한 버튼입니다.

(7) 블록(Blocks) 버튼 : 블록에디터 화면으로 이동하기 위한 버튼입니다.


블록에디터(Blocks) 화면 구성

가장 왼쪽에는 블록(Blocks)을 선택할 수 있는 목록이 있습니다. Built-in에 있는 것들은 기본적으로 내장된 블록입니다.

그 아래 있는 것들은 앞서 디자이너 화면에서 추가한 컴포넌트에 있는 블록입니다. 컴포넌트를 추가한 만큼 보여지게 됩니다.

스크린샷-2015-03-22-오후-12.06.5311.jpg

(1) 블록(Blocks) : 블록을 선택하여 오른쪽 뷰어(Viewer)로 끌어다 놓는 방법으로 코딩을 합니다. 블록은 내장된 블록(Built-in)과 컴포넌트 블록으로 나뉘는데, 컴포넌트 블록은 디자이너에서 추가한 컴포넌트의 기능을 활용하기 위한 블록입니다.

(2) 미디어(Media) : 디자이너에 있는 미디어와 마찬가지로 사진, 음악, 영상 등을 업로드하는데 사용됩니다.

(3) 뷰어(Viewer) : 블록을 꺼내와서 배치하여 코딩을 진행하는 공간입니다.

(4) 디자이너(Designer) 버튼 : 디자이너 화면으로 이동하기 위한 버튼입니다.

(5) 블록(Blocks) 버튼 : 블록에디터 화면으로 이동하기 위한 버튼입니다.


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

저작자 표시 비영리 동일 조건 변경 허락
신고


크롬 브라우저 설치

앱인벤터는 구글에서 만든 크롬 브라우저에서 가장 잘 동작합니다. 다른 브라우저에서는 제대로 동작하지 않을 수 있으니 크롬 브라우저를 설치해야 합니다.

http://www.google.com/chrome 에 접속하고 [Chrome 다운로드]를 클릭하여 설치하면 됩니다.

01.jpg


구글 계정 만들기

앱인벤터는 회원가입이 따로 필요하지는 않지만, 대신 구글 아이디로 로그인해야 합니다. 구글에 회원가입이 되어있다면 넘어가고, 없다면 구글에 접속하여 아이디를 만들어야 합니다.

http://www.gmail.com 에 접속하여 [가입하기]를 클릭하여 회원가입을 해주세요.


안드로이드 스마트폰 준비

앱인벤터로 만든 앱을 실행하려면 안드로이드 스마트폰이 필요합니다. 

에뮬레이터를 활용하여 스마트폰 없이도 실행해 볼 수도 있지만, 실행속도가 느리고 스마트폰에 내장된 일부 기능을 활용할 수 없다는 단점이 있습니다.

해지된 스마트폰도 상관없습니다. Wifi만 활용할 수 있다면 집안에 있는 중고 스마트폰을 교육용으로 활용할 수 있습니다.

스마트폰이 준비되었다면 Play스토어에서 MIT AI2 Companion 앱을 검색하여 설치하세요. 

이제  앱인벤터 실행을 위한 준비가 끝났습니다.


에뮬레이터 설치하기

안드로이드 스마트폰이 없다면 에뮬레이터에서 실행할 수도 있습니다. 

윈도우를 사용하고 있다면 아래 링크를 클릭해서 설치 파일을 다운로드 받아서 설치하세요.

http://appinv.us/aisetup_windows

맥이나 리눅스를 사용하고 있다면 아래 링크를 클릭하여 설치하면 됩니다.

http://appinventor.mit.edu/explore/ai2/setup-emulator


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

저작자 표시 비영리 동일 조건 변경 허락
신고

스크린샷 2015-03-22 오후 1.39.53.png

앱인벤터는 스마트폰 앱을 복잡한 프로그래밍 과정을 거치지 않고 블록 쌓기 방식의 비주얼 코딩을 통해 누구나 쉽게 앱을 개발할 수 있도록 해주는 도구입니다.

스마트폰 앱을 개발하기 위해서는 Java나 C언어 같은 언어를 배우는데 많은 노력을 해야 합니다.

앱인벤터는 언어를 배우는 시간은 줄이고, 앱을 개발하는 과정 중에 생기는 문제들을 논리적으로 해결하는 과정을 겪으면서 창의력과 문제해결력을 키울 수 있습니다.

앱인벤터는 엔트리나 스크래치 등을 배운 학생이나 중등학생이 배우기에 좋습니다. 블록을 쌓는 비주얼 코딩 방식은 유사하지만, 스마트폰의 센서와 기능을 활용하고 스마트폰에서 실행할 수 있는 장점은 더욱 확장된 창의력을 요구하게 됩니다.

예를 들어, GPS를 활용하여 현재 위치를 알려주는 앱을 만들거나, SMS문자 메시지를 보내는 등의 앱을 만들 수 있습니다.


저작자 표시 비영리 동일 조건 변경 허락
신고

작년에 앱인벤터 연재를 시작했으나, 제대로 결말을 짓지 못하였습니다.

그렇지만 자료는 그런대로 소개할 만한 수준이 되어서 별도로 홈페이지를 만들어서 연재를 시작하였습니다.

블로그에 자료를 정리하는 것은 기능적으로 어려움이 많다고 판단되어서 별도로 만들었습니다.

홈페이지 주소 : http://www.swedulab.com

나름 무른모교육연구소라고 거창하게 이름지어 봤습니다. 저를 제외하고 다른 연구원이 있는 것도 아니고, 물리적 실체가 있는 것도 아니지만.. 나름 고민해왔던 부분들을 연구하면서 정리해본다는 의미로 이름을 지었습니다.

'무른모'는 소프트웨어를 의미합니다. 예전 PC통신 시절에는 많이 사용했었고, 우리말을 사용하자는 취지로 많이 알려졌었던 단어 같습니다. 하지만 어느 순간부터 외국어를 그대로 사용하는 경우가 많고, 우리나라 교육에 맞는 소프트웨어교육을 추구해보자는 의미로 이름을 붙여 봤습니다.

앱인벤터 연재는 http://www.swedulab.com/appinventor_chapter01_01 에서 하고 있습니다.

많은 시간을 필요로 하는 작업이라 시간이 걸리겠지만, 느리더라도 꾸준히 자료를 올리도록 하겠습니다.

많은 관심 부탁드립니다. ^^


- 현재까지 연재한 목차 -

앱인벤터 소개

앱인벤터 시작하기

글자 읽어주는 앱 만들기

신고

앱 인벤터2 책을 만드는 중입니다. 중간 중간 원고를 MS워드의 블로그 보내기 기능을 이용해서 블로그에도 공개해보려고 했는데... 밑에 보시는 것처럼 보기 좋지 못하네요.

원고를 그대로 블로그에 올리는 작업은 그만두고, 앞으로는 예제를 하나씩 소개 하겠습니다.^^


3장_ 첫 번째 따라하기

1. 앱 인벤터 시작 

이제 준비가 끝났으니 크롬 브라우저를 실행시켜 아래 주소로 인벤터에 들어가자.

  http://appinventor.mit.edu

그림 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"를 끌어다 놓는다. 역시 모양에 맞게 배치해야   한다.


그림 19. "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. 원하는 문구를 입력하고 "읽기" 버튼을 눌러보자.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

처음으로 따라하며 만들어 결과 어떤가?

정도면 나도 멋진 앱을 만들어 있겠다는 자신감이 것이다.

여기까지 안되었더라도 다음 장부터 차근 차근 살펴보며 따라하면 즐겁게 나만의 앱을 만들 있게 것이다.


신고
  1. 달빛천사7 2014.08.25 20:35 신고

    배워보고는 싶은데 상당희 어렵군염 .

  2. ttt 2015.02.11 23:31 신고

    스크래치 프로그램과 똑같군요 ' '

2장_ 따라할 준비하기

1. 사전 준비하기

1. 구글 크롬브라우저 설치 

인벤터를 실행하기 위해서는 우리가 흔히 사용했던 인터넷 익스플로러(Internet Explorer)보다는 구글 크롬(Google Chrome) 사용을 권하고 싶다.

구글 크롬 브라우저 다운로드 사이트(http://google.com/chrome)에 접속해서 크롬 브라우저를 다운로드 받아 설치하자.


그림 1. 크롬 브라우저 다운로드 사이트에 접속해서 크롬 브라우저를 다운로드 받아 설치하자.

 







2. 구글 계정만들기

인벤터를 사용하려면 구글 계정으로 로그인해야 한다.

 구글 계정(아이디)을 사용하고 있다면 건너 뛰어도 된다. 구글 계정이 없다면 http://gmail.com 에서 구글 회원가입을 하자.

신고
  1. 2014.08.24 23:24

    비밀댓글입니다

    • k2man 2014.08.25 20:50 신고

      죄송합니다. 실수로 초대 취소가 되어 버렸더군요.
      지금보니 이미 다른 분께 초대장 받으신 것 같네요... ^^

포토샵을 설치하지 못해서 파워포인트로 만들어 봤습니다. 그럭저럭 볼만은 하네요... ㅎㅎ

먼저 디자이너(Designer) 화면입니다.

실제 스마트폰에 보여지는 화면을 만드는 곳이죠. 왼쪽부터 오른쪽 방향으로 작업을 하게 됩니다.

왼쪽 팔레트(Palette)에서 필요한 기능이 있는 컴포넌트(Component)를 가운데 있는 뷰어(Viewer)로 끌어와서 배치합니다. 글상자나 버튼 같은 것들은 화면에 보이기 때문에 화면상에 배치되지만, 센서 관련 기능 같은 화면에 보여지지 않는 기능이기 때문에 뷰어(Viewer) 아랫쪽 화면 밖에 배치됩니다.

각 컴포넌트(Component)를 선택하면, 화면 가장 오른쪽에 있는 프로퍼티(Properties)에서 속성을 지정할 수 있습니다. 버튼이라면 버튼 색상, 버튼에 있는 문구, 글자 크기 등을 바꿀 수 있습니다.


다음은 블록(Blocks) 화면입니다.

가장 왼쪽에는 블록(Blocks)을 선택할 수 있는 목록이 나옵니다. Built-in에 있는 것들은 기본적으로 내장된 블록입니다. Control, Logic, Math, Text, Lists, Colors, Variables, Procedures가 내장된 블록들이죠. 

그 아래 있는 것들은 앞서 디자이너(Designer)화면에서 추가한 컴포넌트(Componet)에 있는 블록입니다. 컴포넌트를 추가한 만큼 보여지게 됩니다.


신고
  1. ^^ 2015.09.14 16:10 신고

    팔레트에서 뷰로 드레그 할때 자동으로 왼쪽 상단에 배치되는데 이건 따로 설정할 수 없나요?

앱 인벤터로 만든 프로젝트를 실행하는 방법은 세가지가 있습니다.

그 중에 저는 WiFi로 연결하여 실시간 실행하는 방법을 추천합니다. 다른 방법은 너무 느려~~~ㅜㅜ 내 컴이 느린가...

첫 번째 방법 : 컴퓨터와 스마트폰을 동일한 WiFi에 연결하여 실시간 실행하기

앱 인벤터로 작업하는 컴퓨터와 스마트폰이 동일한 무선AP(동일한 WiFi)에 연결되어 있어야 합니다.

특별한 프로그램을 설치할 필요도 없으며, 스마트폰에만 MIT AI2 Companion를 설치하면 됩니다.

실행속도도 매우 빠르고, 앱 인벤터에서 앱을 수정하면 바로 스마트폰에 실행결과가 반영되어 정말 편리합니다.

단, 안드로이드 스마트폰이 있어야 하고, 무선공유기도 필요합니다. 안드로이드폰이 없다면 주변에 공기계를 구해서 WiFi만 연결해서 사용해도 무방합니다.

MIT AI2 Companion은 위에 있는 QR코드를 스캔해서 설치하거나 Play Store에서 검색해서 설치하시면 됩니다.

이 것만 하면 실행할 준비가 모두 끝납니다. ^^

설치가 되었다면 앱 인벤터에서 앱을 만들고 Connet 메뉴 >> AI Companion 메뉴를 선택하면 됩니다.

아마 위 화면처럼 QR코드와 6자리 코드가 나올겁니다. 위 화면에서는 dafjjs가 되겠네요.

스마트폰에서 MIT AI2 Companion을 실행해서 scan QR code 버튼을 선택해서 위에 나온 QR코드를 스캔하거나, 직접 코드(이 화면에서는 dafjjs)를 입력해서 connect with code를 선택하면 됩니다. ^^


두 번째 방법 : 에뮬레이터로 실행하기

안드로이드폰과 무선AP를 도저히 못 구할 경우 사용할 수 있습니다. 다만, 컴퓨터에도 프로그램을 설치해야 하고, 실행결과를 보기위해서도 꽤 많은이 시간 길어야 몇 분이지만  필요합니다. 조금 답답하죠.

더구나 위치정보 등 스마트폰의 센서를 활용해야 하는 앱은 테스트하기가 어렵습니다. 

그래서 저는 권장하지 않습니다.

그래도 꼭 이 방법을 사용하셔야 할 분을 위해서 간단히 설명하겠습니다. 

우선 아래 링크를 클릭해서 프로그램을 설치해야 합니다. (아래 링크는 윈도우 사용자 기준입니다.)

http://appinventor.mit.edu/explore/ai2/windows.html

설치하면 aiStarter라는 바로가기가 설치된 것을 볼 수 있습니다. 이 넘을 실행해 주면 아래와 같은 화면이 뜹니다. 이제 에뮬레이터가 실행될 준비가 되었다는 화면입니다. ^^

아래는 첫 번째 방법을 설명할 때도 말씀드렸던 화면인데...

여기서 Emulator를 선택해 주면 됩니다.

그럼 아래 화면처럼 뭔가 주루룩 올라가면 작업하고 있구나 알 수가 있죠...ㅎㅎ

이런 작업이 진행되면서 아래와 같은 가상 안드로이드 폰 화면이 뜰겁니다. 여기서 내가 만든 앱이 제대로 실행 되고 있나 테스트 할 수 있습니다.

앞서도 이야기 했지만, 테스트 결과를 보기까지가 조금 오래 걸립니다.

앱을 조금 고쳐서 테스트해보고, 바로바로 결과를 보고 싶으시면 첫 번째 방법을 강력하게 추천합니다. ^^


세 번째 방법 : USB로 안드로이드 폰을 연결해서 실행

안드로이드폰은 있는데 무선AP(또는 무선 공유기)가 없을 때 쓸 수 있는 방법입니다.

스마트폰에 있는 센서를 활용한 앱을 테스트할 수는 있지만, 역시나 실행속도가 느리고 설정하는게 복잡해서 권장하고 싶지는 않습니다.

그래도 꼭 해야겠다는 분이 있을 수 있으므로 간략히 설명해 보겠습니다.

1. 앞서 설명한 첫 번째 방법에 나왔던 MIT AI2 Companion을 스마트폰에 설치합니다.

2. 두 번째 설명한 방법에 나왔던 프로그램을 컴퓨터에 설치합니다.

3. 스마트폰을 USB에 연결해야 하는데, 만약 해당 스마트폰의 USB드라이버가 설치되어있지 않다면 설치를 먼저 해주세요. (USB드라이버는 각 스마트폰 제조사 홈페이지에...^^)

4. 스마트폰의 개발자 옵션에 있는 USB디버깅을 켜주어야 합니다. 보통 안드로이드폰의 설정 > 개발자옵션 > USB디버깅 메뉴에 있을겁니다.

5. 두 번째 설명한 방법에 나왔던 AIStarter를 실행시켜 주세요.

이제 위 화면에 있는 USB메뉴를 선택하면 실행이 될겁니다. 프로젝트의 크기에 따라 다르겠지만 몇 분이 소요될 수 있습니다.


결론^^

결론이랄 것도 없지만... 안드로이드폰과 무선공유기가 없다면... 흠... 저는 안드로이드폰 공기계를 지인들에게 부탁해서 어떻게든 구하고, 무선공유기는 가장 저렴한 넘을 찾아서 하나 장만하시는게 정신 건강에 이롭다고 생각합니다. ^^


이 글에 사용된 일부 그림은 http://appinventor.mit.edu/explore/ai2/setup.html 에서 발췌하였습니다. 이 링크에서 제가 설명하는 것보다 더 자세한 정보를 얻으실 수 있습니다.^^

신고

앱 인벤터로 복잡한 프로그래밍 과정을 거치지 않고도 블럭 쌓기처럼 간단한 작업을 거쳐 앱을 완성할 수 있다. 코딩과정이 없이 간편하다는 것이지 그렇다고 너무 쉽다는 이야기는 아니다. 기본적인 프로그램 언어 지식은 배워야^^;

안드로이드 앱을 개발하기 위해서는 자바, 이클립스, 안드로이드SDK 등을 설치하는 개발환경 설치부터 지레 겁을 먹게 만들고 처음보는 자바 언어로 작성된 코드는 머리를 하얗게 만들어 버린다. 물론 자바나 다른 언어에 기본 지식을 갖고 있다면 어렵지 않게 할 수 있겠지만...

이번 글에서는 어떻게 앱 인벤터를 이용해서 앱을 만드는지 준비작업과 간단한 앱을 만들어 실행해 보도록 하겠다.

1. 사전 준비작업

가. 크롬 브라우저 설치

앱 인벤터는 구글에서 만든 크롬 브라우저에서 동작된다. 다른 브라우저에서는 제대로 동작이 안될 수 있으니 꼭 크롬 브라우저를 사용하자!

http://google.com/chrome <= 요기 링크를 클릭해서 크롬 브라우저를 다운로드 받아 설치한다.

[화면1] 창이 뜨면 아래처럼 Chrome다운로드 버튼이 나올 것이다. 요 놈을 클릭해서 다운로드 받아 설치하면 된다..


나. 구글 계정 만들기

앱 인벤터는 회원가입이 따로 필요하지는 않지만, 대신 구글 아이디로 로그인해야 한다. 구글에 회원가입되어 있다면 넘어가고, 없다면 http://gmail.com 에 접속해서 구글 아이디를 하나 만든다.


2. 앱 인벤터 시작

가. 앱 인벤터 시작

구글아이디를 만들고 로그인 했으면 이제 앱 입벤터로 들어가 보자.

http://appinventor.mit.edu <= 요기를 클릭해서 들어가보자.

[화면2] 화면이 온통 영어라고 지레 겁먹을 필요는 없다. 필요한 기능만 사용하면 된다. ^^


나. 간단한 앱 만들기 시작

이제 간단한 앱을 한번 만들어 보자.

스마트폰 화면에 글자를 입력할 수 있는 박스를 만들고, 박스에 글자를 입력하고 버튼을 누르면 입력한 글자를 음성으로 읽어주는 앱을 만들어 볼 것이다.

화면 맨 위, 맨 오른쪽에 있는 Create 버튼을 클릭한다. 못 찾겠으면 아래 버튼 그림 한 번 보고 다시 찾아 봅시다.^^

만약 구글에 로그인이 안되어 있다면 로그인하라는 화면이 뜰거다. 본인 아이디로 로그인^^

[화면3] 들어 갔더니 이런 화면이 뜬다!! 먼 소린지 헷갈리면 그냥 "Continue"버튼 누르고 패스~~~ ㅎㅎ

앱 인벤터로 만든 앱을 실행하려면 어쩌고 저쩌고 해야 한다는 소리다. 그냥 이어서 설명할테니 넘어 가자구요.


다. 본격적으로 만들기 1 - 프로젝트 만들기

이제 준비가 다 되었으니 새로운 프로젝트를 만든다.

[화면4] 화면 맨 위에 있는 메뉴 중에 [Project]를 클릭하면 그림처럼 메뉴가 나온다.
[Start new project ...]를 클릭해서 새 프로젝트를 만든다.


이제 아래 화면처럼 프로젝트 이름을 넣으라는 창이 뜬다.

[화면5] 프로젝트 이름은 helloInveltor라고 해봤다. 자기 원하는대로 이름은 지어도 상관없다.^^ 아직은...

이제 아래처럼 앱을 만들 수 있는 화면이 떳다. 뭔가 헷갈리지만, 그래도 가운데에 스마트폰 화면이 있는 것은 알아 볼거다. 

왼쪽에 나열된 요소들을 마우스로 끌어다 화면이 갖다 놓으면 된다.

[화면6] 앱에 필요한 기능들을 왼쪽에서 화면으로 끌어다 놓으면 된다.


라. 본격적으로 만들기 2 - 화면 구성하기

먼저 이 앱을 만들려면 버튼과 글자입력상자가 필요하다. 

화면 왼쪽에 있는 요소들 중에서 TextBox와 Button을 화면으로 끌어다 놓는다.


다음 글자를 음성으로 읽어 주는 기능이 필요한데...

이 기능은 Media 그룹안에 있는 TextToSpeech를 끌어다 놓으면 된다.


이렇게 하면 아래 화면처럼 화면이 바뀌었을 것이다.

화면 구성은 끝났지만.. 아직 뭔가 어색하다.

우선 버튼에 "Text for Button 1"이라고 되어 있는 글자를 "읽어주기"라고 바꿔보자.

위 그림에서처럼 버튼을 클릭하면, 화면 가장 오른쪽에 버튼에 대한 속성을 바꿀 수 있는 창이 열린다.

여기에서 Text에 "읽어주기"라고 입력하면 된다.


마. 본격적으로 만들기 3 - 블록 코딩하기

블록 코딩을 하려면 화면 오른쪽 위에 있는  버튼을 누르면 된다.


자 이제 블록 코딩할 수 있는 화면이 떳다.

왼쪽에 블록을 선택할 수 있는 선택화면이 있고, 넓은 도화지에다가 블록을 붙여가면 된다.

우선 이번 앱에서는 한 번 만들어보는 것이 중요하므로 그냥 따라해 보기 바란다.

그림처럼 왼쪽에서 "Button1"을 선택하면 버튼에서 할 수 있는 블록들이 쭈욱 나온다. 첫 번째에 있는 블록을 선택해서 화면에 갖다 놓자.


이번에는 글자를 음성으로 읽어주는 기능을 붙일거다. 

블록 모양을 잘 봐보자!! 블록 모양이 괜히 있는게 아니다. 모양에 맞는 구멍에다가 블록을 끼워 넣을 수 있다.

빨간색 박스 블록을 방금 전에 갖다 놓은 블록의 가운데다가 끼워 넣는다.

이번에는 글자입력상자에 입력된 글자를 가져올 차례다.

그림에 있는 블록을 옮겨서 끼워 맞춰 보자.


3. 앱 실행해 보기

이제 앱 개발이 끝났다. 조금은 허무한... ㅎㅎ

방금 쌓은 블록을 거꾸로 읽어보면 어떤 기능이 되는지 알게 된다.

[TextBox1이란 입력상자에 있는 Text(글자)]를 TextToSpeech1으로 Speak(읽는다)한다. When(언제?) Button1이 Click(클릭) 될 때!!

블록 쌓는 기술은 조금씩 연마하면 되므로... 설명은 그만하고... 빨리 실행시켜 보고 싶어서 몸이 근질거리는데...


앱 인벤터로 만든 앱을 실행시켜보는 방법은 3가지가 있다. 각각의 방법은 나중에 설명하고, 우선은 컴퓨터와 스마트폰이 같은 Wifi에 연결되었을 때 할 수 있는 방법을 소개한다.

나머지 방법은 다음 글에서 소개하겠다. 지금도 글일 너무 길어지고 있다. 

가. Wifi로 연결하여 실행하기

(1) 반드시 컴퓨터와 스마트폰이 동일한 Wifi에 (쉽게 말하면 동일한 무선공유기에) 연결되어 있어야 한다.

(2) 스마트폰 구글 플레이에 접속해서 "MIT AI2 Companion" 앱을 설치한다.

(3) 앱 인벤터 메뉴에서 "Connect"에 있는 "AI Companion"을 클릭한다.

(4) 스마트폰에서 방금 설치한 MIT AI2 Companion을 실행하고,
"scan QR code"버튼을 눌러 컴퓨터 화면에 뜬 QR코드를 스캔하거나
6자리 코드(아래 화면에서는 jmxdzk)를 입력하고 "connect with code"을 클릭한다.

(5) 이제 실행해 볼까요? ^^

아래 화면처럼 "안녕하세요. 앱인벤터입니다."라고 쓰고 읽어주기 버튼을 눌러 보세요.. ^^


앱인벤터 어떠신가요?

대략 감이 잡히시나요? 

처음 글이라 앱인벤터 실행하는 방법 등이 섞여 있어서 자세히 다루지는 못한 것 같습니다.

다음 글부터는 좀 더 재밌는 앱을 만들어 보겠습니다. ^^


신고
  1. 이원중 2014.08.10 19:33 신고

    진짜 너무너무 도움이 되네요. 이렇게 친절한 설명 올려주셔서 너무 감사합니다. 학생인데 딱히 배울 곳은 없고 책은 사기 그렇고 해서 고민하고있던 차에 이런 글 올려주셔서 감사합니다. whereispoopants@gmail.com 제 이메일 인데 이 쪽으로 메일 하나만 보내주세요. 감사합니다.

    • k2man 2014.08.16 01:00 신고

      앞으로 자료 정리해서 올리려고 합니다.^^ 제 이메일은 k2mani@gmail.com입니당^^

  2. 김가은 2014.08.15 21:11 신고

    더 배우고 싶네요 감사합니다:)

  3. 변정우 2015.04.11 13:17 신고

    잘읽었습니다!!!

+ Recent posts