트렌드

[도전!앱개발] ‘유니티’로 만든 두더지 게임

2014.04.25

고백합니다. 저는 원래 개발자의 길을 걸을 운명이었습니다. 대학에서 정보통신공학을 전공한 ‘공돌이’이기 때문입니다. 적잖은 친구들은 지금 개발자의 길을 걷고 있습니다. 운명의 발목을 잡은 것은 부족한 노력과 못난 재능이었습니다. 대학 시절 내내 배운 ‘C++’과 ‘자바’ 언어 중 지금 기억나는 것이라고는 “Hello World”뿐입니다. 컴퓨터와 대화하는 개발자 대신 사람과 대화하려는 기자가 된 까닭이기도 합니다.

IT 전문 매체의 취재활동은 대개 개발자를 만나는 일입니다. 혹은 개발자가 9할이 넘는 스타트업을 방문하는 일이죠. “저도 사실 전공은…”이라며 개발자를 만날 때마다 머리를 긁적이긴 했지만, 사실 개발과 관련해서는 아는 바가 적습니다. 말하자면, 개발 근처에도 가보지 않은 기자가 기술과 개발자를 취재하겠다며 나돌아다닌 꼴입니다. 한걸음 멀리서 그런 저를 바라보니 한심하기 그지없더군요. 공대 출신 기자가 남몰래 쌓아 온 일종의 부채의식이기도 합니다.

개발에 도전해 보기로 했습니다. 누군가의 도움을 받아도 좋으니 제가 만든 응용프로그램(앱)을 손에 쥐어 보고 싶었습니다. 엉성한 앱 하나 만들었다고, 마음속 부채가 탕감될 리 없다는 거, 네 잘 알고 있습니다. 다만 앞으로도 계속 개발자와 스타트업을 만나는 데 좋은 경험이 되면 좋겠다고 생각했습니다. 무엇이 좋을까 고민하다 게임으로 결정했습니다. 게임 개발엔진 유니티3D로 안드로이드 게임을 직접 만들어 봤습니다. 꼬박 하루 동안 완성한 안드로이드 스마트폰용 게임 개발 체험기입니다. 저의 체험이 비전공자도 개발에 도전할 수 있다는 희망의 메시지가 되길 바랍니다.

unity_1_600

[youtube id=”-0xenzeZtdc” align=”center”]

오원석 기자가 만든 두더지잡기 게임 ‘몰리’ 동영상 보기

‘두더지 잡기’ 게임 만들어 보시죠

유니티를 첫 개발도구로 선택한 까닭은 멀리 있지 않습니다. 쉽기 때문입니다. 흔히 ‘짠다’라고 표현하는 코딩 과정도 물론 필요하지만, 화면에 나타내고 싶은 요소를 시각적으로 코딩할 수 있습니다. 또, 안드로이드 스마트폰에서 가장 널리 쓰이는 게임 개발 도구가 유니티라는 점도 이번 결정에 영향을 끼쳤습니다.

유니티 코리아를 방문했습니다. 지국환 유니티 코리아 에반젤리트스로부터 도움을 받을 수 있었습니다. 지국환 에반젤리스트는 원래 대학에서 미술을 전공했다고 합니다. NHN에 입사에 디자인 업무를 담당했지만, 약 2년 전 유니티를 접한 이후 개발자의 길로 들어섰습니다. ‘유니티 게임개발 스타트업’이라는 개발 실용서적까지 펴낸 인물입니다. 미술을 전공한 현직 개발자와 공학을 전공한 현직 기자. 뒤바뀐 운명의 길을 걷는 두 사람이라니. 첫 만남부터 오묘합니다. 지국환 에반젤리스트의 과거 이력에서 용기를 얻었습니다. “미술을 전공한 이도 앱을 쉽게 개발할 수 있구나” 하고요.

“오늘은 간단한 ‘두더지 잡기’ 게임을 만들어 봅시다. 쉽고, 스크립트를 짜는 것도 그리 어렵지 않아요. 필요한 캐릭터 디자인은 모두 준비돼 있고요.”

지국환 에반젤리스트는 ‘두더지 잡기’ 게임을 권했습니다. 안드로이드 스마트폰 화면에 몇 마리의 두더지가 있고, 게이머가 터치로 이를 잡는 게임입니다. 지국환 에반젤리스트는 이 게임에 ‘몰리(Molly)’라는 이름도 붙였습니다. 게임에 필요한 그래픽이나 이미지는 유니티의 소스코드 장터 ‘유니티 애셋 스토어’에 모두 있으니 저 외에 다른 이들도 도전해볼 만한 작품입니다.

unity_7_600

유니티 화면 구성. 씬뷰(위)와 게임뷰

unity_2_600

하이어라키, 프로젝트, 인스펙터 화면 구성

재료 불러오고, 바로 확인하고…”간단하네”

