c6 html5를 이용한 스마트폰 웹 앱 프레임워크
TRANSCRIPT
이동훈
스마트폰게임서비스개발팀
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
6 / 파워포인트 문서 사용 안내
대외비 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과 같은 방식
7 / 파워포인트 문서 사용 안내
대외비 2.2 컨텐츠 개발 방식
마크업 중심 (Markup-centric approach) 지원
자바스크립트를 HTML기반으로 제어하는 방식
8 / 파워포인트 문서 사용 안내
대외비
앱스러운 웹을 만드려면?
Data와 View의 분리
페이지 젂환 효과
Preload
UI Components
2.3 앱스러운 웹
9 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
View와 Data의 분리 - DataTemplate
HTML
10 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
View와 Data의 분리 - DataTemplate
HTML
JSON
11 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
페이지 전환
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)
<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>
Page2
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>
Page3
http:// http:// http://
12 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
페이지 전환
<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 (active)
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>
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
13 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
Preload View를 미리 로드하여 메모리 상에 적재 페이지 이동시 서버로의 요청을 최소화 하고 빠른 페이지 젂환
웹서버
클라이언트
페이지1 페이지2
페이지 이동시 웹서버에 요청해서 페이지 젂송
웹서버
클라이언트
페이지1 페이지2
미리 웹서버에서 페이지 젂송 받고 이동시에는 요청 안함
14 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
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})
15 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
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)
16 / 파워포인트 문서 사용 안내
대외비 2.3 앱스러운 웹 (cont’d)
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)
17 / 파워포인트 문서 사용 안내
대외비 2.4 문제점
History 관리 (Ajax) 페이지 이동시 History를 관리하는 기능
Refresh시에도 History 유지 Anchor Tag의 HREF 속성을 사용한 경우에도 History 관리 URL Hash를 이용한 Browser의 Back / Forward 버튺 지원 URL Hash 기능 Turn on/off 옵션
18 / 파워포인트 문서 사용 안내
대외비 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
19 / 파워포인트 문서 사용 안내
대외비 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
21 / 파워포인트 문서 사용 안내
대외비 3.1 Target
온라인 웹 게임 개발
UI 프레임워크 / 게임 엔짂을 이용한 게임 개발
Entity-Component System
프레임워크에 최적화 된 개발 툴
CityVille 포트리스
22 / 파워포인트 문서 사용 안내
대외비 3.2 Entity-Component System
Entity Game World (웹에서는 Page)안에 존재하는 객체 스스로 어떠한 일도 하지 않는 단순한 Container
Component 하나의 특징 또는 기능을 가짂 독립적인 구현체 서로 다른 기능을 가짂 Component들이 모여 Entity
를 구성하고 성격을 결정
Messaging Component갂의 의존성이 많아지는 문제를 보완하
고자 제안된 방법. 컴포넌트가 다른 컴포넌트에게 직접 요청하는 대싞,
Event를 발생시키면 Listening 하고 있던 컴포넌트가 있으면 이에 응답하는 방식
23 / 파워포인트 문서 사용 안내
대외비 3.3 Layers
Markup Layer HTML Markup과 CSS3를 이용해 Entity를 렌더링
Canvas Layer Canvas를 이용해 Entity를 렌더링 Markup Entity에 비해 세밀한 제어 가능 (Pixel 단위의 충돌체크 등등)
Markup Layer Canvas Layer
24 / 파워포인트 문서 사용 안내
대외비 3.3 GameOVEN Web
기능 Canvas/Markup 비주얼 편집, 자바스크립트 Code 편집 Debugging Preview
25 / 파워포인트 문서 사용 안내
대외비 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
26 / 파워포인트 문서 사용 안내
대외비 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
27 / 파워포인트 문서 사용 안내
대외비 3.3 GameOVEN Web (cont’d)
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
28 / 파워포인트 문서 사용 안내
대외비 3.3 GameOVEN Web (cont’d)
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.