티스토리 툴바


본 글은 모바일 웹2.0 포럼의 이슈리포트로 발간된 글입니다.

W3C HTML5 대한민국 관심그룹 의장 이원석

1. HTML5 표준 개요

HTML5는 W3C(World Wide Web Consortium)를 중심으로 개발되고 있는 차세대 HTML 표준으로 웹 애플리케이션 개발을 위한 표준 개발을 목표로 하고 있다. 따라서 HTML5는 현재 사용중인 HTML4에 비해 상당히 많은 새로운 기능들을 포함한다. HTML5는 크게 마크업 표준과 API 표준으로 구성되어 있는데, 이와 같은 마크업과 API 부분의 혼재와 많은 분량에서 발생되는 혼란스러움과 표준 개발의 효율성을 높이기 위해 2009년 4월 이후에 표준안이 여러 개의 문서로 분리되어 개발되고 있다. 또한 이에 대한 표준 개발은 W3C HTML WG 외에도 웹 애플리케이션(Web Application) WG, Geolocation WG 그리고 디바이스 API 및 정책(Device API and Policy) WG에서 관련된 표준을 개발하고 있다. 최근 웹 애플리케이션(Web Application) WG의 경우 활동계획서를 다시 정리하면서 HTML5와 관련된 5~6개 정도의 추가적인 표준 개발을 제안하는 등 적극적으로 HTML5에 대한 표준개발을 진행하고 있다. 또한 최근에 Web Notification WG, Web Performance WG 그리고 Web Event WG 등 추가적인 표준 개발을 위한 WG들이 속속 활동을 시작하고 있다. 앞으로도 지속적으로 HTML5와 관련된 추가적인 표준화 활동들이 늘어날 것으로 예상된다.

HTML5 와 관련된 주요 WG별 표준개발 내용은 아래와 같다.

<1> HTML5 관련 W3C 주요 WG 현황

WG

표준개발 범위

개발 표준 현황

HTML WG

HTML5 마크업 관련 표준 개발

-   HTML5

-   HTML+RDFa

-   HTML Microdata

-   HTML Canvas 2D Context

Web Application WG

웹 애플리케이션 개발에 필요한 웹소켓, 웹워커, IndexedDB, FileAPI 등을 포함하여 HTML5와 관련된 주요 API 표준 개발

-   Web Sockets API

-   Web Storage

-   Web Workers

-   Indexed Database API

-   Server-Sent Events

-   Cross-Origin Resource Sharing (CORS)

-   HTML5 Web Messaging

-   Clipboard Operations

-   File API

-   File API: Directories and System

-   File API: Writer

-   Programmable HTTP Caching and Serving

Device APIs and Policy WG

데스크탑, 랩탑, 모바일 인터넷 단말(MID), 핸드폰 등 다양한 기기의 웹 브라우저에서 일정, 업무, 연락처, 카메라, 메시지, 시스템 정보, 이벤트 등의 다양한 단말 기능을 사용할 수 있도록 하는 API 표준

-   Contacts API

-   The Calendar API

-   The Media Capture API

-   The Messaging API

-   The System Information API

Geolocation WG

Geolocation API를 포함하여 가속센서, 방향센서 등 센서에 관련된 표준 개발

-   Geolocation API

-   DeviceOrientation Event

Web Notification WG

사용자에게 알려주기 위해 필요한 Notification과 관련된 API 표준으로, Notification과 관련하여 사용자 인터액션(Interaction) 관리에 필요한 이벤트에 대한 표준도 포함

-   Web Notifications

Web Performance WG

웹 브라우저의 특징들과 API들에 대한 애플리케이션 성능 측정에 대한 표준 개발

-   Navigation Timing

Web Event WG

모든 디바이스의 멀티터치, -테블릿 입력 등의 사용을 가능하게 하는 방법에 대한  표준 개발

-   Web Events

Web Real-Time Communications WG

웹 브라우저에서 P2P(Peer to Peer) 오디오, 비디오 등 실시간 통신을 위한 클라이언트 API 표준 개발

-   WG Charter 검토 중

 

* 참고로 각 WG에서 개발하고 있는 표준 중 주요 표준을 포함시켰고, 또한 W3C Note는 포함하지 않음.


2. HTML5 표준화 동향

HTML5 표준 중 마크업 부분은 기존 HTML4보다 훨씬 더 명확하게 의미 표현이 가능하도록 28개의 새로운 마크업이 추가되었다. 이를 통해서 검색 엔진 등 웹의 콘텐츠를 기반으로 하는 다양한 서비스나 애플리케이션은 개선된 기능을 제공할 수 있을 것으로 기대된다. 또는 HTML4까지는 없었지만 HTML5에 새롭게 추가된 API의 경우는 네이티브(Native) 애플리케이션과 유사한 수준의 웹 애플리케이션 개발을 위해 필요한 부분을 정의한 것이다. 현재 HTML5에 포함된 내용은 상당히 광범위하나 현재 주요 브라우저들이 지원하는 기능을 기준 정리해 보면 아래와 같다.

<2> HTML5의 주요 특징과 관련 표준개발 현황

기능

설명

표준개발 현황

HTML5 마크업

HTML5에 대한 기본 마크업 및 애트리뷰크에 대한 표준 정의

-   HTML5

-   LCWD 단계

웹 폼

(Web From)

사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에 사용되는 마크업, 애트리뷰트와 이벤트

-   HTML5

-   LCWD 단계

캔버스

(canvas)

웹에서 즉시모드(immediate mode) 2차원 그래픽을 그리기 위한 API <canvas> 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능에 대한 API

-   HTML Canvas 2D Context

-   LCWD 단계

SVG

(Scalable Vector Graphic)

XML 기반의 2차원 백터 그래픽을 표현하기 위한 언어

-   HTML5

-   LCWD 단계

비디오/오디오(Video/Audio)

<video>는 비디오 또는 영화를 보여주기 위해 사용되는 미디어 엘리먼트이며, <audio>는 사운드나 오디오 스트림을 표현하기 위한 미디어 엘리먼트

-   HTML5

-   LCWD 단계

Geolocation

디바이스의 지리적 위치 정보를 제공하는 API 표준

-   Geolocation API

-   CR 단계

오프라인 웹 애플리케이션(Offline Web Application)

인터넷 연결이 지원되지 않는 경우에도 웹 애플리케이션이 정상적으로 수행될 수 있도록 지원하는 기능으로 애플리케이션에 대한 캐슁과 데이터에 대한 캐슁으로 구성

-   HTML5

-   LCWD 단계

Indexed Database API

대량의 구조화된 데이터 저장 기능 및 인덱스 기반의 고성능 검색 기능에 대한 API

-   Indexed Database API

-   WD 단계

SQL 데이터베이스(Web SQL Database)

다양한 표준 SQL을 사용해 질의할 수 있는 데이터베이스 기능에 대한 API

-   Web SQL Database

-   W3C Note 예정

로컬저장소

(Local Storage)

기존 쿠키의 기능을 개선하기 위한 목적으로 개발된 기능으로 웹 클라이언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하는 기능

-   Web Storage

-   LCWD 단계

웹 소켓

(Web Socket)

웹 애플리케이션이 서버 측의 프로세스와 직접적인 양방향 통신을 위한 API

-   The WebSocket API

-   WD 단계

웹 워커

(Web Worker)

웹 애플리케이션을 위한 쓰레드(Thread) 기능에 대한 API

-   Web Workers

-   LCWD 단계

* WD: Working Draft
* LCWD: Last Call Working Draft
* CR: Candidate Recommendation
* PR: Proposed Recommendation
* REC: Recommendation


사실 W3C와 HTML WG 의장들은 2007년부터 개발하고 있는 HTML5 표준이 다양한 회사들의 비즈니스 이슈로 많은 논쟁과 더불어 표준 개발이 지연되는 것에 우려하고 있었다. 따라서 HTML WG 의장들은 WG내의 표준개발을 효과적으로 하기 위한 방안으로 단계별 규칙을 만들어서 진행하였지만 생각만큼 빠르게 진행되지 않았다. 2010년 9월초 기준으로 HTML5 표준에는 200개 정도의 버그와 25 개정도의 이슈가 있는 상황이었다. 이러한 상황을 최대한 빨리 정리하기 위해 W3C와 HTML WG의장들은 2010년 10월부터 받는 HTML5 표준과 관련된 모든 새로운 버그들은 의장들의 허가할 수 있는 예외적인 상황으로 인정하여 Last Call 코멘트로 처리하기로 결정했다. 즉, 2010년 10월 1일을 기준으로 HTML5 표준을 포함한 HTML WG의 HTML5 관련 표준들에 대한 Last Call을 진행하기로 결정했다. Last Call에 대한 구체적인 일정은 아래와 같다.

- 2010년 10월 1일: HTML5 표준 초안 Last Call 돌입
- 2011년 5월 22일: HTML5 표준 초안 Last Call 종료

