Ajax 오버홀, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기

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

난이도 : 중급

Brian Dillard, VP, Ajax 개발, Pathfinder Development

2008 년 6 월 17 일

Ajax 기술이 대형 상용 웹 애플리케이션의 모습을 변화시키고 있지만, 다수의 소규모 웹 사이트는 전체 사용자 인터페이스(UI)를 신속하게 재구축할만한 자원이 없습니다. 새로운 기능들이 실세계의 인터페이스 문제를 해결하고 사용자 경험을 향상시키는 만큼 비용이 드는 것이 당연합니다. 이 연재에서는, 오픈 소스 클라이언트 라이브러를 사용하여 UI를 지속적으로 현대화하는 방법을 설명합니다. 이번 회에는 단순한 라이트박스나 툴팁 기술을 사용하여 팝업 창과 네비게이션상의 막다른 길을 제거하는 방법을 배웁니다. 점진적 향상(progressive enhancement) 원칙을 통해, 고급 UI 기능들이 사이트 접근성을 방해하지 않고, 웹 표준을 준수할 수 있도록 보장합니다.

기사 소개

이 기사는 Ajax 기술을 사용하여 웹 1.0 쇼핑 사이트를 단계적으로 개선하고 있다. 개선하기 전후의 예제 애플리케이션을 다운로드할 수 있으며, 필자의 웹 서버에서 두 버전이 실제로 동작하는 모습도 확인할 수 있다. Ajax 기술과 베스트 프랙티스와 함께, 점진적 향상(progressive enhancement) 원칙을 통해 Ajax가 사용자 경험을 향상시키는 방법도 배우게 될 것이다.

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

위로

"Ajax 오버홀, Part 1" 복습

이 연재의 Part 1에서는 예제 응용 프로그램인 Customize Me Now를 소개했고, 웹 1.0 버전을 Ajax를 활용한 웹 2.0 버전으로 개선하는 작업을 시작했다. 그렇게 해야만 하는 사업적인 그리고 사용성 측면의 이유에 대해서도 다루었다. 점진적 향상(progressive enhancement)을 정의하고 그 원칙들이 어떻게 사용자 경험을 향상시키는지도 알아보았다. jQuery 자바스크립트 프레임워크와 ThickBox, jQuery Forms, jTip, GreyBox 같은 플러그인 등의 오픈 소스 도구를 설치하는 방법도 다루었다. ThickBox와 jQuery Forms를 사용하여 네비게이션상의 샛길들을 모달 대화상자로 바꿈으로써 사용자의 흐름을 간소화했다. 그러나 아직 끝난 게 아니다. 이제부터 jTip과 GreyBox를 사용하여 사이트를 개선하는 작업을 계속할 것이다. 끝나고 나면, 개선하기 전후의 예제 응용 프로그램을 다시 보면서 무엇이 개선되었는지를 확인할 수 있을 것이다.

developerWorks Ajax 리소스 센터 Ajax 리소스 센터에서 Ajax 프로그래밍 모델과 기사, 튜토리얼, 토론 게시판, 블로그, 위키, 행사, 새소식 등을 포함한 정보를 한 자리에서 볼 수 있다. 무슨 일이 생기면 여기에서 다룬다.

팝업 윈도를 JTip을 사용하여 툴팁으로 바꾸기

Part 1의 모달 대화상자 구현에 대해 복습했으면, 모든 팝업 창을 jTIP을 사용한 툴팁으로 바꿈으로써 네비게이션을 계속 개선해 나가자. ThickBox와 마찬가지로 jTip은 구현하기 쉽다. 변환하고 싶은 각 링크에 다음 속성을 추가하면 된다.

