★ 이 책에서 다루는 내용 ★

■ 제이쿼리 라이브러리를 내려받아 웹사이트에 포함하기
■ 사진 갤러리와 멋진 애니메이션 효과가 적용된 슬라이드쇼, 캐러셀, 슬라이더 만들기
■ 플러그인을 사용하지 않고도 몇 줄의 코드로 탭 인터페이스 구현하기
■ 사이트에 어울리고 방문자가 편하게 사용할 수 있는 나만의 스크롤바 만들기
■ Ajax를 사용해 전체 페이지 대신 변경된 콘텐츠 영역만 불러오기
■ 애니메이션과 나만의 툴팁을 적용해 사이트 탐색을 손쉽게 만들기
■ 사이트 방문자가 쓰기 편한 웹 양식 만들기


★ 이 책의 대상 독자 ★

HTML과 CSS는 어느 정도 알고 있지만, 자바스크립트와 제이쿼리의 세계로 한발 더 내딛고자 하는 웹 디자이너를 위한 책이다.


★ 이 책의 구성 ★

1장, '웹 디자이너, 제이쿼리를 만나다'에서는 제이쿼리 라이브러리를 소개하고 자바스크립트가 어떤 것인지 알려준다. 제이쿼리의 어떤 매력이 디자이너의 마음을 들뜨게 하는지 알 수 있으며, 전문 프로그래밍 지식 없이도 환상적이고 특별한 효과를 어떻게 만들어낼 수 있는지 배워볼 것이다. 그리고 부담 없이 배울 수 있을 정도로만 자바스크립트를 알려주며 첫 번째 자바스크립트 코드를 직접 만들어볼 것이다.

2장, '링크 다루기'에서는 링크의 기능을 확장하는 기본적인 방법을 살펴볼 것이다. 제이쿼리에서 새로운 창에 링크를 보여주기 위해서 어떻게 해야 하는지 배워가면서 링크에 아이콘을 추가하거나 링크 목록을 탭 형식의 인터페이스로 구성하는 방법도 살펴볼 것이다.

3장, '좋아 보이는 FAQ 페이지 만들기'에서는 HTML 문서를 탐색하고 필요한 요소를 이동시키는 방법뿐 아니라 콘텐츠를 접거나 보여주는 방식을 소개할 것이다. 기본적인 FAQ 목록을 먼저 만들고 사용자가 쓰기 편하게 개선해나가는 과정을 따라가 볼 것이다.

4장, '나만의 스크롤바 만들기'에서는 제이쿼리 플러그인을 처음 만나본다. 제이스크롤페인 플러그인을 사용해 웹 브라우저에 상관없이 원하는 대로 보이는 개성 있는 스크롤바를 만들어볼 것이다. 스크롤바를 설정하고 디자인을 수정하고 스크롤바의 움직임까지 나만의 것으로 구현해볼 것이다.

5장, '나만의 툴팁 만들기'에서는 웹 브라우저에서 제공하는 기본 툴팁 대신 큐팁 플러그인을 사용할 것이다. 단순한 툴팁 기능을 넘어서 내비게이션 바 위에서 추가적인 정보를 보여주는 기능을 더해볼 것이다.

6장, '인터랙티브 내비게이션 메뉴 만들기'에서는 완벽하게 동작하는 정말로 멋진 드롭다운 메뉴와 플라이아웃 메뉴를 만들어볼 것이다. 이렇게 동작하는 메뉴를 만들려면 복잡한 CSS를 작성해야 하는데, 슈퍼피시 플러그인을 사용하면 간단하게 개성 있는 메뉴를 만들어볼 수 있다.

7장, '비동기 내비게이션'에서는 Ajax 개념을 소개하고 약간의 제이쿼리 코드만으로 단순했던 웹 페이지를 하나의 페이지로 구성된 웹 앱으로 바꾸는 작업을 보여준다. 간단한 예제에서 시작해서 이전 페이지로 돌아갈 수 있는 뒤로 가기 버튼을 지원하는 기능을 추가해본다.

