앱 인벤터 2비전공자를 위한 안드로이드 앱 만들기

김경민 (gmgim08@gmail.com)

앱 인벤터의 이해

그림출처 : https://www.flickr.com/photos/sterlic/6778181411

안드로이드 앱을 만들고 싶다면 ?안드로이드 스튜디오와 프로그래밍 언어를 꽤 오랜 시간공부해야 합니다 .

좀 더 쉬운 방법은 없을까 ?프로그래밍 언어를 몰라도 지금 당장 앱을 만들어 볼 수 있는앱 인벤터가 있습니다 .

앱 인벤터란 ?구글과 MIT 의 협력을 통해 개발된 웹 기반의 앱 개발 도구로초보자들도 쉽게 앱을 만들수 있게 도와줍니다 .

앱 인벤터의 특징 1안드로이드 앱을 개발하는 도구입니다 .

앱 인벤터의 특징 2웹 브라우저에서 바로 앱을 개발할 수 있습니다 .

( 익스플로러는 지원하지 않음 )

앱 인벤터의 특징 3블록을 조합해서 앱을 만듭니다 .package com.appinventor.test;import android.app.Activity;import android.os.Bundle;import android.view View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.Toast;public class HelloWorldActivity extends Activity{public void onCreate(Bundle saveInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.main); Button startBtn=(Button)findViewById(R.id.startBtn); startBtn.setOnClickListener(new OnClickListener(){ public void onClick(View v){ Toast.makeText(getApplicationContext(), “안녕하세요” , 1000).show(); }});}}

앱 인벤터의 특징 4한글 프로그래밍을 지원합니다 .

앱 인벤터가 제공하는 기능음악 재생 , 음성 변환 , 번역 , 동영상 재생 , 동영상 촬영 , 사진 촬영 , 음성 인식 , 사진 보기 , 녹음 , 그림 그리기 , 애니메이션 만들기 , 시간 측정 , 바코드 스캔 , 위치 센서 , 방향 센서 , NFC, 가속도 센서 , 근접 센서 , 문자 메시지 , 전화 , 공유 , 트위터와 통신 , 데이터 저장 , 파일 쓰기 및 읽기 , 퓨전 테이블 , 블루투스 , 웹 서버와 통신 , 외부 앱 실행 , 마인드 스톰 제어 등과 관련된컴포넌트를 이용하여 다양한 앱을 쉽게 만들 수 있습니다 .

앱 인벤터를 위한 준비

그림출처 : https://www.flickr.com/photos/sterlic/6778181411

앱 인벤터를 위한 준비 1http://www.google.co.kr/chrome 에 접속하여 크롬을 설치합니다 .

앱 인벤터를 위한 준비 2http://www.google.co.kr 에 접속하여 구글 계정을 만듭니다 .

앱 인벤터 접속 1크롬으로 http://appinventor.mit.edu 에 접속한 후 를 클릭합니다 .

앱 인벤터 접속 2구글 아이디로 로그인 후 [ 허용 ] 버튼을 클릭합니다 .

앱 인벤터 접속 3약관 동의 , 설문조사 , 공지사항을 거치면 접속이 완료 됩니다 .

앱 인벤터 언어 설정기본 언어는 영어입니다 . 한글로 설정합니다 .

그림판 앱 만들기

그림출처 : https://www.flickr.com/photos/sterlic/6778181411

그림판 앱 구상

1지우개

캔버스 : 그림이 그려지는 공간

슬라이더 : 펜 굵기를조절하는 인터페이스

레이블 : 펜 굵기를표시

버튼 : 클릭하면캔버스의 모든그림 삭제

새 프로젝트 시작하기새 프로젝트를 만듭니다 . 프로젝트 이름은 한글을 사용할 수없으며 첫 글자는 영어로 써야 합니다 .

디자인 편집기새 프로젝트가 만들어지면 디자인 편집기가 나타납니다 . 좀 더 자세히 들여다 보겠습니다 .

디자인 편집기 - 팔레트 패널앱의 화면을 구성하고 기능을 만드는데 사용되는 컴포넌트들이 종류별로 모여있습니다 .

디자인 편집기 - 뷰어 패널컴포넌트를 배치하여 앱 화면을 구성하는 공간입니다 .

디자인 편집기 - 컴포넌트 패널뷰어 패널에 배치된 컴포넌트들의 계층 구조를 확인하고 컴포넌트의 이름을 바꾸거나 컴포넌트를 삭제할 수 있습니다 .

디자인 편집기 - 미디어 패널앱에 사용되는 이미지 , 음악 등을 앱 인벤터 서버에 업로드할 수 있습니다 .

디자인 편집기 - 속성 패널컴포넌트의 크기 , 색깔 , 정렬 등의 속성을 설정할 수 있습니다 .

