[5기 강북 강현호] HTML5 게임 프레임워크 LimeJS Introduction

HTML5 는 미래형 융복합 서비스를 위한 핵심적 웹표준기술 이며, 앞으로 급격히 성장할 것으로 기대되는 IoT, 웨어러블 기기 등의 핵심 기반 기술입니다. 디바이스의 성능이 향상되면서 점점더 각광받고 있고, 차세대 운영체제 중 하나로 손꼽히는 타이젠 OS 에서도 HTML5 기반의 어플리케이션을 OS 단에서 지원하고 있습니다. HTML5 의 가장 큰 장점은 아마 '호환성' 일겁니다. 수없이 많은 디바이스가 양산되고 있는 현재 하나의 어플리케이션으로 어떤 디바이스에서도 동일한 화면과 기능을 사용할 수 있다는 점은, 생산성이나 사용자 편의성에 있어서 정말 큰 장점이 아닐 수 없습니다.

 이런 장점 때문에 HTML5 기반의 프레임 워크들도 많이 제작되고 있습니다. 제가 오늘 소개해 드릴 프레임 워크는 HTML5 기반 게임 프레임 워크입니다. 누가 뭐라해도 게임은 소프트웨어와 컴퓨터 산업 발전에 가장 큰 기여를 한 컨텐츠 중 하나일 겁니다. 게임개발 과정을 통해 HTML5 기술도 많이 발전하지 않을까 하는 생각이 듭니다. 

HTML5 기반 프레임 워크는 엄청나게 많습니다. 그냥 google에 검색만 해봐도 수십개의 HTML5 기반 프레임 워크를 찾을 수 있습니다. 그 중 저는 LimeJS 를 소개하고자 합니다. 여러 HTML5 기반 프레임 워크를 사용해 봤지만 사용성이나 성능면에서 가장 문안한 프레임 워크가 아닌가 생각되서 입니다. 

이론을 공부하고, LimeJS의 프레임 워크를 분석하는 것도 의미가 있겠지만 이 프레임 워크를 써보는게 우선이라 생각됩니다. 그래서 오늘은, LimeJS 를 설치하고, Helloworld 를 찍어 보기로 하겠습니다. 

편의를 위해 설치과정은 반말로 진행하겠습니다. 

LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.

http://www.limejs.com/

LimeJS 를 설치하기 전에 환경을 구축해 보자.

설치를 위해서는 Python, git, subversion 이 필요하다.

<Download>

먼저 python 을 다운 받는다. 

www.python.org 

그다음 Git

www.git-scm.com

그다음 subversion 

subversion 은 binary package 의 visual svn 을 받으면 된다. 

subversion.apache.org

다운은 끝났고, 이제 설치만 하면 된다. 

<Installation>

git 부터 설치한다. 

특별한 사항은 없고 LimeJS init 을 윈도우즈 CMD 창에서 실행시킬 것이므로 인스톨 시 git 이 command prompt 에서 동작할 수 있도록 setting 해 줘야 한다. 

그 다음, python 설치, python 은 귀찮게도 환경설정을 해줘야 한다. 설치 후, 환경설정에 들어가서 설치한 경로를 시스템 변수의 Path 에 추가해 주자.

그 다음, subversion 설치 python 과 같이 환경설정을 해줘야 한다. 설치후, cmd 창에서 svn 을 쳐보자 "Type 'svn help' for usage. " 라는 문구가 출력되면 설치 성공

Python 도 마찬가지로 설치와 환경변수 설정이 잘 되었는지 확인해 보기 위해 CMD 창에 python 이라고 쳐보자 Python 이 실행되면 성공.

이제 환경은 갖춰 졌으니, LimeJS 를 설치해 보자. 

http://www.limejs.com/

다운을 받고, 원하는 위치에 압축을 푼 뒤, 폴더의 이름을 limejs로 바꾸자, 별다른 이유는 없다. 깔끔하니까. 

cd limejs 명령어로 limejs 폴더로 진입, bin 폴더의 lime.py 파일을 init 옵션을 줘서 실행시킨다. 이작업을 통해  box2d, closure 등 limejs 가 사용하는 컴포넌트 들을 다운받고, 초기 설정을 진행한다. 

이제, 설정은 끝났고 hello world 를 찍어보자. init 했을 때와 마찬가지로, bin\lime.py 파일을 실행 시키는데 이번에는 create 옵션을 실행시킨다. lime.py create hello 라고 하면, hello 라는 프로젝트를 생성하라는 명령어 이다. 

hello 폴더가 생성된 것을 확인 할 수 있다. 

폴더 안의 hello.html 파일을 실행시키면, 다음과 같은 화면을 확인할 수 있다. 

<Compile>

Javascript 의 크기는 웹앱의 성능을 결정하는 중요한 요소다. javascript의 양이 많을 수록, 웹앱의 초기 로드 속도가 느려진다 때문에 대부분의 상용 웹사이트 들이 javascript compress 를 통해 자바스크립트의 양을 최소화 하여 사용하고 있다. limejs 는 고맙게도 자체적으로 이기능을 포함하고 있다.

위에서 언급한 성능적 이슈 말고도, limejs 는 배포시, 반드시 컴파일을 해야 하는데, google 의 closure 라이브러리를 활용하기 때문에 컴파일 없이는 closure 환경이 동일하게 구축되어 있지 않은 타 환경에서 구동 시킬 수 없기 때문이다. 

그럼 limejs Compile 을 해보자. 

먼저 리소스 즉, .js 파일이나 이미지 파일이 추가 되었다면 update 명령을 통해 limejs 에 프로젝트의 상태가 변경 되었음을 알려 줘야 한다. 

bin\lime.py update 명령을 수행한다. 

그 다음 bin\lime.py build hello -o gear_pet\compiled\hello.js 명령을 수행해서 compiled 된, 소스를 생성한다. 

컴파일이 완료되면, html의 closure 관련 include 를 주석 처리하고, compiled 된 소스를 include 해준다. 

이제 compiled 된 js 파일만 있으면 어떤 웹 환경에서든 limejs 로 구현한 프로젝트를 구동 시킬 수 있다. 

수고하셨습니다!!!