jQuery UI 1.8(한국어판)

인터랙티브 웹을 위한 제이쿼리 UI

댄 웰먼 저자(글) · 동준상 번역

에이콘출판 · 2012년 01월 26일

책 소개

『jQuery UI 1.8(한국어판)』은 HTML과 CSS, 제이쿼리에 대한 기반 지식을 갖춘 웹 디자이너와 개발자를 위한 UI 라이브러리 활용서이다. 제이쿼리 UI 1.8 버전 이후의 내용을 망라하여 각 컴포넌트를 활용하기 위한 경험과 노력을 최대한으로 발휘하게 해준다. 본문에 실린 다양한 예제는 기존 지식을 발전적으로 적용할 수 있는 기회를 제공하고, 쉽게 따라할 수 있는 과정을 통해 초, 중급에서 고급 개발자로 도약할 수 있는 발판을 마련할 것이다.

작가정보

저자(글) 댄 웰먼

저자 댄 웰먼 (Dan Wellman)은 영국 남부 해안 지방에 근거지를 둔 작가이자 웹 개발자다. 현재 규모는 작지만 큰 성과를 이뤄온 디자인 하우스(Design Haus)에서 능력이 출중한 동료들과 함께 일하는 중이다. 댄은 밤늦은 시간까지 웹과 관련된 첨단 주제에 대해 글을 쓰고 교본을 작성해 왔는데, 최근엔 제이쿼리의 매력에 푹 빠져있다. 귀여운 네 명의 아이들과 예쁜 아내, 가족, 친구들과 오순도순 살고 있다. 『jQuery UI 1.8』은 댄의 여섯 번째 책이다.

번역 동준상

역자 동준상은 웹과 모바일 애플리케이션 UI 개발자다. 모바일 플랫폼을 위한 UX 디자인으로 출발해 지금은 iOS와 안드로이드, 웹 애플리케이션 분야에서 개발과 강의, 번역을 하며 바쁜 나날을 보내고 있다. 삼성멀티캠퍼스(2010년~)와 에코노베이션(2011년~), T아카데미(2011년 10월)에서 모바일 프로젝트를 위한 UX 디자인과 HTML5 API와 CSS3, 제이쿼리 UI를 활용한 프로토타입 개발 강의를 하고 관련 교재를 집필했다. 번역서로는 에이콘출판사에서 펴낸 『HTML5 Multimedia Development Cookbook 한국어판』(2012)이 있으며, 현재 위너스랩 UX 디자인 팀장으로 두산 그룹 모바일 프로젝트를 위해 일하는 중이다.

목차

