HTML5 어떻게 대응해야 하는 것일까요?

2010. 12. 10. 09:40
HTML5 가 2010년 웹세상의 핫 키워드 중 하나였던 것 같습니다. 여기저기서 세미나가 열리고, 웹에는 지금 제가 쓸 내용과 비슷한 포스트가 잔뜩 쌓여 있습니다. 서점에서는 책도 벌써 여러권 전시되어 있더군요.

HTML5이라는 것이 나왔는데, 도대체 어떻게 대응해야 하는가? 에 대한 이야기를 할까 합니다.

먼저 HTML5가 무엇인지 짧게 정리를 해볼까요?
HTML5는 웹 개발자가 원하는 욕구에 의하여 출발하여, 공식적인 웹표준을 담당하고 있는 W3C라는 곳에서 표준을 인정하여 워킹그룹으로 진행되고 있는 개선된 웹UI 기술이라고 할 수 있습니다.
HTML5하면 HTML의 히스토리나 역사 이야기가 꼭 나오는데요, 이런 부분은 다른 글에서 쉽게 찾을 수 있을것 같아서 생략합니다.

누구를 위한것인가?
매우 명확합니다. HTML5 는 웹 개발자를 위한 새로운 SPEC입니다.
다시 말해 사용자(end-user)가 얻는 혜택보다는 웹개발자가 얻는 혜택이 많습니다.
사용자에게 제공되는 혜택이 크지 않다는 것은 무슨뜻일까요?
바로 영리를 추가하는 기업에서 HTML5를 활용해서 이익을 창출할만한 기술은 아니라는 점입니다.

HTML5으로 변경되는 스펙은 무엇인가?
크게 2가지로 구분할 수 있습니다.
- 마크업의 요소들과 속성의 변화
- HTML5 JAVASCRIPT API의 추가
추가로 CSS3의 기술이 동시에 변화되고 있으며, HTML5와 같이 언급되는 것은 비슷한 맥락과 비슷한 UI인터랙션을 포함하고 있기 때문입니다. CSS3는 엄연히 HTML5의 스펙이 아닌것으로 알고 있습니다.

실제 웹은 어떻게 변화하나요?
변경되는 스펙을 통해서 확인해 볼까요?
마크업의 구조 변경은 보다 직관적이고 유지보수성을 향상시키는 부분의 변화가 있습니다.
HTML5 JAVASCRIPT API의 경우는 JAVASCRIPT 로 할 수 있는 범위를 확장 시켰으며, 이로 인해 Server-side 에서 가능했던 웹데이터베이스나 다른 브라우저 플러그인에게 부탁했던 그래픽작업등이 가능하게 되었습니다.
또한 브라우저별 호환성 문제가 많은 부분에서 해결될것입니다. 개발자들에게 선물과 같은것이겠죠? ^^
CSS3의 경우도 비슷합니다. Transformation, Transition 등의 변화가 있는데요, 주로 이미지를 자르고, 변경하고 이런류의 작업이 CSS속성으로 가능하게 되었습니다.
다시 말하지만, 이런 것들은 사용자에게는 중요하지 않은 부분의 변화로 볼 수 있습니다.

어떻게 대응해야 하나요?
TO 웹관련 비개발자분들꼐
먼저, 위에서 언급했지만 html5는 돈벌이로서 큰 메리트가 없다고 봅니다. 핵심은 웹개발자들이 수고하고 있는 부분을 덜어주고 웹개발 환경을 개선하는 것이라고 봅니다. 오히려 현재는 과도기적인 웹환경에서 일시적으로 웹개발자들이 더 수고하고 있다고 봅니다. 이런 점을 먼저 이해하셔야 합니다.

HTML5의 도입으로 인해, 기존에 복잡한 비용이 들었던 부분을 일부 개선할 수 있습니다.
이미지 편집이나 CHART같은 그래픽작업을 기존에 어떻게 했는지 볼까요?
- 서버에서 이미지를 생성하여 실시간으로 내려준다.(운용비용이 큽니다)
- ActiveX로 구현하였습니다(IE에서만 동작했겠죠? 물론 국내 IE사용자는 아직도 90%가까이 되는것으로 압니다)
- Flash로 구현하였습니다 (안타깝게도 이제 일부 모바일기기와 태블릿기기에서 플래쉬기술이 보여지지 않습니다)