블록 편집기화면 우측 상단의 을 클릭하면 보이는 블록 편집기입니다 .좀 더 자세히 살펴보겠습니다 .

블록 편집기 - 블록 패널앱의 기능을 만드는 데 사용되는 블록이 종류별로 모여있습니다 .

블록 편집기 - 뷰어 패널블록 패널에 있는 블록들을 가져와서 앱이 작동하게 만드는 작업이 이루어지는 공간입니다 .

앱을 만드는 법디자인 편집기로 앱에 사용되는 부품 ( 컴포넌트 ) 을 배치한 후블록 편집기로 앱이 작동할 수 있도록 명령어를 만듭니다 .

앱 디자인 하기 1 를 클릭하여 디자인 편집기로 이동합니다 . 팔레트 패널에서 캔버스 컴포넌트와 수평배치 컴포넌트를 가져와서 ( 드래그 ) 뷰어 패널의 스크린에 배치 ( 드랍 ) 합니다 .

앱 디자인 하기 2[ 수평배치 1] 을 선택한 후 속성 패널에서 너비를 “ 부모에 맞추기” 바꿉니다 .

[ 수평배치 1] 안에 레이블과 슬라이더를 넣습니다 .

앱 디자인 하기 3[ 레이블 1] 을 선택한 후 너비를 “ 50 pixels”, 텍스트를 “ 1” 로 바꿉니다 .

[ 슬라이더 1] 을 선택한 후 너비를 “부모에 맞추기” , 최댓값을 10,최솟값을 1, 섬네일 위치를 1 로 바꿉니다 .

앱 디자인 하기 4버튼을 [ 수평배치 1] 아래에 추가합니다 .

[ 버튼 1] 을 선택한 후 너비를 “부모에 맞추기” , 텍스트를 “지우개”로 바꿉니다 .

앱 디자인 완성[ 캔버스 1] 을 선택한 후 높이와 너비를 “부모에 맞추기”로 바꾸면 디자인이 완성됩니다 .

블록 조립하기 - 그리기 기능 만들기 1 을 클릭하여 블록 편집기로 이동합니다 . 캔버스 1 이 가지고 있는[ 언제 캔버스 1. 드래그 ] 블록을 드래그하여 뷰어 패널로 가져옵니다 .“ 언제”로 시작하는 황토색 블록은 이벤트 핸들러 블록이라 부릅니다 .

앱 인벤터는 명령어를 블록 패널에서 찾아서 뷰어 패널로 가져오는 방식으로 프로그래밍합니다 . ( 명령어를 키보드로 쳐서 입력할 수도 있습니다 .)

블록 조립하기 - 그리기 기능 만들기 2캔버스 1 이 가지고 있는 [ 호출 캔버스 1. 선 그리기 ] 블록을찾아서 뷰어 패널로 가져옵니다 .

블록 조립하기 - 그리기 기능 만들기 3[ 호출 ] 블록의 홈을 [ 언제 ] 블록 안에 있는 돌기 부분 가까이 가져가면돌기에 노란색 테두리기 생깁니다 . 이때 마우스 버튼을 놓으면 [ 호출 ] 블록이 [ 언제 ] 블록 안 ( 실행 섹션 ) 에 들어갑니다 .“ 호출”로 시작하는 보라색 블록은 함수 호출 블록이라 부릅니다 .

앱 인벤터는 이러한 결합을 통해 명령어를 완성합니다 .

블록 조립하기 - 그리기 기능 만들기 4[ 언제 ] 블록의 [ 이전 X] 에 마우스 포인터를 올리면 나타나는[ 가져오기 이전 X] 블록을 [ 호출 ] 블록의 x1 홈 ( 소켓 ) 에 끼웁니다 .같은 방법으로 나머지 홈에도 블록을 끼웁니다 .

[ 가져오기 이전 X] 와 같은 블록은 변수 블록으로 캔버스를 드래그 했을 때 변하는 손가락의 좌표 값을 저장하고 있습니다 .

블록 조립하기 - 선 굵기 조절 기능 만들기 1

[ 슬라이더 1] 이 가지고 있는 [ 언제 슬라이더 1. 위치 변경 ] 블록을 뷰어 패널로 가져옵니다 .

블록 조립하기 - 선 굵기 조절 기능 만들기 2

[ 캔버스 1] 에 있는 [ 지정하기 캔버스 1. 선 두께 ] 블록을 찾아서 [ 언제 슬라이더 1. 위치 변경 ] 블록 안에 넣습니다 .지정하기로 시작하는 녹색 블록은 속성 설정 블록입니다 .

[섬네일 위치 ] 에 마우스 포인터를 올린 후 [ 가져오기 섬네일 위치 ] 블록을[ 지정하기 캔버스 1. 선 두께 ] 블록에 연결합니다 .