• 1장 제이쿼리 UI 소개
  ___라이브러리 다운로드
  ___개발 환경설정
  ___라이브러리의 구조
  ___테마롤러
  ___컴포넌트 카테고리
  ___브라우저 지원
  ___이 책의 예제
  ___라이브러리 라이선스
  ___API 소개
  ______이벤트와 콜백
  ______콜백의 인수
  ___정리
  
  2장 CSS 프레임워크와 유틸리티
  ___프레임워크를 구성하는 파일
  ______jquery.ui.all.css
  ______jquery.ui.base.css
  ______jquery.ui.core.css
  _________컴포넌트별 CSS 프레임워크 파일
  ______jquery.ui.theme.css
  ___CSS 프레임워크 파일 링크
  ___CSS 프레임워크 클래스 사용
  ___컨테이너
  ___인터랙션
  ___아이콘
  ___인터랙션 큐
  ___적용된 테마의 쉽고 빠른 전환
  ___테마 오버라이딩
  ___포지션 유틸리티
  ______포지션 유틸리티 사용
  ___충돌 회피
  ___함수를 활용한 위치 설정
  ___위젯 팩토리
  ___위젯 만들기
  ____create 함수
  ___공통 API 메소드
  ___커스텀 메소드 추가
  ___위젯 스타일시트
  ___위젯 사용
  ___정리
  
  3장 탭 위젯
  ___기본 탭 위젯 구현
  ___탭 CSS 프레임워크 클래스
  ___탭 위젯에 커스텀 테마 적용
  ___탭 위젯 환경설정 옵션
  ______탭 선택
  ______탭 작동 불능 상태 만들기
  ______전환 효과
  ______콘텐츠 패널을 닫을 수 있는 탭 옵션
  ___탭 이벤트
  ______이벤트에 연결
  ___탭 메소드 사용
  ______탭 작동 가능/작동 불능 설정
  ______탭 추가와 제거
  ______클릭 시뮬레이팅
  ______순환하는 탭 만들기
  ______옵션의 getting과 setting
  ___AJAX 탭
  ___원격 탭 콘텐츠의 URL 변경
  ___리모트 탭의 리로딩
  ___JSONP 데이터 표시
  ___정리
  
  4장 아코디언 위젯
  ___아코디언 위젯의 구조
  ___아코디언에 스타일 적용
  ___아코디언 위젯 환경설정
  ______트리거 이벤트 변경
  ______기본 액티브 헤더 변경
  ______아코디언 영역 채우기
  ______아코디언 애니메이션
  ___아코디언 이벤트
  ______change 이벤트 활용
  ______changestart 이벤트
  ___아코디언 내비게이션
  ___아코디언 메소드
  ______헤더 활성화
  ______아코디언 패널 크기 조정
  ___아코디언에 다른 위젯 넣기
  ___정리
  
  5장 대화상자 위젯
  ___기본 대화상자 위젯 만들기
  ___대화상자 옵션
  ______대화상자 표시
  ______대화상자 타이틀
  ______모달 대화상자
  ______대화상자에 버튼 추가
  ______대화상자 애니메이션
  ______대화상자의 크기 설정
  ______대화상자의 쌓기 순서 설정
  ___대화상자의 이벤트 모델
  ___프로그래밍으로 대화상자 조작
  ______클릭으로 대화상자 화면에 표시
  ___대화상자에서 데이터 가져오기
  ___대화상자 안에 다른 위젯 추가
  ___동적 이미지 기반 대화상자
  ___정리
  
  6장 슬라이더 위젯
  ___기본 슬라이더 위젯 구현
  ___슬라이더의 커스텀 스타일 적용
  ___환경설정 옵션
  ______수직형 슬라이더 만들기
  ______슬라이더의 최댓값, 최솟값 설정
  ______슬라이더 스텝
  ______슬라이더 애니메이션
  ______슬라이더 값의 설정
  ______여러 개의 슬라이더 핸들 적용
  ______슬라이더의 범위 옵션
  ___슬라이더의 이벤트 API 활용
  ___슬라이더 메소드
  ___실용적인 활용법
  ___컬러 슬라이더
  ___정리
  
  7장 데이트픽커 위젯
  ___기본적인 데이트픽커 구현
  ___데이트픽커의 환경설정 옵션
  ______기본적인 옵션
  ______최대, 최소 날짜 옵션
  ______데이트픽커 UI에서 요소 변경
  ______이벤트 트리거 버튼 추가
  ______대체 애니메이션 환경설정
  ______여러 개의 월별 패널 표시
  ______날짜 포맷의 변경
  ______추가적인 요소 업데이트
  ______데이트픽커 지역화
  ______콜백 프로퍼티
  ___유틸리티 메소드
  ___날짜 선택 메소드
  ______프로그래밍에 의한 날짜 선택
  ______대화상자에 데이트픽커 나타내기
  ___AJAX 데이트픽커
  ___정리
  
  8장 프로그레스바 위젯
  ___기본 설정 프로그레스바 구현
  ___프로그레스바의 환경설정 옵션
  ______프로그레스바의 값 설정
  ___프로그레스바 이벤트 API
  ___프로그레스바 메소드
  ___사용자 입력에 반응하는 프로그레스
  ___AJAX 프로그레스바
  ___정리
  
  9장 버튼 위젯과 자동완성 위젯
  ___버튼 위젯
  ______표준 버튼 위젯의 구현
  ______버튼에 테마 적용
  ______환경설정 옵션
  ______버튼 아이콘
  ______입력 아이콘
  ______버튼 이벤트
  ______버튼셋
  _________체크박스 버튼셋
  _________라디오 버튼셋
  ______버튼 메소드
  ___자동완성 위젯
  ______데이터 소스를 활용한 자동완성 위젯
  _________데이터 소스로 객체 배열 사용
  ______자동완성 위젯의 환경설정 옵션
  _________최소 문자 수 설정 옵션
  _________대체 요소에 제시어 리스트 첨부
  ______자동완성 위젯의 이벤트
  ______자동완성 위젯의 메소드
  ______원격 데이터 소스를 이용한 자동완성
  _________소스의 옵션 값으로 문자열을 사용
  _________source 옵션 값으로 함수를 사용
  ______제시어 리스트에 HTML 요소 적용
  ___정리
  
  10장 드래그앤드롭
  ___드래그앤드롭 요소의 관계
  ___드래그
  ______기본적인 드래그 구현
  ___드래그 옵션 환경설정
  ______드래그 환경설정 옵션
  ______드래그된 요소의 재설정
  ______드래그 핸들
  ______드래그 도우미 요소
  ______드래그 영역의 제한
  ______드래그 요소에 스냅 적용
  ___드래그 이벤트 콜백
  ___드래그 메소드
  ___드롭 컴포넌트
  ___드롭 환경설정
  ______수용되는 드래그 요소의 환경설정
  ______드롭 요소의 허용 한계
  ___드롭 이벤트 콜백
  ______드롭 영역
  ______드롭의 greedy 옵션
  ___드롭 메소드
  ___드래그앤드롭 게임
  ___정리
  
  11장 크기 조절 컴포넌트
  ___기본적인 크기 조절 기능
  ___크기 조절 옵션
  ______크기 조절 핸들의 환경설정
  ______핸들 이미지 추가
  ______크기 조절 제한 설정
  ______크기 조절 고스트
  ______크기 조절 요소에 다른 요소 담기
  ______비율에 따른 조절
  ______크기 조절 애니메이션
  ______동시에 여러 요소의 크기 조절
  ______의도하지 않은 크기 조절 예방
  ___크기 조절 콜백
  ___크기 조절 메소드
  ___크기 조절 탭 버튼
  ___정리
  
  12장 선택 컴포넌트
  ___기본적인 선택 기능 구현
  ___선택 대상의 클래스명
  ___선택 기능의 환경설정 옵션
  ______선택 요소 필터링
  ______선택의 취소
  ___선택 기능 관련 콜백
  ______많은 수의 선택 요소 다루기
  ___선택 메소드
  ______선택 요소의 리프레시
  ___선택 이미지 뷰어
  ______이미지 선택자에 스타일 적용
  ______이미지 뷰어의 기능 구현
  ___정리
  
  13장 정렬 컴포넌트
  ___기본 정렬 기능 구현
  ___정렬 환경설정 옵션
  ______플레이스홀더
  ______정렬 도우미
  ______정렬 아이템
  ______연결된 리스트
  ___정렬 관련 콜백
  ___Connected callbacks
  ___정렬 메소드
  ______정렬 요소의 나열
  ___탭 위젯과 정렬 컴포넌트의 결합
  ______정렬 기능의 드래그앤드롭 애플리케이션
  ___정리
  
  14장 UI 효과
  ___핵심 효과 파일
  ______컬러 애니메이션
  ______클래스 전환
  ______향상된 이징 효과
  ___특정 요소의 하이라이트
  ______UI 효과에 적용할 수 있는 인수
  ___바운스 효과
  ___셰이크 효과
  ______외곽선에 대한 변환 효과
  ___스케일 효과
  ___폭파 효과
  ___퍼프 효과
  ___진동 효과
  ___페이지에 요소 드롭 효과
  ___슬라이드 효과
  ______이징 기능 적용
  ___블라인드 효과
  ___자르기 효과
  ___접기 효과
  ___정리

