Featured Posts

JavaScript 경진대회 10k apart 와 JS 1k JavaScript 의 고수라고 생각하십니까?? JavaScript 와 웹표준.. 거기다 디자인 센스까지 갖추고 계시다면 10K Apart 에 도전해보세요~~   단...

Readmore

Web App 테스트 자동화 툴 “FuncUnit” 웹은 갈수록 Rich 해져가고 있습니다. Rich Internet Application (RIA) 는 개발하기도 까다로울 뿐더러 제대로 테스트 하기란 정말 끔찍하죠. Jupiter...

Readmore

DOM nodeType 과 Node.nodeType 객체상수 DOM Level 2 에서는 특정 node에 node.nodeType 속성이 명세되어 있습니다. 해당 node를 가져 왔을때 실제 그 node의 종류가 무엇인지 판단하기...

Readmore

Google의 JavaScript 코딩스타일 가이드 구글이 자사의 자바스크립트 코딩가이드를 선보였네요.. 정확한 릴리즈 날짜는 모르겠습니다만.. 아마도 오래전부터 내부적으로...

Readmore

Strobe – Digital Publishing by SproutCore Charles Jolley 씨가 Apple을 떠난다고 하는군요. 그는 Mobile Me를 비롯한 수많은 Apple의 프로젝트에서 사용된 오픈소스인 SproutCore 프레임워크...

Readmore

[BOOK] HTML5 & CSS3 – “오늘 구현하는 내일의 웹 표준”

Posted on : 2011-06-13 | By : Kyoungtaek Koo | In : FT Development, HTML/CSS, LifeLog, 잡담 / 뻘짓~

Tags: , , , , , ,

1

HTML5 가 웹업계의 핫 키워드로 부상한지 약 2년여만에.. 정말 괜찮은 책을 발견했다.

2008년 1월 w3c 에서 HTML5 초안을 발표하더니 그해 가을쯤이던가.. 국내에서도 HTML5 에 대한 이야기가 슬금 슬금 수면위로 떠오르기 시작했다.

이윽고 국내에  iPhone 이 보급되기 시작하며 불어닥친 스마트폰 바람에 힘입어 2009년 말을 기점으로 정말 크게 빵!! 터졌다.

그렇게 HTML5 는 리치웹 환경의 차세대 히어로이자 멀티 플랫폼 시대 웹의 구세주로써 급 부상했다.HTML5 가 뭐길래.. 그렇게 좋을까?일단 HTML5 는 지금 보편화되어 있는 HTML4 의 다음 버전으로써 Web2.0 페러다임을 거치며 얻어온 교훈을 대거 반영한 모습이다.

 

현재의 웹폼으로는 부족하다.

기존의 input 요소는 웹을 RIA 로써 표현하기에는 턱없이 부족한 기능을 가지고 있다. 이에 input 요소에 range, color. datetime, number 타입등을 가지게 되었다. Javascript 를 사용해서 추가적인 작업을 해주어야 했던 부분을 브라우저가 자체적으로 담당할 수 있게 되었다.

 

멀티미디어

Flash 가 웹의 비디오 및 오디오 요소를 재생하기 위한 대안으로 사용되고 있지만, HTML5 에서는 필요없어졌다. Flash 와 같은 추가적인 플러그인이 필요 없도록 HTML5 에서는 <video>, <audio> 와 같은 멀티미디어 전용 테그 및 API 를 지원한다.

 

다양한 그래픽 지원

기존의 HTML 로는 기본적으로 Box 모델 및 inline 테그들의 CSS 만을 사용하여 화면을 구성하고, 그림이나 그라디언트 컬러, 그림자 등을 표현하기 위해서는 주로 이미지를 사용하였다. 그러나 HTML5 에서는 Canvas 와 해당 API 를 지원하여 2D 그래픽을 직접 그릴수 있고 CSS3 의 지원으로 그라디언트, 그림자, 둥근 모서리 등을 표현할 수 있다.  또한, WebGL(Canvas 3D) 를 사용하여 멋진 3D 효과 또한 추가할 수 있다.

 

웹 스토리지, 웹 데이터베이스

브라우저상의 애플리케이션 데이터를 저장할 수 있도록, 웹 스토리지 및 웹 데이터베이스를 지원한다.그 밖에 Application Cache 등을 사용하면 오프라인 애플리케이션도 구현할 수 있다.

 

