Page 1

앱 인벤터 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


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


앱 인벤터를 위한 준비 2 http://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 연결하기 1 USB 로 앱 인벤터와 스마트폰을 연결 하여 앱을 테스트 하려면 컴퓨터에 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

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

텍 스 트 상 자 _URL

버튼 _go

웹뷰어 1 시계 1

변경해야 할 속성 앱 이름 : 웹브라우저 크기 : 반응형 제목 : 웹브라우저 너비 : 부모에 맞추기 배경색 : 검정 글꼴 굵게 : 체크 글꼴 크기 : 15 높이 : 부모에 맞추기 너비 : 40 pixels 텍스트 : ←, → 텍스트 색상 : 흰색 배경색 : 흰색 글꼴 크기 : 15 너비 : 부모에 맞추기 힌트 : URL 텍스트 : http://m.naver.com/ 배경색 : 어두운 회색 글꼴 크기 : 15 높이 : 부모에 맞추기 너비 : 40 pixels 텍스트 : go 텍스트 색상 : 흰색 홈 URL: http://m.naver.com/ 타이머 간격 : 2000


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

전역 변수 만들기


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


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


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


비행기 게임 앱 만들기

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


비행기 게임 앱 구상 레이블 : “ 시간”출력 레이블 : 게임 제한시간 30 초가 지나면 게임 끝 공 : 무작위로 선정된 위치에서 떨어짐 공 : 비행기를 플링하면 손가락의 방향과 속도에 따라 발사됨

시간 :30 :0

점수

적군

레이블 : 미사일로 적군을 맞추면 10 점이 올라가고 적군을 맞추지 못하면 5 점이 내려감 레이블 : “ 점수” 출력

시작버튼

start 미사일 비행기

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

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


미디어 파일 준비 비행기 게임에 필요한 미디어 파일은 다음과 같습니다 . 비행기 이미지 (airplane.png) 배경음악 (bgm.mp3) 폭발 효과음 (flashBang.mp3) 미사일발사 효과음 (missileLaunch.mp3) 시작버튼 이미지 (start.png) 앱 인벤터 갤러리에 공유된 미디어 전용 프로젝트를 이용하면 미디어 파일을 쉽게 가져와서 사용할 수 있습니다 .

http://goo.gl/Qx6rKl

에 접속한 후 [OPEN THE APP] 를 클릭하면 프로젝트를 가져올 수 있습니다 .


앱 디자인하기 컴포넌트 이름 Screen1 수평배치 1 레이블 1, 레이블 3 레이블 _ 시간 , 레이블 _ 점수 캔버스 1 적군 시작버튼

미사일

비행기 가속도 _ 센서 1 소리 1 시계 _ 게임시간 1 알림 1 플레이어 1

변경해야 할 속성 앱 이름 : 비행기조종 스크린 방향 : 세로 제목 보이기 : 체크 해제 너비 : 부모에 맞추기 텍스트 : 시간 , 점수 너비 : 부모에 맞추기 텍스트 : 30, 0 배경색 어두운 회색 높이 : 부모에 맞추기 너비 : 부모에 맞추기 페인트 색상 : 흰색 반지름 : 20 높이 : 50 pixels 너비 : 80 pixels 사진 : start.png 간격 : 10 페인트 색상 : 주황 반지름 : 7 높이 : 50 pixels 너비 : 50 pixels 사진 : airplane.png 변경사항 없음 변경사항 없음 변경사항 없음 변경사항 없음 소스 : bgm.mp3


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

스프라이트 초기 속성 설정


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

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


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


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


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

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


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


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


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

게임 제한 시간 계산하기


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


감사합니다 .

시작하세요! 앱 인벤터 2: 뚝딱뚝닥 혼자서도 만드는 안드로이드 앱  

김경민, 이기태 지음 | 시리즈 임베디드 & 모바일 시리즈_030 | ISBN: 9791158390242 | 28,000원 | 2016년 02월 5일 발행 | 480쪽 | Android, App Inventor, App Inventor 2, 안드로이드...

Read more
Read more
Similar to
Popular now
Just for you