출판사 서평

제이쿼리 UI는 제이쿼리, 제이쿼리 UI, 제이쿼리 모바일(Mobile)로 이어지는 제이쿼리 패밀리 가운데 개발의 편리성과 용이성으로 인해 가장 널리 사용되고, 가장 많이 커스터마이징되는 인터페이스 개발 도구다. 사람들이 일상적으로 사용하는 각종 도구를 미리 만들어두고 필요할 때 꺼내 쓸 수 있다는 의미에서 라이브러리로 지칭되는 제이쿼리 UI는 자바스크립트에 익숙하지 않은 사람들도 자유롭게 사용할 수 있게 하려는 기본 취지에 맞게 HTML 문서를 다뤄본 사람이라면 누구나 쉽게 적용하고 사용할 수 있다. 영국의 저명한 웹 개발자이자 작가인 저자는 아코디언, 탭 버튼, 슬라이더, 데이트픽커, 드래그앤드롭 등 가장 최신 버전의 제이쿼리 UI 라이브러리 요소를 기본 이론과 다양한 예제를 활용해 소개하며, 독자는 예제를 함께 완성해가면서 제이쿼리 UI의 비밀을 하나씩 풀어갈 수 있다.

현대 웹 애플리케이션의 사용자 인터페이스 디자인에서는 신속한 개발과 검증된 결과를 필요로 한다. 제이쿼리 자바스크립트 라이브러리의 신뢰할 수 있는 공식 플러그인인 제이쿼리 UI는 적응성, 안정성을 겸비한 세련되고 풍부한 사용자 인터페이스를 최소한의 시간과 노력을 투자해 만들 수 있는 굳건한 토대를 제공한다. 제이쿼리 UI는 시선을 사로잡는 사용자 인터페이스 위젯과 핵심 인터랙션 도우미를 일관적이면서 개발자 친화적인 방식으로 구현할 수 있도록 돕는다. 이들 라이브러리 요소를 사용하면 개발자가 직접 작성해야 할 프로젝트의 컨셉 모델과 완성을 위한 코드 양을 획기적으로 줄일 수 있다.

