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

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

Upload: channy-yun

Post on 12-May-2015

6.339 views

Category:

Technology


6 download

TRANSCRIPT

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

Mozilla의 오픈 모바일

플랫폼

윤석찬

한국 Mozilla 커뮤니티 http://www.mozilla.or.kr

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

Agenda

모바일 시대의 현실 Mozilla의 오픈 모바일 전략

• HTML5 기반 웹 플랫폼의 한계와 Web API

• 개방형 모바일 웹 OS (Boot to Gecko)

• 웹 개발자를 위한 비즈니스 플랫폼 (Market Place)

• 자신이 제어하는 분산 인증 수단 (Persona)

미래의 웹 기술 방향 한국의 당면 과제

• 참고. 웹암호화 API 표준화 진행 과정

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

1980 vs. 2010

1980년대 PC 혁신 시대에 이어서 2010년대 모바일 혁신 시대 진입

단말 개수 및 이용 시간에 있어서 글로벌한 압도적인 성장 진행 중!

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

모바일 OS의 성장: 글로벌

안드로이드 운영체제 지속적으로 성장 중! 다양한 모바일 운영 체제 경쟁

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

모바일 OS의 성장: 한국

안드로이드 운영체제 급격한 성장 중! 모바일 운영 체제 쏠림 현상 진행

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

모바일 시대의 현실

• 상용 앱스토어의 독점 현상 • 개발자 생태계 왜곡 • 대안이 되는 환경 부재

• 제 2 웹 브라우저 전쟁 • HTML5 기반 웹 표준 부각 • 웹 애플리케이션에 관심

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

Messages from Mitchell Baker

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

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

Mozilla의 주요 미션 변화

• 오픈 소스 웹 브라우저 개발 커뮤니티에서 웹 플랫폼 기반 대안으로 자리매김

• 웹 플랫폼을 기반한 개발자

생태계, 오픈 웹을 위한 다양한 활동 개시

• 모바일에 대한 적극적 의지 표명을 통한 변화 모색

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

오픈 웹 플랫폼이란?

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

Mozilla의 오픈 모바일 전략

https://wiki.mozilla.org/Kilimanjaro

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

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/

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

But, HTML – Open Living Standard

http://www.whatwg.org/specs/web-apps/current-work/multipage/

웹 브라우저 벤더나 W3C가 아닌

웹 개발자의 웹 개발자를 위한 웹 개발자에 의한 살아 있는 표준

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

웹 앱의 네가지 문제점

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

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

(1) Installable Web App

설치 가능한 웹 애플리케이션! 오프라인에서 사용 가능~

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

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

지메일 모바일 버전 오프라인에서 사용 가능~

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

(2) 로컬 데이터 베이스: DOM Storage

sessionStorage.setItem('version',5); sessionStorage.getItem('version');

https://developer.mozilla.org/en/DOM/Storage

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

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

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

<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

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

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

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

(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.

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

WebRTC – 서버 의존성 탈피

P2P 통신으로 화상 회의 및 실시간 채팅 가능!

http://www.w3.org/TR/webrtc/ http://webrtc.org

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

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)

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

Plug-in

Internet

NoSQL

Cloud Computing

{"Name": "Cheeso", "Rank": 7}

Structure

Presentation

Behavior

Ajax RESTful

Local Storage

disk

HTML 5 기반 (Web application)

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

그러나 아직 웹이 못하는 것

디바이스 제어…

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

2. Mozilla Web API

HTML5의 미지원 항목?

• 통신: WiFi 정보, 모바일 통신,

• 각종 센서: 광센서, 근접센서...

• 하드웨어 제어: USB, BlueTooth, NFC...

Mozilla Web API

• HTML5 내 기본 API 이외 웹 기반 API로서 W3C의 Device API와 함께 빠진 표준안을 제정하고 구현.

https://wiki.mozilla.org/WebAPI

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

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

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

http://arewemobileyet.com/

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

