"모바일 웹 개발자의 스마트 시장 진입 전략"이란 제목으로 2011년 10월26일에 충남대에서 열렸던 KWISA 회원사 워크샵에서 발표했던 자료입니다. 모바일 웹 개발자, 특히 학생들을 대상으로 한 자료들을 담아 보았습니다. 혹 살펴보시다, 코멘트하실 내용이 있으면 언제든 남겨주시기 바랍니다.

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

2. 2

3. 그러나… 현실은 …
3

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

6. Changes (스마트 디바이스 급성장)
Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/
6

7. Changes (무선네트워크 진화)
아날로그망 GSM/CDMA망 WCDMA망 OFMDA망 ??
아날로그폰 디지털폰 피처폰/스마트폰 고성능 스마트폰 가상 스마트 기기
아날로그 디지털 IP 기반 All IP 기반 All IP 기반
음성통화 음성통화 데이터서비스 시작 데이터서비스 확산 초고속 데이터
서비스
음성 통신 서비스의 시대 데이터 통신 서비스의 시대
7

8. Changes (Device Convergence)
8

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

10. Change (모바일 플랫폼 경쟁)
10

11. Changes (모바일 웹의 성장)
11

12. Changes (클라우드의 성장)
12

13. 개발자들이 궁금해 하는 것들
Developer Economics 2011 report - http://bit.ly/jKjfUl

14. Developer Journey
14

15. [1] 어떤 플랫폼 (언어, 도구, 환경) ?
15

16. [1] 플랫폼 선택 기준
16

17. [2] 응용 배포 방법
17 17

18. [3] 앱스토어 선택
18

19. [4] 앱 출시 계획 및 테스팅 기법
19

20. [5] 홍보 및 데모 방법
20

21. [6] 수익 모델은 영원한 고민
21

22. 국내 시장과 사용자 특성
제3차 스마트폰 이용 통계(2011.상반기) - http://bit.ly/uzvmcz

23. 스마트폰 2000만 시대
23

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

31. 스마트 모바일 시대의 핵심은 ?

32. Our Dream ?
32 http://youtu.be/6Cf7IL_eZ38

33. Screen Convergence
33

34. Emerging N-Screen environment
 N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를
통해 이용할 수 있도록 하는 서비스
 N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세
가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경
 N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수
(Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되
는 여러 대의 단말기 장치를 의미
34

35. Player of N-Screen
칩 단말
제조사 제조사
유무선 인터넷 미디어 방송
통신 서비스 사업자 사업자
사업자 사업자
35

36. Player Interests
36 출처: digieco

37. Why HTML5 is important
for N-Screen ?

38. Platform War & Fragmentation
38

39. HTML5 & N-Screen
https://read.amazon.com/
39

40. Hype Cycle for Web and User Interaction
Technologies, 2011
40

41. 주목해야 할 10가지 모바일 기술 (2012~)
41

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

44. HTML5 ?
44

45. HTML5의 주요 특징
45

46. Why [1] - Multi Device support
46

47. Why [1] - Multi Screen support
47

48. Why [2] - Platform Fragmentation
48

49. Why [3] – Rich Web Application
 <video>, <audio>
 Flash 기반 사이트의 전환
• YouTube, Vimeo, Scribd
 왜 HTML5인가 ?
 Search Friendly
 호환성 (유무선…)
 접근성
 성능
http://www.scribd.com/doc/30964170/Scribd-in-HTML5
http://estima.wordpress.com/2010/05/07/scribd/
49

50. Why [4] – Standards
 DeskTop  Mobile
50 Source: http://html5test.com/results.html

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

56. 모바일 웹 개발자를 위한 진입 전략

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

60. 모바일 HTML5 Web App 관련 책들
60

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