이런 방법을 적은 비용으로 대체할 수 가 있습니다.
HTML5 의 CANVAS와 SVG와 같은 기술은 브라우저상에서 이미지를 조작하고 변영할 수 있도록 해줍니다.
모든 브라우저와 기기에서 동작이 가능하며, 서버에서 비싼 기기의 장비를 구할필요도 없으며, ActiveX와 같이 결함이 많이 발견되는 플러그인을 사용하지도 않습니다.

물론 이런 것을 가능하게 하는 브라우저는 한정적입니다. (구형브라우저에서는 안된다는 이야기 입니다^^)
하지만 그런 이유로 HTML5와 같은 최신기술을 바라만 보면 절대 안됩니다.

기존기술 --> HTML5 기술로의 변화과정에서 중간에 변환기라고 할 수 있는 다양한 라이브러리와 기술이 등장하고 있습니다. HTML5를 사용할 수 있는데 안타깝게 못쓰는 이유가 있다면 이를 또다른 기술로 풀어나가는 사람들이 있습니다. 대부분 이런 기술을 제공하는 것은 무료 입니다.(오픈소스)

또다른 예로, 모바일의 환경을 들 수가 있습니다.
HTML5의 가장 걸림돌은 구형브라우저에서는 (사실은 Internet Explorer 7미만) 거히 동작하지 않는 다는 것입니다. 그런 브라우저를 대한민국의 PC환경에서는 특히나 많이 가지고 있습니다.
하지만 스마트폰의 등작으로 모바일에서 웹을 언제나 경험할 수 있게 되었습니다.정말이지 1년안에 많은 변화가 생겼죠?  모바일에서도 브라우저라는 놈이 있습니다.  생긴지 얼마 안됬으니 당연히 최신기술을 담고 있습니다. PC에서 겪었던 문제를 다시 경험하지 않기 위해서입니다. 이런 이유에서 플래시와 같은 기술을 애초에 포기한것 일 수 도 있습니다.
다른 이야기이지만, 이런 경험을 많이 경험하지 못한 모바일기기 제조사에서 임의의 웹표준을 중요하지 않게 생각하고 브라우저를 개발하는 경우가 생기고 있는 것 같아서, 너무 안타깝습니다.
다시 돌아와서, 모바일에서는 HTML5가 PC 환경에 비하면 아주 잘 동작합니다^^
모바일에서 몇가지 기능을 볼까요?
- 야후 메인페이지의 내용을 손가락으로 아이폰의 앱들을 조정하듯이 스르륵 움직일수가 있습니다.(슬라이딩)
- 구글 지메일에서는 아이폰의 에어플레인모드(인터넷이 불가능한 환경)에서 메일을 열고 쓸수가 있습니다
- 어떤 서비스에서는 모바일 브라우저에서 내 위치를 감지하여 가장 가까운 곳의 원하는 장소를 찾아줍니다

순서대로 보면 다음과 같은 것들이 사용되었습니다
- CSS3의 Transition을 사용하여 효과를 구현.
 -web storage(cache api)를 사용하여 오프라인 모드에서도 인터넷이 가능하도록 구현
- web geolocation과 같은 기술로 위치기반의 서비스를 사용.

모두 HTML5와 같은 최신 웹기술을 사용하고 있습니다. 이런 부분은 최신 모바일브라우저를 통해서 많은 사용자들에게 멋진 효과와 사용자 경험을 제공하고 있습니다.

HTML5의 몇가지 기술은 아직도 사실상 표준화 된것이라고 할수 없습니다. 하지만 이런 이유로 개발비용을 감소시킬 수 있고, 사용자에게 더 멋진 기능제공을 할 수 있는 것을 지켜만 봐서는 안됩니다.
또 한가지는 여러분들과 함께 일하는 개발자들은 대부분 이러한 최신기술을 이용하여 개발하는 것을 즐겨 한다는 사실입니다. 반드시 그들에게 기회를 주고 많은 부분을 같이 고민하시면 좋겠습니다.

TO 웹 개발자분들께
이미 많은 분들은 HTML5의 스펙을 꽤고 계시고 어떤 기능이 있는지 잘들 아실것 같습니다.
제가 감히 당부 드리고 싶은 부분을 요점화 하여 알려드릴까 합니다.

