Ajax 오버홀(overhaul), Part 1: Ajax와 jQuery로 기존 사이트 개선하기 (한글)

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 샘플 코드 영어원문  제안 및 의견 피드백

난이도 : 초급

Brian Dillard, RIA 에반젤리스트, Pathfinder Development

2008 년 4 월 15 일

비동기 자바스크립트 + XML(Ajax)로 기존 사이트를 개선하기 연재의 첫 번째 기사에서는 팝업 창과 네비게이션의 막다른 길을 제거하고, 간단한 모달 대화상자로 대체하는 방법을 설명합니다.

Ajax 기술이 대형 상용 웹 응용 프로그램의 모습을 변화시키고 있지만, 다수의 소규모 웹 사이트는 전체 사용자 인터페이스(UI)를 신속하게 재구축할 만한 자원이 없다. 새로운 기능들이 실세계의 인터페이스 문제를 해결하고 사용자 경험을 향상시키는 만큼 비용이 드는 것이 당연하다. 이 글은 팝업 윈도와 네비게이션의 막다른 길을 단순한 모달 윈도로 대체하는 방법을 설명한다. 점진적 향상( progressive enhancement ) 원칙을 통해 고급 UI 기능들이 사이트의 접근성을 방해하지 않고, 웹 표준을 준수할 수 있도록 보장한다.

이 글은 HTML과 CSS를 잘 이해하고 있으며 자바스크립트 프로그래밍과 Ajax에 대한 최소한의 기본적인 내용을 알고 있다는 전제 하에서 작성했다. 예제 응용 프로그램은 클라이언트측 코드만을 사용해 만들었으므로 여기에서 설명한 기술들은 어떤 서버측 프레임워크에도 적용할 수 있다. 예제 사이트를 실행하려면 localhost에서 동작하는 웹 서버가 필요하지만, 아래에 설명된 코드를 따라가면서, 실제로 동작하는 예제를 필자의 웹 서버에서 확인해 볼 수도 있다(링크는 참고자료 를 참조하라).

개념 소개: Ajax로 기존 사이트 개선하기

사용자를 특정 경로로(예를 들어, 제품을 검색해 구매할 때까지) 유도하는 일은 웹의 역사만큼이나 오래 전부터 필요했지만, 사용자가 길을 잃을지도 모른다는 위험은 여전히 고민거리다. 네비게이션 경로가 더 길고 더 복잡할수록 사용자가 떠날 곳도 많아진다. 과정에 관심을 갖도록 가까운 곳에 충분한 정보를 제공해야 한다.

당면 과제 이 기사는 웹 1.0 쇼핑 사이트를 Ajax로 개선하는 과정을 설명한다. 예제 애플리케이션의 "이전"과 "이후"의 소스 코드는 다운로드 에서 받을 수 있다. 실제로 동작하는 두 가지 버전을 필자의 웹 서버( 참고자료 참조)에서 확인할 수 있다. Ajax 기술과 베스트 프랙티스 외에도 점진적 향상 원칙이 사용자 경험을 향상시킬 수 있음을 배울 수 있다. 위키백과의 정의에 따르면 점진적 향상 은 접근성과 의미있는 마크업, 외부 스타일시트와 스크립팅 기술을 강조한 웹 설계 전략이다. 점진적 향상은 모든 사용자가 어떤 브라우저나 인터넷 연결을 사용하는지에 관계없이 웹 페이지의 내용과 기능성에 접근할 수 있으며, 더 넓은 대역폭이나 더 진보된 브라우저 소프트웨어를 사용하는 사용자들을 위해서는 향상된 버전의 페이지를 제공하는, 계층적인 방식으로 웹 기술들을 사용한다.

웹 1.0 세계의 쇼핑 사이트는 검색하고, 그 결과 중에서 선택하고, 구매하는 명쾌한 경로를 제공함으로써 사용자 경험을 능률적으로 만들었다. 사용자가 구매 경로에서 제공하는 것보다 더 자세한 정보를 요구하면, 제품에 대한 자세한 정보나 비교 페이지를 위한 우회 경로를 제공해야 하는데, 문제는 이러한 "옆 길"의 문제는 사용자들이 구매 경로에서 벗어나 구매 과정을 포기할 여지를 준다는 점이다. 또한 사용자가 어떻게 막다른 길에 도달했는지에 대한 정보를 축척해야 하므로 네비게이션 로직에 대한 유지보수도 어렵다.

