mozilla 오픈 웹 모바일 플랫폼 (2012)
TRANSCRIPT
Agenda
모바일 시대의 현실 Mozilla의 오픈 모바일 전략
• HTML5 기반 웹 플랫폼의 한계와 Web API
• 개방형 모바일 웹 OS (Boot to Gecko)
• 웹 개발자를 위한 비즈니스 플랫폼 (Market Place)
• 자신이 제어하는 분산 인증 수단 (Persona)
미래의 웹 기술 방향 한국의 당면 과제
• 참고. 웹암호화 API 표준화 진행 과정
1980 vs. 2010
1980년대 PC 혁신 시대에 이어서 2010년대 모바일 혁신 시대 진입
단말 개수 및 이용 시간에 있어서 글로벌한 압도적인 성장 진행 중!
모바일 OS의 성장: 글로벌
안드로이드 운영체제 지속적으로 성장 중! 다양한 모바일 운영 체제 경쟁
모바일 OS의 성장: 한국
안드로이드 운영체제 급격한 성장 중! 모바일 운영 체제 쏠림 현상 진행
모바일 시대의 현실
• 상용 앱스토어의 독점 현상 • 개발자 생태계 왜곡 • 대안이 되는 환경 부재
• 제 2 웹 브라우저 전쟁 • HTML5 기반 웹 표준 부각 • 웹 애플리케이션에 관심
Messages from Mitchell Baker
http://www.youtube.com/watch?v=wjHQ7NRGQL4
Mozilla의 주요 미션 변화
• 오픈 소스 웹 브라우저 개발 커뮤니티에서 웹 플랫폼 기반 대안으로 자리매김
• 웹 플랫폼을 기반한 개발자
생태계, 오픈 웹을 위한 다양한 활동 개시
• 모바일에 대한 적극적 의지 표명을 통한 변화 모색
오픈 웹 플랫폼이란?
Mozilla의 오픈 모바일 전략
https://wiki.mozilla.org/Kilimanjaro
HTML5: 현재의 Web Runtime
2D Canvas Offline
Web Form Markup
Video & Audio
HTML5 Buzz World?
HTML5
File API
Geolocation Web Workers
XMLHttpRequest 2 Server-Sent Events
Indexed DB WebGL
DOM Storage
Web Sockets
CSS3
Device API
WebRTC
WebM Codec
Drag & Drop API
Micro Data
SPDY
ECMA 5th
Audio Data API WebFont(WOFF)
SVG
http://caniuse.com/
But, HTML – Open Living Standard
http://www.whatwg.org/specs/web-apps/current-work/multipage/
웹 브라우저 벤더나 W3C가 아닌
웹 개발자의 웹 개발자를 위한 웹 개발자에 의한 살아 있는 표준
웹 앱의 네가지 문제점
소프트웨어 설치 문제 로컬 저장 공간 문제 인터랙티브한 유저인터페이스 문제 서버 의존성의 문제
(1) Installable Web App
설치 가능한 웹 애플리케이션! 오프라인에서 사용 가능~
https://developer.mozilla.org/en/Using_Application_Cache
지메일 모바일 버전 오프라인에서 사용 가능~
(2) 로컬 데이터 베이스: DOM Storage
sessionStorage.setItem('version',5); sessionStorage.getItem('version');
https://developer.mozilla.org/en/DOM/Storage
지메일 모바일 버전 개인 메일 정보를 로컬에 저장
<input type="file" multiple />
<div id=“box" draggable></div>
(3) 인터랙티브 API
https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
https://developer.mozilla.org/en/Using_files_from_web_applications
File API & Drag/Drop API 플러그인 없이 파일 첨부 기능 이용 가능~
(4) HTTP 의존성 탈피- WebSocket
http://www.youtube.com/watch?v=yt_4zmCfHhg
https://developer.mozilla.org/en/WebSockets
Web technology providing for bi-directional, full-duplex communications channels over a single TCP connection.
WebRTC – 서버 의존성 탈피
P2P 통신으로 화상 회의 및 실시간 채팅 가능!
http://www.w3.org/TR/webrtc/ http://webrtc.org
Plug-in
DB Model
Internet
View
Controller
<! DOCTYPE XHTML…> <title>$title</title> <body> <h1>Hello, Wolrd</h1> </body> </html>
body { font-size: 9pt;} h1 {color:blue;}
Function popup(url) { window.open(url); }
Structure
Presentation
Behavior
c.f. 과거 웹 개발 (Web Document)
Plug-in
Internet
NoSQL
Cloud Computing
{"Name": "Cheeso", "Rank": 7}
Structure
Presentation
Behavior
Ajax RESTful
Local Storage
disk
HTML 5 기반 (Web application)
그러나 아직 웹이 못하는 것
디바이스 제어…
2. Mozilla Web API
HTML5의 미지원 항목?
• 통신: WiFi 정보, 모바일 통신,
• 각종 센서: 광센서, 근접센서...
• 하드웨어 제어: USB, BlueTooth, NFC...
Mozilla Web API
• HTML5 내 기본 API 이외 웹 기반 API로서 W3C의 Device API와 함께 빠진 표준안을 제정하고 구현.
https://wiki.mozilla.org/WebAPI
Web API의 구현 현황
기존 지원 API • Geolocation (위치 정보), Orientation (가속도 센서), Audio Data
API, WebGL (3D 그래픽), Camera API (WebRTC 에 포함) • Android용 Firefox 에서 구현 완료
개발 완료 API • SMS, Telephony, Contacts Settings, Network Information
Vibration, Pointer Lock Battery Status, Resource Lock (sleeve 금지) Light Sensor (광센서), Proximity Sensor (근접센서)
개발 중인 API • WebRTC (Camera, P2P 포함) Open Web Apps (앱 관리) Device
Storage Idle, Power Management Mobile Connection, WiFi Information (무선 정보),TCP Socket
개발 예정 API • UDB Datagram Socket Bluetooth, USB, NFC WebSocket API,
Background Service USB Reading(B2G 전용)
http://arewemobileyet.com/
3. Boot2Gecko
Open Mobile Web OS
• 웹 기반 앱의 실행에 최적화
• 폐쇄형 상용 모바일 OS의 대안
주요 구성
• Gaia – 유저인터페이스
• Gecko – 웹 런타임
• Linux – Gonk 기반 임베디드 OS
https://wiki.mozilla.org/B2G
https://developer.mozilla.org/ko/Mozilla/Boot_to_Gecko/Building_B2G_for_Samsung_Galaxy_S2
For Hacker 갤럭시S2에 B2G 포팅하기
다양한 디바이스에 포팅 가능!
Demo: B2G phone http://www.youtube.com/watch?v=Erd_oEdHc58
향후 계획
주요 일정 • 2012/03/09 - M2.1 Dogfood Release • 2012/03/26 - M2.5 Developer Preview
Phone JSConf 에서 개발 단말 배포 • 212/06/01 - M3 • 2012/06/29 - M4
제품화 계획 • Telefnica: 올해 중 단말기 출시 (유럽 및
남미) • Deutsche Telekom (T-Mobile)
Innovation Labs 개발에 참여. • Adobe, Qualcomm 등도 협력
(PhoneGap 의 B2G 대응)
국내에서도 관심 있는 벤더 있음?
대안으로서 오픈 웹 앱스토어
상용 폐쇄 앱 플랫폼
4. Mozilla 마켓플레이스
목적: 웹 플랫폼으로서 업계표준 기술로 어디에서라도 동작하는 애플리케이션 환경 구축
단말 및 운영체제 독립적인 웹 앱 스토어 구축 • 인증, 과금, 커뮤니티 기반 심사 시스템
채택
브라우저 비 의존 • Firefox 뿐만 아니라 다른 브라우저에서
이용 가능 및 하위 호환성 제공
Firefox 베타 버전에 탑재 완료 및 올해 정식 릴리스를 예정
https://marketplace.mozilla.org
모바일/PC 앱 배포 채널 제공
앱 관리: Firefox Home Tab
표준 웹 앱 배포 스펙
{ "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": [ "https://appstore.mozillalabs.com" ], "default_locale": "en" }
Content-Type: application/xweb-app-manifest+json
https://developer.mozilla.org/en/OpenWebApps/The_Manifest
개발자 앱 등록 방법
https://marketplace.mozilla.org/ko/ecosystem/
소셜 웹의 아이덴티티 위험 자신의 개인 정보를 독점 소셜웹 사이트의 서드파티
소셜앱에서 마음대로 사용가능
자신의 아이덴티티 직접 제어하지 못하는 현상
제 2의 ActiveX와 유사
6. Mozilla Persona
소셜 웹 시대의 문제점 • Google, Facebook, Twitter... • 소셜앱의 무분별한 정보 수집 • 사용자의 프라이버시 제어 제약
분산형 인증 기술: BrowserID
• 브라우저 기반의 간단한 인증 API • 메일 주소 기반
Persona 와 BrowserID
• Mozilla Persona: 인증 서비스명 • BrowserID:Persona 의 개발 코드
https://browserid.org/
c.f. 인증수단 비교표
Browserid.org
BrowserID 구현 기술 소개
Veried Email Protocol
• 메일 주소의 소유를 확인
• Primary Identity Authority: 메일 서비스 자신이 인증 메일 서버 제공
• Secondary Identity Authority: 제삼자가 인증 서버를 제공 확인 메일을 송신해 소유 확인
구현 코드
https://developer.mozilla.org/en/BrowserID/Protocol_Overview
<script src="https://browserid.org/include.js"></script> <script> navigator.id.get(function(assertion) { if (assertion) { // 인증 검증 및 처리 } else { // 에러 처리 } }); </script>
미래의 웹 기술 방향
서버가 필요 없는 웹 • DOM Storage, Indexed DB
• WebSocket, WebRTC
• Offline App Cache
멀티미디어 기반 웹 • Audio/Video, 2D(Canvas/SVG), 3D(WebGL)
• CSS3(Transform, Animation, 3D)
디바이스 독립적 웹 • Web API, B2G
비즈니스 플랫폼으로서 웹 • Mozilla Market Place
• BrowserID
한국의 당면과제
IE 점유율 90%, 크롬 4%, Firefox 2%... • Global: IE 30%, 크롬 30%, Firefox 25%, 기타 10%
• 액티브 X 기반 PC 환경 개선
모바일 웹 선도 ▶ PC 웹 환경 개선 • 모바일 기반의 다양한 웹애플리케이션 장려
• 안드로이드 중심 생태계 개선
대안과 다양성에 대한 공론화 ▶ 글로벌 지향
참고. 한국의 액티브X
브라우저 전쟁의 비표준 기술의 산물
http://docs.oracle.com/cd/E19957-01/816-6152-10/sgntxt.htm
http://msdn.microsoft.com/en-us/library/windows/desktop/aa388154%
28v=vs.85%29.aspx
왜 공인 인증은 웹 표준이 없나?
관심이 없어서…
2006년 부터 WHATWG 및 W3C HTML WG에서 제안
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007571.html
개인적인 활동의 한계
목소리 키우기: Web Crypto API 제안
• http://html5.creation.net/webcrypto-api/ • Focused on certificate services, but issues on identity
Web Identity 필요성 대두
Mozilla 내부에서 국내 액티브X 이슈화 • 2008년 미첼 베이커 의장 방문 • 2010년 루카스아담스키 보안총괄 방문
BrowserID 및 DOM Crypt (2011)
Mozilla의 아이덴티티 기능 필요 • http://identity.mozilla.com/post/7616727542/introduc
ing-browserid-a-better-way-to-sign-in
웹 기반 암호화를 통한 인증 기능 필요 • http://lists.whatwg.org/htdig.cgi/whatwg-
whatwg.org/2011-May/031741.html
• DOM Crypt 표준 작업 진행 및 W3C 표준화 제안
W3C 내에 Web Cryptography W/G • 2011년 11월 결정 및 2012년 3월 생성
W3C Web Crypto API
http://www.w3.org/2012/webcrypto/WebCryptoAPI/
향후 진행 과정
올해 하반기 중에 중요 웹 암호 관련 API 구현 완료 2차 구현 기능은 스펙 작업 중
• Web Certificate Service API로 진행 예정 TLS login/out, key management including import/export and
signing/verification
• 한국의 공인 인증 기능 지원 가능
참여 방법 • Join W3C WebCryptography W/G http://lists.w3.org/Archives/Public/public-webcrypto/
• Join W3C WebCrypto API Community Group http://www.w3.org/community/webcryptoapi/
지금 다운로드! Firefox Beta for Android
https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta
The Story of Mozilla
함께 해 주세요! http://www.mozilla.or.kr
http://www.youtube.com/watch?v=AQuOhrXINiM
Reference
1. B2G • GAIA: https://github.com/andreasgal/gaia/
• Build: https://wiki.mozilla.org/Gaia/Hacking#Building_B2G
• Device Porting: https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko#Setting_up_building_Boot_to_Gecko
• Developer Phone: https://wiki.mozilla.org/B2G/DeveloperPhone#Advanced_Gaia_Hacking
• Mailinglist: https://groups.google.com/forum/#!forum/mozilla.dev.b2g
• IRC: irc://irc.mozilla.org #b2g
2. Market Place • App Manifest Standards: http://appmanifest.org
• 개발자 문서 https://developer.mozilla.org/en/Apps
• 앱 등록 방법 http://hacks.mozilla.org/2012/02/mozillamarketplace-open-for-app-submissions/
3. BrowserID • 웹 사이트 탑재 방법: https://github.com/mozilla/browserid/wiki/How-to-Use-
BrowserID-on-Your-Site
Thanks for Listening! Q&A @mozillakr @channyun [email protected] http://forums.mozilla.or.kr http://facebook.com/mozillakr