학생용워크북 - 초등 5 6 학년용 -
목차 * 전체학습계획표 4 1 장치즈먹는쥐돌이게임의구성요소탐구 7 2 장게임스토리보드작성하기 22 3 장디자인소스와앱아이콘만들기 36 4 장앱제작과테스팅 42 5 장개발자가되어앱발표및평가하기 49 * 직업체험및진로연계 58
나를소개해봅시다. 이름 학교 / 학년 꿈 하고 싶은 말 1
나의멘토를알아봅시다. 이름 학교 / 학년 및전공 꿈 연락처 멘토가 전하는말 이름 학교 / 학년 및전공 꿈 연락처 멘토가 전하는말 2
네트워크를형성해봅시다. 조원들조이름 : 이름역할학교 / 학년특징꿈연락처 이름 역할 학교 / 학년특징꿈연락처 이름 역할 학교 / 학년특징꿈연락처 3
* 전체학습계획표 장 일시 ( 차시 ) 교과분류 소주제 주요학습활동 심화학습활동 1 장 1일 10:30~11:30 (1차시) 디자인프로그래밍 치즈먹는쥐돌이게임의구성요소탐구 들어가기기본익히기실습하기평가하기 앱인벤터로제작된 치즈먹는쥐돌이 게임체험앱인벤터프로그램의개요와블록구조배우기 치즈먹는쥐돌이 게임의앱인벤터구성요소알아보기앱인벤터프로그램에대한학습내용확인 블록구조활용하기예제프로그램의블록구조를읽고이해하기 들어가기 스토리보드개요 치즈먹는쥐돌이 게임의 기본익히기 스토리보드를통하여스토 2 장 1일 11:45~12:50 (2차시) 디자인 게임스토리보드작성하기 실습하기 리보드표현방법학습게임의스토리보드작성하기 ( 캐릭터, 아이템중심 ) 스토리보드평가기준알아 보기 평가하기 스토리보드평가하기조별스토리보드결정 3 장 2일 10:30~11:50 (3차시) 디자인 캐릭터와앱아이콘디자인 ( 소스제작 ) 들어가기기본익히기실습하기 스마트폰게임앱캐릭터와앱아이콘안내게임디자인의디자인소스에대하여알아보기캐릭터, 앱아이콘만들기, 사운드소스선택하기 아이템만들기 ( 추가 ) 시작하기-끝내기화면구성요소디자인하기 만들어진디자인소스사 이미지편집 4
평가하기 진찍기 디자인소스를컴퓨터에 전송하고비교평가하기 배우기 2 일 12:00~12:50 (4 차시 ) 직업체험 및진로연계 (1) 앱디자이너특강 ( 재미있는앱디자인사례와디자이너의업무탐구, 이현진교수담당 ) 들어가기 앱프로그래밍기획하기 앱인벤터로소스파일종 블록구조의 4 장 3일 10:30~11:50 (5차시) 프로그래밍 앱제작과테스팅 실습하기 합하기앱인벤터로게임프로그래밍앱인벤터에이미지와사운드파일삽입하기스마트폰에앱넣어보기 사운드재생시간바꿔보기이미지가나타나는속도조절하기치즈먹고점수계산하기 평가하기 만들어진앱테스트하기 퍼베이시브로봇연구실 3 일 직업체험 탐방 ( 스마트폰앱을이용 12:00~12:50 및진로연계 한다양한사례탐구 : 탱크 (6 차시 ) (2) 로봇조종앱, 위치인식앱 등, 황성운교수담당 ) 5 장 4일 11:30~12:50 (7차시) 디자인프로그래밍 게임앱평가하기 들어가기기본익히기실습하기평가하기 앱디자인평가기준알아보기친구들앱디자인평가하기앱디자이너 / 개발자가된소감을발표하기 도출된문제점개선방향토론하기문제점개선시키기 체험프로그램에대한평가 5
4 일 12:30~13:30 (8 차시 ) 직업체험 및진로 연계 (3) 설문캠퍼스탐방 ( 생활속의예술구현을위한다양한작품및시설체험 : 3D 프린터, 레이저커터등 ) 6
1 장 치즈먹는쥐돌이 게임구성요소탐구 학습소개 1 장에서는앱인벤터로제작한 치즈먹는쥐돌이 예제게임을체험해보고나도만들수있을지생각해봅니다. 먼저게임을만드는데필요한앱인벤터구성요소에대해알아봅니다. 이를기반으로나도선생님의도움을받아차근차근 치즈먹는쥐돌이 게임을만들어서스마트폰에설치하고실행해봐요. 예제게임과내가만든게임이어떤차이가있는지친구들과토론해요. 학습목표 치즈먹는쥐돌이 게임을해보고앱인벤터와게임앱의구성을안다. STEAM 요소 - Science: 스마트폰원리및센서체험 - Technology /Engineering: 앱설치체험, 프로그래밍소프트웨어체험 - Arts: 게임구성요소발상 - Mathematics: 논리적사고연습 준비물 컴퓨터및앱인벤터소프트웨어, 스마트폰, 연결잭, 교재활동지 7
< 상황제시 > 2013 년 12 월 1 일제목 : 초등학생이만든게임이라니학교에서애들이랑단순하고재미있는게임인 치즈먹는쥐돌이 를했다. 학교가끝난뒤집에돌아와서학원가기전까지이게임을했다. 요즘에이게임이유행인데, 정말단순하다. 그냥제한된시간내에치즈를먹는게임이다. 단순해보이는이게임이어떤초등학생이만든게임이라고했다. 초등학생이게임앱을만들다니정말대단하다. 도대체그아이는어떻게이런게임을만들게되었을까? 나도할수만있다면이런게임을한번만들어보고싶다. 8
들어가기 [ 활동 1] 스마트폰으로쥐돌이게임을해볼까요? 치즈먹는쥐돌이게임을체험해보고아래활동지에정리해봅시다. 탐구1) 치즈먹는쥐돌이 게임은어떤게임이라고설명할수있나요? 빈칸을채워설명해봅시다. 치즈먹는쥐돌이 게임은주인공 ( ) 가 ( ) 에서 ( ) 를찾아먹는게임으로핸드폰을기울이는방향으로 ( ) 가움직입니다. ( ) 를먹은갯수가점수가됩니다. 탐구2) 게임을체험해보고체험횟수마다얻은점수를기록해봅시다. 1회점수 : ( ) 점 2회점수 : ( ) 점 3회점수 : ( ) 점 탐구 3) 이게임에서높은점수를얻으려면어떻게해야할까요? 탐구 4) 현재의게임을어떻게하면더재미있어질까요? 9
장 기본익히기 나만의게임을어떻게만들까요? 지금까지우리는게임을사용만했어요. 나만의게임을만들면신날텐데, 어떻게만들수있을까요? 어렵지않을까요? 이제어떻게만드는지알아봐요. [ 활동 1] 앱인벤터는어떤프로그램일까요? 앱인벤터는스마트폰앱을디자인하고프로그래밍하는도구입니다. 아래의웹사이트에들어가봅시다. http://beta.appinventor.mit.edu 10
[ 활동 2] 앱이만들어지는과정을살펴봅시다. 앱은크게캐릭터, 아이콘, 배경등화면요소를디자인하는부분과이에동작을지정하는프로그래밍부 분으로구성되어있어요. 이렇게만들어진앱은스마트폰에설치하여실행됩니다. 11
장 [ 활동3] 앱인벤터의디자인구성화면을살펴봅시다. 앱인벤터디자인구성화면은아래와같아요. 선생님설명을따라가면서구성요소와기능에대해서살펴봅시다. [ 활동 4] 앱인벤터의블록에디터화면을살펴봅시다. 블록에디터 (Block Editor) 는앞의디자인구성화면에서사용한요소들을어떻게동작시킬 것인지설정하는부분입니다. 12
실습하기 치즈먹는쥐돌이 게임의구성요소탐구 아래활동을따라해보고구성요소및역할을찾아봅시다. [ 활동 1] 치즈먹는쥐돌이 게임화면에사용된구성요소의번호들 (1~7) 번을아래의 앱인벤터구성요소 ( 가 ~ 바 ) 에해당하는칸에짝지어넣어봅시다. 가. 버튼 ( ) 버튼을터치하여버튼에해당된기능을수행합니다. 예를들어게임시작버튼을터치하면 게임이시작됩니다. 나. 캔버스 ( ) 앱의바탕이되는화면을말하는것으로앱에보이는모든요소들은캔버스위에놓입니다. 다. 이미지 ( ) 화면에사용할그림을보여줍니다. 이미지의속성을바꾸어보여줄그림의크기, 애니메이션, 내용을변경할수있습니다. 라. 라벨 ( ) 문자를보여주는요소입니다. 13
장 마. 이미지스프라이트 ( ) 캔버스안에서사용되는이미지를말하며, 움직일수도있고고정될수도있습니다. 바. 기울기센서 ( ) 모바일폰의흔들기나기울어진정도를측정합니다. 탐구 1) 스마트폰을기울였을때 쥐돌이 가움직이게하려면어떤앱인벤터구성요소들이 사용되었을까요? 가장기본적인구성요소들을찾아봅시다. (2 가지 ) (, ) 탐구 2) 치즈먹는쥐돌이 게임을점수받기어렵게만들려면앱인벤터의어떤구성요소를조절해야 할까요? 친구들과함께 [ 보기 ] 의구성요소들에대하여토의하고, 난이도를높이는방법을 찾아봅시다. [ 보기 ] : 캐릭터, 기울기센서, 아이템, 방해물, 타이머, 배경이미지, 점수판, 효과음, 시계 탐구3) 스마트폰은어떻게쥐돌이를움직일까요? 스마트폰에는스마트폰의기울어진정도를파악하여알려주는기울기센서 * 가있습니다. 따라서스마트폰은우리가스마트폰을기울이는것을알고이것을게임에전달해주어기울어진방향으로쥐돌이를움직이게합니다. * 기울기센서 : 센서란소리, 빛, 온도, 압력, 열, 기울어짐등외부로부터가해지는물리적인자극을 파악하고이를전기신호로전달하는기능을가진장치를말합니다. 스마트폰에는여러가지센서 가들어있으며본프로그램에서는물체의기울어진정도를측정하는기울기센서를사용합니다. 14
[ 활동 2] 치즈먹는쥐돌이 게임을디자인해봅시다. 활동 2 에서는들어가기에서실습한 치즈먹는쥐돌이 게임을직접디자인합니다. 탐구 1) 앱인벤터프로젝트를만듭니다. 프로젝트는여러분이앞으로작성할디자인, 프로그램을 담는그릇과같아요. 프로젝트이름은영문으로합니다. 15
장 탐구2) 치즈먹는쥐돌이 게임은스마트폰을기울여서하는게임입니다. 따라서, 화면에기울기기능을넣어봅시다. 스마트폰움직임이어떻게쥐돌이를움직일것인지기울기센서를생각하여봅시다. 탐구 3) 쥐돌이게임에서는쥐돌이가치즈를먹을때마다점수가올라가요. 이를화면에어떻게 표현할까요? 탐구 4) 쥐돌이는화면을돌아다니면서치즈를먹습니다. 쥐돌이와치즈를추가해봅시다. 16
마지막으로아래의그림과같이배치가되었는지확인해봅시다. 위의그림과같이배치가되었나요? 탐구 5) 오른쪽상단의아래와같은버튼을눌러블록에디터화면으로이동해봅시다. (AppInventorForAndroidCodeblocks.jnlp 이파일이다운받아지면실행합니다.) 17
장 [ 활동 3] 치즈먹는쥐돌이 게임프로그래밍을해봅시다. 아래탐구활동을따라해보면서프로그래밍을체험해봅시다. 탐구 1) 앱내부에서사용될점수값을지정해봅시다. Score 는점수의값을가집니다. 탐구 2) 스마트폰을기울여서쥐돌이를움직이는부분입니다. 아래의블록과문장이대응되는부분을화살표로이어봅시다.. l 기울기센서의값이바뀔때 l 쥐돌이의위치를움직인다. 이제위의블록의모양으로블록을완성하여줍니다. 탐구 3) 쥐돌이가치즈를먹는부분입니다. 아래의블록과문장이대응되는부분을화살표로 이어봅시다. l l l l 쥐돌이가치즈의좌표로간경우치즈가보인다면치즈를안보이게하고점수를 10점추가한후 l 바뀐점수를화면에표시하라. 18
탐구 4) 쥐돌이가치즈를먹으면치즈가사라져요. 쥐돌이가치즈를계속먹을수있도록치즈를 만들어봅시다. 아래블록과문장이대응되는부분을화살표로이어봅시다. l 캔버스가터치되면 l 치즈를다시보이게하라. 탐구 5) 조립한블록이아래와같은지확인해봅시다. 19
장 [ 활동 4] 만든앱을실행해봅시다. 치즈먹는쥐돌이 게임을스마트폰에전송하고설치해봅시다. 탐구 1) 완성된 치즈먹는쥐돌이 앱을스마트폰으로전송하여봅시다. 앱인벤터디자인뷰화면의오른쪽상단의 Package for Phone 을선택합니다. Download to this computer : apk 파일로만들어컴퓨터에다운로드합니다. apk 파일은다운로드폴더에 저장됩니다. 탐구 2) 스마트폰을컴퓨터와연결한후스마트폰의 Download 폴더안에위에서만들어진 apk 파일을 추가합니다. 탐구 3) 스마트폰과의연결을종료한후에스마트폰의프로그램설치관리자를실행합니다. 탐구 4) 치즈먹는쥐돌이게임의아이콘을클릭하여게임을설치합니다. 탐구 5) 이제치즈먹는쥐돌이게임을실행하여잘움직이는지확인합니다. 쥐돌이가잘동작하나요? 예제게임과내가만든게임이어떤차이점이있나요? 왜차이점이생겼는지선생님및친구들과의논해요. 20
평가하기지금까지체험한내용을친구들과확인해봅시다. 게임앱을만들기위해필요한구성요소들이무엇인지친구들과함께알아봅시다. [ 활동 1] 기울기를이용한게임앱에가장기본적인앱인벤터구성요소를알아봅시다. 탐구1) 치즈먹는쥐돌이 게임화면에나타나는요소와나타나지않는요소를찾아서표에적어봅시다. 화면에나타나지않는요소화면에나타나는요소 탐구 2) 친구들의표와나의표를비교하여내가생각하지못했던구성요소를빈칸에써넣어봅시다. [ 활동 2] 앱제작에흥미를가지게되었나요? 탐구 1) 앱제작을하면서재미있었던점들을적어봅시다. 다음시간에는앱제작에필요한디자인체험을해봅시다. 21
2 장 게임스토리보드작성하기 학습소개 2 장에서는 치즈먹는쥐돌이 예제게임의스토리보드를보면서스토리보드가무엇인지그리고어떻게표현하는지를학습합니다. 이를바탕으로나만의재미있는게임아이디어를구상하고스토리보드로표현해봐요. 또한스토리보드가잘표현되었는지를결정하는평가항목을학습하고이를바탕으로각조별로조원들의스토리보드를서로평가해보고, 조원들끼리각스토리보드에관한의견을토론해봅시다. 학습목표 내가만들게임아이디어를계획하고아이디어를표현하기위한 스토리보드를제작한다. STEAM 요소 - Arts: 게임구성요소발상및표현 - Mathematics: 논리적사고연습및토의 준비물 교재활동지, 필기도구 ( 스케치용 ), 스티커 22
< 상황제시 > 2013 년 12 월 5 일제목 : 나도게임을만들고싶다. 스마트폰으로게임을하다정말좋은아이디어가떠올랐다. 게임앱으로만들면대박날수있을것같은데게임을만드는법을모른다. 게임에들어가는그림은무엇이필요하며, 어떤순서로게임이진행되어야재미있는게임앱이될까? 23
들어가기 스토리보드가무엇인지알아봅시다. 스토리보드는디자인아이디어를줄거리가있는그림으로표현하는방법입니다. 스토리보드의예시를통하여스토리보드의제작과정에대해알아봅시다. [ 활동 1] 예시그림을보면서스토리보드가무엇인지 알아봅시다. 스토리보드란? 디자인의기획단계에서아이디어를컷만화와같이순서가있는장면의그림으로표현하는방법으로디자인의구체적인내용을검토하고디자인제작을위한작업의지침서의역할을합니다. 스토리보드를만들면, 1) 전체적인앱의내용과흐름을알수있습니다. 2) 앱의각화면마다어떤내용과어떤작동방법을담고있는지, 또어떻게표현할것인지생각해볼수있습니다. 3) 스토리보드를기획서로삼아화면의디자인제작을수행할수있습니다. 24
기본익히기 치즈먹는쥐돌이 게임의스토리보드를보면서게임의스토리보드표현방법을 학습해봅시다. 치즈먹는쥐돌이 게임의스토리보드제작과정을알아봅시다. 스토리보드를제작하면서게임앱의 주요내용과흐름을정리할수있습니다. [ 활동1] 치즈먹는쥐돌이 게임의스토리보드작업을위하여먼저생각해야할앱의기획단계를알아봅시다. 게임제목치즈먹는쥐돌이게임목적시력이안좋은쥐돌이에게치즈를먹여서점수를얻는다. 배경 건물지하 주요스토리 쥐돌이가치즈를찾아먹는다. 미션 제한시간안에스마트폰을기울여쥐돌이를움직여서치즈를많이먹게하여높은 점수를얻는다. 규칙 치즈를먹으면점수가올라간다. 탐구 1) 치즈먹는쥐돌이 게임앱의디자인구성요소를알아봅시다. 캐릭터 쥐돌이 캐릭터의특징 치즈를매우좋아함 아이템 치즈 25
[ 활동2] 치즈먹는쥐돌이 게임에서아래의스토리보드예시를보고스토리보드제작과정에대해알아봅시다. 1. 게임시작쥐돌이와치즈가화면에나오며, 게임시작버튼을터치하여게임을시작한다. 2. 게임중아이템을먹었을때치즈를먹어서점수가 10점올라간다. 핸드폰을기울여쥐돌이가기울인방향으로움직이게한다. 쥐가치즈에닿으면, 10점올라간다. 치즈에닿으면치즈먹는소리가난다. 3. 새게임시작게임을다시하고싶으면새로운게임을시작한다. 새로고침버튼을누르면점수는 0이되고새로운치즈가생긴다. 탐구 1) 게임화면에들어갈구성요소들이무엇인지알아봅시다. [,, ] 26
실습하기스토리보드를만들어봅시다. [ 스토리보드제작하기 _ 게임기획하기 ] 내가만들게임스토리를구체적으로정리해봅시다. 게임제목 게임목적 < 게임스토리 > 배경 주요스토리 미션 규칙 27
[ 스토리보드제작하기 _ 썸네일스케치 ] 앱이완성되었을때게임의주요구성요소들이어떤모습일지여러가지형태로상상해서간단한스케치로그려보세요. 이와같이작은크기의간단한스케치를사용하여여러가지아이디어를생각하고표현하는방법을썸네일스케치 (Thumbnail Sketch) 라고합니다. 캐릭터 : 특징 : 아이템 : 28
[ 스토리보드제작하기 _ 게임시작, 게임중화면 ] 게임의단계별로구체적인스토리를생각하며스케치해봅시다. 게임시작 : 게임이시작했을때의화면입니다. 캐릭터가어떻게움직일지게임방법에대한이야기를하고, 그것을구현하기위한방법에대해서설명해봅시다. 스토리 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 게임중 : 캐릭터의구체적인행동을생각해보고행동에따른결과를어떻게줄것인지생각해 봅시다. 스토리 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 29
[ 스토리보드제작하기 _ 추가화면 ] 게임중 : 스토리 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 게임중 : 스토리 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 30
평가하기 각조별로조원들의스토리보드를서로평가해보고, 조원들끼리각스토리보드에 관한의견을토론해봅시다. [ 활동1] 스토리보드평가하기디자인평가는완성된디자인을대상으로해야하지만스토리보드와같은중간의기획과정에서미리기초적인평가를해보면디자인을완성하기전에잘못된방향을수정하고, 더좋은디자인이나오도록디자인아이디어를변경할수있으므로디자인의시간과노력이절약됩니다. 그러나스토리보드는완성된디자인이아니므로, 모든평가항목을완벽하게평가할수는없고스토리보드에서평가가가능한기초적인디자인평가를진행합니다. 탐구1) 스토리보드평가항목알아봅시다. 스토리보드에서는게임의진행과정과게임에나오는구성요소들을주로평가기준표현하므로스토리보드평가에서는게임의진행과정과구성요소들이게임의목적에맞게디자인되었는지를주로평가합니다. 핸드폰의기울기를이용한게임방법에대한아이디어가적절하고표현이잘되었나요? 스토리보드게임이완성되었을때의화면이어떤모습일지표현이되었나요? 평가항목전체적인게임스토리가게임캐릭터, 아이템과어울리나요? 주인공캐릭터, 아이템의모습이잘표현되었나요? 31
탐구 2) 탐구 1) 의평가표를바탕으로조원들의스토리보드를평가해봅시다. 같은조원의스토리보드를평가해봅시다. 그리고의견을아래의빈칸에적어봅시다. 스토리보드평가항목 친구들이름 u 핸드폰의기울기를이용한게임방법에대한아이디어가적 절하고표현이잘되어있나요? 1) 부족하다 2) 보통이다 3) 잘되었다 u 게임방법에대한아이디어가표현이되어있나요? 1) 부족하다 2) 보통이다 3) 잘되었다 u 앱이완성되었을때의화면이어떤모습일지표현이되어 있나요? 1) 부족하다 2) 보통이다 3) 잘되었다 u 전체적인게임스토리가게임캐릭터와어울리나요? 1) 부족하다 2) 보통이다 3) 잘되었다 합계 의견 : 위의평가항목을기준으로하여가장점수가높은조원의활동지에스티커를붙여주세요. (1인당 2회가능 ) 스티커를붙여주세요친구들이스티커를붙여주는곳입니다 32
[ 활동2] 조별스토리보드선택 ( 조별게임디자인선정 ) 조원들이제작한여러가지게임아이디어중조에서제작할최종디자인을스토리보드평가를통하여선정합니다. 스토리보드평가에서나온각조원의디자인의장단점에대하여토의하고가장잘된스토리보드를조의대표스토리보드로선택합니다. 대표스토리보드가선택되면조원들의의견을종합하여수정한스토리보드를아래에다시한번그려봅시다. 이스토리보드가여러분조의게임앱에대한기획서가됩니다. 탐구 1) 스토리보드에작성했던특징과비교해보고정리하여다시한번캐릭터의특징을작성해 봅시다. < 예시답안 > 캐릭터 : 치즈먹는쥐돌이스마트폰을기울였을때 : 쥐돌이 가 ( 이 ) 입을열었다가닫았다가하면서움직인다. 쥐돌이 가 ( 이 ) 치즈 를 ( 을 ) 먹었을때, 점수가올라가고쥐돌이의크기가커진다. 캐릭터 : 스마트폰을기울였을때 : 가 ( 이 ) 가 ( 이 ) 를 ( 을 ) 먹었을때, 33
탐구 2) 최종스토리보드그리기 조원중한사람이최종스토리보드를그립니다. 게임시작 : 게임이시작했을때의화면입니다. 캐릭터등게임의주요요소들과게임방법을소개하고게임을시작할수있도록합니다. 스토리 : 구현방법 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 게임중 : 스토리 : 구현방법 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 34
게임중 : 스토리 : 구현방법 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 게임중 : 스토리 : 구현방법 : < 평가및수정사항 > * 친구들의평가를받고 작성하는곳입니다. 35
3 장 캐릭터와앱아이콘디자인 학습소개 3 장에서는게임앱을디자인하는데필요한캐릭터, 아이콘등을찾아보고, 스토리보드에서만들어진특징과스케치를참고하여자세히그립니다. 또한소리효과를나타내기위해예제로주어진사운드샘플파일목록에서어울리는것을찾아봐요. 이렇게만든디자인소스를컴퓨터에전송하여조친구들과함께비교하여가장잘되었다고생각되는소스를결정하고필요하면편집합니다. 학습목표 내가만들게임아이디어를계획하고아이디어를표현하기위한 스토리보드를제작한다. STEAM 요소 - Technology /Engineering: 스마트폰내장카메라및앱체험 - Arts: 디지털디자인체험 준비물 컴퓨터, 스마트폰 ( 카메라 ), 사운드샘플파일, 교재활동지, 색연필, 사인펜등채색도구 36
들어가기 앱인벤터로제작한 치즈먹는쥐돌이 게임을체험해봅시다. [ 활동 1] 게임캐릭터를살펴봅시다. 탐구 1) 왼쪽의그림은 치즈먹는쥐돌이 게임의캐릭터인 쥐돌이 입니다. 쥐돌이 를보고조원들과함 께게임캐릭터의특징에대해토의해봅시다. 게임캐릭터는어떻게디자인하는것이좋을까요? l l l l l [ 활동2] 앱아이콘을살펴봅시다. 탐구1) 앱아이콘이란무엇일까요? 앱아이콘은스마트폰홈화면에서사용자가게임을선택하도록해주는연결고리가됩니다. 위의예시를보고앱아이콘의생김새에대해이야기해봅시다. 앱아이콘에는어떤것이표현되어야사 용자가게임의내용을잘예상할수있을까요? ( 테두리의모양, 캐릭터, 배경느낌등 ) 37
기본익히기 치즈먹는쥐돌이 게임앱을앱인벤터로열고게임앱을제작하기위하여어떤디자인 소스가필요한지탐구해봅시다. [ 활동1] 디자인소스에대하여알아봅시다. 디자인소스는앱에필요한그림이나소리의구성요소들을말하며, 디자인소스제작은앱인벤터에서프로그래밍을하기전에필요한그림파일과소리파일을준비하는작업입니다. 하나의앱을만들기위해서는여러가지그림파일과소리파일이모여디자인소스가됩니다. 앱인벤터를열고 치즈먹는쥐돌이 게임에쓰인디자인소스들을찾아봅시다. 탐구 1) 앱인벤터를보면서사용된디자인소스와디자인소스의파일이름을보고 아래표의빈칸에디자인소스에해당되는파일이름을써넣어봅시다. 디자인소스캐릭터아이템배경화면쥐돌이가치즈를먹었을때게임이시작될때게임이재시작될때 파일이름 탐구2) 소리파일디자인소스에는그림파일만있는것이아닙니다. 소리파일도디자인소스라고할수있습니다. 게임을켰을때나오는소리, 아이템을먹었을때나오는소리등여러가지소리가존재합니다. 치즈먹는쥐돌이 게임에는어떤소리들이필요할지소리를상상해서글로써봅시다. 게임배경음악 : 아이템을먹었을때 : 게임이시작될때 : 게임이재시작될때 : 38
실습하기 그래픽디자인소스를만들어봅시다. 캐릭터, 아이템, 앱아이콘을만들어봅시다. 게임앱의효과음을듣고자신이만들앱에어울리는소리를선택할수있습니다. 게임을하는화면에서눈에보이는요소들 ( 캐릭터, 아이템 ) 을구체적으로만들어봅시다. 또, 게임앱의특징을잘보여주는앱아이콘을만들어봅시다. 자세한스케치를사진으로찍어디자인소스로사용합니다. 다양한게임앱의효과음을듣고자신이제작할앱에어울리는소리를선택합니다. [ 활동 1] 그래픽디자인소스를만들어봅시다. 탐구 1) 게임앱캐릭터디자인 캐릭터는게임의모든화면에나오게되며이야기의주인공이라고할수있습니다. 스토리보드에서만 들어놓은특징과스케치를참고하여캐릭터를자세하게그려봅시다. 탐구 2) 게임아이템디자인 캐릭터가좋아할아이템은무엇일까요? 아이템은캐릭터가좋아하는것입니다. 스토리보드와위에서그 린캐릭터를참고하여아이템을그려봅시다. 39
탐구 3) 게임앱아이콘디자인 예시를참고하여우리조에서만들게임앱을잘나타낼수있는 앱아이콘 을그려봅시다. [ 활동 2] sound sample 폴더안의사운드파일들을들어보고탐구 1) 을진행해봅시다. 탐구1) sound sample 폴더안에있는사운드파일목록중에서우리조가만들앱에어울리는사운드를골라봅시다. 캐릭터가아이템을먹었을때사운드파일어울리는이유 1 2 3 우리조의선택은사운드파일입니다. 40
평가하기 만든디자인소스를컴퓨터에전송하여친구들과함께비교해봅시다. 디자인소스들을컴퓨터에전송하여크기조절등필요한수정을하고파일이름을변경합니다. [ 활동 1] 사진찍고전송하기 탐구 1) 친구들이각자디자인한캐릭터, 아이템과앱아이콘을놓고가장잘되었다고생각하는것 을정하여스티커를붙입니다. 왼쪽의그림과같이표시된곳에스티커를붙여주세요. 탐구2) 결정된캐릭터, 아이템과앱아이콘들은스마트폰카메라를이용하여사진을찍습니다. 1) 종이의가로세로를카메라화면에맞추어사진을찍습니다. 사진을찍을때그림이잘리지않도록주의합니다. 2) 찍은사진들을 USB 케이블선을이용하여컴퓨터로전송합니다. 3) 컴퓨터에서찍은사진파일들을확인하고그림판프로그램에서사진을열어필요한부분만남기고자르기합니다. 4) 사진파일이름을변경하고디자인소스목록표를작성해봅시다. 그래픽디자인소스사운드디자인소스 디자인소스앱아이콘캐릭터아이템배경화면캐릭터가아이템을먹었을때 파일이름 41
4 장 앱제작과테스팅 학습소개 4 장에서는앞에서만든디자인소스에프로그래밍을통해동작을입혀궁극적으로스토리보드와같은이야기가전개되도록할것입니다. 이를위해화면구성요소및동작블록을앱인벤터를이용하여생성하고배치합니다. 이렇게만든앱을테스트해보고완성합니다. 학습목표 앱디자인에프로그래밍을통합하여앱을완성한다. STEAM 요소 - Technology/Engineering: 앱구성요소이해하기, 나만의앱게임에동작을프로그래밍하기 - Mathematics: 디자인과프로그래밍의논리적연계사고하기 준비물 컴퓨터및앱인벤터소프트웨어, 스마트폰, 연결잭, 활동지교재 42
들어가기앱프로그래밍을기획해봅시다. [ 활동1] 앱인벤터구성요소의동작을설계해봅시다. 탐구1) 사용될구성요소각각의동작을상세히기획하는단계입니다. 아래의예시를보고빈칸을채워봅시다. 사용할구성요소 이름 개수 크기 위치 동작 설계내용 (x, y 좌표값 ) ImageSprite 벽돌 2 40 x 40 15, 230 고정 캐릭터의좌표값 = (X, Y) 블록에디터내에서구현할내용 X = 기울기센서의 x값 Y = 기울기센서의 y값 ImageSprite 치즈 2 35 x 35 20, 100 고정 쥐돌이의이미지와부딪치면사라짐 ImageSprite 쥐돌이 1 30 x 30 150, 400 위치이동 방해물과부딪치면 -5점, 쥐돌이가 3초동안움직일수없음 Canvas 배경화면 1 Auto Center 전체화면 아이템이모두사라지면새로아이템보여줌 HorizontalArrangement 수평정렬 1 450 x 40 Top 틀 깔끔하게보이기위해사용 Label 시간 2 Auto 정렬내부 고정 시간 : 텍스트와시간표시 Label 점수 2 Auto 정렬내부 고정 점수 : 텍스트와점수표시 Label 빈칸 1 150 x 30 정렬내부 고정 글자간격을위해넣음 사용할구성요소이름개수크기위치 (x, y 좌표값 ) 동작 설계내용 43
실습하기 앱인벤터에이미지와사운드파일을삽입하고, 스마트폰에앱을넣어봅시다. [ 활동 1] 앱의화면그래픽을구성해봅시다. 탐구 1) 앱인벤터스크린을구성해봅시다. 1. 앱인벤터사이트에서새프로젝트를개설합니다. 2. Screen1 부분에자신이기획한구성요소들을왼쪽 Palette 부분에서찾아추가합니다. 3. 구성요소들의이름을구분할수있도록지정합니다. 44
탐구 2) 이미지를앱인벤터에불러와봅시다. 1. Media 부분 Upload new 를클릭하여이미지관련파일들을업로드합니다. 2. Components 에서이미지를변경할구성요소를클릭합니다. 3. Properties -> Picture 부분에 none 부분을클릭하고변경할이미지파일을클릭합니다. 4. OK 버튼을누릅니다. 탐구 3) 구성요소들의크기를변경해봅시다. 1. Components에서크기를변경하고싶은구성요소를클릭합니다. 2. Properties에서 Width( 너비 ) 와 Height( 높이 ) 를 들어가기 에서정했던 Pixel 크기로변경합니다. 45
[ 활동 2] block editor 를열어서필요한블록들을생성하고블록들을설계한조건에 맞게배치해봅시다. 탐구1) 점수를계산하는스코어블록을만들었나요? Tip. Built-In -> Definition에서 ( 파란색 def 블록 ) variable 블록을만들고이름을 Score로바꿉니다. (variable -> Score) 그리고그블록옆에 Built-In -> Math에서 ( 초록색 number 블록 ) number블록을붙여줍니다. 마지막으로숫자를 0으로바꿉니다. 탐구 2) 기울기센서를이용해캐릭터를움직이는블록을만들었나요? Tip. My Blocks 에서 ( 초록색 when-do 블록 ) AccelerometerSensor1.AccelerationChanged 를만들고 그블록안에 ( 보라색블록 ) 캐릭터이름.MoveTo 를사용하면캐릭터를움직이게할수있습니다. 캐릭터이름 : Mouse / 동작 : 기울기센서값이변하면캐릭터이동 탐구 3) 아이템과캐릭터가만났을때기획한조건의블록을만들어봅시다. Tip. 예를들면아이템과캐릭터가만났을때점수를더해주어야합니다. 46
평가하기 만들어진앱을테스트해보고완성해봅시다. [ 활동 1] 앱을실행시켜봅시다. 탐구1) 앱인벤터화면오른쪽상단에 Package for Phone 부분을클릭합니다. 탐구2) Download to this Computer를클릭하여 *.apk를자신의컴퓨터로다운로드합니다. 탐구3) USB 케이블을이용해서스마트폰으로다운받은 *.apk파일을복사합니다. 탐구4) 스마트폰으로 *.apk를설치하고실행합니다. [ 활동 2] 앱구성요소들의동작을확인해봅시다. 탐구1) 실행후발견되는문제점을적고수정할부분을작성합니다. 탐구2) 앱인벤터로돌아가수정하기전에같은팀에있는친구들과상의합니다. 탐구3) 새로운의견이있다면작성합니다. 탐구4) 작성된내용을앱인벤터로돌아가수정합니다. 탐구5) 수정된후다시앱을다운로드받아실행해서해결되었는지확인하고해결여부를 O, X로표시합니다. 47
탐구1) 다음빈칸을채우면서문제를해결해봅시다. [ 예시 ] 문제점 수정방안및부가설명 친구들의의견 해결여부 치즈를먹어도점수가 점수를카운트하는블록 홍길동 : + 연산을하는블록 ( O, X ) 오르지않는다. 을다시조립한다. 을다시조립한다. 김철수 : 컴포넌트부분을재 설정한다. 문제점수정방안및부가설명친구들의의견해결여부 ( O, X ) ( O, X ) ( O, X ) 탐구 2) 문제점이해결되지않고앱이완성되지않으면실습하기로돌아가다시한번살펴봅시다. 48
5 장 게임앱평가하기 학습소개 5 장에서는각조별로만든게임앱을평가하는데필요한평가기준을 알아보고이를바탕으로만든친구들이만든앱을평가합니다. 학습목표 조별로완성된앱을비교평가합니다. STEAM 요소 - Arts: 나만의앱게임디자인하기, 창의적생각을전개하고 토의하기 준비물 스마트폰, 교재활동지, 필기도구 49
< 상황제시 > 순용 : 보경아, 나게임앱만들었어. 보경 : 무슨게임? 순용 : 치즈먹는쥐돌이라고스마트폰의기울기를이용해서만든거야. 보경 : 나도해볼래. 스마트폰줘봐. ( 보경게임중 ) 순용 : 어때? 재미있어? 보경 : 재미있어. 순용 : 어떤부분이? 보경 : 그게... 보경이는게임이재미있다고하지만구체적으로어떤부분이좋다는말을하기엔어려움이있어 보입니다. 게임을평가할때, 어떤기준으로평가를해야잘만든게임앱이라는것을알수있을까요? 50
들어가기 내가디자인한앱의평가기준을알아봅시다. [ 활동 1] 게임디자인평가요소를알아봅시다. 디자인이잘되었는지를검토하고더좋은디자인을위하여어떤수정을해야하는지알아보는 활동을디자인평가라고합니다. 디자인평가는모든사람이공감할수있는객관적인기준에의하여결정됩니다. 게임디자인에서좋은게임을결정하는기준은여러가지가있지만가장자주쓰이는기준은게임의사용편리성, 게임의그래픽디자인그리고게임의재미입니다. 이세가지게임디자인평가기준에대하여자세히알아보겠습니다. 게임의 사용편리성 게임의 그래픽디자인 게임의재미 51
탐구 1) 게임의사용편리성 게임의사용편리성은여러분의게임을시작부터종료까지편리하게진행할수있도록기본적으로 고려되어야하는요소들을잘갖추었는지와게임을할때어려움이없는지를평가합니다. 게임의사용편리성게임을어떻게하는지이해가가나요? 게임을하면서필요한기능의버튼이나아이콘을잘찾을수있나요? 내가선택한기능이잘수행되었는지확인할수있나요? 게임화면의글자나그림들이잘보이나요? 탐구 2) 게임의그래픽디자인 게임의그래픽디자인은여러분의폰화면에보이는시각적요소들이얼마나목적에맞게표현되었고아 름다운지를평가하는기준입니다. 게임의그래픽디자인게임의스토리와게임의주인공캐릭터가잘어울리나요? 게임의주인공과배경이잘어울리나요? 게임주인공과아이템의크기는적당한크기인가요? 화면이정리되어보이나요? 탐구3) 게임의재미게임의재미는말그대로게임이재미있는지를평가하는부분입니다. 게임은재미있는경험을위하여존재하는것이므로재미가없다면아무도그게임을다시하고싶지않을것입니다. 게임의재미를평가해보면서어떤점들이게임을좀더재미있게만드는지알수있습니다. 게임의재미게임을처음할때쉽게할수있나요? 게임을다시하고싶다는생각이드나요? 다른게임에비하여흥미롭다고생각하나요? 게임이너무어렵지는않나요? 52
실습하기 다른조의완성된게임을앱디자인평가기준에의하여평가해봅시다. [ 활동 1] 앱디자인평가요소알아보기 들어가기에서공부한게임디자인의평가요소에프로그래밍평가요소를추가하여평가해봅시다. 탐구 1) 프로그래밍평가요소알아봅시다. 프로그래밍평가요소는게임이잘실행이되는지, 디자인과실제기능과의연결이잘되었는지, 또는폰화면조건에맞게프로그래밍되었는지를평가해봅시다. 프로그래밍게임이멈추거나느려지거나하는문제가없나요? 게임이폰화면사이즈에알맞게제작되었나요? 게임중에필요한기능들이잘작동하나요? 게임의진행상태가화면에잘표시되나요? 53
[ 활동2] 완성된게임앱평가하기최종디자인평가를통하여디자인한앱의우수성을검증하고다음에더좋은앱을만들기위한경험을쌓을수있습니다. 우리조가만든게임과친구들이만든게임을플레이해보고나서평가해봅시다. 먼저조장의평가지로우리조가만든앱을평가하고나머지조원 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 의견 : --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- 54
게임의재미 게임을처음할때쉽게할수있나요? ---------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 게임을다시하고싶다는생각이드나요? --------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 다른게임에비하여흥미롭다고생각하나요? ------------------------------------ ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 게임이너무어렵지는않나요?----------------------------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 합계 /20 의견 : --------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------ 프로그래밍 게임이멈추거나느려지는문제가없나요?---------------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 게임이폰화면사이즈에알맞게제작되었나요? ------------ ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 게임중에필요한기능들이잘작동하나요?---------------------------------------( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 게임의진행상태가화면에잘표시되나요?--------------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 합계 /20 의견 : --------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------ 55
게임의디자인 게임의스토리와게임의주인공캐릭터가잘어울리나요? -------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 게임의주인공과아이템의크기는적당한가요?---------------------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 화면이정리되어보이나요? --------------------- ( ) 1) 매우아니다 2) 아니다 3) 보통이다 4) 그렇다 5) 매우그렇다 의견 : 합계 /15 --------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------ 56
탐구 2) 평가한조의점수의총점을내봅시다. 평가가완료되면각조의총점수와의견에대하여토의해봅시다. ( ) 조점수 종합의견 게임의사용편리성게임의재미프로그래밍게임의디자인총점 /75 ( ) 조점수 종합의견 게임의사용편리성게임의재미프로그래밍게임의디자인총점 /75 ( ) 조점수 종합의견 게임의사용편리성게임의재미프로그래밍게임의디자인총점 /75 57
직업체험및진로연계 스마트폰앱제작관련분야진로탐색및설계를위해 전문가를방문하여특강을듣고체험해봅시다. 앱디자이너특강 재미있는앱디자인사례와디자이너의업무에대해탐구해봅시다. 로봇특강 스마트폰앱을이용한다양한로봇사례에대해서탐구하고체험해 봅시다. 미디어아트특강및캠퍼스탐방 미디어아트연구소를방문하여생활속의예술구현을위한다양한 작품및시설을체험해봅시다. 58
앱디자이너특강 재미있는앱디자인사례와디자이너의업무에대해탐구해봅시다. 주제 강사 내용 일시및장소 소감 새로 알게된 정보 나의 진로 계획 59
로봇특강 스마트폰앱을이용한다양한로봇사례들을중심으로로봇제작과정에대해서 살펴보고직접체험해봅시다. 주제 강사 내용 일시및장소 소감 새로 알게된 정보 나의 진로 계획 60
미디어아트특강및캠퍼스탐방미디어아트를알아보고미디어아트연구소를방문하여생활속의예술구현을위한다양한작품들을둘러보고작품구현을위한 3D 프린터, 레이저커터등시설을체험해봅시다. 주제 강사 내용 일시및장소 소감 새로 알게된 정보 나의 진로 계획 61