모바일 환경이 다가와서 우리의 개발 환경도 우리가 생활 하는 일상을 변화 하고 있습니다. 앞으로 스마트 단말들이 성장하면서 웹앱의 진화도 빠르게 될 것으로 예측 됩니다. 2년내 Pad 기반의 컴퓨팅 환경이 우리의 대중을 사로 잡지 않을까 하는 예측을 해보며 앞으로 필요한 모바일 서비스의 중요한 부분은 Widget이 되지 않을까 합니다. .. 감사합니다.

1. 모바일전략과 웹앱
WEB APP
기술 개발실 최두립
COUPLEWITH@INTERPARK.COM

2. I. 모바일 환경으로본 웹앱의 미래
1.모바일 플랫폼 동향
• 모바일 플랫폼 동향
• 플랫폼의 시대
2.웹 환경의 변화와 미래
• 2013 IT 트랜드와 모바일
• Future is Mobile
2

3. II. 웹앱 개발 기술과 문제 극복
3.모바일과 HTML5
모바일 환경의 HTML5

웹앱기술의 한계


웹앱 성능 개선 기술
4.웹앱개발 프레임웍


웹앱개발툴
Javascript 프레임웍
5.VM을 활용한 안드로이드 웹개발
3

4. INTRO MOVIE (1)
Did You Know 3.0
Show
• Social networking is exploding
• Knowledge is exploding
• Time to market is evaporating
• Computing power is exploding
http://tech-clarity.com/future-manufacturing-plm/1368
4

5. I. 모바일 환경으로본 웹앱의 미래
1.모바일 플랫폼 동향
• 모바일 플랫폼 동향
• 플랫폼의 시대
2.웹 환경의 변화와 미래
•
2013 IT 트랜드와 모바일
•
Future is Mobile
5

6. 모바일 환경의 개념
1.모바일 플랫폼 동향
 모바일 장치나 정보 기기를 제어하는 운영체제 (Wikipedia)
 모바일 OS ≠ 스마트폰OS, 하지만 동일한 개념으로 이용.
* MWC 2013을 통해 바라본 차세대 모바일OS 생태계 전망 2013.03.28
6

7. 모바일 환경 : 대중화 시대
* MWC 2013을 통해 바라본 차세대 모바일OS 생태계 전망 2013.03.28
1.모바일 플랫폼 동향
7

8. 모바일 환경 : OS 환경 변화
• 폐쇄적, 라이선스 형태, 불안정성, OS제작사-기기 제조사 간 분리
• 개방적 라이선스 , OS, 개발툴, Store 등 Virtical Platform 생태계
8

