C6 html5를 이용한 스마트폰 웹 앱 프레임워크

이동훈

스마트폰게임서비스개발팀

2011년 10월 12일

HTML5를 이용한 스마트폰 웹 앱 프레임워크와

한게임 모바일 게임서비스

ⓒ 2011 NHN CORPORATION

목차

1. Overview 1.1 배경

2. Web-App 2.1 Hybrid App

2.2 컨텐츠 개발 방식

2.3 앱스러운 웹

2.4 문제점

3. Game 3.1 Target

3.2 Entity-Component System

3.3 Layers

3.4 GameOVEN Web

1. Overview

4 / 파워포인트 문서 사용 안내

대외비 1.1 배경

배경

스마트폰이 이슈가 되면서 각종 서비스나 게임들이 앱으로 제공

OS 환경에 맞게 따로 개발

업데이트가 즉각적이지 못함

스마트폰 브라우저들의 성능 향상 및 HTML5표준 지원

Entity-Component System기반의 HTML5/CSS3 게임 엔짂 필요

스마트폰 게임 개발에 중점을 둔 웹 개발 툴 필요

2. Web-App


대외비 2.1 Hybrid App

디바이스 의존적인 기능은 Hybrid App으로 지원 짂동

사운드

앨범

주소록

…

Hyb

rid A

pp

Web Content

WebView

HSP

Communicator

(native contents)

So

un

d

Alb

um

Sh

ake

Etc.

자체 정의한 프로토콜

Callback을 통한 응답

* PhoneGap과 같은 방식


대외비 2.2 컨텐츠 개발 방식

마크업 중심 (Markup-centric approach) 지원

자바스크립트를 HTML기반으로 제어하는 방식


대외비

앱스러운 웹을 만드려면?

Data와 View의 분리

페이지 젂환 효과

Preload

UI Components

2.3 앱스러운 웹


대외비 2.3 앱스러운 웹 (cont’d)

View와 Data의 분리 - DataTemplate

HTML



View와 Data의 분리 - DataTemplate

HTML

JSON



페이지 전환

DOM (body)

<div data-type="View"> <div class="toolbar"> <h1>Inko framework</h1> <ul class="rounded"> <li class="arrow“>list1</li> <li class="arrow">list2</li> </ul> </div> <div class="info“>Add this page to your home screen</div> </div>

Page1

DOM (body)


Page2

DOM (body)


Page3

http:// http:// http://



페이지 전환


Page1 (active)

DOM (body)


Page2 <div data-type="View"> <div class="toolbar"> <h1>Inko framework</h1> <ul class="rounded"> <li class="arrow“>list1</li> <li class="arrow">list2</li> </ul> </div> <div class="info“>Add this page to your home screen</div> </div>

Page3

AJAX

AJAX

AJAX



Preload View를 미리 로드하여 메모리 상에 적재 페이지 이동시 서버로의 요청을 최소화 하고 빠른 페이지 젂환

웹서버

클라이언트

페이지1 페이지2

페이지 이동시 웹서버에 요청해서 페이지 젂송

웹서버

클라이언트

페이지1 페이지2

미리 웹서버에서 페이지 젂송 받고 이동시에는 요청 안함



Flicker 컨텐츠를 좌/우 Swipe 모션으로 변경하는 기능 Methods

prev: function(time) next: function(time) go: function(target, time)

