A p p I n v e n t o r 앱인벤터
앱인벤터 1 판 1 쇄인쇄 2016 년 6 월 8 일 1 판 1 쇄발행 2016 년 6 월 15 일 지은이 전우천, 배예선펴낸이 김승기펴낸곳 ( 주 ) 생능출판사등록 제 406-2005-000002 호 (2005 년 1 월 21 일 ) 주소 10881 경기도파주시광인사길 143 전화 (031)955-0761 팩스 (031)955-0768 홈페이지 http://www.booksr.co.kr 책임편집 김민보편집 최일연, 신성민, 손정희디자인 유준범마케팅 백승욱, 최복락, 김민수, 심수경, 최권혁, 백수정, 최태웅, 김민정인쇄 성광인쇄 ( 주 ) 제본 은정문화사 ISBN 978-89-7050- 값원 이책의국립중앙도서관출판예정도서목록 (CIP) 은서지정보유통지원시스템홈페이지 (http://seoji.nl.go.kr) 와국가자료공동목록시스템 (http://www.nl.go.kr/kolisnet) 에서이용하실수있습니다.(CIP제어번호: CIP) 이책의저작권은 ( 주 ) 생능출판사와지은이에게있습니다. 무단복제및전제를금합니다. 잘못된책은구입한서점에서교환해드립니다.
Preface 머리말 현대의지식정보화사회에서모든사람들은최신정보통신기술의혜택을누리고살고있습니다. 개인의삶에있어서는다양한스마트기기와다양한인터넷서비스가그중심을차지하고있으며, 사회적으로는 SNS가소통과화합의중요수단으로자리잡아가고사회고발과부조리를알리는도구로서도그역할을감당하고있습니다. 국가적으로정보산업이많은나라들의핵심산업이되어가고있으며, 경제적으로차지하는비중도날로커지고있는실정입니다. 이러한시점에서정보화의혜택을누리고개인의경쟁력을높이기위해서는무엇보다도일정한수준의정보화능력이요구됩니다. 구체적으로정보소양, 정보활용및정보윤리등다양한관점에서정보화능력은일상생활을영위하는데있어서필수적인능력이되어가고있습니다. 특히, 스마트기기의발달과보급에힘입어다양한앱이보급되고활용되는시점에서앱을스스로만들수있는능력은삶의질을향상시키고더나아가경제적으로부가가치를넓힐수있다는점에서매우중요한정보화능력이라할수있습니다. 그동안스마트앱개발은앱개발환경을이해하고또한일정한앱프로그래밍능력을갖춘전산학전공자들에게만한정되었습니다. 하지만이책에서소개할앱인벤터는그래픽사용자환경을바탕으로블록명령어를기반으로하여쉽게배울수있는매우소중한도구입니다. 특히, 전산학적인배경이없는일반인들도남녀노소를불문하고최소한의노력으로앱개발을쉽게할수있다는점에서획기적인앱개발도구로자리잡고있습니다. 본저자는이책을통해서스마트앱개발이보다대중화되기를바라며, 특히어린초 중 고등학생들이마음껏창의적인아이디어를발휘하여본인만의앱을만들수있기를바랍니다. 이러한관점에서이책은다양한예제를포함하고있으며쉽게따라할수있도록구성되어있어다양한응용분야에쉽게앱을만들수있는기초를제공하고있습니다. 아무쪼록본내용이독자들에게스마트앱개발에쉽게다가갈수있는계기가되기를바랍니다. 2016년 5월대표저자전우천 Preface 머리말 3
책의구성 이책은모두 3 부로구성되어있습니다. 1부 앱인벤터란 은전반적인앱인벤터에관한소개부분입니다. 앱인벤터의탄생배경과장점을설명하고앱인벤터의기능을제시합니다. 이어서앱인벤터를사용하기위한환경설정부분으로서필요한웹브라우저, 해당스마트기기, 접속방법등을제시합니다. 이러한환경설정을바탕으로간단한앱을만들어실제로실행시키는방법을제시합니다. 또한앱인벤터전체화면에대한메뉴를소개하며마지막으로앱인벤터로제작한앱을스마트기기에서실제로확인하고해당스마트기기에저장하는방법을소개합니다. 2부 앱인벤터연습하기 는앱인벤터를이용한다양한예제를제시합니다. 여기에서는앱인벤터에서제공하는다양한기능을이용하여일상생활에서필요하고또한활용도가높은예제를제시합니다. 각단계마다캡처화면을제공하여누구나쉽게따라할수있도록제공하였습니다. 다양한예제의주제는다음과같습니다. 버튼을클릭해서배경색을바꿔봐요 스마트기기가나에게인사합니다 흔들면소리와함께그림이바뀝니다 말로쓴글공유하기 앱배경화면을내사진으로바꾸기 봉사활동찾기앱 포춘쿠키가오늘의운세를알려줍니다 낙서장만들기 스프라이트를손가락따라움직이게만들기 길을잃었을때 SOS 문자보내기 크리스마스카드만들기 4 앱인벤터 PART 2 앱인벤터연습하기
기울이면개똥벌레가움직이며똥을주워먹어요 식물이름을익히고퀴즈를만들어봐요 3부 앱공유하기 는실제로개발한앱을다른사람들과공유하는방법에대해서다룹니다. 공유는다른사용자나개발자에게자신의앱을널리알림으로써앱을더욱세련되게수정할수있고또한홍보효과를높일수있는중요한방법입니다. 한편, 앱을구글플레이스토어에등록하는방법도제시하여앱장터에소개함으로써필요한경우자신의앱을유료로알릴수있는방법을제시합니다. 책의구성 5
차례 Contents 머리말 3 책의구성 4 Part 1 앱인벤터란 Chapter 1 앱인벤터시작하기 10 앱인벤터소개하기 10 1 앱인벤터란 10 2 앱인벤터를공부하면어떤점이좋을까 11 3 앱인벤터의기능 12 앱인벤터준비하기 15 앱인벤터시작하기 16 디자이너편집화면과블록편집화면 20 1 디자이너편집화면 20 2 블록편집화면 21 앱인벤터와스마트기기연결하기 22 1 스마트기기가있고와이파이를쓸수있는경우 22 2 스마트기기가없는경우 24 3 스마트기기는있지만와이파이연결이어려운경우 25 Part 2 앱인벤터연습하기 Chapter 2 버튼을클릭해서배경색을바꿔봐요 30 6 앱인벤터 PART 2 앱인벤터연습하기
Chapter 3 스마트기기가나에게인사합니다 38 Chapter 4 흔들면소리와함께그림이바뀝니다 48 Chapter 5 말로쓴글공유하기 60 Chapter 6 앱배경화면을내사진으로바꾸기 70 Chapter 7 봉사활동찾기앱 80 Chapter 8 포춘쿠키가오늘의운세를알려줍니다 90 Chapter 9 낙서장만들기 102 Chapter 10 스프라이트를손가락따라움직이게만들기 116 Chapter 11 길을잃었을때 SOS 문자보내기 130 Chapter 12 크리스마스카드만들기 144 Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 156 Chapter 14 식물이름을익히고퀴즈를만들어봐요 174 Part 3 앱공유하기 Chapter 15 내가만든앱여러사람과공유하기 206 소스파일로앱공유하기 206 실행파일로앱공유하기 : QR 코드만들기 211 실행파일로앱공유하기 : apk 파일만들기 216 구글플레이스토어에앱등록하기 220 ConteNts 차례 7
A p p I n v e n t o r Part 1 앱인벤터란 Chapter 1 앱인벤터시작하기 9
Chapter 1 앱인벤터시작하기 앱인벤터소개하기 1 앱인벤터란 앱인벤터란안드로이드휴대폰에서작동하는앱을만들수있는프로그램입니다. 예전에는 프로그래밍언어를외워서직접쓰면서앱을만들었지만, 앱인벤터를이용하면블록을선택하 그림 1-1 MIT 앱인벤터초기화면 자료 : http://appinventor.mit.edu 10 앱인벤터 PART 1 앱인벤터란
고조립하는방식으로프로그램을만들기때문에초보자도쉽게만들수있습니다. 그동안프로그래밍을하면서원인을알수없는에러가나면이것을고치는데많은시간과노력이필요했습니다. 그러나앱인벤터를이용하면맞는블록만끼워넣으면되니앱을만드는일이참쉬워졌습니다. 스마트기기를사용하면서다운로드한앱에서고치고싶은기능이있거나나에게딱맞는앱을가지고싶다면이제여러분은나만의첫번째앱을앱인벤터로만들수있을것입니다. 내가만든앱을주변사람들과공유하고구글플레이스토어에배포하면전세계사람들과함께사용할수있습니다. 이멋진일을앱인벤터로어렵지않게할수있습니다. 2 앱인벤터를공부하면어떤점이좋을까 현대사회는소프트웨어가가치를창출하고개인과국가의경쟁력을높이는핵심도구로자리잡은소프트웨어중심사회입니다. 이러한시기에소프트웨어를잘다루는인재의중요성은날로커지고있습니다. 그래서영국, 미국, 일본, 이스라엘등주요선진국에서는학생들의컴퓨팅사고력을기르기위해초등학교저학년부터소프트웨어교육을실시합니다. 우리나라도 2015 개정교육과정을마련하여초 중 고등학교에서소프트웨어교육을실시하고있습니다. 우리나라의소프트웨어교육은컴퓨터사고력기반의문제해결력을기르는데기본목적을두고있습니다. 이를토대로다양한분야에서소프트웨어역량을융합하여창의적으로문제를해결할수있는창의 융합인재양성을목적으로하고있습니다. 앱인벤터는교육용프로그래밍언어로서텍스트를입력하여프로그래밍하지않고블록들을끼워맞추는형태의인터페이스로되어있습니다. 따라서초보자도쉽게시작할수있고디버깅에대한부담없이프로그래밍이가능합니다. 또한앱인벤터는특별한주변기기가필요없이스마트기기가가지고있는다양한매체들 ( 카메라, 블루투스, 오디오, 메모리, GPS 등 ) 을이용할수있습니다. 이러한요소들을충분히활용하여화면을직접설계하고이를작동시키는다양하고효과적인방법들을스스로만들어내고완성하면서논리력, 문제해결력, 창의성등을기를수있습니다. 특히, 완성된앱을주변사람들과쉽게공유할수있고실생활에서사용할수도있기때문에앱인벤터로만드는나만의앱은더욱의미가있습니다. Chapter 1 앱인벤터시작하기 11
3 앱인벤터의기능 앱인벤터에는많은다양한기능들이있습니다. 이책에서는앱인벤터의여러기능중에서기본적인기능들만을사용하였습니다. 게임, 퀴즈, 학습, 위치추적, 문자투표앱등여러분의상상력을더하고표 1-1에소개된기능들을서로조합하여연결하면재미있고놀라운앱을만들수있습니다. 표 1-1 앱인벤터의기능 사용자인터페이스 버튼 클릭할수있는버튼을만듭니다. 텍스트상자 글자를입력할수있는상자입니다. 목록뷰 스크린에보이도록글자의요소리스트를놓습니다. 날짜선택 날짜를선택할수있는대화창입니다. 시간선택 시간을선택할수있는대화창입니다. 체크상자 클릭해서선택할수있는체크상자입니다. 레이블 쓴글을보여줍니다. 목록선택 클릭해서보이는리스트중의하나를선택합니다. 슬라이더 바를왼쪽이나오른쪽으로움직여서과정을나타냅니다. 비밀번호상자 비밀번호를입력하는박스입니다. 알림 경고창, 알림, 일시적인알림을보여주거나안드로이드로그엔트리를만듭니다. 이미지 이미지를보여줍니다. 웹뷰어 웹페이지를보여줍니다. 스피너 리스트를팝업창으로보여줍니다. 레이아웃 표배치 요소들이테이블모양으로정렬되도록칸을만듭니다. 수직배치 요소들이세로로정렬되도록칸을만듭니다. 12 앱인벤터 PART 1 앱인벤터란
수평배치 요소들이가로로정렬되도록칸을만듭니다. 미디어 플레이어 음악을재생하고기기를진동시킵니다. 소리 소리파일을재생하고기기를진동시킵니다. 음성변환 메시지 ( 또는글 ) 를읽어줍니다. Yandex 번역 다른언어들사이에서단어와문장을번역합니다. 비디오플레이어 비디오를재생합니다. 캠코더 스마트기기의캠코더로비디오를녹화합니다. 카메라 스마트기기의카메라로사진을찍습니다. 음성인식 음성인식기능을사용하여말을글자로바꿉니다. 이미지선택 스마트기기에저장된이미지들중에서원하는것을고를수있습니다. 녹음기 소리를녹음합니다. 그리기 & 애니메이션 캔버스 그림을그리거나스프라이트를움직일수있는터치가가능한사각평면공간입니다. 이미지스프라이트 공 캔버스위에서터치나드래그되며다른스프라이트와상호작용하는스프라이트입니다. 모양은사용자가정할수있습니다. 캔버스위에서터치나드래그되며다른스프라이트와상호작용하는공모양의스프라이트입니다. 센서 시계 스마트기기의내부시계를사용하여정해진시간이지날때마다이를알려줍니다. 바코드스캐너 바코드를읽습니다. 위치센서 위도, 경도, 고도, 주소를포함한위치정보를알려줍니다. 방향센서 스마트기기가상하좌우로기울어진정도, 윗부분이향하는방위각을알려줍니다. NFC NFC 읽기 / 쓰기기능을제공합니다. 가속도센서 흔들거나삼차원에서가속도를측정한값을추정합니다. 근접센서 스마트기기의스크린과대상이얼마나가까운지 cm로측정합니다. Chapter 1 앱인벤터시작하기 13
소셜 이메일선택 연락처의이름이나이메일을입력하기시작하면, 입력된글로시작하는연락처나이메일주소가나타나는드롭다운메뉴를보여주고선택할수있도록합니다. 문자메시지 문자메시지를보내거나받습니다. 전화번호선택 스마트기기에입력된전화번호가나타나선택할수있습니다. 전화 입력된번호로전화를겁니다. 공유 파일이나메시지를다른앱과공유할수있습니다. 트위터 트위터와통신이가능하도록합니다. 연락처선택 스마트기기에입력된연락처 ( 이름, 이메일, 사진 ) 리스트가나타나선택할수있도록합니다. 저장소 퓨전테이블제어 구글퓨전테이블과통신합니다. 구글퓨전테이블에서사용자는데이터를저장하고공유하며정렬하고볼수있습니다. 파일 파일을저장하고불러옵니다. TinyWebDB 정보를저장하고불러오는웹서비스와통신합니다. TinyDB 앱에서사용하는데이터를저장합니다. 연결 블루투스클라이언트 블루투스사용시클라이언트가되도록합니다. 블루투스서버 블루투스사용시서버가되도록합니다. 웹 HTTP GET, POST, PUT, DELETE 같은기능을제공합니다. 액티비티스타터 다른앱인벤터시작하기, 카메라앱열기, 특정검색어가포함된웹서치하기, 특정한웹페이지를열때사용합니다. 레고마인드스톰 Nxt 드라이브 Nxt 색상센서 Nxt 조도센서 레고마인드스톰 NXT 로봇에직접명령을보내는등낮은수준의인터페이스를제공합니다. 레고마인드스톰 NXT 로봇의색깔센서와통신하는등높은수준의인터페이스를제공합니다. 레고마인드스톰 NXT 로봇의빛센서와통신하는등높은수준의인터페이스를제공합니다. 14 앱인벤터 PART 1 앱인벤터란
Nxt 소리센서 Nxt 터치센서 Nxt 초음파센서 Nxt 직접명령 레고마인드스톰 NXT 로봇의소리센서와통신하는등높은수준의인터페이스를제공합니다. 레고마인드스톰 NXT 로봇의터치센서와통신하는등높은수준의인터페이스를제공합니다. 레고마인드스톰 NXT 로봇의초음파센서와통신하는등높은수준의인터페이스를제공합니다. 레고마인드스톰 NXT 로봇을움직이고돌리는기능을포함한높은수준의인터페이스를제공합니다. 앱인벤터준비하기 앱인벤터를사용하기위해준비할사항들을알아봅니다. 1 2 인터넷에연결된컴퓨터 ( 필수 ) : 앱인벤터는프로그램을내컴퓨터에다운로드하여사용하지않고인터넷에들어가사용하기때문에컴퓨터는반드시인터넷에연결되어있어야합니다. 크롬브라우저 ( 필수 ) : 인터넷익스플로러에서는앱인벤터가작동하지않습니다. 크롬 을검색해서구글크롬브라우저를다운로드하여설치하고앱인벤터를쓸때는이브라우저를이용합니다. 크롬설치하기 1. 인터넷익스플로러의주소창에 http://www.google.com/chrome 을입력하여크롬다운로드페이지로이동합니다. 2. 화면의중간왼편에있는버튼을클릭하여크롬브라우저를설치합니다. 3 4 안드로이드휴대폰이나태블릿 ( 선택 ) : 안드로이드휴대폰이나태블릿이있으면앱인벤터프로그램과연결하여앱을만들면서그과정을편리하게확인할수있습니다. 하지만이런스마트기기들이없어도앱인벤터를사용할수있습니다. 와이파이또는 USB 케이블 ( 선택 ) : 와이파이가설치되어있으면 PC와스마트기기를쉽게연결할수있습니다. 그렇지않으면 USB 케이블을사용하여 PC와스마트기기를연결할수있습니다. Chapter 1 앱인벤터시작하기 15
앱인벤터시작하기 1 앱인벤터에들어가기위해서는구글계정을만들어야합니다. 크롬브라우저를열고 https://www. google.co.kr에접속하여화면오른쪽위의 [ 로그인 ] 버튼을클릭합니다. 다음과같이구글로그인화면이나오면맨아래의 [ 계정만들기 ] 버튼을클릭합니다. 구글아이디는만 15세이상이어야만들수있으므로부모님의도움을받아이름, 이메일, 비밀번호, 생일, 전화번호등을입력하고가입합니다. 새로만든아이디로구글에로그인합니다. 안드로이드휴대폰을사용하고있는경우, 구글계정이이미있습니다. 휴대폰의 [ 설정 ]-[ 계정 ]-[Google] 을선택하면나의계정을확인할수있습니다. 2 로그인한상태에서 http://ai2.appinventor.mit.edu에접속합니다. 앱인벤터를사용하면서내가사용할계정을선택한후 [ 허용 ] 버튼을클릭합니다. 16 앱인벤터 PART 1 앱인벤터란
3 앱인벤터의개인정보보호와이용약관이보입니다. 아래 [I accept the terms of service!] 버튼을클 릭합니다. 4 설문지를작성할것인지묻는창이나타납니다. [Never Take Survey] 버튼을클릭하면이창이다시열리지않습니다. Chapter 1 앱인벤터시작하기 17
5 앱인벤터는현재베타버전 ( 계속해서개발중에있는상태 ) 이므로최근에새로개발된내용에대한안 내문이나타납니다. [Continue] 버튼을클릭하여이창을닫습니다. 6 앱인벤터사용법을배우려면위쪽의 [Guide] 버튼을누르고, 프로젝트를만들기시작하려면 [Start New Project] 버튼을클릭하라는안내문이뜹니다. 18 앱인벤터 PART 1 앱인벤터란
7 앱인벤터는 2015년 10월 23일부터한국어버전도제공하고있습니다. 우리는한국어로앱인벤터를사용하겠습니다. 화면위쪽의 [English] 버튼을클릭하여나타나는 [ 한국어 ] 를선택합니다. 화면의메뉴와안내문이한국어로다시나타나는것을볼수있습니다. 8 이제준비가끝났습니다. 앱인벤터로첫번째프로젝트를만들어봅시다. 화면왼쪽위의 [ 새프로젝트시작하기...] 버튼을클릭합니다. 첫번째프로젝트이름을 HelloApp 이라고쓰고 [ 확인 ] 버튼을클릭합니다. Chapter 1 앱인벤터시작하기 19
디자이너편집화면과블록편집화면 1 디자이너편집화면 프로젝트를만들면다음과같은화면이나타납니다. 이화면이 디자이너편집화면 입니다. 이화면에서는버튼, 그림등앱화면에넣을여러가지요소들을알맞게배치할수있고, 카메라등화면에보이지않는요소들도추가할수있습니다. ➊ ➋ ➌ ➍ ➎ ➊ [ 디자이너 ] 버튼 : 이버튼을클릭하면디자이너편집화면으로돌아옵니다. ➋ [ 팔레트 ] 창 : 앱에넣을수있는요소들이있습니다. 원하는요소를찾아뷰어창으로드래그합니다. ➌ [ 뷰어 ] 창 : 팔레트에서요소를선택하여이곳으로드래그하고보기좋게배치합니다. 앱화면에서어떻게보일지예상할수있습니다. ➍ [ 컴포넌트 ] 창 : 뷰어창으로드래그한요소들이이곳에나타납니다. ➎ [ 속성 ] 창 : 선택한요소의속성 ( 색, 크기, 활동등 ) 을지정할수있습니다. 20 앱인벤터 PART 1 앱인벤터란
2 블록편집화면 디자이너편집화면에서화면오른쪽위의버튼을클릭하면블록편집화면이나타납니다. 이화면에서는블록들을끌어다놓고맞추어서앱이실행되는명령들을만듭니다. ➋ ➌ ➍ ➊ ➎ ➏ ➊ [ 블록 ] 버튼 : 이버튼을클릭하면블록화면으로돌아옵니다. ➋ [ 블록 ] 창 : 만들고자하는앱에서실행하고싶은일반적인기능들을찾아 [ 뷰어 ] 창으로드래그합니다. ➌ [ 뷰어 ] 창 : 이곳으로드래그된블록들을합쳐서관계와실행을만들어냅니다. ➍ 백팩 : 블록을복사하고붙여넣을때쓸수있는도구입니다. 현재사용중인프로젝트나스크린에서블록을복사해서다른프로젝트나스크린에붙여넣을수있습니다. ➎ 경고창 : 사용자가알아야할사항이나프로그래밍상의오류를알려줍니다. ➏ 휴지통 : 블록을이곳으로드래그하면삭제할수있습니다. Chapter 1 앱인벤터시작하기 21
앱인벤터와스마트기기연결하기 앱인벤터에서는실제스마트기기에서화면이어떻게보이는지, 의도한대로작동되는지등을수시로확인하면서앱을만들수있습니다. 또한작업하는내용을스마트기기의화면에서실시간으로볼수있는데, 다음과같은세가지방법이있습니다. 먼저, 디자이너편집화면에서 [ 팔레트 ] 창의아이콘을 [ 뷰어 ] 창의스마트기기모양화면으로드래그합니다. [ 뷰어 ] 창의화면에단추가생긴것을볼수있습니다. 앱인벤터와스마트기기를연결하여, 이모양이스마트기기에서도그대로나타나는지확인해보겠습니다. 22 앱인벤터 PART 1 앱인벤터란
1 스마트기기가있고와이파이를쓸수있는경우 이경우가장간단하게연결할수있습니다. 스마트기기에서 [play store] 앱을실행한후 MIT AI2 Companion 이라는앱을찾아다운로드하고설치합니다. 그리고컴퓨터와스마트기기를 같은와이파이로연결합니다. 앱인벤터의 [ 연결 ] - [AI 컴패니언 ] 을클릭하여 QR 코드가나타난것을확인합니다. Chapter 1 앱인벤터시작하기 23
다운로드한 MIT AI2 Companion 앱을실행합니다. 파란색 [scan QR code] 버튼을클릭하여 컴퓨터화면에나타난 QR 코드를읽습니다. 앱인벤터의화면이스마트기기에보이는것을확인합니다. 24 앱인벤터 PART 1 앱인벤터란
2 스마트기기가없는경우 스마트기기가없는경우에는에뮬레이터라는프로그램을설치하여컴퓨터에스마트기기의 화면이보이도록할수있습니다. http://appinventor.mit.edu/explore/ai2/windows.html 화면에서 Download the installer 를클릭하여프로그램을다운로드합니다. 다운로드한파일을찾아더블클릭하여실행합니다. 여러개의창이나타나는데, [Next], [I Agree], [Next], [Next], [Install] 버튼을차례로클릭하여프로그램을설치합니다. 설치가완료되면프로그램이다음과같이실행됩니다. Chapter 1 앱인벤터시작하기 25
앱인벤터의 [ 연결 ] - [ 에뮬레이터 ] 를클릭하고에뮬레이터에앱인벤터의화면이보일때까지 기다립니다. 3 스마트기기는있지만와이파이연결이어려운경우 스마트기기는있지만와이파이연결이어려운경우에는 http://appinventor.mit.edu/explore/ai2/windows.html 화면에서 Download the installer 를클릭하여프로그램을다운로드 합니다. 26 앱인벤터 PART 1 앱인벤터란
다운로드한파일을찾아더블클릭하여실행합니다. [Next], [I Agree], [Next], [Next], [Install] 버튼을차례로클릭하여프로그램을설치합니다. 바탕화면에다음과같은아이콘이생겼는지확인하고더블클릭하여실행합니다. 다음으로, 스마트기기에 MIT AI2 Companion 이라는앱을다운로드하고설치합니다. 스마트기기의 [ 시스템설정 ]-[ 개발자옵션 ] 또는 [ 설정 ]-[ 애플리케이션 ]-[ 개발 ] 에서 USB 디버깅 을선택합니다. 만일이메뉴가보이지않는다면 [ 설정 ]-[ 일반 ]-[ 디바이스정보 ] 에서 [ 빌드번호 ] 를 7번클릭하면개발자옵션이나오는데, 이곳에서 USB 디버깅 을선택하면됩니다. 컴퓨터와스마트기기를 USB 선으로연결하고 MIT AI2 Companion 앱을실행합니다. 앱인벤터의 [ 연결 ]-[USB] 를클릭합니다. 앱인벤터의내용이스마트기기에잘나타나는지확인합니다. Chapter 1 앱인벤터시작하기 27
13 Chapter 기울이면개똥벌레가움직이며똥을주워먹어요 앱을시작하면개똥벌레한마리와똥세개가보여요. 스마트기기를기울이면개똥벌레가움직이면서똥을먹어요. 개똥벌레가똥을먹으면똥이없어져요. 잠시후똥은다른곳에다시나타나요. 똥이없어질때마다점수가 1점씩올라가요. 이버튼을클릭하면점수가다시 0점이돼요. 156 앱인벤터 PART 2 앱인벤터연습하기
처음사용하는요소 : 스마트기기의공간에서의방향을롤, 피치, 방위각세가지수치로알려주는요소입니다. 롤은스마트기기가좌우로세워져있는정도를말합니다. 누워있는상태가 0, 왼쪽면으로세운상태가 90, 오른쪽면으로세운상태가 -90입니다. 피치는스마트기기가위아래로세워져있는정도를말합니다. 누워있는상태가 0, 윗면을바닥으로해서세운상태가 90, 아랫면을바닥으로해서세운상태가 -90입니다. 방위각은스마트기기의머리부분이북쪽을향하면 0, 동쪽을향하면 90, 남쪽을향하면 180, 서쪽을향하면 270을나타냅니다. 처음사용하는블록 : 방향센서를인식하여스마트기기의방향이변경되었을경우실행할명령을블록안에넣습니다. 방위각, 피치, 롤, 각도를각각인식할수있습니다. : 스마트기기가얼마만큼기울어졌는지를 0에서 1 사이의수로나타낸값입니다. 이값이커지면스마트기기의표면에공이있다고했을때받는힘의크기 ( 공이굴러가는속도 ) 도큽니다. : 스마트기기가기울어진방향을말해주는값입니다. 스마트기기의표면에공이있다고했을때이값에따라공이굴러가는방향이결정됩니다. : 여러개의명령들을모아둘수있는함수블록입니다. 함수이름 자리에함수의성격에맞게사용자가지정할수있습니다. : 위에서지정한함수를실행하고자할때사용하는블록입니다. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 157
준비할파일 이미지파일 : dung.png 소리파일 : eating.mp3 beetle.png 1 [English]-[ 한국어 ] 를클릭하여언어를한국어로바꾼후 [ 프로젝트 ]-[ 새프로젝트시작하기...] 를선택 하여새프로젝트를만듭니다. 새프로젝트이름은 Eat 라고적습니다. 2 이번앱에서쓸파일을업로드합니다. [ 미디어 ] 창의 [ 파일올리기...] 버튼을클릭하여 dung.png, beetle.png, eating.mp3 세개파일을차례로선택하여추가합니다. 158 앱인벤터 PART 2 앱인벤터연습하기
3 [ 팔레트 ] 창의 [ 그리기 & 애니메이션 ]- 를 [ 뷰어 ] 창으로드래그하고 [ 속성 ] 창에서 [ 높이 ] 와 [ 너비 ] 를모두 부모에맞추기 로지정합니다. 4 [ 그리기 & 애니메이션 ]- 를 [ 뷰어 ] 창의 [ 캔버스 ] 안으로네개드래그하고추가된 [ 이미지스프라이트 ] 의이름을 똥 1, 똥 2, 똥 3, 쇠똥구리 로바꿉니다. 똥 1, 똥 2, 똥 3 은모두 [ 높이 ] 와 [ 너비 ] 는모두 20 pixels, [ 사진 ] 은 dung.png, [ 회전하기 ] 는 선택해제 로지정합니다. [ 회전하기 ] 는가방향을바꿀때그림이회전하도록 하는기능이에요. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 159
5 [ 쇠똥구리 ] 의 [ 높이 ] 와 [ 너비 ] 는모두 50 pixels, [ 사진 ] 은 beetle.png 로지정합니다. 6 [ 팔레트 ] 창의 [ 레이아웃 ]- 를선택하고 [ 뷰어 ] 창의 [ 캔버스 ] 아래로드래그합니다. [ 팔레트 ] 창의 [ 사용자인터페이스 ]- 을로만든네모안에넣습니다. [ 레이블 1] 의이름을 점수 로바꾸고 [ 속성 ] 창의 [ 텍스트 ] 에 점수 : 를입력합니다. 160 앱인벤터 PART 2 앱인벤터연습하기
7 [ 팔레트 ] 창의 [ 사용자인터페이스 ]- 를선택하여이전에추가한옆으로드래 그합니다. [ 텍스트상자 1] 의이름을 현재점수 로바꾸고 [ 속성 ] 창의 [ 힌트 ] 에 먹은똥의개수 를입력 합니다. 8 [ 팔레트 ] 창의 [ 사용자인터페이스 ]- 을선택하여이전에추가한옆으로드래그 합니다. [ 버튼 1] 의이름을 다시시작 으로바꾸고 [ 속성 ] 창의 [ 텍스트 ] 에 다시시작 을입력합니다. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 161
9 쇠똥구리가똥을얻을때마다소리가나도록합니다. [ 팔레트 ] 창의 [ 미디어 ]- 어 ] 창으로드래그하고 [ 속성 ] 창에서 [ 소스 ] 를 eating.mp3 파일로지정합니다. 을선택하여 [ 뷰 10 스마트기기를기울이면매시각스마트기기의방향을확인해서쇠똥구리가움직이도록하기위해 [ 팔레트 ] 창의 [ 센서 ]-, 를 [ 뷰어 ] 창으로드래그합니다. 162 앱인벤터 PART 2 앱인벤터연습하기
11 디자이너편집화면이완성된모습입니다. 버튼을클릭하여블록편집화면으로이동합니다. [ 뷰어 ] 창에서 [ 이미지스프라이트 ] 의그림이잘보이지않을경우 [ 속성 ] 창에서 [ 높이 ] 와 [ 너비 ] 를 [ 자동 ] 으로설정했다가픽셀로다시지정해보아요. 12 점수변수를만들어보겠습니다. - 을선택하고 과같이 변수이름 을 점수 로바꿔줍니다. 이어서 - 을선택하여 끼워줍니다. 점수 라는이름의변수를만들면서그초깃값을 0 으로지정하겠다는의미입니다. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 163
13 점수 라는이름의함수를만들고개똥벌레가똥을먹을때마다이함수를사용해보겠습니다. - 을선택하고 과같이이름을 점수 로바꿔줍니다. 이어 - 을선택하고아래화살표를클릭하여 으로바꿔 준후 - 을선택하여끼워줍니다. 첫번째빈칸에는 - 을, 두번째빈칸에는 - 을다음과같이넣습니다. [ 점수 ] 함 수가실행되면기존의 점수 변수에 1점을더한다는의미입니다. 는자주쓰이는명령의모음을미리만들어둘수있는블록이에요. 앱을만들면서자주 쓰이는명령들을매번블록조립하는대신미리 만들어둔함수를가져와서사용할수있어요. 14 점수가변한상태를화면에보여주어야하겠죠? - 을 선택하여블록에추가하고 - 을끼워다음과같이 [ 점수 ] 함수를완성합니다. 164 앱인벤터 PART 2 앱인벤터연습하기
15 스마트기기를기울일때마다개똥벌레가움직이도록해보겠습니다. - 을선택하고 - 과 - 움직이도록하겠다는의미입니다. 을다음과같이이어끼웁니다. 스마트기기를기울이는방향으로개똥벌레가 16 스마트기기를기울인정도에따라개똥벌레가움직이는속도가달라지도록해보겠습니다. - 을함수블록에끼우고 - 을이어끼웁니다. - 과 - 을다음과같이블록안에넣습니다. 에는 100 을입력하여 으로바꿔줍니다. 은스마트기기가기울어진정도에따라 0 에서 1 사이의수를가져요. 쇠똥구리의 [ 속도 ] 는정해진시간동안움직이는픽셀의수를 나타내고요. 예를들어, [ 시계 ] 의시간을 1000 으로, [ 쇠똥구리 ] 의 [ 속도 ] 를 100 으로지정했다면 1 초동안 100 픽셀만큼움직이는 속도를의미해요. 블록에서 [ 시계 ] 의시간이 1000 일때, 방향센서의크기가반정도기울어진 0.5 라면이값에 100 을곱하여 1 초당 50 픽셀만큼움직이는속도를의미해요. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 165
17 쇠똥구리가똥과부딪히면똥이없어지면서점수가 1 점올라가도록블록을만들어봅시다. - 을선택하고 - 을그안에넣어줍니다. 18 - 을선택하여 만약 절에끼우고 - 을뒤에끼웁니 다. - 을 그러면 절에끼우고 - 을뒤에이어끼웁니다. - 을다음줄에끼우고이어 - 을다음과같이끼워넣습니다. [ 쇠똥구리 ] 가 [ 똥1] 과부딪히면 [ 똥1] 이보이지않도록하면서소리를낸후 [ 점수 ] 함수를실행하라는의미입니다. 166 앱인벤터 PART 2 앱인벤터연습하기
19 [ 쇠똥구리 ] 가 [ 똥2], [ 똥3] 과부딪혔을경우에도같은명령을수행하도록 만약... 그러면 절을복사합니다. 다음과같이 만약 절에서마우스오른쪽을클릭하여 [ 복제하기 ] 로복사한다음필요한부분을 [ 똥 2], [ 똥3] 으로바꿔줍니다. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 167
20 [ 개똥벌레 ] 와부딪혀서없어진 [ 똥 ] 이시간이지나면다시나타나도록해봅시다. - 을선택하고 - 을사이에넣습니다. - 을 만약 절에끼우고첫번째빈곳에 - 을, 두번째빈곳에 - 을다음과같이끼워넣습니다. 지정한시간마다확인해서 [ 똥1] 이보이지않으면, 다음에올명령을수행하라는의미입니다. 21 [ 똥 1] 이캔버스의아무곳에서나나타나도록하겠습니다. - 을선택하고 그러면 절에끼웁니다. 이어 - 을선택하여 [x] 와 [y] 블록에끼우고 다음과같이숫자를조절합니다. 168 앱인벤터 PART 2 앱인벤터연습하기
22 [ 똥 1] 을임의의위치로옮긴후에는이것이보이도록해야하겠죠? - 을선택하여끼우고 - 을다음과같이이어끼웁니다. 23 만약... 그러면 절을복사하여 [ 똥2], [ 똥3] 도같은내용으로블록을만들어줍니다. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 169
24 [ 다시시작 ] 버튼을클릭했을때점수가 0 점이되도록만들어봅시다. - 을선 택하고 - 과 - 을이어블록사이에끼웁니 다. 다음으로 - 과 을다 음과같이끼웁니다. 25 이어 [ 똥1] 이보이도록 -, - 을이어붙이고 [ 똥2], [ 똥 3] 블록도다음과같이완성합니다. 170 앱인벤터 PART 2 앱인벤터연습하기
26 완성된블록입니다. Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 171
27 이제스마트기기에연결해서잘작동되는지결과를살펴봅니다. PC와스마트기기가같은와이파이에연결되어있는경우 PC에서 [ 연결 ]-[AI 컴패니언 ] 을클릭하고스마트기기에서는 [MIT AI2 Companion] 앱을실행합니다. 스마트기기에서버튼을클릭하여 PC 화면에나타난 QR 코드를스캔하고잠시기다리면스마트기기의화면에앱이실행됩니다. 스마트기기를기울여쇠똥구리가잘움직이는지확인합니다. 똥에닿으면똥이없어지고점수가올라가는것도확인합니다. [ 다시시작 ] 버튼을눌러다시시작해봅니다. 172 앱인벤터 PART 2 앱인벤터연습하기
스마트앱관련용어를알아봅시다 리워드앱 Reward App 리워드앱이란스마트폰으로광고를보거나미션을수행하면포인트나현금으로보상해주는 앱입니다. 스마트폰사용자가해당앱을설치하고여기에서나오는광고를보거나, 특정이벤트참여를신청하면포인트를적립해주는앱서비스입니다. 앱에접속해링크된광고나콘텐츠를이용하면일정액의포인트가적립됩니다. 즉, 광고를보는대가를보상해주는것으로여기서누적된포인트는추후상품을구입하거나현금으로교환할수있습니다. 휴대폰광고를시청하고포인트를제공하는단순한형식에서퀴즈를풀면포인트를지급하는형식, 포인트대신최신트렌드제품을증정하여사용해보도록하는방식등다양한형식이등장하고있습니다. 또포인트를자신이선택한후원단체등에기부하는앱도등장했습니다. 리워드앱을활용하면광고주의경우스마트폰이용자들을통해자사제품이나이벤트를쉽게홍보할수있는장점이있습니다. 출처 : [ 박문각시사상식사전 ] 리워드앱 (reward App] (http://terms.naver.com/entry.nhn?docid=2045016&cid=43667&categoryid=43667) Chapter 13 기울이면개똥벌레가움직이며똥을주워먹어요 173