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

목차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

1.1 배경 대외비  배경  스마트폰이 이슈가 되면서 각종 서비스나 게임들이 앱으로 제공  OS 환경에 맞게 따로 개발  업데이트가 즉각적이지 못함  스마트폰 브라우저들의 성능 향상 및 HTML5표준 지원  Entity-Component System기반의 HTML5/CSS3 게임 엔짂 필요  스마트폰 게임 개발에 중점을 둔 웹 개발 툴 필요4 / 파워포인트 문서 사용 안내

2. Web-App

2.1 Hybrid App 대외비  디바이스 의존적인 기능은 Hybrid App으로 지 Web Content 원 자체 정의한 Callback을 통한  짂동 프로토콜 응답  사운드 WebView  앨범 Hybrid App  주소록 Communicator  … (native contents) HSP Sound Shake Album Etc. * PhoneGap과 같은 방식6 / 파워포인트 문서 사용 안내

2.2 컨텐츠 개발 방식 대외비  마크업 중심 (Markup-centric approach) 지원  자바스크립트를 HTML기반으로 제어하는 방식7 / 파워포인트 문서 사용 안내

2.3 앱스러운 웹 대외비  앱스러운 웹을 만드려면?  Data와 View의 분리  페이지 젂환 효과  Preload  UI Components8 / 파워포인트 문서 사용 안내

2.3 앱스러운 웹 (cont’d) 대외비  View와 Data의 분리 - DataTemplate HTML9 / 파워포인트 문서 사용 안내

2.3 앱스러운 웹 (cont’d) 대외비  View와 Data의 분리 - DataTemplate HTML10 / 파워포인트 문서 사용 안내 JSON

2.3 앱스러운 웹 (cont’d) 대외비  페이지 전환 DOM DOM DOM (body) (body) (body) http:// http:// http:// <div data-type="View"> <div data-type="View"> <div data-type="View"> <div class="toolbar"> Page1 <div class="toolbar"> Page2 <div class="toolbar"> Page3 <h1>Inko framework</h1> <h1>Inko framework</h1> <h1>Inko framework</h1> <ul class="rounded"> <ul class="rounded"> <ul class="rounded"> <li class="arrow“>list1</li> <li class="arrow“>list1</li> <li class="arrow“>list1</li> <li class="arrow">list2</li> <li class="arrow">list2</li> <li class="arrow">list2</li> </ul> </ul> </ul> </div> </div> </div> <div class="info“>Add this page to your <div class="info“>Add this page to your <div class="info“>Add this page to your home screen</div> home screen</div> home screen</div> </div> </div> </div>11 / 파워포인트 문서 사용 안내

2.3 앱스러운 웹 (cont’d) 대외비  페이지 전환 DOM (body) AJAX AJAX AJAX <div data-type="View"> <div data-type="View"> <div data-type="View"> <div class="toolbar"> Page1 <div class="toolbar"> Page2 <div class="toolbar"> Page3 <h1>Inko framework</h1> (active) <h1>Inko framework</h1> <h1>Inko framework</h1> <ul class="rounded"> <ul class="rounded"> <ul class="rounded"> <li class="arrow“>list1</li> <li class="arrow“>list1</li> <li class="arrow“>list1</li> <li class="arrow">list2</li> <li class="arrow">list2</li> <li class="arrow">list2</li> </ul> </ul> </ul> </div> </div> </div> <div class="info“>Add this page to your <div class="info“>Add this page to your <div class="info“>Add this page to your home screen</div> home screen</div> home screen</div> </div> </div> </div>12 / 파워포인트 문서 사용 안내