Events onFlicked({pos, count, entity, component}

Scroller 고정된 영역 내의 컨텐츠를 스크롤할 수 있는 기능 Methods

refresh: function() scrollToPage: function(pageX, pageY, time)

Events onScrollStart({event, entity, component}) onScrollMove({event, entity, component}) onScrollEnd({evernt, entity, component})



TabPanel 탭 버튺에 따라 컨텐츠를 변경하는 기능 Methods

select: function(index) setSelectCls: function(classname)

Events onTabSelected({selectedIndex, prevIndex,

entity, component})

DataTemplate Data(JSON)와 연동하여 Markup을 구성하는 기능 Methods

append: function(params, immediate) overwrite: function(params, immediate) insertfront: function(params, immediate) flush: function(type)



TabPanel 탭 버튺에 따라 컨텐츠를 변경하는 기능 Methods

select: function(index) setSelectCls: function(classname)

Events onTabSelected({selectedIndex, prevIndex,

entity, component})

DataTemplate Data(JSON)와 연동하여 Markup을 구성하는 기능 Methods

append: function(params, immediate) overwrite: function(params, immediate) insertfront: function(params, immediate) flush: function(type)


대외비 2.4 문제점

History 관리 (Ajax) 페이지 이동시 History를 관리하는 기능

Refresh시에도 History 유지 Anchor Tag의 HREF 속성을 사용한 경우에도 History 관리 URL Hash를 이용한 Browser의 Back / Forward 버튺 지원 URL Hash 기능 Turn on/off 옵션


대외비 2.4 문제점 (cont’d)

Javascript의 Scope 1개의 DOM을 공유하여 Markup의 ID나 변수/함수들의 Uniqueness가 보장되지 않음

페이지 구성 View는 반드시 data-type이 View인 DIV 태그로 감싸져야 함 현재 하나의 html파일이 하나의 View만 가질 수 있음

<div data-type=“View”> … <button onclick=“/*enco_call*/.add(1, 2)”> … </div>

/*enco_begin*/ ... function add(a, b) { … } … /*enco_end*/

Page 1

<div data-type=“View”> … <button onclick=“/*enco_call*/.add(1, 2)”> … </div>

/*enco_begin*/ ... function add(a, b) { … } … /*enco_end*/

Page 2


대외비 2.4 문제점 (cont’d)

Resource Manager 게임에선 이미지, 사운드등 리소스의 사이즈가 큼

웹의 특성상 웹 페이지에 접속할 때 마다 매번 리소스

를 다운 받아야 함 • 모바일 환경에선, Packet 사이즈 = 과금 • 느린 네트워크 환경

HTML5의 Application Cache, WebStorage를 이용해 리소스를 클라이언트에 설치

• 빠른 로딩 • 데이터 사용량 최소화 • 오프라인 모드 지원

Resource Data Resource

Data Resource Data

Resource Data

Install

Mobile device App

cache

Web SQL

Web storage

Reso

urce

M

an

ag

er

Web Content Web

Content Web

Content

3. Game


대외비 3.1 Target

온라인 웹 게임 개발

UI 프레임워크 / 게임 엔짂을 이용한 게임 개발

Entity-Component System

프레임워크에 최적화 된 개발 툴

CityVille 포트리스


대외비 3.2 Entity-Component System

Entity Game World (웹에서는 Page)안에 존재하는 객체 스스로 어떠한 일도 하지 않는 단순한 Container

Component 하나의 특징 또는 기능을 가짂 독립적인 구현체 서로 다른 기능을 가짂 Component들이 모여 Entity

를 구성하고 성격을 결정

Messaging Component갂의 의존성이 많아지는 문제를 보완하

고자 제안된 방법. 컴포넌트가 다른 컴포넌트에게 직접 요청하는 대싞,

Event를 발생시키면 Listening 하고 있던 컴포넌트가 있으면 이에 응답하는 방식


대외비 3.3 Layers

Markup Layer HTML Markup과 CSS3를 이용해 Entity를 렌더링

Canvas Layer Canvas를 이용해 Entity를 렌더링 Markup Entity에 비해 세밀한 제어 가능 (Pixel 단위의 충돌체크 등등)

Markup Layer Canvas Layer


대외비 3.3 GameOVEN Web

기능 Canvas/Markup 비주얼 편집, 자바스크립트 Code 편집 Debugging Preview


대외비 3.3 GameOVEN Web

Code Editor Auto-complete for HTML, CSS, Javascipt Intellisense for Javascript Template statements editing for Javascript (ex, for) Outlining for the tree structure for HTML, JSON Outlining for the function and variable names Realtime Syntax Error Highlight for Javascript


대외비 3.3 GameOVEN Web (cont’d)

Page Previewer Built-in browser (Google’s Chromium Embedded Framework)

Predefined preview profiles (iPhone 3/4, PC, custom profile, …)

Built-in local web server



Debugger Integrated debugger with IDE Implement Google V8 Debugger protocol Run / Stop / Continue Set / Remove / Handle breakpoints Watch variables and parameters Call Stack Step in / over / out



SVN Integrated with the project explorer Available under the “Team” menu of the contextual

menu of the project explorer Operations

Check in / out Update / Commit Update to revision Revert Clean-up Show log

Q/A

Thank you.

Technology

C6 html5를 이용한 스마트폰 웹 앱 프레임워크