현대 웹 애플리케이션의 사용자 인터페이스 디자인에서는 신속한 개발과 검증된 결과를 필요로 한다. 제이쿼리 자바스크립트 라이브러리의 신뢰할 수 있는 공식 플러그인인 제이쿼리 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)의 개발자로 평범한 삶을 살고 있다. 물론 구글과 야후의 선임 개발자를 모아놓고 정기적으로 자바스크립트 강의를 하는 부분만 빼고는…….

<저자 서문>
현대 웹 애플리케이션의 사용자 인터페이스 디자인에서는 신속한 개발과 검증된 결과를 필요로 한다. 제이쿼리 자바스크립트 라이브러리의 신뢰할 수 있는 공식 플러그인인 제이쿼리 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)의 개발자로 평범한 삶을 살고 있다. 물론 구글과 야후의 선임 개발자를 모아놓고 정기적으로 자바스크립트 강의를 하는 부분만 빼고는…….