앱 인벤터로 복잡한 프로그래밍 과정을 거치지 않고도 블럭 쌓기처럼 간단한 작업을 거쳐 앱을 완성할 수 있다. 코딩과정이 없이 간편하다는 것이지 그렇다고 너무 쉽다는 이야기는 아니다. 기본적인 프로그램 언어 지식은 배워야^^;
안드로이드 앱을 개발하기 위해서는 자바, 이클립스, 안드로이드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) 이제 실행해 볼까요? ^^
아래 화면처럼 "안녕하세요. 앱인벤터입니다."라고 쓰고 읽어주기 버튼을 눌러 보세요.. ^^
앱인벤터 어떠신가요?
대략 감이 잡히시나요?
처음 글이라 앱인벤터 실행하는 방법 등이 섞여 있어서 자세히 다루지는 못한 것 같습니다.
다음 글부터는 좀 더 재밌는 앱을 만들어 보겠습니다. ^^
'SW교육 > 앱인벤터' 카테고리의 다른 글
| 앱인벤터 앱 만들기, 새롭게 연재를 시작합니다. (0) | 2015.03.29 |
|---|---|
| 따라하며 배우는 앱 인벤터 2 - 3장 첫 번째 앱 따라하기 (3) | 2014.08.25 |
| 앱 인벤터 따라하기 2 - 2장 따라할 준비하기 (2) | 2014.08.24 |
| 앱 인벤터 화면 설명 (1) | 2014.08.17 |
| 앱 인벤터 프로젝트 실행방법 1,2,3 (0) | 2014.08.17 |