특히 이 책은 제이쿼리 UI 1.8 버전 이후의 내용을 망라했으므로 각 컴포넌트를 활용하기 위한 여러분의 경험과 노력을 최대한으로 발휘하게 해준다. 여기에 실린 다양한 예제는 여러분의 기본 지식을 발전적으로 적용할 수 있는 기회를 제공하고, 쉽게 따라할 수 있는 과정을 통해 초, 중급에서 고급 개발자로 도약할 수 있는 발판이 될 것이다. 이 책에서는 기본적인 구현 사례를 통해 각 컴포넌트를 사용하는 방법을 소개하고, 당면한 프로젝트의 애플리케이션에 적용할 수 있게 스타일과 기능을 추가하거나 커스터마이징하는 방법을 함께 알아본다. 이후 UI 라이브러리를 최대로 활용하기 위해 각 컴포넌트 API의 환경설정 옵션과 메소드를 살펴본다.

★ 이 책에서 다루는 내용 ★

■ CSS 프레임워크를 사용해 일관된 스타일을 적용하는 방법
■ 위젯 팩토리를 이용해 커스텀 제이쿼리 UI 위젯을 만드는 방법
■ 컴포넌트마다 요구되는 각 마크업 요소와 이를 사용한 위젯과 컴포넌트의 설정 방법
■ 컴포넌트별 환경설정 방식과 이에 적용되는 옵션의 활용법
■ 위젯의 메소드와 이벤트 모델을 이용한 프로그램적 접근 방법
■ 라이브러리의 각 컴포넌트를 활용한 실용 예제 구현 방법
■ 완성된 인터페이스에 UI 이펙트를 적용해 생동감을 높이는 방법

★ 이 책의 대상 독자 ★

이 책은 HTML과 CSS, 제이쿼리에 대한 기반 지식을 갖춘 웹 디자이너와 개발자를 위한 UI 라이브러리 활용서다. 제이쿼리를 이용해 웹 애플리케이션의 사용자 인터페이스에 생동감을 불어넣고 싶은 사람들이 꼭 읽어야 할 책이다.

★ 이 책의 구성 ★

1장, 제이쿼리 UI 소개에서는 라이브러리가 무엇인지, 어디에서 다운로드할 수 있는지, 어떻게 파일의 계층 구조를 만들지 알아본다. 또한 테마롤러와 라이브러리를 지원하는 브라우저의 종류, 라이브러리 이용에 대한 라이선스, 일관적이면서 쓰기 쉬운 프로그래밍 모델로서 컴포넌트 API의 사용 방법을 소개한다.

