2011.02.25 WebApps FutureCon 에서 발표한 "2011년 웹 & 모바일 개발자가 주목해야할 기술들" 자료입니다. HTML5,CSS3,Javascript,Responsive Web Design,Device API,Hybrid App,Hybrid Framework 등에 대해서 설명합니다.

1. 웹

3. 모바일
기술

4. 전망
2011 권정혁 ( @xguru )

5. 소개
•권

6. 정

7. 혁
➡ K

15. 기술전략팀장

16.
- SW Architect
- Developer Evangelist
➡ 블로그

17. -

18. http://xguru.net
➡ 트위터

19. -

20. @xguru
➡ 이메일

21. -

22. guru

23. @

24. xguru.net

25. 2010 was
year of
HTML5
ReadWriteWeb - “Top Trends of 2010 : HTML5”

26. HTML5 ?
HTML5 ~= HTML + CSS + JS API
Web 에서 Desktop 수준의 App 구현 ➠
Web App

27. Web App ?
•

28. 웹

29. 브라우저에서

30. 실행
•

31. Reading

32. ➠

39. Interaction

40. with

41. Audio/Video/Animation
•

42. 데스크탑

43. 소프트웨어

44. 수준의

45. 사용자

46. 경험

47. (UX)
•

48. 서버에서

49. 제공되므로

50. 신속한

51. 업데이트

52. *
•

53. 다양한

54. 디바이스

55. 동시

56. 지원

57. ➠

58. 모바일

59. 왜

60. HTML5가

61. 모바일에

62. 중요한가

63. ?
회사들이

64. 각

65. 모바일

66. 플랫폼용

67.
네이티브

68. 앱을

69. 모두

70. 만들기는

71. 어렵다.
iOS, Android, WP7, BlackBerry, Symbian, Bada ..
“머리

72. 아프다.

73. 페이스북에

74. 새

75. 기능을

76. 추가하면

77. 동시에

78. 7개의

79. 플랫폼을

80. 작업해야한다.

81.
HTML5가

82. 미래의

83. 플랫폼이다.

84. ”

118. -

119. Facebook

120. CTO

121. Bret

122. Taylor
“구글조차도

123. 모든

124. 플랫폼을

125. 네이티브로

126. 지원하기엔

127. 예산이

128. 모자르다.”

129.
-

130. Google

131. VP

132. Vic

133. Gundotra

134. 정부 , 지자체 모바일 앱 현황
기관 App 제작비용 다운로드
방송통신위 방송통신위 3500만원 4670건
법무부 법아

135. 놀자 8140만원 160000건
행안부 민원

136. 24시 2억원 미집계
문화부 touch

137. korea 1900만원 68건
고용노동부 잡영 2억1600만원 4784건
보건복지부 숙녀다이어리 3000만원 112905건
조달청 나라장터알림 9200만원 7181건
특허청 특허정보검색 2억6600만원 833건
통계청 수명계산기 2310만원 331129건
서울시 I-tour 3억1400만원 184094건
서울시 서울종합방재센터 2500만원 10건
경기도 경기산책로 4천만원 5100건
전라남도 U남도

138. 여행길잡이 3억원 6600건
연합뉴스 : 정부의 앱 개발비 현황 http://j.mp/korgovapp

139. Devices 2011
BB PlayBook HP WebOS
CR-48 MS WP7
with
iOS Android Nokia

140. Web Tech
2011

141. HTML5

142. ,

143. CSS3
Javascript

144. !!!
Responsive

145. Web

146. Design
Web

147. App

148. Stores
Device

149. API
Hybrid

150. App

152. Cross

153. Platform

154. HTML(5)
Offline Device 3D , 2D Performance
Semantics Multi Media Connectivity CSS3
Storage Access Graphics Effects Integration

155. HTML5

156. 어떻게

157. 공부하나요

158. ?
•HTML5

159. 스펙

160. 너무

161. 어려워요!

162. 게다가

163. 영어!
✓

164. 한글

165. HTML5

166. 스펙

168. ➠

170. http://j.mp/html5ko by ClearBoth.org
•그래도

171. 내용이

172. 너무

173. 많은

174. 데요