팝업 윈도가 해결책인 것처럼 보였다. 팝업으로 부가 정보를 제공하면, 정리된 단계별 경로는 메인 윈도에서 방해받지 않고 계속될 수 있다. 그러나 불행히도 팝업 윈도는 혼란스럽고 짜증스럽다. 네비게이션 상의 옆 길을 관리하기는 수월해지지만, 동시에 사용자들이 구매 과정에서 떠나버리게 만들지도 모른다.

다행스럽게도, 오픈 소스 자바스크립트 라이브러리가 옆 길과 팝업을 한 번에 제거할 수 있는 쉬운 방법을 제공한다. 이 기사는 부가 정보를 툴팁, 라이트박스, 모달 윈도에 표시하기 위해 Ajax와 DHTML 기술을 사용하는 방법에 대해 알아본다. 이 기술들은 어떤 페이지든 즉시 끼워 넣을 수 있기 때문에 홈페이지에서 구매까지의 신속한 단계별 경로를 유지할 수 있다.

애플리케이션 소개: Customize Me Now

이 글을 위해 전자 상거래에 초점을 맞춘 Customize Me Now 라는 가상의 쇼핑 애플리케이션을 만들었다. 사용자는 피자, 휴가 패키지, 투자 포트폴리오 같은 다양한 제품을 개인화해 구매할 수 있다. 물론, 실제 세계에서는 이런 분류의 제품들을 같은 사이트에서 팔지 않겠지만, 많은 사이트에서 맞닥뜨리는 복잡하고 현실적인 네비게이션의 요구를 보여준다.

Customize Me Now의 웹 1.0 버전을 보여주고, 웹 2.0 버전으로 개선해 나가는 동안, 한 번의 Ajax 호출만으로 부가적인 정보를 위한 네비게이션 통로를 정리하는 방법을 익히게 될 것이다. 제품을 나열하거나, 설문 조사를 하거나, 서비스 묶음에 서명하거나, 등록 양식을 채우는 등의 모든 과정을 Ajax로 간소화할 수 있다.

기술 소개: Ajax, 툴팁, 모달 윈도, 라이트박스

이제 와서 Ajax를 소개할 필요는 없을 것 같다. 웹 개발 세계에서 어디에나 존재하며 더 이상 특별하지도 않다. 수 년 전부터, 눈치 빠른 프로그래머들은 서버와 통신없이 웹 페이지를 점진적으로 고치기 위해 자바스크립트 코드를 사용하고 있다. 그 당시에는 xmlHttpRequest 객체를 도입한 것뿐이었지만 — 원래는 윈도 인터넷 익스플로러(Windows ® Internet Explorer ® ) 확장이었지만 요즘에는 광범위한 브라우저에서 지원된다 — 지금의 Ajax는 주류가 되었다. 데스크톱 애플리케이션 같은 웹 애플리케이션을 사용할 때마다 실전에서 사용되는 Ajax를 보고 있는 것이다. 이 글에서는 Ajax 프로그래밍 자체를 설명하지 않지만, Ajax 기술을 사용하는 많은 오픈 소스라이브러리를 사용할 것이다.

Ajax UI는 대개 툴팁, 라이트박스, 모달 윈도를 채택한다. 별도의 윈도에서 실행되는 대신, 브라우저의 뷰포트 영역에 표시되는 팝업 화면에 대한 예쁜 이름들이다. 툴팁( Tooltips )은 사용자가 특정 요소 위에 머무를 때 문맥에 맞는 내용을 제공하는 데 쓰는 작은 윈도다. 모달 윈도( Modal windows )는 특정 요소를 클릭할 때 사용되는 더 큰 윈도다. 라이트박스( Lightboxes )는 원래 윈도의 내용과 모달 윈도의 내용을 반투명 오버레이로 분리하는 모달 윈도의 한 종류다. 이 컨테이너들은 숨겨진 DHTML 기술을 사용하는 인라인 내용, Ajax 호출을 통해 서버에서 가져온 새로운 내용, 또는 iframe을 통해 가져온 완전히 분리된 문서 등 다양한 내용으로 채워진다. 유명한 DVD 대여 서비스인 넷픽스(Netflix)에서 이러한 인터페이스 요소들을 실전에서 사용하는 예제를 볼 수 있다.

