1. 권우일
E willkwon@infraware.co.kr
T @bitroid
Copyright © 2011 Infraware Inc. All rights reserved.
Confidential and proprietary material for authorized persons only. 1

2. 목차
I. N-Screen이란?
II. N-Screen을 위한 HTML5 기술
III.결론
Confidential and proprietary material for authorized persons only. 2

3. I. N-SCREEN이란?
Confidential and proprietary material for authorized persons only. 3

4. N-Screen?
• 다양한 디스플레이 디바이스 등장
Confidential and proprietary material for authorized persons only. 4

5. N-Screen?
• N-Screen을 어떻게 정의할 것인가?
Confidential and proprietary material for authorized persons only. 5

6. N-Screen?
• 과거에도 N-Screen은 존재, 그러나…
Confidential and proprietary material for authorized persons only. 6

7. N-Screen이 관심을 받는 이유
• 과거에도 N-Screen 환경은 존재
• 현재와의 차이점은 Connectivity
• N-Screen 은 Connected Lifestyle 에서 비롯됨
Confidential and proprietary material for authorized persons only. 7

8. Connected Life & N-Screen
• 멀티 디바이스의 시대 사람들이 원하는 것
• 끊김없는 인터넷 경험을 지속시키고 싶은 것
(Seamless internet experience)
• 이것이 N-Screen 대응이 대두된 본질
• 사용자 경험에서 부터 출발해야 한다
M
e
Close Tab
n
u
Confidential and proprietary material for authorized persons only. 8

9. Connected Life Style
2.39 2.4
2.24
2.12
1.43
1.35 1.36
1.25
2003 2004 2005 2006
일일 평균 TV 시청시간 일일 평균 인터넷 사용시간
출처 : 한국방송광고공사(KOBACO)
Confidential and proprietary material for authorized persons only. 9

10. 다양한 형태의 N-Screen 패턴
Confidential and proprietary material for authorized persons only. 10

11. II. N-SCREEN을 위한 HTML5 기술
Confidential and proprietary material for authorized persons only. 11

12. N-Screen 대응에 필요한 요소
Data • Text, Image, Information
Multimedia Contents • Video, Music
GUI • Resolution, Screen Size independent
Confidential and proprietary material for authorized persons only. 12

13. N-Screen 대응 | Data
• Web은 처음부터 원격지간의 정보 교환을 위해 탄생된 것
• 물리적 저장매체를 통한 데이터 이동의 불편
• Cloud 서비스로의 급격한 전환
http://blog.softheme.com/cloud-services-convenient-for-small-business/
Page 1-13
Confidential and proprietary material for authorized persons only. 13

14. N-Screen 대응 | Multimedia Contents
• Video, Music
Page 1-14
Confidential and proprietary material for authorized persons only. 14

15. N-Screen 대응 | GUI
• 다양한 화면 사이즈에 유연하게 대응 가능해야 함
?
Confidential and proprietary material for authorized persons only. 15

16. HTML5?
Confidential and proprietary material for authorized persons only. 16

17. What is HTML5?
• 구조화된 문서 형태(Semantic)
• 다양한 기능 구현 가능(Application)
Confidential and proprietary material for authorized persons only. 17

18. HTML5 Features
• HTML5를 구성하는 주요 기술 요소
Semantics Offline & Storage Device Access Connectivity
Multimedia 3D Effect Performance CSS3
Confidential and proprietary material for authorized persons only. 18

19. N-Screen을 위한 웹 기술
• HTML5 Canvas
• CSS
• CSS3 Media Query
• Responsive Web Design
• SVG
• JavaScript UI Library
• Javascript Mobile UI Framework
Confidential and proprietary material for authorized persons only. 19

20. HTML5 Features | Canvas
• What is Canvas?
– Dynamic and interactive graphics
– Draw images using 2D drawing API
• Lines, curves, shapes, fills, ...
– Useful for graphs, applications, games, ...
Confidential and proprietary material for authorized persons only. 20

21. HTML5 Features | Canvas
• <canvas> 동작 원리
Confidential and proprietary material for authorized persons only. 21

22. HTML5 Features | CSS3
• 마크업 언어가 실제로 출력되는 방법 명세
• W3C 표준
• Animation 효과를 이용한 다이나믹한 화면 구성
• CSS3를 이용한 이미지 대체 가능
• Responsive Web Design
Confidential and proprietary material for authorized persons only. 22

23. HTML5 Features | SVG
• What is SVG?
– Scalable Vector Graphic
– HTML-like markup tags(XML) for drawing
Confidential and proprietary material for authorized persons only. 23

24. Responsive Web Design
• Fluid layout
 Adjustable screen resolution
• Flexible images
• Media Query
Confidential and proprietary material for authorized persons only. 24

25. Responsive Web Design
• Fluid Layout
Confidential and proprietary material for authorized persons only. 25

26. Responsive Web Design
• Flexible Image
• http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Confidential and proprietary material for authorized persons only. 26

27. Responsive Web Design
• Media Query
<link rel="stylesheet" href=“tablet.css" media="only screen and
(min-device-width : 768px) and (max-device-width : 1024px)">
Confidential and proprietary material for authorized persons only. 27

28. Responsive Web Design
• Media Query
Confidential and proprietary material for authorized persons only. 28

29. Responsive Web Design
• Media Query
• http://alldic.daum.net/
Confidential and proprietary material for authorized persons only. 29

30. III. 결론
Confidential and proprietary material for authorized persons only. 30

31. N-Screen 대응의 현실
• Responsive Web Design
 현재까지 디자인 페러다임 수준에 머물러 있음
 HP Enyo: 현재까지의 가능성
• Native VS. Web
 어떤 N-Screen을 원하는가?
Confidential and proprietary material for authorized persons only. 31

32. N-Screen이 개발자에게 주는 의미
• 각 산업에는 얼마나 많은 주체들이 존재할까요?
PC
Mobile
TV
Confidential and proprietary material for authorized persons only. 32

33. N-Screen 시대적 마인드가 필요하다
• N-Screen 시대는 인터넷이 가전으로의 진입을 의미
• 가전시장은 컴퓨터 시장보다 훨씬 복잡하고 다양한
주체들이 공존
• 어느 하나의 기술이 모든 것을 장악하지 못함
• 중립적이고 범용적인 기술이 각광받을 수 밖에 없음
Confidential and proprietary material for authorized persons only. 33

34. Thank you
Headquarter and Research Institute: Bando B/D 2,3,4,8F, 48-1 Banpo-dong, Seocho-gu, Seoul, KOREA. 137-040 Tel. +82 2 537 0538 Fax. +82 2 535 0534
Beijing Office: Room908, Building 16, China Central Place, No.89, Jian Guo lu Chaoyang District, Beijing, CHINA. Tel. +86 10 65331556/7 Fax. +86 10 65331559
U.S. Office: 3003 North First Street San Jose, CA 95134, U.S.A
Confidential and proprietary material for authorized persons only. 34