모바일 웹플랫폼 기술 동향 뮤텍소프트 개발이사 홍종진
모바일 웹 기술 변화
모바일 웹사이트
모바일 웹  Market Morgan Stanley, Mobile Internet Report , 2010.4
개방형 웹 플랫폼
Web Application <ul><li>an application is accessed over a network such as the Internet or an intranet. </li></ul><ul><li>a...
Web Application
Web Application Architecture OS Kerner/Device Driver OS Service(File, Media, Camera, etc) Web Runtime(Webkit) Web Applicat...
Web Application pros & cons <ul><li>장점 </li></ul><ul><ul><li>서버와 클라이언트 구조로 설치 및 업그레이드에 대한 비용이 없음 . ( 실행시 항상 다운로드 받음 ,  네트워...
Web OS(Chrome OS) <ul><li>모든 어플을  Web 어플리케이션으로 실행 </li></ul><ul><li>하드웨어 및  OS 기능을 최소화함 . Web  어플을 실행할 수 있는 기능만 갖춤 . </li>...
Web OS(Chrome OS)
Chrome OS
Phone Cap <ul><li>HTML 과 자바스크립트를 이용한 모바일 앱 프레임워크으로 아이폰 / 안드로이드 / 팜 / 블랙베리 / 심비안까지 동시 지원 </li></ul><ul><li>Web  어플리케이션 개발 환...
HTML 5  왜 이슈 인가 ? <ul><li>스티브 잡스 ( 애플 ) 의  Flash 와  HTML5 에 대한 발언 </li></ul><ul><li>YouTube, Google 의 연이은  HTML5  지원 발표 </...
주요 기사 <ul><li>Microsoft &quot;all in&quot; on Internet Explorer 9 supporting HTML5 </li></ul><ul><ul><li>&quot;We're all i...
HTML History <ul><li>HTML 1.0 </li></ul><ul><ul><li>개발 년도 :1989 년 </li></ul></ul><ul><ul><li>HTML 의 첫 공개 버전으로 ,  웹 페이지에 이미...
HTML 5 <ul><li>HTML5  정의 </li></ul><ul><ul><li>HTML5 는  HTML 의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다 . 2004 년  6 월  Web Hype...
HTML 5  주요  API <ul><li>특히 웹 애플리케이션 작성을 보다 쉽도록 하기 위한 몇 가지  API 를 도입 하였는데 아래를 참고 하자 . </li></ul><ul><ul><li>Canvas  요소를 사용하...
Browser  지원 현황 <ul><li>HTML5 의 많은 기능들이 이미 파이어폭스  2.0 과 오페라  9.0 에 탑재 </li></ul><ul><li>올해 안으로 출시될 파이어폭스  4.0 에 HTML5 의 대부분...
실제  HTML5  어플 <ul><li>그래픽 작성 도구 :  http://mugtug.com/sketchpad/ </li></ul>
HTML  현재와 미래 <ul><li>웹 응용 프로그램은 현재 </li></ul><ul><ul><li>데스크톱 응용프로그램의 특징과 기능을 가지는 웹 응용프로그램  (RIA: Rich Internet Applicatio...
References <ul><li>HTML5 Specification :  http://www.w3.org/TR/html5/   </li></ul><ul><li>HTML5 differences from HTML4 :  ...
Upcoming SlideShare
Loading in …5
×

모바일 웹플랫폼 기술 동향

3,092 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,092
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

모바일 웹플랫폼 기술 동향

  1. 1. 모바일 웹플랫폼 기술 동향 뮤텍소프트 개발이사 홍종진
  2. 2. 모바일 웹 기술 변화
  3. 3. 모바일 웹사이트
  4. 4. 모바일 웹 Market Morgan Stanley, Mobile Internet Report , 2010.4
  5. 5. 개방형 웹 플랫폼
  6. 6. Web Application <ul><li>an application is accessed over a network such as the Internet or an intranet. </li></ul><ul><li>a computer software application is hosted in a browser-controlled environment (e.g. a Java applet) or coded in a browser-supported language (such as JavaScript, combined with a browser-rendered markup language like HTML) </li></ul><ul><li>A browser-supported language by Plug-ins </li></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><li>Java </li></ul></ul><ul><ul><li>C# </li></ul></ul><ul><li>Webkit & THML 5 </li></ul><ul><li>Hybrid Web Application = Native App + Web App </li></ul>
  7. 7. Web Application
  8. 8. Web Application Architecture OS Kerner/Device Driver OS Service(File, Media, Camera, etc) Web Runtime(Webkit) Web Applications Internet JIL/BONDI
  9. 9. Web Application pros & cons <ul><li>장점 </li></ul><ul><ul><li>서버와 클라이언트 구조로 설치 및 업그레이드에 대한 비용이 없음 . ( 실행시 항상 다운로드 받음 , 네트워크 연결이 안된 경우 캐시 기능 지원 ) </li></ul></ul><ul><ul><li>표준 웹 스펙 및 웹 엔진을 통한 다양한 디바이스 지원 </li></ul></ul><ul><ul><li>지속적으로 발전하고 있으며 Native 어플 기능의 많은 부분 수용 .(2D/3D) </li></ul></ul><ul><ul><li>다양한 인터넷 서비스와 쉽게 연동 (Mesh-up) 해서 서비스 가능함 . </li></ul></ul><ul><li>단점 </li></ul><ul><ul><li>속도 문제 해결 필요 . </li></ul></ul><ul><ul><li>하드웨어 가속 기능 사용제한 . 3D 등 지원이 필요함 . 현재 이 부분들 지속적으로 표준화 및 개발 진행중 . </li></ul></ul><ul><ul><li>HTML 5 등의 표준화 과정에 다양한 의견을 반영으로 시간이 많이 필요함 . </li></ul></ul><ul><ul><li>게임등에는 아직 적용하기 힘듦 . </li></ul></ul>
  10. 10. Web OS(Chrome OS) <ul><li>모든 어플을 Web 어플리케이션으로 실행 </li></ul><ul><li>하드웨어 및 OS 기능을 최소화함 . Web 어플을 실행할 수 있는 기능만 갖춤 . </li></ul><ul><li>간단한 윈도우 시스템 적용 . </li></ul><ul><li>클라이언트 서버 기반의 씬 클라이언트 환경 추구 . 모든 기능을 서버 중심으로 처리 . </li></ul>
  11. 11. Web OS(Chrome OS)
  12. 12. Chrome OS
  13. 13. Phone Cap <ul><li>HTML 과 자바스크립트를 이용한 모바일 앱 프레임워크으로 아이폰 / 안드로이드 / 팜 / 블랙베리 / 심비안까지 동시 지원 </li></ul><ul><li>Web 어플리케이션 개발 환경 </li></ul><ul><li>오픈 소스 프로젝트 </li></ul><ul><li>http://phonegap.com/ </li></ul>
  14. 14. HTML 5 왜 이슈 인가 ? <ul><li>스티브 잡스 ( 애플 ) 의 Flash 와 HTML5 에 대한 발언 </li></ul><ul><li>YouTube, Google 의 연이은 HTML5 지원 발표 </li></ul><ul><li>마이크로소프트가 차기 버전 웹 브라우저 (IE9) 에 HTML5 를 지원하기 위하여 주력 </li></ul>
  15. 15. 주요 기사 <ul><li>Microsoft &quot;all in&quot; on Internet Explorer 9 supporting HTML5 </li></ul><ul><ul><li>&quot;We're all in&quot; for HTML5, said Windows division President Steve Sinofsky, echoing Steve Ballmer's comment last week that Microsoft is &quot;all in&quot; for cloud computing. 2010-03-16 일 마이크로소프트 윈도우 사업부 담당자 Steve Sinofsky 는 지난 주 스티브 발머가 언급 한 “마이크로 소프트는 클라우드 컴퓨팅에 올인 중이다”와 동일 선상에 있는 “현재 우리는 Html5 에 올인 중이다” 라는 말을 전했다 ... </li></ul></ul><ul><ul><li>http://seattletimes.nwsource.com/html/businesstechnology/2011362220_microsoftmix17.html </li></ul></ul><ul><li>플래시 없이 동영상 재생…유튜브 HTML5 지원 ‘총력’ </li></ul><ul><ul><li>유튜브 (www.youtube.com) 는 HTML5 지원을 점차 확대할 계획이라고 ... </li></ul></ul><ul><ul><li>http:// www.ddaily.co.kr/news/news_view.php?uid=60097   </li></ul></ul><ul><li>스티브 잡스 , 어도비 플래시 맹비난 </li></ul><ul><ul><li>어도비의 플래시 지원에 대해서는 일말의 가치도 없다고 ... 그는 앞으로 HTML5 가 대세이며 , 이에 따라 플래시 없이도 브라우저 상에서 멀티미디어를 구현 할 수 있게 될 것이라고 주장 ... </li></ul></ul><ul><ul><li>http://itnews.inews24.com/php/news_view.php?g_serial=473120&g_menu=020600 </li></ul></ul><ul><li>MS, HTML5 지원 브라우저 내놓는다 </li></ul><ul><ul><li>마이크로소프트 (MS) 가 차세대 웹표준 HTML5 를 지원하는 브라우저를 선보인다… </li></ul></ul><ul><ul><li>IE9 베타버전에서 HTML5 를 구현하는 기능이 포함되고… </li></ul></ul><ul><ul><li>http://www.zdnet.co.kr/ArticleView.asp?artice_id=20100305113305 </li></ul></ul><ul><li>Google Gears 개발 중단 , HTML5 로 방향 전환 </li></ul><ul><ul><li>구글 기어스 (Google Gears) 의 개발 중단을 선언 ... </li></ul></ul><ul><ul><li>어플리케이션의 캐시 , 데이터베이스 등 구글 기어스의 주요 기능은 HTML5 에서 이어지고 있기 때문에 앞으로는 HTML5 에 주력하고 싶다는 뜻을 밝히고 ... </li></ul></ul><ul><ul><li>http://kr.engadget.com/2009/12/08/google-gears-html5/   </li></ul></ul>
  16. 16. HTML History <ul><li>HTML 1.0 </li></ul><ul><ul><li>개발 년도 :1989 년 </li></ul></ul><ul><ul><li>HTML 의 첫 공개 버전으로 , 웹 페이지에 이미지를 삽입하는 인라인 이미지 및 텍스트 컨트롤 지원을 시작함 . </li></ul></ul><ul><li>HTML 2.0 </li></ul><ul><ul><li>개발 년도 : 1995 년 </li></ul></ul><ul><ul><li>옵션 버튼 및 텍스트 박스 같은 폼 구성 요소가 생김 </li></ul></ul><ul><ul><li>HTML 2.0 부터는 대부분의 브라우저와 호환 가능 </li></ul></ul><ul><li>HTML 3.2 </li></ul><ul><ul><li>개발 년도 : 1997 년 </li></ul></ul><ul><ul><li>테이블 값은 폼 구성 요소 확장 . </li></ul></ul><ul><li>HTML 4.01 </li></ul><ul><ul><li>개발 년도 : 1999 년 </li></ul></ul><ul><ul><li>스타일시트 ( 일명 css) 에 대한 지원 시작 . </li></ul></ul><ul><ul><li>HTML 의 스크립팅 저장공간 확대 및 동영상 등의 멀티미디어 구성요소 지원 확대  </li></ul></ul><ul><li>HTML5 </li></ul><ul><ul><li>개발 년도 : 2004 년 </li></ul></ul><ul><ul><li>2004 년 WHATWG 의 초안으로부터 시작하여 2007 년부터 W3C HTML W/G 에서 표준안이 만들어 지고 있음 , 2009 년 10 월 WHATWG 의 현재 최종 제안 상태 . </li></ul></ul><ul><ul><li>Drag & Drop, Audio 및 Video 표시 , Vector 그래픽 표시를 위한 요소 등이 새로 도입 </li></ul></ul>
  17. 17. HTML 5 <ul><li>HTML5 정의 </li></ul><ul><ul><li>HTML5 는 HTML 의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다 . 2004 년 6 월 Web Hypertext Application Technology Working Group(WHATWG) 에서 웹 어플리케이션 1.0 이라는 이름으로 세부 명세 작업을 시작하였다 . 2009 년 10 월 WHATWG 의 현재 최종 제안 상태이다 . </li></ul></ul><ul><ul><li>HTML5 는 HTML 4.01, XHTML 1.0, DOM Level 2 HTML 에 대한 차기 표준 제안이다 . 이것은 어도비 플래시나 마이크로소프트의 실버라이트 , 썬의 자바 FX 와 같은 플러그인 기반의 인터넷 어플리케이션에 대한 필요를 줄이는데 목적을 두고 있다 . </li></ul></ul>
  18. 18. HTML 5 주요 API <ul><li>특히 웹 애플리케이션 작성을 보다 쉽도록 하기 위한 몇 가지 API 를 도입 하였는데 아래를 참고 하자 . </li></ul><ul><ul><li>Canvas 요소를 사용하여 2D 그래픽 API 를 제공 </li></ul></ul><ul><ul><li>비디오 및 오디오를 재생 하기 위한 video 및 audio 요소 도입 . </li></ul></ul><ul><ul><li>오프라인 웹 어플리케이션을 가능 하는 API 제공 . </li></ul></ul><ul><ul><li>웹 어플리케이션이 특정 프로토콜이나 미디어 타입을 등록 할 수 있도록 허용 하는 API 제공 </li></ul></ul><ul><ul><li>사용자가 웹 컨텐트를 수정 할 수 있는 API 제공 . </li></ul></ul><ul><ul><li>드래그 앤 드랍을 가능하게 하는 API 제공 . </li></ul></ul><ul><ul><li>페이지 앞 / 뒤 네비게이션을 지원할 방문 기록 표시용 API 기능 . </li></ul></ul><ul><ul><li>다중 메시징 처리 . </li></ul></ul><ul><ul><li>Geolocation 과 같은 위치 확인 기능 및 브라우저 로컬 스토리지 , 다중 스레드처리가 가능한 Web Worker, 웹 SQL Database 를 위한 Query 등도 지원 한다 . </li></ul></ul>
  19. 19. Browser 지원 현황 <ul><li>HTML5 의 많은 기능들이 이미 파이어폭스 2.0 과 오페라 9.0 에 탑재 </li></ul><ul><li>올해 안으로 출시될 파이어폭스 4.0 에 HTML5 의 대부분 지원 </li></ul><ul><li>오페라와 사파리의 신 버전에도 관련 구현 작업이 진행중 </li></ul><ul><li>마이크로소프트가 차세대 브라우저 IE9 에서 HTML5 지원 </li></ul>
  20. 20. 실제 HTML5 어플 <ul><li>그래픽 작성 도구 : http://mugtug.com/sketchpad/ </li></ul>
  21. 21. HTML 현재와 미래 <ul><li>웹 응용 프로그램은 현재 </li></ul><ul><ul><li>데스크톱 응용프로그램의 특징과 기능을 가지는 웹 응용프로그램 (RIA: Rich Internet Application) 은 기존 웹 문서가 가지는 단순한 정보 전달 기능의 한계를 넘어 사용자와의 원활한 Interaction 에 대한 기능까지 제공한다 . </li></ul></ul><ul><ul><li>이러한 RIA 의 플랫폼은 어도비의 플래시 , 마이크로소프트의 실버라이트 와 썬의 JavaFX 같은 플러그인 기반의 기술들이 95% 이상 점유율 차지 하면서 시장을 분할 하고 있다 . 하지만 결국 Rich UI 를 제공 하기 위해서는 사용자가 자신의 브라우저에 이들 플러그인을 설치를 해야 하는 불편함이 있다 . ( 결국 비표준 방식 이다 ) </li></ul></ul><ul><li>HTML 5 필요성 </li></ul><ul><ul><li>또한 웹이 이렇게 발전 하게 된 이유는 웹 개발 환경이 개방 되어 있었기 때문인데 앞에서 언급한 플러그인 기반 Rich UI 웹 기술들은 특정 플랫폼에 한정 되어 있고 특히 읽거나 복사 , 저장 등이 어려운 바이너리를 포함 하고 있기 때문에 웹을 성공적으로 이끌어 왔던 보편적 접근성이 결여 되어있다 . </li></ul></ul><ul><ul><li>HTML 소스를 보고 복사를 하며 복사된 소스를 바탕으로 재편집의 과정을 거쳐 새로운 결과물을 생성 하는 것이 쉬웠기 때문에 웹의 비약적인 성공이 가능 했다 .  </li></ul></ul><ul><ul><li>주요한 개발 플랫폼인 웹이 윈도우와 같은 종전의 플랫폼이 했던 방식으로 소수의 업체에 의해 좌지우지 된다면 시대를 거슬러 올라가는 처사일 수 밖에 없다 . </li></ul></ul><ul><li>HTML 5 미래 </li></ul><ul><ul><li>HTML5 가 표준안으로는 부족했던 이전 버전의 HTML 을 보완 하고 Mobile Web 플랫폼으로써 최적화 되어 있으며 폐쇄적이던 RIA 개발 환경을 개방 하는데 많은 역할을 하게 될 것이라고 생각 되지만 HTML5 는 현재 표준안이 아닌 제안 상태 이며 대부분의 웹 브라우저에 적용 되는 시기는 불명확 하다 . 특히나 많이 사용되고 있는 인터넷 익스플로러에서 일부 HTML5 기술에 대한 지원 부족은 개발자들에겐 적지 않은 문제다 . </li></ul></ul><ul><ul><li>또 웹브라우저 벤더 및 이해관계가 얽혀 있는 플러그인 업체 등도 각기 입장을 달리 하고 있어 HTML5 가 헤쳐 나아가야 할 길이 결코 쉬워만 보이지는 않는다 . </li></ul></ul>
  22. 22. References <ul><li>HTML5 Specification : http://www.w3.org/TR/html5/ </li></ul><ul><li>HTML5 differences from HTML4 : http://dev.w3.org/html5/html4-differences/ </li></ul><ul><li>Dive Into HTML5 : http://diveintohtml5.org/ </li></ul><ul><li>HTML5 Doctor : http://html5doctor.com/ </li></ul><ul><li>HTML5 의 모든 것 : http://channy.creation.net/blog/776 </li></ul><ul><li>Mobile Web vs. Mobile App : http://mobizen.pe.kr/911 </li></ul><ul><li>HTML5 와 웹의 미래 (HTML5 And The Future Of Web) : http://blog.naver.com/hanoul76psy?Redirect=Log&logNo=102116636 </li></ul><ul><li>HTML 5 데모 : </li></ul><ul><ul><li>http://craftymind.com/factory/html5video/CanvasVideo.html </li></ul></ul><ul><ul><li>http://www.kesiev.com/akihabara/ </li></ul></ul><ul><ul><li>http://googlewebtoolkit.blogspot.com/2010/04/look-ma-no-plugin.html </li></ul></ul>

×