175. ?
✓

176. 웹

177. 개발자를

178. 위한

179. 최소스펙

180. ➠

182. http://j.mp/html5devel
•튜토리얼

184. 프리젠테이션

185. 은

186. 없나요

187. ?
✓

188. Google

189. 의

190. 선물

191. ➠

193. http://www.html5rocks.com/
•그

194. 외에

195. 꼭

196. 추천해주실

197. 사이트는

198. ?
✓ 실전

199. HTML5

200. 가이드

201. (

202. 한글

203. PDF

204. ) ➠

206. http://j.mp/html5guide_ko

207. HTML5 와 웹 브라우저
Android RIM webOS
iOS 3+ 2011 3Q
2.0+ OS6+ 1.4+
6 7 8 9 3+ 6+ 4+ 10+

208. HTML5 적용 지금부터!
• HTML5shiv : HTML5 IE Enabling Script - by Remy Sharp
!--[if

209. lt

210. IE

211. 9]
script

212. src=http://html5shiv.googlecode.com/svn/trunk/html5.js/script
![endif]--
✓ John Resig 의 제안 : http://ejohn.org/blog/html5-shiv/ , IE 6 까지 지원
• Mordernizr - http://www.modernizr.com/
✓ HTML5Shiv 기능을 포함하여 CSS3 (조건분기) 까지 더 폭넓은 지원
✓ Modernizr 객체를 생성하여 HTML5, CSS3 기능이 지원되는지 검사
if

213. (Modernizr.canvas)

214. {

215. var

216. c

217. =

218. document.createElement('canvas');

219. var

220. context

221. =

222. c.getContext('2d');

223. //

224. 캔버스

225. 사용

226. document.getElementById('canvasContainer').appendChild(c);
}
• HTML5 Boilerplate - http://html5boilerplate.com/
✓ 즉시 사용 가능한 HTML5 기본양식
✓ Boilerplate 에서 참고할만한 Snippet 20가지 - http://j.mp/hDExIw

227. HTML5 Initializer
• http://initializr.com/
• HTML5 Boilerplate 에 기반
• jQuery
• Modernizer / HTML5shiv
• 서버 설정 파일

228. HTML5 Video Audio
• 20종의 HTML5 Video Player - http://j.mp/dfxNMQ
✓ Video JS , JW Player , Mediaelement.js , Projekktor ..
✓ Flash Fallback 을 이용해서 IE 까지 지원
• VideoJS
✓ http://videojs.com/ - Free OpenSource , Skin , Full Screen 지원
• Audio.js
✓ http://kolber.github.com/audiojs/ , OpenSource(MIT)

229. Javascript !!!
• 자바스크립트의 재발견
• Javascript Library for Mobile
• UI Frameworks
• Application Frameworks
• Server-side JavaScript
• Languages that Compiles to JS

230. Javascript for Mobile
• - http://zeptojs.com
✓ Mobile 만을 위한 자바스크립트 라이브러리 ( Mobile WebKit 최적화 )
✓ jQuery 와 유사한 문법 제공 but jQuery ( 26.7 K ) , Zepto.js ( 2.3K )
✓ 오픈소스 ( MIT License )
✓ $('p').html('test').css('color:red');
✓ get,each,index,first,find,closest,next,prev,remove,html,show,hide,offset,heig
ht,width,attr,css,addClass..
✓ AJAX : $.post , $.getJSON
✓ Touch Event
-­‐ $('some selector').tap(function(){ ... });
-­‐ $('some selector').doubleTap(function(){ ... });
-­‐ $('some selector').swipe(function(){ ... });

231. UI Library for Touch Devices
Web UI는 Touch 와 친화적이지 않음
• jQTouch - http://jqtouch.com
• jQueryMobile - http://jquerymobile.com
• Sencha Touch - http://sencha.com
• DHTMLX Touch - http://dhtmlx.com/touch/
• jo - http://joapp.com
• wink - http://winktoolkit.org
• Cross

232. Platform

233. 지원

234. 프레임웍들

235. 증가
• GUI

236. Designer

237. :

238. DHTMLX

239. (Alpha)

240. ,

241. Sencha

242. (2011

243. Q2

244. )

