"모바일 웹 개발자의 스마트 시장 진입 전략"이란 제목으로 2011년 10월26일에 충남대에서 열렸던 KWISA 회원사 워크샵에서 발표했던 자료입니다.
모바일 웹 개발자, 특히 학생들을 대상으로 한 자료들을 담아 보았습니다.
혹 살펴보시다, 코멘트하실 내용이 있으면 언제든 남겨주시기 바랍니다.
A future that integrates LLMs and LAMs (Symposium)
Smart Market Strategy for Mobile Web Developer
1. Mobile Web Developer의
스마트 시장 진입 전략
Jonghong Jeon
ETRI, SRC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
4. 스마트 모바일의 시대
Mobile + Personal
SMART Phone, Pad … Internet
(소통의 도구)
응용
5. “I am certain that the mobile telecoms world will count its time
in two Eras. The Era BI: time Before the iPhone, and the ERA
AI: time After the iPhone”
Author of “Digital Korea”, Tomi T Ahonen
http://communities-dominate.blogs.com/brands/2007/05/entering_iphone.html
http://www.tomiahonen.com/
hollobit@etri.re.kr
5 5
7. Changes (무선네트워크 진화)
아날로그망 GSM/CDMA망 WCDMA망 OFMDA망 ??
아날로그폰 디지털폰 피처폰/스마트폰 고성능 스마트폰 가상 스마트 기기
아날로그 디지털 IP 기반 All IP 기반 All IP 기반
음성통화 음성통화 데이터서비스 시작 데이터서비스 확산 초고속 데이터
서비스
음성 통신 서비스의 시대 데이터 통신 서비스의 시대
7
9. Change (Internet Remix)
The Internet is not just for inter-networking ….
TV
Daum
NHN
Media
Cloud
Samsung
Apple
Web
Mobile
2.0
SKT
Internet
remix Facebook
Nokia M2M
Google
Car,
Twitter Home
Social
9 9
24. 스마트폰 2000만 시대 – 국내 현황 (유형)
국내 스마트폰 OS 비율
Symbian
MS
1%
8%
iOS
20%
Android
71%
24 제3차 스마트폰 이용 통계(2011.상반기) - http://bit.ly/uzvmcz
25. 스마트폰 2000만 시대 – 국내 현황 (이용)
25 제3차 스마트폰 이용 통계(2011.상반기) - http://bit.ly/uzvmcz
26. 스마트폰 2000만 시대 – 국내 현황 (앱)
26 제3차 스마트폰 이용 통계(2011.상반기) - http://bit.ly/uzvmcz
27. 스마트폰 2000만 시대 – 국내 현황 (계기)
배타적
27 제3차 스마트폰 이용 통계(2011.상반기) - http://bit.ly/uzvmcz
28. 스마트폰 2000만 시대 – 국내 현황 (이용)
이동 중이 아닌 대기시간 중
28 제3차 스마트폰 이용 통계(2011.상반기) - http://bit.ly/uzvmcz
29. 해외 스마트폰 사용 통계
29 참고: http://mobizen.pe.kr/1117
30. 국내 스마트폰 시장에 대한 상세 분석 필요
안드로이드 사용자가 70%
불편한 웹 UI/UX
ActiveX와 데스크탑 중심의 콘텐츠 환경의 제약
웹 보다 앱에 쏠리는 환경
공공 SI 및 기업용 응용
앱 시장 활성화에만 초점을 맞춘 정책들
과연 모바일 웹 시장이 활성화되고 있는가 ?
모바일 웹 사용이 증가하고 있는가 ?
미래는 ?
30
34. Emerging N-Screen environment
N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를
통해 이용할 수 있도록 하는 서비스
N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세
가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경
N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수
(Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되
는 여러 대의 단말기 장치를 의미
34
35. Player of N-Screen
칩 단말
제조사 제조사
유무선 인터넷 미디어 방송
통신 서비스 사업자 사업자
사업자 사업자
35
42. HTML5 ?
HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케
이션을 위한 JavaScript API 확장을 포함한 것
통칭되는 “HTML5”
HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
Web Storage
문서구조의 상세화
표현 기능 모듈화 Web Worker
멀티미디어
웹 폰트 Web Socket
폼과 이벤트 등
Geolocation API
서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고 편
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
리한 표현 방식의 변경
42
43. HTML5 ?
Web Application은 HTML, CSS, JavaScript의 협주곡
통칭되는 “HTML5”
HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
Web Storage
문서구조의 상세화
표현 기능 모듈화 Web Worker
멀티미디어
웹 폰트 Web Socket
폼과 이벤트 등
Geolocation API
서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고 편
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
리한 표현 방식의 변경
43
51. Why [5] – The Web platform
Standards for Web Applications on Mobile: February 2011 current
state and roadmap
http://www.w3.org/2011/02/mobile-web-app-state.html
51
52. Why [6] – Open APIs & Mashup
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)
52 Source: ProgrammableWeb
53. Why [7] – New Chances
Comparison: App Inventor, DroidDraw, Rhomobile, PhoneGap, Appcelerator,
WebView, and AML
http://www.amlcode.com/2010/07/16/comparison-appinventor-rhomobile-phonegap-appcelerator-webview-and-aml/
53
54. Why [7] – New Chances – Web App Store
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 App
54
55. N-Screen의 종결자, HTML5과 차세대 웹
문제 해결책
다중 플랫폼을 지원하는 응용 개발 Web Application
단말간 데이터 이동 및 심리스 서비스 지원 Cloud & Web Application
다중 단말의 식별과 지원 HTTP UAProf, CSS MQ
다양한 화면 사이즈를 지원하는 응용 개발 SVG, CSS, HTML5
그래픽 처리, 3D 콘텐츠 표현 HTML5 canvas, CSS, WebGL, X3D
Video 및 Audio 콘텐츠 처리 HTML5 video/Audio
Interactive한 처리 JavaScript, CSS, HTML5 webforms
멀티 터치 등의 지원 HTML5 & Web event
오프라인 기능의 지원 HTML5 (localstorage)
디바이스 제어 Device APIs
콘텐츠 표준 호환성 검사 HTML/CSS Validation, mobileOK
비동기적 처리, 쓰레드 관리, 전송 속도 개선 XHR, WebWorker, WebSocket
보다 고속처리 가능하며 판매용 앱이 필요하다면 ? Hybrid Web App
융합 서비스 지원 RESTful Web Services, LOD
55
57. HTML5 어떻게 공부하나요 ?
HTML5 스펙 너무 어려워요! 게다가 모두 영어!
한글 HTML5 번역본 http://j.mp/html5ko (clearboth.org)
그래도 내용이 너무 많아요
웹 개발자를 위한 최소 스펙 http://j.mp/html5devel
알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?
Google의 선물 http://www.html5rocks.com
그 외에 꼭 추천해주실만한 것은 ?
실전 HTML5 가이드 (한글 PDF) http://j.mp/html5guide_ko
Dive Into HTML5 http://diveintohtml5.org
기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들
참고: http://xguru.net/635
57
58. Web App Framework 전성 시대
Mobile Web Application Framework
Sencha Touch, jQuery Mobile, WebApp.net, DTHMLX
touch, jQTouch, iWebKit, Jo HTML5 Mobile App
framework, iUI, Sproutcore, Zepto.js, AML, WebView,
Adobe Air
Hybrid Web application Framework
Titanium Appcelerator, Phonegap, App inventor,
Droidraw, Rhomobile, Appspresso, HyWAI Lite
58
59. JavaScript 전성 시대
JavaScript Libraries http://bit.ly/tVFW6Y
Application Frameworks, Server Side Library, Testing Frameworks
Game Engines, Animation Library, Image manipulation
• Akihabara, IMPACT, enchant.js, Unity3D
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 등 다양한 서버모듈
Javascript로 컴파일 되는 언어들 http://j.mp/hp2pnR
CoffeeScript & Kaffeine : Javascript를 더 간결하게
J2js Java ByteCode to JS, Script# C# to JS
59
61. 모바일 웹 개발자를 위한 전략
웹 표준의 숙지와 활용
CSS 표준 기반의 웹 (응용) 디자인
Mobile UI Framework 및 자바 스크립트 스킬 향상
모바일 웹 응용 성능 개선 방안
Hybrid Web App 고려
Mobile Cloud 고려
크로스플랫폼 및 멀티 스크린 지원
다양한 방면의 웹 응용 개발 시도 : 광고, 쇼핑, 게임, 기업용
오픈 소스 커뮤니티 활동
HTML5 응용 모범 사례들의 도출과 공유
국내외 시장분석과 글로벌 도전
61
62. 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
OR
62