금일 HCI 2013 학회 패널토의에서 발표했던 멀티디바이스/멀티 스크린 환경에서의 웹 UI/UX 기술에 대한 기조 발표 자료입니다. 조금 앞선 미래의 관점에서 이슈들을 살펴보았습니다.

1. Web UI/UX in the Multi device
& Multi screen environment
Jonghong Jeon
ETRI, SRC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr

2. Multi Screen & Multi Devices
2

3. Multi Screen & Multi Devices
3

4. Pattern of Multi-screens
Source: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
4

5. [1] Coherence
the unique contexts across a multi-device ecosystem and adapt elements and
features accordingly.
User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이
최적화되어야 함
5

6. 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.
 ….
6 6

7. [2] synchronization
Amazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대
한 싱크를 유지함
7

8. [3] Screen Sharing
하나의 가상 스크린 처럼 여러 단말이 스크린을 공유
8

9. [4] Device Shifting
Apple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서 TV로 단말을 옮겨가면
서 컨텐트를 이용
9

10. Web Intent for local networks
10

11. [5] Complementarity
여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일
단말로 TV를 제어하는 등 단말간 상호관련성
11

12. [6] Simultaneity
TV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커
뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새
로운 Experience를 만들어 낼 수 있음.
12

13. [추가] Bi-directional & Real-time
13

14. Multi Devices - Capability Sharing
 단말의 다양한 기능을 여러 단말이 공유
 Network (Tethering)
 하나의 가상단말처럼 다수의 기기가 동작
14

15. Web of Things
15

16. Web of Things
16

17. Swarm Web ??
17

18. Conclusions – Social Web of Things
18

19. Conclusions
Web of Things UI/UX
Invisible Web UI
Swarm Web UI/UX
19

20. 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
20