245. Javascript Application Frameworks
•데스크탑

246. 수준의

247. Web

248. Application

249. 작성
✓ Sproutcore

250. :

251. Cocoa

252. for

253. Web

254. -

255. http://sproutcore.com
✓ Cappuccino

257. (

258. Objective-J

259. )-

260. http://cappuccino.org
✓ Qooxdoo

261. -

262. http://qooxdoo.org/
•Javascript

263. 기반

264. Web

265. Framework
✓ JavascriptMVC

266. -

267. http://www.javascriptmvc.com/
✓ Rails-Like

268. Framework

269. for

270. Mobile

271. App

272. -

273. 37

274. Signals

275.
✓ JJ

276. -

277. Javascript

278. App

279. Framework

280. Server-side Javascript
• Netscape Livewire를 시작으로 다양한 접근 http://j.mp/eNt2Ay
• Node.JS : Evented Server-Side Javascript http://nodejs.org/
✓ Google Chrome 의 Javascript Engine V8 을 단독으로 사용
✓ 모든 Network I/O 는 NonBlocking , File I/O 는 Asynchronous
✓ Thread 방식에 비해 뛰어난 성능, 다양한 모듈 개발중 (S3,MySQL.. )
✓ HTTPd , FTPd , IMAP, WebDAV 등 다양한 서버 모듈 개발 완료
• CommonJS : Ecosystem for Javascript Outside the Browser , http://commonjs.org/
✓ 브라우저가 아닌 서버/데스크탑 어플을 작성하기 위한 스펙들
✓ Server-Side , Command Line , Desktop GUI , Hybrid ( Titanium .. )
✓ 모듈 시스템 , 파일시스템 , 유닛테스팅 , 콘솔 , Promise .. 등등

281. Javascript

282. 로

283. 컴파일

284. 되는

285. 언어들
• List of Languages that compile to JS : http://j.mp/hp2pnR
• CoffeeScript Kaffeine : Javascript 를 더 간결하게
• Optimizer : Google Closure , UglifyJS
• Ruby , Python , Lisp Scheme
• j2js : Java ByteCode to JS / Script# : C# to JS

