반응형 웹기반 멀티스크린 ui...
TRANSCRIPT
전세계 Smart Device 판매량 추이
2012년 한해 전세계 스마트폰 판매량은 7억대이상, 타블렛은
1억1천만대 이상 판매됨
<전세계 Smart Phone 판매량>
<전세계 Tablet 판매량>
Smart Device의 서비스 개발 이슈
수많은 플랫폼(Android, iPhone, Windows Phone..)과 디바이스 종류
Smart Device의 서비스 개발 이슈
다양한 디바이스의 크기, 해상도
Android phone
iPhone4/4S
iPad1/2
320px
480px
640px
768px
800px
iPhone 3GS
480px
532px
800px
960px
1024px
1280px
Android tablets
720px
Smart Device의 서비스 개발기술 트렌드
Native App
Hybrid App
Web App
스마트앱 개발 기술의 흐름은 Native방식에서 Web방식으로…
Web 기술로 개발(HTML, CSS, Javascript…)
전세계 모바일 웹브라우저 사용 통계
< source : Statcounter, http://gs.statcounter.com >
최근 1년간 전세계 모바일 웹브라우저 사용 통계(2011/5~2012/5)
국내모바일 웹브라우저 사용 통계
< source : Statcounter, http://gs.statcounter.com >
최근 1년간 국내 모바일 웹브라우저 사용 통계(2011/5~2012/5)
< Source: http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg >
HTML5
현재 국내외 주로 사용되고 있는 스펙은 XHTML이며 과도기를 거쳐
HTML5가 모바일웹의 표준 스펙으로 자리잡을 것으로 예상
Mobile Web Standards Evolution
HTML5의 주요 특징
W3C에서 2014년 2분기에 HTML5 표준안 공식 릴리즈 예정
HTML5
<source: focus.com>
전세계 PC 웹브라우저 사용 통계
< source : Statcounter, http://gs.statcounter.com >
최근 1년간 전세계 PC 웹브라우저 사용 통계(2011/5~2012/5)
국내 PC 웹브라우저 사용 통계
< source : Statcounter, http://gs.statcounter.com >
최근 1년간 국내 PC 웹브라우저 사용 통계(2011/5~2012/5)
멀티스크린…?
3-Screen?
N-Screen?
Multi-Screen?
Multi-Screen의 정의
N-Screen이란 하나의 스크린으로 볼 수 있
었던 컨텐츠를 여러 개(N개)의 스크린에서
서로 상호작용하면서 볼 수 있도록 만드는
기술을 일컫는 것으로써 기존 3-Screen의
개념이 국내에 들어와서 변경된 명칭이다.
3-Screen 이란 2004년도 AT&T사의 컨퍼
런스에서 최초로 주창한 것으로 TV, PC, 모
바일을 인터넷으로 연결해 사용자들이 언제,
어디서나 콘텐츠를 이용할 수 있게 해주는
서비스로써 장소와 기기가 달라져도 끊김
없는(Seamless) 서비스를 제공하는 기술을
말한다.
Multi-Screen
Multi-Screen의 개념이해
Seamless Streaming Adaptive Contents Data Sync Responsive UI
Multi-Screen의 개념이해
Seamless Streaming
현재 TV에서 보는 영화나
드라마등을 끊김없이 이어서
스마트폰이나 타블렛등에서
볼 수 있는 것
Multi-Screen의 개념이해
Adaptive Contents
현재 TV에서 나오는
스포츠경기의 상세정보,
드라마의 촬영장 정보등
부가정보를 스마트폰이나
타블렛등으로 볼 수 있는 것
Multi-Screen의 개념이해
Data Sync
PC에서 작성한 내용이
스마트폰에도 자동으로
업데이트 되고,
스마트폰에서 내용을
수정하면 PC에도 자동으로
업데이트 되는 것
Multi-Screen의 개념이해
Responsive UI
동일한 정보/컨텐츠를 PC,
스마트폰, 타블렛의
화면크기에 따라 각각
최적화된 레이아웃과 사용자
경험을 제공하는 것
Responsive Web UI의 정의
Responsive Web UI(반응형 웹UI)은 하나의 소스 코드로 각각의 디바이스 환경에 반응하여 자동으로 레이아웃등이 최적화되도록 구현된 UI개발 방법
PC용 화면
Viewport란 기종별로 화면의 크기가 다른 스마트폰에서 화면 사이즈에 맞춰 표시해주는 기능으로, PC용 화면을 모바일에서 보기 위해 Viewport를 선언하면 자동으로 크기가 조절된다.
Viewport 미사용 Viewport 사용
Responsive Web UI 기술 – Viewport
Media Query란 디바이스의 크기에 따라 CSS를 다르게 로딩할 수 있도록 하여 화면 사이즈 별로 Web Design을 다르게 구현할 수 있는 기능이다.
Responsive Web UI 기술 – Media Query
CSS3 Media Query
Screen and (max-width: 699px)
Screen and (min-width: 1281px)
Screen and (min-width: 700px)
and (max-width: 1280px)
up to 699 700 ~ 1280 1281+
Tablet Desktop Smart Phone
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Responsive Web UI Example
http://pr.hyundai.com
DevOn M-Screen UI Platform
DevOn M-Screen UI Platform은 One Source Multi Use 방식으로 선택하여 컨텐츠는 하나의 HTML 소스로만 개발하고 DevOn M-Screen UI 플랫폼을 통해 다양한 디바이스에 최적화된 UI로 대응할 수 있음
DevOn M-Screen UI Platform
DevOn M-Screen UI Platform은 다양한 모바일 디바이스들이 출시됨에 따라 급변하는 사용자 UX 환경에 대응할 수 있도록 다년간에 걸쳐 축적된 LG CNS의 웹 및 모바일 기술들을 집약하여 개발한 Multi Screen용 UI 개발 플랫폼임
디바이스 별 UI패턴 도출
Smartphone Tablet Desktop
레이아웃 패턴 30여 종 및 네비게이션 패턴 3종
레이아웃 패턴 32종 및 네비게이션 패턴 4종
레이아웃 패턴24종 및 네비게이션 패턴 10종
국내외 다양한 업무 시스템 구축 경험 및 금융/쇼핑 카테고리 모바일 웹/앱
사례분석을 통해 디바이스 별 패턴을 추출함
DevOn M-Screen UI 샘플시연
M-Screen UI Platform을 활용하여 하나의 Source로 SmartPhone,
Tablet, PC 각각에 최적화된 화면 레이아웃과 디자인 구현
스마트폰 , 타블렛, 스마트TV등 다양한 디바이스가 끊임 없이 시장에 쏟아져 나오고 있으며, 다양한 플랫폼의 통합 연계에 대한 니즈가 자연 발생적으로 생겨날것이다.
이러한 수많은 기기를 묶을 수 있는 기기 독립적이고 가장 범용적인 기술은 현재 Web 밖에 없다. 그리고 이에 대한 가능성을 HTML5가 현실화 할 것이다.
3-Screen
2007 AT&T 3-screen play strategy
OSMU,Killer Content
Apple TV
2007.03
iPhone
2008.06
Smart Phone
Smart TV
Smart Device
Multi-Device
Multi-Screen
N-Screen
iPad
2010.03
2008 Cloud Service
Smart Pad
Tablet
iCloud
2011
2007
향후전망
HTML5
? !
Question and Answer