유부중년 개발자의 우울

최근(2013년 12월) 브라우저 점유율 그리고 잡생각 데스크탑(태블릿 포함) 브라우저 점유율 IE8 35% 보합 넘사벽. IE10 25%까지 급등. IE9 15% 급락. 크롬 20% 강보합. 나머지 다 합쳐도 한자리. 대충 보면… XP 쓰는 사람들은 어찌어찌해서 IE8로 거의 넘어갔고, 윈7, 8 쓰는 사람들은 거의 IE10으로 넘어가고 있고, 크롬이 기대 이상으로 잘하고 있지만 한계에 봉착.우울하지만… 대충 예상했던 스탯… 전체(데스크탑/태블릿/모바일/기타) 브라우저 점유율 안드로이드 25% 약보합. IE8 25% 강보합. IE10 급등 16%. 크롬 보합 15%. IE9 급락 12%. 아이폰 2% 보합. 나머지 다 합쳐도… ㅠ..ㅠ 데스크탑/모바일에서 각각 짱먹는 두 녀석이…하필…개발자들을 괴롭히는..

최근 국내에도 웹폰트를 적용하는 사이트들이 늘고 있는데, 한글 웹폰트는 영문 웹폰트에 비해 용량이 크기 때문에 웹폰트가 다 로딩 되기 전까지 텅빈 화면이 보이는 경우가 많아서 살짝 아쉽다.. 구글과 어도비가 공동 개발한 Typekit WebFontLoader를 쓰면 구글 웹폰트, Typekit 등이 유/무료로 제공하는 웹폰트는 물론이고 구글 웹폰트 Early Access(여기에는 나눔고딕 등의 한글 폰트도 있다)나 모빌리스 웹폰트(다양한 유/무료 한글 웹폰트를 제공) 같은 커스텀 웹폰트도 손쉽게 사용할 수 있다. 또한 웹폰트 로딩 상태에 따라 추가적인 처리도 할 수 있어서, 웹폰트가 로딩되는 동안 보여줄 다른 폰트를 지정하거나, 로딩 안내 메시지를 표시하는 등, 다양한 기능을 구현할 수 있다.할 수 있다..

지난 두 달 동안 k-mobile을 통해서 "모바일웹 & HTML5 하이드브리드 앱 개발"이라는 주제로 3일에 걸쳐 매일 3시간씩 총 9시간 강의가 있었는데, 여기서 소개하는 자료는 그 중에서 첫날 3시간 동안 발표한 내용이다. 강의 자료를 대충 살펴보면 알겠지만, 뜬구름 같은 트렌드 혹은 패러다임을 "얘기"하고 있어서, 구체적인 기술이 중요한 3일짜리 속성 과정에 적합하지 않은 것 같아 자진 사퇴(?)하고, 발표자료를 공개(?)한다. 내가 발표했던 첫날 3시간은 @ibare님이 좀 더 실무적이고 유익한 내용으로 강의하실 듯~ ^^ 단일 페이지 인터페이스 웹/앱 개발 View more presentations from iolo may the keynote be with you...

자바스크립트라고 하면 전화번호 형식 검사하고, 삭제하기 전에 confirm 이나 하는 열 줄 백 줄 짜리 "스크립트"를 떠올리지만, 웹 플랫폼 시대의 자바스크립트는 지난 시대의 자바스크립트와는 다르다. 이미 자바스크립트로 백 줄 천 줄을 짜야 하는 시대다, 조만간 몇 만, 몇 십만 줄을 짜게될지도 모르겠다. 이 쯤되면 자바스크립트도 더 이상 대충 짜서 대충 돌아가면 땡~이 아니다. 소스를 적절히 모듈로 나눠야 하고, 그렇게 나눈 모듈을 테스트도 해야 하고, 그에 맞는 나름대로 디렉토리 구조도 갖춰야 하고, 빌드도 해야 한다. 각설하고, 이 글에서는 jasmine이라는 유닛 테스트 프레임웍을 이용해서 자바스크립트 유닛 테스트를 해보려고 한다. jasmine은 javascript+examine의 합성어 처럼..

