없으면 없는대로

HTML5 Device API 지원 현황 (2014년 4월 기준)

• W3C를 비롯 웹 진영은 HTML5를 본격적인 OS수준의 App 실행 플랫폼으로 자리매김하려 하지만, 모질라를 제외한 브라우저 벤더(애플, 구글)의 지원이 미미한 상황
  
• 애플과 구글은 앱스토어와 구글 플레이 스토어를 중심으로 하는 네이티브 앱 생태계를 지키기 위해 웹 생태계 활성화에 적극적이지 않음
  
• Device API를 비롯 HTML5 웹앱 생태계가 활성화되기 위해서는 시간이 필요할 전망
  

Device API          표준화 단계      모바일 브라우저 지원현황
--------------------------------------------------------------------------
File API                 WD        FF 27+, iOS 6+,   Android 4.4+
File Reader API          WD        FF 27+, iOS 6+,   Android 3.0+
Filesystem & Writer API  WD        FF x,   iOS x,    Android x
Geolocation API          CR        FF 27+, iOS 3.2+, Android 2.1+
getUserMedia API         WD        FF 27+, iOS x,    Android x
WebRTC API               WD        FF 27+, iOS x,    Android x (Chrome 29+)
Full Screen API          WD        FF x,   iOS x,    Android x
Web Audio API            WD        FF 27+, iOS 6+,   Android x
Vibration API            WD        FF 27+, iOS x,    Android 4.4+
Battery Status API       CR        FF 27+, iOS x,    Android x

벌써 한참된, W3C TPAC 2013 메모

게으름이 깊어졌다. 더이상 기억이 유실되기 전에 2013년 중국 심천에서 열렸던 W3C TPAC에 대한 메모를 남긴다.

11.11.월
# System Application WG
: OS와 긴밀히 통합된 Web App을 개발하기 위한 런타임과 API 도출을 목표로 하는 WG
: Native App과 대등한 Web App의 가능성을 논의
: WebOS 에서 전화 calling에 반응하는 app 등 제작 가능
- Service Worker에 대한 논의
  - Page에 종속되지 않은 WebApp
  - 독자적인 life-cycle에 의해 실행
  - system event 처리
  - scheduled wakeup
- Web Manifest에 대한 논의
  - packaged Web App의 메타 정보 서술 방식
  - 크롬, 파이어폭스 등 브라우저 별 독자 구현 방식의 표준화 논의

# 국내 20여명 참여
  ETRI , 달리웍스(주), SKT, 삼성전자 등

11.13.수
# 총회
: 대강당에 모여 W3C의 현안을 공유
- W3C 표준 제정 프로세스를 기존 waterfall 방식에서 agile 방식으로 변환
- Last Call 단계를 폐지 CR 단계에 흡수
- Recomendation 대신 Standard 사용(용어)

# Telco (Web and Mobile WG)
- 차이나모바일, KDDI, 텔레포니카, 하웨이(다수) 참석
- 텔코는 근원적으로 Openness를 필요로 하며 W3C 등 표준화 기구와 협조해야 함

# Web Redesign
- W3C 웹사이트 개편 방안 논의

11.14.목
# Web Crypto
: 표준화가 상당히 진행된 마무리 단계 (LC)

# Web & Mobile
: 모바일 웹앱 관련 표준화 현황과 향후 이슈 논의

# Web Performance Mini WS
: W3C가 현재 집중하고 있는 분야라고 함
: 인텔(중국), NTT(일본), ??(일본) 3개 회사에서 웹 기술 현황 미니 세미나 개최

이전다음

012

(이상)

WebRTC 현황 요약 (2013.6.21. 기준)

- WebRTC는 브라우저 간의 실시간 통신 서비스(음성통신, 화상회의)를 위한 표준기술

- 안드로이드 단말에서의 WebRTC 지원 현황

- 2013-04-16, WebRTC가 안드로이드 파이어폭스에 구현됨

- 디폴트 설정은 off

- ICS 이전 버전에서는 사용에 문제 있을 수 있음