3. Boot2Gecko

Open Mobile Web OS

• 웹 기반 앱의 실행에 최적화

• 폐쇄형 상용 모바일 OS의 대안

주요 구성

• Gaia – 유저인터페이스

• Gecko – 웹 런타임

• Linux – Gonk 기반 임베디드 OS

https://wiki.mozilla.org/B2G

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

https://developer.mozilla.org/ko/Mozilla/Boot_to_Gecko/Building_B2G_for_Samsung_Galaxy_S2

For Hacker 갤럭시S2에 B2G 포팅하기

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

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

Demo: B2G phone http://www.youtube.com/watch?v=Erd_oEdHc58

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

향후 계획

주요 일정 • 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 대응)

국내에서도 관심 있는 벤더 있음?

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

대안으로서 오픈 웹 앱스토어

상용 폐쇄 앱 플랫폼

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

4. Mozilla 마켓플레이스

목적: 웹 플랫폼으로서 업계표준 기술로 어디에서라도 동작하는 애플리케이션 환경 구축

단말 및 운영체제 독립적인 웹 앱 스토어 구축 • 인증, 과금, 커뮤니티 기반 심사 시스템

채택

브라우저 비 의존 • Firefox 뿐만 아니라 다른 브라우저에서

이용 가능 및 하위 호환성 제공

Firefox 베타 버전에 탑재 완료 및 올해 정식 릴리스를 예정

https://marketplace.mozilla.org

Page 34: Mozilla 오픈 웹 모바일 플랫폼 (2012)
Page 35: Mozilla 오픈 웹 모바일 플랫폼 (2012)

모바일/PC 앱 배포 채널 제공

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

앱 관리: Firefox Home Tab

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

표준 웹 앱 배포 스펙

{ "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

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

개발자 앱 등록 방법

https://marketplace.mozilla.org/ko/ecosystem/

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

소셜 웹의 아이덴티티 위험 자신의 개인 정보를 독점 소셜웹 사이트의 서드파티

소셜앱에서 마음대로 사용가능

자신의 아이덴티티 직접 제어하지 못하는 현상

제 2의 ActiveX와 유사

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

6. Mozilla Persona

소셜 웹 시대의 문제점 • Google, Facebook, Twitter... • 소셜앱의 무분별한 정보 수집 • 사용자의 프라이버시 제어 제약

분산형 인증 기술: BrowserID

• 브라우저 기반의 간단한 인증 API • 메일 주소 기반

Persona 와 BrowserID

• Mozilla Persona: 인증 서비스명 • BrowserID:Persona 의 개발 코드

https://browserid.org/

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

c.f. 인증수단 비교표

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

Browserid.org

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

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>

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

미래의 웹 기술 방향

서버가 필요 없는 웹 • 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

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

한국의 당면과제

IE 점유율 90%, 크롬 4%, Firefox 2%... • Global: IE 30%, 크롬 30%, Firefox 25%, 기타 10%

• 액티브 X 기반 PC 환경 개선

모바일 웹 선도 ▶ PC 웹 환경 개선 • 모바일 기반의 다양한 웹애플리케이션 장려

• 안드로이드 중심 생태계 개선

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

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

참고. 한국의 액티브X

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

개인적인 활동의 한계

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

목소리 키우기: Web Crypto API 제안

• http://html5.creation.net/webcrypto-api/ • Focused on certificate services, but issues on identity

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

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월 생성

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

W3C Web Crypto API

http://www.w3.org/2012/webcrypto/WebCryptoAPI/

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

향후 진행 과정

올해 하반기 중에 중요 웹 암호 관련 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/

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

지금 다운로드! Firefox Beta for Android

https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta

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

The Story of Mozilla

함께 해 주세요! http://www.mozilla.or.kr

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

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

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

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

Thanks for Listening! Q&A @mozillakr @channyun [email protected] http://forums.mozilla.or.kr http://facebook.com/mozillakr