xui.js 초간단 리뷰 요약xui.js는 모바일 html5 웹앱에 특화된 초경량 자바스크립트 라이브러리 특징 초경량(9.4k) - jquery 최소 29k, dojo 최소 31k, jQueryMobile 최소 135k, Sencha Touch 최소 524k, … 단순 명쾌하고 익숙한(jQuery 스타일의 메소드 체이닝) 문법 모바일에 최적화(webkit, ie mobile, blackberry) 제약없는 오픈소스 라이센스(MIT; Sencha의 듀얼 라이센스 대비 장점) 개발 배경Nitobi가 PhoneGap 용으로 개발한 자바스크립트 라이브러리. 기능 요약아래에, xui.js가 제공하는 모든(!) 함수를 간략하게 설명합니다. 개발자 분들의 이해를 돕기 위해 대응하는 jquery와 dojo의 함수도 같..

지난 포스트에서는 CORS에 대해서 (아직 지원하지 않는 브라우져가 많다고 지레 짐작하고) 용어만 언급하고 넘어갔다. 최근에 올라온 "Methods of communication"이라는 글에 걸린 링크를 통해 지금 당장이라도 쓸 수 있음을 확인하고, 몇 자 적어보려고 한다. Ajax에는 Same Origin Policy라는 원칙이 있다. 말 그대로, 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청을 보낼 수 있다. MS가 XMLHttpRequest를 처음 만들 때만 해도 이런 제약은 당연한 것처럼 보였지만, 지금에 와서는 OpenAPI를 통한 매시업(Mashup)이 활성화되는 데 가장 큰 장애물이 되었다. 매시업이 아니더라도 여러 개의 도메인을 사용해야 하는 대규..

앱스프레소 확장 API를 사용한 AJAX/* 앱스프레소(Appspresso)는 이클립스 기반의 SDK 형태로 배포되어 사용하기 더 편리하다(?)는 것과 WAC(Wholesale Applications Community)의 Waikiki API를 제공한다는 점을 빼면 폰갭(PhoneGap)과 비슷한 하이브리드 웹앱 프레임웍/툴이다. 이 녀석을 만든 장본인이라 블로그질 하기가 좀 뭣하지만... 어차피 보는 사람도 별로 없는 블로그라 ㅋㅋ */ 일반적인 웹 어플리케이션(혹은 웹 서비스)이 갖는 크로스 도메인 제약이 (폰갭과 달리) 앱스프레소로 만든 웹앱에도 동일하게 적용됩니다. W3C에 준비중인 Cross-Origin Resource Sharing(CROS)이 표준화되어 모바일 webkit에 적용되면 좋겠지만..

/* 막간을 이용해서 CSS 삽질~~ just for fun~~ 나름 삽질한다고 했는데... 해서 만들었는데... 아무도 안쳐다보는 것 같아서... ㅠㅠ 결과 동영상을 짤방으로~~(웅장한 사운드 주의!!!!) */ 웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기 CSS3에는 자바스크립트의 도움없이 애니메이션 효과를 구현할 수 있는 방법이 추가되었다. 대표적인 것인 transition과 animation이다. transition은 간단한 전환 효과를 구현할 때 주로 사용되고, animation은 플래시와 유사한 키프레임 기반 애니메이션을 만들 때 사용된다. 21세기, 머나 먼 은하계 저 멀리... IE6가 세계에서 두번째로 많은 대한민국의에서 HTML5와 CSS3의 멋진 기능들이 그림의 떡일 뿐이..

웹에서 아이폰스러운 Carousel 구현하기 페이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다. 이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다. 백문이..

터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기 아이폰/아이패드/아이팟의 모바일 사파리와 안드로이드의 모바일 크롬 등은 모두 터치기반 모바일 웹킷을 사용하는 브라우져들이다. 이 브라우져들은 버튼 등을 눌렀다(touchstart) 떼도(touchup) 즉시 반응(click)하지 않는데, 그 이유는 연속되는 터치 동작(touchstart-touchmove-touchend)들이 제스쳐(swipe, long click, …)인지 여부를 확인하기 위해 최대 300ms의 지연시간이 생기기 때문이다. 모바일 웹 사이트를 만드는 경우라면 이 정도의 지연시간은 크게 문제가 되지않지만, 상대적으로 신속한 반응을 요구하는 “웹앱"이라면 얘기가 달라진다. 해결책은 간단하다: 1. 손가락으로 무언가를 누르면(touchstar..

