학생용워크북 - 고등학생용 -
목차 * 전체학습계획표 4 1 장인터렉션디자인과앱디자인과정탐구 6 2 장앱인벤터탐구및예제앱제작 19 3 장게임스토리보드작성하기 42 4 장나만의악기앱개발하기 56 5 장개발한악기앱평가하기 70 * 직업체험및진로연계 79
나를소개해봅시다. 이름 학교 / 학년 꿈 하고싶은말 1
나의멘토를알아봅시다. 이름 학교 / 학년 및전공 꿈 연락처 멘토가 전하는말 이름 학교 / 학년 및전공 꿈 연락처 멘토가 전하는말 2
네트워크를형성해봅시다. 조원들조이름 : 이름 역할 학교 / 학년특징꿈연락처 이름 역할 학교 / 학년특징꿈연락처 이름 역할 학교 / 학년특징꿈연락처 3
* 전체학습계획표 장 일시 교과분류 소주제 주요학습활동 심화학습활동 1 장 1 일 14:30~15:50 디자인프로그래밍 앱디자인 ( 개발 ) 과정탐구 들어가기기본익히기실습하기평가하기 예제앱체험을통한인터렉션디자인의개념이해인터렉션디자인개요예제앱훑어보면서디자인 / 개발과정익혀보기앱개발과정을플로우차트로표현 유사어플리케이션을검색하여디자인과정표현해보기 2 장 1 일 16:00~17:30 프로그래밍앱개발 실습하기 기본익히기실습하기평가하기 앱인벤터실습및질의응답예제소스를이용한센서및블록에디터체험앱화면 GUI 구성체험센서를응용한앱만들기 예제자료응용해보기 (ex: 예제와다른로직 ) 들어가기 악기앱제작소개 3 장 2 일 14:30~16:20 디자인 앱디자인 아이디어 도출 기본익히기 실습하기 평가하기 다양한센서인터렉션아이디 어구상하기 스토리보드를활용하여아이 디어구체화시켜보기 스토리보드평가회의 (Interaction 개선사항및추가 GUI 디자인 ( 화면그래픽 ) 스토리보드 / 화면 GUI 평가회의 아이디어 ) 2 일 16:30~17:30 직업체험 및진로 연계 (1) 앱디자이너특강 ( 재미있는 앱디자인사례와디자이너의 업무탐구, 이현진교수담당 ) 들어가기 앱인벤터활용및센서응용 필요한디자인소스 ( 사운드, 4 장 3 일 14:30~16:20 프로그래밍나만의앱 개발하기 실습하기 아이콘, 버튼등 ) 만들기앱인벤터를사용하여앱개발실습및센서응용아이디어를구체화할때어 GUI 디자인 구현을 위한 프로그래밍 평가하기 떠한어려운점이있는지알아보기 앱테스팅및수정 3 일직업체험퍼베이시브로봇연구실탐방 4
16:30~17:30 및진로 연계 (2) ( 스마트폰앱을이용한다양한사례탐구 : 탱크로봇조종앱, 위치인식앱등, 황성운교수담당 ) 4 일 13:00~14:00 직업체험 및진로 연계 (3) 캠퍼스탐방 ( 생활속의예술구현을위한다양한작품및시설체험 : 3D 프린터, 레이저커터등 ) 들어가기 다른팀의앱디자인결과물체험해보기 앱등록과정알아보기 기본익히기 악기앱평가의기준과평가 방법 다른팀의피 5 장 4 일 14:00~15:50 디자인 프로그래밍 개발한앱 평가하기 실습하기 앱소개 UCC 녹화및개발결과물시연 ( 연주회 ) 악기앱평가회및결과발표 드백을받아앱개선사항수정 앱디자이너 / 개발자가된소감을발표하기 ( 설문 ) 평가하기체험프로그램에대한평가설문 * 심화학습활동과정과관련하여앱인벤터매뉴얼을참조하기바람 5
1 장 앱디자인 ( 개발 ) 과정탐구 학습소개다양한사용자인터렉션을사용하는앱을체험하면서인터렉션디자인을기본개념을이해하고앱인벤터로만든예제앱분석을통하여앱의디자인및개발과정을알아봅니다. 학습목표 예제앱을체험하면서인터렉션디자인을이해하고앱의개발과정을 이해한다. STEAM 요소 - Science: 다양한스마트폰내장센서특징이해및활용하기 - Technology /Engineering: 앱구성요소이해하기 - Arts: 인터렉션디자인사례체험 - Mathematics: 앱개발과정분석 준비물 컴퓨터및앱인벤터소프트웨어, 스마트폰, 연결잭, 교재활동지 6
< 상황제시 > 학교에서단체로미술관견학을가게되었는데이전에는본적이없던새로운미디어아트전시였다. 작품이카메라를통해나의모습을인식하면그모습을나무블럭으로재현해주기도하고, 또어떤작품은나의몸짓에따라다른소리가나오는악기도있었다. 물체에자극을주면물체가어떻게이를인식하고나에게반응을하는것인지그과학적원리가무척궁금했다. 내주변의물체에따라서어떤자극을주었을때어떤반응이나오면더재미있을지상상해보았다. 특별한소리가나오거나예상치못했던그림이나오면더재미있을것같다. 이렇게재미있는악기를나도만들어보고싶은데어떻게준비해야할까? 7
들어가기 예제앱을체험하면서인터렉션디자인의개념을이해합니다. [ 활동 1] 피아노앱과구슬굴리기앱을체험해봅시다. 탐구 1) 피아노앱을체험해보고다음의질문에답해봅시다. Q. 피아노앱을사용하기위하여사용자는어떤행동을하나요? Q. 앱은사용자의행동에어떻게반응하나요? Q. 내가이앱을발전시킨다면어떤기능이나표현을추가하고싶습니까? 8
탐구 2) 구슬굴리기앱을체험해보고다음의질문에답해봅시다. Q. 사용자는구슬굴리기앱을사용하기위하여어떤행동을하나요? Q. 앱은사용자의행동에어떻게반응하나요? Q. 내가이앱을발전시킨다면어떤기능이나표현을추가하고싶습니까? 9
기본익히기 인터렉션디자인의의미와활용방법을이해하고다양한분야에 인터렉션디자인이적용된사례를알아봅시다. 탐구1) 예제앱에서우리는사용자의행동에따라앱이반응하는현상을관찰하였습니다. 이와같이사용자와기기가정보를주고받으며상호작용하는것을인터렉션 (interaction) 이라고합니다. 피아노예제앱에서사용자가원하는음을터치하면, 앱은어느음이터치되었는지를인식하고 ( 사용자가제공한정보를받아서 ) 해당음에맞는음악파일을실행합니다. ( 사용자가원하는서비스를제공합니다.) 많은디지털서비스들이이러한인터렉션에의하여작동합니다. 예를들어 TV 를보고싶을때리모컨의전원버튼을누르면 TV 가켜지게되는데, 이것도사용자가 TV 를보고싶다는의도를충족하기위하여리모컨버튼을누르고 ( 사용자가 TV 에정보를제공하고 ) TV 가켜지는것을확인하는 (TV 가사용자에게서비스를제공하는 ) 행위도인터렉션입니다. 10
또반대로기기가정보를주면사용자가정보에대하여반응하기도합니다. 컴퓨터를사용할때경고창이나오면사용자가경고창의내용을확인하고, 컴퓨터가요청하는작업을 하게되는것이그예입니다. 사람과컴퓨터의인터렉션은사용자가마우스나키보드로의도를입력하면그에대한반응을컴퓨터 스크린의그래픽이나사운드로받게됩니다. 그리고스마트폰의경우는더다양한사용자인터렉션을 제공할수있습니다. 스마트폰은다양한사용자정보를입력받고반응하는데, 화면을터치하는것이아니라구슬굴리기 앱처럼스마트폰을기울이거나흔드는동작, 스마트폰의위치를들어올리거나내리는동작, 목소리, 카메라입력, 밝기변화등이모두사용자의입력으로인식될수있습니다. 스마트폰이이러한사용자의다양한입력을인식하게하는부분을센서라고합니다. 스마트폰은다양한센서들을사용하여사용자에게풍부하고즐거운인터렉션을제공하고있습니다. 이렇게사용자가원하는서비스를제공하기위하여사용자와기기의상호작용을어떻게수행해야할지기획하고효과적인표현방법을제안하는일을인터렉션디자인 (interaction design) 이라고합니다. 보통디자인이라고하면결과물이시각적으로이해되는그림으로표현하는것으로생각하는데, 인터렉션디자인은시각적표현뿐아니라사용자행위나서비스의구조까지포함되는디자인분야입니다. 본장에서는스마트폰서비스의인터렉션디자인을자세히살펴보고서비스가실현되도록 프로그래밍으로구현하는과정을경험해보도록하겠습니다. 11
탐구 2) 모바일의가장기본적인서비스중하나인알람앱에대한사례를보며인터렉션 디자인에대해알아봅시다. Sleep If U Can 알람서비스의기능은사용자를깨우는것입니다. 많은알람앱에서다양한인터렉션디자인을넣어사용자를깨우기위한노력을합니다. 여기에선알람앱들중에서도죽음의앱이라는별명을지닌 Sleep If U Can 앱에대해설명하겠습니다. 1 >2 >3 >4 1. 입력인터렉션 알람이울릴시간과알람을해제할방법을정한다. 2. 출력인터렉션 알람사운드와함께알람해제방법을제시한다. 3. 입력인터렉션 미리지정해놓은이미지를찾아찍는다. 4. 출력인터렉션 알람이해제되고알람해제화면으로돌아간다. 12
실습하기앱인벤터로제작한예제앱을분석해보고제작과정을추론해봅니다. 스마트폰에서사용하는앱을만들기위해서우리는앱에서필요로하는만큼의버튼과여러가지기능을가지는부분을모두만들어야합니다. 그러나이과정에서는많은시간이소요됩니다. 그러면이과정을좀더간단하게만들수없을까요? 방법은간단합니다. 앱인벤터를사용하면좀더쉽게앱을만들수있습니다. [ 활동 1] 앱인벤터는무엇일까요? 앱인벤터는앱제작자가자주사용하는부분을컴포넌트및블록으로모듈화하여좀더빠르게앱을 제작할수있도록도와주는앱제작도구입니다. http://beta.apptinventor.mit.edu 13
[ 활동 2] 앱인벤터를통한앱제작과정 이번에는앱인벤터를이용하여어떻게앱을만드는지알아봅시다. 사용자는여러가지컴포넌트와미디어요소를이용하여외부화면디자인을구성합니다. 그후블록에디터를이용하여각컴포넌트의동작을블록으로구성합니다. 두과정에서생성된파일을종합하여안드로이드응용프로그램설치파일인 apk 파일을만들어냅니다. 이파일을스마트폰에다운로드하고설치하여앱을이용할수있습니다. 14
[ 활동 3] 피아노앱의앱인벤터화면디자인구성요소를알아봅시다. 앱인벤터를열고 My Project 목록에서피아노앱을열어봅시다. 아래의화면은피아노앱을앱인벤터에서열어본웹페이지화면입니다. 디자인에디터에서는피아노 앱에필요한구성요소들을선택하고화면구성요소의기본적인글자크기나버튼의색등디자인과 관련된속성을선택하고편집할수있습니다. 탐구 1) 앱인벤터구성요소를알아봅시다. 앱인벤터의 Viewer 창으로현재작업중인앱의화면을미리볼수있는화면입니다. 스크린에있는디자인구성요소들을속성창에서그내용을변경할수있습니다. Viewer 화면하단에 Non-visible component 에서는앱의화면에는안보이지만앱인벤터에삽입된요소들을표시하는부분입니다. 여기에는피아노음을내는음원들이포함되어있습니다. 15
[ 활동 4] 피아노앱의블록에디터를알아봅시다. 피아노앱의블록에디터를열고피아노앱의작동원리를알아봅시다. 피아노앱의블록구성을보면단순한모듈이반복적으로입력되어있는것을볼수있습니다. 블록들은 특정버튼을누르는시점에그음값에해당하는소리가난다 라는구조를가지고있으며, 블록에디터구성을보면앱인벤터 Viewer 의건반개수와동일한개수의블록들이있습니다. 탐구 1) 디자인에디터와블록에디터의상호관계를이해하기위해아래의문제를풀어봅시다. A.Touched 을누르게되면 ( ) 음이재생이된다. C1.Touched 을누르게되면 ( ) 음이재생이된다. C.Touched 을누르게되면 ( ) 음이재생이된다. 레 음을듣기위해서는어떤버튼을눌러야하나요? ( ) 파 음을듣기위해서는어떤버튼을눌러야하나요? ( ) 16
평가하기 공부한앱개발과정을플로우차트로표현하여정리해봅시다. 앱의기획과디자인, 프로그래밍구현과앱출시까지과정을제시자료를통하여알아보고 여러분의앱개발과정을기획해봅시다. [ 활동 1] 앱개발과정에대해알아봅시다. 아래의 URL 을참고하세요. http://www.onlinejournalism.co.kr/1196230949 탐구 1) 앱의개발과정을알기쉽게그림으로표현해봅시다. 17
탐구 2) 각조원들의앱개발에관한의견과탐구 1) 의표현들을토의하고종합하여앱개발 과정의순서와내용을표현하는그림 ( 다이어그램 ) 을제작하고조별로발표하여봅시다. 18
2 장 앱개발실습하기 학습소개먼저앱을만드는데필요한앱인벤터를소개한다. 다음으로앱인벤터를활용하여악기를만드는데필요한기본구성요소를예제앱으로제공하고, 학생들이이를따라직접만들어봄으로써프로그래밍원리를자연스럽게습득하도록합니다. 학습목표 앱인벤터의기본적인구조와사용법을알아보고, 나만의새로운앱 만들기사전단계로예시앱을만들어본다. STEAM 요소 - Science: 스마트폰가속도센서원리체험 - Technology /Engineering: 앱설치체험, 프로그래밍소프트웨어체험 - Arts: 아이디어의다양성과표현방법에대한이해 - Mathematics: 논리적사고연습 준비물 컴퓨터및앱인벤터소프트웨어, 스마트폰, 연결잭, 교재활동지 19
< 상황제시 > 2013년 6월 25일오늘은정보과학수업시간에디지털기술융합및사례에대해서배웠다. 집에와서생각해보니, 정말주위를둘러보면모든것이디지털화되어가는것을피부로느낄수있으며, 아날로그와는달리디지털정보및기기는특성상상호호환이이뤄지기쉽고따라서융합도쉽게이루어지는것같다. 선생님께서는숙제로디지털기술의융합이적용될수있는새로운분야를발굴하여정리해오라는숙제를내주셨다. 그런데막상숙제를받고보니쉽지가않았다. 기존의융합사례는알겠는데새로운분야를생각해낸다는것이생각보다어려웠다. 따라서, 문득내가좋아하는음악에서다시접근해보기로하였다. 생각해보니, 지금까지의대부분의악기는연주자가악기를상대로 1:1로터치 ( 지시 ) 하는단순한방식으로연주해왔음을알수있다. 예를들어, 피아노의경우 ' 솔 ' 건반을치면 ' 솔 ' 음이나올뿐이었다. 그러나융합시대에악기들도융합할수없을까, 융합하면재미있지않을까라는생각을해보았다. 피아노, 멜로디언등과같은건반악기와북, 탬버린등과같은타악기를합쳐서새로운방식으로연주하는악기앱을만들어보면어떨까? 그런데한연주자가동시에다른악기를어떻게연주할수있을까? 이의문은풀리지않았다. 이생각을정리하여선생님께말씀드렸더니, 선생님께서정말재미있는아이디어라고칭찬해주셨다. 또한한명의연주자가동시에여러악기를연주하려면, 기존과는달리, 한번에연주자의다양한모션 ( 액션 ) 을수용할수있는다중방식 (multi-modal) 의악기를만들어야할것같다고말씀해주셨다. 이를위해서는버튼을누르면소리가나는기존의방식 (1:1 터치방식 ) 은피해야하고, 따라서가능하면사용할수있는버튼의수를최소 ( 예를들면 2개 ) 로제한하면서도연주자의다양한모션을수용하기위해스마트폰의각종센서 ( 터치, 가속도, 자기등 ) 를활용하면가능할것같다고말씀해주셨다. 선생님께서는정보과학실습시간에스마트폰앱제작에필요한몇가지기본적인기술을가르쳐주셨다. 대표적인건반악기인피아노앱과, 스마트폰의가속도센서를이용하여건반위를이동할때필요한구슬굴리기앱두가지를가르쳐주셨다. 처음에는스마트폰앱은컴퓨터를전공하는대학생이나할수있을것이라고생각하고조금두려운생각이들었다. 그러나, 선생님께서가르쳐주신앱인벤터프로그래밍기본지식과위두가지앱을활용하여, 드디어세상에없는나만의악기앱을만들게되었다. 야호! 20
기본익히기앱인벤터를조작하는데필요한기초적인부분을알아봅시다. 이번에는앱인벤터가어떻게구성되어있는지살펴보며앱인벤터가어떻게앱을간단하게만들수있는지알아봅시다. 각부분의자세한내용은매뉴얼을참고바랍니다. [ 활동 1] 디자인뷰화면에대하여알아봅시다. 디자인뷰는앱인벤터의프로젝트를실행하면볼수있는첫화면입니다. 사용자는디자인뷰화면에서제작자는자신이만들앱의외부디자인을구성합니다. 디자인뷰는크게 5 개의칼럼과기타버튼으로구성되어있습니다. 탐구 1) 팔레트칼럼에대하여알아봅시다. 팔레트칼럼에는앱인벤터에서추가할수있는모든컴포넌트를비슷한그룹별로묶어둔부분입니다. 그러면컴포넌트는무엇일까요? 컴포넌트란앱을쉽고편리하게만들기위하여앱에서자주사용하는부분을미리만들어 21
놓은 ( 모듈화한 ) 부분입니다. 앱개발자는이러한컴포넌트를가져다사용하므로더쉽고빠르게앱을 만들수있습니다. 따라서앱인벤터는모듈화를지원하는프로그래밍도구입니다. 탐구 2) 뷰어칼럼에대하여알아봅시다. 뷰어칼럼은앱의실제화면이되는부분입니다. 뷰어칼럼을통해제작자는자신이원하는대로컴포넌트를배치하여앱의디자인을하게됩니다 탐구 3) 컴포넌트칼럼에대하여알아봅시다. 컴포넌트칼럼에는현재앱에서사용하는모든컴포넌트의목록이저장됩니다. 탐구4) 미디어칼럼에대하여알아봅시다. 미디어칼럼에서는앱에필요한파일들을관리하는부분입니다. 앱제작자는앱에필요한여러가지파일을여기에저장하여빠르게필요한파일을가져와서사용할수있습니다. 탐구 5) 속성칼럼에대하여알아봅시다. 속성칼럼에서는프로젝트에추가된모든컴포넌트를어떤모양으로구성하고또컴포넌트의크기및 초기동작을구성할수있습니다. 탐구 6) 기타버튼에대하여알아봅시다. Save: 앱인벤터프로젝트를저장하는부분입니다. Save As: 앱인벤터의프로젝트를복사하여다른이름으로저장하는버튼입니다. Checkpoint: 프로젝트의일정시점을저장하는버튼입니다. Add Screen: 새로운앱화면을추가하는버튼입니다. Remove Screen: 앱화면이하나이상인경우앱화면을삭제할수있는버튼입니다. 블록에디터를실행하는버튼입니다. 완성된앱을저장하는버튼입니다. 22
[ 활동 2] 블록에디터 (Block Editor) 에대하여알아봅시다. 블록에디터는디자인뷰에서설정한컴포넌트들이어떠한동작을수행하는가를블록을이용하여 설정해주는부분입니다. 블록에디터는크게 4 가지부분으로나눌수있습니다. 탐구1) 블록컴포넌트팔레트에대하여알아봅시다. 블록컴포넌트팔레트에는각컴포넌트및동작에필요한블록들이그룹별로구성되어있습니다. 그러면블록이란무엇일까요? 블록이란서로맞췄을때스마트폰이수행할명령문장을만들어내는단어조각입니다. 앱제작자는블록을조립하면서스마트폰이수행할명령을이전보다빠르게만들수있습니다. 블록컴포넌트팔레트는아래와같은그룹으로분류되어있습니다. - Built-In 그룹에는앱동작에필요한기본적인블록으로구성되어있습니다. - My Blocks 그룹에는사용자가디자인뷰에서사용한컴포넌트의동작을담당하는블록으로구성되어있습니다. - Advanced 그룹에는 Built-In 이나 My Blocks 에속하지않는블록들로구성되어있습니다. 각블록에대한자세한설명은매뉴얼을참고바랍니다. 23
탐구 2) 저장및삭제버튼에대하여알아봅시다. 현재저장되어있는블록의 [ 저장 / 전단계복귀 / 삭제 ] 등을담당하는버튼으로이루어져있습니다. 탐구 3) 에뮬레이터실행버튼에대하여알아봅시다. 앱인벤터에뮬레이터를실행하고사용할에뮬레이터를선택할수있는버튼으로구성되어있습니다. 탐구 4) 휴지통에대하여알아봅시다. 필요없는블록을삭제할수있는휴지통입니다. 사용자는이부분에블록을가져다놓으면블록을 삭제할수있습니다. 24
실습하기앱인벤터를이용하여새로운앱을만들기위한기초예시로두가지의앱을만들어보고새로운앱을만드는데필요한기초지식을습득합니다. [ 활동 1] 구슬앱의 GUI(GRAPHICAL USER INTERFACE) 구성구슬앱은스마트폰의기울어진정도를판단하는가속도센서를활용하여앱의물체를움직이는앱입니다. 앱을만들면서가속도센서의사용법과간단한앱만드는법을체험해보도록하겠습니다. 탐구 1) 앱인벤터프로젝트선택화면에서 New 를선택해봅시다. 프로젝트의이름을정하고 OK 를선택합니다. 프로젝트의이름은영어로작성합니다. 그리고아래의그림과같이스크린의속성칼럼에서구성요소정렬설정을중앙 (Center) 으로하고 스크린의방향을수평방향 (Landscape) 로설정합니다. 25
탐구2) 스마트폰의기울기값을받아들여서공을이동시키기위해서가속도센서를추가해봅시다. 구슬은어떤원리로스마트폰이기울어지는방향으로이동할까요? (Palette >Sensors >AccelerometerSensor 컴포넌트를뷰어칼럼으로드래그이동 ) 추가되면아래와같이뷰어칼럼에컴포넌트가추가됩니다. 센서란소리, 빛, 온도, 압력, 열, 기울어짐등외부로부터가해지는물리적인자극을파악하고이를전기신호로전달하는기능을가진장치를말합니다. 스마트폰에는여러가지센서가들어있으며본프로그램에서는가속도센서를사용합니다. 가속도센서는물체가받는힘에대하여반대방향으로작용하는관성을이용하여물체가받는힘, 가속도, 진동, 충격, 기울어진정도등을감지한후이를전기신호로변환시켜줍니다. 따라서스마트폰은가속도센서를이용하여우리가스마트폰을기울이는것을감지하고이것을구슬앱프로그램에전달해주어기울어진방향으로구슬을이동시킵니다. 탐구 3) 다음으로공이움직일수있는공간을만들어봅시다. 26
움직이는공간을만들기위하여캔버스를팔레트에서드래그하여컴포넌트를추가합니다. (Palette >Basic >Canvas 컴포넌트를뷰어칼럼으로드래그이동 ) ( 캔버스의크기는가로길이 : 470 pixels, 세로길이 : 250 pixels 으로설정합니다.) 그다음캔버스내부에서움직일공을 추가합니다. (Palette >Animation >Ball 컴포넌트를 캔버스로드래그이동 ) 그리고공의크기를보기좋게하기 위해서왼쪽그림과같이 Radius 설정을 30 으로변경합니다. 27
위그림과같이배치되었나요? 탐구 4) 이제공을움직이는부분을완성하기위해블록에디터화면으로이동합니다. 오른쪽상단에버튼을클릭합니다. (AppInventorForAndroidCodeblocks.jnlp 이파일이다운되면실행합니다.) 28
[ 활동 2] 구슬앱의블록프로그래밍 탐구 1) 스마트폰을기울여서공을움직이는부분입니다. 아래왼쪽블록과대응되는문장을오른쪽에서찾아연결해봅시다. l 가속도센서의값이바뀔때 l 공을움직인다. 처음설정된공의좌표 (Ball1.X, Ball1.Y) 에계속해서변경되는가속도센서의값 (xaccel, yaccel) 을 연산하여공을움직이는방식입니다. Ball1.X 에 yaccel 의값을더해주고 Ball1.Y 에 xaccel 의값을더해주는이유는스마트폰화면을 회전했기때문입니다. [ 활동 3] 구슬앱을스마트폰에전송하고설치해봅시다. 이제완성된구슬앱을스마트폰에전송하여설치해봅시다. 탐구 1) GUI 창으로돌아가서오른쪽상단의 Package for Phone 의부분을선택하고 Download to this computer 를선택해서자신이만든구슬앱의 apk 파일을컴퓨터에다운로드합니다. apk 파일이받아지면컴퓨터내부 Download 폴더안에저장됩니다. 탐구 2) 스마트폰을컴퓨터와연결한후만들어진 apk 파일을스마트폰으로복사합니다. 탐구 3) 스마트폰의프로그램설치관리자를실행하여구슬앱을설치합니다. 29
[ 활동 4] 피아노앱의 GUI(GRAPHIC USER INTERFACE) 구성 피아노앱은이미지를활용하여버튼으로사용하는방법과음원을사용하여악기를만드는방법을배울 수있습니다. 탐구 1) 앱인벤터프로젝트선택화면에서 New 를선택합니다. 프로젝트의이름을정하고 OK 를선택합니다. 그리고아래의그림과같이스크린의속성칼럼에서구성요소정렬설정을중앙 (Center) 으로하고스크린의방향을수평방향 (Landscape) 로설정합니다. 마지막으로스크린타이틀이름을 피아노 로설정합니다. 30
탐구2) 피아노건반을눌렀을때스마트폰의스피커를통해서소리가나오도록할수있는사운드컴포넌트를추가합니다. 피아노건반소리는어떤원리로나올까요? (Palette >Media >Sound 컴포넌트를뷰어칼럼으로드래그이동 ) 만들고자하는피아노앱의건반이 13 개이기때문에사운드컴포넌트를 13 개추가합니다. 추가되면아래그림과같이뷰어칼럼에컴포넌트가추가됩니다. 스마트폰에는사물이다른사물에접촉되었는지를감지하는터치센서가내장되어있습니다. 따 라서스마트폰은터치센서를이용하여우리가피아노앱의건반을터치하면해당건반을정확 히감지하고건반에대응해서설정된사운드를출력시킵니다. 탐구3) 다음으로피아노건반과종료버튼을수평정렬할수있는정렬컴포넌트를추가합니다. (Palette >Screen Arrangement >HorizontalArrangement 컴포넌트를뷰어칼럼으로드래그이동 ) 그리고피아노건반들을넣을캔버스컴포넌트와버튼컴포넌트를 1 개씩수평정렬컴포넌트에추가합니다. (Palette->Basic->Canvas 컴포넌트를수평정렬컴포넌트로드래그이동 ) ( 캔버스의크기는가로길이 : 400pixels, 세로길이 :250pixels 으로설정합니다.) (Palette->Basic->Button 컴포넌트를수평정렬컴포넌트로드래그이동 ) ( 버튼의크기는가로길이 : 50pixels, 세로길이 : 250pixels 으로설정합니다.) ( 버튼의텍스트는 종료 로설정합니다.) 31
추가되면아래그림과같이뷰어칼럼에컴포넌트가추가됩니다. 32
탐구4) 다음으로캔버스내부에서피아노건반으로사용될이미지스프라이트컴포넌트를캔버스에추가합니다. (Palette >Animation >ImageSprite 컴포넌트를캔버스로드래그이동 ) 피아노건반개수에맞추어 13 개를추가합니다. 33
탐구 5) 각각 13 개이미지스프라이트와사운드컴포넌트의이름을아래표와같이재설정합니다. 변경전 변경후 변경전 변경후 ImageSprite1 C Sound1 Sound C ImageSprite2 D Sound2 Sound D ImageSprite3 E Sound3 Sound E ImageSprite4 F Sound4 Sound F ImageSprite5 G Sound5 Sound G ImageSprite6 A Sound6 Sound A ImageSprite7 B Sound7 Sound B ImageSprite8 C1 Sound8 Sound C1 ImageSprite9 Cs Sound9 Sound Cs ImageSprite10 Ds Sound10 Sound Ds ImageSprite11 Fs Sound11 Sound Fs ImageSprite12 Gs Sound12 Sound Gs ImageSprite13 As Sound13 Sound As 설정이완료되면다음그림과같이됩니다. 34
탐구 6) 이제사운드파일과피아노건반이미지를앱인벤터로업로드합니다. 다음과같은방법으로이미지를추가할수있습니다. 우선아래의 Upload new 를클릭합니다. 파일을선택하여추가한후 OK 버튼을클릭합니다. 아래와같이모든파일을추가합니다. 35
탐구 7) 이미지스프라이트의위치를피아노건반모양으로배치하고이미지를불러옵니다. 아래의표와같이각각설정합니다. 이름 X 값 Y 값 가로길이 세로길이 Picture C 0 0 50pixels 250pixels White.png D 50 0 50pixels 250pixels White.png E 100 0 50pixels 250pixels White.png F 150 0 50pixels 250pixels White.png G 200 0 50pixels 250pixels White.png A 250 0 50pixels 250pixels White.png B 300 0 50pixels 250pixels White.png C1 350 0 50pixels 250pixels White.png Cs 25 0 50pixels 125pixels Black.png Ds 75 0 50pixels 125pixels Black.png Fs 175 0 50pixels 125pixels Black.png Gs 225 0 50pixels 125pixels Black.png As 275 0 50pixels 125pixels Black.png 설정이완료되면다음그림과같이됩니다. 36
탐구 8) 마지막으로사운드컴포넌트에업로드한사운드파일을적용시킵니다. 이름 SoundC SoundD SoundE SoundF SoundG SoundA SoundB SoundC1 SoundCs SoundDs SoundFs SoundGs SoundAs Source C.wav D.wav E.wav F.wav G.wav A.wav B.wav C1.wav Cs.wav Ds.wav Fs.wav Gs.wav As.wav 13 개모두각음계로설정해줍니다. 탐구 9) 피아노건반을눌렀을때사운드를출력하기위해블록에디터화면으로이동합니다. 오른쪽상단에버튼을클릭합니다. (AppInventorForAndroidCodeblocks.jnlp 이파일이다운되면실행합니다.) 37
[ 활동 5] 피아노앱의블록프로그래밍 탐구 1) 피아노건반을터치하여사운드를출력하는부분입니다. 아래왼쪽블록과대응되는문장을오른쪽에서찾아연결해봅시다. l C 를터치하면 l SoundC 를재생해라. 위와같이피아노건반 13 개를추가합니다. 그리고검정색건반과흰색건반이겹쳐있기때문에검정색건반을눌렀을때흰색건반의사운드가 출력되지않게하기위해서아래그림과같이사운드를재생하지않도록합니다. l Cs 를터치하면 l SoundCs 를재생해라. l SoundC, D 를멈춰라. 38
모든블록이추가되면다음그림과같습니다. 39
탐구 2) 마지막으로종료버튼을구성해봅시다. l Button1 을클릭하면 l 앱을종료해라. 위와같이탐구 1), 탐구 2) 를완료하였다면블록에디터구성은완료된것입니다. [ 활동 6] 피아노앱을스마트폰에전송하고설치해봅시다. 이제완성된피아노앱을스마트폰에전송하여설치하여봅시다. 설치방법은위의구슬앱을설치하는방법과동일합니다. 40
평가하기앞에서만든구슬앱과피아노앱이정상적으로동작하는지확인해봅시다. [ 활동 1] 구슬앱동작평가해봅시다. 아래의순서대로구슬앱의작동을평가해봅시다. 확인사항점검사항확인 화면이세로가아닌가요? 스크린의 Orientation 이바르게변경 되었나요? 실습하기 활동 1 탐구 1 공이너무좁은범위에서 움직이나요? 캔버스컴포넌트의크기를확인합니다. 실습하기 활동 1 탐구 3 공이너무작지않나요? Ball 컴포넌트의 Radius 가적절한크기 인가요? 실습하기 활동 1 탐구 3 스마트폰을기울이면공이 움직이나요? 가속도센서컴포넌트가정상적으로추가되었나요? 가속도센서블록이정상적으로조립되었나요? 실습하기활동 1 탐구 2 실습하기활동 2 탐구 1 공이스마트폰이기우는방향으로 움직이나요? 가속도센서블록의 X, Y 를올바르게 조립하였나요? 실습하기 활동 2 탐구 1 41
[ 활동 2] 피아노앱동작평가하기 아래의순서대로피아노앱의작동을평가해봅니다. 확인사항점검사항확인 화면이세로가아닌가요? 스크린의 Orientation 이바르게변경 되었나요? 실습하기 활동 4 탐구 1 건반이너무좁은범위에서 들어가나요? 캔버스컴포넌트의크기를확인합니다. 실습하기 활동 4 탐구 3 피아노의건반의개수와음원의 개수가일치하나요? 디자인뷰의컴포넌트칼럼에서이미지 버튼의개수와사운드의개수를 확인합니다. 실습하기 활동 4 탐구 2,3 건반을누르면건반에해당하는 음이나오나요? 음원파일을확인하여봅니다. 실습하기 활동 4 탐구 2 건반블록이정상적으로조립되었나요? 실습하기 활동 5 탐구 1 혹시하나의건반에서두가지 소리가들리나요? 건반블록이정상적으로조립되었나요? 실습하기 활동 5 탐구 1 종료버튼을누르면정상적으로 종료되나요? 종료버튼이정상적으로조립되었나요? 실습하기 활동 5 탐구 2 42
3 장 앱디자인아이디어도출 학습소개 3 장에서는 세상에없는악기앱 의디자인조건을이해하고이를충족하면서재미있게음악을연주할수있는새로운악기앱을센서와인터렉션디자인기술을활용하여디자인하고, 악기앱을활용한연주회를기획합니다. 학습목표 세상에없는악기앱을위한인터렉션디자인을할수있다. STEAM 요소 - Technology /Engineering: 앱설치체험 - Arts: 인터렉션디자인체험, 스토리보드평가 - Mathematics: 논리적사고와토의체험 준비물 컴퓨터, 스마트폰 ( 카메라 ), 교재활동지, 필기도구 43
< 상황제시 > 우리학교에음악회포스터가붙었습니다. 같이참가해볼까요? 44
들어가기 세상에없는악기앱 은어떤프로젝트인지알아봅시다. [ 활동 1] 세상에없는악기앱 은어떤프로젝트인지알아봅시다. 피아노, 바이올린등실제악기나실제악기의연주방법을사용하지않고, 스마트폰의가속도센서와터치센서, 그리고주어진디자인조건을이용하여창의적인방법으로연주를할수있는악기앱을만드는과제입니다. 각조별로새로운악기앱을디자인하고프로그래밍으로구현하여연주가가능한스마트폰앱을만들고, 그앱으로최고의음악을연주하는조가우승하게됩니다. [ 활동 2] 세상에없는악기앱 의디자인조건을이해하고디자인조건을충족하면서 재미있게음악을연주할수있는새로운악기앱을디자인해봅시다. 탐구 1) 세상에없는악기앱을만들기위한조건은다음과같습니다. (1) 1 옥타브를연주할수있는멜로디악기입니다. ( 도, 레, 미, 파, 솔, 라, 시, 도 ) (2) 멜로디외에타악기한가지가연주됩니다. (3) 가속도센서와터치센서를이용하여연주해야합니다. (4) 버튼은 2 개까지사용가능하며, 정해진음계의버튼을누르면 소리가나는방법 (1:1 음원터치 ) 은금지입니다. (5) 중등과정의경우시각효과추가시보너스점수를얻을수있습니다. ( 고등과정은화면의시각효과를반드시포함합니다.) 45
[ 활동 3] 다양한악기앱을체험해보고어떠한방식으로연주하는지알아봅시다. 아래의사례앱은실제악기의형태를가지고있지않지만연주가가능합니다. 음이어떻게나오고 시각적인표현방식은어떠한지알아봅시다. 탐구 1) 다음에는연주방법을새롭게재해석하여디지털방식으로연주하는사례들입니다. 사례를보며음을표현하는방법과음이보여지는방식을찾아빈칸을채워봅시다. 사례 1) 앱이름 : Beauty Ambient / http://nmf.cappel-nord.de 이사이트의악기는일정한박자에맞춰서선택된원에서음이연주되는악기입니다. 서로다른 6 가지종류의음이제공됩니다. 음 + 박자 : 각원마다음과박자가정해져있습니다. 시각적표현 : 마우스로원을클릭하면흰색이채워지고, 색이채워진원은일정한비트에맞춰서켜졌다가꺼집니다. 음이나오는방법시각적인표현사운드의종류 46
사례 2) 앱이름 : Orphion / http://www.orphion.de 원을이용하여연주하는아이패드음악앱입니다. 옵션을통해옥타브, 음의종류, 원의크기와갯수등을바꿀수있습니다. 음 + 박자 : 탭 - 탭의강도, 회전등으로동그라미안에서다양한소리가나오고손을떼면음이멈춥니다. 시각적표현 : 탭했을때색이나타나고강도나회전에따라색이변화합니다 음이나오는방법시각적인표현사운드의종류 사례 3) 앱이름 : Soundbow / http://www.binaura.net/stc/wrx/soundbow/ 선으로연주하는안드로이드앱입니다. 음 : 각색마다하나의음을가지고있어총 8 가지의음 ( 빨간색 ~ 보라색등 ) 이있습니다. 박자 : 아래의큰동그라미는좌우로움직일수있어음의박자를다르게합니다. 시각적표현 : 손으로그린선시작부분에서작은동그라미가나와그린방향으로흐르면서세로선과만날때마다음이나오고세로선이더밝게빛납니다. 음이나오는방법시각적인표현사운드의종류 * 한번그린선은사라지지않고연주를반복합니다. 47
기본익히기 세상에없는악기앱 을만들위해아이디어를기획해봅시다. [ 활동 1] 가속도센서와터치센서, 버튼 2 개를이용하여음과비트 ( 타악기의 ) 인터렉션을디자인해봅시다. 탐구1) 어떤음악의장르를연주할것인지친구들과의논해봅시다. 예 ) 클래식, 일렉트로닉, 팝등탐구2) 음악의종류를정했으면음악에어울리는연주동작을생각해봅시다. 예 ) 클래식의경우 : 곡선의느낌 / 일렉트로닉 : 절제된동작 탐구3) 연주할동작을생각하며각기능마다이용할방법과그것을표현할방법에대해생각해봅시다. 악기종류의구분 ( 멜로디악기 / 타악기전환 ) 멜로디 ( 도레미파솔라시도 ) 사운드 on/off 탐구 4) 다음의구성요소를기준으로빈칸을채워봅시다. 가속도센서 구성요소구성요소의역할표현방법 터치센서 버튼 1 터치 버튼 2 터치 화면그래픽 ( 고등 ) 48
실습하기 스토리보드제작하기 내가만들악기를구체적으로정리해봅시다. 악기이름 : 사용할악기음원의종류를고르세요. 멜로디악기 : ( 전자피아노 / 피아노 / 호른 / 전자바이올린 ) 타악기 : ( 마라카스 / 드럼 1 / 드럼 2 / 심벌즈 / 전자드럼 ) < 악기기능정리하기 > [ 보기 ] 의구성요소를보고악기의기능에맞게아래표의빈칸을채워보세요. ( 중복불가 ) [ 보기 ] 버튼, 화면터치, 세로기울기, 가로기울기 악기종류의구분 ( 멜로디악기 / 타악기전환 ) 멜로디 ( 도레미파솔라시도 ) 사운드 on/off 내가만들악기의소리가재생되었을때나타날시각적효과를정리해봅시다. 49
실습하기스토리보드제작하기 _ 악기기능화면스케치악기의기능별로구체적인화면을생각하며스케치해봅시다. 앞의활동지에서정리했던표를보고머릿속에떠오르는폰화면을그려보세요. 표에써넣었던구성요소가아닌다른구성요소가들어갈경우도생각해봅시다. < 악기선택밎전환 > 악기의종류를선택하거나전환시킬때의화면을그려보세요. ( 단, 버튼은 2 개까지사용할수있습니다. 멜로디악기나타악기둘중하나만사용한다면이화면은그리지않습니다. 두악기모두사용할경우에만그리세요.) 사용할구성요소 : 사용할구성요소 : < 멜로디변환 > 도레미파솔라시도 8 개의음을자유자재로변환시킬수있는화면을그려보세요. ( 단, 버튼으로음을 하나씩누르는것은안됩니다.) 사용할구성요소 : 사용할구성요소 : 50
실습하기 스토리보드제작하기 _ 사운드효과스케치 악기의기능별로구체적인화면을생각하며스케치해봅시다. < 사운드 On / Off> 어떻게소리를내는것이좋을지생각해보고화면을그려봅시다. 사용할구성요소 : 사용할구성요소 : < 시각효과 > 악기에서소리가재생될때시각적으로어떻게표현하면좋을지생각해보고시각적효과가들어간 화면을그려보세요. 그리고어떤경우에어떤시각적효과가나타나는지간단히설명해주세요. 시각효과설명 : 시각효과설명 : 51
실습하기 스토리보드제작하기 _ 최종화면 설명 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 설명 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 52
평가하기 스토리보드에기획한악기앱의디자인을평가해봅시다. 각조별로조원들의스토리보드를서로평가해보고, 조원들끼리서로의스토리보드에관해토의해 봅시다. [ 활동 1] 스토리보드를평가해봅시다. 디자인평가는완성된디자인을대상으로해야하지만, 스토리보드와같은중간의기획과정에서미리 기초적인평가를해보면디자인을완성하기전에잘못된방향을수정할수있습니다. 또, 더좋은 디자인이나오도록디자인아이디어를변경할수있으므로디자인의시간과노력이절약됩니다. 그러나스토리보드는완성된디자인이아니기때문에, 모든평가항목을완벽하게평가할수는없고 스토리보드에서평가가가능한기초적인디자인평가를진행합니다. 또한스토리보드단계에서는시각 효과등이간략하게만표현이가능하므로향후최종디자인에서좀더확실한평가가이루어집니다. 탐구 1) 스토리보드평가항목알아봅시다. 평가기준 스토리보드 평가항목 스토리보드에서는악기의연주방법과악기소리에맞는시각효과들이어떻게표현될지미리그려봅니다. 그러므로스토리보드평가에서는연주하는악기에적합한인터렉션, 악기앱의연주방법에맞는디자인의표현을주로평가합니다. 연주방법에대한인터렉션아이디어가적절한가요? 악기앱의연주방법이재미있고참신한가요? 연주에용이한화면디자인아이디어가표현되어있나요? 악기의종류에따른그래픽디자인계획이잘표현되어있나요? ( 고등과정 ) 53
탐구 2) ( 탐구 1) 의평가항목을바탕으로조원들과함께나의스토리보드를평가해봅시다. 그리고의견을아래의빈칸에적어봅시다. 스토리보드평가에서나온각조원의디자인장단점에 대하여토의하고가장잘된스토리보드를조의대표스토리보드로선택합니다. l 연주방법에대한인터렉션아이디어가적절한가요? 평가 기준 ( ) ( ) ( ) ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 l 악기앱의연주방법이재미있고참신한가요? ( ) ( ) ( ) ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 l 연주에용이한화면디자인아이디어가표현되어있나 요? ( ) ( ) ( ) ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 l 악기의종류에따른그래픽디자인계획이 잘표현되어있나요? ( ) ( ) ( ) ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 의견 : 합계 : /20 /20 /20 /20 54
[ 활동 2] 조별악기앱디자인을선정해봅시다. 탐구 1) 우리조악기인터렉션디자인의특징을다시한번정리해봅시다. < 예시답작성 > 악기앱이름 : Feel the Beat 악기의종류를선택 / 전환할때 : 음계주위로동그란원이그려진다. 음계를바꾸고싶을때 : 화면의레버를폰을좌우로기울이면서원하는음으로선택한다. 소리를연주하는방법 : 화면을두드리거나, 폰을위아래로기울인다. 시각효과표현방법 : 음계주위로동그란원이그려지면서점차커진다. 악기앱이름 : 악기의종류를선택 / 전환할때 : 음계를바꾸고싶을때 : 소리를연주하는방법 : 시각효과표현방법 : 55
탐구 2) 최종스토리보드그리기 ( ) 조의스토리보드 대표스토리보드가선택되면조원들의의견을종합하여수정한스토리보드를아래에다시그려봅시다. 이스토리보드가여러분조의악기앱에대한기획서가됩니다. 설명 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 56
4 장 나만의앱개발하기 학습소개앞에서나온아이디어와스토리보드를바탕으로살펴보고앱동작, 구성요소, 구현에필요한구체적인조건들을생각해보고정리합니다. 이렇게기획한내용을따라서디자인소스를만든다음, 화면구성요소및동작에필요한블록들을앱인벤터를이용하여만듭니다. 먼저앱을만드는데필요한앱인벤터를소개한다. 최종적으로만들어진앱을스마트폰에설치하여테스트합니다. 학습목표 앱디자인에프로그래밍을통합하여앱을완성한다. STEAM 요소 - Science: 스마트폰센서원리체험 - Technology /Engineering: 앱설치체험, 프로그래밍소프트웨어체험 - Mathematics: 논리적사고연습 준비물 컴퓨터및앱인벤터소프트웨어, 스마트폰, 연결잭, 교재활동지 57
< 상황제시 > 우리는 1 장에서인터렉션디자인을배우고 2 장에서앱을개발할수있는툴인앱인벤터를배웠습니다. 그리고 3 장에서자신이만들고싶어하는악기앱도생각해보고기획했습니다. 하지만막상자신이기획한앱을만들생각을하니너무막막한가요? 이어질이야기는위의상황과같은한학생의이야기입니다. 이노는 1~3장의활동을모두흥미를가지고진행한한학생입니다. 하지만앱을만들지는못했습니다. 왜냐하면앱을만드는것이어떻게진행되는지앞에서배워서알고있지만막상진행하려니무엇부터시작해야좋을지몰랐습니다. 이노는선생님에게질문했습니다. 뭐부터해야하나요? 선생님은대답했습니다. 선생님이앱을만들었던과정을알려줄테니보고한번따라해보겠니? 이노는선생님이앱을만드는과정을보고앱을만들기시작했습니다. 앱을만드는도중에매뉴얼을이용해서모르는것을찾아보기도하고선생님께질문을여쭈어가면서차근차근진행하였습니다. 마침내이노는자신이만들고싶어했던 세상에없는악기 앱을만들게되었습니다. 이야기를잘읽어보셨나요? 혹시이노가만든 세상에없는악기 앱이궁금하지는않나요? 4장활동지는이노가앱을만드는과정을순서대로나열해서알려주고있습니다. 활동지를따라서자신이만들고싶은앱을만들어보세요. 58
들어가기우리조가만들앱의스토리보드를자세히살펴봅시다. 들어가기는생각해본내용을설계하기위해서구현할때필요한것들 ( 센서, 컴포넌트, 버튼, 블록등등 ) 을찾는단계입니다. 이외에도앞에서만들었던것 ( 디자인등 ) 중에서자신이필요로하는내용들도찾아볼수있습니다. [ 활동 1] 자신이만들앱의핵심기능을찾아적어보고추가적으로필요한기능이 있다면제한없이메모해봅시다. 기울기센서를움직이면 x, y 값의따라서볼이움직인다. 볼이지정된구간에들어가면음이 0.5 초마다출력된다. 타악기는흔들면소리가난다. 59
[ 활동 2] 활동 1 에서찾은기능을구현하려면어떤것들이필요할지생각해보고 필요한것들을나열해봅시다. 목록 준비상태 3 장에서만든앱아이콘이미지파일 O X 버튼이미지파일 O X 한옥타브악기음계사운드파일 O X 타악기사운드파일 O X 캔버스에사용된배경이미지파일 O X 가속도센서 O X O O O O O O O O X X X X X X X X 60
기본익히기기획한내용과들어가기에서했던내용을바탕으로나만의앱을설계해봅시다. 앞에서나온아이디어및스토리보드를바탕으로직접프로그래밍에앞서앱동작, 구성요소, 구현에필요한구체적인조건들을생각해보고정리합니다. [ 활동 1] 앱이완성되었다고생각을하고앱아이콘을여는순간부터앱이종료되는 순간까지사용자가순서도로경험할인터렉션을그려봅시다. 타악기재생 기울기센서흔들림 기울기센서움직임 시작 종료버튼클릭 볼이동 종료 볼위치 = 지정한음계의위치 지정된음계재생 61
활동 2] 3 장에서했던스토리보드내용을활동 1 에서생각한사용자인터렉션을적용하여검토해보고추가할부분이나수정할부분이있으면아래에화면을그려봅시다. 이화면이마지막스토리보드이므로최대한실제화면과비슷하게, 버튼과이미지등구성요소들을분명하고깨끗이그려봅시다. 62
[ 활동 3] 구현에필요한조건들을생각해보고적어봅시다. 목록 위치 크기 조건 캔버스 0, 0 300x300 배경이미지를넣어야한다. 볼 - 20 너무크게하면안된다. 도재생 - - 볼의 X=260, Y=0~110 레재생 - - 볼의 X=260, Y=150~260 미재생 - - 볼의 X=0~110, Y=260 파재생 - - 볼의 X=150~260, Y=260 솔재생 - - 볼의 X=0, Y=0~110 라재생 - - 볼의 X=0, Y=150~260 시재생 - - 볼의 X=0~110, Y=0 높은도재생 - - 볼의 X=150~260, Y=0 종료버튼 캔버스밑 110x50 - 타이머 - - Timerinterval : 500 목록위치크기조건 63
실습하기 설계한내용을앱인벤터로나만의앱을만들어봅시다. 화면구성요소부터블록에디터까지모두진행합니다. 자세한내용은앱인벤터매뉴얼에설명되어 있습니다. [ 활동 1] 자신만의프로젝트를생성하고 Screen 을구성해봅시다. 탐구 1) 새프로젝트생성해봅시다. 위의그림과같이 New 버튼을클릭하여새로운프로젝트를생성합니다. 탐구 2) 악기앱아이콘디자인소스를만들어봅시다. 예시를참고하여자신이만들악기앱을잘나타낼수있는 앱아이콘 을그려봅시다. ( 예시앱아이콘 ) 위에서그린앱아이콘을카메라로찍은후컴퓨터에전송하여앱인벤터에아이콘으로넣어봅시다. 64
탐구 3) 앱인벤터의디자인에디터메뉴에서여러종류의버튼을보고악기의기능에어울리는 버튼을골라넣어봅시다. 탐구 4) 레이블을넣어봅시다. 앱인벤터의컴포넌트중에서레이블 (Label) 을넣어봅시다. 레이블의속성을바꿔봅시다. 폰트, 크기, 색깔, 이미지등오른쪽의 property 창에서속성을바꿔봅시다. 탐구 5) 앱의시각효과를높이기위하여버튼이나배경에이미지를삽입할수있습니다. 아래의빈칸에앱에넣을그림을그려보세요. 스마트폰의카메라를이용해컴퓨터에전송한후앱 인벤터의이미지컴포넌트에삽입할수있습니다. 65
탐구6) 시각효과에필요한디자인소스를만들어봅시다. 앱인벤터에서는 Ball 이나 Image Sprite 의형식으로인터렉션에반응하는애니메이션이미지를제공합니다. Ball 또는 Image Sprite 를활용하여이미지의속성변화, 이동, 숨김, 회전, 확대등의애니메이션이연주인터렉션과잘어울리도록시각효과를디자인해봅시다. 악기를연주할때멜로디에어울리는시각효과를그려봅시다. 악기를연주할때타악기에어울리는시각효과를그려봅시다. 디자인한이미지와시각효과들을디지털파일화하여앱인벤터의디자인에디터에추가합니다. 66
탐구 7) Screen 화면구성 위의그림은 Screen 화면구성이끝난그림입니다. 위와같이자신만의 Screen 화면을구성합니다. ( 구성 요소추가, 파일업로드등전체적인것들을완료합니다.) 탐구8) 구성요소이름, 속성값을변경해봅시다. 마지막으로 Screen 에배치된구성요소들의속성값을설정하고이름을지정합니다. 버튼의크기, 색깔, 속성, 글씨크기, 이미지업로드등등자신이배치한구성요소를다듬는단계입니다. 67
[ 활동 2] Blocks Editor 를열어서블록들을사용해조건에맞게배치해봅시다. 블록들을생성해서자신이하고자하는기능을구현하는단계로필요한블록들을생성하고스스로 맞추는시간입니다. 앱인벤터매뉴얼을참고하여필요한블록들을찾고배치해봅시다. 예제로만든앱의블록에디터화면은다음과같습니다. 68
69
평가하기직접구현한앱을테스트해보고친구들과상의하여수정해봅시다. 평가하기는자신이직접구현한앱을스마트폰에넣어테스트해본후문제점을찾고친구들과상의하여해결방법을상의하는등앱이완성되기까지의마무리과정입니다. [ 활동 1] 직접구현한앱을스마트폰에넣어동작이잘되는지확인해봅시다. 앱을스마트폰에전송하는방법은앱인벤터매뉴얼 2 장 6. 앱전송하기부분에설명되어 있습니다. [ 활동 2] 동작되는않는부분이있으면순서대로적고해결방안을생각해서적어봅시다. 제대로동작하지않는부분은 Screen 구성, 구성요소설정, Blocks Editor 까지자세히살펴보고 잘못된점을찾아수정해야합니다. 하나씩확인하고잘못된점을찾았다면밑에표에적고해결 여부도친구와상의해서적어봅시다. 잘못된점수정방안 / 부가설명해결여부 (O / X) [ 활동 3] 해결하지못한부분이있다면팀구성원들과상의하고수정방안을 생각해봅시다. 이름문제점제시한해결방안 70
5 장 개발한앱평가하기 학습소개 5 장에서는조별로제작한세상에없는악기앱을시연해보고악기앱의평가기준과평가방법을학습한뒤다른조의결과물을서로평가합니다. 학습목표 조별로완성된앱을시연해보고평가한다. STEAM 요소 - Arts: 음악과인터렉션디자인체험 - Mathematics: 평가및자유로운토론 준비물 스마트폰, 교재활동지, 필기도구 71
< 상황제시 > 이전에없던새로운방식으로연주하는악기앱을만들었다. 이앱은잘만들어진앱일까? 악기앱을이용하여자연스러운연주를할수있으면좋을텐데, 새로운방식에익숙치않은사람들이나처음보는사람들도악기앱을이용하여연주할수있을까? 이러한의문점을풀기위해그리고더욱완성도있는앱으로만들기위해나의악기앱에대한객관적인평가를해보자. 72
들어가기우리조가개발한악기앱을시연하여보여주고다른조의앱도체험하여봅시다. [ 활동 1] 완성된앱을시연해보면서악기앱의장단점을생각해봅시다. 탐구 1) 알고있는다양한동요등노래를연주해봅시다. 어떤곡을시험해보았습니까? 탐구 2) 곡을연주할때음악이잘표현되는부분과표현이어려운부분은무엇인가? 탐구 3) 여러분이선택한인터렉션디자인이연주에어떤영향을주고있나요? [ 활동 2] 완성된앱이가진장점을살려연주회를계획해봅시다. 완성된앱으로잘표현할수있는음악의장르나곡을선택하고연습하여연주회를준비합니다. 조원들끼리연주역할을분담하거나여러스마트폰에설치하여합주를기획해도좋습니다. 화면에시각 효과가있는경우시각효과도잘보이도록연주회를계획해봅시다. 탐구1) 알고있는다양한동요등노래를연주해봅시다. 어떤곡을시험해보았습니까? 연주할곡 : 역할분담 : 시각적효과표현 : [ 활동 3] 세상에없는악기앱연주회를합니다. 각조별로연주회를보며 감상해봅시다. 앱마다다른인터렉션과시각효과, 연주방법을잘관찰해봅시다. 73
기본익히기악기앱을평가하기위한기준과평가방법에대하여알아봅시다. 앱을평가하기위한구체적인기준은앱에따라매우다양할수있습니다. 그러나기본적으로는어떤앱이든앱의목적에맞게기술이나디자인이잘적용되었는지를보는것이필요하고또개발한앱이비슷한목적을가진다른앱들에비하여어떤장점이있는지도평가하게됩니다. 우리가개발한악기앱은사용자가음악을쉽게연주하고, 연주하면서즐거움을느끼게하는것이주요목적이므로이러한목적을얼마나잘수행하는지가앱의주요평가요소가됩니다. 앱화면의그래픽디자인이있는경우앱의그래픽표현이재미있고연주와잘어울리는표현인지도중요한평가요소입니다. 본장에서는우리가개발한악기앱을연주의재미, 악기앱의사용성, 앱프로그래밍의기능성, 화면의 그래픽디자인측면에서평가해보고점수화하여객관적인비교를해봅시다. 그리고다른조의앱을 평가하면서각평가항목을개선하려면어떻게하면좋을지아이디어를제안해봅시다. 74
실습하기아래의평가양식에다른조의악기앱을평가해보고서로평가를교환하여개발한악기앱의장점과개선점을정리해봅시다. [ 활동 1] 완성된연주악기앱을시연하고평가해봅시다. 최종디자인평가를통하여디자인한앱의우수성을검증하고다음에더좋은앱을만들기위한경험을 쌓을수있습니다. 앱을시연해보고평가해봅시다. 먼저조장의평가지로우리조가만든앱을 평가하고나머지조원 3 명의평가지로다른조들의앱을차례대로평가해봅시다. 매우아니다 = 1, 아니다 = 2, 보통이다 = 3, 그렇다 = 4, 매우그렇다 = 5 의점수로각조의게임을 평가해주세요. 탐구1) 우리조가만든앱과다른조가만든앱을시연해보고평가해봅시다. 한사람의평가지에한조씩평가해봅시다. ( ) 조 연주의재미 연주를쉽게배울수있나요?--------------------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 연주방법 ( 인터렉션 ) 이선택한악기와어울리나요?---------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 다른악기앱에비하여연주방법이독특하다고생각하나요?---------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 연주방법이재미있나요? ----------------------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 합계 /20 의견 : --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- 75
악기앱의사용성 화면의시각효과들이연주를방해하지는않나요? ------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 악기를연주하면서어떤음을연주하고있는지쉽게알수있나요?------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 악기에서다른악기로의전환이매끄러운가요?------------------------------ ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 원하는음을쉽게연주할수있나요?----------------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 소리의지속시간은적당한편인가요?----------------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 합계 /25 의견 : --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- 앱프로그래밍의기능성 악기앱이멈추거나느려지거나하는문제가없나요?----------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 악기앱의그래픽은폰화면사이즈에알맞게제작되었나요?---------------( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 터치의반응속도는연주하기에적당한수준인가요? ------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 연주시각효과가화면에잘표시되나요? ----------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 합계 /15 의견 : --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- 76
화면의그래픽디자인 화면디자인이악기의연주특성을잘표현하고있나요?-------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 화면을보고어떻게연주해야할지쉽게알수있나요?---------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 시각효과가연주되는소리와잘어울리나요? --------------------------------( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 화면이복잡해보이지는않나요?------------------------------------------------ ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 합계 /20 의견 : --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- 77
탐구2) 평가한조의점수의총점을내봅시다. 평가가완료되면각조의총점수와의견에대해토의해봅시다. 종합의견 ( ) 조점수연주의재미악기앱의사용성앱프로그래밍의기능성화면의그래픽디자인무대매너 ( 보너스점수 ) 총점 /100 ( ) 조점수 종합의견 연주의재미악기앱의사용성앱프로그래밍의기능성화면의그래픽디자인무대매너 ( 보너스점수 ) 총점 /100 ( ) 조점수 종합의견 연주의재미악기앱의사용성앱프로그래밍의기능성화면의그래픽디자인무대매너 ( 보너스점수 ) 총점 /100 78
탐구 3) 우리앱에대한다른조의의견들을듣고어떤장단점이있었으며, 향후에개선한다면 어떻게하는것이좋을지토의해봅시다. 장점 연주하기가쉽다 우리 앱의 실로폰 단점 음이한정적이다 이름 개선방안컨텐츠를추가한다. 장점 우리 앱의 이름 단점 개선방안 부록 : 앱인벤터매뉴얼 79
ㅔ 직업체험및진로연계 스마트폰앱제작관련분야진로탐색및설계를위해 전문가를방문하여특강을듣고체험해봅시다. 앱디자이너특강 재미있는앱디자인사례와디자이너의업무에대해탐구해봅시다. 로봇특강 스마트폰앱을이용한다양한로봇사례에대해서탐구하고체험해봅시다. 미디어아트특강및캠퍼스탐방 미디어아트연구소를방문하여생활속의예술구현을위한다양한작품및 시설을체험해봅시다. 80
앱디자이너특강 재미있는앱디자인사례와디자이너의업무에대해탐구해봅시다. 주제 강사 내용 일시및장소 소감 새로 알게된 정보 나의 진로 계획 81
로봇특강 스마트폰앱을이용한다양한로봇사례들을중심으로로봇제작과정에대해서 살펴보고직접체험해봅시다. 주제 강사 일시및장소 내용 소감 새로 알게된 정보 나의 진로 계획 82
미디어아트특강및캠퍼스탐방미디어아트를알아보고미디어아트연구소를방문하여다양한작품감상및제작과정을살펴보며, 미디어아트작품을만드는데사용되는다양한장비와공구들이어떻게활용되는지알아봅시다. 주제 강사 일시및장소 내용 소감 새로 알게된 정보 나의 진로 계획 83