‘몰리’ 게임은 이렇게 진행됩니다. 화면에 몇 마리의 두더지가 있고, 두더지는 구멍에서 올라왔다가 내려가는 행동을 반복합니다. 게이머는 두더지를 터치할 수 있고, 두더지는 입력값에 따라 머리를 얻어맞는 동작을 거칩니다. 게이머가 미쳐 때리지 못 한 두더지는 다시 땅속으로 들어갑니다. 땅으로 숨은 두더지가 다시 머리를 내미는 시간은 무작위(Random) 입니다. 총 게임 시간은 10초. 이 시간이 지나는 동안 프로그램은 게이머가 터치에 성공한 두더지 수를 숫자로 기록해 화면에 표시해 줍니다. 개념으로 보나 형태로 보나 완전한 게임입니다.

깜짝 놀란 것은 ‘몰리’같은 간단한 게임에 필요한 그림만 해도 약 90여장에 달한다는 점입니다. 두더지가 구멍에서 나오는 그림이 18장, 나온 이후 일정 시간 동안 두리번거리는 것을 표현하는 그림은 42장이나 됩니다. 90여장의 그림은 두더지가 나오고, 맞고, 들어가는 데 필요한 그림입니다.

유니티 개발 도구를 켰습니다. 처음 실행하면, 계정을 등록해야 하는데, 무료 계정으로 등록했습니다. 계정만 등록하면 누구나 쓸 수 있습니다. 도구화면 왼쪽에 있는 두 가지 작업판이 ‘씬뷰’와 ‘게임뷰’ 입니다. 씬뷰는 작업을 하는 곳이고, 게임뷰는 작업의 결과물이 반영되는 실제 게임 화면이라고 생각하면 됩니다. 게임뷰는 앱을 출판하려는 기기에 맞는 해상도로 조절할 수 있어 편리합니다.

오른쪽에 있는 도구는 각각 ‘하이어라키’와 ‘프로젝트’, ‘인스펙터’ 창으로 나뉘어 있습니다. 하이어라키는 말 그대로 화면에 구현된 요소의 계층구조를 보여주는 화면입니다. 프로젝트와 인스펙터에서 적용한 기능이 하이어라키에 포함돼 있습니다. 프로젝트는 개별 요소가 배치되는 화면입니다. 앱 화면에 넣고자 하는 재료를 불러오는 창입니다. 인스펙터는 게임 요소에 성격을 부여하는 창입니다. 개발자는 인스펙터 창에서 요소의 터치 조작이나 크기, 위치 등 세밀한 정보를 주무를 수 있습니다.

unity_3_600

씬뷰의 ‘애니메이터’ 항목에서 여러 장의 두더지 그림을 완성된 애니메이션으로 제작할 수 있습니다.

움직이는 두더지 만들기

게임에 쓸 두더지 그림은 프로젝트뷰로 불러오면 됩니다. 두더지 그림에 애니메이션 효과를 넣는 것은 씬뷰에서 합니다. 프로젝트뷰에 불러온 두더지 그림을 모두 하이어라키로 옮기면, 씬뷰에 ‘애니메이터’ 항목이 나타납니다. 애니메이터에서 그림이 어떤 순서대로 흐르도록 할지 결정할 수 있습니다. 이 과정은 마치 도형의 순서를 결정하는 것처럼 시각적으로 조작할 수 있습니다. ‘올라오는 두더지(Open)’와 ‘기다리는 두더지(Idle)’, ‘매 맞는 두더지(Catch)’, ‘내려가는 두더지(Close)’를 화살표 선으로 연결하면 됩니다.

두더지를 움직이도록 하는 데는 성공했지만, 조건이 붙어야 합니다. 두더지가 기다리는 상태에서 얻어맞는 입력이 발생하면, 매를 맞는 그림으로 넘어가도록 말입니다. 이 과정은 스크립트로 짜 넣어야 합니다. 여기서는 ‘C#’을 이용했습니다. 이전 과정은 모두 장난이나 다름없습니다. 스크립트를 짜는 것이 앱을 개발하는 과정입니다.

C#을 열어 ‘애니메이터’ 변수를 선언하고, 함수로 ‘캐치(두더지를 잡는)’를 설정했습니다. 변수는 언어의 ‘명사’와 비슷합니다. 함수는 ‘동사’라고 부를 수 있습니다. 개발자가 임의로 명사를 선언하면, 스크립트 안에서 동사로 활용할 수 있습니다. C# 스크립트 도구는 유니티에 모두 포함돼 있습니다.

“여기까지 한 25% 정도 완성한 겁니다.”

처음으로 스크립트를 애니메이션에 적용했습니다. 의도한 대로 움직이는 두더지를 보며 좋아하고 있는데, 지국환 에반젤리스트가 말합니다. 모든 과정의 4분의 1정도 끝난 것이라고요. 아직 갈 길이 멀다는 뜻입니다. 여기까지 오는데 약 30분 정도가 걸렸습니다.

unity_4_600

두더지 화면에 배치하기

unity_5_600

몇줄 안되는 스크립트지만, 저 같은 까막눈은 정신이 혼미해집니다.

두더지 배치하고, 소리 입히고…“그럴듯한데!”

