차세대 모바일 웹 UI/UX 기술 및 표준화 동향 (기조발표)

6,714 views

Published on

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

Published in: Technology, Design

차세대 모바일 웹 UI/UX 기술 및 표준화 동향 (기조발표)

  1. 1. 차세대 모바일 웹 UI/UX기술 및 표준화 동향Jonghong JeonETRI, SRCEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.com http://twitter.com/hollobithttp://www.etri.re.kr
  2. 2. 2
  3. 3. Why Web : Screen Convergence3
  4. 4. Why Web : Platform War & Fragmentation4
  5. 5. Web UI/UX의 기본 기술 요소5
  6. 6. HTML과 Web API의 진화6
  7. 7. Case : Audio http://daftpunk.themaninblue.com/7
  8. 8. Case: SVG http://slaveryfootprint.org/8
  9. 9. Case : Canvas + WebGL http://www.myrobotnation.com/9
  10. 10. Case : WebGL + LocalStorage http://chrome.angrybirds.com/10
  11. 11. Case : SVG + WebGL http://www.cuttherope.ie/11
  12. 12. Case : Offline & N-Screen https://read.amazon.com12
  13. 13. Case : Hybrid Web http://www.wunderlist.com/13
  14. 14. Case : Web OS & UI14
  15. 15. Web RTC(Real-time Communication) API http://www.w3.org/2010/12/webrtc-charter.html15
  16. 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-state16
  17. 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 Lite17
  18. 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 JS18
  19. 19. 모바일 HTML5 Web App 관련 책들19
  20. 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. 21. Web of Things21
  22. 22. Mobile Web 1.0, 2.0 …. 3.0 새롭게 나타나는 사용자 특징들과 변화들22
  23. 23. 지금 우리가 알고 있는모바일 웹이 전부일까 ?더 편한 미래 웹 UI/UX를 위해필요한 것은 ?
  24. 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.com24
  25. 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 OR25

×