Mozilla 오픈 웹 모바일 플랫폼 (2012)

Mozilla의
오픈 모바일
플랫폼
윤석찬
한국 Mozilla 커뮤니티
http://www.mozilla.or.kr

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

HTML5 Buzz World?

CSS3 ECMA 5th
2D Canvas
HTML5 Offline
WebFont(WOFF) Web Form Markup Audio Data API

SVG Video & Audio Drag & Drop API

DOM Storage WebM Codec Micro Data File API

WebGL Web Workers Geolocation Device API Indexed DB

XMLHttpRequest 2 Server-Sent Events Web Sockets WebRTC SPDY

http://caniuse.com/

But, HTML – Open Living Standard

웹 브라우저 벤더나 W3C가 아닌
웹 개발자의
웹 개발자를 위한
웹 개발자에 의한
살아 있는 표준
http://www.whatwg.org/specs/web-apps/current-work/multipage/

웹 앱의 네가지 문제점

 소프트웨어 설치 문제
 로컬 저장 공간 문제
 인터랙티브한 유저인터페이스 문제
 서버 의존성의 문제

(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

지메일 모바일 버전
개인 메일 정보를 로컬에 저장

(3) 인터랙티브 API
<input type="file" multiple />

https://developer.mozilla.org/en/Using_files_from_web_applications

<div id=“box" draggable></div>

https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

File API & Drag/Drop API
플러그인 없이 파일 첨부 기능 이용 가능~

(4) HTTP 의존성 탈피- WebSocket
Web technology providing for bi-directional, full-duplex
communications channels over a single TCP connection.

https://developer.mozilla.org/en/WebSockets

http://www.youtube.com/watch?v=yt_4zmCfHhg

WebRTC – 서버 의존성 탈피

P2P 통신으로 화상 회의 및 실시간 채팅 가능!
http://www.w3.org/TR/webrtc/
http://webrtc.org

c.f. 과거 웹 개발 (Web Document)

Model
Internet DB
View
Plug-in
<! DOCTYPE XHTML…>
<title>$title</title>
Structure <body>
<h1>Hello, Wolrd</h1>
</body>
</html>

Presentation body { font-size: 9pt;}
h1 {color:blue;}

Function popup(url) {
Behavior }
window.open(url);

Controller

HTML 5 기반 (Web application)

Local
Plug-in Storage

NoSQL
Internet
Structure
Ajax RESTful
{"Name": "Cheeso",
"Rank": 7}
disk

Presentation
Cloud
Computing
Behavior

그러나 아직 웹이 못하는 것

디바이스 제어…

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 전용)

3. Boot2Gecko
 Open Mobile Web OS
• 웹 기반 앱의 실행에 최적화
• 폐쇄형 상용 모바일 OS의 대안

 주요 구성
• Gaia – 유저인터페이스
• Gecko – 웹 런타임
• Linux – Gonk 기반 임베디드 OS
https://wiki.mozilla.org/B2G

다양한 디바이스에 포팅 가능!

For Hacker
갤럭시S2에 B2G 포팅하기
https://developer.mozilla.org/ko/Mozilla/Boot_to_Gecko
/Building_B2G_for_Samsung_Galaxy_S2

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 앱 배포 채널 제공

표준 웹 앱 배포 스펙
Content-Type: application/xweb-app-manifest+json
{
"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"
}

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/

BrowserID 구현 기술 소개
 Veried Email Protocol
• 메일 주소의 소유를 확인
• Primary Identity Authority: 메일 서비스 자신이 인증 메일 서버 제공
• Secondary Identity Authority: 제삼자가 인증 서버를 제공 확인 메일을
송신해 소유 확인
 구현 코드
<script src="https://browserid.org/include.js"></script>
<script>
navigator.id.get(function(assertion) {
if (assertion) {
// 인증 검증 및 처리
} else {
// 에러 처리
}
});
</script>

https://developer.mozilla.org/en/BrowserID/Protocol_Overview

미래의 웹 기술 방향
 서버가 필요 없는 웹
• 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 웹 환경 개선
• 모바일 기반의 다양한 웹애플리케이션 장려
• 안드로이드 중심 생태계 개선

 대안과 다양성에 대한 공론화 ▶ 글로벌 지향

브라우저 전쟁의 비표준 기술의 산물

http://msdn.microsoft.com/en-
http://docs.oracle.com/cd/E19957-
us/library/windows/desktop/aa388154%
01/816-6152-10/sgntxt.htm
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_t
o_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
channy@mozilla.or.kr

http://forums.mozilla.or.kr
http://facebook.com/mozillakr

Mozilla 오픈 웹 모바일 플랫폼 (2012)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie Mozilla 오픈 웹 모바일 플랫폼 (2012)

Ähnlich wie Mozilla 오픈 웹 모바일 플랫폼 (2012) (20)

Mehr von Channy Yun

Mehr von Channy Yun (20)

Mozilla 오픈 웹 모바일 플랫폼 (2012)