2장, CSS 프레임워크와 유틸리티에서는 테마롤러를 통해 통일된 스타일 테마의 사용 환경을 제공하는 CSS 프레임워크와, 개발자가 직접 만든 커스텀 테마를 적용하는 방법을 알아본다. 또한 새로운 포지션 유틸리티와 위젯 팩토리를 활용한 제이쿼리 UI 플러그인 작성법을 살펴본다.

3장, 탭 위젯은 이 책의 첫 번째 위젯으로, 탭 버튼을 위한 컴포넌트 구성을 살펴보고 간단하지만 효과적인 수단으로서 매력적이면서 인터랙티브한 구조화된 콘텐츠를 제공하는 방법을 알아본다.

4장, 아코디언 위젯에서는 콘텐츠를 표현하는 또 하나의 효과적인 수단인 아코디언의 구성 요소를 살펴본다. 높은 상호작용성을 갖춘 아코디언 위젯을 웹페이지에 넣고 위젯의 기능을 최대로 발휘할 수 있게 하는 API 사용법도 알아본다.

5장, 대화상자 위젯은 표준 브라우저의 경고창과 동일한 방식으로 사용되지만, 경고창과는 비교할 수 없을 정도로 사용자 친화적인 기능을 제공한다. 대화상자의 환경설정 방법과, 그 기능을 최대한으로 끌어내기 위한 구현 방법도 알아본다.

6장, 슬라이더 위젯은 일반적으로 자주 쓰이지는 않지만, 사용자의 입력 데이터를 수집하는 데 있어서는 다른 어떤 위젯보다도 중요한 역할을 하는 인터페이스다. 슬라이더 API를 통해 다양한 구현 방법을 살펴본다.

7장, 데이트픽커 위젯은 단순한 달력으로 보일 수도 있겠지만, 웹페이지에서 날짜를 선택하려는 사용자를 위해 셀 수 없을 정도로 많은 기능을 제공한다. 데이트픽커의 API가 제공하는 방대한 양의 환경설정 옵션을 소개하고, 스킨 변경, 현지화 등의 깊이 있는 주제도 다룬다.

8장, 프로그레스바 위젯에서는 간소한 API를 살펴보고 그밖의 위젯이나 웹 애플리케이션과 결합해 사용할 수 있는 다양한 방법을 알아본다.

9장, 버튼 위젯과 자동완성 위젯에서는 1.8 버전에서 새로 소개된 버튼 위젯과 잠시 사라졌다가 다시 라이브러리에 포함된 자동완성 위젯을 다룬다. 오래 전부터 라이브러리를 사용해 온 개발자는 자동완성 위젯의 존재를 기억할 것이다. 이번 버전을 통해 다시 돌아온 위젯은 라이브러리의 최신 버전에 걸맞게 최적화됐고, 9장에서는 이들 요소를 활용한 멋진 효과를 아낌없이 보여준다.

10장, 드래그앤드롭은 로우레벨 인터랙션 도우미를 소개하는 첫 번째 장으로, 드래그앤드롭 컴포넌트의 구성을 알아본다. 드래그 컴포넌트와 드롭 컴포넌트의 구현 방법을 살펴보고, 사용자 인터페이스를 강화하기 위한 이들 요소의 결합 예제도 함께 만든다.

11장, 크기 조절 컴포넌트에서는 앞서 살펴본 대화상자 위젯에 크기 조절 기능을 적용하는 방법을 알아본다. 또한 페이지의 어떤 요소에든 크기 조절 기능을 적용해 부드러우면서도 매력적인 방법으로 크기를 조절하는 방법을 살펴본다.

12장, 선택 컴포넌트는 페이지에 나타난 요소에 행위(behavior)를 부여하고, 개별적으로나 그룹으로 이들 요소를 선택할 수 있게 해준다. 선택 기능을 통해 데스크톱이 지닌 파일과 폴더 선택과 관리 방식을 웹 브라우저에서도 사용할 수 있다.

