Mobile App, Mobile Web : Introduction
Upcoming SlideShare
Loading in...5
×
 

Mobile App, Mobile Web : Introduction

on

  • 2,641 views

천안 북일고 학생들을 대상으로 2시간 정도 동안 HTML5과 웹을 중심으로 모바일 웹과 모바일 앱에 대한 개요를 수업 형식으로 소개했던 자료입니다.

천안 북일고 학생들을 대상으로 2시간 정도 동안 HTML5과 웹을 중심으로 모바일 웹과 모바일 앱에 대한 개요를 수업 형식으로 소개했던 자료입니다.

It's an introduction to the Mobile Web and Mobile App.

Statistics

Views

Total Views
2,641
Views on SlideShare
2,640
Embed Views
1

Actions

Likes
1
Downloads
131
Comments
4

1 Embed 1

https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 좋은자료 감사합니다.
    Are you sure you want to
    Your message goes here
    Processing…
  • 고맙습니다.
    Are you sure you want to
    Your message goes here
    Processing…
  • 감사합니다. 기본개념 이해에 많은 도움이 되었습니다.
    Are you sure you want to
    Your message goes here
    Processing…
  • 감사합니다.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile App, Mobile Web : Introduction Mobile App, Mobile Web : Introduction Presentation Transcript

  • 모바일 앱, 모바일 웹 소개Jonghong JeonETRI, SRCEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.com http://twitter.com/hollobithttp://www.etri.re.kr
  • 스마트폰이 가져온 생활 속 변화들4
  • 앱 생태계의 성장5
  • 앱 생태계 성장의 배경 - 스마트 모바일 시대6 Source: ARG, 2012
  • 앱 생태계 성장의 배경 - 스마트 모바일 시대7 Source: http://slidesha.re/yMfSyy
  • 앱 생태계 성장의 배경 - 스마트 모바일 시대8
  • 1. World Wide Web의 역사
  • 2011.8.6
  • Growth of Web Sites Total Sites Across All Domains August 1995 - November 2011 525,998,433 sites11 http://news.netcraft.com/archives/2011/11/07/november-2011-web-server-survey.html#more-5091
  • 20 Presents the WWW has given usq Vast amounts of digital informationq Organized access.q Communication.q Multimedia sharingq Entertainment.q E-commerce.q Real-time news.12
  • Online Activities, 2000 ~ 2009 http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx13
  • World Wide Web (1989~1991)14
  • World Wide Web (1991 ~ 2005) Before W3C Wirelss Internet WS, SW UWS MWI Mobile RFID WAP 1.0 WAP 1.1 WAP 1.2 WAP 2.0 2005 URI XML-RPC RDF OWL HTTP 1.0 HTTP 1.1 (IETF RFC1945) (RFC2616) XML SOAP 1.2 Semantic Web Concept15
  • History of WWW-KR Workshop WWW-Forum은 1994년 7월초에 만들어진 WWW 관련 메일링 리스트입니 다. 현재 가입 인원은 약 250여명으로 지난 10여개월 동안 국내 WWW의 발전 및 보급에 많은 노력을 기울인 메일링 리스트입니다. WWW-Forum 에서 주로 다루는 내용은 Web server의 설치, Client의 설치 및 사용, 각종 Web site 의 소개등 WWW에 관련된 전반적인 것을 다루고 있습니다. (제1 회 워크샵 안내문) 등록비 : 학생 : 5,000원 , 일반 : 10,000 원16
  • History of WWW-KR Workshop17
  • Evolution of World Wide Web18
  • Evolution of World Wide Web http://evolutionofweb.appspot.com/19
  • Evolution of World Wide Webq 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP § HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다 나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계q 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹 § XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아 니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는 단계q 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장 § 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이 끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련q 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대 § 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정 보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계20
  • 2. 웹 기술의 확산 – 왜 웹인가 ?
  • Changes (스마트 디바이스 급성장) Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/22
  • Changes (무선네트워크 진화) 아날로그망 GSM/CDMA망 WCDMA망 OFMDA망 ?? 아날로그폰 디지털폰 피처폰/스마트폰 고성능 스마트폰 가상 스마트 기기 아날로그 디지털 IP 기반 All IP 기반 All IP 기반 음성통화 음성통화 데이터서비스 시작 데이터서비스 확산 초고속 데이터 서비스 음성 통신 서비스의 시대 데이터 통신 서비스의 시대23
  • Emerging N-Screen environmentq N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를 통해 이용할 수 있도록 하는 서비스 q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세 가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경q N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수 (Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되 는 여러 대의 단말기 장치를 의미24
  • Media25
  • Media & Screen26
  • Media Convergence27
  • Screen Convergence28
  • Fragmentation is a big problemq Network Fragmentationq Service Fragmentationq Device Fragmentationq Platform Fragmentationq Screen Fragmentationq Application Fragmentationq Content Fragmentation29 http://is.gd/yXvTj7
  • Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service30
  • Solution ? Device Content Screen Fragmentations Application Platform Service31
  • 3. 웹 플랫폼 기술로의 진화
  • Open Internet, Open Web Jonathan Zittrain Source: http://bit.ly/4OgbGV 인터넷은 수백만의 사심 없는 친절, 호기심과 신뢰로 구성 http://www.isoc.org/graphics/photos/newsweek.jpg33
  • TED: 임의적 친절 행위로서의 웹 인터넷의 기반은 개방, 참여, 신뢰, 협력34
  • Evolution of Web Ecosystemq Web of Documentsq Web of Servicesq Web of Devicesq Web of Dataq Web of Thingsq Web of Human35
  • Evolution of Web Platform Open API Search Image Mail Office Sharing Video Shopping Book Sharing Commerce Map News Payment Cloud Ads SNS36
  • Online Activities, 2000 ~ 2009 http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx37
  • Growth of Open API38
  • API Billionaires Club, 2011 edition 13 billion API calls / day (May 2011) 10 billion API calls / month (January 2011) Over 260 billion objects stored in S3 (January 2011) 1.6 billion API-delivered stories / month (October 2010) 5 billion API calls / day (April 2010) 5 billion API calls / day (October 2009) 8 billion API calls / month (Q3 2009) 3 billion API calls / month (March 2009)39
  • Putting everything togetherq Your Mashup = API calls + Data Manipulation + UI User User Request Data presentation Mashup website Data Manipulation API Call Data API Call Data Website 1 Website 240
  • Open API의 힘41
  • Web Platform Layer User Interaction JavaScript + Web APIs Presentation HTML 5 & CSS 3 Transport HTTP Web Resource URIs Resources (Service, Content, Site)42
  • 4. 모바일 응용 기술: 앱과 웹의 경쟁 Native Application m.xxx.com App Vs. Web
  • Web의 역사는 도전의 역사 1990년대: Web vs. C/S 2010년대: Web vs. App44
  • 과거로 돌아가보자 !!q1996년 § 대부분 Web 기반의 Application으로 변할 것이다.q2006년 § Web 기반이 아닌 로컬 전용 기업용 Application을 만들자 !!45
  • 1990년대 : 유선 웹과 C/S46
  • 2010년대 : 모바일에서의 앱과 웹47
  • Why App ?48
  • Why Web ?49
  • App vs. Web Native App HTML5 Web Application 특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 브라우저를 통해 접속하며, 및 설치가 되어야 함 설치와 업데이트 불필요 각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, PalPortability 표준 웹만 개발하면 어디서나 볼 수 있음 m and the list goes on…) 외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크Hyper Links 어떤 부분이건 링크로 연결 가능 는 불가능하고, 앱 간 호출은 보안 제약이 있음 검색 사이트, 이메일 홍보, 트위터 링크 등으로Discoverability 앱스토어 홍보와 마케팅을 위한 비용이 필요 홍보 가능Distribution & Market Siz 플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는 누구든 접속 가능e 것과 하위 내용과 차별화 됨Usage of Device Capabiliti 단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, a 현재는 불가능 (HTML와 Device API 표준화를es ddress book, calendar, etc.) 통해 2011년부터 가능할 것으로 전망) 앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가Supportability & Upgrade 있는 부분에 대해서는 다시 등록하고 모두에게 재다운로 사이트를 수정하면 언제든 바로 업데이트ability 드 받으라고 해야 함 앱스토어 개발자 등록 비용이 필요 (Apple charges develoEntry Costs 없음 pers $99 and enterprises $299, RIM charges $200 ) 앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RIRevenue Share 모두 내꺼 M takes 20%)User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨 네트웍을 거치며, 서버에서 제공되고, 브라우저Performance 바이너리 코드로 실행되므로 속도가 빠름 를 통해 처리되기에 성능 변동폭이 큼 HTML5의 App Cache 기능을 이용해 구현해야Offline Browsing 로컬 저장소를 이용해 가능 지만 가능50
  • Why Mobile Web [1] – Accessibilityq 다양한 모바일 단말에서 사용할 수 있는가 ?51
  • Why Mobile Web [2] – Easy use52
  • Why Mobile Web [3] – Easy developq 만약 @@@ 앱을 만든다면 ? § 아이폰용으로 개발 (Object-C) § 안드로이드용으로 개발 (Java) § 윈도우 모바일용으로 개발 (C#) § 삼성 바다용으로 개발 (C) § 블랙베리용으로 개발 (Java) § 팜용으로 개발 (HTML, CSS, JavaScript) § ….53
  • Why Mobile Web [4] – no installationq No installation & Always update54
  • Why Mobile Web [5] – Open API & Mashup55
  • Why Mobile Web [6] – Platform Independent56
  • Why Mobile Web [7] – no screening57
  • Why Mobile Web [8] – Always Evolving58
  • 5. HTML5와 미래 응용 기술
  • HTML560
  • HTML5 ?q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케 이션을 위한 JavaScript API 확장을 포함한 것 통칭되는 “HTML5” HTML5 CSS3 JavaScript 콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해 기능을 표현 § Web Storage § 문서구조의 상세화 § 표현 기능 모듈화 § Web Worker § 멀티미디어 § 웹 폰트 § Web Socket § 폼과 이벤트 등 § Geolocation API 서로 다른 다양한 브라우저 상에서 문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수 일관된 표현 기능 제공, 효과적이고 편 디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션 리한 표현 방식의 변경61
  • HTML5 ?62
  • HTML5의 주요 특징63
  • HTML5: Web Development to the next level http://slides.html5rocks.com/64
  • HTML5 표준화65
  • W3C HTML5 Roadmap66
  • HTML5 규격 표준화 경과q HTML5는 2007년 웹 어플리케이션 활성화와 함께 본격화 2010 2011 Canavs Web Workers AppCache W3C Web form Geolocation FileAPI WebGL Audio/Video WebFont Web App. DOM1 DOM2 DOM3 DOM4 표준들 CSS1 CSS2 CSS3 HTTP Javascript AJAX XHR267
  • HTML과 Web API 기술 표준화 현황 총괄q HTML5와 Web API 기술은 최근 표준화가 활발하게 진행 중68
  • HTML5 표준화 세부 현황 (W3C HTML WG)q HTML5 표준화는 2014년 최종 표준 제정을 목표로 작업 중 § HTML WG에서는 2012년도 중반(늦어도 후반)까지는 후보 표준안 (Candidate Recommendation) 단계를 목표 Specification FPWD WD LCWD CR PR REC 1 HTML5 2007 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 2 HTML+RDFa 1.1 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 3 HTML Microdata 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 4 HTML Canvas 2D Context 2008 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 Polyglot Markup: HTML-Compatible 5 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 XHTML Documents HTML5: Techniques for providing 6 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2 useful text alternatives HTML to Platform Accessibility APIs 7 2011 2012.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2 Implementation Guide 8 HTML5 differences from HTML4 2008 2011.05 2012 Q1 2012 Q2 2014 Q1 2014 Q2 9 HTML5: Edition for Web Authors 2011 2011.08 2012 Q1 2012 Q2 2014 Q1 2014 Q2 10 HTML: The Markup Language 2010 2011.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2 FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation WD: Working Draft CR : Candidate Recommendation REC: Recommendation69
  • W3C Web Application API 표준화 세부 현황q 최근에는 다양한 Web Application API 표준화가 활발히 시작 중 Name of Specification Last Publication ED FPWD WD LCWD CR PR REC Clipboard APIs and Events 2012-02-23 Cross-Origin Resource Sharing (CORS) 2010-07-27 DOM Level 3 Events 2011-05-31 DOM4 2012-01-05 Element Traversal 2008-12-22 File API 2011-10-20 File API: Directories and System 2011-04-19 File API: Writer 2011-04-19 From-Origin Header 2011-07-21 HTML5 Web Messaging 2012-03-03 Indexed Database API 2011-12-06 Java bindings for Web IDL 2012-02-07 Progress Events 2011-09-22 Selectors API 2009-12-22 Selectors API Level 2 2010-01-19 Server-Sent Events 2011-10-20 Shadow DOM Uniform Messaging Policy (UMP) 2010-01-26 Web IDL 2012-02-07 Web Sockets API 2011-12-08 Web Storage 2011-12-08 Web Workers 2012-03-13 XBL2 Primer 2007-07-18 XBL2 Spec 2007-03-16 XmlHttpRequest (Level 2) 2012-01-17 FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation WD: Working Draft CR : Candidate Recommendation REC: Recommendation70
  • 6. Why HTML5 is important ? (HTML5 Demo)
  • Case : Videoq http://www.justafriend.ie/72
  • Case : Canvas, SVG, Gameq Twinkle Pop73 http://game.wren.kr/each/tp/
  • Case : MMOPRG- Canvas, Websocket,q http://browserquest.mozilla.org/74
  • Case : Canvas, Audio, Websocketq http://www.multiplayerpiano.com/75
  • Case : Audioq http://daftpunk.themaninblue.com/76
  • Case: SVGq http://slaveryfootprint.org/77
  • Case : Canvas + WebGL http://www.myrobotnation.com/78
  • Case : WebGL + LocalStorageq http://chrome.angrybirds.com/79
  • Case : SVG + WebGLq http://www.cuttherope.ie/80
  • Case : Offline & N-Screen https://read.amazon.com81
  • Case : Hybrid Webq http://www.wunderlist.com/82
  • Case : Web OS & UI83
  • 모바일 HTML5의 가능성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. 기타 새로운 기회들84
  • N-Screen의 종결자, HTML5과 차세대 웹문제 해결책다중 플랫폼을 지원하는 응용 개발 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, LOD85
  • 2012년은 HTML5 활성화의 원년!! Mobile Web 다양화 Golden Age Smart devices 표준화 완료 전국 서비스 HTML5 Apps LTE 2010 2011 2012 2013 hollobit@etri.re.kr86
  • 2012, 모바일 웹과 HTML5 전망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)87
  • 7. 모바일 응용의 미래
  • 스마트 기기의 미래 ?q89
  • 스마트 기기의 미래 ?90
  • 스마트 기기의 새로운 가능성들91
  • 스마트 기기의 새로운 가능성들92
  • 중장기 - 모바일의 미래?93
  • 8. 대응 전략
  • HTML5 어떻게 공부하나요 ?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 관련 서적들95 참고: http://xguru.net/635
  • 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 JS96
  • 서적들 - 모바일 HTML5 Web App 관련97
  • 서적들 - 디자이너/기획자를 위한 HTML598
  • 서적 - 웹 UI/UX 디자인 관련99
  • 학생들을 위한 조언q 학습 : 기본에 충실하고 공부하라 § 웹 표준의 숙지와 연습 : HTML5, CSS, Javascript § CSS 표준 기반의 웹 (응용) 디자인 § Mobile UI Framework 및 자바 스크립트 스킬 향상q 도전과 노력 : 직접 개발해보고 시도하라 § Hybrid Web App 고려 § Mobile Cloud 고려 § 크로스플랫폼 및 멀티 스크린 지원 방법q 함께 활동하라 § 오픈 소스 커뮤니티 활동 § HTML5 응용 모범 사례들의 도출과 공유 § 국내외 시장분석과 글로벌 도전q 지금 당장 시작하라~100
  • 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 OR101