• class 속성에 "jTip"을 지정한다. 이 값은 jTip의 DOM(Document Object Model) 파싱 루틴에게 변환할 링크를 알려주는 고유한 표시(magic word)다. 링크가 이미 class 속성을 갖고 있다면, "jTip"을 추가적인 클래스로 덧붙이면 된다.
• id 속성에 유일한 값을 지정해야, jTip이 각 링크에 대한 객체 참조를 유지할 수 있다. id는 유일하기만 하면 어떤 값을 사용하든 상관없다.
• name 속성은 jTip이 툴팁 내부의 헤더를 표시할 때 사용한다. 어떤 값이든 상관없고, 속성이 존재하기만 하면 된다. 헤더를 표시하고 싶지 않으면 빈 문자열을 지정하면 된다.

마크업에 이 속성들을 추가하고 나면, 각 팝업 링크가 Listing 1과 비슷하게 보일 것이다.

                

<a class="jTip" name="About Pizza" id="pizza" target="productPopup"
href="productPopup.html?product=A">Pizza</a>

	    

이제 CSS를 몇 군데 손질해야 한다. Customize Me Now 1.0에 포함된 CSS 파일은 대부분의 링크를 밑줄이 쳐진 빨간색 텍스트로 표시하고, 마우스 커서를 올려놓으면(hover) 색조를 바꾸도록 하고 있다. 사용자는 밑줄이 쳐진 링크는 클릭할 수 있을 것이라고 기대한다. 그러나 jTip 링크는 조금 다르다. 툴팁은 사용자가 마우스 커서를 올려놓기만 하면 바로 활성화된다. 그러므로 나머지 링크들과는 조금 다르지만, 여전히 충분히 상호작용을 유도할 수 있는 다른 스타일을 지정해야 한다. 빨간 색은 유지하고, 밑줄과 호버 상태는 제거하자. 덧붙여 스크롤바가 생기지 않도록 툴팁 내용의 너비를 제어하는 새로운 CSS를 추가하자. 이 CSS 스타일은 jTip이 툴팁들을 id 속성이 "JT"인 div로 감싼다는 사실에 근거하고 있다. 마지막으로, 툴팁에서 헤드라인을 숨기기 위한 스타일도 추가하자; 이렇게 하면 jTip이 name 속성으로부터 자동으로 생성한 헤더를 사용할 수 있다.

                

/*툴팁 링크의 스타일 변경*/
#CMN a.jTip {
 text-decoration: none;
 color: #930;
}
/*jTip이 표시할 페이지의 너비를 줄임*/
#JT #main.popup {
 width: 200px;
 padding: 4px;
}
/*jTip이 헤드라인을 표시하지 않도록 함*/
#JT #main.popup h1 {
 display: none;
}

		

웹 브라우저에 2.0 버전의 검색 결과 페이지를 열고 제품이나 제품 선택사항의 이름 위에 마우스 커서를 올려놓으면 그림 1과 같이 jTip이 실제로 동작하는 모습을 볼 수 있다.

사이트 밖으로 나가는 링크를 GreyBox를 사용하여 라이트박스로 바꾸기

네비게이션의 샛길들을 제거했고, Customize Me Now 2.0이 모습을 갖추기 시작했다. 이제 사이트 밖으로 나가는 링크들을 처리할 차례다. 검색 결과 페이지는 여전히 제조사의 웹 사이트로 가는 팝업 링크로 되어 있다. jTip으로 대체한 팝업 창들과 달리, 이 링크들은 사용자에게 제어권이 없는 상태로 완전한 기능을 갖춘 웹 사이트로 간다. 툴팁으로 표시하기에는 너무 크고, 모달 대화상자로 표시하기엔 응용 프로그램의 나머지 부분과 너무 다르다. 그래서 GreyBox가 등장한다.

다재다능한 ThickBox는 iframe 창, Ajax 데이터, 이미지 슬라이드쇼, 그리고 여러 유형의 내용을 다룰 수 있었지만, GreyBox는 한 가지 목적을 위해 간소화되었다. 현재 사이트를 반투명 중첩 창으로 덮고, 그 위에 다른 웹 사이트를 열도록 만들어졌다. 라이트박스와 모달 대화상자의 차이는 미묘하지만 보기에는 멋지다. ThickBox를 사용해도 되겠지만, 그렇게 하면 두 사이트를 명확하게 구분해주지 못한다. 사용자에게 지금 다른 사이트를 보고 있다는 사실을 알 수 있도록 해야 한다.