8장, '라이트박스로 콘텐츠 보여주기'에서는 컬러박스 제이쿼리 플러그인을 사용해서 라이트박스 위에서 사진을 보여주고 슬라이드쇼까지 구현해보는 과정을 살펴볼 것이다. 이를 응용하면 깔끔한 로그인 창을 만들거나 비디오 재생 목록으로 확장해볼 수 있고 웹사이트 갤러리 형식으로도 꾸며볼 수 있다.

9장, '슬라이드쇼 만들기'에서는 이미지 슬라이드쇼를 구현하는 몇 가지 방법을 살펴볼 것이다. 먼저 크로스페이드(페이드인과 페이드아웃이 동시에 이뤄지는) 형식으로 직접 슬라이드쇼 예제를 만들어볼 것이다. 그러고 나서 크로스슬라이드 플러그인, 니보 슬라이더 플러그인, 갤러리픽 플러그인을 활용해 다양한 유형의 슬라이드쇼를 만나볼 것이다.

10장, '캐러셀과 슬라이더로 콘텐츠 다루기'에서는 캐러셀(Carousel)(회전식 슬라이드쇼), 뉴스 티커, 슬라이더가 어떤 식으로 사용되는지 소개하며 제이캐러셀 제이쿼리 플러그인의 도움을 받아 이를 구현해볼 것이다. 가로 방향으로 움직이는 캐러셀을 만들고 세로 방향으로 움직이는 뉴스 티커와 콘텐츠 슬라이더를 만들어볼 것이다. 그리고 플러그인을 활용해 캐러셀에 슬라이드쇼를 어떻게 통합할 수 있는지도 살펴볼 것이다.

11장, '인터랙티브 데이터 그리드 만들기'에서는 간단한 HTML 테이블에서 다양한 기능이 추가된 데이터 그리드로 변신하는 과정을 살펴볼 것이다. 사용자들이 데이터를 직접 검색해보거나 원하는 대로 정렬할 수 있는 기능을 추가해본다.

12장, '멋진 입력 양식 만들기'에서는 단순한 입력 양식이 어떻게 바뀌는지 살펴볼 것이다. HTML5에서 form 요소를 사용해 HTML 태그만으로 입력 양식을 만들어볼 것이다. 첫 번째 필드에 커서가 자동으로 배치되는 기능을 추가하고, 힌트 문자(placeholder text)를 사용해 사용자가 어떤 항목을 입력해야 하는지 쉽게 알 수 있게 하며, 잘못 입력된 항목을 사전에 점검할 수 있는 기능을 추가한다. 마지막으로, 유니폼 제이쿼리 플러그인을 사용해 딱딱하고 다루기 어려웠던 입력 양식을 어떤 웹 브라우저에서든 일관성 있게 보이도록 디자인을 구성해볼 것이다.


★ 저자 서문 ★

『웹 디자이너를 위한 손쉬운 제이쿼리』 책을 선택해주신 것에 감사드린다. 이 책은 HTML과 CSS를 어느 정도 이해하고 있으면서 기본적인 자바스크립트를 배워 실력을 향상하고자 하는 웹 디자이너를 위한 책이다. 이전에 자바스크립트를 한 번도 작성해본 적이 없어도 괜찮다. 이 책에서는 기초적인 자바스크립트 지식을 단계별로 배워가면서 콘텐츠를 접거나 드롭다운 메뉴, 슬라이드쇼 같은 멋진 작업을 완성해나갈 수 있다. 이 모든 것을 제이쿼리 라이브러리만으로 할 수 있다.


★ 옮긴이의 말 ★

컴퓨터 프로그래밍은 사용자가 원하는 작업을 컴퓨터에 지시하는 데 필요한 일련의 작업을 의미합니다. 컴퓨터가 복잡한 작업을 수행하는 것 같지만, 실제 연산장치에서는 기계어라고 하는 비트 단위의 언어를 사용합니다. 컴퓨터가 처음 등장했을 때는 기계어를 직접 입력하기도 했고 기계어와 일대일로 연결된 어셈블리어를 사용하기도 했습니다. 이쯤 오면 프로그래밍이라는 단어가 두려워지면서 평범한 사람이 사용할 수 없는 것처럼 느껴집니다.