HTML/CSS개발자 분들은 이제 자바스크립트를 많이 아셔야 합니다. CSS3와 같은 기술과 HTML5 API는 연관관계가 깊고, 서로 상호보완적인 요소가 있습니다. 자바스크립트를 능숙하게 하지 못하더라도 어떤 기능과 스펙이 있는지 이해를 하는 것이 좋습니다. 어떻게 구현해야 할지, 구현가능한지를 판단하기 위해서라도 자바스크립트의 이해는 반드시 필요로 합니다. 최소한 html5 spec을 이해하고 있어야 합니다.

자바스크립트 개발자분들은, 반대로 CSS3를 이해하고 있어야 합니다. 또한 Validator나 forminput관련 기능들은 모두 알고 계셔야 합니다. 말줄임표를 구현하기 위해 자바스크립트로 엄청남 삽질을 고만하고 싶다면^^
개발 영역을 확대하세요. HTML5 API중 현실성과 가깝지는 않지만 엄청난 SPEC이 포함되어 있는것 같습니다.
Web Application을 UI단에서 상당히 구현가능하게 된다는 점입니다. WEB SQL DATABASE등을 통해 서버에서나 했던 db를 클라이언트 브라우저의 제공으로 구현가능하고, Query문법을 통해서 비즈니스처리를 할 수 있습니다. WEB UI Application을 자바스크립트 기술로 가능하게 되었습니다.
이 뿐만이 아닙니다.
- web workers와 같은 기술을 통해 백그라운드로 다른 작업을 동시에 시킬 수도 있습니다.
- web storage를 사용하여 쿠키를 대체하여 http header의 부담을 줄일 수도 있습니다.
- notification API를 통해서 브라우저가 일종의 메신저와 같이 알람기능을 갖도록 할 수 도 있습니다(얼마전 RockMelt가 이 API를 사용한것 같습니다)
AJAX라는 비동기통신방법이나 Comet만의 방법을 이제는, web sockets을 통해서 기존 보다 더 빠른 새로운 방법으로 서버와 통신할 수도 있습니다.
할일이 너무 많이 늘어났네요. 불필요한 query문법을 알아야 하는것 부터, 신경쓰기 싫었던 소켓통신의 원리도 이해할 필요가 있겠군요.
어쩌면 서버사이트 웹개발자가 기존의 지식을 UI단으로 구현하는 형태가 될 수도 있습니다. 하지만 UI에서 서버사이드 작업을 하게 된다고 하여도 역시 자바스크립트 기술이 핵심이며, 이를 전문적으로 알고 있는 자바스크립트 개발자가 HTML5 API를 이해하고 활용하는 것이 더 어울린다고 할 수 있습니다.
다른 말로 가장 적합하다고 할 수 있겠군요.

#별도의 참고내용을 알려드리진 않습니다.
검색창에 html5 api css3등의 키워드만 쓰면 주루룩 끝없이 나오네요 ^^
웹에 무료로 pdf 형식으로된 개발가이드도 있습니다.
이런 부분을 작성해주신 분들께 감사드립니다.









니가요 HTML5_JS_CSS AJAX, CSS3, html5, iphone, javascript, mobile, rockmelt, Web

Twitter의 로그인 기능으로 살펴보는 unobtrusive JavaScript

2010. 12. 6. 01:00
최근 많이 사용하고 있는 트위터의 경우 웹페이지를 통해 사용하는 사람보다 별도의 프로그램을 이용하여 사용하는 사람이 많은 서비스입니다. 저같은 경우도 데스크탑에서는 트윗덱을 아이폰에서는 트위터 공식앱을 사용하여 트위터를 이용합니다. 이렇게 별도의 앱을 사용하여 서비스를 이용하다 보면 특별히 웹페이지로 오게 되는 일이 별로 없습니다. 최근에는 좀 나아졌을지도 모르겠지만 트위터 웹페이지가 그렇게 안정성이 좋지도 않습니다. 몇 달 전만해도 한국 시간으로 밤 - 미국 시간으로 아침에서 낮이 되는 시간 - 이 되면 로그인도 하기 어려웠고 정상적으로 트위터를 사용하기가 어려웠으니까요.

오늘 적어보려 하는 것은 JavaScript를 사용하여 개발을 할 때 중요하게 생각해야 할 Unobtrusive JavaScript라는 개념입니다. 이 개념은 JavaScript를 웹페이지에 적용할 때 어떠한 방식으로 적용해야 하는지에 대한 것입니다. Unobtrusive JavaScript에 대해 위키피디어에 정리되어 있는 정의를 잠깐 살펴보면..