얼마전에 쓴 "HTML5/CSS3/JavaScript로 아이폰 앱 만들기"에서 설명(응? 언제 설명했는데?) 반복적인 초기 작업을 더 쉽게 할 수 있도록 Xcode 프로젝트 템플릿을 만들어 보았다. Dropbox에 올려둔 hellowebapp-ios-xcode_project_templates.tar.gz 를 받아서, "~/Library/Application Support/Developer/Shared/Xcode/Project Templates"에 풀고, Xcode에서 File 메뉴의 New Project를 선택하거나, Xcode를 실행하고 "Create a new Xcode project"를 선택)하면, 프로젝트 템플릿을 선택하는 대화상자가 나오는데, "User Templates" 아래에 "WebApp"..

사무실에 앉아서 이짓꺼리(?) 하고 있다. 이런 쓰잘데기 없는 동영상을 굳이 만들어 올리는 이유는 "웹 앱"(WebApp; HTML5App)이 그렇게 거창한 것도 아니고, 어려운 것도 아니고, 멀리 있는 남의 나라 이야기도 아니라는 것을 보여주기 위해서다. PhoneGap, Titanium, QuickConnect 같은 거창한(?) 제품을 동원하지 않더라도 JQueryMobile, Jo, Wink, Sencha Touch 같은 UI 툴킷과 HTML5 canvas 태그 그리고 HTML5 JS API들(WebStorage, WebSQLDatabase, WebWorker, ...), 그리고 W3C의 DAP(Geolocation, ...)를 사용하면 웬만한 앱은 만들 수 있다. 아무튼, "3분" 만에 "웹 기술..

풍경 1. 아이폰이 국내에 출시된지 1년도 안됐는데... 아... 아이폰 없던 시절이 어땠는지 기억조차 가물가물... 먹고 살려니 아이폰 개발 공부는 해야겠는데, 망할 놈의 옵씨... 옵씨는 그렇다 치고, 코어 파운데이션, 코어 그래픽스, 코어 애니메이션, 뭔 코어가 이렇게 많냐? 핵분열도 아니고... OTL 풍경 2. 없는 살림에 거금 10만원 들여 아이폰 앱 개발자 등록해서 1년 동안 앱 3개 겨우 올렸는데... 안드로이드가 대세? 열라 안드로이드 공부해서 앱 좀 올려 볼려니... 안드로이드 마켓은 뭐고 티스토어는 뭐고 올레마켓은 또 뭐냐? 그까이꺼 대충~ 눈감고 넘어가려니... 블랙베리? 심비안? 팜프리? 윈폰7? 바다? OTL 풍경 3. 아래아한글 새 버전 나온 줄 알았던 넷스케이프와의 첫만남, ..

업무상 필요해서 작성한 글이지만, 혹시 도움이 될까 해서 올려봅니다. 블로깅 안한지 너무 오래되서 ㅎㅎ 홈페이지: http://joapp.com/개발자: Dave Balmer(Palm WebOS 개발자, 전 야후 개발자)요약: all-in-one 스타일의 경량 자바스크립트 라이브러리. 특징 UI 툴킷 CSS 기반 테마/SKIN 지원 오픈소스 OpenBSD 라이센스 크로스 플랫폼 Palm WebOS, Safari(iOS,Desktop,Dashboard), Chrome(Android,Desktop) 등 webkit 기반 브라우져만 지원. 경량 자바스크립트 41K(최소화된 버전) + UI CSS/리소스(176K) PhoneGap 호환(?) PhoneGap과 호환되지 않는 자바스크립트 라이브러리는 ”없음”. 주..

원래 발표 자료는 총 15장이 었는데, 예제 코드와 설명이 필요한 것은 이번으로 마무리 하려고 한다. implicit type conversion 자바스크립트는 약한 타입(weak typing) 이므로, 묵시적인 형변환(implicit type conversion)이 빈번하게 이루어진다. 이로 인한 부작용을 간과하면 찾기 어려운 버그를 만들 수 있다. 간단한 예를 통해 알아보자: function test(foo) { alert(typeof(foo)); alert(foo); if (foo) { alert('foo'); } if (foo == null) { alert('foo == null'); } if (foo === null) { alert('foo === null'); } } 이 함수를 여러가지 파라메..

