jQuery UI 1.8(한국어판)(acorn PACKT)

제이쿼리 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)의 개발자로 평범한 삶을 살고 있다. 물론 구글과 야후의 선임 개발자를 모아놓고 정기적으로 자바스크립트 강의를 하는 부분만 빼고는…….

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 효과에 적용할 수 있는 인수

___바운스 효과

___셰이크 효과

______외곽선에 대한 변환 효과

___스케일 효과

___폭파 효과

___퍼프 효과

___진동 효과

___페이지에 요소 드롭 효과

___슬라이드 효과

______이징 기능 적용

___블라인드 효과

___자르기 효과

___접기 효과

___정리

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