Your SlideShare is downloading. ×
0
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,586

Published on

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

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

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

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

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,586
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
264
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 차세대 웹 환경에서의UI/UX 기술 표준화 동향Jonghong JeonETRI, PECEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.comhttp://twitter.com/hollobithttp://www.etri.re.kr
  • 2. 2UI & UXhttp://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal#comments
  • 3. 3Web UI/UX Web은 자원과 연결에 대한 UI/UX 기술
  • 4. Past : World Wide Web
  • 5. 5In The Beginning ..... World Wide Web (Tim Berners-Lee, 1989) universe of network-accessible information anyone, anywhere, anytime Client to server interactions
  • 6. 6WWW & Browser(Navigator)
  • 7. 7Web Browser Architecture
  • 8. 8FirefoxOS Architecture
  • 9. 9Web Page Loading procedure
  • 10. 10Web Page Loading procedure
  • 11. 11Evolution of World Wide Web
  • 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. 13Evolution of World Wide Web
  • 14. Now : HTML5 & Web Application
  • 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. 16Web UI/UX의 기본 기술 요소
  • 17. 17HTML5 ?
  • 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. 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. 20User Interactionshttp://www.w3.org/2013/02/mobile-web-app-state/#User_interactions
  • 21. 21Formshttp://www.w3.org/2013/02/mobile-web-app-state/#Forms
  • 22. 22Device Adaptationhttp://www.w3.org/2013/02/mobile-web-app-state/#Device_Adaptation
  • 23. 23Graphicshttp://www.w3.org/2013/02/mobile-web-app-state/#Graphics
  • 24. 24Multimediahttp://www.w3.org/2013/02/mobile-web-app-state/#Multimedia
  • 25. 25Sensors and hardware integration
  • 26. 26Network
  • 27. 27Communication and Discovery
  • 28. Future : Web App UI / UX
  • 29. 29Web UI의 변화, 현재와 미래 Sensors: Voice, Video, Sensing devices 카메라, 마이크, 터치, 가속, 자이로, 온도계, 위치, 제스처 … M2M & Web of Things 증강 브라우징, 위치기반 브라우징 …GopherKeyboard1차원LinkMosaicMouse2차원LinkPCIEMouseEventMobileTouchSensing1995 2000 2005 2010
  • 30. 30Web Platform Architecture
  • 31. 31Emerging Web OS & HTML5 Apps
  • 32. 32Native Web AppNative AppWeb AppWeb pageNativeWeb AppHybrid Web App(Cross Platform)Multi-platform support
  • 33. 33차세대 웹 환경은 3M EnvironmentMulti Screen & Multi Devices & Multi Platform
  • 34. 34Pattern of Multi-screensSource: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
  • 35. 35[1] Coherencethe unique contexts across a multi-device ecosystem and adapt elements andfeatures accordingly.User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이최적화되어야 함
  • 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[2] synchronizationAmazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대한 싱크를 유지함
  • 38. 38[3] Screen Sharing하나의 가상 스크린 처럼 여러 단말이 스크린을 공유
  • 39. 39[4] Device ShiftingApple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서 TV로 단말을 옮겨가면서 컨텐트를 이용
  • 40. 40Web Intent for local networks
  • 41. 41[5] Complementarity여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일단말로 TV를 제어하는 등 단말간 상호관련성
  • 42. 42[6] SimultaneityTV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새로운 Experience를 만들어 낼 수 있음.
  • 43. 43[추가] Bi-directional & Real-time
  • 44. 44Modern Web Applications Various JS Frameworks & JS Libraryhttp://www.slideshare.net/infect2/web-app-201205
  • 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. 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. 47GPU AccelerationIEChromeFirefox
  • 48. 48HTML5 Game enginehttp://www.youtube.com/watch?feature=player_embedded&v=XsyogXtyU9o
  • 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. 50Conclusions
  • 51. Web은디바이스, 플랫폼, 스크린에종속되지 않는유일한 기술Web UI/UX의 미래 또한디바이스, 플랫폼, 스크린에종속되지 않으며다양한 UI/UX을 제공하는 것
  • 52. 52JongHong Jeon (hollobit@etri.re.kr)+82-42-860-5333http://mobile2.tistory.com/mhttp://twitter.com/hollobit

×