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

앱 인벤터2
비전공자를 위한 안드로이드 앱 만들기
김경민(gmgim08@gmail.com)

앱 인벤터의 이해
그림출처: https://www.flickr.com/photos/sterlic/6778181411

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

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

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

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

웹 브라우저에서 바로 앱을 개발할 수 있습니다.
(익스플로러는 지원하지 않음)

블록을 조합해서 앱을 만듭니다.
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(); }});
}
}

한글 프로그래밍을 지원합니다.

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

앱 인벤터를 위한 준비

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

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

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

구글 아이디로 로그인 후 [허용] 버튼을 클릭합니다.

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

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

그림판 앱 만들기

그림판 앱 구상
1
지우개
캔버스 : 그림이
그려지는 공간
슬라이더: 펜 굵기를
조절하는 인터페이스
레이블: 펜 굵기를
표시
버튼: 클릭하면
캔버스의 모든
그림 삭제

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

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

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

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

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

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

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

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

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

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

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

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

컴포넌트 패널에서 수평배치1을 선택한 후
속성 패널에서 너비를 “부모에 맞추기” 바꿉니다.
수평배치1 안에 레이블과 슬라이더를 넣습니다.

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

버튼을 수평배치1 아래에 추가합니다.
버튼1을 선택한 후 너비를 “부모에 맞추기”, 텍스트를 “지우개”로
바꿉니다.

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

블록 조립하기-그리기 기능 만들기1
을 클릭하여 블록 편집기로 이동합니다. 캔버스1에 있는
[언제 캔버스1.드래그] 블록을 드래그하여 뷰어 패널로 가져옵니다.
황토색 블록은 이벤트 핸들러 블록으로 이벤트가 발생하면 실행됩니다.
앱 인벤터는 명령어 블록을 블록 패널에서 찾아서 뷰어 패널로 가져오는
방식으로 프로그래밍합니다.
(명령어를 키보드로 쳐서 입력할 수도 있습니다.)

캔버스1에 있는 [호출 캔버스1.선 그리기] 블록을 찾아서
뷰어 패널로 가져옵니다.

[호출] 블록의 홈을 [언제] 블록 안에 있는 돌기 부분 가까이 가져가면
돌기에 노란색 테두리기 생깁니다. 이때 마우스 버튼을 놓으면
[호출] 블록이 [언제] 블록 안(실행 섹션)에 들어갑니다.
“호출”로 시작하는 보라색 블록은 함수 호출 블록으로 미리 함수로
구현해 놓은 기능을 불러올 때 사용합니다.
앱 인벤터는 이러한 결합을 통해 명령어를 완성합니다.

[언제] 블록의 [이전X]에 마우스 포인터를 올리면 나타나는
[가져오기 이전X] 블록을 [호출] 블록의 x1 홈(소켓)에 끼웁니다.
같은 방법으로 나머지 홈에도 블록을 끼웁니다.
주황색 블록은 변수 블록으로 변하는 값을 저장하거나(지정하기 블록)
가져올 때(가져오기 블록) 사용합니다.

블록 조립하기-선 굵기 조절 기능 만들기1
슬라이더1에 있는 [언제 슬라이더1.위치 변경] 블록을
뷰어 패널로 가져옵니다.

블록 조립하기-선 굵기 조절 기능 만들기2
캔버스1에 있는 [지정하기 캔버스1.선 두께] 블록을 찾아서
[언제 슬라이더1.위치 변경] 블록 안에 넣습니다. 녹색 블록은
속성 설정 블록으로 컴포넌트의 속성을 지정할 때 사용합니다.
섬네일 위치에 마우스 포인터를 올린 후 [가져오기 섬네일 위치]블록을
[지정하기 캔버스1.선 두께] 블록에 연결합니다.

블록 조립하기-선 굵기 표시 기능 만들기
레이블1에 있는 [지정하기 레이블1.텍스트] 블록을 찾아서
[언제 슬라이더1.위치 변경] 블록 안에 넣습니다.
캔버스1에 있는 [캔버스1.선 두께] 블록을 [지정하기 레이블1.텍스트] 블록
에 연결합니다. 앞쪽에 튀어나온 부분이 있는 연녹색 블록은
속성값 블록으로 숫자, 문자, 참, 거짓과 같은 값이 들어있습니다.

블록 조립하기-지우개 기능 만들기
버튼1에 있는 [언제 버튼1.클릭] 블록을 뷰어 패널로 가져옵니다.
캔버스1에 있는 [호출 캔버스1.지우기] 블록을 [언제 버튼1.클릭] 블록
안에 넣습니다.

스마트폰에서 확인하기

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 파일을 컴퓨터에 저장한 후
기기에 옮겨서 설치하면 됩니다.

웹 브라우저 앱 만들기

웹 브라우저 앱 구상
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
초기 설정 작업하기
전역 변수 만들기

[go] 버튼 기능 만들기

웹 페이지와 주소창 주소 일치시키기

페이지 이동 버튼 기능 만들기

비행기 게임 앱 만들기

비행기 게임 앱 구상
레이블: 미사일로 적군을
맞추면 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

전역 변수 만들기
스프라이트 초기 속성 설정

비행기 움직임 만들기
적군위치설정하기 함수 만들기

시작 버튼 기능 만들기

미사일 발사 기능 만들기

미사일이 모서리에 닿으면 숨기기
적군이 바닥에 닿으면 점수 줄이고 위치 재설정하기

미사일로 적군을 맞추면 점수 올리고 적군 위치 재설정

게임끝설정하기 함수 만들기

적군과 비행기가 부딪히면 게임 끝나게 만들기
게임 제한 시간 계산하기

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

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

More Related Content

What's hot

Viewers also liked

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

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