- 이유는 제조사에 따라 일부 하드웨어의 경우 성능이 부족함

- 그리고 일부 제조사 단말에는 WebRTC를 위해 필요한 안드로이드 API가 부재함

- 그러나, 갤탭 10.1 안드로이드 3.2의 경우 비디오 콜이 정상 수행됨

- 2013-06-03, 크롬 안드로이드 베타 최신 버전에서 WebRTC 지원 시작함

- 2013년 6월 현재, 안드로이드 내장 브라우저는 WebRTC를 지원하지 않음

Reference

WebRTC support on Android

http://www.morbo.org/2013/04/webrtc-support-on-android.html

2013-04-17

You Can Try WebRTC on Chrome for Android Beta Now

http://www.chromestory.com/2013/03/you-can-try-webrtc-on-chrome-for-android-beta-now/

2013-06-03

[인터넷] 웹 브라우저에서의 실시간 통신기술

http://weekly.tta.or.kr/weekly/files/20124031104031_admin.pdf

2012-06-04

(이상)

JavaScript 빌드 도구(build tool) 동향 요약

스캐폴딩(scaffolding) 기능을 중심으로...

보일러플레이트(boilerplate) 도구

- 보일러플레이트는 코드 재사용을 위해 코드 골격을 미리 구성해 놓은 것

백본 보일러플레이트(backbone boilerplate)

- Backbone.js 프레임워크를 이용하는 프로젝트를 위한 보일러플레이트

- 소스 위치: https://github.com/tbranyen/backbone-boilerplate

- 다른 백본 보일러플레이트도 있지만 이 프로젝트가 제일 좋음 (스스로 좋다고 주장함)

    - requireJS를 잘 지원

    - 라이브러리 소스를 있는 그대로 (변형하지 않고) 사용

    - 빌드 시스템을 구비

    - 샘플 앱을 지원

    - 필요한 골격만 지원

스캐폴딩

- 스캐폴딩은 MVC f/w 특히 RoR(루비 온 레일즈)에서 널리 사용되기 시작함

- 어플리케이션 구축에 필요한 뼈대를 자동 생성해주는 기능

- 기본 파일과 디렉토리 구조를 매번 새로 만들어야 하는 번거로움을 제거

grunt

    - grunt는 node.js 기반의 JavaScript 빌드 도구

    - 설치방법: node.js가 설치된 상태에서 npm install 명령을 이용 설치

        - node.js는 이제 JavaScript 실행환경일 뿐 아니라 훌륭한 개발환경

    - package.json 파일에 grunt 실행에 필요한 모듈 서술

        - 프로젝트 root에 두며 소스 버전 관리 대상

        - npm install 명령을 실행하면 필요한 모듈이 자동 설치됨 ( 다시 말하지만, node.js는 이제 훌륭한 개발환경! )

        - npm init 명령으로 기본적인 package.json 파일을 생성함

    - gruntfile.js 파일에 일괄 처리할 작업을 정의

        - make 시스템의 makefile에 해당

        - grunt 0.3.x 버전에서는 gurnt.js로 통용됨 

        - grunt 0.4.x 버전에서 gruntfile.js로 이름 변경됨

        - 프로젝트 root에 두며 소스 버전 관리 대상

        - grunt plugin이 package.json에 들어 있고, 

            npm install 명령으로 설치됐다면, 

            gruntfile로 쉽게 실행시킬 수 있음

        - pkg 섹션

            - pakcage.json을 가리키는 역할

            - package.json에는 프로젝트 관련 메타데이터가 정의됨

            - pkg.name 같은 형태로 메타데이터 참조가 가능

        - meta 섹션

            - 내부 속성으로 banner만 있음

            - 합치거나 축약할 때, js 파일 상단에 자동으로 넣는 주석 지정

        - lint 섹션

            - JSHint를 이용 JavaScript 파일 테스트

            - 테스트할 파일 목록을 자유롭게 grouping하여 지정 가능

        - qunit 섹션

            - jQuery의 테스트 프레임워크인 QUnit을 이용 테스트 수행할 대상 파일을 지정

            - PhantomJS가 설치되어 있어야 함

            - lint 섹션처럼 테스트할 파일 목록을 자유롭게 지정 가능

        - concat/ min 섹션

            - 파일을 합치거나(concat), 공백을 제거해서 축약(min)시키는 작업을 실행

        - watch 섹션

            - 지정된 파일이 변경될 경우, 지정된 작업을 수행

        - jshint 섹션

            - lint 섹션을 실행할 때, JSHint 툴에 전달할 옵션 정의

            - 실행 섹션이 아님

        - uglify

            - min 섹션을 실행할 때, UglifyJS 툴에 전달할 옵션 정의

            - 실행 섹션이 아님