프로그래밍을 전혀 경험하지 못한 디자이너에게는 머나먼 세상의 이야기처럼 느껴지지만, 포토샵 같은 이미지 저작 도구를 사용하고 있다면 이미 프로그래밍을 경험한 것입니다. 정해진 방식에 따라 컴퓨터에게 이미지를 수정하는 작업을 지시하는 것은 프로그래밍을 작성하는 방식과 크게 다르지 않습니다. 포토샵에서 동일한 작업을 반복하기 위해 매크로를 사용했다면 재사용 가능한 코드를 만들어본 것과 같은 경험이라고 이야기할 수 있습니다. 단지 개발자와 다른 도구를 사용했을 뿐입니다. 이런 주장이 과장된 것처럼 느껴진다면 위지윅WYSIWYG, What You See Is What You Get기능을 제공하는 프로그래밍 도구를 찾아보세요. 간단한 기능을 구현하는 방식은 포토샵을 사용하는 것과 크게 다르지 않다는 사실을 알 수 있습니다. 코드라고 불리는 것을 한 줄도 작성하지 않아도 화면에 무언가 결과가 나타납니다.

이 책을 읽는다는 것은 가장 기본적인 프로그래밍 과정을 살짝 배워보는 것입니다. 하지만 이렇게 배운 기본기는 만화 『슬램덩크』(이노우에 다케히코, 학산문화사)의 명대사 '왼손은 거들 뿐'이라는 말처럼 여러분의 멋진 아이디어를 현실에서 표현하도록 도와줄 수 있습니다. 물론 진행하는 프로젝트에 따라서는 개발자 없이 프로젝트가 완료될 수도 있을 겁니다.

언젠가는 포토샵에서 그려진 화면이 그대로 코드로 생성되는 때가 올 수도 있습니다(실제로 CSS3Ps라는 프로젝트는 포토샵 레이어를 CSS 코드로 자동 변환해주는 기능을 제공합니다). 그런 시절이 오더라도 기본기는 여전히 중요합니다. 이 책에서 배우는 기초적인 프로그래밍 지식은 어떤 도구를 사용할 때 어떻게 동작하는지 기본적인 구조를 이해하고 스스로 무언가를 만들 수 있게 도와줄 것입니다.

제이쿼리 역시 하나의 도구일 뿐입니다. 오픈소스 프로젝트로 만들어져, 상용솔루션만큼 편한 도구를 제공하지는 않습니다. 그렇지만 기본적인 동작 방식만 이해한다면 제이쿼리뿐 아니라 풍부하게 제공되는 플러그인까지 사용해 머릿속에 그려진 모습을 웹 브라우저에서 만나볼 수 있습니다.

디자이너들에게 이 책이 당장 하고 있는 일에 도움이 되지 않을 수도 있습니다. 하지만 개발자의 세계를 이해하고 관계를 개선할 수 있는 작은 도구가 될 수 있을 것입니다. 혹 바쁜 일정에 밀려 책을 읽지 못하고 책꽂이에 꽂아두는 것만으로도 개발자를 이해하려는 여러분의 노력이 전해지리라 믿습니다.

★ 저자 서문 ★

『웹 디자이너를 위한 손쉬운 제이쿼리』 책을 선택해주신 것에 감사드린다. 이 책은 HTML과 CSS를 어느 정도 이해하고 있으면서 기본적인 자바스크립트를 배워 실력을 향상하고자 하는 웹 디자이너를 위한 책이다. 이전에 자바스크립트를 한 번도 작성해본 적이 없어도 괜찮다. 이 책에서는 기초적인 자바스크립트 지식을 단계별로 배워가면서 콘텐츠를 접거나 드롭다운 메뉴, 슬라이드쇼 같은 멋진 작업을 완성해나갈 수 있다. 이 모든 것을 제이쿼리 라이브러리만으로 할 수 있다.

