포토/동영상 (1)
|
유레카!!
이 책을 보고 나서 외친 말이다. 기술 서적을 보고 나서 느끼는 느낌은, 각자의 개발 경력과 가지고 있는 지식의 양에 따라 천차만별로 달라질 수 있겠지만, 웹 개발에 경험이 없는 내가 보았을 때 이런 감동을 준다는 것은, 대 부분의 개발자들에게 어떤 영감을 던져 줄 수 있는 좋은 책이라고 말할 수 있을 것 같다.
아직 표준도 확정되지 않은 HTML5. 그럼에도 불구하고 차세대 웹 개발의 핵심 기술로 논의되고 있는 기술. 자기들 만의 독자적인 표준을 유지하며 브라우저 시장의 독점을 지키고자 했던 Microsoft까지, 결국 지원할 수 밖에 없었던 기술. 크로스 브라우징 때문에 골 머리를 썩혔던 웹 개발자들의 탈출구가 될 수 있는 기술. 애플의 스티브 잡스가 과감하게 Flash를 배제해 버릴 수 있던 근원이 되지 않았을까 하는 기술.
이 책은 그런 HTML5에 대해서 매우 쉽고도 상세하게, 또 친절하게 기술하고 있다.
과거 HTML을 처음 접했을 때가 생각난다. 아무 것도 모를 당시에, 단순하게 화면에 표시하는 부분이 전부인 HTML을 웹 상에 뿌려보기 위해. 나모웹 에디터로 만들어 보고, 에디터의 한계점이 있어서 코드를 수정해서 지금 보면 정말 형편없는 개인 홈페이지를 만들었었다. 그것을 보고 행복해 했던 기억이 난다.
조금 더 지식이 생긴 이후에는, 정적인 페이지의 한계를 느끼고, 자바스크립트라는 것을 이용해서 동적인 페이지를 만들곤 했었는데, 사실 만든다기 보다는 만들어진 소스를 찾아서 붙여넣는 수준에 불과했다. 당시에는 그것으로 충분했었다.
HTML은 단순한 화면 표시를 위한 언어, 자바스크립트는 동적인 페이지 구현을 위한 언어로써...
개발의 패러다임이 수 차례 바뀌고, 개발의 중심 영역이 서버 사이드로 갔다가 다시 클라이언트 사이드로 돌아온 이 시기에, 다수의 브라우저에서 비표준화된 각각의 기술을 제공하는 문제로 인해, 웹 개발자들이 겪는 고통은 이루 말할 수 없다. (물론 IE의 점유율이 가장 높긴 하지만, 최근은 파이어폭스나 크롬 등이 맹 추격하고 있다.)
이에, 웹 개발에 대한 표준이 정립되고 있다는 점은 정말로 쌍수를 들고 환영할 만한 일이다. 게다가 그 간에 각 벤더들이 독자적으로 제공했던 유용했던 기능들까지 포함하여 표준화를 한다니, 가히 혁신적인 변화가 오고 있다고 생각이 된다. 가장 의미 있는 변화는, 기존에 동적인 화면이나, 멅티미디어를 표현하기 위한 화면 등을 위해 필요했던, Flash나 미디어 플레이어와 같은 플러그인 없이도, 언어 자체에서 제공하는 API만으로도 해당 기능들이 구현 가능하게 되었다는 점이다. 사용자는 단순히 브라우저만 있으면, 추가적인 프로그램의 설치 없이도, 다양하고 화려한 기능들을 만끽할 수 있다.  ＜HTML5로 만들어진 앵그리버드 PC버전＞
책의 구성은 각 단원 별로 주제에 맞는 개념 설명, API 및 이벤트 등에 대해 설명하고, 그에 맞는 적절한 예제를 삽입하였다. 굉장히 마음에 드는 것은 소스를 한 줄 한 줄 자세히 설명하여 이해를 도운다는 점이다. 이 소스 정도가 직관적으로 이해가 되지 않는 개발자들은, 자바스크립트의 기본적인 문법을 먼저 익히기를 권장한다.
각 챕터들에는 브라우저 별 실행 가능 여부와 현재까지 HTML5를 구현한 브라우저 마다의 동작 방식의 차이점에 대해서도 기술하고 있다.
이 책의 내용을 구체적으로 살펴 보면, DOM 스크립팅의 기초부터 차근차근히 설명한다. 나 처럼 웹 개발 경험이 많지 않은 사람들에게, 또 초급 개발자들에게 너무나도 좋은 챕터이다. 이 부분을 잘 살펴보면, 세부적인 것은 몰라도, 직관적으로 어떠한 형태로 요소들을 구분하고, 그 요소들을 참조해서 개발에 이용할 수 있는지 쉽게 알 수 있다.
또한, 아무 생각없이 자주 관습적으로 사용되었던 자바스크립트의 객체들의 표준화에 대한 얘기와 유용한 API들에 대한 설명도 해주고 있다.
다음으로는 HTML5에서 표준화의 항목으로 논의되고 있는 태그들에 대한 설명이 이루어진다. 기존의 태그들에 대해서는 별반 기대를 안했는데, 정말 놀라울 정도로 많은 변화가 이루어지고 있다는 것을 알 수 있었다.
예컨대, 2장의 폼과 관련된 태그의 내용에서, Calendar라든지, 유효성 검사 태그, 텍스트 편집 관련 태그, 프로그레스바 관련 태그 등을 보면, 기존에 자바스크립트를 이용해서 개발자가 일일히 구현해주어야 했던 부분들이 전부 쉽게 사용할 수 있는 태그로 만들어졌다는 것을 알 수 있다.
3장 캔버스. 어플리케이션 개발자로써 가장 관심이 있던 부분이 화면의 자유로운 그래픽 표현이었는데, Canvas 태그가 추가되어, 이런 요구사항을 충분히 만족시킬 수 있었다. 사실 Canvas의 경우, 단순히 HTML5에만 추가된 것이 아니라, 윈도우 API에서부터 제공을 하고, 이를 구현한 개발 툴에서는 전부 제공하는 컴포넌트인데, 이 기능들이 웹에서도 그냥 이용할 수 있도록 충실히 구현되었다니 흥분 그 자체다.
 ＜ HTML5의 Canvas를 이용하여 포토샵 처럼 편집기를 구현 ＞