링크를 GreyBox로 만드는 과정은 이제 익숙할 것이다. 단순히 다음 속성들을 링크에 추가하면 된다.

• title: GreyBox 중첩 창의 제목을 지정한다.
• rel: 거의 쓰이지 않는 HTML 속성을 추가해 값을 "gb_page_fs[]"로 지정한다. 다시 말하지만, 이 속성은 GreyBox가 인식하는 특별한 값이다.

사이트 밖으로 나가는 링크들에 이 속성들을 추가하고 나면, 각 팝업 링크는 Listing 3과 비슷하게 될 것이다(물론 실제로 구글이 피자를 제조할 일은 없겠지만).

                

<a target="_new" href="http://www.google.com" title="Let's Pretend Google Is
Our Product's Manufacturer" rel="gb_page_fs[]">manufacturer's website</a>

		

다시 한번, 브라우저에 Customize Me Now 2.0의 검색 결과 페이지를 열고 제조사 웹 사이트로 가는 링크를 클릭하면 실제로 동작하는 GreyBox를 볼 수 있다(그림 2).

우리가 얻은 것은 무엇인가?

이제 개선을 마쳤다. 하지만 Ajax 오버홀이 Customize Me Now를 어떻게 바꾸었고, 또 무엇을 얻었을까?

향상된 사용자 경험

바뀐 내용이 가져다 준 이익을 이해하려면, 기존 1.0 버전의 사이트 맵(그림 3)을 보자.

이제 개선한 후의 2.0 버전의 사이트 맵(그림 4)을 보자. 검색에서 구매까지 일직선의 네비게이션 경로를 제공한다. 이것은 사이트의 소유주가 구매를 늘리고 사용자에게 편리한 절차를 제공하기 위해 사용하는 고전적인 깔때기(funnel) 패러다임이다. 접근할 수 있는 모든 정보는 똑같지만, 부가적인 데이터들은 사용자들이 문맥에서 벗어나지 않도록 대신 팝업 창으로 표시된다.

점진적 향상

자바스크립트 반대파들과의 마찰없이 응용 프로그램을 개선했다. 브라우저가 자바스크립트를 실행하지 않도록 설정해 놓고 2.0 사이트에 접속해보면 바로 Customize Me Now 1.0과 거의 동일하게 동작한다는 사실을 확인할 수 있다. 몇몇 링크가 조금 다르게 보이긴 하지만, 동작은 같다.

우리가 빼먹은 것은 무엇인가?

Customize Me Now 1.0과 2.0 사이에는 여러 변화가 있었지만 아직 개선해야 할 부분이 많다.

Ajax의 고전적인 기능성

툴팁과 모달 대화상자가 전통적인 Ajax 호출이 아니라는 점을 알아챘을 것이다. 여기서는 완전한 HTML 문서를 불러왔지만, 전형적인 Ajax에서는 XHTML의 작은 조각, XML 또는 JSON(JavaScript Serialized Object Notation)을 불러오는 것이 일반적이다. ThickBox와 jTip은 이러한 더 일반적인 형식의 Ajax를 지원한다. 그러나 완전한 문서를 불러옴으로써, 각 페이지의 Ajax와 비-Ajax 버전에 같은 URL을 사용할 수 있었다. 점진적 향상이라는 목표를 놓고 보면, 이게 가장 쉬운 길이다. 전통적인 Ajax에서는, 서버 측의 템플릿 프레임워크를 변경해야 할 것이다. 또 서버가 전체 페이지와 각 페이지의 내용만 보내는 두 가지 버전을 제공하므로 자바스크립트에도 추가 작업이 필요할 것이다. jQuery 덕분에, 그렇게 많은 코드가 필요하진 않지만, 이 클라이언트 측 예제에서는 필요가 없다.

보안 측면