도구 소개: jQuery, GreyBox, ThickBox, JTip, jQuery forms

Ajax가 주류가 된 2005년 이후로 여러 가지 오픈 소스 자바스크립트 툴킷이 등장했다. 제각기 장점과 단점, 꼼수를 갖고 있지만 가장 멋진 점은 브라우저간의 차이를 적당히 감추고 Ajax, DHTML, 시각 효과를 제공하는 우아한 크로스-브라우저 API다. 구글 웹 툴킷(Google Web Toolkit)처럼 서버측에 자바(Java ™ ) 코드를 사용하여 클라이언트측 자바스크립트 코드를 자동으로 생성하는 몇 가지 솔루션이 있지만, 대부분은 고유한 자바스크립트 라이브러리다.

이 글에서 사용할 jQuery는 2006년에 등장한 이래, 우아한 API와 조신한 자바스크립트(unobtrusive javascript) 철학 덕분에 열광적인 지지를 받고 있다. jQuery를 사용하면 서버 코드나 HTML 마크업, CSS를 거의 바꾸지 않고, Ajax를 사용하지 않은 기존 웹 1.0 사이트를 Ajax를 활용한 웹 2.0 사이트로 바꿀 수 있다. 자바스크립트 코드가 실행 시간에 브라우저 안에서 기존 HTML 요소와 행위를 변형한다. 자바스크립트를 사용할 수 없는 브라우저에서도 마크업들은 여전히 있는 그대로 동작한다. 점진적 향상 원칙을 통해 광범위한 사용자들이 웹 애플리케이션에 접근할 수 있으며 모바일 장치, 장애인을 위한 도우미 소프트웨어, 심지어 10년도 넘은 구닥다리 웹 브라우저도 여전히 여러분의 애플리케이션을 실행할 수 있다.

jQuery를 사용하면 점진적 향상 외에도, 대규모의 활발한 플러그인 개발자 커뮤니티의 힘을 활용할 수 있다. 많은 자바스크립트 툴킷은 가능한 모든 개발자의 요구를 충족시키려고 애쓰지만, jQuery는 기본에 초점을 맞추고 있다. 핵심 라이브러리는 가볍게 유지하지만, 오픈 소스 커뮤니티에 의해 추가 기능이 플러그인으로 제공된다. 이 글에서는 다음 플러그인들을 사용한다.

• ThickBox: Cody Lindley가 개발
• jQuery Forms: jQuery 커뮤니티 공동의 노력
• JTip: Cody Lindley가 개발하고 jQuery 커뮤니티에서 확장
• GreyBox: Amir Salihefendic이 개발

응용 프로그램 이해하기: Customize Me Now 1.0

아래의 절을 통해 Customize Me Now 1.0의 사용자 경험과 소스 코드에 친숙해질 수 있을 것이다.

사용자 경험

그림 1은 Customize Me Now의 결과 페이지와 정보 제공을 위한 팝업 윈도다. 그림을 통해 사이트가 사용자들에 맞춤형 제품들에 대해 얼마나 많은 정보들을 제공하는지를 알 수 있다. 비록 최적의 사용자 경로는 검색과 개별화와 구매까지 명확하지만, 인터페이스는 이 경로에서 몇 가지 우회로를 만들었다. 사이트는 전통적인 팝업 윈도를 사용해 제품과 제품의 선택사항에 대해 상황에 맞는 소량의 정보를 제공한다. Pizza 를 클릭하면 사이트에서 판매하는 피자 제품들에 대한 정보를 제공한다. Cheese 를 클릭하면 선택한 피자에 얹을 수 있는 치즈들에 대한 정보를 제공한다. 심지어 팝업 윈도에서 제조사 웹 사이트로 갈 수도 있다.

사용자가 더 자세한 정보를 얻고자 하면 각 제품의 사진, 기사, 사용자 리뷰 등 훨씬 더 정보가 많은 제품 상세 페이지를 제공한다. 마지막으로 개별 제품을 비교 페이지를 통해 나란히 비교해 볼 수 있다. 모든 자원 간의 네비게이션은 복잡하다. 사용자가 각 제품을 개별화할 필요가 있으므로 간단한 Add to cart 링크를 각 단계마다 제공하기 어렵다. 사용자가 개별화한 다음에 카트에 담도록 유도하지만, 이런 단계들을 뒤집어 기본 선택사항으로 카트에 담은 다음 나중에 개별화할 수도 있다.