13장, 정렬 컴포넌트는 이 책의 마지막 인터랙션 도우미로, 리스트상에 존재하는 아이템을 마우스 드래그로 손쉽게 정렬할 수 있는 기능을 제공한다. 정렬 기능을 사용하면 최소한의 노력으로 애플리케이션에 전문가 수준의 상호작용성을 부여할 수 있다.

14장, UI 효과는 이 책의 마지막 장으로, 라이브러리에서 제공하는 특수 효과를 집중적으로 다룬다. 14장에서는 페이지에서 타겟 요소를 보이거나 감추고, 서서히 움직이거나 빠르게 이동하게 하는 다양한 효과를 소개하고, 이를 이용한 활용 사례를 만든다.

★ 저자 서문 ★

현대 웹 애플리케이션의 사용자 인터페이스 디자인에서는 신속한 개발과 검증된 결과를 필요로 한다. 제이쿼리 자바스크립트 라이브러리의 신뢰할 수 있는 공식 플러그인인 제이쿼리 UI는 최소한의 시간과 노력을 투자해 적응성, 안정성을 겸비한 세련되고 풍부한 사용자 인터페이스를 만들 수 있는 굳건한 토대를 제공한다.

제이쿼리 UI는 시선을 사로잡는 사용자 인터페이스 위젯과 코어 인터랙션 도우미를 일관적이면서 개발자 친화적인 방식으로 구현할 수 있게 돕는다. 이들 라이브러리 요소를 사용하면 개발자가 직접 작성해야 할 프로젝트의 컨셉 모델과 완성을 위한 코드의 양을 획기적으로 줄일 수 있다.

특히 이 책은 제이쿼리 UI 1.8 버전 이후의 내용을 망라했으므로 각 컴포넌트를 활용하기 위한 경험과 노력을 최대한으로 발휘하게 해준다. 여기에 실린 다양한 예제는 여러분의 기존 지식을 발전적으로 적용할 수 있는 기회를 제공하고, 쉽게 따라할 수 있는 과정을 통해 초, 중급에서 고급 개발자로 도약할 수 있는 발판이 될 것이다.

이 책에서는 기본적인 구현 사례를 통해 각 컴포넌트를 사용하는 방법을 소개하고, 당면한 프로젝트의 애플리케이션에 적용할 수 있게 스타일과 기능을 추가하거나 커스터마이징하는 방법을 함께 알아본다. 이후 UI 라이브러리를 최대로 활용하기 위해 각 컴포넌트 API의 환경설정 옵션과 메소드를 살펴본다.

각 장의 마지막 부분에서는 현대 웹 애플리케이션에 있어 핵심적인 역할을 하는 이벤트 모델을 소개한다. 상호작용성과 사용자의 반응성을 높이기 위해 필수적인 각 컴포넌트의 커스텀 이벤트 사용법을 익힘으로써 라이브러리에 대한 기반 지식을 복잡한 실무 프로젝트에 적용할 수 있는 응용 지식으로 향상시킬 수 있다.

★ 옮긴이의 말 ★

2006년 1월, 당시 스물 두 살의 존 레식(John Resig)은 매일 같이 해오던 자바스크립트 개발 작업에 약간의 변화를 주고, 자신이 몇 년째 만들어 사용 중이던 스크립트를 한 권의 책이나 하나의 사이트에 모으겠다는 계획을 세우고 실행에 옮기기 시작했다.

이미 프로토타입이라는 경쟁 프레임워크가 있는 상황에서 존 레식은 동일한 HTML문서에 대해 조금씩 다른 결과를 나타내던 브라우저의 표시 문제를 해결하고, 문서의 계층 구조를 따라 이동하거나, 문서 내에 사용된 DOM 요소를 선택하고, 플래시 등 써드파티 프로그램에 의존하지 않고 간단한 애니메이션을 만들며, 사용자 이벤트에 대한 반응을 손쉽게 만들 수 있는 스크립트만을 모으기 시작했다.

