앱 실행하기

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

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

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문자 메시지를 보내는 등의 앱을 만들 수 있습니다.


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

안드로이드 앱을 개발하기 위해서는 자바, 이클립스, 안드로이드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