이러한 조치로 HTML5에 대한 표준 개발 속도는 한층 탄력을 받을 것으로 예상된다. 하지만 오해하지 않아야 할 부분은 현재 Last Call에 들어간 표준안이 HTML5 마크업과 관련된 표준으로 HTML WG에서 개발 중인 표준에 국한된다. HTML5의 주요 API와 관련된 표준은 다른 표준안으로 각각 개발되고 있어 표준 승인 일정이 다르다는 것이다. 또한 현재 Last Call에 들어간 표준도 이후에도 최종 권고안이 되기 위해서는 CR(Candidate Recommendation) 및 PR(Proposed Recommendation)를 거쳐 Rec(Recommendation)까지 완료가 되어야 한다는 것이다.


3. HTML5 향후 전망

2010년 세계적인 주요 IT 기업들은 HTML 기술 개발, 표준화 및 서비스 적용에 발 빠른 대응을 하고 있다. 먼저, 구글은 지속적으로 공들여 개발한 구글 기어스(Google Gears)를 포기하고 HTML5에 집중하기로 하였으며, 자사의 핵심 서비스 중 하나인 유튜브(Youtube)에서 플래쉬 플러그인(Flash Plug-In)이 필요없는 HTML5 기반 동영상 서비스를 시작하였다. 또한 구글은 스마트폰 플랫폼인 안드로이드의 웹 플랫폼에도 이미 HTML5의 많은 기능을 제공하고 있으며, 최근 W3C의 HTML5 관련 WG(Working Group)에 적극적으로 참여하는 등 HTML5 기술개발에 총력을 기울이고 있다. 이와 더불어 애플도 최근 아이패드를 발표하면서 앞으로 아이폰과 아이패드에서 플래쉬를 배제하고 HTML5를 적용할 것임을 분명히 하였으며, 이미 아이튠즈 등 주요 소프트웨어에 웹의 표준 기술을 적극적으로 도입하고 있다. 또한 애플도 W3C HTML WG의 공동의장으로 활동하는 등 HTML5 관련 표준화 활동에 적극적으로 대응하고 있다. 마이크로소프트의 경우도 실버라이트와 IE9과의 역할을 분명히 정리하면서 IE9에 HTML5 기능을 빠르게 추가하고 있다. IE9의 공식버전은 2011년 상반기에 출시될 것으로 예상된다.

모바일의 경우 최근 아이폰, 안드로이드 그리고 블랙베리 등 주요 스마트폰 플랫폼들은 HTML5의 주요기능을 지원하는 웹 브라우저를 내장하고 있다. 따라서, 네이티브와 유사한 수준의 모바일 웹 애플리케이션 개발이 가능하기 때문에 향후 지속적으로 모바일 웹 애플리케이션 개발은 확대될 것으로 예상된다. 유튜브 모바일, 야후 메일, 지메일, 구글Docs 애플리케이션 등은 HTML5 기반 모바일 웹 애플리케이션의 가능성을 보여주는 대표적인 웹 애플리케이션들이다. 또한 앞으로 최대한 웹 표준 기술을 활용하되 네이티브 애플리케이션으로 패키징하는 하이브리드(Hybrid) 모바일 애플리케이션들이 향후 상당기간 동안은 확대 될 것으로 예상된다. 이는 HTML5의 장점을 적극적으로 활용하면서도 웹 표준으로 해결할 수 있는 특정 기능을 활용할 수 있는 장점과 동시에 앱스토어를 통해 배포가 가능한 애플리케이션 개발이 가능하다는 장점이 있다. 또한 어느 정도의 적용 노력은 필요하지만 기존의 네이티브 애플리케이션과 비교하면 훨씬 효과적으로 다양한 모바일 플랫폼에 대응이 가능하다는 측면에서 큰 장점을 갖기 때문이다.

지금은 급격히 모바일 인터넷 시대로 가고 있는 변화의 시기이며, 지속적으로 다양한 인터넷 가능한 모바일 디바이스들이 출현하게 될 것이다. 향후 모바일 애플리케이션은 네이티브, 하이브리드 그리고 웹 애플리케이션들이 공존할 것으로 예상되나 2011년이 네이티브 애플리케이션 중심에서 HTML5 기반의 하이브리드 애플리케이션 또는 웹 애플리케이션 중심으로 중심축이 이동하는 원년이 될 것으로 전망된다. 

추가적으로 현재 W3C는 HTML5 표준 개발에 더욱 집중하고 있으며, 웹 애플리케이션 개발에 필요한 추가적인 표준 개발을 위한 WG들을 지속적으로 신설하고 있는 상황이다. 국내의 경우 W3C 대한민국 사무국을 중심으로 W3C HTML5 대한민국 관심그룹(W3C HTML5 Korean Interest Group)을 신설하여 11월 11일 킥오프 회의를 시작으로 공식적인 활동에 들어갔다. 또한 웹 플랫폼 기술은 주요 브라우저 벤더들 그리고 관련 오픈소스 프로젝트들을 중심으로 빠르게 발전하고 있는 상황이며, 크롬은 이미 크롬 웹 스토어를 런칭하여 서비스를 제공하고 있고 모질라는 표준 기반의 웹 앱스토어를 준비하고 있는 상황이다. 이와 같은 다각적인 노력을 볼 때 2011년은 HTML5 기반 모바일 웹 애플리케이션이 활성화되는 원년이 될 것으로 전망해 본다.


저작자 표시 비영리 변경 금지
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. 강성일 2011/07/22 10:26  댓글주소  수정/삭제  댓글쓰기

    잘보았습니다. 언제 기회가 되면 발표를 한번 듣고 싶습니다.

  2. 곰팅 2011/10/10 11:02  댓글주소  수정/삭제  댓글쓰기

    깔끔한 정리 감사합니다. 2011년 10월 현재의 동향도 정리해주시면 큰 도움 될 것 같습니다. :)

  3. CPU water cooling 2012/02/17 12:27  댓글주소  수정/삭제  댓글쓰기

    바나나만먹라는 기 아닌..

  4. kalinda 2012/02/22 15:43  댓글주소  수정/삭제  댓글쓰기

    가불러 준 노랫소리그건 리마음 대로의노래였

2010년 11월 11일에 W3C HTML5 대한민국 관심그룹 킥오프 회의를 SK그린빌딩에서 진행했다. HTML5 대한민국 관심그룹에 대한 좀더 자세한 내용은 예전에 블로그에 썼던 W3C HTML5 대한민국 관심그룹(HTML5 Korean Interest Group) 활동 시작!!! 글을 참조하기 바란다. 이번 회의에는 정말 특별한 회의였는데, 그 이유는 W3C의 CEO인 Jeff Jaffe가 직접 참석하였고, 또한 W3C와 최근 웹 표준 기술에 대한 소개를 했기 때문이다.


행사장 분위기


