2048 게임앱 만들어보기(feat. 조코딩 유튜브) 1

조코딩이라는 유튜브 채널 알고 계신가요?

쉬운 코딩을 알려주는 채널이고 구독자가 10만명 이상이 되는 인기가 높습니다. 코딩도 잡다한 것을 빼고 따라해볼 수 있도록 설명과 실습을 곁들여 쉽게 알려주는데요. 막상 해보면 부딪히는 것이 생기지만 그래도 정말 코딩을 모르는 저에게도 아주 큰 도움이 됩니다. 

 

https://www.youtube.com/channel/UCQNE2JmbasNYbjGAcuBiRRg

조코딩 JoCoding

 

조코딩 채널이 유명한 이유중에 하나가 동물상 테스트 웹과 앱을 따라서 만들어볼 수 있고 또 재미있는 동물상테스트 웹사이트가 상당히 인기 있어서일텐데요. 저는 이 채널중에서 오늘은 앱을 빠르게 만들어보는 것을 해보려고 합니다. 제가 해보려는 것은 웹에서 돌아가는 간단한 게임을 앱으로 만들어 보는 거예요. 

 

동물상테스트를 따라해 본 것은 아니고, 프로젝트를 만들고 앱으로 만드는 과정을 해봤는데요. 조코딩님은 몇분만에 하시던데 저는 영상을 보다가 웹에 소스 추가하다가 구름IDE 가입하고 또 따라하고 ... 시간이 많이 걸리더라구요. 그래도 결과물이 나온다는 것에 상당히 만족스럽습니다.

 

2048 html5 웹게임으로 게임앱 만들어보기

 

저는 동물상테스트는 아니고 브라우저에서 바로 실행할 수 있는 간단한 게임소스를 구해서 먼저 웹에 올려봤습니다. 2048이라는 웹게임 앱입니다.  2048은 숫자맞추기 퍼즐게임 같은 거예요. html5 web game이라는 것들이 더 복잡한 것들도 있고 단순한 것들도 있는데요. 너무 무거운 것은 어려울 듯해서 비교적 가볍고 잘 되는 2048 게임으로 해봤습니다. 

 

조코딩님을 따라하더라도 잘 모르는 것도 있고 해서 전부다 하긴 어렵더라구요. 그래서 시리즈로 올려보려고 하는데요.

---

1. html5 웹 게임 소스 구하기

2. 내 홈페이지에 게임소스 올리기

3. 구름 IDE 계정 만들기

4. 구름 IDE에서 프로젝트 만들기

5. 리액트 프로젝트로 게임 웹페이지 가져오기

6. expo로 앱테스트하기

---

이렇게 진행했습니다. 

이후엔 expo로 테스트한 것을 

정식 앱으로 구성하고(안드로이드, IOS) 구글플레이와 앱스토어에 출시하는 것을 진행해보려 합니다.

 

★ html5 웹게임소스 구하기

인터넷에 검색을 해보면 앱을 설치하지 않아도 웹에서 플레이 할 수 있는 게임이 많이 나옵니다. 그중에서는 소스가 공개되어 있는 것들도 있는데요, 제 컴퓨터 환경과 웹호스팅 환경이 열악해서인지 실행이 완벽하지 않은 것들도 많습니다. 그래도 가볍고 실행도 잘 되는 앱들도 있으니 다음에 리스트를 만들어서 올려보겠습니다. 저는 그중에서 2048이라는 간단한 퍼즐게임을 구했습니다. GPL라이센스로 공개되어 있고 MIT 라이센스라고 해서 누구나 사용할 수 있게 되어 있습니다. 

 

2048 html5 game / 스토리블럭 

게임화면은 이렇게 되어 있고,  PC에서는 방향키를 이용해서 나란히 있는 같은 숫자를 이리저리 밀어서 합산을 해서 2048을 만들면 승리하는 게임입니다. 

 

http://storyblock.kr/game/2048/

2048

 

여기서 테스트 해보실 수 있고 http://git.io/2048

2048

개발자 홈페이지에서 해보셔도 좋겠습니다. 깃허브에 공개되어 있어요.

 

제 웹호스팅은 테스트라서 트래픽이 제한되어 있기 때문에 언제 사이트가 멈출지 모르니 위 깃허브를 이용하시면 원활히 이용해 보실 수 있을 것 같습니다.

 

깃허브에서 소스를 내려받아서 FTP로 소스를 올려주고 URL로 접속을 하면 잘 돌아갑니다. 게임을 해볼 때 살짝 그래픽이 깨지는 경우가 있는데 크게 신경쓰이지는 않습니다.

 

★ 구름 IDE 

게임이나 앱을 개발하려면 여러가지 개발환경이 구축되어 있어야 합니다. 사용하는 개발 언어에 따라서 관련 된 라이브러리나 소프트웨어들이 설치되어 있어야하는데 어떻게 관리해야하는지도 잘 모르고 컴퓨터 환경이 썩좋지 않을 수도 있는데요. IDE 는 이런 것을 온라인으로 개발환경을 구축해 놓은 컴퓨터처럼 이용할 수 있습니다. 마치 구글의 구글DOCS를 사용하는 것과 같아요.  구글DOCS는 웹브라우저로 오피스 프로그램 없이 문서작성 PPT 엑셀 같은 걸 할 수 있잖아요. 구름IDE 로는 개발을 할 수 있는 것이죠. 

조코딩을 통해서 알게된 구름IDE 를 이용해서 만들어보기로 했습니다. 

 

https://ide.goorm.io/

구름IDE - 설치가 필요없는 통합개발환경 서비스

