PC 온라인 게임으로 대변되던 게임 시장의 무게 중심이 스마트폰 모바일 게임으로 빠르게 옮겨가고 있습니다. 커피전문점, 버스정류장, 길거리 등에서 스마트폰을 꺼내 들고 게임을 하는 모습은 더 이상 낯설지 않은 모습이 되었죠. 누구나 한 번쯤 해봤을 모바일 게임, 직접 만들어보고 싶다고 생각해 보신 적은 없으신가요? 이 시간을 통해 초보자도 쉽게 모바일 게임을 만들 수 있는 ‘앱인벤터’를 소개하려 합니다.
안녕하십니까? 앱인벤터를 활용한 모바일 게임 만들기’ 강의를 맡게 된 김용준이라고 합니다. 앱인벤터란 말 그대로 앱을 발명할 수 있게 해주는 도구입니다. 아무리 초보라 하더라도 누구나 손쉽게 앱을 만들 수 있게 해주는 굉장히 재미난 도구이죠. Android의 경우 Java를 직접 사용하거나, iPhone에서는 Objective-C, 혹은 Swift 등의 전문적인 프로그래밍 언어를 사용해야 하죠. 이와 같은 언어를 공부하지 않은 사람이 만든다는 건 굉장히 어려운 일입니다. 하지만 앱인벤터는 이러한 코딩에 대한 기능 없이도, 그런 능력이 없어도 충분히 손쉽게 앱을 만들 수 있게 해주는 도구입니다. 지금부터 저와 함께 앱인벤터란 어떤 것인지 함께 살펴보시죠.
보다시피 앱인벤터 사이트에 접속을 하면 여러분은 이런 화면을 보실 수 있으실 텐데요. 이 때 주의해야 할 것은 앱 인벤터 자체가 여러분이 만들어 놓은 어떤 프로젝트들을 웹에서 클라우드에서 저장을 해놓고 있기 때문에 구글 계정이 반드시 필요합니다. 그리고 당연히 구글 계정과 연동시킬 수 있는 프로그램을 웹 상에서 실행시킬 수 있는 구글 크롬이라고 하는 소프트웨어가 동시에 같이 있어야 한다는 것을 여러분들이 미리 알고 계셨으면 좋겠습니다. 자, create app을 click 하게 되면 google 계정으로 로그인 했다고 가정하겠습니다. 그리고 이런 화면을 보실 수 있을 겁니다. 이 화면은 직접 만든 프로그램을 phone이나 tablet에서 바로 실행을 시켜볼 것이냐, 아니면 android device의 에뮬레이터 사용을 할 것이냐? 라고 묻고 있는 화면입니다. 우리 같은 경우는 당연히 에뮬레이터보다는 device에 돌려 보는 것이 좋겠죠? 자, 그래서 device와 관련된 화면으로 넘어가게 되면요. 보시는 바와 같이 이런 화면을 보게 됩니다. 여러 가지 화면들이 있는데요.자, 첫 번째 같은 경우는 여기서 추천하는 방식입니다. 와이파이로 연결된, 즉 여러분의 PC와 동일한 Wifi 대역을 사용하게 되면, 자동적으로 폰에서 돌려볼 수 있게 하는 것이고요. 두 번째는 에뮬레이터, 세 번째는 만들어진 실행파일 APK를 usb 케이블을 통해서 phone에서 돌려보는 방식인데, 우리는 당연히 첫 번째 방식으로 한번 해 보도록 하겠습니다. 자 여기 사이트에 보시면 MIT AI2 Companion 이라고 하는 프로그램을 여러분의 폰 또는 tablet에 설치를 하라고 합니다. 일단은 여기를 클릭해 볼게요.
구글 플레이 스토어에 가서 MIT AI2 Companion라는 프로그램을 설치할 수 있습니다. 설치를 한 번 해 보도록 하겠습니다, 저는 개발용 cube라고 하는 tablet장비가 있으니 여기에 이 프로그램을 설치하도록 하겠습니다. 이렇게 하면 기기에 자동적으로 설치가 되고 있는 상황입니다.
자, 이제 설치가 다 되었을 테니까요. 이제 프로그램으로 돌아와서요. 이제는 이 부분이 필요가 없을 테니 continue로 들어가도록 하겠습니다. 자, 여기서 우리가 새로 프로젝트를 하나 만들어 보도록 할게요. 아, 이것은 기존의 프로젝트를 여러 가지로 보여주는데, 여기서 ‘MyAI’라는 이름으로 프로젝트를 하나 생성하겠습니다. my app inventor이라는 이름으로 생성을 했죠? 좌측에 보시면, 여러분들이 사용하실 수 있는 다양한 interface, UI design에 관련된 control도 보실 수 있습니다. Palette라고 되어있죠? button, textbox, checkbox, slider, layout, media, storage 등 다양합니다. 우리는 여기에서 제일 무난한 Label을 끌어다 여기다가 놓겠습니다. 자, 그럼 Label을 갖다 놓으면, Label에 관련된 속성 값들이 우측 properties에 나오게 됩니다. 속성 값들이죠. Label의 background color. 폰트를 bold로 출력할 것이냐? 클릭 bold로 출력해주죠? 그리고 italic으로 출력할 것이냐, 바로 바로 속성이 적용되는 것을 볼 수 있습니다. 자, 그러면 여기에 추가적으로 button을 한 번 더 추가하겠습니다. 자, button을 하나 더 추가 했습니다. text for button1이죠? 그리고 button을 또 추가했어요. button2. Label 하나, button 2개가 추가되었습니다. button1의 이름을 바꿔보도록 하겠습니다. 이름을 ‘hahaha’를 넣을 겁니다. 그리고 button2에는 ‘hohoho’를 넣겠습니다. 자, 무엇을 하려는 것이냐면 ‘hahaha’ 버튼을 누르면, 여기 있는 문자에 ‘hahaha’를
출력하고 ‘hohoho’를 누르면 여기에 ‘hohoho’를 출력하게 하려는 것입니다. 그런 프로그램을 이제부터 작성해 보려고 합니다. 자, 그것을 위해서 우리는 여기 보시는 것과 같은 아주 간단한 UI design을 했고요, 자, 이 design된 UI상태에서 여기 blocks라는 버튼이 있습니다. blocks버튼을 눌러주게 되면, 드디어 우리는 레고 블록 같은 블록들에 대한 가락을 통해서
프로그래밍을 할 수 있게 됩니다. 먼저 우리가 버튼1이 눌렸을 때, 여기 보이시죠? 이것이 ‘built in’ 이라고 내부에 내장되어 있는 기능들이고요. 이건 화면 스크린, 우리가 만들어 낸 화면 스크린에 들어가 있는 control들에 관련된 code를 여기다 넣을 수 있는 것입니다.
Label이 있고, 버튼1, 버튼2가 있고, 먼저 버튼 1에 대해서 한번 봅시다. when 버튼1 클릭! 클릭을 해 봅시다. ‘When’ 언제 버튼1이 클릭 되었을 때 ‘do’ 실행하라 굉장히 직관적이죠? 뭘 실행하면 되겠습니까? Label 1에 있는 문자를 바꿔주면 되겠죠? 자, Label1에 있는 set Label의 font size를 바꿉니까? 아니죠! margin을 바꾸나요? 아니죠! Label1의 text를 바꾸죠. 이것이네요. set 클릭을 하겠습니다. 끌어넣으니까 바로 붙어요. 자석처럼 붙죠? set Label1에 text를 뭘로 바꾸냐? 뭘로? 자, 여기에 문자를 처리하는 것이 있겠죠? 자, 색체가 딱 그것인 것 같죠? 자 문자를 가져올 수 있습니다. 이 안에 text 1이었을 때는 hahaha를 출력하기로 했죠? 벌써 하나의 프로그램이 완성이 됐어요. 버튼2가 눌렸을 때, 초리를 해 봅시다, Label1 에 text를 이렇게 바꿀 겁니다. 뭘로? hohoho로 바꾸겠죠? hohoho. 끝났어요. 다 만든 겁니다. 더 이상 만들 것이 없어요. 우리가 원하는 프로그램은 이미 이것으로 끝났어요. 자, show warning에 보면, error가 났을 때나, 혹은 경고가 났을 때, 처리를 해주는데, 보여주는 것이거든요, 지금 00 이 있어요. 이 프로그램에는 아무른 문제가 현재 없는 것입니다. 자, 이렇게 다 만들어진 프로그램을 여러분의 phone에서 혹은 tablet에서 test를
해볼 수 가 있습니다.
자, 어떻게 하느냐면, connect있죠? 장비랑 붙인다는 뜻입니다. Ai companion을 통해서 장비랑 연결할 수 있습니다. 자, 화면에 뭔가가 나왔죠? QR code가 Ai companion이라는 여러분이 설치한 프로그램을 실행을 시키세요. 그리고 실행을 시키면, 화면에 보이는 이 코드를 입력할 수 있는 창이 나올 겁니다. 거기에 정상적인 코드를 입력하게 되면, 자, 제가 제 장비에서 입력을 해 볼게요. iyhlfa네요. 이 코드를 입력해 보겠습니다. 입력하고 connect with code라는 버튼을 누르게 되면, 정상적으로 입력이 되는 순간 화면상에서 사라지죠? 사라졌습니다. 제 address가 장비에서 나타나고요. 프로그램이 바로 실행이 된 것을, 여러분이 만약 정상적으로 만들었으면, 프로그램이 실행 된 것을 보실 수 있을 거예요.
01. 이 강좌에 대해서
Android의 경우 Java를 직접 사용하거나, iPhone에서는 Objective-C, 혹은 Swift 등의 전문적인 프로그래밍 언어를 사용해야 하죠. 이와 같은 언어를 공부하지 않은 사람이 만든다는 건 굉장히 어려운 일입니다. 하지만 앱인벤터는 이러한 코딩에 대한 기능 없이도, 그런 능력이 없어도 충분히 손쉽게 앱을 만들 수 있게 해주는 도구입니다. 지금부터 앱인벤터란 어떤 것인지 함께 살펴보시죠.
02. 강사 소개
김용준 (엠게임 개발 실장)
03. 강사 이력
- 現 (주)엠게임 멀티플랫폼개발실 실장 - 前 (주)엠게임 열혈강호2 개발실 실장 - 前 한국콘텐츠진흥원(KOCCA) 기반조성본부 과장 -前 위메이드 엔터테인먼트 NED팀 파트장 -前 주성대학 컴퓨터 게임과 겸임교수 -前 (주)엘피지소프트 대표 -前 (주)아빛컨 게임산업본부장 -前 (주)쌍용정보통신 CG/VR연구원
- 2010년 (저술)IT EXPERT 3D게임 프로그래밍(개정판)/한빛미디어, 국정교과서 게임프로그래밍(집필)/교육과학기술부 - 2009년 (번역) Scaleform GFx 매뉴얼/Scaleform Korea - 2007년 (저술)Graphics Theory/사이버게임아카데미, DirectX 10/사이버게임아카데미 - 2006년 (번역)문법 떼고 다시 배우는 C프로그래밍/한빛미디어 - 2005년 (저술)모바일 프로그래밍 3(PDA프로그래밍)/사이버게임아카데미, 모바일 프로그래밍 2(GVM/BREW프로그래밍)/사이버게임아카데미 - 2004년 (번역)API로 배우는 Windows구조와 원리/한빛미디어, 2005~2010강컴어워드 선정, (번역)DirectX 9 셰이더 프로그래밍/한빛미디어, 2005~2010강컴어워드 선정, (저술)나는 프로그래머다/한빛미디어, 2005강컴어워드 선정 - 2003년 (저술)좋은 게임을 만드는 핵심원리/한빛미디어, IT EXPERT 3D게임 프로그래밍/한빛미디어, 2003~2009강컴어워드 선정 - 1998년 컴퓨터 그래픽스 캐릭터 개발도구 및 라이브러리 개발/한국전자통신연구원(ETRI) 연구보고서 - 1994년 (저술)재미있는 게임 프로그래밍/미래정보사(ISBN 8978360092)