2.3 앱스러운 웹 (cont’d) 대외비  Preload  View를 미리 로드하여 메모리 상에 적재  페이지 이동시 서버로의 요청을 최소화 하고 빠른 페이지 젂환 페이지1 페이지2 페이지1 페이지2 클라이언트 클라이언트 웹서버 웹서버 페이지 이동시 웹서버에 요청해서 페이지 젂송 미리 웹서버에서 페이지 젂송 받고 이동시에는 요청 안함13 / 파워포인트 문서 사용 안내

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})14 / 파워포인트 문서 사용 안내

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)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.4 문제점 대외비  History 관리 (Ajax)  페이지 이동시 History를 관리하는 기능  Refresh시에도 History 유지  Anchor Tag의 HREF 속성을 사용한 경우에도 History 관리  URL Hash를 이용한 Browser의 Back / Forward 버튺 지원  URL Hash 기능 Turn on/off 옵션17 / 파워포인트 문서 사용 안내

2.4 문제점 (cont’d) 대외비  Javascript의 Scope  1개의 DOM을 공유하여 Markup의 ID나 변수/함수들의 Uniqueness가 보장되지 않음  페이지 구성  View는 반드시 data-type이 View인 DIV 태그로 감싸져야 함  현재 하나의 html파일이 하나의 View만 가질 수 있음 <div data-type=“View”> <div data-type=“View”> … … <button onclick=“/*enco_call*/.add(1, 2)”> <button onclick=“/*enco_call*/.add(1, 2)”> … … </div> </div> /*enco_begin*/ /*enco_begin*/ ... ... function add(a, b) { … } function add(a, b) { … } … … /*enco_end*/ /*enco_end*/ Page 1 Page 218 / 파워포인트 문서 사용 안내

2.4 문제점 (cont’d) 대외비  Resource Manager Resource Resource  게임에선 이미지, 사운드등 리소스의 사이즈가 큼 Data Resource Data Resource Data Data  웹의 특성상 웹 페이지에 접속할 때 마다 매번 리소스 를 다운 받아야 함 • 모바일 환경에선, Packet 사이즈 = 과금 • 느린 네트워크 환경 Install  HTML5의 Application Cache, WebStorage를 이용해 리소스를 클라이언트에 설치 Mobile device • 빠른 로딩 Web App • 데이터 사용량 최소화 Content Web cache Resource Manager • 오프라인 모드 지원 Conten Web tWeb storage Content Web SQL19 / 파워포인트 문서 사용 안내

3. Game

3.1 Target 대외비  온라인 웹 게임 개발  UI 프레임워크 / 게임 엔짂을 이용한 게임 개발  Entity-Component System  프레임워크에 최적화 된 개발 툴 CityVille 포트리스21 / 파워포인트 문서 사용 안내

3.2 Entity-Component System 대외비  Entity  Game World (웹에서는 Page)안에 존재하는 객체  스스로 어떠한 일도 하지 않는 단순한 Container  Component  하나의 특징 또는 기능을 가짂 독립적인 구현체  서로 다른 기능을 가짂 Component들이 모여 Entity 를 구성하고 성격을 결정  Messaging  Component갂의 의존성이 많아지는 문제를 보완하 고자 제안된 방법.  컴포넌트가 다른 컴포넌트에게 직접 요청하는 대싞, Event를 발생시키면 Listening 하고 있던 컴포넌트 가 있으면 이에 응답하는 방식22 / 파워포인트 문서 사용 안내

3.3 Layers 대외비  Markup Layer  HTML Markup과 CSS3를 이용해 Entity를 렌더링  Canvas Layer  Canvas를 이용해 Entity를 렌더링  Markup Entity에 비해 세밀한 제어 가능 (Pixel 단위의 충돌체크 등등) Canvas Layer Markup Layer23 / 파워포인트 문서 사용 안내

3.3 GameOVEN Web 대외비  기능  Canvas/Markup 비주얼 편집, 자바스크립트 Code 편집  Debugging  Preview24 / 파워포인트 문서 사용 안내

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 Javascript25 / 파워포인트 문서 사용 안내

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 server26 / 파워포인트 문서 사용 안내

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 / out27 / 파워포인트 문서 사용 안내

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 log28 / 파워포인트 문서 사용 안내

Thank you.

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

by deview on Oct 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

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