Ajax 개발에서 이 예제가 전혀 다루지 않은 한 측면이 있다. 바로 보안이다. 웹 응용 프로그램 보안은 매우 광범위한 주제이며 이 기사의 범위를 넘어선다. 어떻게 보면, 클라이언트 측 코드에 초점을 맞추다 보니 이 예제에서는 피해 갈 수 있었다. 보안 측면에서 서버에 구현해야 할 것이 많다. 말하자면, 기술 스택의 각 단계별 개발자들은 전체 응용 프로그램의 보안에 대해 개별적으로 책임을 져야만 한다. 자바스크립트 코드, CSS, 마크업의 취약점에 대한 악의적인 공격이 있으므로 프론트엔드 개발자들도 예외가 아니다. 이 주제에 대한 더 자세한 내용은 참고자료에서 볼 수 있다.

이제 어디로 가야 하나?

커스터마이징 작업을 마무리했고, 응용 프로그램은 더 많은 것을 할 수 있게 되었다. 추가적인 자바스크립트와 CSS 조정을 통해 개선할 수 있는 부분이 몇 가지 있다.

• 커스텀 CSS를 사용해 사이트의 룩앤필과 더 잘 어울리도록 jTip, ThickBox, GreyBox 대화상자를 꾸밀 수 있다.
• jQuery의 다양한 시각 효과 플러그인를 사용하면 jTip과 ThickBox에 시각적인 전환 효과를 추가할 수 있다. 대화상자를 열거나 닫을 때 dissolve, telescope, pop 같은 효과를 줄 수 있다.
• 제품 상세 내용을 개별 컴포넌트로 나누고 각 내용 유형별로 링크를 분리할 수 있다. 예를 들어 사용자 리뷰, 이미지 갤러리 등이 있다.
• 구매 추천(cross-sell)을 통해 확인 페이지를 개선할 수 있다. 지금 당장은 상세 주문 정보를 표시하고 있지만, 이러한 것들을 ThickBox 창을 통해 숨기고, 더 유용한 정보를 위한 공간으로 활용할 수 있다.

결론: Ajax 를 사용하되, 남용하지 말자

응용 프로그램에 Ajax를 추가하다 보면, Ajax가 만병통치약처럼 생각될 수 있지만 그렇지 않다.

Customize Me Now에서는 안에 표시되는 내용이 간단한 스크롤 인터페이스를 통해 다룰 수 있는 수준이어서 모달 대화상자와 툴팁이 효과적이었지만, 상당수의 페이지는 모달 대화상자 안에서는 의미가 없다. 페이지가 복잡한 동적 HTML(DHTML) 탭이나 상호작용이 필요한 복잡한 UI 위젯을 포함하고 있다면, 그냥 별도 페이지로 남겨두는 편이 낫다. 사용자 경험에 대한 충분한 고려 없이 Ajax 기능들만 겹겹이 쌓아놓고 싶지는 않을 것이다.

마찬가지로, 절차에 필요한 페이지가 아닌 정보 위주 페이지의 경우에는 ThickBox가 해결책이 될 수 있다. 맞춤형 주문(customization) 페이지를 ThickBox 창 안에 넣고 검색 결과 페이지에서 표시되도록 할 수 있을 것이다. 그러나 사용자들이 어떻게 그러한 인터페이스를 사용할 수 있을까? 그리고 어떻게 구현할 수 있을까? 사용자가 ThickBox 안에서 제품을 커스터마이즈하고 확인을 클릭했다면, 쇼핑 카트가 같은 ThickBox 창 안에 표시되어야 할까? 아니면 밑에 깔린 페이지를 동적으로 업데이트해야 할까? 더 중요한 문제는, 사용자가 커스터마이즈하던 중이었다는 것을 잊어버리지 않을까?

고급 Ajax 응용 프로그램은 한 화면에서 풍부한 상호작용을 제공할 수 있다. 그러나 그러한 응용 프로그램은 밑바닥부터 구축된 것이다. 그렇게 하려면 계획, 정보 아키텍처, 그리고 사용자 경험을 주의깊게 설계해야 한다. 기존 응용 프로그램을 개선할 때는 종종 모자라는 것이 넘치는 것보다 낫다. 이 연습의 목표는 전통적인 웹 사이트에 약간의 Ajax 마법을 추가하는 것이었다. 완전한 Ajax 기반 인터페이스를 원한다면, 밑바닥에서 시작해야 할 것이다.

