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, 최적화

jQuery 1.4.3 이 릴리즈 되었습니다.

2010. 10. 17. 01:00
일주일 전부터 RC 버전을 내놓기 시작하더니 오늘 공식적으로 jQuery 1.4.3이 릴리즈 되었습니다. (http://blog.jquery.com/2010/10/16/jquery-143-released/) 버그 수정과 개선이 이루어졌다고 합니다. 바로 두 번째 단락에 1.4.3 버전이 나오는데 기여한 사람들의 이름이 나오는데요 한국인으로 보이는 분의 이름도 있습니다. (잠깐 찾아보니 한국인 맞으시네요.) 

개선된 점은 다음과 같습니다.
1. 작업흐름속에 JSLint로 확인하는 과정을 통합시켰다고 하는군요. 다만 jQuery Core Style Guideline에 맞게 JSLint를 약간 수정했다고 합니다.
2. jQuery 소스 내의 모듈간의 내부 의존성을 없앴다고 합니다. 이로써 소스 내의 개별 모듈만 로드하여 사용할 수 있게 되었다고 하네요.
3. 몇 가지 새로운 기능들이 추가되었습니다. (http://api.jquery.com/category/version/1.4.3/ 참조)
4. CSS 모듈의 재작성 (확장성을 위해). 속도도 1.4.2에 비해 약간 빨리진듯 합니다. 
5. Data 모듈 개선 HTML5 data - attribute가 자동으로 data 객체에 입력된다고 합니다.
6. 자바스크립트 객체에 .data()를 사용할 때 몇 가지 변경이 있다고 합니다. 
7. 1.4.3에서는 setData, getData 이벤트가 버블링하지 않는다고 합니다. 그리고 changeData 이벤트가 추가되었군요.
8. DOM을 탐색하는 속도가 무척 빨라졌습니다. 브라우저에서 querySelectorAll 메소드와 matchesSelector 메소드를 지원해야 한다고 합니다. 그래서 그런지 IE6~8에 대한 속도 비교 자료는 없네요. 그래프 상으로는 매우 빨라졌습니다.
9. Ajax 쪽에도 몇 가지 새로운 기능이 추가되었고요
10. Event쪽에는 항상 return값으로 false만 반환하도록 설정하는 기능이 추가된 것으로 보입니다. .click같은 이벤트에서 data를 초기 파라미터로 받을 수 있게 되었습니다.
11. animate 메소드에서 이제 easing을 지원하는군요. 
12. jQuery.type이라고 해서 객체의 정확한 타입을 알 수 해주는 메소드가 추가되었습니다.
13. jQuery.isWindow 메소드도 추가되었군요.

jQuery 1.4.3에서는 지원하는 브라우저에서 모두 3621개의 테스트를 패스했다고 되어 있습니다. (많군요) FF4에서는 100%, IE9에서는 거의 모두 패스했다고 합니다. (버그 두 개 발견했는데 그 중 하나는 이미 수정했답니다.)

후르륵 훝으면서 적어본 것이고 제가 jQuery에 대해 상세히 알고 있지 못해 일부 잘못 적은 부분이 있을 수 있으니 관심있으신 분들은 페이지에 직접 방문해 보시기 바랍니다.

nundefined HTML5_JS_CSS JQuery, jslint, matchesSelector, querySelectorAll

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

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