1. 기능을 웹페이지의 내용이나 구조와 분리하는 것
2. 전통적인 자바스크립트 프로그래밍의 문제를 피하는 좋은 방법 (다양한 브라우저의 지원이나 확장성 부족)
3. 사용자의 프로그램이 자바스크립트 기능을 지원하지 않더라도 서비스 이용에는 문제없도록 하는 점진적 개선(progressive enhancement)의 방법

을 포함합니다. 

그럼 이제 트위터를 살펴보겠습니다. 트위터의 로그인 페이지는 아래의 사진과 같습니다.


우측 상단의 Sign in 버튼을 클릭하면 다음 화면과 같은 로그인 영역이 나타납니다.


일반적인 경우라면 새롭게 나타난 로그인 영역에 아이디와 패스워드를 넣고 트위터를 사용하면 됩니다. 그런데 웹페이지의 내용에 JavaScript를 바로 삽입하지 않으면, 다시 말해 HTML 코드 내에 인라인으로 JavaScript를 삽입하지 않으면 페이지에 엘리먼트를 노출하는 시점과 엘리먼트에 이벤트 핸들러를 연결하는 시점 사이에 시간적인 차이가 발생하게 됩니다. 물론 이 시간의 차이를 극복하는 방법이 있지만 이 경우 HTML 코드가 지저분해지는 것은 피할 수 없게 됩니다. 짧은 시간이지만 HTML 코드에 JavaScript 이벤트 핸들러가 연결되지 않으면 해당 기능이 먹통이 됩니다. 즉, 짧은 시간이지만 JavaScript를 사용할 수 없는 상황이 되는 것이죠. 그런데 트위터에서는 이 짧은 시간 동안 Sign in 버튼을 클릭하면 다음과 같은 페이지로 이동하게 됩니다.


위 페이지는 바로 로그인을 할 수 있는 페이지입니다. 자바스크립트를 사용할 수는 없지만 서비스를 이용하는 데는 아무런 문제가 없습니다. 이것이 바로 점진적인 개선이며 Unobtrusive JavaScript를 적절하게 적용한 예라고 하겠습니다.

로그인 버튼에 해당하는 HTML 코드는 다음과 같습니다.

<span id="have_an_account">Have an account?<a href="/login" class="signin" tabindex="3"><span>Sign in</span></a></span> 

어떤가요? 위 코드에는 아무런 JavaScript 코드도 포함되어 있지 않습니다. 그렇다면 JavaScript가 정상적으로 동작하지 않더라도 사용자는 /login 으로 이동할 수 있을 것입니다.

이런 형태로 JavaScript를 작성한다면 JavaScript를 지원하지 않는 브라우저에서도 정상적으로 서비스를 사용할 수 있을 것입니다.


nundefined HTML5_JS_CSS javascript, progressive enhancement, twitter, unobtrusive javascript, 트위터

jQuery mobile

