웹사이트를 개발할 때 많은 개발자가 제이쿼리를 사용한다. 제이쿼리를 사용하여 편리하게 자바스크립트를 개발할 수는 있지만 여전히 웹사이트 UI를 개발하는 일은 다른 라이브러리를 사용해야 하는 약점이 있다. 제이쿼리 툴즈 UI 라이브러리는 제이쿼리의 약점을 보완하는 역할을 한다. 라이브러리는 웹사이트를 만들 때 반복해서 사용하는 UI를 위주로 구성되어 있으며 쉽게 웹사이트에 적용할 수 있다. 이 책을 통해 단순한 라이브러리의 적용 방법뿐 아니라 다양한 상황에 맞는 활용 방법을 배울 수 있다.


[ 이 책에서 다루는 내용 ]

■ 몇 줄의 코드만으로도 얻을 수 있는 도구의 강력함과 다양한 기능 발견
■ 제이쿼리 툴즈에서 오버레이의 사용법을 배우고 오버레이, 탭, 스크롤러블, 툴팁을 사용하여 멋진 웹사이트를 제작
■ 표준으로 제공되는 유효성 검사 및 직접 추가한 유효성 검사를 지원하는 폼
■ 여러 도구를 함께 사용해 만드는 멋지고 유용한 효과
■ 이 책에 포함된 수정 가능한 예제를 활용하여 필요에 알맞게 기능을 직접 제작
■ 제이쿼리와 제이쿼리 툴즈의 코드를 함께 사용하여 추가 기능을 웹사이트에 추가

[ 이 책의 대상 독자 ]

제이쿼리 툴즈 라이브러리를 처음 사용하는 사람에게 안성맞춤인 책이다. 이 책의 대상 독자는 제이쿼리 툴즈에 대해 사전 지식은 없으나 자바스크립트의 문법이나 개념에 대해 기초적인 이해를 하고 있는 사람이다. 이 책을 통해 라이브러리의 기본적인 사용법과 매력적이면서도 손쉽게 개선할 수 있는 웹페이지를 만드는 방법에 대해 알 수 있다.


[ 이 책의 구성 ]

1장 시작에서는 ‘웹에서 꼭 필요한 UI 라이브러리’로 제이쿼리 툴즈 라이브러리를 소개한다. 제이쿼리 툴즈를 다운로드 하는 방법, 라이브러리를 활용하여 웹페이지를 만들 때 필요한 도구에 대해 간략히 설명하고 제이쿼리 툴즈를 사용한 모범 사례를 살펴본다.

2장 UI 도구에서는 제이쿼리 툴즈 UI 라이브러리의 각 부분을 살펴보고 웹사이트에 적용하는 방법을 알아본다. 각 UI 라이브러리마다 자세한 데모가 포함되어 있으며 라이브러리를 사용하여 만들 수 있는 고급 예제도 포함되어 있다.

3장 폼 도구에서는 제이쿼리 툴즈에 포함되어 있는 폼 기능을 소개한다. 폼의 내용을 전송하고 내용이 유효한지 확인하는 방법에 대해 알아보고 범위 입력기를 이용하여 숫자를 입력하고 날짜 입력기를 사용하여 날짜를 입력하는 방법에 대해 살펴본다. HTML5 표준을 사용하여 모든 내용이 올바르게 입력됐는지 확인하는 방법에 대한 예제도 살펴본다.

4장 제이쿼리 툴즈 도구상자에서는 독립적으로 또는 라이브러리의 주요 도구의 일부 기능으로 사용할 수 있는 도구 모음을 소개한다. HTML, CSS3, 자바스크립트의 발전으로 일부 기술은 구식이 되고 있지만 프로젝트에서 유용하게 사용할 수 있을 것이다.

[ 저자 서문 ]

“정말 사이트에 드래그 앤 드롭, 리사이즈가 가능한 창, 정렬 가능한 목록 같은 기능이 필요한가?”

만약 답이 ‘아니오’ 라면 제이쿼리 툴즈 UI 라이브러리를 사용하면 된다!

제이쿼리 툴즈는 작고 강력한 라이브러리다. 이 라이브러리는 웹사이트의 핵심 기능을 만들 때 사용할 수 있는 컴포넌트로 구성되어 있다. 목록 상자, 범위 입력, 정렬 가능한 목록과 같은 무수한 컴포넌트가 포함되어 있는 UI 라이브러리는 많다. 예를 들어 회사의 인트라넷에서 유용하게 사용하는 온라인 기반의 응용프로그램을 만드는 데 이런 컴포넌트를 사용할 수 있다. 그러나 일반적인 웹사이트를 만들 때는 그다지 필요하지 않다.