그림 2는 Customize Me Now 1.0의 개략적인 사이트 맵이다. 이 그림을 통해 사용자 경로가 얼마나 뒤얽힐 수 있는지 보여준다. 대부분의 화면은 두 개나 세 개의 다른 화면으로 연결된다.

코드

Customize Me Now의 기능적인 데모 코드에는 HTML, CSS, 자바스크립트 코드, 이미지 파일 등 클라이언트측 파일들만 포함되어 있다. 실제라면 분명히 마이크로소프트(Microsoft ® ) ASP.NET이나 자바, 루비 온 레일즈, 장고(Django), PHP 같은 대규모의 서버측 컴포넌트가 필요할 것이다. 완전히 클라이언트측이라는 점이 jQuery의 매력이다. 서버 컴포넌트를 고치지 않고 Ajax 기술을 사용해 사용자 경험을 간소화할 수 있다. 이 기사에서는 구체적인 서버측 코드가 중요하지 않으므로 서버측 코드를 제공하지 않는다. HTML 파일을 열 때마다 PHP 템플릿, JSP(JavaServer Pages ™ ) 파일, 또는 브라우저에 HTML을 보내는 어떤 파일로 대체할 수 있다는 점을 이해하면 된다.

버전 1.0의 소스 코드를 다운로드해 마크업들을 보면 대충 Listing 1과 비슷하다.

                
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Customize Me Now: Search Results</title>
 <link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/>
</head>

<body id="CMN">

 <!--[header goes here]-->

 <div id="main">
   <form method="GET" action="comparison.html">
     <h1>Search Results</h1>
     <div class="buttons">
       <input class="button" type="submit" name="submitTop" id="submitTop"
         value="Compare Selected Products" />
       or <a href="index.html">search again</a>
     </div>      
     <table class="searchResults">
       <thead>
         <tr>
           <th>Product</th>
           <th>Description</th>
           <th>Options</th>
           <th>Compare</th>
           <th>Actions</th>
         </tr>
       </thead>
       <tr>
         <td class="name">
           <a target="productPopup"
           href="productPopup.html?product=A">Pizza</a>
         </td>
         <td class="desc">
           A delicious Italian treat.<br />
           [<a href="detail.html?product=A">full product details</a>]
         </td>
         <td class="options">
           <ul>
             <li>
               <a target="optionsPopup"
               href="optionsPopup.html?product=A">crust</a>
             </li>
             <li>
               <a target="optionsPopup"
               href="optionsPopup.html?product=A">cheese</a>
             </li>
             <li>
               <a target="optionsPopup"
               href="optionsPopup.html?product=A">toppings</a>
             </li>
           </ul>
         </td>
         <td class="action">
           <input type="checkbox" target="productPopup" name="compareA"
           id="compareA" value="true" checked="checked"/>
         </td>
         <td class="action">
           <a class="button" href="customize.html?product=A">customize
           product</a>
           <a class="button" href="cart.html?product=A">add to cart with
           default options</a>
         </td>
       </tr>

       <!--[additional table rows go here]-->

     </table>
     <div>
     <div class="buttons">
       <input class="button" type="submit" name="submitBottom" id="submitBottom"
       value="Compare Selected Products" />
       or <a href="index.html">search again</a>
     </div>
   </form>
 </div>

 <!--[footer goes here]-->

</body>
</html>
			

응용 프로그램 개선하기

Customize Me Now를 2.0 버전으로 개선하는 구체적인 과정은 이 기사 초반에서 설명했고, 연재의 Part 2에서 더 자세하게 다룬다.

jQuery와 플러그인 설치하기

사이트에 Ajax 행위 레이어를 추가하는 첫 단계는 필요한 오픈 소스 라이브러리들을 다운로드하는 것이다. 예제 2.0 응용 프로그램을 다운로드했다면 모든 라이브러리가 포함되어 있다. 다운로드 에서 각 라이브러리의 최신 버전을 직접 받을 수 있다.