블록 조립하기 - 선 굵기 표시 기능 만들기[ 레이블 1] 에 있는 [ 지정하기 레이블 1. 텍스트 ] 블록을 찾아서 [ 언제 슬라이더 1. 위치 변경 ] 블록 안에 넣습니다 .

[ 캔버스 1] 에 있는 [ 캔버스 1. 선 두께 ] 블록을 [ 지정하기 레이블 1. 텍스트 ] 블록에 연결합니다 .앞쪽에 튀어나온 부분이 있는 연녹색 블록은 속성값 블록입니다 .

블록 조립하기 - 지우개 기능 만들기[ 버튼 1] 이 가지고 있는 [ 언제 버튼 1. 클릭 ] 블록을 뷰어 패널로 가져옵니다 .

[ 캔버스 1] 이 가지고 있는 [ 호출 캔버스 1. 지우기 ] 블록을 [ 언제 버튼 1. 클릭 ] 블록 안에 넣습니다 .

앱 기능 완성

스마트폰에서 확인하기

그림출처 : https://www.flickr.com/photos/sterlic/6778181411

MIT AI2 Companion 앱 설치앱 인벤터와 스마트폰을 Wi-Fi 로 연결하여 앱을 테스트해 볼수 있습니다 . 이를 위해서는 스마트폰에 MIT AI2 Companion앱을 설치합니다 .

주의 : Wi-Fi 를 이용한연결은 스마트폰과컴퓨터가 같은네트워크에 접속된상태일 때 만이용가능 합니다 . Wi-Fi사용이 불가능할 경우USB 연결을 사용하면됩니다 .

컴패니언에 연결하기 1앱 인벤터 상단 메뉴 중 [연결 ]-[AI 컴패니언 ] 을 선택하면 QR코드 창이 나타납니다 .

컴패니언에 연결하기 2스마트폰의 AI 컴패니언 앱을 실행시켜 QR코드를 스캔하면앱이 자동으로 실행됩니다 .

AI 컴패니언을 통해 연결된 상태에서 앱의 디자인이나 기능을바꾸면 스마트폰에 실시간으로 반영됩니다 . 앱 개발 중에테스트 하는 용도로 사용할 수 있습니다 .

USB 연결하기 1USB 로 앱 인벤터와 스마트폰을 연결 하여 앱을 테스트 하려면컴퓨터에 App Inventor Setup 프로그램을 설치해야 합니다 .

USB 연결하기 2설치한 aiStarter 를 실행합니다 .

주의 : 이 창을 닫으면 안됨

USB 연결하기 3스마트폰의 USB 디버깅 기능을 활성화 한 후 USB케이블로 PC 와 스마트폰을 연결합니다 .

주의 : 개발자 옵션이 보이지 않을 경우[ 설정 ]-[휴대폰 또는 디바이스정보 ]-[ 소프트웨어정보 ]-[빌드번호 ] 를개발자가 되었다는 메시지가나타날 때 까지 계속 터치합니다 .

케이블을 연결했을 때 스마트폰의 USB 드라이브가 자동으로 설치되지 않을 경우 제조사에서 제공하는 드라이버를 찾아서따로 설치합니다 .

USB 연결하기 4앱 인벤터 상단 메뉴 중 [연결 ]-[USB] 를 선택한 후 잠시기다리면 앱이 자동으로 실행됩니다 .

주의 : 앱을 테스트 하는 중에 앱 인벤터와 스마트폰 사이의 연결이 끊어지면 [ 다시 연결하기 ] 를 실행 한 후 다시 [AI 컴패니언 ] 또는 [USB] 를 선택하여 연결하면 됩니다 .

앱 설치하기상단 메뉴 중 [빌드 ]-[ 앱 (.apk 용 QR코드 제공 )] 을 선택합니다 .

빌드가 완료되면 QR코드 창이 나타나며 QR코드를 컴패니언 앱으로 스캔하면 앱이 설치됩니다 .

주의 : 기기에 카메라가 없거나 QR코드 스캔이잘 안될 경우[빌드 ]-[ 앱 (.apk 를 내 컴퓨터에 저장하기 )] 를선택하여 apk 파일을 컴퓨터에 저장한 후기기에 옮겨서 설치하면 됩니다 .

웹 브라우저 앱 만들기

그림출처 : https://www.flickr.com/photos/sterlic/6778181411

웹 브라우저 앱 구상http://www..

버튼 : 클릭하면웹 사이트에 텍스트 상자에 입력된주소에 접속

웹뷰어 : 웹 페이지가표시되는 공간

텍스트 상자 : 사용자에게웹 주소를 입력 받음 .