웹사이트는 정보를 전달하면서 보기 좋게 만들어야 한다. 제이쿼리 툴즈를 사용하면 웹사이트를 개선할 수 있으며 최신 자바스크립트 기술의 혜택을 받을 수 있다. 또한 미리 정의된 HTML, CSS의 구조나 엄격한 프로그래밍 규칙에도 자유롭다. 페이지에 라이브러리를 추가하면 바로 라이브러리의 기능을 사용할 수 있다. 취향에 맞게 제이쿼리 툴즈를 수정해도 제이쿼리 툴즈를 구성하는 핵심 기능은 그대로 유지될 것이다.

제이쿼리 툴즈를 처음 사용하는 개발자가 사용 가능한 제이쿼리 툴즈의 기능을 알아보려 한다면 이 책이 매우 적합하다. 쉽고 단계적으로 구성된 내용을 따라가다 보면 제이쿼리 툴즈 라이브러리를 사용하면서 필요한 것을 찾을 수 있으며 단지 몇 줄의 코드만으로도 복잡한 기능을 구현하는 방법을 알 수 있다.


[ 저자 소개 ]

알렉스 리비 (Alex Libby)
코벤트리 대학에서 e-commerce 석사 학위를 받았다. 현재 영국을 기반으로 하는 유명한 부품 배급사에서 쉐어포인트 기술 분석가로 일하고 있다. 알렉스는 지난 18개월간 매일 업무에서 제이쿼리 툴즈를 사용하고 있으며 특히 점진적인 개선 방법론에 따라 제이쿼리와 제이쿼리 툴즈를 사용하여 일반적인 문제를 간단하게 해결하는 일에 도전하는 것을 즐긴다.

이전에는 IT지원 회사에서 은행, 건강, 방위 출판 산업과 관련된 업무를 진행했다. 알렉스는 제이쿼리 툴즈 UI 라이브러리로 알려져 있는 제이쿼리 툴즈의 최신 버전을 개발하는 데 중요한 역할을 하고 있다. 그리고 제이쿼리 툴즈를 사용하며 발생하는 문제의 해결법을 찾는 포럼에서 개발자들을 돕고 있다.


[ 옮긴이의 말 ]

자바스크립트 세계에서 최고의 영향력을 가진 라이브러리를 꼽으라면 바로 제이쿼리일 것이다. 사용의 편리함과 기능의 강력함으로 전세계에서 수많은 웹개발자를 팬으로 만들었다. 이는 국내에서도 마찬가지다. 그 유명세는 입사 지원자들이 제출한 이력서를 검토하는 과정에서 종종 느끼곤 하는데 사용 가능한 언어 항목에 자바스크립트는 적지 않은 상태에서 제이쿼리만 적어 놓은 이력서를 발견할 때가 그렇다. 가끔 제이쿼리를 사용하면서 편리함을 느끼거나 제이쿼리와 함께 사용 가능한 놀라운 수준의 서드파티 라이브러리를 발견할 때 제이쿼리에 점점 호감을 갖게 된다.

제이쿼리 툴즈 UI 라이브러리는 제이쿼리와 함께 사용할 수 있는 라이브러리 중에 눈에 띄는 라이브러리다. 지원하는 UI의 개수가 많지 않아 자칫 부실하다고 생각할 수도 있지만 서비스를 만들 때 가장 빈번하게 사용하던 UI가 빠짐없이 포함되어 있어 알차다는 느낌을 받는다. 그리고 매우 간단한 라이브러리의 사용법에 다시 한 번 놀라게 된다. 제이쿼리의 특징인 사용의 편리함과 기능의 강력함을 그대로 지니고 있는 라이브러리라고 생각한다. 이런 라이브러리가 제이쿼리의 위상을 더욱 높이고 있는 것은 아닐까?