다음으로, jQuery와 forms 플러그인을 위해 /js 디렉터리를 만든다. GreyBox, ThickBox, JTip은 각각 고유한 디렉터리가 필요하다. 이미지와 CSS 파일, 여러 개의 자바스크립트 라이브러리가 묶여있고, 이들은 특정한 디렉터리 구조를 가정해 만들어져 있다. CSS와 .js 파일을 연결할 때, GreayBox의 올바른 루트 디렉터리를 지정하기 위해 짧은 스크립트 블록을 포함해야 한다. 절대 디렉터리 경로로 지정해야 하므로 코드에 맞게 이 값을 변경해야 할 것이다. 이 과정을 마친 HTML 파일의 헤더 요소는 Listing 2에 나와 있다.

                
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Customize Me Now: Shopping Cart</title>

 <!--customizemenow assets-->
 <link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/>

 <!--jquery assets-->
 <script type="text/javascript" src="../js/jquery-1.2.1.min.js"></script>
 <script type="text/javascript" src="../js/jquery.form.js"></script>

 <!--thickbox assets-->
 <script type="text/javascript" src="../thickbox/thickbox.js"></script>
 <link rel="stylesheet" type="text/css" href="../thickbox/thickbox.css" />

 <!--jtip assets-->
 <script type="text/javascript" src="../jtip/scripts/jtip.js"></script>
 <link rel="stylesheet" type="text/css" href="../jtip/css/jtip.css" />

 <!--greybox assets-->
 <script type="text/javascript">
     /*this needs to be a non-relative reference*/
     var GB_ROOT_DIR = "/customizemenow/2/0/greybox/";
 </script>
 <script type="text/javascript" src="../greybox/AJS.js"></script>
 <script type="text/javascript" src="../greybox/AJS_fx.js"></script>
 <script type="text/javascript" src="../greybox/gb_scripts.js"></script>
 <link rel="stylesheet" type="text/css" href="../greybox/gb_styles.css" />

</head>
			

ThickBox와 jQuery forms를 사용하여 2차 링크를 라이트박스로 변환하기

jQuery와 플러그인은 점진적 향상의 철학을 따르므로 Ajax 기능성을 추가하기 위해 거의 아무런 커스텀 자바스크립트 코드도 필요없다. 대신, 기존 HTML 태그에 특정한 속성들을 추가해야 한다. 자바스크립트 라이브러리가 문서 객체 모델(Document Object Model: DOM)을 파싱할 때 이러한 특수 속성들을 찾고, 해당 요소에 적절한 행위를 추가한다. jQuery가 마크업이 완전히 렌더링된 다음 DOM을 자동으로 파싱하기 때문에 이러한 코딩 스타일을 사용할 수 있다. jQuery 플러그인이 이면에서 하는 동작들을 살펴보면 모든 이벤트 모델을 jQuery 코어 객체와 ready 메서드에 위임하는 것을 확인할 수 있다.

이제 필요한 배경 지식도 익혔으니 jQuery를 사용해 네비게이션을 간소화할 시간이다. 주 구매 경로의 일부가 아닌 페이지들을 일반적인 페이지에서 라이트박스 페이지로 변환하기 위해 ThickBox를 사용한다. 사용자가 "경로"를 떠나지 않고 어디서나 제품의 상세 정보를 볼 수 있도록 제품 상세 페이지부터 시작해보자.

ThickBox는 사용하기 쉽다. 관련된 각 링크에 몇 가지 특수 속성만 추가하면 된다.

• thickbox 의 class 속성 . 이 특별한 class 속성은 ThickBox가 이 요소를 주목해야 함을 표시하는 역할을 한다.
• 몇 가지 쿼리스트링(querystring) 값:
  • KeepThis=true 와 TB_iframe=true : 이 값들은 ThickBox가 이 링크를 iframe을 사용하는 라이트박스로 표시하도록 지시한다.
  • height=400 : ThickBox 창의 높이를 픽셀로 지정. 예제에서는 400을 사용했지만 임의의 값을 사용할 수 있다.
  • width=600 : ThickBox 창의 너비를 픽셀로 지정. 예제에서는 600을 사용했지만 임의의 값을 사용할 수 있다.

이미 제품 상세 페이지로 제품 코드를 전달하기 위해 쿼리스트링을 사용하고 있으므로 ThickBox에 관련된 속성을 URL에 앰퍼샌드(&)를 사용해 추가하기만 하면 된다. 제품 상세 링크에 이 속성들을 추가하고 나면, 각 팝업 링크는 Listing 3과 비슷하게 될 것이다.

                
<a
href="detail.html?product=A&KeepThis=true&TB_iframe=true&height=400&width=600"
class="thickbox">product details</a>
			

