2012, 대한민국 웹 표준, 그 기로에 서다

3,847 views

Published on

오늘 한국인터넷전문가협회 주관의 웹 어워드 세미나 2012에서 발표한 자료입니다.

한국의 웹 현황과 HTML5를 중심으로 나아갈 방향, 2012년 이후에 대한 전망 등을 담아보았습니다.

Published in: Technology, Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,847
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
154
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

2012, 대한민국 웹 표준, 그 기로에 서다

  1. 1. 2012, 대한민국 웹 표준 그 기로에 서다Jonghong JeonETRI, SRCEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.com http://twitter.com/hollobithttp://www.etri.re.kr
  2. 2. 수많은 변화 속에서 우리는 ?2
  3. 3. Changes (스마트 모바일 시대)3 Source: ARG, 2012
  4. 4. Changes (스마트 모바일 시대)4 Source: http://slidesha.re/yMfSyy
  5. 5. Changes (스마트 모바일 시대)5
  6. 6. Changes (스마트 모바일 시대)q 2011년 스마트폰, 사상 처음 PC 전체 출하량 추월 http://www.bgr.com/2012/02/03/canalys-smartphone-shipments-surpassed-pc-shipments-in-2011/6
  7. 7. Changes (스마트 모바일 시대)q 82% intend to use emailq 71% expect to use a web browserq 57% plan to watch TV or download moviesq 56% intend to use social networkingq 55% plan to play games7
  8. 8. Changes (스마트 모바일 시대)q 2013년 10억대가 넘는 HTML5 가능 단말 등장8
  9. 9. Changes (스마트 모바일 시대)q 스마트기기 출하량 예측 종합 Source: 2011, 스마트 콘텐츠 시장 조사 보고서, KOCCA9
  10. 10. 한국의 웹 현실
  11. 11. 브라우저 사용 통계 (‘12.02) 한국과 세계 브라우저별 사용 현황 비교 100% 3.89 6.59 90% 10.48 Other 80% 24.67 Opera 70% Safari 60% Firefox 29.3 50% Chrome 82.48 40% IE 30% 20% 36.79 10% 0% 한국 전세계11 Source: Statcounter, http://bit.ly/xGxa5x
  12. 12. 비표준 기술 사용 현황 (2010년)q 주요 웹사이트 ActiveX 사용현황(‘10년 8월~11월, KISA)12 Source: 방통위, 인터넷이용환경개선 전략, 2011
  13. 13. Global Web Trends – Web Standardsq Alexa.com 통계13
  14. 14. Global Web Trends – Web Standards14
  15. 15. 이제 한국은 어디로 가야할까 ?15
  16. 16. 스마트 모바일 시대의 핵심은 ?
  17. 17. Our Dream ?17 http://youtu.be/6Cf7IL_eZ38
  18. 18. Screen Convergence18
  19. 19. Emerging N-Screen environmentq N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를 통해 이용할 수 있도록 하는 서비스 q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세 가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경q N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수 (Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되 는 여러 대의 단말기 장치를 의미19
  20. 20. Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service20
  21. 21. Solution ? Device Content Screen Fragmentations Application Platform Service21
  22. 22. Evolution ofWeb Platform Technology
  23. 23. Evolution of World W ide Web23
  24. 24. Evolution of World W ide Webq 1단계 (1989~1999) : 웹사이트의 시대, HTM L과 WAP § HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다 나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계q 2단계 (2000~2004) : XM L과 웹서비스, 시맨틱 웹 § XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아 니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는 단계q 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장 § 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이 끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련q 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대 § 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정 보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계24
  25. 25. Web Platform Layer User Interaction JavaScript + Web APIs Presentation HTML 5 & CSS 3 Transport HTTP Web Resource URIs Resources (Service, Content, Site)25
  26. 26. HTM L5 ?q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케 이션을 위한 JavaScript API 확장을 포함한 것 통칭되는 “HTML5” HTML5 CSS3 JavaScript 콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해 기능을 표현 § Web Storage § 문서구조의 상세화 § 표현 기능 모듈화 § Web Worker § 멀티미디어 § 웹 폰트 § Web Socket § 폼과 이벤트 등 § Geolocation API 서로 다른 다양한 브라우저 상에서 문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수 일관된 표현 기능 제공, 효과적이고 편 디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션 리한 표현 방식의 변경26
  27. 27. HTM L5 Roadmapq Progress: Last Call milestone reached § 25 May 2011. Published Last Call Working Draft of the HTML5 spec. § 03 August 2011. Ended Last Call (LC1) comment round for HTML5 spec.q Five other LCWDs published in May § Polyglot Markup: HTML-Compatible XHTML Documents (Eliot Graff) § Techniques for providing useful text alternatives (Steven Faulkner) § HTML Canvas 2D Context (Ian Hickson) § HTML+RDFa (Manu Sporny) § HTML Microdata (Ian Hickson)27
  28. 28. HTM L과 Web API의 진화28
  29. 29. 모바일 HTM L5의 가능성1. 새로운 웹 환경 : 새로운 모바일 웹, 유무선 통합2. Multi-Screen, Multi-Device, Multi-Platform의 해결사3. HTML5 Apps : HTML5 앱의 성장4. 애플/구글 지배로부터의 탈출구5. UI/UX 부분의 보완6. Rich Web : 보다 다양한 기능 제공, 주요 웹서비스 활용7. 광고 : 마이크로사이트, 상호작용형 HTML5 광고 시장8. 위치기반서비스 : 위치 기반 서비스9. 성능 향상 : 빠르고 뛰어난 웹 서비스 제공10. UI 개선 : 보다 편리한 UI 제공11. Hybrid App : 앱과 통합되는 환경12. 기타 새로운 기회들29
  30. 30. N-Screen의 종결자, HTM L5과 차세대 웹문제 해결책다중 플랫폼을 지원하는 응용 개발 Web Application단말간 데이터 이동 및 심리스 서비스 지원 Cloud & Web Application다중 단말의 식별과 지원 HTTP UAProf, CSS MQ다양한 화면 사이즈를 지원하는 응용 개발 SVG, CSS, HTML5그래픽 처리, 3D 콘텐츠 표현 HTML5 canvas, CSS, WebGL, X3DVideo 및 Audio 콘텐츠 처리 HTML5 video/AudioInteractive한 처리 JavaScript, CSS, HTML5 webforms멀티 터치 등의 지원 HTML5 & Web event오프라인 기능의 지원 HTML5 (localstorage)디바이스 제어 Device APIs콘텐츠 표준 호환성 검사 HTML/CSS Validation, mobileOK비동기적 처리, 쓰레드 관리, 전송 속도 개선 XHR, WebWorker, WebSocket보다 고속처리 가능하며 판매용 앱이 필요하다면 ? Hybrid Web App융합 서비스 지원 RESTful Web Services, LOD30
  31. 31. 2012년도 이후 전망
  32. 32. 2012년은 HTM L5 활성화의 원년!! Mobile Web 다양화 Golden Age Smart devices 표준화 완료 전국 서비스 HTML5 Apps LTE 2010 2011 2012 2013 hollobit@etri.re.kr32
  33. 33. 2012, 모바일 웹과 HTM L5 전망1. Mobile First2. Responsive Web & Responsive Ads3. Social + Local + Cloud + Mobile + Web4. Web UI Framework5. Cross Platform & Hybrid Web Application6. JavaScript Library & Web Application API Standards7. HTML5 Game & Mobile HTML5 Game8. Web Store & Native Web App9. HTML5 ebook & HTML5 services10.Web Operating System & RESTful WoT(Web of Things)33
  34. 34. [Trend- M obile First 1]q 1 billion consumers will own smartphones by 2016, with U.S. users owning 257 million smartphones and 126 million tablets. By 2016, 350 million employees will use smartphones, with 200 million of them bringing their own.q Mobile spending will reach $1.3 trillion by 2016, or 35 percent of the technology economy, with the app market generating $56 billion by 2015.q Apple, Google and Microsoft are expected to control 91 percent of the U.S. smartphone market and 98 percent of the U.S. tablet market by 2016.q Businesses are expected to double their spending on mobile projects by 2015. http://gigaom.com/2012/02/13/preparing-for-a-mobile-first-world/34
  35. 35. [Trend- Responsible Web Design 2]q Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.q Adjusting Screen Resolution § PART OF THE SOLUTION: FLEXIBLE EVERYTHINq Flexible Images § STOP IPHONE SIMULATOR IMAGE RESIZINGq Custom Layout Structure § CSS3 MEDIA QUERIES § JAVASCRIPTq Showing or Hiding Content § TOUCHSCREENS VS. CURSORSq A Showcase Of Responsive Web Design http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/35
  36. 36. [Trend- HTM L5 Games 3]q http://www.cuttherope.ie/36
  37. 37. [Trend- The Web platform 4]q Standards for Web Applications on Mobile: February 2011 current state and roadmap § http://www.w3.org/2011/02/mobile-web-app-state.html37
  38. 38. [Trend- Web Store 5] Any Devices Device Devices (PC, TV, Car, Tablet…) Client App Store Browser Browser Front Front Web Web Web Server Store Web App App App Server Server Store Store Store Native Native Web Cloud Native Appp App App App38
  39. 39. 대응 전략
  40. 40. HTM L5 어떻게 공부하나요 ?qHTML5 스펙 너무 어려워요! 게다가 모두 영어! § 한글 HTML5 번역본 è http://j.mp/html5ko (clearboth.org)q그래도 내용이 너무 많아요 § 웹 개발자를 위한 최소 스펙 è http://j.mp/html5develq디자이너/기획자도 알아야 하나요 ? § 많은 문서/책자들 è HTML5: Edition for Web Authors, …q알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ? § Google의 선물 è http://www.html5rocks.comq그 외에 꼭 추천해주실만한 것은 ? § 실전 HTML5 가이드 (한글 PDF) è http://j.mp/html5guide_ko § 기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들40 참고: http://xguru.net/635
  41. 41. JavaScript 전성 시대q JavaScript Libraries è http://bit.ly/tVFW6Y § Application Frameworks, Server Side Library, Testing Frameworks § Game Engines, Animation Library, Image manipulation • Akihabara, IMPACT, enchant.js, Unity3Dq Server-side JavaScript § Node.js : Evented Server-Side Javascript è http://nodejs.org • Google Chrome의 Javascript Engine V8을 단독으로 사용 • 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous • Thread 방식에 비해 뛰어난 성능 • HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈q Javascript로 컴파일 되는 언어들 è http://j.mp/hp2pnR § CoffeeScript & Kaffeine : Javascript를 더 간결하게 § J2js è Java ByteCode to JS, Script# è C# to JS41
  42. 42. 서적들 -모바일 HTM L5 Web App 관련42
  43. 43. 서적들 -디자이너/기획자를 위한 HTM L543
  44. 44. 서적 -웹 UI/UX 디자인 관련44
  45. 45. 2012년도 웹 전략q 웹 표준의 숙지와 활용q CSS 표준 기반의 웹 (응용) 디자인q Mobile UI Framework 및 자바 스크립트 스킬 향상q 모바일 웹 응용 성능 개선 방안q Hybrid Web App 고려q Mobile Cloud 고려q 크로스플랫폼 및 멀티 스크린 지원q 다양한 방면의 웹 응용 개발 시도 : 광고, 쇼핑, 게임, 기업용q 오픈 소스 커뮤니티 활동q HTML5 응용 모범 사례들의 도출과 공유q 국내외 시장분석과 글로벌 도전45
  46. 46. 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 OR46

×