최근 모바일 서비스가 점점 중요해지면서 모바일 앱에 개발자들의 관심이 집중되고 있다. 하지만 제이쿼리나 HTML5 등 다양한 웹 기술을 활용하여 수준 높은 모바일 애플리케이션을 제작할 수 있다는 점과, 성장세는 예전 같지 않지만 데스크톱을 대상으로하는 웹 서비스 또한 여전히 중요하다는 점에서 제이쿼리를 비롯하여 제이쿼리 툴즈 UI 라이브러리와 같은 강력한 서드파티 라이브러리에 지속적인 관심을 갖는 것이 필요하다. 이 책이 작으나마 도움이 되길 바란다.


[ 옮긴이 소개 ]

장정환
HTML5와 자바스크립트에 빠져 있는 개발자다. NHN에서 UI개발 조직을 이끌며 자바스크립트로 네이버의 다양한 UI를 개발하는 데 참여했으며 JindoJS와 스마트에디터 프로젝트를 주도했다. 짧은 시간이지만 XE 1.7의 PM으로도 참여한 경험이 있다. 지금은 카카오에서 새로운 모바일 세상을 만들고 있으며 페이스북에 JSLounge라는 HTML5/JavaScript 커뮤니티를 운영하고 있다. 에이콘출판사에서 출간된 『방탄 Ajax』(2007년), 『Ajax 첫걸음』(2011년), 『jQuery Novice to Ninja 한국어판』(2011년) 등을 번역했고, 『엔터프라이즈 Ajax』(2010년)을 감수했다.

목차

• 1장 시작
  • 제이쿼리 툴즈의 기초와 규칙: 입문
    • HTML의 역할
    • 자바스크립트와 제이쿼리의 역할
    • CSS의 역할
  • 개발에 필요한 도구
  • 제이쿼리 툴즈 다운로드
    • CDN 링크 사용
  • 필요한 도구만 고르기: 다운로드 빌더
    • 제이쿼리 툴즈의 적용과 초기화
  • 이벤트와 API 호출의 모범 사례
    • 응용프로그램 프로그래밍 인터페이스, API
    • 제이쿼리 툴즈 이벤트
    • 이벤트 객체
    • 제이쿼리 툴즈 플러그인 만들기
    • 제이쿼리 툴즈 플러그인과 효과의 사용
  • 제이쿼리 툴즈의 성능
    • HTTP 요청의 수를 줄여라
    • 제이쿼리 툴즈는 CDN으로 사용 가능하다
    • expires 헤더 추가
    • GZIP 컴포넌트
    • 자바스크립트 최소화
  • 요약
    
• 2장 UI 도구
  • UI 도구: 템플릿
  • 오버레이란 무엇인가?
  • 시선을 끌기 위한 오버레이
    • 사용법
    • 프로젝트: 구글 지도 뷰어 제작
  • 툴팁: 웹의 기초 요소
    • 사용법
    • 슬라이드 효과와 다이나믹 플러그인으로 인상적인 툴팁 만들기
    • 프로젝트: 툴팁을 사용한 “바로 구매”의 제작
  • 남은 것: 스크롤러블
    • 사용법
    • 프로젝트: 미니 갤러리 만들기
  • 탭의 사용
    • 사용법
    • 프로젝트: 롤링 슬라이드쇼 만들기
  • 요약
    
• 3장 폼 도구
  • 유효성 검사 도구의 사용
    • 유효성 검사 도구를 사용하는 이유
    • 사용법
    • 프로젝트: 스타일을 개선하고 유효성 검사 도구를 적용
    • “부정적인 느낌이네요. 이 onFail은…”
    • 유효성 검사 도구: 마지막 고민
  • HTML5 날짜 입력기의 모습과 동작을 제이쿼리 툴즈 날짜 입력기를 사용하여 변경
    • 사용법
    • 프로젝트: 꾸미기와 언어 지역화
    • 마지막 고민
  • HTML5의 범위 입력기를 제이쿼리 툴즈 범위 입력기로 관리
    • HTML5의 범위 입력기를 사용하는 이유
    • 사용법
    • 프로젝트: 상품 갤러리 만들기
    • 마지막 이야기
  • 요약
    
• 4장 제이쿼리 툴즈 도구상자
  • 플래시임베드를 사용한 플래시 삽입
    • 사용법
    • 데모: 플래시 추가
    • 마지막 이야기
  • 히스토리 정보 따라 이전 페이지로 이동
    • 사용법
  • 익스포즈로 내용 강조하기
    • 사용법
    • 데모: 익스포즈를 사용한 영상 표시
  • 마우스휠을 이용한 마우스 관리
    • 사용법

정오표

[ p78 하단 그림 ]

[ p89 상단 그림 ]