제품 상세 페이지를 처리했으면 이제 비교 페이지도 개선해보자. 이 페이지로 가려면 비교할 제품들을 체크 박스로 선택하고 폼을 전송(submit)해야 한다. ThickBox를 사용해 폼을 전송한 결과를 표시하려면 jQuery Forms의 도움이 필요하다. jQuery Froms는 ajaxForm이라는 객체에 몇 가지 편리한 메서드와 이벤트 훅을 감싸놓은 라이브러리다. ajaxForm 과 약간의 자바스크립트 코드를 사용하면, ThickBox의 tb_show 메서드를 직접 호출할 수 있다. 이를 위해 result.html의 헤더 영역에 Listing 4의 스크립트 블록을 추가해야 한다.

                
<script type="text/javascript">

/*create a thickbox for our form submittal*/
//when the document is ready
$(document).ready(function() { 
 //wrap form#comparison in an ajaxForm object
   $('#comparison').ajaxForm({
   //intercept the submit event with a callback
   beforeSubmit:  function(formData, jqForm, options) {
     //serialize form data; append to the form action; tack on ThickBox params
     var URL = jqForm[0].action + "?" + $.param(formData);
     URL += "&KeepThis=true&TB_iframe=true&height=400&width=600";
     //call ThickBox directly
     var caption = null;
     var imageGroup = false
     tb_show(caption,URL,imageGroup);
     //cancel the form submission by returning false
       return false;
   }
 }); 
});

</script>
			

이 코드 블록은 jQuery API의 단순 명료함을 잘 보여준다. 단지 몇 줄의 코드만으로, 일반적인 HTML 폼의 전송을 가로채 커스텀 자바스크립트 코드를 실행하도록 할 수 있다. 이 기술을 사용하여 폼이 제출되기 전에 검증 로직을 실행하거나, 폼이 전송된 이후에 커스텀 이벤트가 발생하도록 할 수 있다. 예제에서는 제출한 폼을 보관해두고, 폼을 전송하는 HTTP 요청을 "속여" 수동으로 target을 ThickBox 창으로 재지정한다.

사용자는 이면에서 이루어지는 동작들을 알 필요가 없으며, 단지 폼을 제출하고 모달 윈도에서 표시되는 결과를 보면 된다. 사용자는 비교 페이지를 살펴 본 다음, ThickBox 창을 닫고 구매하는 제품을 개별화하는 원래 화면으로 돌아갈 수 있다.

ThickBox를 사용한 제품 상세와 비교 페이지의 유일한 문제점은 페이지가 ThickBox 창에 비해 너무 넓다는 점이다. ThickBox의 너비와 높이를 바꿀 수도 있겠지만, 더 작은 화면을 갖고 있는 사용자들은 어떻게 해야 할까? ThickBox가 뷰포트의 모서리를 넘어서 창 전체를 덮어버리지 않도록, details.html과 comparison.html의 스타일을 바꾸기 위해 body 태그에 inline 의 class 를 추가하고 customizemenow.css 에 Listing 5에 나와있는 CSS 선언들을 추가하자.

                
#CMN #main.inline {
 width: 600px;
}
			

모달 윈도 구현의 마지막 단계는 제품 상세와 비교 페이지에서 사용자와 상호작용하면 안 되는 요소들을 제거하는 일이다. 이 페이지들은 순수한 정보 페이지이므로 동작을 위한 링크나 버튼이 필요없고, 네비게이션이나 다른 장식도 필요 없다.

이 작업을 수행하는 방법은 몇 가지가 있다. 이 요소들을 페이지에서 제거해도 되겠지만 점진적 향상 전략이 무너진다. 자바스크립트를 사용할 수 없는 사용자들은 이 페이지에서 빠져나가지 못하게 되고, 결국 구매 과정을 계속 진행할 수 없게 된다. 쿼리스트링 매개변수를 추가해 서버측 프레임워크에서 다른 템플릿을 사용해 이 페이지를 표시하도록 할 수도 있겠지만, 실제로는 그렇게 하지 않을 것이다. 이러한 문제를 다루는 더 좋은 방법은, 구닥다리 <noscript> 태그를 사용하여 클라이언트측 코드만으로 처리하는 것이다. <noscript> 태그로 둘러싸인 요소들은 자바스크립트를 지원하지 않는 브라우저에서만 표시된다. 원하는 결과가 바로 이런 것이다.