버튼 : 클릭하면이전 페이지로이동 , 사용 가능한경우에만 보임← go→

버튼 : 클릭하면다음 페이지로이동 , 사용 가능한경우에만 보임

앱 디자인하기컴포넌트 이름 변경해야 할 속성Screen1

앱 이름 : 웹브라우저크기 : 반응형제목 : 웹브라우저

수평배치 1 너비 : 부모에 맞추기

버튼 _ 뒤로 , 버튼 _ 앞으로

배경색 : 검정글꼴 굵게 : 체크글꼴 크기 : 15높이 : 부모에 맞추기너비 : 40 pixels텍스트 : ←, →텍스트 색상 : 흰색

텍스트상자 _URL

배경색 : 흰색글꼴 크기 : 15너비 : 부모에 맞추기힌트 : URL텍스트 : http://m.naver.com/

버튼 _go

배경색 : 어두운 회색글꼴 크기 : 15높이 : 부모에 맞추기너비 : 40 pixels텍스트 : go텍스트 색상 : 흰색

웹뷰어 1 홈 URL: http://m.naver.-com/

시계 1 타이머 간격 : 2000

블록 조립하기 1초기 설정 작업하기

전역 변수 만들기

블록 조립하기 2[go] 버튼 기능 만들기

블록 조립하기 3웹 페이지와 주소창 주소 일치시키기

블록 조립하기 4페이지 이동 버튼 기능 만들기

비행기 게임 앱 만들기

그림출처 : https://www.flickr.com/photos/sterlic/6778181411

비행기 게임 앱 구상레이블 : 미사일로 적군을 맞추면 10점이 올라가고 적군을 맞추지 못하면 5점이 내려감

이미지 스프라이트 :스마트폰을 좌우로 기울이는 방향을 따라움직임 , 적군과 부딪히면게임 끝

레이블 : “ 시간”출력 시간 :30 점수 :0

레이블 : 게임 제한시간30 초가 지나면 게임 끝

start

레이블 : “점수” 출력공 : 무작위로선정된 위치에서떨어짐공 : 비행기를플링하면손가락의 방향과속도에 따라발사됨

이미지 스프라이드 :클릭하면 게임이 시작됨

적군

미사일비행기

시작버튼

미디어 파일 준비비행기 게임에 필요한 미디어 파일은 다음과 같습니다 .

비행기 이미지 (airplane.png)배경음악 (bgm.mp3)폭발 효과음 (flashBang.mp3)미사일발사 효과음 (missileLaunch.mp3)시작버튼 이미지 (start.png)

앱 인벤터 갤러리에 공유된 미디어 전용 프로젝트를 이용하면 미디어 파일을 쉽게 가져와서 사용할 수 있습니다 .http://goo.gl/Qx6rKl 에 접속한 후 [OPEN THE APP] 를클릭하면 프로젝트를 가져올 수 있습니다 .

앱 디자인하기컴포넌트 이름 변경해야 할 속성Screen1

앱 이름 : 비행기조종스크린 방향 : 세로제목 보이기 : 체크 해제

수평배치 1 너비 : 부모에 맞추기레이블 1, 레이블 3 텍스트 : 시간 , 점수레이블 _ 시간 , 레이블 _ 점수

너비 : 부모에 맞추기텍스트 : 30, 0

캔버스 1배경색 어두운 회색높이 : 부모에 맞추기너비 : 부모에 맞추기

적군 페인트 색상 : 흰색반지름 : 20

시작버튼높이 : 50 pixels너비 : 80 pixels사진 : start.png

미사일간격 : 10페인트 색상 : 주황반지름 : 7

비행기높이 : 50 pixels너비 : 50 pixels사진 : airplane.png

가속도 _ 센서 1 변경사항 없음소리 1 변경사항 없음시계 _ 게임시간 1 변경사항 없음알림 1 변경사항 없음플레이어 1 소스 : bgm.mp3

블록 조립하기 1전역 변수 만들기

스프라이트 초기 속성 설정

블록 조립하기 2비행기 움직임 만들기

적군위치설정하기 함수 만들기

블록 조립하기 3시작 버튼 기능 만들기

블록 조립하기 4미사일 발사 기능 만들기

블록 조립하기 5미사일이 모서리에 닿으면 숨기기

적군이 바닥에 닿으면 점수 줄이고 위치 재설정하기

블록 조립하기 6미사일로 적군을 맞추면 점수 올리고 적군 위치 재설정

블록 조립하기 7게임끝설정하기 함수 만들기

블록 조립하기 8적군과 비행기가 부딪히면 게임 끝나게 만들기

게임 제한 시간 계산하기

본 자료는 위키북스의 “시작하세요 ! 앤 인벤터 2” 의 내용을 참고하여 만들었습니다 .

감사합니다 .