9. 모바일 환경 : OS 현황
1.모바일 플랫폼 동향
[영국의 '아이크로싱(iCrossing)]
http://connect.icrossing.co.uk/2013-mobile-market-share-infographic_10062
9

10. 모바일 환경 : 2015 ?
1.모바일 플랫폼 동향
Android, iOS, Windows
(80.6%)
Market Share
Predicted
2011
Predicted
2015
Android
39.5%
45.4%
iOS
15.7%
15.3%
Windows
Phone
5.5%
20.9%
BlackBerry
14.9%
13.7%
Symbian
20.9%
0.2%
Others
3.5%
4.6%
10

11. 모바일 플랫폼
1.모바일 플랫폼 동향
Platform !
H/W
OS
(s/w)
service
융합
11

12. 모바일 플랫폼
1.모바일 플랫폼 동향
Android
iOS
WebOs
Windows
Phone
Tizen
주도기업
Google
Apple
LGE
MicroSoft
Samsung
시장 점유율
75.0%
17.3%
<0.1%
3.2%
최종버전
4.2.2
6.1.3
2.2.4
8
운영체제
Linux
Darwin
Linux
Window s 8
Linux
라이선스
Open
Source
Closed
Source
Open
Source
Closed
Source
Open
Source
WebBrowser
Engine
WebKit
WebKit
WebKit
Trident
WebKit2
패키지관리
APK
iTunes
App Catalog
Zune Software
개발언어
C++,java
C, C++,
Objective-C
C
C#, VB.NET,
Silverlight,
native C/C++,
Html5, c,c++
SDK/ IDE
Android SDK
Eclipse
iOS SDK
Xcode
WP 8 SDK
Visual Studio
Tizen-SDK
Tizen IDE
개발자 수수료
$25
(Google Play )
$99/year
http://en.wikipedia.org/wiki/List_of_mobile_software_distribution_platforms (2013.6)
$99/year
(100 free apps)
12

13. 2013 새로운 플랫폼의 개막
 Ubunto Touch (2013.2)
1.모바일 플랫폼 동향
Tizen (2013.5, v2.1)
• Ubuntu TV, Ubuntu for Android
• C, C++, QML, HTML5
• Orange, NTT DoCoMo, Samsung,
Huawei ,Intel
• HTML5 /W3C, Tizen Web APIs
WebApp
 Firefox OS (2013.2, v1.0)
•
•
•
•
Chinese ZTE, LGE, Huawei ,TCL
Boot to Gecko
HTML5
JavaScript ,open web APIs
 WebOS(2012.1, v3.0.5)
• LGE, HP
• HTML5, C, C++
13

14. 모바일 플랫폼
1.모바일 플랫폼 동향
Platform 시대
H/W
OS
(s/w)
service
융합
14

15. IT 산업의 변화 : 융합,결합,연결
1.모바일 플랫폼 동향
15

16. IT 산업의 변화 :지식(K),가치 (V)1.모바일 플랫폼 동향
플랫폼
지식화
정보화
인프라
16

17. I. 모바일 환경으로본 웹앱의 미래
1.모바일 플랫폼 동향
• 모바일 플랫폼 동향
• 플랫폼의 시대
2.웹 환경의 변화와 미래
•
2013 IT 트랜드와 모바일
•
Future is Mobile
17

18. 18

19. 2013 IT 전략 기술 전망
2.웹 환경의 변화와 미래
• Tizen
• Web-app in desktop
• IoT ( internet of thngs )
M2M : Machine 2
Machine
• BODY
Bring on your device
스마트폰과 PC를 병행
• 창조경제
• 비용절감 -> 가치창출
지식 사회, 지식 혁신
(노나카이쿠치로 SECI 모델
(Social,Externalization
Combiation,Internalization)
• CPNT
(Content,Platform ,
Network, Terminal)
19

20. 2013 IT 4대 메가 트렌드
http://www.microsoft.com/korea/Press/pressroom/2013/01/02.aspx
2.웹 환경의 변화와 미래
20

21. 모바일이 미래 !
2.웹 환경의 변화와 미래
Mobile is Eating the World!
• http://www.slideshare.net/bge20/2013-05-bea (Mobile is Eating the World by Benedict Evans, Digital at BookExpo America (BEA)
• http://www.globalnerdy.com/2013/06/17/mobile-is-eating-the-world/
21

22. 웹 환경의 변화
2.웹 환경의 변화와 미래
Web Browsers
Chrome
Firefox
36.2%
Operating Systems
Screen Resolutions
17.71%
1
Windows 7
43.10%
1
1366x768
19.15%
2
Chrome 27
8.45%
2
Windows XP
20.99%
2
1024x768
12.17%
3
Firefox 20
7.43%
3
iOS
9.31%
3
1280x800
8.82%
Safari 6.1
6.31%
4
Apple OS X
8.40%
4
1920x1080
6.24%
5
Internet Explorer 8
6.18%
5
Windows Vista
4.73%
5
1280x1024
6.16%
6
Internet Explorer 9
5.71%
6
Android
4.52%
6
1440x900
5.35%
7
Firefox 21
5.60%
7
Windows 8
4.26%
7
768x1024
4.68%
8
Internet Explorer 7
4.72%
8
Linux
2.73%
8
1600x900
3.85%
9
IE 7.8.9
16.6%
Chrome 26
4
2013.5
1
Internet Explorer10
4.40%
9
BlackBerry
0.59%
9
320x480
3.48%
3.42%
10 Windows 2003
0.25%
10
1680x1050
2.96%
10 Safari 6
Operating Systems
Web Browsers
Screen Resolutions
Internet Explorer 7
32.02%
1
Windows XP
74.32%
1
1024x768
40.15%
2
Internet Explorer 6
27.55%
2
Windows Vista
14.21%
2
1280x800
16.54%
Firefox 3
15.11%
3
Apple OS X
5.35%
3
1280x1024
15.10%
4
Firefox 2
14.55%
4
Windows 2000
2.16%
4
1440x900
6.49%
5
Firefox 1.5
1.92%
5
Linux
2.13%
5
800x600
5.18%
6
Safari 3.1
1.18%
6
Windows 2003
0.71%
6
1680x1050
4.61%
7
Safari 3
0.81%
7
Windows 98
0.56%
7
1152x864
3.24%
8
Opera 9.2
0.69%
8
Windows ME
0.23%
8
1920x1200
1.45%
9
Mozilla 1.9
0.58%
9
SymbianOS
0.13%
9
1280x768
1.43%
10
2008.5
1
3
IE 6.7
59.5%
Safari 2
0.51%
10
Unknown Mac
0.05%
10
1280x960
1.09%
http://www.w3counter.com/globalstats.php (2013.5)
22

23. 웹 환경의 변화
2.웹 환경의 변화와 미래
HTML5 환경
= 51.5%
2013.5
2008.5
HTML5= 0%
http://www.w3counter.com/globalstats.php (2013.5)
23

24. 웹 VS 모바일 : 시장 동향
2.웹 환경의 변화와 미래
1.86billion phones and 53% of them will be smartphones. in
2013.
CCS Insight predicts.
http://www.globalnerdy.com/2013/06/17/mobile-is-eating-the-world/#sthash.M6AoyOLp.dpuf
24

25. 웹 VS 모바일 : 시장 동향
2.웹 환경의 변화와 미래
1 in 3 American adults owns a tablet (2012.12)
•
•
Adults ages 35-44 (49%) /College graduates (49%)
3% of adults said they owned a tablet (2010.5)
http://pewinternet.org/Reports/2013/Tablet-Ownership-2013/Findings.aspx
25

26. 웹 VS 모바일 : 시장 동향
2.웹 환경의 변화와 미래
The Future is Mobile
http://pewinternet.org/Reports/2013/Tablet-Ownership-2013/Findings.aspx
26

27. 모바일의 개념 변화
2.웹 환경의 변화와 미래
The Future is Mobile
Mobility
Mobile
App
Tablet
PC
Smart
phone
Web
Tv
Etc.
WEB + APP
27

28. 모바일의 개념 변화
The Future is Mobile
APP
WEB
Widget
28

29. 2부
29

30. II. 웹앱 개발 기술과 문제 극복
3.모바일과 HTML5
모바일 환경의 HTML5



웹앱기술의 한계
웹앱 성능 개선 기술
4.웹앱개발 프레임웍
 웹앱개발툴
 Javascript 프레임웍
5.VM을 활용한 안드로이드 웹개발
30

31. WHY MOBILE !
Mobile 개발
개발 요소
성능 문제
31

32. 모바일 환경의 HTML5
32

33. WEBAPP 알아야 할 것 …
화면사이즈
Touch
Mobile
Network
Device
UDID/UUID
모바일 {-.-};;
javascript
CSS3
HTML5
Webkit
Media-query
N-Screen
Device-API
Viewport
http://www.w3c.or.kr/~hollobit/MWAC/10/mwac10-5.pdf
Cache
33

34. 모바일 핵심 WEBKIT
WebKit
WebKit2
Process model
Single Process
Multi Process
API type
Blocking API
Non-blocking API
http://download.tizen.org/misc/media/conference2012/wednesday/ballroom-c/2012-05-09-1100-1140-webkit-efl_and_webkit2-efl.pdf
34

35. W3C HTML5 요소 ITEMS

XHR, XHR 2.0

Web IDL

HTML5

( XMLHttpRequest )
Widget 1.0
 Requirements, P&C, Digital Sig., APIs & Events, Access Request Policy,

CSS3
 Select Level3, Media Query

Web Application API
 Web Storage, Web Database, Web Workers, Web Sockets API, Server-Sent Events,
Offline Web Applications

Geolocation API

Device APIs and Policy

DOM Level 3
35

36. HTML5 기술 요소
Desktop
Canvas
open-GL
SVG
Frame Work
Mobile
Device
OfflineWeb
브
라
우
저
XHR (Ajax)
WebStorage
WebSocket
WebDatabase
Native API
GPS
Network
WAC API
Video/Audio
http://specs.wacapps.net/ WAC Specifications 2.1 참조
Camera
OPEN API
Touch.
Storage
36

37. 모바일 개발에 필요한 것?
37

38. APP개발 환경 이해
Native
Hybrid
Hybrid
Server
Part
Node,java,php,
python
Device
Part
C,java,objectC,
html5,javascript
38

39. WEBAPP의 요구 사항(1)
 모바일 브라우저에서 동작
 Native 수준의 GUI/UX 지원
 Native 수준의 성능
 단말 내부 접근 (Hardware Interface API 지원)
 개발 소스 재활용
 Cross platform (Android, iOS, BlackBerry 등)
 Multi Device ( N-screens )
39

40. WEBAPP의 요구 사항(2)
 Open Source Archtecture 고려 사항
 Community 활성화
 안정성 , 라이선스
 H/W , S/W 지원 범위
개발 용이성
UI Framework
Native Api (device)
40

41. WEBAPP 개발 요구 역량
41

42. APP 종류와 개발 전략
비용
느림
비종속적
온라인
개발쉬움
단말접근불가
시간
내부 자원 역량
목표시장
기능성
빠름
플랫폼종속적
오프라인
Native API
Cost & updates
42

43. WEBAPP은 문제가 ~~!
43

44. WEBAPP기술 한계 극복
• Dom Fragment
• Offline-Web 기술
• jQuery Overhead
성능
• Cache (manifest)
• Local Storage
• Canvas & SVG
• Touch Handling
UX
• CSS transition
• Rendring
• More UI experience !!
44

45. WEB기술 한계
Web pages are getting bigger, year after year.
( page contains 98 page objects, a 13% increase from last year.
In 1995, the average page contained just 2.3 objects.)
http://www.strangeloopnetworks.com/blog/free-report-2012-state-of-the-union-on-e-commerce-page-speed-and-websiteperformance/
45

46. WEB LOADING TIME(1)
서버
사용자
병목 구간
https://newrelic.com/docs/features/how-does-real-user-monitoringwork
46

47. WEB LOADING TIME(2)
Design for High Latency Rule
1. Avoid landing page redirects
1
Redirect
(Round trip))
2. Minimize server processing time
3. Eliminate render blocking resources
4. Prioritize visible content
2
3
4
http://commondatastorage.googleapis.com/io-2013/presentations/239-%20Instant%20Mobile%20Websites%20Techniques%20and%20Best%20Practices.pdf
47

48. WEBAPP 성능 개선 기술
DOM Fragment
Offline Web
48

49. DOM FRAGMENT
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
list.appendChild(item);
DOM노드
반복부하
}
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
fragment.appendChild(item);
DOM노드
영향 감소
}
list.appendChild(fragment);
http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/
49