Listing 6이 그 결과로 만들어진 머리말과 꼬리말을 위한 HTML이다.

                
<noscript>
 <div id="footer" class="nav">
   <<ul>
     <li><a href="index.html">search&/a></li>
     <li><a href="results.html">results</a></li>
     <li><a href="detail.html">details</a></li>
     <li><a href="comparison.html">compare</a></li>
     <li><a href="customize.html">customize</a></li>
     <li><a href="cart.html">cart</a></li>
     <li><a href="checkout.html">checkout</a></li>
     <li class="last"><a href="confirm.html">confirmation</a></li>
   </ul>
 </div>
</noscript>
			

Listing 7이 제품 상세 페이지의 주 내용을 위한 <div> 의 HTML이다.

                
<div id="main" class="inline">

 <form method="GET" action="customize.html">
   <input type="hidden" name="product" id="product" value="A" />

   <h1>Pizza: Product Details</h1>

   <noscript>
     <div class="buttons">
       <input class="button" type="submit" name="submitTop" id="submitTop"
       value="Customize Now" />
       or <a href="cart.html?product=A">add to cart with default
       options</a>
     </div>
   </noscript>

   <!--[content goes here]-->

   <noscript>
     <div class="buttons">
       <input class="button" type="submit" name="submitBottom" id="submitBottom"
       value="Customize Now" />
       or <a href="cart.html">add to cart with default options</a>
     </div>
   </noscript>

 </form>

</div>
			

Listing 8이 비교 페이지의 주 내용을 위한 <div> HTML이다.

                
<div id="main" class="inline">

 <h1>Product Comparison</h1>

 <table class="productComparison">
   <thead>
     <tr>
       <th>Product</th>
       <th>Pros</th>
       <th>Cons</th>
       <noscript>
         <th>Actions</th>
       </noscript>
     </tr>
   </thead>
   <tr>
     <td class="name">
       <a class="jTip" name="About Pizza" id="pizza" target="productPopup"
       href="productPopup.html?product=A">Pizza</a>
     </td>
     <td class="pros">
       <ul>
         <li>Great flavor.</li>
         <li>Low cost.</li>
         <li>Fun with friends.</li>
       </ul>
     </td>
     <td class="cons">
       <ul>
         <li>Can make you fat.</li>
         <li>Not very nutritious.</li>
       </ul>
     </td>
     <noscript>
       <td class="action">
         <a class="button" href="customize.html?product=A">customize
         product</a>
         <a class="button" href="cart.html?product=A">add to cart with
         default options</a>
       </td>
     </noscript>
   </tr>

   <!--[additional table rows here]-->

 </table>

</div>
			

developerWorks Ajax 리소스 센터 Ajax 애플리케이션을 개발하는 데 필요한 무료 도구, 코드, 정보가 필요하다면 Ajax 리소스 센터 를 찾아보자. AJax 전문가인 jack Herrington이 운영하는 활발한 Ajax 커뮤니티 포럼 에서 바로 지금 여러분이 원하는 해답을 알고 있는 이들과 만날 수 있다.

Customize Me Now 버전 2.0의 검색 결과 페이지를 보고, 제품 상세나 비교 페이지를 실행해 보면, 이 글을 통해 개선한 결과를 확인할 수 있다. 그림 3에 그 결과 화면이 나와 있다.

요약

몇 가지 Ajax 기술과 베스트 프랙티스를 다룬 이 글 만해도 상당한 분량이지만 이제 시작에 불과하다. 이 연재의 Part 2에서는 네비게이션을 더 다듬기 위해 팝업 링크를 JTip을 사용한 툴팁으로 바꾸고, 사이트를 빠져나가는 링크를 GreyBox를 사용한 라이트박스로 바꿀 것이다. 마지막으로 예제 애플리케이션의 이면의 핵심적인 개념을 다시 살펴보고, 그러한 개념이 사용자 경험을 어떻게 향상시키는지 확인해 보겠다. 먼저 해보고 싶다면, Customize Me Now 버전 2.0의 소스 코드를 좀 더 파고들고, 브라우저에서 실행해볼 수 있다.

위로

다운로드 하십시오

	다운로드 방식에 대한 정보

