차세대 웹 환경에서의 UI/UX 기술 표준화 동향
13 likes8,095 views
6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다. 스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다 웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
![35
[1] Coherence
the unique contexts across a multi-device ecosystem and adapt elements and
features accordingly.
User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이
최적화되어야 함](https://image.slidesharecdn.com/20130613-uiux-r4-130614011029-phpapp01/85/UI-UX-35-320.jpg)
![37
[2] synchronization
Amazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대
한 싱크를 유지함](https://image.slidesharecdn.com/20130613-uiux-r4-130614011029-phpapp01/85/UI-UX-37-320.jpg)
![38
[3] Screen Sharing
하나의 가상 스크린 처럼 여러 단말이 스크린을 공유](https://image.slidesharecdn.com/20130613-uiux-r4-130614011029-phpapp01/85/UI-UX-38-320.jpg)
![39
[4] Device Shifting
Apple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서 TV로 단말을 옮겨가면
서 컨텐트를 이용](https://image.slidesharecdn.com/20130613-uiux-r4-130614011029-phpapp01/85/UI-UX-39-320.jpg)
![41
[5] Complementarity
여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일
단말로 TV를 제어하는 등 단말간 상호관련성](https://image.slidesharecdn.com/20130613-uiux-r4-130614011029-phpapp01/85/UI-UX-41-320.jpg)
![42
[6] Simultaneity
TV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커
뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새
로운 Experience를 만들어 낼 수 있음.](https://image.slidesharecdn.com/20130613-uiux-r4-130614011029-phpapp01/85/UI-UX-42-320.jpg)
![43
[추가] Bi-directional & Real-time](https://image.slidesharecdn.com/20130613-uiux-r4-130614011029-phpapp01/85/UI-UX-43-320.jpg)
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
- 1. 차세대 웹 환경에서의 UI/UX 기술 표준화 동향 Jonghong Jeon ETRI, PEC Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com http://twitter.com/hollobit http://www.etri.re.kr
- 3. 3 Web UI/UX Web은 자원과 연결에 대한 UI/UX 기술
- 4. Past : World Wide Web
- 5. 5 In The Beginning ..... World Wide Web (Tim Berners-Lee, 1989) universe of network-accessible information anyone, anywhere, anytime Client to server interactions
- 9. 9 Web Page Loading procedure
- 10. 10 Web Page Loading procedure
- 11. 11 Evolution of World Wide Web
- 12. 12 Evolution 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와 Web API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정 보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계
- 13. 13 Evolution of World Wide Web
- 14. Now : HTML5 & Web Application
- 15. 15 HTML5 & Web App Technology Timeline CSS1 Javascript CSS2 CSS3 DOM1 DOM2 DOM3 DOM4 2010 2011 AJAX HTTP Canavs Web Workers AppCache W3C Web App. Specs. XHR2 WebGLGeolocation FileAPI WebFontAudio/Video Web form 2012 2013 HTTP2 HTML5 Working Draft hollobit@etri.re.kr
- 16. 16 Web UI/UX의 기본 기술 요소
- 17. 17 HTML5 ?
- 18. 18 HTML5의 주요 특징 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 The Web as an application platform Standards for Web Applications on Mobile: Feb 2013 current state and roadmap http://www.w3.org/Mobile/mobile-web-app-state/
- 25. 25 Sensors and hardware integration
- 26. 26 Network
- 28. Future : Web App UI / UX
- 29. 29 Web UI의 변화, 현재와 미래 Sensors: Voice, Video, Sensing devices 카메라, 마이크, 터치, 가속, 자이로, 온도계, 위치, 제스처 … M2M & Web of Things 증강 브라우징, 위치기반 브라우징 … Gopher Keyboard 1차원 Link Mosaic Mouse 2차원 Link PC IE Mouse Event Mobile Touch Sensing 1995 2000 2005 2010
- 31. 31 Emerging Web OS & HTML5 Apps
- 32. 32 Native Web App Native App Web App Web page Native Web App Hybrid Web App (Cross Platform) Multi-platform support
- 33. 33 차세대 웹 환경은 3M Environment Multi Screen & Multi Devices & Multi Platform
- 34. 34 Pattern of Multi-screens Source: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
- 35. 35 [1] Coherence the unique contexts across a multi-device ecosystem and adapt elements and features accordingly. User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이 최적화되어야 함
- 36. 36 Responsive 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] synchronization Amazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대 한 싱크를 유지함
- 38. 38 [3] Screen Sharing 하나의 가상 스크린 처럼 여러 단말이 스크린을 공유
- 39. 39 [4] Device Shifting Apple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서 TV로 단말을 옮겨가면 서 컨텐트를 이용
- 40. 40 Web Intent for local networks
- 41. 41 [5] Complementarity 여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일 단말로 TV를 제어하는 등 단말간 상호관련성
- 42. 42 [6] Simultaneity TV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커 뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새 로운 Experience를 만들어 낼 수 있음.
- 43. 43 [추가] Bi-directional & Real-time
- 44. 44 Modern Web Applications Various JS Frameworks & JS Library http://www.slideshare.net/infect2/web-app-201205
- 45. 45 UX에 영향을 주는 요소 : 성능/시간 Web Applications HTML5 Games Native Web AppsBasic Web Pages JavaScript Execution Speed DOM Interactions Accelerated Graphics Page Load Time http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
- 46. 46 JS 성능 개선을 위한 노력들 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
- 49. 49 Conclusions 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 Conclusions
- 51. Web은 디바이스, 플랫폼, 스크린에 종속되지 않는 유일한 기술 Web UI/UX의 미래 또한 디바이스, 플랫폼, 스크린에 종속되지 않으며 다양한 UI/UX을 제공하는 것