286. CoffeeScript http://coffeescript.com
• Javascript 로 컴파일 되는 간단한 언어 : coffee -c hello.coffee ➠ hello.js
• ; 과 { 가 없는 영어같은 문법, 들여쓰기 기반 , Inspired by Python Ruby
number = 42 number = 42 ;
opposite = true opposite = true ;
number = -42 if opposite if (opposite) { number = -42 ; }
ignore = yes unless name is ‘xguru’ if ( name !== ‘xguru’ ) { ignore = true ; }
square = (x) - x * x square = function(x) { return x * x; };
math = math = {
root: Math.sqrt root: Math.sqrt,
square: square square: square,
cube: (x) - x * square x cube: function(x) { return x * square(x); }
};
cubes = (Math.cube num for num in list ) cubes = (function() {
var _i, _len, _results; results = [];
for (_i = 0,_len = list.length,_i_len,_i++) {
num=list[_i];
_results.push(Math.cube(num));
}
return _results;
})();

287. Responsive Web Design
• http://www.alistapart.com/articles/responsive-web-design/
• Screen Size / Platform / Orientation 에 반응
• CSS3 Media Query , Flexible Grid Layout
• Guideline for R-W-D : http://j.mp/eWEYIJ
Phone Tablet Netbook / Tablet Desktop

288. http://MediaQueri.es
a collection of responsive web designs

289. Chrome

290. Web

291. Store

292. Mozilla

293. Web

294. App

295. Store

296. GetJar

297. iPadification

298. of

299. the

300. Web

301. Device APIs
Camera
Filesystem Acclerometer
Web
Browser Contacts
Device
Messaging
Orientation
Device
Web App API Calendar
Developer Tasks Geolocation
Javascript
Hybrid Gallery
Device Device
Status Interaction
• WAC (Wholesale Application Community)
• 40개 이상의 통신사/제조사 협의체 : BONDI + JIL ~= Waikiki Beta
• W3C DAP ( Device API )

302. WAC Schedule 2011
2010 2011
07 11 02 05 09
WAC 법인 WAC API Beta WAC Demo WAC 2.0 WAC 3.0
@MWC Enabled Device Network APIs
12 05
K-WAC K-WAC
재단설립 Enabled Device
• WAC Enabled Device 의 증가
✓ Galaxy S 2 , Bada 2 ..
• Device 기능을 활용한 Web App 들 증가

303. Native
Vs.
Web
Vs.
Hybrid

304. Native App
•뛰어난

305. 성능

306. /

307. 게임
•훌륭한

308. UX
•디바이스

309. 모든

310. 기능

311. 활용
•수익모델

312. (

313. 판매/광고

314. )
•개발이

315. 어렵다

316. /

317. 비싸다

318.
•크로스

319. 플랫폼?

320. Web App
•HTML5

321. ,

322. CSS

323. ,

324. JS

325.
•서버기반

327. Offline
•Multi

328. Device
•속도?

329.
•디바이스

330. 기능

331. 활용?
•판매?

332. Hybrid App
• Native + Web
Device OS
Native App /
Hybrid framework
Web Browser
Web Server
• Multi Device
• 서버기반 개발가능
Web Application Web
css/js/html Application
• Device 기능 활용
• 수익모델
• Web 부분의 속도
• 표준화?

333. Hybrid App 의 범위
Native Hybrid Web
Native 내에서 WebView 활용 서버 접속해서 웹앱 실행
Hybrid Frameworks
Appspresso / Phonegap
Titanium

334. Hybrid 개발 방법
• Native + WebView : Native 로 개발하고 특정 부분만 WebView 를 이용
★ iPhone
✓ Javascript 에서 Objective-C 호출 : Custom URL Scheme ( gap:// )
✓ WebView 에 Javascript Injectin : stringByEvaluatingJavascriptFromString()
✓ 모든 Click 을 Hooking : shouldStartLoadWithRequest()
★ Android
✓ WebView 에 자바코드 연결 인터페이스 삽입 : addJavascriptInterface
•★
Appspresso / Phonegap
Web App 을 Native App 으로 패키징
★ Device 기능을 Framework 에서 Javascript 로 확장
•★
Titanium ( Appcelerator )
Web 기술로 작성후 Native App 으로 변환
★ Device 기능을 자체적으로 제공 ( 외관상은 Javascript 형태 )

335. Hybrid Web App
Device OS
• Native App + Web App Hybrid framework
Web Browser
하나의 웹소스로 모든 디바이스 동시지원
Web Application
Web 으로는 불가능한 Device 기능 지원 css/js/html
앱 스토어를 통한 앱 판매 가능
• Hybrid Frameworks
Phonegap
Appspresso
Titanium Mobile

336. Appspresso
• Mobile App Builder by
Hybrid Web App 개발 플랫폼 : iOS , Android ..
Device API : WAC API ( Waikiki ) 지원
Powered By
원 클릭으로 iOS Android 앱 빌드
Native Plugin 추가 가능 : Plugin Development Kit
• HTML5 Web App
Touch UI : Sencha , jQueryMobile , JoApp 연동
JJ - 내장 Javascript MVC Framework ( Ruby On Rails 와 유사 )

337. Write Once
Appspresso Sell Anywhere
Sencha jQueryMobile Jo

338. App
Sencha
Sencha

339. Touch

340. 프레임워크를

341. UI

342. 로

343. 사용하는

344. 템플릿

345. 프로젝트를

346. 생성합니다.
http://sencha.com
Win/Mac 에서 개발가능
Touch UI Framework 지원
Android / iOS App 으로 Build

347. Web Tech 2011
• HTML5 관련 기술의 사용이 증대
• Device 가 더욱 세분화 ➠ Web App 의 필요성 증가
• Javascript 관련 기술이 Hot !
• Responsive Web Design
• 다양한 Web App Store 의 등장 및 성장
• Device API 적용 디바이스의 출현
• Hybrid 방식 개발 수요 증가
• Hybrid Web App 개발툴의 성장

348. 고맙습니다!
e-mail

349. :

350. guru

351. @

352. xguru.net

353.
twitter:

354. @xguru
권정혁

355. /

356. 구루