더 많은 다운로드

• 코드 샘플： jQuery¹
  
  
• 코드 샘플： JTip²
  
  
• 코드 샘플： ThickBox³
  
  
• 코드 샘플： jQuery Forms⁴
  
  
• 코드 샘플： GreyBox⁵
  

Notes

1. Ajax 기능을 위한 기초를 제공하는 오픈 소스 Ajax 툴킷. 이 글을 쓰는 시점에서 현재 버전은 1.2.1이다.
2. 정보 위주의 팝업을 간단한 크로스-브라우저 툴팁으로 바꿔주는 jQuery 플러그인.
3. 제품 상세나 비교 페이지를 모달 윈도에 불러올 수 있도록 해주는 플러그인. 예제에서는 3.1 버전을 사용했다.
4. 비교 페이지가 몇 가지 매개변수를 요구하기 때문에, ThickBox를 사용하려면 약간의 자바스크립트 코드를 작성해야 하지만, 다행스럽게도 이 유틸리티가 대부분의 작업을 처리해준다.
5. 제조사 홈페이지로 가는 링크를 간단하고, 멋진 라이트박스로 처리해주는 jQuery 플러그인. 예제에서는 5.53 버전을 사용했다.

참고자료

• 실제로 동작하는 Customize Me Now 1.0 을 필자의 웹 사이트에서 확인할 수 있다.
  
  
• 수정을 마치고 실제로 동작하는 Customize Me Now 2.0 을 필자의 웹 사이트에서 확인할 수 있다.
  
  
• jQuery 웹 사이트에서 jQuery에 대한 모든 것과 추가적인 플러그인에 대해 배울 수 있다.
  
  
• Learning jQuery 웹 사이트에서 jQuery 커뮤니티에 참여하고 튜토리얼과 포럼을 이용할 수 있다.
  
  
• 한국 developerWorks 웹 개발 존 은 웹 2.0 개발을 위한 도구와 정보로 가득하다.
  
  
• developerWorks Ajax 리소스 센터 는 Ajax에 대한 방대한 자료와 지금 당장 Ajax 애플리케이션을 개발하는 데 유용한 자료들을 보유하고 있다.
  
  
• " jQuery로 Ajax 개발을 단순화 하기 (한글) "(Jesse Skinner, 한국 developerWorks, 2007년 9월 4일)를 읽으면 jQuery의 철학과 기능들, 공통적인 Ajax 작업을 수행하는 방법들, 그리고 플러그인을 통해 jQuery를 확장하는 방법들을 배울 수 있다.
  
  
• " Ajax와 XML: 라이트박스(lightbox)용 Ajax "(Jack Herrington, 한국 developerWorks, 2007년 11월 6일): Prototype 자바스크립트 라이브러리를 사용하여 라이트박스와 툴팁을 구현하는 방법을 알려준다.
  
  
• jQuery를 시작하려면 Learning jQuery 를 읽어보자.
  
  
• jQuery in Action 에서 jQuery에 대한 추가적인 도움을 받을 수 있다.
  
  
• jQuery Reference Guide 에서 더 일반적인 jQuery 참고자료를 찾을 수 있다.
  
  
• Brian Dillard의 블로그 Agile Ajax 에서 jQuery와 다른 UI 관련 주제들을 찾을 수 있다.
  
  
• developerWorks 기술 행사와 웹 캐스트
  
  
• 기술 서점 에서 이 주제 또는 다른 기술적인 주제에 대한 책들을 찾아보자.

• developerWorks 블로그 와 developerWorks 커뮤니티에 참여해 보자.
  
  

필자소개

		Brian J. Dillard는 12년 동안 웹 개발자로 일하면서 Orbitz Worldwide, Reflect True Custom Beauty, Archipelago LLC, United Airlines 같은 다양한 회사를 위해 풍부한 사용자 인터페이스를 구축했다. 현재 시카코에 위치한 Pathfinder Development에서 RIA 에반젤리스트로 일하면서, 다양한 고객을 위한 리치 인터넷 애플리케이션을 구축하고, 오픈 소스 프로젝트에 참여하고, Agile Ajax 블로그에 기여하고 있다. 수천 개 웹 사이트에서 실무에 사용되는 Ajax 방문기록 및 북마크 라이브러리인 Really Simple History 프로젝트를 이끌고 있다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us