HTML5 킥오프 회의 프로그램

  • 14:00 ~ 14:40: W3C 소개 (Jeff Jaffe, CEO of W3C) 
  • 14:40 ~ 15:10: Break:
  • 15:10 ~ 15:50: Introduction of W3C HTML5 Korean Interest Group (이원석, W3C HTML5 대한민국 관심그룹 의장)
  • 15:50 ~ 16:00: Break:
  • 16:00 ~ 18:00: HTML5 Korean Interest Group 킥오프 회의   



  • Jeff 발표 후 떠나기 전 기념샷

    Jeff의 기조연설 직후 20분 정도 휴식을 하여 참석자들이 Jeff와 개인적으로 이야기할 수 있는 시간을 갖었고, 이후 필자가  Introduction of W3C HTML5 Korean Interest Group에 대하여 발표했다. 이 발표에서는 HTML5에 대한 간단한 소개, HTML5 표준화 현황 및 표준 개발 일정 그리고 마지막으로 W3C HTML5 대한민국 관심그룹의 임무, 운영기간, 활동 범위, 활동 방향 등에 대해서 소개하였다. 자세한 회의결과는 W3C 대한민국 사무국을 통해서 공개될 예정이다.

    Introduction of W3C HTML5 Korean Interest Group에 대한 발표자료는 아래와 같다.
    Introduction of W3C HTML5 Korean Interest Group
    View more presentations from Wonsuk Lee.

    HTML5 대한민국 관심그룹 차기회의 일정
    일시: 2010년 12월 2일(목요일) 15:00 ~ 18:00
    장소: SK그린빌딩 20층 대회의실

    마지막으로 W3C HTML5 대한민국 관심그룹에는 HTML5에 관심이 있는 어떤 분이라도 가입이 가능하며, W3C HTML5 대한민국 관심그룹 활동 및 참여방법 안내에 따라 가입하면된다. 관심있는 분들의 적극적인 참여를 기대한다.

    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요

    1. bitroid 2010/11/12 16:10  댓글주소  수정/삭제  댓글쓰기

      제 뒤통수도 나왔네요 :) 어제 수고 많으셨습니다. ㅋㅋ

    2. 이윤석 2010/11/12 17:49  댓글주소  수정/삭제  댓글쓰기

      어제는 수고 많으셨습니다.
      좋은 주말되시기 바랍니다. ^^
      활발한 활동이 있는 html5 KIG가 되기를 기대합니다. ^^

    3. doctor's note 2011/09/13 23:08  댓글주소  수정/삭제  댓글쓰기

      이것은 매우 흥미로운 것입니다. 내가 찾은 다행. 하지만 공유 주셔서 감사합니다.

    4. Chicago 2012/04/10 05:42  댓글주소  수정/삭제  댓글쓰기

      이것은 멋진 외모! 열광적인 직업!

    소 개
    드디어 W3C HTML5 대한민국 관심그룹이 활동을 시작한다. W3C HTML5 KIG(HTML5 Korean Interest Group)에 대해서 간단하게 소개를 하면 W3C HTML5 KIG은 W3C의 공식적인 그룹이며 W3C에서 HTML 표준 개발을 담당하고 있는 HTML WG의 하위 그룹에 속해있다. 그리고 HTML5에 관심이 있는 분이면 특별한 제약없이 참여가 가능합니다. 

    활동목표
    대한민국에서 HTML5 표준(안) 그리고 HTML5와 밀접히 관계된 표준에 초점을 둔 논의를 활성화 하고, 이들 표준과 관련된 대한민국의 코멘트와 질문들을 모으며, 이들 표준에 정의된 기술에 대한 대한민국의 특별한 유즈케이스(Use Case)를 정리하는 것이다. 그리고 이러한 활동의 결과를 W3C의 HTML WG 및 다른 적절한 WG 그리고 W3C 회원사와 커뮤니티에 보고하는 것이다.


    활동범위
    HTML5 대한민국 관심그룹의 작업은 대한민국에서 HTML5 표준(안)에 대한 논의의 핵심적인 역할을 하는 것이다. 본 그룹은 대한민국의 관련 기업이나 전문가들이 HTML5 및 관련 기술과 관련된 W3C 활동 참여를 촉진시키기 위한 방법으로 대한민국 W3C 멤버들과 합의하에 제안되었다. 그리고 대한민국 W3C 멤버들은 다음과 같은 리스트의 실현에 도움을 줄 수 있는 새로운 관심그룹의 생성 제안에 동의 하였다:
    • HTML5에 대한 잠재적인 공헌자들이 HTML5에 관한 공개적인 논의를 영어보다는 모국어를 통해서 효과적으로 참여할 수 있도록 한다.
    • 공헌자들이 모국어를 이용해서 기술적인 논의를 할 수 있는 환경의 제공은 잠재적 참여자들에게 같은 시간대에서 다른 공헌자들과 적시에 의사소통을 할 수 있는 최적의 기회를 제공한다.

    본 그룹은 HTML5 표준(안)을 포함하여 다음과 같은 관련 표준(안)들에 대해 검토할 수 있다. 그러나 반드시 아래의 표준(안)들에 제한되는 것은 아니다:

    본 그룹은 Device APIs and Policy Working Group이나 Web Performance Working Group 등 웹 API와 관련된 다른 그룹에서 개발된 표준초안에 대해서도 검토할 수 있다.

    HTML5 표준(안)과 관련 표준(안) 검토와 함께 본 그룹은 이들 표준(안)에 대한 코멘트와 질문들을 받아 정리하고, 이들 표준(안)에 정의된 기술과 관련된 대한민국에서의 특별한 유즈케이스(Use Case)들에 대한 정보를 모을 수 있다. 또한 이러한 활동의 결과를 HTML WG과 Web Applications WG, Geolocation WG 그리고 Device APIs and Policy WG 등 관련된 적절한 그룹 그리고 W3C 회원사 및 공동체에 제공할 수 있다.

    W3C HTML5 KIG은 대한 자세한 사항은 HTML5 대한민국 관심그룹 챠터(HTML5 Korean Interest Group Charter)를 보면 자세히 알수 있습니다.

    가입방법
    가입 방법은 W3C HTML5 대한민국 관심그룹 활동 및 참여방법 안내를 보고 가입하면 된다.


    HTML5 KIG에 대한 개인적인 기대
    향후HTML5는 현재 W3C에서 개발하고 있는 표준의 중심에 있으며 산업계의 요구도 상당하다.또한 앞으로 HTML5의 적용은 모바일 단말을 시작으로 거의 모든 Internet Connected Device로 확장 될 것으로 예상된다. 따라서 HTML5 KIG가 국내의 HTML5 관련 기술 및 표준화 동향, 현재의 이슈를 논의하는 국내의 대표적인 논의장의 역할과 국내 기업들이 원하는 표준 기능을 W3C 표준에 반영하는 창구역할을 기대한다.

    관련기사




    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요

    1. vf2416 2010/11/10 16:51  댓글주소  수정/삭제  댓글쓰기

      웹표준은 2~3년 후에나 도입 된답니다ㅋ http://pann.nate.com/b202932488

    2. magento themes 2011/11/09 10:51  댓글주소  수정/삭제  댓글쓰기

      이 활동에서, 그들은 컴퓨터에 대한 많은 것들을 배울 수 있습니다.

    3. Find Out More 2012/03/24 13:00  댓글주소  수정/삭제  댓글쓰기

      브루가가들조각했는데 실수을리는없.....에라잇 르것다 섬세한 조각씨하나만큼은대하~ 단!

    4. details 2012/04/06 17:54  댓글주소  수정/삭제  댓글쓰기

      스토리두 로를찾 오신분께.

    5. Magento Themes 2012/04/19 21:52  댓글주소  수정/삭제  댓글쓰기

      Magento is the most popular and widely used Ecommerce shopping cart. It can be installed on virtually any system from Unix, Linux to Windows and even Mac. It is written purely in PHP language and utilizes MySQL database. Free & Premium themes for Magento are available from $79. When you are searching templates for Magento at our website use search box at the top right corner or Tags. It will help you to find desired template for your online store much faster. Get Best Magento Templates 1.5 for your Magento store. We have listed many free Magento templates. www.BooThemes.com offers top quality commercial templates for Magento commerce open source Ecommerce shopping cart. Feel free to browse our biggest collection of templates. 단

    6. áo thời trang 2012/04/19 21:53  댓글주소  수정/삭제  댓글쓰기

      Chúng tôi chuyên kinh doanh trực tuyến các mặt hàng quần áo thời trang như áo hàn quốc , quần hàn quốc , quần áo quảng châu , phụ kiện thời trang ....Đến với cửa hàng quần áo thời trang của chúng tôi, quý khách sẽ luôn được cập nhật những sản phẩm quần áo thời trang mới nhất và đẹp nhất mỗi tuần với giá cả cạnh tranh đáp ứng mọi nhu cầu. Rất mong được sự quan tâm và ủng hộ nhiệt tình của quý khách trên toàn quốc đối với cửa hàng quần áo thời trang của chúng tôi.

      Copyright © 2012 Quần Áo Thời Trang Quảng Châu - Online Shop
      Địa chỉ: 364/50 Thoại Ngọc Hầu, P. Phú Thạnh, Q. Tân Phú, HCM
      Điện thoại: 0123-243-9327 | 0914-299-455
      Email: thoitranglx@gmail.com | negahcm@gmail.com 로를찾

    7. web designer 2012/04/19 21:54  댓글주소  수정/삭제  댓글쓰기

      스토리두 로를찾 오신분께.

    지금까지 말이 많았던 HTML5 표준 개발 일정에 대한 Last Call 일정이 공개되었다. 이는 W3C에서 HTML WG의 의장들에게 좀더 빨리 HTML5 표준 개발을 진행해 줄 것을 요청함에 따라서 새로운 Last Call 일정을 준비한 것이다. 지금까지 HTML5 표준 개발 일정에 대한 불만들이 많았던 상황에서 아주 좋은 뉴스라고 생각이 된다.

     

    간단하게 일정을 정리해보면 아래와 같다.

     -      2010 10 1: HTML5 표준 초안 Last Call

    n  HTML5 Last Call 코멘트 받기 시작

     

    -      2011 5 22: HTML5 표준 초안 Last Call 종료

    n  HTML5에 대한 모든 코멘트와 이슈들 정리완료

      

    이렇게 진행된 상황을 간단히 설명하면, W3CHTML5 표준을 2007년부터 개발하고 있다. 다양한 회사들의 비즈니스 이슈로 지금까지 많은 논쟁이 있었으며, 따라서 HTML WG 의장들은 WG내의 표준개발을 효과적으로 하기 위해 결정정책을 만들어서 진행하고 있었다. 현재 HTML5 표준에는 200개 정도의 버그와 25 개정도의 이슈가 있는 상황이다.

     이와 같은 상황에서 좀더 빠르게 HTML5 Last Call 단계로 진행하기 위해, HTML WG 의장들은 HTML5의 초기 Last Call에 대한 일정 계획하여 진행할 계획이다. 2010 10월부터 받는 HTML5 표준과 관련된 모든 새로운 버그들은 의장들의 허가할 수 있는 예외적인 상황으로 인정하여 Last Call 코멘트로 처리될 예정이다. 이러한 의지는 초기 Last Call로 가기 위한 것으로 최대한 빨리 이슈들을 정리하기 위한 것이다.

     

     구체적인 Last Call 마무리 일정

     2011 522까지 Last Call 단계를 마무리하는 구체적인 일정은 아래와 같다.

    목표 일정

    수행할 작업

    2010 10 1

    -   Cutoff for bugs to be considered as pre-LC feedback

    Consequence of missing this date: bugs beyond this date will be treated as Last Call comments. The Chairs could grant exceptions on a case-by-case basis, but in general there is no guarantee of a bug filed after the cutoff being settled before Last Call.

     

    Note: We're working with the editor to find ways to ensure tighter change control for the draft after the cutoff date, but we do not have anything to announce on this front yet.

    201012 8

    -   All bugs filed by cutoff date addressed by editor

    Consequences of missing this date: bugs still open past this date can be escalated to issues immediately if the originator so chooses.

    2011 1 22

    -   Cutoff for escalating bugs for pre-LC consideration - all issues in tracker, calls for proposal issued by this date

    Consequences of missing this date: any further escalations will be treated as a Last Call comment.

    2011 2 23

    -   Every issue has at least one Change Proposal

    Consequences of missing this date: issues will be closed without prejudice and marked POSTPONED; can be reconsidered during LC or for a later version of HTML.

    2011 3 22

    -   all calls for counter-proposals complete

    Consequences of missing this date: if any issue has only one proposal, we call for consensus on that proposal.

    2011 4 22

    -   all issues resolved; LC resolution presented to group

    Consequences of missing this date: this would be solely a failure by the chairs, so we would publicly eat crow and plot a new date.

    2011 5 22

    -   fixable LC objections addressed; if all goes well, LC resolution carries

    Consequences of missing this date: try LC resolution again.

     

     

    참고자료

     HTML5: Getting to Last Call

    http://www.w3.org/QA/2010/09/html5_getting_to_last_call.html

     Timeline to Last Call

    http://lists.w3.org/Archives/Public/public-html/2010Sep/0074.html

    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요

    1. Outsider 2010/09/16 20:23  댓글주소  수정/삭제  댓글쓰기

      뉴스는 많이 보긴 했는데 Last Call이란게 정확히 어떤 의미인가요? 마지막 요구사항을 받겠다는 건가요?

      • 이원석 (wslee@etri.re.kr) 2010/09/17 00:05  댓글주소  수정/삭제

        안녕하세요~
        W3C 표준화 단계는 First Publication Working Draft를 시작으로 지속적으로 Working Draft로 개발이 되다가 Working Draft Last Call 그리고 Candidate REC(Recommendation), Proposed REC 그리고 마지막으로 REC이 되면 최종 표준이 됩니다^^

        Last Call후에 몇단계가 남아 있지만 의미적으로 보면 표준안에 대한 거의 최종적인 코멘트를 받는 단계라고 보시면됩니다. 그래서 Working Draft Last Call은 일단 스펙은 안정화가 되었다고 보시면 되구요~ Last Call이 끝나면 W3C에서는 Candidate Recommendation 단계로 넘어가고... 이때 Call for Implementation을 해야합니다. 보통 2개이상의 브라우저에서 스팩의 기능을 구현하고 상호운용성에 문제가 없지는 확인합니다~ ;) 그리고 Proposed REC과 REC 단계를 통해 최종 표준이 됩니다. Proposed REC 부터는 내용의 변화가 거의 없다고 보시면 됩니다~

      • Outsider 2010/09/17 00:44  댓글주소  수정/삭제

        자세한 설명 감사드립니다. ㅎ
        이번 Last Call에 대해서 글올라온건 많이 봤는데 정확한 의미를 몰라서 헷갈리고 있던차에 이제 확실히 감을 잡았네요. ^^ 중요한 막바지 단계군요 ㅎㅎ

    2. free macbook pro 2011/12/04 01:42  댓글주소  수정/삭제  댓글쓰기

      안녕하세요! 위대한 블로그! 고맙다!

    3. free ipad 2 2011/12/12 23:41  댓글주소  수정/삭제  댓글쓰기

      나는 당신에게 동의 완전히 ^_^ 게시 고맙습니다!

    4. kalina 2012/02/22 15:42  댓글주소  수정/삭제  댓글쓰기

      나는그모든 걸 잊을수없었다

    5. Visit This Url 2012/03/24 12:55  댓글주소  수정/삭제  댓글쓰기

      백한 습서작가추구한슬픔과외움라는 테마를 어 을것같습니.조각의모은그의 이(족)라요. 정말완벽하 진리리의작입다.

    6. url 2012/04/06 13:17  댓글주소  수정/삭제  댓글쓰기

      체중도 감량 해야지만.

    샌프란시스코의 자바, PHP 그리고 HTML5 사용자 그룹이 호스트하여 개최된 HTML5에 대한 행사가 2010년 5월 11일에 있었다. 이 행사에 초청된 연사들은 HTML5에 대한 최고의 전문가이기 때문에 HTML5에 대해 관심이 있는 분이라면 본 비디오들은 반드시 참고할 필요가 있다.

    1. LearnAbout HTML5 and the Future of the Web (구글 Brad Neuberg)





    2.Learn About HTML5 and IE9 (마이크로소프트 Giorgio Sardo)






    3. Learn About HTML5 Communications APIs ( Kaazing Peter Lubbers )






    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)
    TAG html5, 강의

    댓글을 달아 주세요

    1. sayingu 2010/10/28 23:50  댓글주소  수정/삭제  댓글쓰기

      좋은 자료 감사 합니다~ 1등 이네요 ㅎㅎ

    2. kaitlynn 2012/02/22 13:08  댓글주소  수정/삭제  댓글쓰기

      시화님 집사랑하라 번 상처받지않것처럼 부내이번 편집어소되서많이 려기 였니다.각하 든오늘의현실을지나는이들이나

    3. here 2012/03/30 05:42  댓글주소  수정/삭제  댓글쓰기

      각박고힘든 늘 실을 나 들나 성취감 만는이. 두게소한교이되 싯귀 여겨집니다.이시 고대이라 다윗에얽힌 다음과 같은이야기 소재로 였다고합니다.다 이어느날궁의세인을 러자을기는아름다 지 나만라고 시며

    4. article 2012/03/30 20:26  댓글주소  수정/삭제  댓글쓰기

      바나나는옷이인가 어 놓으면 (바에닿지않게)오래 관가능고

    5. Website 2012/04/06 17:41  댓글주소  수정/삭제  댓글쓰기

      르다 날도더데 네가알서해라. 너더위 먹었지?아빠는.헤헤헤.

    6. web designer 2012/04/19 21:55  댓글주소  수정/삭제  댓글쓰기

      시화님 집사랑하라 번 상처받지않것처럼 부내이번 편집어소되서많이 려기 였니다.각하 든오늘의현실을지나는이들이나

    7. áo thời trang 2012/04/19 21:56  댓글주소  수정/삭제  댓글쓰기

      각박고힘든 늘 실을 나 들나 성취감 만는이. 두게소한교이되 싯귀 여겨집니다.이시 고대이라 다윗에얽힌 다음과 같은이야기 소재로 였다고합니다.다 이어느날궁의세인을 러자을기는아름다 지 나만라고 시며

    8. magento themes 2012/04/19 21:56  댓글주소  수정/삭제  댓글쓰기

      좋은 자료 감사 합니다~ 1등 이네요 ㅎㅎ

    본 글은 구글이 운영하고 있는 HTML5ROCKS (HTML5 개발자 사이트)에 올라온 Best Practices for a Faster Web App with HTML5를 기반으로 번역하여 정리한 것이다원문과 거의 비슷하지만 완전히 똑같이 번역한 것은 아니다.

    원문http://www.html5rocks.com/tutorials/speed/quick/

      

    n  소개 

    HTML5의 많은 부분은 지금까지 자바스크립트 라이브러리로 처리했던 다양한 기술과 기능에 대한 네이티브 브라우저 기능을 제공하는 것이다이러한 기능을 사용하는 것은 처리속도를 훨씬 빠르게 만들 수 있다본 튜터리얼에서는 어떻게 HTML5 CSS3를 이용하여 반응이 빠른 애플리케이션을 개발할 수 있는지에 중점을 둔다.

     

    n  1: 쿠키 대신 웹 저장소를 사용하라

    쿠키는 지금까지 사용자 데이터를 식별하기 위해 지금까지 사용되어 왔지만 이는 심각한 단점들을 가지고 있었다가장 큰 결점은 모든 쿠키 데이터가 모든 HTTP 헤더에 추가된다는 것이다이는 성능에 커다란 악영향을 줄 수 있으며특히 XHR을 사용하는 경우에는 더욱 문제가 될 수 있다그래서 모범사례는 쿠키 크기를 줄이는 것이다. HTML5에서는 이보다 더 효과적인 방법이 있는데이는 쿠키 대신 sessionStorage localStorage를 사용하는 것이다.

     

    // if localStorage is present, use that

    if (('localStorage' in window) && window.localStorage !== null) {

     

      // easy object property API

      localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

     

    } else {

     

      // without sessionStorage we'll have to use a far-future cookie

      //   with document.cookie's awkward API :(

      var date = new Date();

      date.setTime(date.getTime()+(365*24*60*60*1000));

      var expires = date.toGMTString();

      var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+

                      ' expires='+expires+'; path=/';

      document.cookie = cookiestr;

    }

     

     

    n  2: 자바스크립트 애니메이션 대신 CSS Transitions를 사용하라 

    CSS Transitions는 두 상태간의 아주 매력적인 시각 효과를 준다대부분의 스타일 프로퍼티는 택스트 그림자(text-shadow), 위치(position), 배경 또는 색상 등에 대한 처리로 변화될 수 있다. “:hover” 또는 HTML5 , “:invalid”과 “:valid”와 같이 pseudo-selector states 변화하여효과를   있다.

     

    div.box {

      left: 40px; 

      -webkit-transition: all 0.3s ease-out;

         -moz-transition: all 0.3s ease-out; 

           -o-transition: all 0.3s ease-out; 

              transition: all 0.3s ease-out;

    }

    div.box.totheleft { left: 0px; }

    div.box.totheright { left: 80px; }

     

    “totheleft”와 “totheright” 클래스 토글링(toggling)을 추가하여 box를 이동할 수 있다이 코드의양을 자바스크립트 애니메이션 라이브러리와 비교해 보자명확히 브라우저에 보내지는 바이트 수는 CSS 기반 애니메이션을 사용할 때가 훨씬 적다추가적으로 GPU 레벨 가속화를 이용하면 이러한 시각 효과는 아주 부드럽게 처리될 것이다.

     

     

    n  3: 서버와 통신하는 대신 클라이언트측의 데이터베이스를 사용하라 

    Web SQL Database IndexedDB는 클라이언트 측의 데이터베이스 기능이다. XHR 또는 폼 제출(form submission)를 이용해 데이터를 서버에 포스팅하는 것이 일반적인 패턴이지만이러한 방식 대신 클라이언트 측의 데이터베이스를 사용할 수 있다. HTTP 요청을 줄이는 것이 모든 성능 엔지니어의 1순위 목표이다따라서 데이터베이스를 이용하여 서버와의 통신을 많이 줄일 수 있다. localStorage 그리고 sessionStorage는 특정 사이트의 각 단계별 입력 정보를 저장하는데 활용할 수 있으며이는 클라이언트 측의 데이터베이스 API 보다 훨씬 빠르다.

    예를 들면만일 수백개의 메시지를 갖은 데이터 그리드 컴포넌트 또는 수신함이 있을 때로컬 데이터베이스 안에 데이터 저장을 한 것은 사용자가 검색필터링정렬 등을 원할 때HTTP로 서버와 통신하는 것을 크게 줄일 수 있다.

    좀더 자세히 이해하고 싶으면 Web SQL Database Tutorial을 참고해라

     

    n  4: 자바스크립트 개선은 상당한 성능 개선을 제공한다 

    자바스크립티 1.6에는 Array prototype에 대한 많은 메소드가 추가되었으며, 이들은 지금 IE를 제외한 대부분의 브라우저에서 사용가능하다.


    // give me a new array of all values multiplied by 10

    [5,6,7,8,900].map(function(value){ return value*10; }); // [50,60,70,80,9000]

      

    // create links to specs and drop them into #links

    ['html5','css3','webgl'].forEach(function(value){

      var linksList = document.querySelector('#links');

      var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');

      linksList.innerHTML +=  newLink;

    }); 

     

    // Return a new array of all mathematical constants under 2

    [3.14, 2.718, 1.618].filter(function(number){

      return number < 2;

    });

    // [1.618]

     

    // You can also use these extras on other collections like nodeLists

    [].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem,i){

      localStorage['bucket' + i] = elem.getAttribute('data-bucket');

    })


    대부분의 경우 이들 Native 메소드를 사용하는 것은 전형적인 for 루프를 사용하는 것 보다 훨씬빠르다: for ( var i = 0; len = arr.length; i < len; i++ ).

    Native JSON 파싱( JSON.parse() ) json2.js 파일을 대체한다. Native JSON은 외부의 스크립트를 사용하는 것보다 훨씬 빠르고 안전하다이미 IE8, 오페라 10.50, 파이어폭스 3.5, 사파리4.0.3 그리고 크롬에서 이미 제공한다.

     

    n  5: 라이브 사이트에 대해서도 캐쉬 매니페스트(cache manifest)를 사용하라 

    2년전에 워드프레스(Wordpress는 워드프레스 터보(Wordpress Turbo)라는 기능을 추가하기 위해 구글 기어스(Google Gears)를 사용했다이는 속도를 높이기 위해 관리 패털의 많은 자원들을 로컬에 캐슁하였다우리는 이와 같은 기능을 HTML5의 애플리케이션 캐쉬(applicationCache) cache.manifest로 실현할 수 있다.

    애플리케이션 캐쉬는 Expires 헤더를 설정하여 사용하는 것보다 좀더 많은 장점이 있다그리고 이러한 방법은 캐슁할 파일을 명확히 정리하여 사용할 수 있고따라서 브라우저가 특정자원이 사용되기 전에 미리 캐슁할 수 있기 때문에 실행 속도를 최적화 시킬 수 있다.

    사이트의 구조를 탬플릿으로 생각해 보자이는 HTML의 구조는 그대로 유지하고 변경 가능한 데이터를 포함한다애플리케이션 캐쉬를 이용해서 사이트를 구성하는 HTML 템플릿들을 처리하고,  cache.manifest를 통해서 마크업을 캐슁한 후 컨텐츠의 업데이트는 JSON을 받아서 처리한다이와 같은 모델은 아이폰이나 안드로이드 Native 뉴스 앱이 하는 것과 아주 유사하다.

     이에 대한 가이드는 application cache tutorial을 참조해라.

      

    n  6: 비주얼 처리를 개선하기 위해서 하드웨어 가속기능을 켜라 

    가장 앞서고 있는 브라우저에서 많은 시각적 처리는 GPU-레벨 가속기능을 최대한 활동할 수 있다. GPU-레벨 가속기능은 고도의 동적 처리를 자연스럽게 처리하는데이는 Firefox Minefield IE9 그리고 사파리5에서 지원한다크롬은 현재 3D 변환 기능과 하드웨어 가속 기능을 윈도우 버전에서만 지원하며조만간 다른 플랫폼에서도 지원할 예정이다.

    GPU 가속기능은 단지 아주 제한된 조건하에서만 동작한다그러나 3D 변환과 애니메이션 투명도는 이러한 기능을 기동시키기 위한 가장 일반적인 방법이다조심스럽게 이러한 기능을 켜는 방법은 아래와 같다. 

    .hwaccel {  -webkit-transform: translateZ(0); }

     

    그렇지만보장할 수는 없다. :)

    지원되는 하드웨어 가속기능으로 애니메이션 변환(animated translation), 회전(rotation), 크기조정(scaling), 투명도는 확실히 부드럽게 표현될 것이다이들 효과는 층별 컨텐츠를 다시 그릴 필요없이 GPU로 직접 처리되는 장점을 가질 것이다그러나 페이지의 레이아웃에 영향을 주는 모든 프로퍼티들은 아직은 상대적으로 느리게 보일 것이다.

      

    n  7: CPU에 부담을 많이 주는 오퍼레이션에 대해서는 웹 워커를 사용하라 

    웹워커는 두가지 중요한 장점을 갖는다. 1) 속도가 빨라진다. 2) 태스크들을 수행하는 동안에도 브라우저는 반응할 수 있는 상황을 유지한다.  워커에 대한 데모는 HTML5 Slide Deck을 참고해라

    웹워커를 사용하기에 적합한 몇몇 상황들은 아래와 같다. 

    -       긴 문서의 테스트 포맷팅(Text formatting of a long document)

    -       문법 강조(Syntax highlighting)

    -       이미지 처리(Image processing)

    -       이미지 합성(Image synthesis)

    -       대량의 배열 처리(Processing large arrays)

     

     

    n  8: HTML5 폼 애트리뷰트와 Input 타입 

    HTML5에는 search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color 등 새로운 input type들을 추가됐다현재까지는 이들 기능지원에 대한 브라우저간의 편차가 크며단지 오페라만 대부분 기능을 지원하고 있다따라서 이러한 기능을 사용할 때 접속하는 브라우저의 지원여부를 확인해서 절절한 처리를 해주어야 한다.

    추가적으로 HTML5에 폼과 관련하여 입력 폼의 기본값을 사용자에게 흐릿하게 보여주는placeholder와 페이지를 로딩한 후 입력박스에 자동으로 커서를 위치시키는 autofocus 애트리뷰트가 추가되었다또한 사용자 입력 값의 검증 기능과 관련해서 사용자가 입력을 했는지를 검증해 주는 required 애트리뷰트 그리고 입력 값 검증을 위한 패턴을 표현하는 pattern 애트리뷰트가 추가되었다. Pattern 애트리뷰트에 자바스크립트 정규식으로 패턴을 정의하면 브라우저가 사용자가 입력한 값이 정의된 패턴에 맞는지 검증을 자동으로 해준다예를들어 이메일 주소 같은 것을 이러한 pattern 애트리뷰트를 이용해서 쉽게 검증할 수 있다이러한 기능을 사용하면 자바스크립트로 코드를 상당히 줄일 수 있으며 브라우저 내장된 기능으로 처리하기 때문에 속도가 빠르다.

    이와 관련된 데모는 HTML5 Slide deck을 참고해라.

     

    n  9: 이미지 효과를 표현할 때 CSS3 effects를 최대한 활용해라 

    CSS3는 지금까지 정밀한 시각적 디자인 표현을 위해 사용하던 이미지 처리들을 대체할 수 있는다양한 종류의 기능을 제공한다. 2K 크기의 이미지를 100 Byte CSS로 대체하는 것은 큰 장점이다물론 추가적인 HTTP 요청이 필요없는 장점도 생긴다활용하기 좋은 CSS의 몇가지 주요 효과들은 아래와 같다. 

    l  Linear and radial gradients

    l  Border-radius for rounded corners

    l  Box-shadow for drop shadows and glow

    l  RGBA for alpha opacity

    l  Transforms for rotation

    l  CSS masks

     

    예를들어 gradients를 이용해서 아주 우아한 버튼을 만들 수 있으며 이미지로 처리하던 다양한 효과들을 대체할 수 있다이와 같은 기능들은 대부분의 브라우저들이 안정적으로 지원하고 있다또한 이런 기능을 지원하는 않는 브라우저에 대한 처리는 Modernizr와 같은 라이브러리를 이용하여 체크하고 대응되는 이미지를 준비하여 처리하면 된다.

     

    n  10: XHR보다 적은 밴드위스로 빠르게 전달할 수 있는 웹소켓 

    웹소켓은 Comet의 인기가 급증하는 것에 대응해서 설계되었다지금은 XHR 모델 기반의Comet 대신에 웹소켓을 사용하는 것이 좋다. 

    웹소켓은 간결한 프레임을 사용하기 때문에 XHR 보다 훨씬 적은 bandwidth를 소비한다몇몇 리포트에 따르면 유선 환경에서 35% 정도의 바이트가 줄어든다고 한다추가적으로 메시지를 전송할 때 큰 크기를 대상으로 하면 성능의 차이가 훨씬더 명확해진다시험에서 XHR이 웹소켓보다 3500% 정도의 전송 시간이 더 필요한 것으로 평가되었다최근에 에릭슨 실험실은 웹소켓의 시험을 통해 HTTP 기반의 ping 시간이 웹소켓에 비해 3 ~ 5배 정도 길다는 것을 확인했다따라서 에릭슨에서는 웹소켓이 실시간 애플리케이션에 확실히 더 적절하다는 것으로 결론을 내렸다.

     

    n  추가적인 자원들 

    성능측정을 위해 파이어폭스의 Page Speed 플러그인그리고 YSlow를 사용할 수 있다추가적으로 Speed Tracker for Chrome DynaTrace Ajax for IE는 좀더 세부적인 분석 정보를 제공한다.

    Chrome Developer Tools에 대한 가이드 Resource Tab과 조만간 출시될 새로운 Audits panel을 통해 제공할 것이다.

    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요

    1. 데꾸벅 2010/09/04 02:23  댓글주소  수정/삭제  댓글쓰기

      좋은글 잘봤습니다. ^^

    2. 진서기 2010/09/05 14:22  댓글주소  수정/삭제  댓글쓰기

      크롬은 현재 3D 변환 기능과 하드웨어 가속 기능을 윈도우 [버번]에서만


      오타요!

      글잘봤습니다.

    3. 녹풍 2010/09/09 01:16  댓글주소  수정/삭제  댓글쓰기

      좋은 글 감사합니다! HTML5에 관심이 지대하게 많은 1인에게 큰 도움이 되셨어요! :)

    4. 신진수 2010/12/20 08:25  댓글주소  수정/삭제  댓글쓰기

      좋은 글 잘 봤습니다..
      앞으로도 좋은 정보 많이 기대하겠습니다.

    5. 임웅 2011/02/22 14:57  댓글주소  수정/삭제  댓글쓰기

      항상 좋은 글들 잘 보고 있습니다. 세미나 또 기획중에 있습니다. 더 많은 것 보여주십시오. ^^ 한번 찾아뵐게요..

    6. 김하 2011/02/22 20:38  댓글주소  수정/삭제  댓글쓰기

      안녕하세요, 좋은 글 잘 봤습니다 ^^
      html5 와 css3 이용해서 모바일웹 프로젝트를 진행중인데요..
      그럼 안드로이드폰에서는 css3 transform 3d를 구현하지 못하는건가요?
      큐브를 테스트해봤더니 ios에서는 구현이 되고 안드로이드 디바이스에서는 z 값 표현이 안되더라구요..

    7. lanette 2012/03/06 08:05  댓글주소  수정/삭제  댓글쓰기

      물결은 우 만다

    8. more info here 2012/04/04 03:13  댓글주소  수정/삭제  댓글쓰기

      멈춘엘베이터서내린 아이는 정신이뛰어 라갔는

    9. web designer 2012/04/19 21:56  댓글주소  수정/삭제  댓글쓰기

      큐브를 테스트해봤더니 ios에서는 구현이 되고 안드로이드 디바이스에서는 z 값 표현이 안되더라구요..

    10. áo thời trang 2012/04/19 21:57  댓글주소  수정/삭제  댓글쓰기

      안녕하세요, 좋은 글 잘 봤습니다 ^^
      html5 와 css3 이용해서 모바일웹 프로젝트를 진행중인데요..

    11. magento themes 2012/04/19 21:57  댓글주소  수정/삭제  댓글쓰기

      멈춘엘베이터서내린 아이는 정신이뛰어 라갔는

    조금전 2010 모바일 콘텐츠 컨퍼런스에서 발표했던 자료이다. 이 자료를 준비하면서 모건스텐리의 인터넷 트랜드 리포트를 찹조했는데 모바일 시대가 빠르게 오고 있음을 다시금 느낄 수 있었다. 그리고 웹킷으로 정리가 되고 있는 모바일 웹 플랫폼 환경에서 HTML5 기반 웹 애플리케이션의 가능성은 충분하다는 생각이 들었다.

    HTML5 and the Future of the Mobile Web
    View more presentations from wonsuk73.

    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요

    1. 민원기 2010/09/01 08:06  댓글주소  수정/삭제  댓글쓰기

      잘 봤습니다. 감사합니다.

    2. partir 2010/09/01 16:26  댓글주소  수정/삭제  댓글쓰기

      어제 발표하신 내용 잘 들었습니다.그리고 자료 공유 해 주셔서 감사합니다.

    3. 김동환 2010/09/01 21:22  댓글주소  수정/삭제  댓글쓰기

      HTML5에 대해서 유익한 정보 설명해주신 점 감사합니다.
      어제 마지막에 트윗 팔로윙 하겠다고 한 젊은이 입니다:)

    4. 강성일 2011/07/22 10:12  댓글주소  수정/삭제  댓글쓰기

      자료 잘보았습니다. 저는 HTTP기반 HTML5 미디어 스트리밍에 관심이 있습니다.

    5. visit this url 2012/03/28 14:48  댓글주소  수정/삭제  댓글쓰기

      동차키와 대을안지 네..참로우리집 22층인 이미엘리베이터는 내려고있..

    지난 글 "HTML5 표준 범위와 W3C HTML WG 표준화 현황"에서 HTML5의 표준 범위에 대해서설명 하면서 Device API에 대한 중요성을 설명하였는데, 지난 7월 14일~16일까지 런던에서 W3C DAP(Device APIs and Policy) WG 회의가 있었다. 필자도 DAP WG에서 에디터를 맡고 있어 회의에 참석하였으며 이에 대한 주요한 내용을 정리해 본다.

    기존 웹 애플리케이션의 한계: 음성인식 검색, 비디오 캡쳐 등 구현 불가 
    현재 다음과 구글이 제공하는 Native 스마트폰 애플리케이션은 음성인식 기반 인터넷 검색 기능을 제공하고 있으며, 구글의 스마트TV에서도 음성인식 기반의 콘텐츠 검색을 지원할 예정이다. 또한 스마트폰에서 카메라 애플리케이션이나 음악을 녹음해서 이를 기반으로 해당 노래에 대한 정보를 찾아주는 애플리케이션 등은 상당히 유용하고 인기있는 애플리케이션이다. 그러나 지금까지 표준기반의 웹 애플리케이션으로는 이러한 기능 개발이 불가능했다. 기본적으로 마이크나 비디오 카메라를 제어하기 위한 표준화된 자바스크립트 API가 존재하지 않았으며, 또한 HTML에서 이러한 디바이스들 연결하여 사용할 수 있도록 해주는 마크업이 존재하지 않았기 때문이다. 


    Device API 개념 소개
    Device API 표준은 웹 애플리케이션이 디바이스의 자원들 (GPS, 센서주소록일정카메라 제어배터리 정보갤러리파일 시스템 등)을 접근 가능하게 하는 API 표준으로, 이러한 표준을 이용하면 웹 애플리케이션이 사진이나 동영상 캡처 등의 기능을 자연스럽게 지원할 수 있다. 아래의 그림은 Device API의 개념을 보여준다.



    먼저 현재 DAP WG에서 적극적으로 개발 중인 API 표준은 아래와 같이 정리해 볼 수 있으며, 이러한 표준 이외에도 보안과 Privacy에 대한 표준 개발을 진행하고 있다.

    API 

    설 명

    개발주체

    Calendar

    디바이스의 일정 정보에 접근하기 위한 API

    프랑스 텔레콤, RIM

    Contact

    디바이스의 주소록 정보에 접근하기 위한API

    프랑스 텔레콤

    Media Capture

    디바이스 내 오디오, 이미지, 비디오 기능에 접근하기 위한 API

    인텔, 노키아, 도이치 텔레콤

    Messaging

    디바이스의 SMS, MMS, email 기능에 접근하기 위한 API

    텔레포니카, 오페라, 에릭슨

    System Information

    디바이스의 기본적인 속성에 대한 API(배터리 용량, 네트워크 대역폭, CPU부하, 저장 용량, /출력 기기)

    인텔, 오페라

    Gallery

    디바이스 내에 있는 미디어 갤러리(media gallery)에 접근하는 API.

    ETRI

    Powerbox

    사용자 개인 리소스를 브라우저에서 요청하기 위한 웹 기반 전달 방식

    구글

    Application Launcher

    디바이스에 인스톨된 어플리케이션(Native Application)에 접근하기 위한 API

    ETRI




    W3C DAP WG의 Device API 표준 개발 전략
    DAP WG에서 지금까지 Device API에 대한 보안 및 Privacy 이슈가 아직 견고하게 정리가 되지 않은 상황이기 때문에 현재 개발하고 있는 표준 API들을 Read 기능과 Write 기능을 분리하여 별도의 표준으로 개발하기로 하였다. 이렇게한 이유는 표준 개발이 가능한 기능은 최대한 빠르게 시장에 제공하기 위함이다. 따라서 Device API에 포함된 표준들은 보안 및 Privacy 이슈가 상대적으로 적은 Read 기능에 대한 표준들이 빠르게 표준화가 이루어질 것이며, 그후 Write 기능에 대한 표준들이 개발될 예정이다.


    Device API 표준과 HTML5 마크업 관계 정립
    DAP WG에서 Device API 표준과 HTML5의 마크업 간의 조화를 이루기 위한 노력을 진행하고 있다. 이는 웹 애플리케이션이 보다 자유롭고 쉽게 디바이스의 자원들을 처리할 수 있는 방법들을 제공한다는 의미에서 상당히 중요한 이슈이다. 예로 이번 회의에서 초안이 정리된  HTML Media Capture 표준을 볼 수 있다. 본 표준은 Media Capture API와 별개로 HTML 마크업을 이용해서 디바이스의 자원과 연동하기 위한 기능을 정의하고 있다. HTML Media Capture 표준에 대해 이번회의에서 정리된 주요 내용은 아래와 같다. HTML의 <input>에 accept 애트리뷰트를 이용하여 어떤 Device에서 어떤 타입의 미디어를 받아들일지 정의하는 것이다. 즉, 카메라를 이용해서 image를 입력으로 받겠다고 정의를 한 것다.

    <input type="file" accept="image/*; capture=camera">

    * Note: capture의 값으로 camera, camcorder, microphone, filesystem이 올 수 있음.

    아래의 예는 HTML Media Capture 표준을 이용해서 구현할 수 있는 Media Caputure File Picker에 대한 랜더링 예를 보여준다. 트위터 같은 애플리케이션을 보면 트위팅을 할 때 사진을 같이 올릴 수 있으며, 사진을 선택할 때 기존에 찍어둔 사진을 선택하여 활용할 수도 있고 바로 카메라 기능을 이용해서 직접 사진을 찍어서 사용할 수도 있다. 아래의 왼쪽 그림은 기존에 찍어둔 화일을 선택하는 모드를 보여주며, 오른쪽 그림은 직접 사진을 찍기위한 카메라 모드를 보여준다. 이런한 기능이 HTML Media Capture을 이용해서 웹 애플리케이션에서 가능해지는 것이다.



    또한 Contacts API의 경우도 HTML5의 <input>이나 <device>과 어떤 형태로 조화롭게 활용할 수 있을지에 대해 고민하고 있다. 현재까지는 HTML5에 새롭게 추가된 <device> 보다는 <input>을 활용하는 것이 안정적이라는 의견이 많은 사황이다. 그리고 앞으로 센서, 메시징, 갤러리 등 다양한 디바이스의 자원들을 마크업으로도 연동하여 웹 애플리케이션으로 표현할 수 있을 것으로 예상된다.


    Device API 관련 W3C WG의 역할 분담
    사실 W3C에서 API에 대한 표준은 주로 Web Applications WG에서 개발하는 것으로 되어 있었으나 개발해야할 스펙이 많아 디바이스의 자원을 접근하는 API 개발은 DAP WG을 새롭게 만들어 진행하게 되었다. 그러나 Device API와 관련된 표준들도 여러 상황에 따라서 다른 WG에서 개발하기로 하거나 기존의 기술에 의해서 표준 개발의 필요성이 없어진 표준이 있다. 이러한 내용을 아래와 같이 정리할 수 있다.
    Web Applications WG로 이관: 화일 쓰기(File Writing)와 화일시스템 (Filesystems) 표준 개발
    Geolocation WGOrientation / Acceleration 표준 개발
    Web Notification Working Group: Notification 표준 개발
    Application configuration 표준: localStorage와 Widget interface APIs로 대체


    앞으로의 전망
    앞으로는 HTML Media Capture 표준을 이용해서 웹 애플리케이션에서 음성인식 기능, 카메라 애플리케이션 구현이 가능할 것으로 생각되며, 향후 더 다양한 Device API 들이 제공되면 앞으로 정말 Native 애플리케이션과 같은 애플리케이션 개발이 가능할 것으로 기대한다. 이러한 의미에서 웹 플랫폼은 멀티플랫폼/멀티디바이스를 지원하는 가장 경쟁력있는 플랫폼으로 진화하고 있는 것이다.

     

    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요

    1. 김영보 2010/07/21 20:41  댓글주소  수정/삭제  댓글쓰기

      매우 값진 글입니다. 감사합니다.
      - 화일 쓰기(File Writing)와 화일시스템 (Filesystems) 표준 개발은 언제쯤 Last Call을 예상하세요?

      - 앞으로 정말 Native 애플리케이션과 같은 애플리케이션 개발이 가능할 것으로 기대한다에서--->
      여기서 Native는 모바일 업체에서 제공하는 Native인가요?
      그럼 자바스크립트로 악세스가 가능하게 되나요?

      혹시 데이터베이스 통합/형태에 대해서 거론 된 것이 있습니까?
      파이어폭스 4.0에 indexed database가 탑재되는 것으로 알고 있습니다만,
      하나로 통일되는 방향으로 설정이 되었나요? 아니면 다른 방안이 있나요?

      단어 하나 하나의 의미를 되새긴 뒤 질문 좀 하겠습니다^-^

    2. 이원석 (wslee@etri.re.kr) 2010/07/22 01:04  댓글주소  수정/삭제  댓글쓰기

      안녕하세요. 김영보 선생님^^

      - 화일 쓰기(File Writing)와 화일시스템 (Filesystems) 표준 개발은 언제쯤 Last Call을 예상하세요?
      답변) 아시겠지만 예측하기가 좀 어려운데... 개인적인 생각으로는 보안과 Privacy에 대한 이슈가 있어서 시간이 좀 걸릴 것 같습니다.

      - 앞으로 정말 Native 애플리케이션과 같은 애플리케이션 개발이 가능할 것으로 기대한다에서--->
      여기서 Native는 모바일 업체에서 제공하는 Native인가요?
      그럼 자바스크립트로 악세스가 가능하게 되나요?
      답변) 예.

      - 혹시 데이터베이스 통합/형태에 대해서 거론 된 것이 있습니까?
      답변) 사실 Indexed database는 Web Applications WG에서 개발하고 있는 표준이기 때문에 구체적인 내용에 대해서는 논의가 없었습니다. 그러나 HTML WG Activity Lead인 Mike로부터 들은 바로는 Web SQL Database에 대한 표준 개발은 다시 없을 것 같고 대신에 Indexed database를 표준으로 만들어 사용할 예정이라고 합니다^^

      좋은 질문 감사합니다~ ;)

    3. 김영보 2010/07/22 03:54  댓글주소  수정/삭제  댓글쓰기

      와~ 감사합니다.
      방향 설정에 잣대가 되었습니다.
      화일 쓰기를 기다리고 있습니다만, 준비만 해야 할 것 같습니다.^-^
      Native에 접근할 수 있다는 것은 자바스크립트로 모든 디바이스를 제어하게 된다는 의미가 아닌가요...
      그럼, Native도 일정 부분 표준화가 되겠네요...
      결국 indexed database로 가게 되네요...
      하기야 자바스크립트 개발자에게 SQL을 요구한다는 것은 또 하나의 부담이 될 것 같습니다.

      문장 하나 하나 되새겨 본 뒤에 조금 더 질문 드리겠습니다.
      감사합니다. 다음에 지하철 미팅해요. 메모해 두었다가 하나씩 물어 보게요^-^

    4. 강태욱 2010/07/22 08:54  댓글주소  수정/삭제  댓글쓰기

      따끈한 소식 감사합니다~(--)(__)

    5. Wise 2010/07/22 10:20  댓글주소  수정/삭제  댓글쓰기

      항상 따끈따끈한 소식 감사합니다~ ^^

    6. 민원기 2010/07/30 11:24  댓글주소  수정/삭제  댓글쓰기

      좋은 정보 감사합니다. 자주 놀려 오겠습니다.

    7. 김대원 2010/09/21 05:50  댓글주소  수정/삭제  댓글쓰기

      현재 WD상태의 W3C Device API에 대한 구현물들이 있나요?
      알려주시면 고맙겠습니다. 브라우져 벤더들이 내부적으로 구현하고 있다는 소문 정도만 들었고 구체적인것은 없네요.
      참고로 Ubivelox에서 만든 구현물이 12월 경에 국내 이통사를 통해서 출시 될 예정입니다.
      구현된 것중에 12월경에 비교적 안정된 spec만을 open 하겠지만요..

    8. 2010/09/21 05:51  댓글주소  수정/삭제  댓글쓰기

      비밀댓글입니다


    오늘 구글코리아를 방문하여 HTML5에 대한 Tech Talk을 했는데 정말 생각보다 많은 엔지니어 분들이 참석해 주셔서 좋은 대화의 시간을 갖았다. 그리고 성함은 모르지만 구글 본사 마운틴뷰에 계신 분도 비디오 컨퍼런스로 연결하여 참석해 주셔서 감사했다. 또한 이번에 다시한번 구글의 자유로운 분위기와 그러한 자유로운 분위기 속에서의 책임감을 바탕으로 운영되는 조직문화에 다시금 놀랬다.

    구글 Tech Talk을 유튜브에서 보신분들은 아시겠지만 항상 발표하기 전에 구글 종이가방에 선물을 넣어 발표자에게 전달한다. 항상 뭐가 들어있을지 개인적으로도 궁금했는데 오늘은 직접 받아서 확인을 했다.



    가방안에는 큰 박스와 빨간색 구글 티셔츠가 있었다. 박스 안의 내용물은 비밀로 하고 싶다. 너무 좋은 선물이 있었기 때문. 그냥 사진만 올려본다.



    그리고 오늘 발표한 "The current status of HTML5 technology and standard"에 대한 발표자료는 아래와 같다.



    많은 분들이 이 발표자료를 트위팅해 주셔서 Hot on Twitter에 올라갔다. HTML5에 관심이 있으신 분들에게 조금이나마 도움이 되었으면 좋겠다. 아래 이미지는 Hot on Twitter 페이지의 인증 삿.



    마지막으로 오늘 부족한 강연을 열심히 들어주시고 좋은 질문을 해주신 모든 구글러 여러분께 감사드린다.

    발표자료(PDF 버전) 다운로드




    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요

    1. 이해민 2010/07/09 01:03  댓글주소  수정/삭제  댓글쓰기

      원석씨, 오랜만에 얼굴 뵈어서 반가왔습니다.

      멀리까지 오셔서 좋은 발표 해주셔서 감사합니다.

      담엔 숙대에서 한 번 더...후다닥 =3=3=3

      • 이원석 (wslee@etri.re.kr) 2010/07/09 01:17  댓글주소  수정/삭제

        해민씨, 저도 정말 재미있는 시간이었습니다. 세계 최고의 엔지니어들과 함께할 수 있는 기회를 주셔서 감사합니다~ ;) 숙대는 박교수님께서 초청해 주시면 당근 가야죠~ ㅋㅋㅋ 여대^^;

    2. leezche 2010/07/09 10:07  댓글주소  수정/삭제  댓글쓰기

      저는 엔지니어는 아니고 디자이너인데 그럼에도 불구하고 정말 많은 도움이 된것 같습니다. 시간이 너무 짧아 아쉬웠습니다. 감사드립니다.

    3. 서동일 2010/07/09 10:29  댓글주소  수정/삭제  댓글쓰기

      HTML5를 이해하는데에 정말 많은 도움이 될 것 같습니다. 유익한 tech talk, 발표자료 너무 감사드립니다.

    4. ninacry 2010/07/12 10:21  댓글주소  수정/삭제  댓글쓰기

      안녕하세용^^ 김*현 과장님 소개로 예전에 세미나 들었던 사람입니다.
      여전히 열정적으로 활동하고 계시군요~ 그때도 감사드렸고 오늘도 자료 너무 감사하게 받아갑니다..^^
      저 구글 상자 안이 궁금하군요...ㅋ 좋은하루 되세요 ^^

    5. 머털도사 2010/07/16 11:01  댓글주소  수정/삭제  댓글쓰기

      좋은 자료 감사합니다. 이원석님
      퍼 갑니다.

    W3C에서 개발되고 있는 HTML5 표준은 기존 표준들과는 다르게 상당히 많은 스펙들로 구성되어 있다. 이러한 면은 HTML5를 배우는 많은 이들에게 HTML5 표준을 어디까지로 봐야할 까하는 의구심을 들게한다. 또한 많은 이들이 현재 W3C에서 표준화가 진행되고 있는 상황에 대해서도 궁금할 것이다. 이와 관련해서 지난 3월에 W3C에서 HTML WG 의장 중 한명인 마이크로소프트의 폴 코튼(Paul Cotton)과 인터뷰한 내용 [1] 과 W3C AC(Advisory Committee) 미팅에 보고된 내용 [2]이 있어 소개한다.


    폴 코튼이 생각하는 HTML5 표준의 범위

    폴 코튼은 HTML5라는 용어가 상당히 느슨한 의미로 사용이 되고 있다고 생각한다. 폴 코튼이 생각하는 HTML5 표준의 범주는 HTML WG에서 개발되고 표준, Web Applications WG에서 개발하고 있는 API 표준, Device APIs and Policy WG에서 개발하는 표준 그리고 마지막으로 우리가 자바스크립트로 알고 있는 ECMAScript-262에 대한 표준도 포함한다.

    일반적으로 Device APIs and Policy WG에서 개발되고있는 Device API 표준은 웹 애플리케이션의 디바이스의 자원들 (GPS, 센서, 주소록, 일정, 카메라 제어, 배터리 정보, 갤러리, 파일 시스템 등)을 접근 가능하게 하는 API 표준이다. , 이런 API를 이용하면 디바이스의 카메라 기능을 이용해서 사진과 동영상도 촬영하는 기능을 웹 애플리케이션으로 구현할수 있다. 지금까지 디바이스 API HTML5 표준으로 포함시켜 논의되지는 않았다. 하지만 이 또한 HTML5의 핵심적인 API 표준이다. 또한 지속적으로 HTML5에 대한 표준은 추가적으로 제안되어 개발될 것으로 예상된다.


    HTML WG 표준개발 현황

    폴 코튼은 HTML WG에서 개발 중인 HTML5 스펙들 현황에 대해서는 HTML WG에서 개발중인 HTML5 스펙들이 W3C 초안 Last Call 단계 (초안에 대한 최종 검토 단계를 의미함)에 가기 위해서는 초안과 관련된 대한 알려진 모든 코멘트와 이슈들을 해결해야 하는 것이 필요하며 지금까지 이러한 작업을 지속적으로 진행하고 있는 중이라고 한다. 즉, WG 내부 또는 외부에서 지속적으로 표준 초안에 대한 이슈들이 제기가 될 것이고, 이러한 이슈들을 계속해서 해결하는 작업이 진행을 진행한다. 이러한 일련의 작업을 통해 초안의 문제가 모두 해결되면 Last Call 단계에 진입하는 것이다.

    참고로 2009 1월에서 2010 2월까지 새롭게 발생한 이슈 비율과 해결된 이슈 비율을수자로 정리하면 아래와 같다. 지속적으로 새로운 이슈들이 발생하고 해결되고 있는 것이다.


    HTML WG에서 현재 개발중인 문서는 아래와 같이 6개가 있으며, 지난 3월 4일에 공식적으로 Publication된 문서이다.


    HTML5 표준의 최종승인에 대한 전망

    HTML5 언제 표준화가 마무리됩니까? 가장 자주 듣는 질문이다. 그러나 HTML5 표준 개발이 언제 마무리될지 예측하는 것은 상당히 어려운 상황이다. 하지만 폴 코튼이 이야기한 내용들을 보면 지속적으로 HTML WG의 스펙들에 대한 이슈를 해결해 나가고 있는 상황이기 때문에 어느 정도 시간이 지나면 문제들은 정리가 될 것으로 조심스럽게 예측해 본다. 또한 W3C 표준 개발 절차상 초안 Last Call 단계에 진입하고 이 단계가 잘 정리 되면, HTML5 표준의 마무리에 대한 예측이 가능할 것으로 예상한다. 따라서, Last Call 단계를 언제 진입하는 지가 상당히 중요하며, 그 이후에는 HTML5에 대한 보다 긍정적인 기대의 글들이 만발하지 않을까 기대해 본다.


    (참고자료)

    [1] Interview: Paul Cotton on Microsoft Participation in the W3C HTML Working Group

    [2] W3C HTML Working Group Status Report(November, 2009 - March, 2010)

    저작자 표시 비영리 변경 금지
    Posted by 이원석(wonsuk73@gmail.com)

    댓글을 달아 주세요