사이트에 들어가서 계정을 만들고 이메일 인증을 거친 후에 로그인을 하면 됩니다. 처음에 접속하면 영문으로 나올 수 있는데요, 우측상단에 보면 Language버튼이 있어서 한글로 변경할 수 있습니다. 구름아이디이는 국내 회사네요. 멋집니다!

 

구름IDE / 스토리블럭

구름IDE 계정 로그인을 하고 우측에 보면 대시보드 버튼이 있습니다.

대시보드로 들어가서 컨테이너를 생성해줍니다. 컨테이너라는 것은 개발을 위한 가상의 컴퓨터라고 해요. 웹으로 접속해서 쓸 수 있는 개발도구들이 설치된 컴퓨터를 하나 장만 했다 생각하면 될 것 같습니다. 

• 컨테이너이름 (abc1234 ..)
• 설명(없어도 됩니다)
• 지역(서울 선택)
• 공개범위 (Public)
• 템플릿 (Templete)
• 배포 (Not used)

 등등을 선택 또는 입력하고 나서 (대부분은 그대로 선택된 상태를 유지) 조코딩 유튜브에서 알려주는 대로 소프트웨어 스택에서는 React Native로 선택합니다.

 

앱을 개발하는 가장 빠른 방법은 홈페이지를 그대로 웹뷰(Webview)라는 것으로 보여주는 방법입니다. React Native는 웹뷰로 웹사이트(홈페이지)를 감싸서 앱의 형태로 보여주는 역할을 합니다. 소스코드들은 알아서 적용이되고 대신 웹에서 모든 기능이 정상적으로 작동을 하고 있어야 합니다.

 

선택이 끝나고 "생성"버튼을 눌러줍니다.

조코딩님은 순식간에 생성이 되던데, 저는 무료버전으로 해서 그런지 생성되는 시간이 좀 걸리더라구요.

어쨌든 좀 기다리면 생성이 되고 

구름 IDE 컨테이너 생성 / 스토리블럭

생성된 구름IDE 컨테이너 / 스토리블럭

완료가 되면 위와 같이 개발환경이 나타나게 됩니다.

 

리액트네이티브를 이용해서 뭔가를 하기 전에 앞서 설치를 해줘야할 도구가 있는데요. 내 컴퓨터에 설치하는 것이 아니라 생성된 컨테이너에서 설치하는 것입니다. 아래쪽에 있는 프롬프트가 떠 있는 곳이 마치 서버에서 명령어를 입력하는 것과 같은 곳으로 여기서 명령어를 넣으면 실행도 되고 설치도 되고 그런 동작이 일어납니다. 조코딩님이 알려주는대로 웹에서 Expo라는 React Native의 개발을 도와주는 도구를 설치합니다. 

 

구글에서 Expo react native webview를 검색하면 아래의 사이트가 나옵니다.

 

https://docs.expo.io/versions/latest/sdk/webview/

WebView - Expo Documentation

expo install react-native-webview

명령어를 입력하고 expo를 설치합니다. 요것도 살짝 시간이 걸립니다. 

 

설치하고 아래의 소스를 복사합니다.

 

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20 }} />;
  }
}

위의 소스를 가져다가 App.js에 전부 선택하고 복사붙여 넣기를 합니다.

위에서 보시면 Weview source= 부분에 https://exp.io 대신에 앱에서 보여질  내 홈페이지의 주소를 넣으면 되는데요. 저는 http://storyblock.kr/game/2048 을 넣어줬습니다.

이렇게 하면 준비가 끝납니다. 이걸 컨테이너에서 실행(플레이)시켜줍니다. 실행은 우측상단에 있는 플레이버튼 같이 생긴 걸 눌러줍니다. 

 

그러면 또 시간이 좀 걸리면서 명령어입력 쪽에 뭔가 생성이 되는데요.  QR태그도 나타납니다.

 

저는 근데 뭔가 조코딩님하곤 다르게 제대로 작동하지 않아서 여러번 플레이버튼을 눌렀습니다.(웹게임 코드문제일 수도 있어요)

위 이미지에 보시는 것처럼 이 QR코드를 이용해서 앱 테스트를 하게 되는데요.

테스트를 하기 위해서 안드로이드나, 아이폰에 앱이 필요합니다. 각각의 스토어에서 expo라고 검색하면 앱을 설치할 수 있습니다.

 

안드로이드에선 앱내에서 QR 코드를 찍으면 되고, 아이폰은 앱을 설치한 후 아이폰 기본 카메라 앱으로 QR 코드를 찍으면 됩니다.

 

저는 앱이 실행되는 동안 시간이 꽤 걸리더라구요. 특히 아이폰은 아이폰6여서 그런지 시간이 꽤 걸리고 경고메시지 같은 것도 나왔습니다.

경고메시지는 무시하고 앱에서 try again하니까 정상적으로 앱이 실행되고 앱에서 게임화면이 보였습니다.

 

아이폰 EXPO 테스트 앱에서 보이는 2048 게임화면 / 스토리블럭

 

2048 HTML5 웹게임을 이용한 앱만들어보기

2048 Game Html5 - React Native - Expo Test / 스토리블럭

 

마치며,

오늘은 html5 무료 소스를 구해서 게임을 웹사이트에 올리고 REACT 웹뷰를 이용해 앱으로 생성하는 것까지 해봤습니다. 간단하면서도 잘 모르는 것이라 헤매거나 시간이 좀 걸릴 때, 예기치 않은 에러 메시지를 만났을 때 해결방법을 몰라서 당황하기도 했는데요. 전체적으로 다시 시도 했을 때 아직까지는 큰 문제는 아니라서 그대로 여기까지 마무리했습니다. 다음번엔 이렇게 테스트된 것을 이용해서 정식 앱으로 만들고 스토어에 올리는 것도 따라해보도록 하겠습니다.

 

봐주셔서 고맙습니다.