위로

다운로드 하십시오

	다운로드 방식에 대한 정보

더 많은 다운로드

• 데모： Customize Me Now 1.0¹
  
  
• 데모： Customize Me Now 2.0²
  

Notes

1. 필자의 웹 사이트에서 실제로 동작하는 응용 프로그램을 볼 수 있다.
2. 필자의 웹 사이트에서 모든 개선이 끝난 새 버전의 응용 프로그램을 볼 수 있다.

참고자료

• Learning jQuery 웹 사이트에서 jQuery 커뮤니티에 참여하고 튜토리얼과 포럼을 이용할 수 있다.
  
  
• Visual jQuery 웹 사이트에서 jQuery API를 배울 수 있다.
  
  
• jQuery로 Ajax 개발을 단순화 하기"(Jesse Skinner, 한국 developerWorks, 2007년 9월 4일) 같은 기사들을 통해 계속해서 Ajax를 배울 수 있다.
  
  
• "Ajax와 XML: 라이트박스(lightbox)용 Ajax"(Jack D Herrington, 한국 developerWorks, 2007년 11월 6일) Prototype 자바스크립트 라이브러리를 사용하여 라이트박스와 툴팁을 구현하는 방법을 알려준다.
  
  
• jQuery를 시작하려면 jQuery 입문 (PACKT Publishing, 2007년 7월)에서 도움을 받을 수 있다.
  
  
• jQuery in Action (Manning Publication Co., 2008년 2월)에서 jQuery에 대한 추가적인 도움을 받을 수 있다.
  
  
• jQuery 참조 가이드 (PACKT Publishing, 2007년 7월)에서 더 일반적인 jQuery 참고자료를 찾을 수 있다.
  
  
• Brian Dillard의 블로그 애자일 Ajax에서 jQuery와 기타 UI 관련 주제들을 찾을 수 있다.
  
  
• Billy Hoffman과 Bryan Sullivan이 최근에 쓴 Ajax Security (Addison Wesley Professional, 2007년 12월)는 Ajax 응용 프로그램의 보안에 관한 베스트 프랙티스를 철저히 다룬다.
  
  
• 기술 서점에서 이 주제 또는 다른 기술적인 주제에 대한 책들을 찾아보자.
  
  
• 한국 developerWorks 웹 개발 존은 웹 2.0 개발을 위한 도구와 정보로 가득하다.
  
  
• developerWorks Ajax 리소스 센터는 방대한 Ajax 문서들과 Ajax 응용 프로그램 개발에 필요한 유용한 참고자료들로 가득하다.
  
  

• jQuery 웹 사이트에서 jQuery에 대한 모든 정보와 추가 플러그인을 찾을 수 있다. 글을 쓰는 시점에서 현재 버전은 1.2.1이다.
  
  
• jTip 플러그인을 사용하면 정보 위주의 팝업 창을 단순하고 모든 브라우저에서 잘 동작하는 툴팁으로 바꿀 수 있다.
  
  
• ThickBox 플러그인을 사용하면 제품 상세 정보나 비교 페이지 같은 것을 모달 대화상자 안에 표시할 수 있다. 이 기사의 예제에서는 3.1 버전을 사용했다.
  
  
• 이 기사의 예제 응용 프로그램에서는 비교 페이지가 몇 가지 폼 매개변수를 요구했기 때문에, ThickBox를 표시하기 위해 커스텀 자바스크립트를 조금 작성해야 했다. 다행스럽게도, jQuery Forms 유틸리티 라이브러리가 대부분의 일을 처리해 준다.
  
  
• 또 다른 jQuery 플러그인인 GreyBox를 사용하면 제조사 웹 사이트로 가는 링크를 멋진 라이트박스로 바꿀 수 있다. 이 기사의 예제에서는 5.53 버전을 사용했다.
  
  

• 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