50. OFFLINE-WEB
WebSQL
Web
Storage
Cache
Offline
성능
MVC
http://dev.opera.com/articles/view/taking-your-web-apps-offline-web-storage-appcache-websql/
50

51. WEB STORAGE (1)
localStorage
no expiration date
sessionStorage
deleted when the
browser closed
• secure and faster
• store large amounts of data(5~10MB)
•
getItem(key)
•
setItem(key, value)
•
removeItem(key)
•
clear()
목록
페이지
Storage
Item list
• Performance
• stored in key/value pairs
Item detail
http://www.w3.org/TR/2011/WD-html5-20110525/offline.html
http://www.w3schools.com/html/html5_webstorage.asp
(기시판,이메일,일정,글쓰기 임시저장등)
51

52. WEB STORAGE (2)
// Store value on browser for duration of the session
sessionStorage.setItem('key', 'value');
// Retrieve value (gets deleted when browser is closed and re-opened)
sessionStorage.setItem
alert(sessionStorage.getItem('key'));
localStorage.setItem
// Store an object using JSON
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value
<textarea id="draft" rows="10" cols="30"></textarea>
function saveMessage(){
var message = document.getElementById("draft");
localStorage.setItem("message", message.value)
}
http://dev.opera.com/articles/view/web-storage/
http://en.wikipedia.org/wiki/Web_storage
글쓰기
임시저장
52