2010. 10. 25. 01:00
jQuery mobile 1.0의 alpha 1 버전이 발표되었습니다. (http://jquerymobile.com/2010/10/jquery-mobile-alpha-1-released/) 두 달 전 프로젝트의 시작을 알리는 글(http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/) 이후 처음으로 발표된 결과물입니다. 

jQuery mobile의 특징을 정리하면 다음과 같습니다.

jQuery mobile은 progressive enhancement을 근간으로 만들어 졌습니다. 우선 HTML만으로도 기능이 동작하도록 한 후 여기에 javascript를 추가하여 더 나은 동작을 할 수 있도록 만들어 졌습니다. 이렇게 만들 경우 대부분의 브라우저에서도 기능을 이용하는데 아무런 문제가 없을 것입니다. 

Graceful degradation. jQuery mobile에서는 HTML5와 CSS3에서 제공하는 기능을 많이 사용했지만 이 기능을 제공하지 않는 경우라도 최대한 정상적으로 사용할 수 있도록 만들어 졌습니다. 

접근성도 좋아 데스크탑의 경우 키보드로 사용할 수 있으며 스크린 리더에서도 활용이 가능합니다. 

jQuery mobile에서는 javascript에서의 설정 없이 마크업만으로 표현해도 jQuery mobile의 모든 기능을 사용할 수 있습니다. HTML만 작성하면 나머지는 jQuery mobile에서 알아서 해주는 것이죠.

파일의 크기도 작아져 alpha 1 버전의 경우 12KB이며 CSS도 6KB에 지나지 않습니다. 

테마를 제공합니다. alpha 버전에서는 아직 수동으로 설정해야 하지만 최종 릴리즈에서는 themeroller 도구를 제공할 것으로 보입니다.

jQuery mobile과 PhoneGap을 사용하여 앱을 만들 수도 있습니다. 


jQuery mobile에서 지원하는 모바일 브라우저 내역은 다음의 링크에서 확인할 수 있습니다. http://jquerymobile.com/gbs/


이건 뭐 한마디로 멋지다는 단어밖에 생각나지 않네요.

iui(http://code.google.com/p/iui/)와 sencha touch(http://www.sencha.com/products/touch/)와 같은 기존의 framework들과 좋은  경쟁이 될 것 같습니다.

nundefined HTML5_JS_CSS graceful degradation, javascript, JQuery, jquery mobile, PhoneGap, progressive enhancement, themeroller

UI 개발자의 또다른 기술력 - 사이트 최적화(1)

2010. 10. 21. 09:20
웹사이트의 최적화라고 하면 개발자들내에서도 서로 다른 생각과 경험이 있을것 같습니다.
저의 경우는 모든 프로젝트가 마무리 되고 끝나는 시점에 고객의 요구사항에 따라서 '한번 해볼까?' 라고하여 Stress test 를 실행해보거나, 어렵게 구한   Roadrunner 와 같은 초울트라 강력한 측정 도구를 사용해서, 내가 개발한 사이트가 끄떡없는지 측정하곤 했었습니다.
(물론 Roadrunner와 같은 툴은 구경만했었군요. 쩝)
한마디로 , 뻗지않고 잘 버티는지  궁금했던것 같네요.

몇년전만해도 사이트 최적화라고 하면,  Web Server와  WAS(Web application server) 자체의 성능과 DB 의 성능 , 또한 컴파일과정에서 발견하기 어려운  DB 와  Application Interface 를 맟추는 부분의 컨넥션이 잘 버틸지 등만을 테스트 했습니다.
이런 과정에서 별문제가 발견되지 않는다면 사이트 오픈에 지장이 없습니다.

6-7년전에서 생겼던  web2.0 라는 용어와 더불어 웹사이트의 최적화라는 것은  몇가지가 추가되었다고 봅니다.
더불어  Ajax 기술이 언급되면서,   Ajax based 로 많은 어플리케이션을 구현할 수 있게 되었습니다. 
구글맵이나  Gmail 과 같은 서비스가 선도적인 역활을 해주었습니다.
이제 우리나라의 포털사이트들 뿐아니라, 국내 기업형 포털에서도  Ajax 기반의 다양한 기능과 어플리케이션이 당연시 되고 있습니다.

문제가 한가지 생겼습니다.
 UI 가 너무 풍부해져버렸군요. 엄청난  Javascript , css , image 들.. 
이러한 것들은 웹서버- pc(browser ) 사이의 개선이 필요하게 되었으며, 누가 어떻게 하는가? 라는 문제가 사실 아직도 있는것 같습니다.
물론,  서버의 성능과 웹서버의 성능은 많은 향상을 이루어 졌습니다. 물론  PC 또한 많은 성능향상이 되고 있습니다. 
하지만 사용자들의 눈도 계속 올라가고 있죠^^. 
잘동작하고  AJAX 를 사용해서 비동기 통신도 하지만... 너무 느립니다. 

누가?
일반적인 성능엔지니어는 아직도  UI 성능을 고려하지 못하고 있는듯 합니다.
실제로  Client-side & Server-side 의 성능을 동시에 분석해주는 엔지니어는 드뭅니다.(아직 못봤습니다) 
UI 개발자가 모두 성능엔진이어가 될 필요는 없습니다. 하지만  UI 개발자가 성능을 최적화 할 수 있는 방법과 문제점을 찾는 능력이 필요로 합니다. 
본인이 개발하는 것에 대한 보장때문인데요. 그렇지 않고서는 쌓여만 가는 고객 요구사항과의  Trade-offs 를 할수가 없습니다.
최적화에 대한 방법과 어떻게 구현을 하는지에대한 지식이 있다면 적절한 타협점을 찾고  최선의 UI 개발을 할 수 있습니다.
따라서,  Ui 개발자가 반드시 사이트 최적화 기법을 알고 있어야 합니다.

UX 와의 관계?
사이트 최적화는 간단히 말해, "풍부한 UI 를 가진 사이트를 빠르게 제공한다" 입니다.  UX 라는 것은 사이트 전체에서 느끼는 사용자 경험이라고 하는데요(전 전문가가 아닙니다) 다양하고 최적화된 인터랙션을 제공하는것 보다 앞서야할것은, 즉각적인 반응과 빠른 웹사이트 입니다.
사이트 최적화 기법은 개발자들이  UX관점에서 큰 기여를 할수 있는 부분입니다.

관련책은?
우선 책부터 추천을 해야겠네요.(저도 제대로 공부를 해볼까 하네요 ^^)
우선 여유가 되시는 분들은 아래의 2권의 책을 강력추천합니다

웹사이트최적화기법:UI개발자를위한필수지침서웹사이트를더빠르게만
카테고리 미분류
지은이 스티브 사우더스 (아이티씨, 2008년)
상세보기
 
몇가지 최적화 기법에 대하여 소개하고 있습니다. 매우 중요하고 아직까지 모두 유효한 기법이 기술되어 있습니다.

초고속웹사이트구축좀더빠른차세대웹사이트를위한성능최적화기법
카테고리 컴퓨터/IT > 웹사이트 > 웹사이트기획
지은이 스티브 사우더스 (위키북스, 2010년)
상세보기
저도 아직 못본책인데요. 이번에 한권샀네요^^.  스티브 사우더스라는 분 이외 다른 6분도 같이 작성을 한 내용이 포함되어 있습니다.
첫번째 책에서 기술하지 못한 Ajax 코딩방법에 대한 내용도 포함하고 있는등, 매우 고급정보가 많이 들어가 있는것 같습니다.

저것을 다 공부해야하는가?
시간이 되시는 분들은 첫번째 책은 꼭 읽어보시면 좋습니다.
제개 해드릴 내용은 바쁘신분들을 위해 몇가지 중요하고 빠르게 사용할 수 있는 몇가지 기법을 앞으로 소개해 드릴 예정입니다.
최적화 기법이 별거 없습니다. 
'전송되는 데이터 양을 줄이거나 없애도록 하라' 입니다.
대표적으로 HTTP request 를 줄이는 방법이 있습니다.  이것만 제대로 해도 대부분의 웹사이트의성능이 많이 좋아지는데요.
 -  javascript, css 파일을 통합한다( 병합)
-  병합후에 압축한다 ( gzip  및 난독화) 
-  압축 후에 캐쉬를 최대한 활용한다( expires 등의 만료기간을 주는것)
-  이미지  Sprite  기법을 사용한다.

이정도까지만 반영하여도 , 웹사이트 성능은 정말정말 좋아집니다.

 여러분의 웹사이트의 성능에 대한 측정을 해보고 싶다면, 아래의  YSlow 라는 툴을 사용해서 측정해보세요 ^^


참고사항.
마지막으로 몇가지 참고가 될만한 대표적인  URL 을 알려드립니다.

yui compress - 제가 좋아하는 압축툴입니다 ^^
http://www.julienlecomte.net/blog/2007/09/16/

jsmin - 대표적인 압축툴입니다.
http://www.crockford.com/javascript/jsmin.html

다양한 압축툴을 볼 수 있습니다.
http://www.askapache.com/tools/online-compression-tool-compares-packer-jsmin-dojo-and-yui-compressor.html

최적화에 대한 최신 정보<정말 좋은 내용입니다>
http://developer.yahoo.com/performance/rules.html


다음편에는 몇가지 방법만으로 사이트최적화를 할 수 있는 쉬운 방법을 소개하도록 하겠습니다.









니가요 HTML5_JS_CSS AJAX, compression, javascript, jsmin, optimization, packer, yslow, 최적화

몇 가지 눈에 띄는 자바스크립트 책

2010. 10. 15. 01:00
한동안 국내에 Ajax에 대한 책이 시장에 많이 나오더니 어느 순간부터 뚝 끊겼습니다. 냉정하게 바라보면 Ajax에 대한 책 대신 iPhone/Android에 대한 책으로 관심이 옮겨진 것으로 보입니다. 인기 순위가 역전된 것이죠. 하지만 아마존을 뒤져봐도 비슷한 느낌이 들었습니다. 특별히 관심을 가질만한 자바스크립트 책이 눈에 보이지 않았습니다. 그 사이에 눈에 띄는 책이라고는 현재도 한참 글을 쓰고 있는 John Resig의 Javascirpt Ninja(2011년 2월 말 출간 예정)나  jQuery Novice to Ninja(2010년 2월 출간) 정도일까요. 

그런데 오늘 우연히 아마존에서 자바스크립트에 대한 책을 검색해보니 책 몇 권이 눈에 들어와 간단하게 적어봅니다. 아직 저도 구매하지는 않았습니다. : ) 

테스트 주도로 자바스크립트를 개발하는 것에 대한 책입니다. 9월에 나온 따끈따끈한 책입니다. 아직 국내에 번역서는 없습니다. 사실 자바스크립트에 대해 크게 공을 들이는 기업이나 사람이 별로 없는 것이 현실인데요. 이런 점은 해외에서도 큰 차이가 없지 않나 싶습니다. 무엇보다도 관련된 책이나 도구가 나오는 것을 보면 알 수 있는데요 자바스크립트의 경우 이런 책이나 도구가 흔치 않습니다. 그런 의미에서 이런 책이 나왔다는 것은 자바스크립트를 사용하여 개발할 때도 시간과 노력을 들여 뭔가를 '제대로' 만드는 곳이 늘어난다는 것이라 추측할 수 있겠습니다. 책을 읽지 못해 내용 자체에 대한 평은 넘어가겠습니다. 아마존에서 보니 대략 다음과 같은 내용을 담고 있다고 합니다.

테스트 자동화 및 TDD / 자동화된 테스트 흐름 구축 / Node.js를 사용하여 브라우저와 서버를 모두 테스트하기 / TDD를 사용하여 깔끔한 API, 모듈화된 코드, 구조적인 SW 만들기 / 테스트 가능한 코드 작성 / 분리하여 테스트 /리팩토링을 통한 점진적인 코드 개선 등등

익혀두면 자바스크립트를 사용하여 개발할 때 많은 도움이 될만한 내용이라고 생각합니다.

128페이지의 얇은 책입니다. 면접볼 때 받을만한 질문을 모아둔 책인가 봅니다. 한 권 사볼까 하는 생각이 드네요. 

자바스크립트로 개발할 때 도움이 될만한 코딩 패턴과 베스트 프랙티스에 대한 책입니다. 현재 저자가 야후!에서 근무하고 있네요. 실제 자바스크립트로 많은 개발을 하는 분이라면 도움이 되지 않을까 하는 생각이 듭니다. 다음과 같은 내용을 담고 있다고 되어 있습니다.

고품질의 자바스크립트를 작성하는 방법 / 함수를 작성할 때 literal notation pattern을 사용하는 이유 / 함수를 정의하는 다양한 방법 / 객체 만들기 / 코드 재사용과 상속을 가능하게 하는 방법 / 일반적인 디자인 패턴을 자바스크립트로 구현하는 방법 / 브라우저에 따라 선택적으로 적용하는 패턴

복사와 붙여넣기로 점철된 코드가 아니라 제대로 된 자바스크립트 코드를 짜고자 하는 분들이 읽고 넘어가시면 좋을 책으로 보입니다. 약 240 페이지로 그다지 두꺼운 편도 아니군요.

제목 그대로 자바스크립트 테스트에 대해 초보인 사람들을 위한 책입니다. 위에서 언급한 Test-Driven JavaScript Development 보다는 조금 더 친절해 보이는 책입니다. 테스트 자동화와 같은 내용 보다는 테스트 자체에 대한 내용이 주된 내용으로 보입니다. 책에 대한 설명만 봐서는 이 책을 먼저 읽고 Test-Driven.. 을 보면 순서가 맞을듯 합니다.


간만에 책을 둘러보니 어떤 내용일까 궁금해지는 책들이 몇 권 보입니다. 영어로 된 책을 보자니 사놓고 한, 두 페이지 보고는 어딘가에 쳐박아둘 것 같은 불안감이 엄습합니다. 누군가가 빨리 번역해주면 좋겠습니다. (하하~)

nundefined HTML5_JS_CSS javascript, javascript interview questions, javascript ninja, javascript patterns, javascript testing beginner's guide, jquery novice to ninja, test driven javascript development