웹 워커

기본적으로 Javascript 는 싱글 스레드 언어이기 때문에 동시에 여러가지 작업을 수행하기 어렵다. 이에 대한 대안으로 웹 워커를 사용하면 비동기 백그라운드 연산이 가능하기 때문에 멀티 스레드 프로그래밍이 가능하며 복잡한 연산을 빠르게 수행할 수 있다.

 

웹 소켓

웹 개발자들이 가장 기다려 왔던 기능이다. 네트워크 이용이 가능한 애플리케이션에서는 서버와 클라이언트간의 양방향 통신을 하기 위한 방법이 필요하다. 그동안의 웹에서는 클라이언트의 요청에 의해서만 서버로부터 데이터를 전송받을 수 있었지만, 웹 소켓의 등장으로 드디어 웹에서도 양방향 통신이 가능하게 됐다.

 

그 밖의 놀라운 기능

모바일 시대에 맞게 현재 단말기의 위치를 이용할 수 있는 Geolocation API 를 지원한다. 웹페이지 내/외부의 개체를 웹 애플리케이션으로 자유롭게 드래그, 드랍 또한 가능하며, 특정기능에 대한 Desktop Notification 기능을 제공할 수 있다. 그 밖에도 File API, 서버 푸시등 애플리케이션으로의 웹을 지향하는 다양한 기능들이 HTML5 에 대거 추가되었다.

 

그렇다면, HTML5 에 주로 추가된 기능은 “웹 애플리케이션” 을 위한것 이라고 해도 과언이 아닌것 같다.그러나, <section>, <article> 과 같은 페이지로써의 웹을 위한 시멘틱 HTML 요소도 대거 추가 되었다.

개인적으로 Front-End 개발자로써 “보편적 접근성을 보장하는 웹” 을 위한 웹접근성에 상당한 관심이 있는데, 이 책이야 말로 HTML5 와 웹접근성의 두마리토끼를 한꺼번에 잡을 수 있는 최적의 입문서이다.

이 책을 읽다 보면 항상 접할 수 있는 단어중 하나가 바로 “폴백”(fall back) 이다. HTML5 의 웹 애플리케이션을 위한 새로운 기능이 멋지긴 하지만, 현재 Internet Explorer 8 이하의 버전에서는 제대로 활용할 수 없다.

 

 

아직도 IE 의 전세계 점유율은 41% 나 된다.

 

그러나, 저자의 내공이 녹아있는 각종 폴백 들을 적용하면 지금 당장이라도 HTML5 의 대부분의 기능을 사용할 수 있다. 미래의 변화에 현명하게 대처하며 현재를 개발하기 위한 가장 좋은 방법들을 많이 소개하고 있다.

 

또한 저자의 “보편적 접근성” 에 대한 지향점은 정말 본받을 만 하다. 스스로 모든 사용자들이 컨텐츠를 소비할 수 있도록, 최대한의 접근성을 제공하고도 Canvas 를 활용한 그래프 요소등을 사용하는 방법을 알려준다. 현대의 스크린리더기가 어떻게 동작하는지를 소개하고 HTML5 에서 지원하는 ARIA 요소등을 제대로 활용하는 방법을 접했을땐 정말 보석을 발견한 기분이었다.

 

이 책은 기본적으로 HTML4 에 대한 이해가 있는 독자들을 대상으로 했으며, Javascript 활용부분은 jQuery 를 사용하고 있다. jQuery 에 익숙하지 않다고 해서 걱정하지 말자. 저자는 친절하게도 부록으로 jQuery 기초에 대해서도 다루고 있으니 말이다.

 

여러분의 사이트에 HTML5 기술을 적용할지 말지 더이상 고민하지 말자. 이 책을 쥐는 순간 일말의 두려움 없이 HTML5 로 수백걸음 쯤은 뻗어 나갈수 있을테니까 말이다.

 

HTML5 를 지금 당장 접근할 수 있도록, 본인의 많은 노하우를 직접 책으로 기술해준 저자 “브라이언 호건” 과 국내 독자들이 어렵지 않게 내용을 접할 수 있도록 좋은 내용으로 옮겨준 Clearboth 의 “한선용” 님께 깊은 감사의 말씀을 드리고 싶다.

 

 

 

 

Post to Twitter

WP SlimStat