4장 비디오와 오디오.. 이 단락을 보고 나서는 정말 등에 소름이 쫙 끼쳤다. 과거에 동영상 플레이어, MP3 플레이어를 개발해 본 경험이 있는 나로써는, 미디어 플레이어를 개발한 다는 것이, 특히나 동영상 플레이어를 개발한다는 것은 정말 어려운 일이라는 것을 뼈저리게 느껴서 알고 있다. 사실 개발은 했지만, 아직도 근본적인 개념을 확실히 이해 못하고 있으며, 컴포넌트나 라이브러리가 없었다면 구현하기 어려웠으리라 생각이 된다.
그런데, 이게 뭔가... 추가된 Video, Audio 태그만으로도 미디어 플레이어를 만들 수 있다. 그것도, 코덱 문제까지도 해결을 해주고, 자막까지 쉽게 표현할 수 있으며, 기본적인 기능은 전부 제공을 한다. 웹과 어플리케이션의 경계가 허물어짐을 보여주는 대표적인 단락이다.
 ＜ 비디오 플레이어의 구현 ＞
5장 텍스트 편집 기능 아예 위지윅에디터를 그냥 제공함을 보여준다. 이게 무언가 하면, 지금 이 리뷰를 위해 타이핑을 하고 있는 이 영역... 굵게, 이탤릭, 밑줄, 색상 변경 등의 기능을 가진 이 영역을 그냥 간단히 사용할 수 있게 제공해 준다는 것이다. 실력 좋은 개발자들이 자바스크립트로 만들어 놓은 것을 가져다가 적절히 고쳐서 쓰던 시절을 생각해 보니, 감탄만 나온다.
6장 드래그 앤 드롭 일반 어플리케이션에서도 드래그 앤 드롭을 구현하기란 그리 간단한 문제가 아니다. 사용자 입장에서야 당연하다고 느끼고, 별 거 아니라는 생각을 할 수 있지만, 개발자 입장에서는 꽤 많은 사항을 고려해야 되기 때문에, 쉽지가 않다. 특히나, 웹에서는 더더욱 어렵다고 할 수 있다. 이제 그 문제도 해결되었다. 놀라움의 연속이다.
그 외에도, 파일을 직접 핸들링 할 수 있는 File API, 멀티스레드와 비슷한 개념으로 돌아가는 웹 워커, GPS의 정보를 이용할 수 있는 Geolocation API 등이 자세하게 설명되어 있다.
왜 이렇게 굳이 한 단원 별로 느낀 바를 썼을까..? 정말 보고 얻을 것이 많다고 느꼈기 때문이다. 특히나 각 챕터 별로 제공되는 간략한 예제들 보고 있자면, 웹 개발자가 아님에도 불구하고, 열정이 샘솟는다. 각 챕터는 생각보다 두꺼운 분량을 할당하였는데, 충실한 예제와 자세한 설명들이 일품이다.
단지, 이유를 알 수 없고 아쉬운 것은 "웹 데이터베이스" 관련 챕터가 빠져 있다는 것이다. 하지만, 이 책의 나머지 부분을 통해, HTML5이 어떤 것이라는 것에 대해 충분히 전달이 되며, 개발에 필요한 것들은, 추가로 검색, 발췌하여 적용할 수 있을만한 실력을 가질 수 있으리라 믿는다.
기술 서적은 모름지기, 기본 개념부터 잘 설명이 되어 있어야 하고, 이해가 쉬워야 하며, 읽고 난 뒤 손이 근질근질거리게 만들어 주어야 한다고 생각하는데, 이 책이 나를 그렇게 만들고 있다.
너무 극찬하는 것 같다고? 한번 직접 보시라.. 이 책이 주는 가치를 깨달을 수 있으리라... P.S : 애플의 ShowCase와 http://comblog.wo.tc/399 주소에 가보면 멋진 샘플들을 볼 수 있다. |
|
사전처럼 바로 찾아 쓰는 HTML5 핵심 API
개발자, 디자이너 물론 기획자 역시 HTML5를 이제 접하지 않는다면 도태되고 말 것이다.
HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 ‘HTML(Hyper Text Markup Language)’의 최신규격이다.
HTML5는 엑티브X(Active X)를 설치하지 않아도 동일한 기능을 구현할 수 있고,
특히 플래시(flash)나 실버라이트(Silverlight), 자바FX(JAVA FX) 없이도
웹 브라우저(web browser)에서 화려한 그래픽 효과를 낼 수 있다.
그 중에서도 이 책은 HTML5 API의 핵심만 모아놨다.
HTML5부터는 프로그램적 요소가 증가해서 그간 명세에 정의되지 않았던
각종 API와 동적이고 편리한 웹 프로그래밍을 도와줄 새 API를 다루고 있다.
폼, 비디오와 오디오, Canvas, Text Selection APi, Editing API, 드래그 앤 드롭 웹 워커,
File API, Geolocation API 등 비주얼과 사용자 인터페이스에 관련된
새로운 API의 사양과 사용법을 상세하게 해설한다.
HTML5에서 웹 폼의 기능이 대폭 향상되었다.
Input 요소에 여러 타입이 추가되어 스크립트 없이 다양한 UI를 구현할 수 있다.
UI뿐만 아니라 사용자의 입력을 검사하는데 필요한 수많은 API가 포함되어 있다.
HTML5에서 가장 주목도가 높은 Canvas는 자바스크립트로 그림을 그리는 기술이다.
HTML5에서는 비디오나 오디오를 웹에서 표현할 수 있게 되었다.
마크업만으로도 비디오나 오디오 재생이 가능하지만, 자바스크립트를 사용하여
다양한 멀티미디어 표현이 가능해진 점은 매력적이다.
웹 페이지 상에 표시되는 텍스트를 선택했을 때 이를 처리하는 Text Selection API, 그리고
WISYWIG 편집기를 위해 고안된 Editing API가 HTML5에서 표준화가 되었다.
요즘은 당연한 UI로 사용하지만, HTML5가 등장하기 전까지는 드래그 앤 드롭 API는 웹 표준이 아니었다.
지금까지 웹과 데스크탑은 완전히 다른 세계였다.
하지만 File API를 사용하면 웹 애플리케이션으로 PC의 파일을 다룰 수 있다.
이에 File API는 차세대 웹 애플리케이션의 나아갈 방향을 알려주는 중요한 API이다.
자바스크립트로 무거운 처리를 실행하면 브라우저의 UI 블로킹이 발생한다.
이것을 피하기 위해서 자바스크립트의 처리를 백그라운드에서 실행하는 웹 워커가 있다.
최근 스마트폰에서는 GPS가 탑재되어 위치 정보를 정확하게 파악할 수 있다.
Geolocation API를 사용하여 자바스크립트로 위치 정보를 얻을 수 있다.
이 책은 어느 정도 자바스크립트를 사용한 경험이 있는 독자를 대상으로 하고 있다.
그러나 고급 기술이 아닌 초보자도 이해하기 쉬운 코드로 예제를 구성하고 있어,
쉽게 이해할 수 있다.
|
|
글 쓰는 재주가 없다보니 좀 이상(?)합니다. 웹개발의 표준 HTML5.... 어도비, MS, 애플 등 IT관련일을 하는 사람들이라면 누구나아는 큰 공룡들이 HTML5를 지원하겠다고 나서고 있다. 또한 웹 개발 뿐만 아니라 휴대폰 어플을 만들때도 사용을 한다고 하니 예전에 천대받던(?) HTML이 아닌가 보다. (개인적으로 HTML과 자바스크립트가 제일 어렵다....ㅜㅜ) 이 책은 제목 그대로 HTML5의 핵심(??) API에 대해서 설명을 하고 있습니다. 캔퍼스, 드래그앤드랍, 파일 읽기 그리고 비디오 등 HTML기능 들에 대한 전체 설명이 아닌 HTML5에 대해서 크게 부각(?)되는 기능에 대한 설명을 담고 있습니다. 각 핵심API에 대한 설명을 100페이지 이상의 분량으로 구분하여 자세하게 설명을 하고 있으며 또한 단순히 API 설명에만 그치지 않고 실제 개발을 하면서 조심해야 할 부분이나 서로 다른 브라우저등에서의 실행시 차이점 등 저자의 실제 경험등이 함께 쓰인듯한 인상을 주어서 개발하는데 많은 도움을 줄 듯 싶습니다. 추천: 웹 프로그래머 또는 휴대폰 어플 개발자분들 이유 :HTML의 전체적인 기능에 대한 설명이 아닌 HTML5에서 크게 부각되는 기능에 대해서 100페이지 이상의 분량을 할당해서 자세하게 그리고 저자의 경험(?)등을 포함해서 설명하고 있음 비추천 : HTML과 자바스크립트를 처음 접하는 분들 또는 디자이너분들 이유 : HTML의 기본에 대해서 약간 설명을 하고 있지만 책의 많은 부분은 HTML코드와 자바스크립트등의 코드가 포함되어있습니다. 그렇기 때문에 어느정도 기초가 있으셔야만 이해하기 쉬울들 싶습니다. 아쉬운점 : 책에서 설명하는 모든 API들에 대해서 어느 브라우저가 지원을 하는지 아이콘 모양으로 표시를 해주는것이 아니라 어떤 부분은 그냥 텍스트로 API 지원여부를 알려주거나 표시를 안해주는 부분이 있음. 일관성있게 각 API를 설명할때 눈에 띄기 쉽게 아이콘 모양으로 표시해줬으면 하는 아쉬움이 있음 |
|
HTML5 핵심 API 먼저 책은 HTML5 소스와 설명으로 가득 차 있다. 안드로이드 공부 할까 HTML5할까 고민 하다가 요책으로 HTML5공부 |
|
이 책은 꽤나 안정적이다. 책 타이틀에서 말하고 있듯 마치 '사전'을 보는 듯한 느낌이 드는데 그렇다고 지루한 느낌은 전혀 들지 않는다.
아마 이 책을 좋아하는 사람은, 시중에 나와있는 아주 많고 많은 html5 관련 서적들에 질릴대로 질린 사람들 일 것이다. 보통 다른 책들은 기본적인 설명부터 시작해서 canvas 나 css에서 설명하는 게 끝이기 때문이다.
자신의 기본 실력에서 한단계 더 올라가고자 하는 사람들에게 적합하며, 이 책은 그런 상황을 고려한듯 아주 친절하고 읽기 편하게 안내를 잘 해주고 있다고 볼 수 있다.
한가지 더 중요한건 웹에서조차 찾기 힘든 TIP 들을 발견할 수 있다는 것인데 개인적으로는 이걸 표시해놓고 나중에 좋은 곳에 써먹을 예정이다.
이 책이 너덜너덜해질 때 즘이면 html5의 핵심 API 들은 꿰고 있다고 자신있게 말할 수 있을듯. ㅎ
|
|
현재 HTML5는 웹개발자에게 있어서 최대의 화두이다. HTML5는 아직 정식으로 표준화 되지 않았다. 하지만 정식버전이 발표되기도 전부터 관심이 뜨겁다. 내 생각에 그 이유는 사용자들이 인터넷 익스플로러 브라우저만 쓰다가 현재 다른 크롬, 사파리, 파이어폭스, 오페라등 다양한 브라우저를 사용하고 있다. 나 또한 주로 크롬을 쓰다가 결제할 경우만 IE를 사용하고 있다.
HTML5는 기존의 플러그인을 설치하지 않아도 플래시처럼 애니매이션을 넣을 수도 있고 비디오, 오디오 기능을 지원한다. 전세계적으로 플러그인을 거둬내는 추세이다. 플러그인이 보안에 취약한 이유이다. 그리고 HTML5가 주목받는 또 다른 이유는 스마트폰 열풍으로 인터넷이 PC에서 모바일로 급격하게 넘어간것도 이유중에 하나 일 것 같다. 아이폰에서 플래시를 지원하지 않고 안드로이드에서는 지원하지만 모바일이라 플래시가 있으면 굉장히 느려진다. 이렇기 때문에 플래시처럼 애니매이션 기능을 넣을 수 있는 HTML5가 주목 받는 이유인 것 같다.
이 책은 웹 페이지의 콘텐츠를 제어하는 DOM API와 WINDOW객체를 설명하고 있고 새로 도입된 INPUT 요소에 추가된 다양한 타입을 설명하고 있다. 스크립트 없이도 다양한 사용자 인터페이스를 작성해서 입력할 수 있다. 그리고 CANVAS이 HTML5에 추가되었는데 자바스크립트로 웹페이지에 이미지를 그리는 기술이다. 지금까지 웹에서 이미지를 표시하려면 정적인 그림은 IMG요소를 짧은 애니메이션은 GIF 등 애니메이션에 적합한 이미지 형식을 사용해 왔다. CANVAS는 플래시와 같이 플러그인에 의존할 수 밖에 없었던 시각적인 표현을 자바스크립트로만 구현 할 수 있게 되었다.
그리고 HTML5에 새로 추가된 VIDEO 요소, 오디오 파일을 재생하는 AUDIO요소가 추가 되었다. 이 책에서는 이 요소들의 사용법이 자세하게 설명되어 있는듯 하다. 이 외에 웹에서는 거의 사용되지 않았던 드래그 앤 드롭, GEOLOCATION API와 같이 HTML5 추가된 기능들을 자세히 설명하고 있다.
앞으로 웹은 HTML5로 만들어질 것이다. PC뿐만아니라 스마트폰, 태블릿PC, 각종 디바이스들도 인터넷을 연결시키고 있다. 이런 최신 기술을 익힌다면 다른 개발자보다 앞서 나가는 웹개발자가 될 수 있을 것이다. 이 기술의 영역은 더욱 확대 될 것이다. |
|
사전 처럼 바로 찾아서 본다고 하여 HTML5에 대하여 모두 나열한 책인 줄 알았습니다. ㅎㅎ 어이쿠야 뒷목 잡았습니다.
제가 알고자 하는 Websocket, Database, microdata, webCache등 많은 부분이 없습니다. (하다 못해 HTML5test.com에 측정 되는 정도의 것들은 있어야 하는 것 아닌지.. 흠.. 현 브라우저 엔진 개발자로써.. 참으로 ... 아쉬움이 많이 남는 책입니다.) 사전으로 지차면 a ~ z 중 a ~ c정도까지만 있는 것 같습니다.
물론 설명되어 있는 work, forms, canvas, drag & drop은 설명이 쉽고 따라 할수 있도록 해놓은 것은 잘된 부분이긴 하지만. 소개처럼 웹기술을 주도한다거나..... 사전처럼 찾아 쓴다거나... 의 포괄적인 데이터를 담고 있지는 않습니다. 내용을 좀 더 많이 보강한다면 좋은 책일것 같습니다.
|