자바스크립트로 심각한 코딩을 하기 시작하던 초기에 했던 삽질이다. 그 전까진 아예 "this"라는 키워드를 쓸 일 자체가 없었다. 가장 간단한 예제를 보자: function test(name, button) { this.name = name; button.onclick = function(event) { alert('hello, ' + this.name); }; } 문제는, 이 코드에서 아래에 있는(4줄) "this"가 위에 있는(줄2) 그 "this"가 아니라는 건데... 그럼 어떻게 해야하나? 여러가지 방법이 있겠지만, 가장 일반 적인 방법은 이렇게 하는 거다: function test(name, button) { this.name = name; var self = this; button.onclic..

내 스스로와의 약속(하루에 한개씩 블로그를 쓰겠다는)을 지키면서, 또 다른 약속(지난 번 dW Live!의 페차쿠차 발표에 대한 보충 수업을 하겠다는)을 지키기 위해 여러 번에 나눠 쓰기로 했다 :p 천덕꾸러기 취급 받던 자바스크립트가 다시 각광을 받게된 것은 웹2.0 열풍에 실려 날아온 AJAX 때문이다. AJAX의 A가 Asynchronous라는 것은 자바스크립트 개발자라면 누구나 아는 사실임에 종종 이를 망각하는 경우가 있다. 가장 쉬운 예를 보자: function get_result() { var result1, result2; $.ajax({ ..., success: function(data) { result1 = data; }); $.ajax({ ..., success: function(dat..

오늘 있었던 한국 developerWorks의 행사 - dW Live! 웹개발 다반사에 발표했던 슬라이드인데, 앞 포스트에서도 밝혔듯이 페차쿠차라는 형식적인 제약으로 인해 극도로 불친절하다. 좀 더 친절한 설명은 이 블로그를 통해서 차근차근 보충할 예정이다. (위의 플래시가 안보이시는 분들은 여기가서 PDF다운 받으세요: http://docs.thinkfree.com/docs/view.php?dsn=860508) 일단 티셔츠 한 장 받아 챙기고^^, 커피 한 잔 타서 입장~ 먼저, 주최측에서 WebSphere sMash라는 솔루션을 소개했다. 그러나, 생뚱맞은 REST에 대한 질문 답변에 시간을 다 써버리고 sMash는 맛도 제대로 못봤다. (발표하시느라 고생하신 분께는 죄송하지만)오늘 데모만 놓고 보면..

참고: http://www.ibm.com//developerworks/kr/event/seminar/dwlive_1205/index.html 이번 주 토요일(12월 5일) 오후에 있을 dW Live! 세미나에서 발표를 해달라는 우일님의 부탁을 받고, 그동안 신세도 많이 졌고, 예전에 개발자들의 수다 시절에 한 번 참여해 본 경험도 있고, 결정적으로 딱히 할 일도 없어서... 선뜻 응했는데... 그 동안 발표 방식이 좀 바뀌었단다~ -.-;;; 페차쿠차... 흠... 제한시간(슬라이드 15장을 한 장에 30초, 총 7분 30초)안에 발표를 끝내야 하다는데... 흠... 선정된 발표 주제는 다음과 같은데... 흠... 정말 저런 주제를 7분 30초! 만에 발표할 수 있단 말인가! 괜찮은 오픈 API 제공하기..

세미나 같은 건줄 알고 9회 다음 DevDay에 참가했다가... 얼떨결에 코딩 분위기에 동참.... 우수상까지 타버렸다(상품은 무려 삼보의 320G USB 외장 하드!). 당일날 트위터에서도 언급했지만, 완전 애들 과자 뺏아먹은 것 같아... 기분이... 참... :S 아무튼, 마땅한 아이디어도 안 떠오르는데, 때마침 발표자(다음 직원이신데 성함이 기억안나네요... 죄송 m(_ _)m)께서 엄청난 오타를 날리시는 것을 보고 영감을 받아 철자 검사 기능을 추가해보기로 했다. 백엔드는 오픈소스 스펠러 프로젝트 중에서 유일하게 한글을 지원하는 hunspell(오픈오피스, 파이어폭스 등에서 쓰이는)을 사용하기로 하고... 서버측 코드는 갖고 간 노트북에 윈도만 깔려있는 관계로 자바로 작성하기로 했다. 노트북에 ..

dojo 프로젝트의 리더였던 alex가 구글로 자리를 옮긴뒤 첫 제품을 내놓았다. "Chrome Frame"이라는 이름의 IE 플러그인(Active-X)이 그것인데, 기술적으로는 Firefox의 IE Tab 확장과 비슷하지만, IE Tab은 사용자가 명시적으로 IE로 보겠다고 해야만 활성화되지만, Chrome Frame은 색다른(?) 접근 방식을 제안한다(물론, 두가지 방식 모두 Chrome Frame이 깔려있을때만 동작한다): 1. (사용자가) URL 앞에 "cf:"를 붙인다. 예를 들면 http://acid3.acidtests.org/ 하면 IE가 X같은 반응을 보이지만, cf:http://acid3.acidtests.org/ 하면 잘 된다. 2. (개발자가) HTML 페이지에 메타 태그를 달아놓으면..

사진작가들이 쓰는 Lightbox 얘기가 아니다. 웹개발자나 디자이너에게 Lightbox는 웹 페이지 상에서 이미지들을 뽀대나게 보여주는 일종의 Modal Dialog 형태의 UI 컴포넌트다. 대표적인 Lightbox 라이브러리로는 (유행이 좀 지난 느낌이 있지만) prototype / script.aculo.us 를 사용하여 만든 Lightbox2를 보면 어떤 것인지 쉽게 이해 된다. 요즘 유행하는 jQuery용 플러그인은 넘쳐난다. 하지만, 개인적으로 prototype이나 jQuery 보다는 dojo를 선호하기 때문에(대부분의 경우엔 별 차이가 없지만, 마이너리티 체질의 똥고집이랄까...) dojo로 Lightbox를 만들기로 했는데... 웬걸 -.-; dojox.image.Lightbox라는 녀석이..

제목 그대로 심심풀이~ 플래시나 canvas같은 잡다한거(?) 안쓰고 HTML/CSS/자바스크립트만 사용해서 만들었다. 달랑 게임만 만들기엔 심심하기도 하고... 딱히 올려놓을 곳도 없고 해서... 구글 앱엔진을 이용해서 점수를 기록하는 모듈도 만들었다. 돌아가는 모습은 http://iolo.appspot.com/ 에서 볼 수 있고~ 소스 코드는 http://code.google.com/p/iolothebard/ 에서 볼 수 있다~ 심심풀이 코딩이 다 그렇듯... 대충 돌아가기 시작하니까 재미가 없어져서... 얼렁뚱땅 마무리했다. 혹시 관심있는 분이라면~ 이거저것 고쳐보면 재미있을라나?

제목은 거창한데... 내용이 없다. -,.-;;;; 그도 그럴것이... 뜬구름 중의 뜬구름 Web3.0 얘기 아닌가. 사내용으로 만든 자료라 좀 부실하긴 하지만, 웹의 탄생이전 부터 이어져오는 흐름을 정리한다는데 의미를 두고 보면 의외로 볼만할지도...*^^* 현재까지 Web3.0에 대한 논의는 시맨틱 웹, 플랫폼으로써의 웹, 그리고 유비쿼터스 세상으로의 관문으로서의 웹, 세가지 흐름으로 볼 수 있다. 물론 세가지 논의가 서로 간에 밀접한 관련이 있어서 무 자르듯 자를 수는 없겠지만... IMHO, 시맨틱 웹은 내가 이 바닥에서 먹고 살 동안은 "The Dream of Web"으로 남을 것 같다. 유비쿼터스 웹는 돈독이 오른 가전 업체들의 말장난 단계를 벗어나려면 좀 더 시간이 필요할 듯... 가장 현실..

뵑만년만의 포스팅이다. 하나: 둘: 셋: 그리고, 넷: 여기가면 인쇄된 책자를 살 수 있다. 씽크프리 닥스의 임베딩 기능 테스트 삼아... 한번 해 봤음.

원문: http://www.ibm.com/developerworks/library/wa-aj-doh/ 번역: http://www.ibm.com/developerworks/kr/library/wa-aj-doh/ Dojo Objective Harness라니... 참 이름도 잘 짓는다. 원래는 그냥 Dojo Helper의 약자였는데... -.-; 아무튼 자바스크립트 단위테스트로 고민하고 있는 분들이라면 한번 쯤 읽어봐도 좋을 튜토리얼이다. dojo와 무관하게 함수들을 동기/비동기로 테스트할 수 있다. 어느 정도 자동화도 가능하지만, 이 경우엔 rhino를 사용하기 때문에 실제 브라우져에서와 다른 결과가 나올 수 있으므로 그다지 유용하다고 할 수 없다. 대부분의 경우엔 수시로 브라우져를 통해서 테스트를 한번씩 ..

한국 developerWorks에 기고한 번역문 원문: Offline Ajax with Apache Derby 번역: 아파치 더비를 이용한 오프라인 Ajax 자바로 만든 작고 가벼운, 그래서 너무나도 유용한 RDB인 아파치 더비를 "headless 애플릿"으로 실행하여, Ajax를 위한 오프라인 저장소로 사용하는 방법을 설명한다. 그런데... 애플릿 스타트업 타임을 고려하면... 이게 과연 쓸모가 있을지는 의문... 그냥 구글 Gears를 쓰는 편이... -.-;;; 아무튼 그런걸 떠나서 더비를 이렇게 활용하겠다는 아이디어 자체는 대단히 훌륭~ LiveConnect(애플릿과 자바스크립트를 연결하는 기술)를 다시 돌아보는 것도 재미있지만, 이거 조만간 사라질거라는...

한국 developerWorks에 기고한 번역문 원문: Develop AJAX applications like the pros, Part 3: Use DWR, Java, and the Dojo Toolkit to integrate Java and JavaScript 번역: 전문가다운 Ajax 애플리케이션 개발, Part 3: DWR, 자바, Dojo 툴킷을 사용하여 자바와 자바스크립트 통합하기 전형적인 디벨로퍼웍스 스타일의 제목... 원츄! -.-)b~ 제목과는 달리 dojo 얘기는 없다. 대신, 자바 개발자들을 위한 거져 먹는 Ajax! DWR이 있다. 정말~ 쉽고! 정말~ 편하다! 장담하건데... 기존에 자바로 구축된 웹 사이트에 간단한 Ajax를 추가하는 거라면 이 보다 더 좋은 솔루션은 없다. 百..

아싸~ 아기다리고기다러던~~ (이런 개그하지 말랬지~ +-.-)==@ (*..*) 퍼퍽!) *경* Dojo Toolkit 1.2 정식 버전 릴리즈~~ *축* Alex Russell의 뒤를 이어 Pete Higgins가 메인테이너를 맡은 뒤 첫 릴리즈다. 아무튼, 뭐가 달라졌나 볼까나~.~ 새로운 데이터스토어들 dojox.data.JsonRestStore dojox.data.CouchDBRestStore dojox.data.GoogleFeedStor dojox.data.GoogleSearchStore dojox.data.PersevereStore - Perservere... 쓰는 사람이 있구나... -.-; dojox.data.S3Store JsonRestStore는 어디에나 써먹을 수 있을 정도고, 나머..

한국 developerWorks에 기고한 번역문 원문: Ajax overhaul, Part 4: Retrofit existing sites with jQuery and Ajax forms 번역: Ajax로 사이트 전면 개편, Part 4: 기존 사이트를 jQuery와 Ajax forms를 사용하여 개선하기 열화와같은 독자들의 성원에 힘입어 연장 방영 중인 Ajax 오버홀 시리즈~ 4부에서는 앞에서 한번 써 먹었던 jQuery Tabs UI와 jQuery Forms를 사용하여, 예제 애플리케이션인 Customize Me Now의 구매 과정을 마법사 스타일의 UI로 개선한다. 百問而不如一見~