★ 옮긴이의 말 ★

컴퓨터 프로그래밍은 사용자가 원하는 작업을 컴퓨터에 지시하는 데 필요한 일련의 작업을 의미합니다. 컴퓨터가 복잡한 작업을 수행하는 것 같지만, 실제 연산장치에서는 기계어라고 하는 비트 단위의 언어를 사용합니다. 컴퓨터가 처음 등장했을 때는 기계어를 직접 입력하기도 했고 기계어와 일대일로 연결된 어셈블리어를 사용하기도 했습니다. 이쯤 오면 프로그래밍이라는 단어가 두려워지면서 평범한 사람이 사용할 수 없는 것처럼 느껴집니다.

프로그래밍을 전혀 경험하지 못한 디자이너에게는 머나먼 세상의 이야기처럼 느껴지지만, 포토샵 같은 이미지 저작 도구를 사용하고 있다면 이미 프로그래밍을 경험한 것입니다. 정해진 방식에 따라 컴퓨터에게 이미지를 수정하는 작업을 지시하는 것은 프로그래밍을 작성하는 방식과 크게 다르지 않습니다. 포토샵에서 동일한 작업을 반복하기 위해 매크로를 사용했다면 재사용 가능한 코드를 만들어본 것과 같은 경험이라고 이야기할 수 있습니다. 단지 개발자와 다른 도구를 사용했을 뿐입니다. 이런 주장이 과장된 것처럼 느껴진다면 위지윅WYSIWYG, What You See Is What You Get기능을 제공하는 프로그래밍 도구를 찾아보세요. 간단한 기능을 구현하는 방식은 포토샵을 사용하는 것과 크게 다르지 않다는 사실을 알 수 있습니다. 코드라고 불리는 것을 한 줄도 작성하지 않아도 화면에 무언가 결과가 나타납니다.

이 책을 읽는다는 것은 가장 기본적인 프로그래밍 과정을 살짝 배워보는 것입니다. 하지만 이렇게 배운 기본기는 만화 『슬램덩크』(이노우에 다케히코, 학산문화사)의 명대사 ‘왼손은 거들 뿐’이라는 말처럼 여러분의 멋진 아이디어를 현실에서 표현하도록 도와줄 수 있습니다. 물론 진행하는 프로젝트에 따라서는 개발자 없이 프로젝트가 완료될 수도 있을 겁니다.

언젠가는 포토샵에서 그려진 화면이 그대로 코드로 생성되는 때가 올 수도 있습니다(실제로 CSS3Ps라는 프로젝트는 포토샵 레이어를 CSS 코드로 자동 변환해주는 기능을 제공합니다). 그런 시절이 오더라도 기본기는 여전히 중요합니다. 이 책에서 배우는 기초적인 프로그래밍 지식은 어떤 도구를 사용할 때 어떻게 동작하는지 기본적인 구조를 이해하고 스스로 무언가를 만들 수 있게 도와줄 것입니다.

제이쿼리 역시 하나의 도구일 뿐입니다. 오픈소스 프로젝트로 만들어져, 상용솔루션만큼 편한 도구를 제공하지는 않습니다. 그렇지만 기본적인 동작 방식만 이해한다면 제이쿼리뿐 아니라 풍부하게 제공되는 플러그인까지 사용해 머릿속에 그려진 모습을 웹 브라우저에서 만나볼 수 있습니다.

디자이너들에게 이 책이 당장 하고 있는 일에 도움이 되지 않을 수도 있습니다. 하지만 개발자의 세계를 이해하고 관계를 개선할 수 있는 작은 도구가 될 수 있을 것입니다. 혹 바쁜 일정에 밀려 책을 읽지 못하고 책꽂이에 꽂아두는 것만으로도 개발자를 이해하려는 여러분의 노력이 전해지리라 믿습니다.