grunt-bbb

    - grunt-bbb는 grunt의 플러그인

    - bbb는 Backbone Boilerplate Build를 뜻함

    - npm install -g bbb 명령으로 설치 ( 다시 말해 node.js는 이제 정말 훌륭한 개발환경! )

    - 사용 명령어

        - init (bbb)

            - bare boilerplate 프로젝트 생성

        - init:module (bbb)

            - 새로운 모듈 생성

            - model, collection, view를 통합하는 module 생성

            - js, css, html 생성

        - server (bbb)

            - 웹서버를 띄워 프로젝트를 실행

Reference

- http://blog.outsider.ne.kr/892

- https://github.com/tbranyen/backbone-boilerplate/wiki/Getting-started-overview

- https://github.com/tbranyen/backbone-boilerplate/wiki/Installation

- http://gruntjs.com/

- https://github.com/backbone-boilerplate/grunt-bbb

http://www.w3.org/Mobile/mobile-web-app-state/

2013년 2월

0. 개요

- 현재 웹기술이 full-featured 모바일 앱을 만들만큼 충분히 무르익음

- W3C는 웹앱 개발 기술을 확장하기 위해 노력하고 있으며 관련 교육 링크도 운영하고 있음 (http://www.w3devcampus.com/writing-great-web-applications-for-mobile/)

1. Graphics

- SVG : Scalable 벡터 그래픽 표준

- Canvas : 2D programmatic API 표준

- 폰트 : WOFF(Web Open Font Format) 표준

- Fullscreen API, Screen Orientation API 표준

* WebGL(3D graphic API)은 W3C 밖에서 표준화 작업 진행 중(Khronos Group)

* 표준화 안정 단계, 표준 적용 활성화 단계

2. Multimedia

- <video>, <audio> 태그 : 과거 image처럼 멀티미디어 요소를 Web의 1st class citizen으로 취급

- Encrypted Media Extensions : DRM 컨텐츠 재생에 관한 표준

- Pick Media Intent, Networked Service Discovery API : DLNA 컨텐트에 대한 접근 표준

- HTML Media Capture : 카메라, 마이크(녹음) 등에 의한 captured 컨텐트에 대한 접근 표준

- Web Real-Time Communication WG 활동 중

- Web Audio API : 오디오 컨텐트에 대한 분석, 수정, 합성을 위한 API 표준

- W3C Web and TV Interest Group : 모바일 Web을 통해 TV 시청 경험을 풍요롭게 하는 연구 진행 중

* 표준화 초기 단계, 표준 적용 초기 단계(모바일에서 활용 제한적)

3. Device Adaptation

- Device Description Repository API : 다양한 장치 특성(스크린 크기, 입력 장치 특성, 미디어 기록/재생 특성 등)을 조회할 수 있는 server-side API 표준

- Media Capture Streams API : 카메라, 마이크 등의 media capture 장치 제어 표준

- CSS Media Query : 반응형 layout 지원 표준

- Adaptive images(picture 태그, srcset 속성) : 화면 크기에 최적인 이미지를 다운로드 하도록 지원

* 표준화 초기 단계, 표준 적용 초기 단계

4. Forms

* W3C는 모바일 기기의 제한된 입력 기능을 보완하기 위한 form 구성 요소를 지원하기 위해 노력 중

- date and time <input type="date">: OS가 제공하는 native calendar 컨트롤 사용 지원

- <input type="email">, <input type="tel">, <input type="url"> : 데이터 형태에 따른 키보드 지원

* 표준화 안정 단계, 표준 적용 초기 단계

5. User interactions

- Pointer Events : 터치 기기 및 마우스 등의 전통적 포인터 기기의 이벤트 관련 표준

- vibration API : 햅틱 피드백(진동) 관련 표준

- IndieUI Events : 기기별 specific 이벤트를 한 레벨 추상화한 이벤트 표준("click", "key press", "touch" 이벤트를 대신하는 "undo", "next page" 이벤트)

- Web Notifications : 웹을 통한 사용자 notification 표준

- Speech API Community Group : 음성인식 기반 사용자 인터랙션 표준 논의 중

- Mobile Accessibility, WAI-ARIA : 장애인을 위한 웹 접근성 관련 표준 논의 중

* 표준화 초기 단계, 표준 적용 초기 단계

6. Data storage

- Web Storage : 브라우저를 통한 간단한 데이터 저장/관리 API 표준

- File Reader API, File Writer API, FileSystems API : 정교한 파일 관리 API 표준

- Indexed Database API : 로컬 DB 관리 API 표준

- Quota Management API : 웹앱을 위한 로컬 저장공간 확보 관련 API 표준

- Web Cryptography API : 데이터 암호화 관련 API 표준

* 표준화 초기 단계, 표준 적용 초기 단계

7. Personal Information Management

- Contacts API, Calendar API : 주소록, 일정 정보 관리 API 표준

* 관련 API 표준이 Web Intents 기반 API 형태로 대치되고 있는 중

* 표준화 아주 초기 단계, 표준 적용 전무

8. Sensors and hardware integration

- Geolocation API : 센서를 통해 기기의 현재 위치를 알아내는 API 표준(GPS, WiFi 네트웍, Cell 네트웍 등의 방법 등 중 가능한 방법을 이용)

- DeviceOrientation Event Specification : 센서를 통해 기기의 가로/세로 상태를 알아내는 API 표준

- Battery Status, Proximity sensors, Ambient Light Events 등 표준 stable 단계

- NFC WG : NFC 관련 표준 논의 중

* 표준화 안정 단계, 표준 적용 초기 단계

9. Network

- XMLHttpRequest : AJAX API 표준

- Cross-Origin Resource Sharing : 현재 웹 페이지와 다른 도메인의 자원을 공유하기 위한 표준

- Push API : 웹앱이 (브라우저에 활성화되지 않은 상태에서도) 서버로부터 전달되는 메시지를 수신하기 위한 표준

- WebSocket API : 저비용 양방향 통신 지원 표준

- Web Real-Time Communications : P2P 데이터 통신 지원 표준

- network-information API : 현재 이용하고 있는 통신망의 bandwidth 등의 정보를 파악하기 위한 표준

* 표준화 안정 단계, 일부 표준 적용 단계

10. Communication and Discovery

- Messaging API : sms://, mms://, mailto:// 등 URI 스킴 기반 메시지 전달 표준, Web Intents 방식으로 재정의될 예정

- Networked Service Discovery API : DLNA등 로컬 네트웍 서비스와 웹앱 사이의 seamless 협업을 위한 표준

- Web Real-Time Communications WG : 커뮤니케이션 관련 표준을 주도적으로 논의 중

* 표준화 초기 단계, 표준 적용 초기 단계

11. Packaging

* 웹앱을 오프라인 상태에서 이용하기 위한 표준과 웹앱을 app store를 통해 유통할 수 있는 포맷으로 만들기 위한 표준

- ApplicationCache : 웹앱을 오프라인 상태에서도 이용하기 위한 표준

- W3C Widgets : 웹앱을 ZIP 형태로 패키징하기 위한 표준

* 표준화 안정 단계, 일부 표준 적용 단계

12. Performance & Optimization

- Web Performance WG : Navigation Timing, Resource Timing, Performance Timeline, User Timing 등 웹앱 성능 최적화 도구 개발 중

- Page Visibility API : 페이지가 보이지 않는 시점에서 네트웍 자원 사용을 억제하기 위한 표준

- battery API : 배터리 잔량에 따라 자원 활용을 억제하기 위한 표준

- Web Workers : 리소스를 많이 소비하는 작업을 백그라운드 스레드로 처리하기 위한 표준

* 표준화 안정 단계, 표준 적용 초기 단계

코너스톤 WDK (Cornerstone WDK)

SKT가 만든 코너스톤 WDK (Web Dev. Kit)를 소개합니다.

코너스톤 WDK의 핵심은 코너스톤 프레임웍 (이후 f/w)입니다. 코너스톤 f/w을 만들면서 염두에 두었던 생각들을 요약합니다. 상세한 내용은 http://cornerstone.sktelecom.com 에서 확인할 수 있습니다.

1. 힘 빼고 만들었습니다.

SKT가 처음부터 끝까지 세상을 새로 만들겠다는 못된(?) 욕심을 버리고 접근했습니다. 거인들의 업적을 존중하면서 그 어깨 위에 작은 노력을 더해 세상에 기여하겠다는 철학으로 접근했습니다. 개발자들에게 인기 높은 검증된 오픈소스 f/w들을 기반으로 코너스톤 f/w을 개발했습니다. 이미 익숙한 f/w들을 근간으로 하고 있기 때문에 개발자 입장에서는 학습 비용이 적을 뿐 아니라, 코너스톤 f/w을 쓰기 위해 학습한 내용을 다른 f/w들을 개별적으로 쓸 때도 활용할 수 있을 것입니다.

2. Modern Web App 개발의 최신 동향을 담았습니다.

Modern Web App 개발의 최신 기술들을 지원합니다. 코너스톤 f/w은 UI f/w 뿐만 아니라 모듈화, MVC (Model-View-Control 패턴), RWD (Responsive Web Design) 등 Javascript 프로그래밍의 핵심 동향을 모두 포함하고 있는 full featured Javascript f/w 입니다. 그리고 코너스톤 f/w은 UI f/w과 MVC f/w 사이의 정합성을 맞추는데 상당한 노력을 기울였습니다. 코너스톤 f/w을 이용하면 개별 f/w들을 따로 선택하고 이들 사이에 정합성을 맞추는데 소요되는 비용을 줄일 수 있습니다.

3. 모바일에서의 성능 보장을 위해 노력했습니다.

코너스톤 개발을 시작할 당시, 세상에 공개된 거의 모든 모바일 UI f/w들을 검토하고 성능을 비교했습니다. 코너스톤 f/w은 트위터 Bootstrap을 UI f/w의 근간으로 선택했습니다. Bootstrap의 간결함을 유지하면서 Bootstrap에 모자란 모바일 Widget과 기능을 추가했습니다. 조심스럽지만, 현재 시점에서 가장 빠르고 안정적인 모바일 UI f/w이라고 자신합니다.

4. 한글 문서를 제공합니다.

정말 공들여 만든 한글 문서를 제공합니다. f/w을 만들면서 배우고 느낀 내용을 모두 담으려고 노력했습니다. 한국의 SW 분야가 성공하려면 제대로된 한글 개발문서가 축적되고 공유되어야 한다고 생각합니다. 코너스톤 개발문서가 조그만 기여를 할 수 있으면 좋겠습니다. 코너스톤 f/w 개발문서는 정적으로 고정된 문서가 아니라 샘플코드를 작성하고 결과를 확인할 수 있는 살아있는 문서입니다 (http://cornerstone.sktelecom.com/livedoc/).

운 좋게도 훌륭한 개발자 분들을 만나서 신나게 개발할 수 있었습니다. 하지만 아직은 미약한 시작입니다. 개발자 분들의 소중한 의견을 듣고 싶습니다. 코너스톤 블로그에 의견 남겨 주세요.