2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
Chaos Engineering을 위한 최신 도구 업데이트 - 윤석찬 (AWS 테크에반젤리스트)Channy Yun
- 발표 영상: https://www.youtube.com/watch?v=mLWD4KCQuT4
카오스 엔지니어링(Chaos Engineering)을 테스트해 볼 수 있는 각종 도구에 대해 최신 업데이트를 해드립니다. 로컬 장애 주입용 도구 부터, AWS System Manager기반 Runcommand 도구, AWS Lambda 도구, 그리고 ToxiProxy, ChaosToolkit 같은 오픈 소스 기반 도구와 간단한 데모를 함께 보여드립니다.
How to Measure DevRel's Perfomances: From Community to Business - Channy Yun ...Channy Yun
Developer relations are an impactable to generate business values in many software companies who hope to gain mindshare of developers in various approaches from contributing open sources to gaining meaningful sales leads. In this session, you’ll learn about how to measure the perfomrmance of developer relations for building community, increasing impacts and generating leads for sales.
https://tokyo-2018.devrel.net/speakers/yun/
카오스 엔지니어링(Chaos Engineering)이란 프로덕션 서비스의 각종 장애 조건을 견딜 수 있는 시스템의 신뢰성을 확보하기 위해 분산 시스템을 실험 하고 배우는 분야입니다. 즉, 개발자들이 현실 세계에서 발견되는 시스템 장애를 미리 탐지하여 복원성 높은 아키텍처를 구성하는 방법을 공유합니다.클라우드 컴퓨팅의 발전과 데브옵스 방법론을 기반으로 자동화를 통해 좀 더 쉽게 개발자들이 직접 분산 시스템을 통제된 환경에서 실험을 하는 동안 나오는 결과를 관찰함으로써 현실에서 실제 행동 방법을 배울 수 있습니다. 본 세션에서는 카오스 엔지니어링의 기본 개념과 함께 Kubernetes용 Chaos Tool인 KubeMonkey를 통해 무작위로 클러스터의 포드를 삭제하여 장애 복구 서비스 아키텍처를 검증하는 방법을 설명합니다.
클라우드 컴퓨팅과 Daum의 사례- 윤석찬 (KREN 연구 협력 포럼, 2013) Channy Yun
출처: http://www.koren.or.kr/board/board.php?task=view&db=data2&no=44
<개발자에서>
최근에 클라우드 기술이 부각되면서 다음에서도 발빠르게 사내 프라이빗 클라우드 서비스를 준비중이다. 가장 먼저 한 일은 사내 개발자들이 언제든지 자신의 가상머신(VM)을 할당 받아 테스트해 볼 수 있는 사내 클라우드 플랫폼 구축이었다.
2011년 초 오픈소스인 클라우드스택을 최적화해 구축했으며, 개발자들은 공용 테스트 서버나 서비스 서버에서 못하던 자신만의 최신 기술 습득이나 테스트를 아무 구애 받지 않고 자기 서버에서 해 볼 수 있게 됐다. 이 플랫폼은 앞으로 클라우드 파운더리 기반의 사내 PaaS과 하둡 테스트베드로도 활용하고 있으며, 실제 다음 서비스에서 클라우드 컴퓨팅 기술을 활용하는 기초가 되고 있다.
- http://www.bloter.net/archives/107844
DockerCon 2014에서 Adrian Cockcroft가 발표한 The state of the art in Microservice 중 해외 사례 발췌본
https://blog.docker.com/2014/12/dockercon-europe-keynote-state-of-the-art-in-microservices-by-adrian-cockcroft-battery-ventures/
2005년 구글맵으로 부터 시작된 웹 기반 지도 API 서비스는 웹 2.0의 데이터 플랫폼 서비스의 주요 사례로 떠올랐다. 그 이후 야후!, 마이크로소프트 등에서 지도 플랫폼 서비스와 API 제공이 잇달았으며, 국내에서도 다음이 최초로 항공 사진(스카이뷰)과 거리 사진(로드뷰)을 제공하고 네이버도 참여함으로서 로컬 기반 서비스의 폭발적 성장의 견인차 역할을 하였다. 노키아의 Here 및 오픈스트릿맵 등 제 3의 사업자 및 협업 기반 플랫폼이 성장하였으며, Open Layer 라이브러리 및 Open GIS 등 다양한 공개 소프트웨어 들도 함께 성장하였다.
특히, 스마트폰의 보급과 아울러 모바일용 지도 SDK를 적극 보급 및 지원하는 추세로 기존의 Ajax 기반의 이미지 기반 웹 지도 표현 기술은 WebGL 혹은 Canvas를 통해 3차원 기술을 도입하면서 웹 호환성 및 성능을 동시에 높히고 있다. 구글 스케치업을 통해 시작된 공간 3차원 서비스는 약간 주춤하지만 45도 이미지너리 및 DEM 기반 데이터는 계속 추가되고 있다.
최근에는 구글맵 엔진 서비스와 같은 전문 사용자의 참여를 이끌어 내어 클라우드 소싱 형태의 지도 데이터 생성 커뮤니티를 통해 저개발 국가 및 북한과 같은 미공개 지도 데이터 생산을 만들고 있다.
2011년부터 구글 부터 지도 API 서비스 유료화를 단행하여 보안 강화 및 품질 및 성능 향상을 통해 제 3자 재판매를 통한 사업을 진행하고 있다. 또한, 최근 많은 기업들이 글로벌 홈페이지에 자사의 위치나 고객센터를 이용자들이 찾는데 활용하고 있으며, 이를 활용해 물류•관제•입지분석•위험관리•마케팅 등에 활용하고 있다.
현재 글로벌 지도 API 플랫폼은 단순히 베이스맵을 지원하는데 그치지 않고 공간 정보를 시각화 및 표현하는데 필요한 다양한 기능을 제공하면서, 정보 전달 역할을 강화하고 있다. 또한, Mapbox 등 지도 타일의 다양한 스타일과 테마 기능을 통해 좀 더 미려한 지도를 제공하기도 한다.
향후 글로벌 지도 API 플랫폼은 단보다 고도화된 시스템을 활용해 데이터 분석 및 2차원 시각화 그리고 3차원 공간 정보 활용으로 진화하고 있다.
1. Mozilla의
오픈 모바일
플랫폼
윤석찬
한국 Mozilla 커뮤니티
http://www.mozilla.or.kr
2. Agenda
모바일 시대의 현실
Mozilla의 오픈 모바일 전략
• HTML5 기반 웹 플랫폼의 한계와 Web API
• 개방형 모바일 웹 OS (Boot to Gecko)
• 웹 개발자를 위한 비즈니스 플랫폼 (Market Place)
• 자신이 제어하는 분산 인증 수단 (Persona)
미래의 웹 기술 방향
한국의 당면 과제
• 참고. 웹암호화 API 표준화 진행 과정
3. 1980 vs. 2010
1980년대 PC 혁신
시대에 이어서
2010년대 모바일
혁신 시대 진입
단말 개수 및 이용
시간에 있어서
글로벌한 압도적인
성장 진행 중!
4. 모바일 OS의 성장: 글로벌
안드로이드 운영체제 지속적으로 성장 중!
다양한 모바일 운영 체제 경쟁
5. 모바일 OS의 성장: 한국
안드로이드 운영체제 급격한 성장 중!
모바일 운영 체제 쏠림 현상 진행
6. 모바일 시대의 현실
• 제 2 웹 브라우저 전쟁
• HTML5 기반 웹 표준 부각
• 웹 애플리케이션에 관심
• 상용 앱스토어의 독점 현상
• 개발자 생태계 왜곡
• 대안이 되는 환경 부재
11. 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/
12. But, HTML – Open Living Standard
웹 브라우저 벤더나 W3C가 아닌
웹 개발자의
웹 개발자를 위한
웹 개발자에 의한
살아 있는 표준
http://www.whatwg.org/specs/web-apps/current-work/multipage/
13. 웹 앱의 네가지 문제점
소프트웨어 설치 문제
로컬 저장 공간 문제
인터랙티브한 유저인터페이스 문제
서버 의존성의 문제
14. (1) Installable Web App
설치 가능한 웹 애플리케이션!
오프라인에서 사용 가능~
https://developer.mozilla.org/en/Using_Application_Cache
19. File API & Drag/Drop API
플러그인 없이 파일 첨부 기능 이용 가능~
20. (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
21. WebRTC – 서버 의존성 탈피
P2P 통신으로 화상 회의 및 실시간 채팅 가능!
http://www.w3.org/TR/webrtc/
http://webrtc.org
22. 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
23. HTML 5 기반 (Web application)
Local
Plug-in Storage
NoSQL
Internet
Structure
Ajax RESTful
{"Name": "Cheeso",
"Rank": 7}
disk
Presentation
Cloud
Computing
Behavior
25. 2. Mozilla Web API
HTML5의 미지원 항목?
• 통신: WiFi 정보, 모바일 통신,
• 각종 센서: 광센서, 근접센서...
• 하드웨어 제어: USB, BlueTooth, NFC...
Mozilla Web API
• HTML5 내 기본 API 이외 웹 기반 API로서 W3C의
Device API와 함께 빠진 표준안을 제정하고 구현.
https://wiki.mozilla.org/WebAPI
26. 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 전용)
28. 3. Boot2Gecko
Open Mobile Web OS
• 웹 기반 앱의 실행에 최적화
• 폐쇄형 상용 모바일 OS의 대안
주요 구성
• Gaia – 유저인터페이스
• Gecko – 웹 런타임
• Linux – Gonk 기반 임베디드 OS
https://wiki.mozilla.org/B2G
29. 다양한 디바이스에 포팅 가능!
For Hacker
갤럭시S2에 B2G 포팅하기
https://developer.mozilla.org/ko/Mozilla/Boot_to_Gecko
/Building_B2G_for_Samsung_Galaxy_S2
31. 향후 계획
주요 일정
• 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 대응)
국내에서도 관심 있는 벤더 있음?
33. 4. Mozilla 마켓플레이스
목적: 웹 플랫폼으로서 업계표준
기술로 어디에서라도 동작하는
애플리케이션 환경 구축
단말 및 운영체제 독립적인 웹 앱
스토어 구축
• 인증, 과금, 커뮤니티 기반 심사 시스템
채택
브라우저 비 의존
• Firefox 뿐만 아니라 다른 브라우저에서
이용 가능 및 하위 호환성 제공
Firefox 베타 버전에 탑재 완료 및 올해
정식 릴리스를 예정
https://marketplace.mozilla.org
37. 표준 웹 앱 배포 스펙
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
38. 개발자 앱 등록 방법
https://marketplace.mozilla.org/ko/ecosystem/
39. 소셜 웹의 아이덴티티 위험
자신의 개인 정보를 독점 소셜웹 사이트의 서드파티
소셜앱에서 마음대로 사용가능
자신의 아이덴티티 직접 제어하지 못하는 현상
제 2의 ActiveX와 유사
40. 6. Mozilla Persona
소셜 웹 시대의 문제점
• Google, Facebook, Twitter...
• 소셜앱의 무분별한 정보 수집
• 사용자의 프라이버시 제어 제약
분산형 인증 기술: BrowserID
• 브라우저 기반의 간단한 인증 API
• 메일 주소 기반
Persona 와 BrowserID
• Mozilla Persona: 인증 서비스명
• BrowserID:Persona 의 개발 코드
https://browserid.org/
43. 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
44. 미래의 웹 기술 방향
서버가 필요 없는 웹
• 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
45. 한국의 당면과제
IE 점유율 90%, 크롬 4%, Firefox 2%...
• Global: IE 30%, 크롬 30%, Firefox 25%, 기타 10%
• 액티브 X 기반 PC 환경 개선
모바일 웹 선도 ▶ PC 웹 환경 개선
• 모바일 기반의 다양한 웹애플리케이션 장려
• 안드로이드 중심 생태계 개선
대안과 다양성에 대한 공론화 ▶ 글로벌 지향
50. 목소리 키우기: Web Crypto API 제안
• http://html5.creation.net/webcrypto-api/
• Focused on certificate services, but issues on identity
51. 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월 생성
52. W3C Web Crypto API
http://www.w3.org/2012/webcrypto/WebCryptoAPI/
53. 향후 진행 과정
올해 하반기 중에 중요 웹 암호 관련 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/
54. 지금 다운로드!
Firefox Beta for Android
https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta
55. The Story of Mozilla
함께 해 주세요!
http://www.mozilla.or.kr
http://www.youtube.com/watch?v=AQuOhrXINiM
56. 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