구멍에서 나온 두더지가 두리번거리고, 입력에 따라 얻어맞거나 다시 구멍으로 들어가는 것 까지. 게임의 완전한 동작을 표현한 요소를 ‘상태 머신’이라고 부릅니다. 이 상태머신은 간편하게 복사해 화면에 여럿 배치할 수 있습니다. 이를 ‘프리팹’이라고 부릅니다. 게임 속 요소를 쉽게 관리하도록 돕는 기능입니다. 앱 개발을 쉽도록 하는 유니티의 핵심 기능 중 하나입니다.

두더지를 가로로 다섯 마리, 세로로 세 마리가 배치되도록 했습니다. 게이머는 총 15마리의 두더지를 잡으면 됩니다. 상태 머신을 복사하는 것은 단순합니다. 윈도우에서는 ‘컨트롤 + D’, 맥에서는 ‘커맨드 + D’입니다. 복사한 두더지를 마우스로 끌어 화면에 뿌려놓기만 하면 됩니다. 인스펙터 창에서 두더지의 위치를 세밀하게 조절하면, 좀 더 그럴듯한 화면을 구성할 수 있습니다.

게임이 좀 더 게임다우려면, 소리도 빼놓을 수 없습니다. 음악 파일은 모두 패키지에 들어 있는데, 이를 게임에 적용하려면 스크립트를 손봐야 합니다. 인스펙터 창에서 오디오 컴포넌트를 추가하고, 스크립트에서 오디오 변수를 선언한 다음 오디오 컴포넌트에 소리 파일을 연결하면 됩니다.

게임 제한 시간(10초)과 두더지를 잡을 때마다 점수를 늘어나게 하는 등 게임에 필요한 부가적인 요소도 스크립트로 코딩해 넣었습니다.

앱의 완성도를 높이는 ‘버그’ 퇴치

매우 간단한 작업을 반복하는 게임인데도, 버그는 있습니다. 두더지가 들어가는 중간에 터치하면, 다음에 구멍에서 나올 때 이미 얻어맞는 입력이 적용된 상태가 된다는 점입니다. 터치하지도 않았는데, 두더지를 잡게 되는 버그입니다. 게임을 컴파일하는 과정에서는 문제가 없지만, 분명 품질을 떨어트릴 수 있는 부분입니다.

불린(Boolean) 변수를 선언해 문제를 해결해야 합니다. ‘누를 수 있다’, 혹은 ‘누를 수 있다’를 논리적으로 체크할 수 있도록 하는 변수입니다.

unity_9_600

지국환 유니티 코리아 에반젤리스트

unity_8_600

‘몰리’가 안드로이드 앱 설치파일(apk)로 완성된 모습을 보니 감개무량합니다.

4시간30분…”개발, 어렵지 않아요”

완성한 ‘몰리’는 안드로이드용으로 만들었습니다. 유니티에서는 윈도우폰이나 블랙베리, 애플 iOS용으로도 게임을 만들어 낼 수 있습니다. 구글플레이에 개발자로 등록만 돼 있다면, ‘몰리’를 구글플레이에서 내려받도록 할 수 있었는데, 그 부분은 조금 아쉽네요. 유니티에서 ‘빌드’ 단추만 누르면, 안드로이드용 설치 파일(apk)을 받아 볼 수 있습니다. 시작부터 끝까지 간편합니다.

‘몰리’를 완성하는 데는 4시간 반이 걸렸습니다. 업무 시간의 절반을 투자한 셈이지만, 비교적 금방 끝낸 겁니다. 스크립트로 손수 짜 넣은 코드는 155줄. 코드가 몇천 줄을 훌쩍 넘어가는 복잡한 앱과 비교해 매우 초보적인 수준입니다. 이제 막 시작하는 단계일 뿐이지만, 개발은 사실 특별한 누군가의 영역이 아닙니다. 누구나 쉽게 배우고, 컴퓨터와 대화할 수 있다는 얘기입니다. 이국의 언어를 배우는 것처럼 말이죠.

한편으로는 기본적인 코딩 문법은 알아야 한다는 것을 다시 한번 느꼈습니다. 155줄에 불과한 스크립트일지라도 코딩의 기초를 모르면, 접근하기 어렵습니다. 유니티가 다루기 쉽다는 얘기일 뿐, 코딩은 퍽 오랜 시간 훈련이 필요한 고급 기술입니다.

‘몰리’ 개발을 계기로 유니티뿐만 아니라 범용적인 개발 기술에 조금 더 많은 시간을 투자할 계획입니다. 서점에 가면, 개발 초보자를 위한 무수한 실용서적이 있습니다. 책이 도와줄 겁니다. 기자라는 본래 직업의 깊이도 더해지길 기대하는 마음으로 말입니다. 지금까지 그랬던 것 처럼 앞으로도 세상은 개발자가 바꿔나갈 테니까요.

sideway@bloter.net

기술을 이야기하지만, 사람을 생각합니다. [트위터] @Sideway_s, [페이스북] facebook.com/sideways86, [구글+] gplus.to/sideway [e메일] sideway@bloter.net