위플래닛 발표자료 Meteor_js by WebFrameworks 925 views
웹-프론트엔드 프레임워크를 고르기 위한 팁 by WebFrameworks 7405 views
2016웹트렌드와 반응형웹 by Kim Ji-Man 3253 views
WebGL 20150309 by Jun Ho Lee 849 views
ECMA2015 INSIDE by Jun Ho Lee 996 views
#WEB WORLD INSIGHT CONFERENCE 2015
호준 이 , 학교 학생
JongMeong Pak , Samsung SDS 선임 at Samsung SDS
1. HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트 2015.06 NHN Technology Services 이준호
2. 1. HTML5 기술 현황 2. HTML5 적용 사례 분석 3. 사용자의 입장에서 기대되는 HTML5 4. 개발자의 입장에서 주목할 HTML5 목차
3. HTML5 기술 현황 HTML5의 현황을 알아봅니다. • HTML5 주요 스펙 • Desktop Browser HTML5 현황 • Mobile Browser HTML5 현황 • HTML5 지원 현황 비교
4. Multimedia  Audio  Video Semantic  Markup  Forms HTML5의 주요 목적은 과거 HTML의 호환성을 유지하면서 웹 개발자들이 실질적으로 부딪히는 문제를 해결 하고 HTML 문서가 좀더 의미 있으면서도 리치 웹 애플리케이션 기능( 멀티미디어를 포함한 )을 수행할 수 있는 범용 표준을 만드는 것. HTML5 주요 스펙 CSS  CSS3  Media Queries Graphics  2D Canvas  3D Canvas ( WebGL ) Real-Time  WebSocket Performance  Web Workers  RequestAnimationFrame Offline  Web Storage  Web Database Device  Notification  File
5. Desktop Browser HTML5 현황 국내 브라우저 점유율 IE10 24% IE8 24% IE11 19% IE9 14% Chrome 10% IE7 4% FireFox 2% IE6 1% Safari 1% IE10 IE8 IE11 IE9 Chrome IE7 FireFox IE6 Safari Opera Othres 국내 환경은 IE10, IE8, IE11, IE9, Chrome 사용자가 대부분. HTML5를 제대로 지원하지 못하는 브라우저의 점유율이 30.58%. Browser Score( 555 ) IE10 297 IE8 33 IE11 336 IE9 113 Chrome 526
6. Mobile Browser HTML5 현황 국내 브라우저 점유율 Android 4 82% iOS 3 6% iOS 7 5% iOS 8 3% Android 2 2% Android 1% iOS 6 1% Android 4 iOS 3 iOS 7 iOS 8 Android 2 Android iOS 6 iOS 4 iOS 5 Android 3 국내 환경은 Android 4.X 사용자가 대부분. HTML5를 지원하지 못하는 브라우저의 점유율은 거의 없음. Browser Score( 555 ) Android 4 306 iOS 3 116 iOS 7 363 iOS 8 405
7. HTML5 지원 현황 비교 Desktop과 Mobile 비교 69% 31% 지원 미지원 Desktop은 아직까지 30.58%의 브라우저가 HTML5를 제대로 지원하지 못하고 있음. Mobile은 3.54%의 브라우저가 HTML5를 지원하지 못하고 있음. 96% 4% 지원 미지원 Desktop Mobile
8. HTML5 적용 사례 분석 HTML5가 적용된 사례들을 분석하여 HTML5가 무엇을 할 수 있는지 알아봅니다. • 네이버 N드라이브 ( Desktop ) • 네이버 웹툰 ( Mobile ) • 주니어 네이버 뽀로로 놀이교실 ( Mobile )
9. 네이버 N드라이브 ( Desktop ) • File • 대용량 파일 업로드 • 멀티 파일( 폴더 ) 업로드 • 이어 올리기 • 기존에는 ActiveX, adobe AIR같은 plugin 기술로 가능하던 기능들을 HTML5로 완전히 대체.
10. 네이버 웹툰 ( Mobile ) • CSS3, Device • 댓글에서 볼 수 있는 사용자들의 반응. • 웹툰의 새로운 방향을 제시했다는 평가.
11. 주니어 네이버 뽀로로 놀이교실 ( Mobile ) • Canvas, Audio • 모바일 환경에서 Flash가 아닌 HTML5로만 미니 게임을 제공.
12. 기대되는 HTML5 사용자의 입장에서 기대되는 HTML5에 대해서 알아봅니다. • MultiMedia • Graphics • Desktop MultiMedia & Graphics 지원 현황 • Mobile MultiMedia & Graphics 지원 현황
13. Multimedia • Video • 최근에 WebGL을 사용한 360도 뷰를 제공
14. Graphics • WebGL • 브라우저에서 plugin 없이 3D 게임을 제공.
15. Graphics on Mobile • WebGL • 기존에는 Desktop에서만 가능했던 하이엔드 그래픽을 모바일에서도 plugin 없이 제공 가능.
16. Desktop MultiMedia 지원 현황 국내 브라우저 점유율로 본 75% 25% 지원 미지원 Desktop은 아직까지 25.26%의 브라우저가 Video와 Audio를 지원하지 못하고 있음. Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음. 75% 25% 지원 미지원 Video Audio
17. Desktop Graphics 지원 현황 국내 브라우저 점유율로 본 75% 25% 지원 미지원 Desktop은 아직까지 25.26%의 브라우저가 2D Canvas를 지원하지 못하고 있음. 또한 3D Canvas( WebGL )는 63.7%의 브라우저가 지원하지 못하고 있음. Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음. 36% 64% 지원 미지원 2D Canvas 3D Canvas
18. Mobile MultiMedia 지원 현황 국내 브라우저 점유율로 본 99% 1% 지원 미지원 Mobile은 이미 거의 모든 브라우저가 Video, Audio를 지원. 99% 1% 지원 미지원 Video Audio
19. Mobile Graphics 지원 현황 국내 점유율로 본 100% 0% 지원 미지원 거의 모든 브라우저가 2D Canvas를 지원. 3D Canvas 또한 대다수의 브라우저가 지원. 단, 하드웨어에서 지원하지 못하는 일부 기기가 있을 수 있음. 87% 13% 지원 미지원 2D Canvas 3D Canvas
20. 주목할 HTML5 그렇다면 개발자의 입장에서 주목해야 할 HTML5는 어떤 것이 있을까요? 주목해야 할 HTML5와 그로 인해 개발자가 얻을 수 있는 것들을 알아봅니다. • GPU & Mobile • GPU를 사용하는 HTML5 • Mobile • Hybrid App
21. GPU를 활용한 Mobile Graphics Mobile에서 거의 모든 브라우저가 Graphics 지원 Mobile에서 Graphics 에 대한 사용자의 기대 Graphics의 핵심은GPU 사용자 입장에서 기대되는 분야이면서 Mobile에서 환경도 이제 막 준비된 분야. Mobile에서 Graphics의 핵심은 GPU. GPU & Mobile
23. GPU
24. GPU를 사용하는 HTML5 요소들의 특징 CSS3  특정 속성을 지정한 Element는 GPU에서 랜더링  표현력의 한계 2D Canvas  CPU 의존도가 비교적 높음 SVG  복잡도가 높아질 수록 성능 저하  동적인 제어가 까다로움 3D Canvas ( WebGL )  성능은 가장 탁월  지원되는 브라우저 점유율이 비교적 적음 3D Canvas ( WebGL )이 가장 탁월한 성능을 보장하지만. Desktop의 64%, Mobile의 13% 브라우저가 지원하지 못하고 있음. GPU를 사용하는 HTML5
25. GPU를 사용하는 HTML5 비교 DOM Video SVG Video CANVAS 2D Video WEBGL
26. Mobile Mobile에서 Graphics 점유율 이미 Desktop에서 Flash Player 점유율과 거의 맘먹는 수준. 사용자들의 기대 Mobile의 성능의 이유로 기존까지 제대로 제공되지 못하던 기능. 때문에 사용자들의 기대가 가장 큰 분야이기도 함. 개발자로서 기대 기존 단순 어플리케이션 형태의 Mobile Web에서 고성능 하이엔드 Graphics Mobile Web으로 한 수준 높은 컨텐츠를 제공할 수 있을 것. GPU를 활용한 성능 향상 사용자들의 기대 고성능 MobileWeb
27. Hybrid App WEB vs APP 이미 Web이냐 App이냐의 논쟁은 의미가 많이 없어진 상태. 거의 모든 App들이 WebView를 전체, 또는 부분적으로 적용하고 있기 때문. Hybrid App의 단점 기존 Hybrid App의 단점은 Native App에 비해 떨어지는 성능. Hybrid App의 장점 멀티 플랫폼 지원 가능. 항상 최신의 상태. 웹 표준 기술을 사용하여 개발 속도가 빠르고 개발 비용이 비교적 저렴. GPU를 활용한 성능 향상 Hybrid App 의 장점 고성능 HybridApp
위플래닛 발표자료 Meteor_js
캔버스 파이그래프 만들기