차세대 웹 환경에서의 UI/UX 기술 표준화 동향

6,622 views

Published on

6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.

스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다

웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.

Published in: Technology

차세대 웹 환경에서의 UI/UX 기술 표준화 동향

  1. 1. 차세대 웹 환경에서의UI/UX 기술 표준화 동향Jonghong JeonETRI, PECEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.comhttp://twitter.com/hollobithttp://www.etri.re.kr
  2. 2. 2UI & UXhttp://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal#comments
  3. 3. 3Web UI/UX Web은 자원과 연결에 대한 UI/UX 기술
  4. 4. Past : World Wide Web
  5. 5. 5In The Beginning ..... World Wide Web (Tim Berners-Lee, 1989) universe of network-accessible information anyone, anywhere, anytime Client to server interactions
  6. 6. 6WWW & Browser(Navigator)
  7. 7. 7Web Browser Architecture
  8. 8. 8FirefoxOS Architecture
  9. 9. 9Web Page Loading procedure
  10. 10. 10Web Page Loading procedure
  11. 11. 11Evolution of World Wide Web
  12. 12. 12Evolution of World Wide Web 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹 XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는단계 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 WebAPI를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계
  13. 13. 13Evolution of World Wide Web
  14. 14. Now : HTML5 & Web Application
  15. 15. 15HTML5 & Web App Technology TimelineCSS1JavascriptCSS2 CSS3DOM1 DOM2 DOM3 DOM42010 2011AJAXHTTPCanavs Web Workers AppCacheW3CWebApp.Specs.XHR2WebGLGeolocation FileAPIWebFontAudio/VideoWeb form2012 2013HTTP2HTML5 Working Drafthollobit@etri.re.kr
  16. 16. 16Web UI/UX의 기본 기술 요소
  17. 17. 17HTML5 ?
  18. 18. 18HTML5의 주요 특징 Offline / Storage Web SQL Database Local Storage IndexedDB Application Cache Realtime / Communication Web Workers Web Socket Web Notifications File / Hardware Access Native Drag & Drop Desktop Drag-In (File API) Desktop Drag-Out FileSystem APIs Geolocation Device Orientation Speech Input Semantics & Markup Better semantic tags Markup for applications Descriptive link relations Microdata ARIA attributes Web Form Graphics / Multimedia <Video> / <Audio> Canvas 2D Canvas 3D (WebGL) Inline SVG CSS3 CSS Selectors Web Fonts Nuts & Bolts History API
  19. 19. 19The Web as an application platform Standards for Web Applications on Mobile: Feb 2013 currentstate and roadmap http://www.w3.org/Mobile/mobile-web-app-state/
  20. 20. 20User Interactionshttp://www.w3.org/2013/02/mobile-web-app-state/#User_interactions
  21. 21. 21Formshttp://www.w3.org/2013/02/mobile-web-app-state/#Forms
  22. 22. 22Device Adaptationhttp://www.w3.org/2013/02/mobile-web-app-state/#Device_Adaptation
  23. 23. 23Graphicshttp://www.w3.org/2013/02/mobile-web-app-state/#Graphics
  24. 24. 24Multimediahttp://www.w3.org/2013/02/mobile-web-app-state/#Multimedia
  25. 25. 25Sensors and hardware integration
  26. 26. 26Network
  27. 27. 27Communication and Discovery
  28. 28. Future : Web App UI / UX
  29. 29. 29Web UI의 변화, 현재와 미래 Sensors: Voice, Video, Sensing devices 카메라, 마이크, 터치, 가속, 자이로, 온도계, 위치, 제스처 … M2M & Web of Things 증강 브라우징, 위치기반 브라우징 …GopherKeyboard1차원LinkMosaicMouse2차원LinkPCIEMouseEventMobileTouchSensing1995 2000 2005 2010
  30. 30. 30Web Platform Architecture
  31. 31. 31Emerging Web OS & HTML5 Apps
  32. 32. 32Native Web AppNative AppWeb AppWeb pageNativeWeb AppHybrid Web App(Cross Platform)Multi-platform support
  33. 33. 33차세대 웹 환경은 3M EnvironmentMulti Screen & Multi Devices & Multi Platform
  34. 34. 34Pattern of Multi-screensSource: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
  35. 35. 35[1] Coherencethe unique contexts across a multi-device ecosystem and adapt elements andfeatures accordingly.User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이최적화되어야 함
  36. 36. 36Responsive Images W3C Responsive Image Community Group Picture Elements http://picture.responsiveimages.org/ http://bit.ly/Uyu05L (W3C) Goals Respond to different screen pixel width/height Respond to different screen pixel densities Respond to user zoom on image resource. ….36
  37. 37. 37[2] synchronizationAmazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대한 싱크를 유지함
  38. 38. 38[3] Screen Sharing하나의 가상 스크린 처럼 여러 단말이 스크린을 공유
  39. 39. 39[4] Device ShiftingApple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서 TV로 단말을 옮겨가면서 컨텐트를 이용
  40. 40. 40Web Intent for local networks
  41. 41. 41[5] Complementarity여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일단말로 TV를 제어하는 등 단말간 상호관련성
  42. 42. 42[6] SimultaneityTV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새로운 Experience를 만들어 낼 수 있음.
  43. 43. 43[추가] Bi-directional & Real-time
  44. 44. 44Modern Web Applications Various JS Frameworks & JS Libraryhttp://www.slideshare.net/infect2/web-app-201205
  45. 45. 45UX에 영향을 주는 요소 : 성능/시간Web ApplicationsHTML5 GamesNative Web AppsBasic Web PagesJavaScript Execution SpeedDOM InteractionsAccelerated GraphicsPage Load Timehttp://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
  46. 46. 46JS 성능 개선을 위한 노력들Developer Level Programming Best Practices & TipsEngine Level Javascript Engine Race Javascript Interpreting mechanism EnhancementDevice Level Hardware Acceleration• Web CL• GPU AccelerationPerformance Measuring & Benchmark
  47. 47. 47GPU AccelerationIEChromeFirefox
  48. 48. 48HTML5 Game enginehttp://www.youtube.com/watch?feature=player_embedded&v=XsyogXtyU9o
  49. 49. 49Conclusions Web은 자원(Resource)과 연결(Link)에 대한 UI/UX 기술 기본 기술 요소 HTML(구조), CSS(표현), JS(동작) Web 기술의 진화 유형과 방향 다양한 인터랙션 기술 : 터치, 음성, 제스처, 알림, 접근성 입력과 처리 : web form Adaptation & Responsive Web : 그래픽스 기술 : 2D, 3D, Vector, Animation, Fonts, Orientation, Layout, GPU Acceleration 멀티미디어 : Video/Audio Play, Gallery Access, Capturing, Analysis & Modification Sensing & Capturing: Geolocation, Battery, Proximity, Ambient Light, Humidity, NFC,Camera/Microphone Device Access : Task Schedule, Calendar, Contacts, System Setting, Telephony, Messaging Network/Protocol : Network API, Server-push, P2P data connection, Web Socket, Raw Socket Web App UI/UX로 진화 Javascript 의 중요성, App Design 의 중요성 Performance와 Interoperability
  50. 50. 50Conclusions
  51. 51. Web은디바이스, 플랫폼, 스크린에종속되지 않는유일한 기술Web UI/UX의 미래 또한디바이스, 플랫폼, 스크린에종속되지 않으며다양한 UI/UX을 제공하는 것
  52. 52. 52JongHong Jeon (hollobit@etri.re.kr)+82-42-860-5333http://mobile2.tistory.com/mhttp://twitter.com/hollobit

×