53. WEB STORAGE (3)
주의 사항
설명
Storage per origin
origin : scheme/host/port
The same origin will share the same storage space
( http://example.org/bb, http://example.org:8080/aa )
Storage limit
storage limit at 5 Mb per domain
Security considerations and
associated best practices
DNS spoofing attacks
Where not to use it
different users are using different pathnames on a
single domain
Web Storage is not part of the http://www.w3.org/TR/webstorage/
HTML5 spec
persistent data storage of key-value pair data in Web
clients
http://dev.opera.com/articles/view/web-storage/
53

54. WEB CACHE (1)
•
페이지별 설정
•
웹서버 MIME 설정
AddType text/cache-manifest
<!DOCTYPE HTML>
<html manifest=“offlache.manifest">
...
</html>
CACHE MANIFEST
# rev 13.6.12.11
CACHE:
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.htm
CACHE MANIFEST
.manifest
지시자
# rev N
캐시 버전
> 서버 변경시 웹사용
CACHE:
캐시할 파일 목록
NETWORK:
항상 캐시 하지 않을 파일
FALLBACK:
온라인 연결 불가시 대체 파일
http://www.w3.org/TR/2011/WD-html5-20110525/offline.html
54

55. WEB CACHE (2)
http://grinninggecko.com/developing-cross-platform-html5-offline-app-1/
55

56. 기타 WEB STORAGE 기술
lostorage.js
localStorage API
https://github.com/jscoder/lostorage.js
store.js
cross browser local storage
https://github.com/marcuswe
stin/store.js
lawnchair
simple json storage
http://brian.io/lawnchair/
56

57. II. 웹앱 개발 기술과 문제 극복
3.모바일과 HTML5
모바일 환경의 HTML5



웹앱기술의 한계
웹앱 성능 개선 기술
4.웹앱개발 프레임웍
 웹앱개발툴
 Javascript 프레임웍
5.VM을 활용한 안드로이드 웹개발
57

58. 웹앱 개발 툴
58

59. HYBRID MOBILE APP FRAMEWORKS
 개발툴
Name
Cordova / Apache
(PhoneGap)
Titanium
Appcelerator
Worklight
IBM
License
Proprietary
Proprietary
Native Hybrid
iOS, Android, blackberry...
ADF Mobile FrameProprietary
work / Oracle
KonyOne
Appresso
-
Open
Hybrid App
iOS, Android
http://en.wikipedia.org/wiki/HTML5_in_mobile_devices#Hybrid_Mobile_Apps (2013.6)
http://download.oracle.com/otn_hosted_doc/jdeveloper/11gdemos/ADF112/ADF112.html
Website
2.5.0
http://cordova.apac
he.org/
3.0.2
http://www.appcele
rator.com/platform/
titanium-sdk
5
http://www-01.ibm.
com/software/mobi
le-solutions/worklig
ht/
Oracle Application
Development Fram
e-work
5.0
Hybrid & native App
Open
Latest
Version
11.1.1.6
지원 환경
http://www.kony.co
m/technology/deve
lop/studio
http://appspresso.c
om/ko/
59

60. Cross Platform
[각 플랫폼 웹엔진 환경]
HTML5, CSS, JS로 앱개발
Web Standards
[프레임웍]
Apple iOS / Android / Hybrid App
WAC API
[Waikiki API]
WAC의 표준 device API 규격 지원
카메라, 주소록, 중력센서, 단말 상태,파일 시스템 접근
Studio
[통합 개발 환경]
iOS와 Android 앱을 빌드
"on the fly building" 로 재컴파일 없이 디버깅
Plug - In
[ PDK(Plug-inDevelopment Kit) 포함 ]
네이티브 언어로 사용자 정의 함수 작성
JavaScript API로 노출
http://appspresso.com/ko/
60

61. PHONEGAP (1)
http://coenraets.org/slides/MAX2013_Architecting_Phonegap_Apps.pdf
61

62. PHONEGAP (2)
• 아파치 오픈 소스 프로젝트 편입
http://cordova.apache.org
device
API
개발
Apache Project
Javascrip 만으로 Native Code 없이 Device 접근
참고 : http://docs.phonegap.com
소스 : http://www.phonegapessentials.com/content/chapter-source-code.html
https://build.phonegap.com/
62

63. PHONEGAP (3) : 호환성
http://phonegap.com/about/feature/
63

64. IBM WORKLIGHT

HTML5, 하이브리드 및 네이티브 애플리케이션 개발

애플리케이션 라이프사이클 지원 (백엔드 통합 및 인증을 통해 개발에서부터 사후 배포등 )

IBM Worklight Studio 및 IBM Worklight SDK는 iOS, 안드로이드, 블렉베리 및 윈도우폰등
ftp://public.dhe.ibm.com/software/pdf/mobile-enterprise/WSW14182USEN.pdf
http://public.dhe.ibm.com/software/kr/worklight_v5.pdf
64

65. 구분
기능
세부 내용
App Dev Center Build html & PhoneGap apps in HTML5
the cloud
PhoneGap apps
Intel® XDK
Cross platform development kit
Andriod, iOs, kindle,
html5 Apps
App Framework Library for HTML5 App
UI 라이브러리
jQuery 호환 프레임웍
App Game
Interfaces
HTML5 기반
캔버스,음향,물리
App Starter
quick-start wizard
generate the App Framework
템플릿,화면 레이아웃
사용자 정의 해더,푸터
http://xdk-software.intel.com/
65

66. 게임개발
통합개발환경
웹앱개발환경
https://appcenter.html5tools-software.intel.com
66

67. JAVASCRIPT FRAMEWORK
PATTERNS
(UI / MVC / 기타.)
67

68. W3C DEVICE-API 예시
• Messaging Javascript example
sendMessage()
onSMS()
http://specs.wacapps.net/messaging/index.html#introduction
68

69. SINGLE PAGE ARCH.(SPA)
장점
• Fast
• Works offline
• Control over experience
단점
• More Complex
• Memory management
• Modular Strategy
69

70. http://net.tutsplus.com/articles/web-roundups/20-javascript-frameworks-worth-checking-out/
70

71. ZEPTO.JS

jQuery-compatible API
 페이지 경량화 라이브러리
<ul id=items>
<li>List item 1
<li>List item 2
<li>List item 3
<li>List item 4
</ul>
Jquery 호환
<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js></script>')
</script>
<span
<span
<span
<span
class=delete>DELETE</span></li>
class=delete>DELETE</span></li>
class=delete>DELETE</span></li>
class=delete>DELETE</span></li>
<script>
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
Touch
Event처리
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>
https://github.com/madrobby/zepto/blob/master/examples/touch_events.html
http://zeptojs.com/
71

72. SOCKET.IO
 크로스 브라우저 환경 대안 (CSRF : 보안 문제)
 MIT 라이센스를 가진 오픈소스 / Guillermo Rauch
 Node.js 모듈 : Socket.io / Web 표준 기술 : Web Socket
 WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming,
IFrame, JSONP Polling등 통합한 API
 브라우저와 웹 서버의 종류와 버전에 따라 구동
 브라우저에 Flash Plugin v10.0.0 이상(FlashSocket 지원 버전) 설치시
FlashSocket을 사용
 Flash Plugin이 없으면 AJAX Long Polling 방식사용
HTTP
Node.Js
Server
io = require('socket.io').listen(3333);
https://github.com/learnboost/socket.io/
http://helloworld.naver.com/helloworld/1336
Client
Socket
socket.ioclient.js
app_socket = io.connect('http://host:3333');
72

73. MOBILE UI FRAMEWORK
구분
라이선스
jQtouch
Open
Sencha Touch
free
commercial
GPLv3
특징
지원분야
Easy Setup, Native WebKit Animations
Image Preloading, Callback Events ·
Native UI & Themes, Swipe Detection
iPhone,
Android, iPod
Touch
High-performance HTML5
MVC, Chart, Sencha Cmd
iOS, Android,
BlackBerry, Kindle
Fire
Smartphone
Tablets
Desktops
M-Project
MIT
Game , MVC
Offline, local storage, positioning, touch
optimized UI
jQuery
Mobile
Open
Native UI, Touch Optimized Web,
ThemeRoller , Codiqa (UI prototype)
smartphone
tablets
Mobilo.js
Open
Native UI, MVC, Easy-to-use ,
Mobello Studio : Layout Edit, Debug
smartphone
tablets
JO
Open
MVC, GUI and light Data layer
PhoneGap
Mobile, Desktop
Browser & App
73

74.  Sencha Touch
• Sencha Architect Build for Mobile and
Desktop
• Sencha Ext JS JavaScript Framework for
Rich Desktop Apps
• Sencha GXT Application Framework for
Google Web Toolkit
• Sencha Architect
• Sencha Touch
• Eclipse Plugin for Sencha Touch
• Sencha Touch Charts
• Sencha Mobile Packaging
• Sencha Support Package
74

75.  온라인 UI 개발 / 테스팅
UI Build
Testing
Source
http://codiqa.com/
75

76. HTML5 & CSS3
 MVC
 Content Binding
MVC Architecture
Multi-device support
 Dynamic Value Computing
 Event Handling
Stable Environment
jQuery, jQ mobile
Native packaging
(ipa/apk)
JavaScript date object
Espresso - Node based
build tool and
optimizer
http://www.the-m-project.org/
76

77. •
MVC Class
•
DOM 조작 & 이벤트
•
Client-side storage ( Nitobi, LawnChair)
store JSON objects
•
joDoc easy-to-read and easy-to-write
PhoneGap (GUI)
MyClass = function(x) {
// constructor
this.x = x;
};
MyClass.prototype = {
mymethod: function() {
// some method
},
myothermethod: function() {
// another method
}
};
var x = new myClass(name);
http://joapp.com/docs/
77

78. JAVASCRIPT PATTERN
 Observer Pattern
// inside the Subject, we setup an event observers can subscribe to
publisher
this.changeEvent = new joSubject(this);
// to fire the event inside the Subject
this.changeEvent.fire(somedata);
Event Driven
// simple case, using Function.bind()
somesubject.changeEvent.subscribe(this.mymethod.bind());
Subscriber
// explicit context (this)
somesubject.changeEvent.subscribe(this.mymethod, this);
// optional data which gets passed with the event fires
somesubject.changeEvent.subscribe(this.mymethod, this, "hello");
http://joapp.com/docs/#joSubject
78

79. II. 웹앱 개발 기술과 문제 극복
3.모바일과 HTML5
모바일 환경의 HTML5



웹앱기술의 한계
웹앱 성능 개선 기술
4.웹앱개발 프레임웍
 웹앱개발툴
 Javascript 프레임웍
5.VM을 활용한 안드로이드 웹개발
79

80. VM을 활용한 안드로이드 웹개발
80

81. WEBAPP 개발 환경
Appresso
Phone-Gap
Eclipseplugin
Device
OTG
eclipse
Android SDK
APIs
Platform
tools
SDK
Tools
Android platform APIs,
document. sample
DDMS
Dalvik Debug
Monitor Server
(DDMS)
developing and debugging
Device-VM
Android Virtual Device
(AVD)
your application
debugging and testing
81

82. 안드로이드 아키텍처
어플리케이션/프레임웍
- 프로그램/개발프레임
웍
Media server
- 미디어 플레이
- 레코딩 관련 서비스
IPC ( inter process
communication)
- 프로세스간 커뮤니케
이션(siginal,
file,message,pipe,me
mory etc.)
System server
- 윈도우, 노티 관리
메니저 관련
Hardware abstrace
layer(HAL)
- 하드웨어 인터페이스
- 드라이버
Linux 2.6 kenel
- Low-level device driver
82

83. VIRTUAL BOX
http://source.android.com
가상이미지 다운로드
http://androvm.org/blog/download/
83

84. VM-설정
1. VirtualBox
2. Android Image
3. Network
4. adb Coonect
5. Debuging
https://www.virtualbox.org/ VirtualBox 설치
84

85. VM-설정
1. VirtualBox
2. Android Image
3. Network
4. adb Coonect
5. Debuging
Android
가상 시스템 가져오기
85

86. VM-설정
1. VirtualBox
2. Android Image
3. Network
4. adb Coonect
5. Debuging
Android
가상 시스템 설정
86

87. VM-설정
1. VirtualBox
2. Android Image
3. Network
4. adb Coonect
5. Debuging
가상 머신 구동
87

88. VM-설정
1. VirtualBox
2. Android Image
호스트 전용
3. Network
NAT
4. adb Coonect
내부네트웍
5. Debuging
일반드라이버
브릿지
가상 네트웍 설정
가상 머신
PC
88

89. VM-설정
1. VirtualBox
2. Android Image
3. Network
4. adb Coonect
5. Debuging
Android – 디버거 연결
adb connect 192.168.56.101
adb connect 10.20.4.33
89

90. SDK에서 DEBUGING(1)
1. VirtualBox
2. Android Image
3. Network
4. adb Coonect
5. Debuging
 환경 구성 : SDK 프로젝트와 단말간의 디버그 연결
SDK – 프로젝트 디버깅
90

91. SDK에서 DEBUGING(2)
1. VirtualBox
2. Android Image
3. Network
4. adb Coonect
5. Debuging
 환경구성 : 프로젝트 디버깅 설정
SDK – 프로젝트 디버깅
환경 설정
•
•
Google on the fly 기능 사용 가능
브라우저 로 실시간 테스팅
91

92. 에스프레소 프로젝트
• 프로젝트 생성
GUI 기반 프로젝트 개발
프레임웍 샘플
92

93. 에스프레소 : PLUG-IN 설정
• 프로젝트 환경 파일
확장 API
Native Device API
93

94. 에스프레소 : 환경파일
• 프로젝트 컴파일 설정
<?xml version="1.0" encoding="UTF-8"?>
<project name="com.couple.with.todo" default="build" basedir=".">
<description>Appspresso Build Script</description>
<property file="build.properties" />
<import file="${ax.sdk.dir}/build-app.xml" />
</project>
• 프로젝트 컴파일 속성
# build properties for app build
app.id=com.couple.with.todo
app.version=1.0.0
ax.sdk.dir=D:/AppData/Appspresso1.1.2/plugins/com.appspresso.cli_1.0.0.201207271616/axhome
94

95. 에스프레소 > JO
JO 프레임웍 테마
95

96. 에스프레소 : INDEX.HTML
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=devicewidth">
<meta name="format-detection" content="false">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
JO 프레임웍 샘플
96

97. 에스프레소 > JQ.TOUCH
JQ.Touch 프레임웍
97

98. SUMMARY
Tablet
모바일 미래
플랫폼 동향
Widget
JavaScript
Html5 성능
프레임웍
앱개발 툴
웹앱 개발
98

99. AS
감사합니다.
99