2012년 1월13일 알펜시아 리조트에서 열렸던 HCI2012 행사의 일환이었던 "모바일 웹 UI/UX 현재와 미래" 패널 토의에서 제가 기조 발제로 발표했던 자료입니다. W3C에서 표준화 진행중인 HTML5와 Web API를 중심으로 새로운 UI/UX의 가능성들과 모바일 UI/UX에 대한 가능성들을 살펴보았습니다.

1. 차세대 모바일 웹 UI/UX
기술 및 표준화 동향
Jonghong Jeon
ETRI, SRC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr

2. 2

3. Why Web : Screen Convergence
3

4. Why Web : Platform War & Fragmentation
4

5. Web UI/UX의 기본 기술 요소
5

6. HTML과 Web API의 진화
6

7. Case : Audio
 http://daftpunk.themaninblue.com/
7

8. Case: SVG
 http://slaveryfootprint.org/
8

9. Case : Canvas + WebGL
http://www.myrobotnation.com/
9

10. Case : WebGL + LocalStorage
 http://chrome.angrybirds.com/
10

11. Case : SVG + WebGL
 http://www.cuttherope.ie/
11

12. Case : Offline & N-Screen
https://read.amazon.com
12

13. Case : Hybrid Web
 http://www.wunderlist.com/
13

14. Case : Web OS & UI
14

15. Web RTC(Real-time Communication) API
http://www.w3.org/2010/12/webrtc-charter.html
15

16. 기타 – The Web platform
 Standards for Web Applications on Mobile: November 2011
current state and roadmap
 http://www.w3.org/2011/11/mobile-web-app-state
16

17. Web App Framework 전성 시대
Mobile Web Application Framework
 Sencha Touch, jQuery Mobile, WebApp.net, DTHMLX
touch, jQTouch, iWebKit, Jo HTML5 Mobile App
framework, iUI, Sproutcore, Zepto.js, AML, WebView,
Adobe Air
Hybrid Web application Framework
 Titanium Appcelerator, Phonegap, App inventor,
Droidraw, Rhomobile, Appspresso, HyWAI Lite
17

18. JavaScript 전성 시대
 JavaScript Libraries  http://bit.ly/tVFW6Y
 Application Frameworks, Server Side Library, Testing Frameworks
 Game Engines, Animation Library, Image manipulation
• Akihabara, IMPACT, enchant.js, Unity3D
 Server-side JavaScript
 Node.js : Evented Server-Side Javascript  http://nodejs.org
• Google Chrome의 Javascript Engine V8을 단독으로 사용
• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous
• Thread 방식에 비해 뛰어난 성능
• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈
 Javascript로 컴파일 되는 언어들  http://j.mp/hp2pnR
 CoffeeScript & Kaffeine : Javascript를 더 간결하게
 J2js  Java ByteCode to JS, Script#  C# to JS
18

19. 모바일 HTML5 Web App 관련 책들
19

20. Web UI의 변화, 현재와 미래
1995 2000 2005 2010
PC
Gopher Mosaic Mobile
IE
Keyboard Mouse Mouse Touch
1차원 2차원
Event Sensing
Link Link
 Sensors: Voice, Video, Sensing devices
 카메라, 마이크, 터치, 가속, 자이로, 온도계, 위치, 제스처 …
 M2M & Web of Things
 증강 브라우징, 위치기반 브라우징 …
20

21. Web of Things
21

22. Mobile Web 1.0, 2.0 …. 3.0
 새롭게 나타나는 사용자 특징들과 변화들
22

23. 지금 우리가 알고 있는
모바일 웹이 전부일까 ?
더 편한 미래 웹 UI/UX를 위해
필요한 것은 ?

24. 참고할만한 자료들
 2011 in review: 20 HTML5 sites that changed the game
 http://bit.ly/siSW2O
 HTML5 - http://dev.w3.org/html5/spec/Overview.html
 HTML5: Edition for Web Authors
 http://dev.w3.org/html5/spec-author-view/
 HTML5 differences from HTML4 - http://www.w3.org/TR/html5-diff/
 실전 HTML5 가이드 - http://webstandards.or.kr/html5
 놀랄만큼 유용하고 재미있는 HTML5 모바일 앱 30개 - http://is.gd/e87hy
 기타 참조 사이트
 http://kr.html5doctor.com
 http://html5demos.com
 http://html5rocks.com
 http://www.html5video.org/
 http://www.chromeexperiments.com/
 http://html5test.com
24

25. Thank you
For more discussion :
JongHong Jeon (hollobit@etri.re.kr)
+82-42-860-5333
Blog : http://mobile2.tistory.com/m
http://twitter.com/hollobit
OR
25