그리고 일곱 달이 지난 2006년 8월, 자신이 만든 자바스크립트 라이브러리를 세상에 소개한다. 원래는 라이브러리의 핵심 기능을 연상시키는 JSelect라는 이름을 붙일 생각이었는데, JSelect는 물론이고 비슷한 도메인을 모두 다른 사람이 사용하고 있어 어쩔 수 없이 (쿼리와 관련성이 떨어짐에도 불구하고) 제이쿼리(jQuery)라는 이름을 붙였다.

6년이 지난 2012년, 자신이 쓰던 도구를 다른 사람도 편하게 쓰도록 하겠다는 소박한 바람에서 시작한 제이쿼리는 세계에서 가장 많은 트래픽을 기록하는 10,000개 사이트 중 52%가 사용하고, 구글과 야후의 전폭적인 지지를 받으며, 마이크로소프트의 최신 웹 개발 도구의 주요 라이브러리이자 노키아의 사용자 인터페이스 개발도구로 자리 잡기에 이르렀다. 이 과정에서 제이쿼리의 사용자층이 넓어지고, 요구되는 기술 수준 또한 깊어지면서 문서 요소의 선택자 기능을 중심으로 한 제이쿼리와 사용자 인터페이스 라이브러리 중심의 제이쿼리 UI로 분리됐다.

영국의 저명한 웹 개발자인 댄 웰먼이 쓴 『jQuery UI 1.8』은 이 분야의 대표 교재이자 최신 개발 리소스다.

제이쿼리 UI는 웹이나 모바일 애플리케이션을 만드는 데 가장 많이 사용되는 인터페이스 요소(위젯)를 모아 라이브러리 형태로 정리하고 문서화한 것이다. 제이쿼리 UI는 탭, 아코디언, 대화상자, 슬라이더, 데이트픽커, 프로그레스바, 버튼, 자동완성 등의 위젯과 드래그앤드롭, 크기 조절, 선택 기능, 정렬 기능 등의 인터페이스 지원 기술을 포함한다.

각 위젯 요소는 기본적으로 스크립트를 복사해 해당 문서에 붙여넣기만 하면 작동될 수 있는 구조로 만들어졌으며, 작업 결과는 브라우저에서 즉시 확인할 수 있다. 이 때문에 제이쿼리 UI는 개발자 전용 도구라기보다는 디자이너와 기획자도 편리하게 사용할 수 있는 창작 도구이자 기획 도구라고 할 수 있다. 스크립트 개발 환경을 제대로 경험해보고 싶다면 제이쿼리 UI만큼 잘 정리되고, 크로스 브라우저 환경에서 완벽하게 작동하는 도구를 찾기는 쉽지 않을 것이다.

제이쿼리 UI가 널리 사랑받게 된 배경은 무엇보다도 무료로 제공되는 오픈소스인 점과 사용의 용이성일 것이다. 하지만 개발자 입장에서는 용이성 이상의 전문성과 커스터마이징 가능성을 요구할 것인데, 제이쿼리 UI는 이런 부분을 다양한 메소드와 옵션으로 충족시켜준다. 웹 애플리케이션이라는 큰 틀로서 필요한 CSS 프레임워크와 포지션 등의 유틸리티는 지난 6년간 존 레식을 비롯한 수많은 전문가가 라이브러리를 만들기 위해 노력한 결과가 고스란히 담겨있음을 보여준다. 사용자 인터페이스에 사용되는 애니메이션 기능을 구현하기 위한 UI 이펙트는 제이쿼리 UI 사용자가 가질 수 있는 특권 중 하나다.

전 세계 개발 현장이 제이쿼리라는 프레임워크로 뜨겁게 달궈진 지금 이제 스물여덟 살이 된 존 레식은 칸 아카데미(Khan Academy)의 개발자로 평범한 삶을 살고 있다. 물론 구글과 야후의 선임 개발자를 모아놓고 정기적으로 자바스크립트 강의를 하는 부분만 빼고는…….

기본정보

ISBN	9788960772656 ( 8960772658 )
발행(출시)일자	2012년 01월 26일
쪽수	544쪽
크기	188 * 235 * 35 mm / 1022 g
총권수	1권
시리즈명	acorn PACKT
원서명/저자명	jQuery UI 1.8/Wellman, Dan