안녕하세요. 김용준입니다. 앱인벤터는 손쉽게 앱을 만들고 애니메이션을 위한 이미지 처리가 가능한 도구입니다. 이러한 앱인벤터를 활용한 간단한 모바일 게임을 만들어 보려고 합니다. 누구나 알고 있는 게임이 하나 있죠? 바로 ‘가위 바위 보’라는 게임인데요. 그럼 지금부터 저와 함께 앱인벤터를 사용하여 이러한 간단한 게임을 어떻게 만들 수 있는지 함께 살펴보시죠.
네, 안녕하세요. 앱인벤터 3차시 강의를 시작하도록 하겠습니다. 3차시에는 게임을 직접 한번 만들어 보려고 하는데요, 그 게임이라고 하는 것이 상당히 간단한 게임을 한번 만들어 보려고 합니다. 여러분 누구나 다 알고 있는 게임이 하나 있죠? 가위 바위 보 라는 게임인데요. 자, 일단 지금 현재 화면을 이렇게 구성을 해 놓았습니다. 처음부터 일일이 따라서 해 주시는 것도 괜찮은데요, 일단 어느 정도 여러분들도 익숙해 졌을 것이라 예상을 해서 어떻게 직접 여러분들이 만들어야 되는지에 대한 간략한 설명 위주로 작업하는 방식을 보여드릴까 합니다. 여기 보다시피 전체화면 구성이 나와져 있는데요, Arrangement라는 것이 사용됐다는 것이 특이하다라고 생각하시면 됩니다. 자, Horizontal Arrangement의 경우에는 수평적으로 화면을 정렬 시켜주는 것입니다. 일반적인 어떤 Control들 같은 경우에는 원하는 데에다 막 갖다 넣을 수 있는데, Android같은 경우는 Arrangement라는 Control을 사용을 해서, 예를 들어 이 Arrangement는 이 화면 전체 이만한 사이즈를 갖고 있고요. 이만한 사이즈에서 이미지1 하고 2를 여기 보시면, 가운데 정렬시켜 버립니다. 이런 방식을 사용했을 때 최대 장점은 화면 사이즈가 몇인지에 대해서 우리가 고민 하지 않고 자동적으로 적정한 크기의 비율로 가운데다가 배치를 해주는 작업을 할 수 있다는 것이죠. Android기계들이 원체 파편화가 많이 되어있어서 기기도 다양하고 패드 같은 장비도 있고, 가로인지 세로인지 그런 것들에 대해서도 우리가 일일이 위치를 잡기가 굉장히 힘든데요, 이런 Control들을 사용을 하게 되면, 정확하게 대충 비율을 사용해서 그 위치에 Control들을 배치를 할 수 있습니다. 아무튼 Arrangement를 사용해서 이미지 1과 2라고 하는 이미지 컨트롤을 배치해 놓았습니다, 자, 왼쪽이 AI, 오른쪽이 인간, 가위 바위 보 중에서 오른쪽이 인간이 뭘 냈는지 결정을 할 것이고요, 왼쪽 같은 경우는 AI가 뭘 냈는지 결정을 할 겁니다. 밑에 여기 있는 Label을 가지고서 인간과 AI의 위치를 다시 한 번 그려주는 역할을 합니다. 자, 그 다음으로 실제 우리가 사용할 버튼 들입니다. 자, 버튼을 3개를 배치했어요. 버튼 1, 2, 3. 순서대로 가위 바위 보 라고 하는 버튼을 배치해 놓았습니다. 그리고 마지막으로 누가 승자인지를 나타내는 Winner is, 여기 보시면, Winner is 해 놓고 배치는 Center로 해놨죠? Center로 배치를 해서 가운데 누가 이겼는지를 출력하도록 해 놓았습니다. 그러면, 이미지 버튼 같은 경우는 우리가 이미 어떻게 올리는지 저번 시간에 다 작업을 해보았을 겁니다. 미디어로 Sprite 01, 02, 03이라고 하는 이렇게 생긴 01, 02, 03 세 개의 이미지를 사용을 해서 우리가 올려 놓은 겁니다. 이 이미지를 올려놨을 때, 여기 버튼을 클릭을 해놓고 Upload file로 세 개의 파일을 올려둔 겁니다. 그리고 버튼을 클릭을 하게 되면, 버튼의 이미지를 뭘 쓸까 결정을 할 수 있죠. 01, 02, 03 지금은 01번 가위를 사용 한 겁니다. 그래서 01, 02, 03을 배치 해 놓았습니다. 그러면, 이제 Control에 대한 Design배치는 끝났고요.
이제 핵심 코드를 어떻게 작업하는지, 블록을 한번 클릭해 보도록 하겠습니다. 이번 것은 코드가 좀 길죠? 이번 것은 코드가 좀 깁니다. 그래서 여러분들이 일일이 따라서 작업하는 것은 조금 힘들 것 같아서 미리 제가 만들어 놨습니다. 그래서 핵심적인 내용들만 여러분한테 설명을 하려고 해요. 먼저 처음에 변수들을 초기화하고 있습니다. Result, 결과 값이죠. aiValue, myValue, 그래서 저는 aiValue, myValue라고 하는 이 값이 뭐냐면, 인공지능 그리고 이것이 나, 0, 1, 2, 3 순서대로 0 일 때는 가위, 1 일 때는 바위, 2일 때는 보, 가위 바위 보라는 것을 0, 1, 2라는 3개의 값으로 처리를 하려고 합니다. 자, 그리고 여기 있는 이미지 List라는 것은 뭐냐면, Make a list 바로 여기서 하는 겁니다. 바로 Make a list라는 것을 사용해서 이 Control을 사용해서 sprite 01, sprite 02, sprite 03이라고 하는 세 개의 이미지들을 리스트를 만들어 놓고 이미지 리스트라는 변수에다가 대입을 해 놓은 겁니다. 자, 여기를 봅시다. 버튼 1이 클릭이 되었을 때 어떤 일이 벌어지는지 한번 버튼 1번 2번 굉장히 많아 보이지만, 버튼 1,2,3번은 똑같아요. 기본적인 구조는 똑같고, 차이가 나는 것은 뭐냐면, 이 부분만 차이가 납니다. 내가 무슨 버튼을 눌렀는지, 1번 일 때는 가위고요 2번, 버튼 2를 눌렀을 때는 바위고요, 버튼 3를 눌렀을 때는 보, 이 세 개 의 값만 틀린것이지 나머지는 완전히 똑같습니다. 자 버튼을 눌렀을 때 Gobal AI value는 Random이라는 것을 사용을 합니다. Math에 있는 것이죠. 여기 보이는 Random. 여기서부터 여기까지에 있는 값을 Random 즉 난수를 얻어 와라. 0부터 2 사이의 값이죠. 0, 1, 2 세가지 값 중에 하나를 이 값에 얻어오는 겁니다. 그리고 여기에다가는 나의 값 0번을 넣어주고요. Get result라고 하는 Procedures이라는 것을 호출합니다. 여기 보면 Procedure이라고 있죠? Procedure라는 것은 무엇이냐면, 이번에 처음 나왔는데요, 여러분들이 반복적으로 사용되는 어떤 명령어들의 집합 즉, 보세요. Get result라는 것은 무엇이냐면, 인공지능이 무엇을 냈고, 내가 무엇을 냈는지, 이 두 개의 값을 이 Procedure한테 던져줍니다. 그러면, 이 Procedure은 AI와 my라고 하는 두 개의 값을 가지고 누가 이겼는지 승자의 결과 값을 나에게 돌려주게 됩니다. Global result에는 누가 이겼는지에 대한 정보가 들어와 있어요. 누가 이겼는지에 대한 정보를 Label text3에다가 출력을 해 주는 겁니다 나머지 부분도 똑같죠? 그래서 이런 반복적으로 사용되는 어떤 Routine하다고 우리가 통상 이야기를 합니다. 반복적으로 사용되는 부분들을 하나의 Procedure로 이렇게 빼 놓게 되면, 다양한 곳에서 호출을 할 수 있기 때문에 굉장히 유용합니다. 사실 여기서 보면 procedure로 뺄 수 있는 부분들도 더 있어요. 인공지능에서 난수를 만들어 둔 것을 여기다 가져다 놔도 되고, 내가 뭘 선택 했는지만, 사실, 다르지 그 외의 부분들을 다 똑같고, 사실 이것들도 이리 뺄수는 있으나, 이런 부분들을 이렇게 구성을 한다는 것을 여러분들에게 알려 드리기 위해서 일단은 이렇게 만들어 보았습니다. 자, 그러면, 코드 상에서 가장 핵심부분은 바로 이 부분입니다. 자, 이미지에다가 그림을 그리는 부분인데요, 자, 이것 같은 경우는 Global aiValue plus 1을 했습니다. 왜냐하면, 여기 보시면 이미지 리스트는, 우리는 0, 1, 2로 하지만, 이미지 리스트는 1, 2, 3이죠. 그러니까 만약에 가위를 그리려면, 가위는 0이잖아요, 그러면, 0에다가 플러스 일을 해 줘야 여기 있는 이 이미지 가위를 가져오게 됩니다. 그래서 Select list item이라고 하는 여기 있죠? Select list item. 여기 있습니다. Index번호, 자 이렇게 되면, 내가 가위를 냈다, 1번, 영이니까 일이죠? 1번, 1번 Index에 해당하는 Global image list로부터 이것이죠. 여기서부터 해당하는 이 이미지를 가져옵니다, 이 이미지를 가져다가 이미지 원에 Picture에다가 넣어주게 되는 것이죠. 이미지 원이 뭐죠? 이것입니다. 이것이죠. 그리고 똑같은 행위를 이미지 2에다가 하죠. 이것은 My value죠. 그러니까 AI가 무엇을 냈는지, 내가 무엇을 냈는지 이미지를 화면에다 그려주는 것이고요. 그리고 나의 값과 인공지능이 낸 값이 동일하다면, 이것은 비긴 거죠. 비겼다는 것을 우리가 영어로 Draw라고 표현하죠. 그래서 두 개의 값이 일치한다면 Do Global Result에다가 양쪽 다 같은 값을 넣고 있는데요, 한쪽만 사실 사용한다고 해도 상관없습니다. 그래서 Draw, 비겼다는 정보를 출력을 해주는 겁니다. 그리고 그게 아니다 라면, 분명 뭐가 다르다면, 이 부분이 이 프로그램 전체 상 가장 핵심적인 코드라고 볼 수 있습니다. 이 부분이, 이 부분을 보시면, 인공지능은 무엇을 냈느냐 와 내가 낸 값에다가 플러스 일을 한 값을 3으로 나눈 나머지입니다. 굉장히 복잡하죠? 내가 낸 값 0, 1, 2 플러스 일을 해서, 0, 1, 2를 플러스 1을 하면, 1, 2, 3이 나오겠죠? 1, 2, 3이 나올 텐데, 그 1, 2, 3을 3으로 나눠버린 나머지 값은 다시 0, 1, 2가 되죠, 0, 1, 2랑 이것과 비교를 해서 만약 같다 라면 같을 경우에는 제가 진 것이 됩니다. 그 값이 인공지능하고 이렇게 계산 한 값이 같을 경우에는 제가 진 것이 되요. 이것은 가위 바위 보 계산을 하는 일종의 알고리즘인데, 가위 바위 보에서 누가 이겼는지 누가 졌는지 판단하기 위해서는 여러 가지 방법이 있는데, 그 중에서 가장 최적화된 알고리즘이라고 알려져 있는 알고리즘을 사용했습니다. 비겼거나 내가 졌거나 그것도 아니면 네, 내가 이긴 경우죠? 마지막에는 내가 이겼을 것이라고 판단을 해서 이겼다는 것을 결과 값을 반환을 하게 되는 겁니다. 그래서 이렇게 하나를 만들어 놓고 나머지 버튼 1, 2, 3를 전부다 이런 식으로 만들어 놨습니다.
자 그러면, 이렇게 만든 프로그램이 실제로 어떻게 작동을 하는지 Test를 한번 해 보도록 하겠습니다. 자, Connect을 Reset 한 다음에 Emulator로 Test 해 보도록 하겠습니다. 네 Emulator이 화면상에 출력이 된 것을 보실 수 있을 겁니다. Emulator가 시작이 됐죠? 자, Emulator을 시작을 해서 Emulator가 시작이 됐고 Ai companion 상에서 프로그램을 Emulator로 전송을 하고 있습니다. Emulator에서 Ai companion으로 작동을 했고, 정상적으로 잘 Loading이 되었다면, 화면상에 우리가 원하는 가위, 바위, 보를 정상적으로 출력을 할 수 있겠죠. 자, 가위 바위 보가 나왔네요. 가위를 한번 내 볼까요? 띵! 비겼다고 나왔죠? Draw! Draw가 나왔습니다. 자, 그러면 보를 한번 내 보겠습니다. 이번에도 비겼네요. 자, 그럼 주먹을 내 볼까요? 네, 인공지능은 보를 냈고 나는 주먹을 냈죠? 제가 졌습니다. You lose! 가위를 내 볼까요? 왜 이렇게 이기는 경우가 안 나오죠? 자, 이번에도 졌네요. 왜 이렇게 이길 수가 없을까요? 일관되게 주먹을 냈더니, 네 이번에는 이겼네요. 주먹을 계속 냈더니 승리를 했습니다. 자 보다시피 정확하게 가위 바위 보에 대한 판단을 내릴 수 있었고요. 인공지능이라고 해 봤자 Random에 의한 값이긴 했지만, 어쨌든 컴퓨터가 혹은 Phone이 가위 바위 보 중에 뭔가를 냈고, 내가 가위 바위 보 중에 뭔가를 냈고, 그것을 정확히 판단하는 프로그램을 우리가 이번에 성공적으로 만들었습니다. 자, 이런 식으로 여러분이 앞으로 다양한 게임에 대한 아이디어가 있으면, 손쉽게 무엇이든 만들어 낼 수 있는 강력한 Tool을 가지게
된것이니까요, 물론 이제 이런 어떤 코드 부분들이 보시기엔 상당히 복잡해 보이지만, 실제로는 굉장히 간단한 코드입니다. 이것을 그림이 아니라 일반적으로 우리가 사용하는 java script나 코드로 전환을 하게 되면요, 훨씬 더 짧아져요. 훨씬 더 짧아지는데, 이런 비주얼 스크립트에 있어서 어떤 단점이나 그런 부분들이 단순 반복적인 부분들은 좀 더 작동화 시키거나 짧게 간략화 시킬 수 가 없다라는 것이 단점이기는 합니다. 그럼에도 불구하고 누구나 손 쉽게 작성할 수 있다는 것은 장점이기 때문에 앞으로도 앱인벤터를 사용해서 여러분들이 좀 더 원하는 프로그램들을 더 많이 개발하고 그랬으면 좋겠습니다. 특히 이 부분에 저희가 작업한 것과 같은 경우는 너무나, 아주 필수적인 이미지만을 다루는 것들을 했는데요, 보다시피 다 다양한 Control들이 있습니다. App viewer이라든가, 미디어를 사용한 동영상 플레이도 충분히 만들 수 있으니까요. 다양한 것들을 여러분들이 도전해 볼 수 있었으면 합니다. 고맙습니다.
다시 한번 정리해볼까요? 앱인벤터는 이미지 컨트롤과 버튼에 이미지 List를 추가하여 화면 디자인 작업을 진행합니다. 그리고 이미지 List를 만들고 변수를 초기화합니다. 버튼을 눌렀을 때 ‘가위 바위 보’의 승자를 판단하는 Procedure를 호출한 후 결과값을 화면에 출력하는 코드 블록 구성단계를 거친 후 Emulator를 사용하여 실행 여부를 최종 확인하면 됩니다. 여러
01. 이 강좌에 대해서
앱인벤터는 손쉽게 앱을 만들고 애니메이션을 위한 이미지 처리가 가능한 도구입니다. 이러한 앱인벤터를 활용한 간단한 모바일 게임을 만들어 보려고 합니다. 누구나 알고 있는 게임이 하나 있죠? 바로 ‘가위 바위 보’라는 게임인데요. 그럼 지금부터 앱인벤터를 사용하여 이러한 간단한 게임을 어떻게 만들 수 있는지 함께 살펴보시죠.
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)