• 컴퓨터/IT > 프로그래밍 > 웹프로그래밍

• [시리즈] 에이콘 웹 프로페셔널 [64]

출판사 리뷰

제이쿼리 초보에서 플러그인, UI 위젯 제작까지, 고수에 이르는 첫걸음

『jQuery Novice to Ninja 한국어판』은 제이쿼리를 배우기에 완벽한 책이다. 초보자를 위한 기초적인 내용이 모두 들어 있어 자바스크립트 프레임워크의 진가를 간파할 수 있으며, 플러그인 개발과 다양한 UI 위젯 제작 같은 고급 기술까지 모두 익힐 수 있다.

왜 제이쿼리인가?

제이쿼리는 자바스크립트를 사용해 웹 사이트에 인터랙션을 간단히 적용할 수 있게 만들어주는 프레임워크다. 간단한 몇 줄의 제이쿼리 코드만으로 수십 줄의 자바스크립트를 작성한 것과 같은 효과를 얻을 수 있기 때문에, 자바스크립트의 불편함을 해소해주며 모든 사람에게 자바스크립트의 강력함을 알릴 수 있다.


★ 이 책에서 다루는 내용 ★
이 책을 다 읽을 때쯤이면 HTML과 CSS로 구성된 정적인 페이지에 제이쿼리 마법을 적용해 생명을 불어 넣을 수 있을 것이다. 페이지의 엘리먼트를 선택하고, 이동시키고, 완전히 제거하고, Ajax를 이용해 새로운 엘리먼트를 추가하고, 추가한 엘리먼트에 애니메이션을 적용하는 방법을 배운다. 간단히 말하면 HTML과 CSS를 자유롭게 다룰 수 있다. 또한 제이쿼리 UI 라이브러리의 강력한 기능에 대해서도 알아본다.


★ 이 책의 대상 독자 ★

사이트에 멋진 인터랙션을 넣고 싶어하는 웹 디자이너라면 이미 제이쿼리에 대해 들어본 적이 있을 것이고 제이쿼리에 대한 자세한 내용을 궁금해할 것이다. 이 책에서 바로 해답을 찾을 수 있다. 자바스크립트를 사용한 경험이 있지만 겉으로 보기엔 간단한데도 매우 복잡하다는 사실에 좌절해 본 일이 있는 개발자라면 이 책을 통해 제이쿼리를 활용하는 방법을 제대로 알 수 있을 것이다. 제이쿼리의 기초를 이미 알고 있으나 기술 수준을 한 단계로 높이고자 하는 사람 또한 이 책을 통해 좋은 개발 조언과 깊은 지식을 얻을 수 있을 것이다.

이 책을 보려면 우선 HTML과 CSS에 대해 중급에서 고급 수준으로 알고 있어야 한다. 제이쿼리에서는 CSS 형태의 선택자를 사용해 페이지 엘리먼트를 선택하기 때문이다. 기초적인 프로그래밍 지식이 있다면 도움이 될 것이다. 제이쿼리는 추상화가 잘 되어 있긴 하지만 기본적으로는 자바스크립트이기 때문이다. 다시 말해 자바스크립트를 사용하는 경우 자바스크립트의 개념에 대해 설명했으므로 학습 의지가 있으면 더욱 좋겠다.


★ 이 책의 구성 ★

이 책은 9장으로 이루어져 있다. 시작부터 끝까지 차례대로 읽는다면 모든 주제를 잘 이해할 수 있게 된다. 특정한 주제를 살펴보고자 한다면 필요한 부분을 골라 읽어도 괜찮다.

1장: 제이쿼리 첫걸음
제이쿼리의 모든 것을 배우기 전에 우선 제이쿼리를 사용하는 이유에 대해 잠깐 살펴본다. 직접 자바스크립트 코드를 작성하는 것보다 나은 점은 무엇인지, 이제까지 있었던 다른 자바스크립트 라이브러리와 비교할 때 장점은 무엇인지 살펴본다. 그리고 제이쿼리를 이해하는 데 필요한 몇 가지 CSS 개념에 대해 살펴보고 제이쿼리를 사용하기 위해 필요한 기본 문법에 대해 간략하게 살펴본다.

2장: 선택하고 꾸미고 개선
표면적으로 일반적인 자바스크립트와 비교할 때 제이쿼리의 가장 중요한 장점은 처리할 대상이 되는 엘리먼트를 쉽게 선택할 수 있다는 점이다. 2장에서는 제이쿼리의 선택자를 사용해 대상이 되는 엘리먼트를 선택하는 방법을 배운다. 그리고 제이쿼리를 사용해 엘리먼트의 CSS 프로퍼티를 변경하는 방법에 대해 살펴본다.

3장: 애니메이션, 스크롤, 리사이즈
제이쿼리는 애니메이션에서도 뛰어나다. 메뉴를 부드럽게 슬라이드시켜 열거나 화면을 가로질러 다이얼로그가 휙 지나가는 경우에도 제이쿼리를 활용할 수 있다. 3장에서는 애니메이션과 관련된 제이쿼리의 기능을 살펴보고 몇 가지 간단한 사용자 인터페이스에 실제로 적용해본다. 그리고 페이지를 스크롤하거나 엘리먼트의 크기를 변경시킬 수 있는 애니메이션과 유사한 기능에 대해서도 살펴본다.

4장: 이미지와 슬라이드쇼
앞에서 살펴본 기본적인 내용을 바탕으로 가장 일반적인 제이쿼리 위젯인 이미지 갤러리와 슬라이드쇼를 만든다. 라이트박스, 스크롤되는 썸네일 갤러리, 크로스 페이드 갤러리, 아이포토와 유사한 형태의 플립 북을 만든다.

5장: 메뉴, 탭, 툴팁, 패널
이제 제이쿼리를 이용해 UI 위젯을 만드는 데 어려움을 느끼지 않을 것이므로 약간 더 복잡한 컨트롤인 드롭다운 메뉴와 아코디언 스타일의 메뉴, 탭 인터페이스, 툴팁, 여러 종류의 본문 패널을 살펴본다. 모든 일은 순조롭게 진행되고 있다. 사이트는 1900년대의 브로셔 같은 사이트에서 벗어나 점점 21세기의 최신 리치 인터넷 애플리케이션으로 변모해간다.

6장: 구조, Ajax, 상호작용성
6장은 계속 기다려 온 내용인 Ajax이다. 진정한 데스크톱 스타일의 애플리케이션을 웹에서 만들려면 화면에서 인터페이스를 지우는 번거로운 새로고침 작업 없이 서버와 데이터를 주고 받을 수 있어야 한다. 바로 이것이 Ajax의 역할이다. 제이쿼리는 브라우저의 차이점에 대해 신경 쓰지 않고 간편하게 Ajax 요청을 처리할 수 있는 편리한 메소드를 제공하므로 웃으면서 작업을 마칠 수 있을 것이다. 한편 코드가 점점 복잡해지므로 코드를 구성하는 좋은 사례를 먼저 살펴보려 한다. 이 모든 내용은 6장에서 확인할 수 있다.

7장: 폼, 컨트롤, 다이얼로그
폼은 모든 기획자의 골칫거리지만 어떤 웹 애플리케이션에서도 빠질 수 없는 주춧돌이다. 7장에서는 제이쿼리를 사용해 폼과 관련된 스크립트 작업을 간단하게 만드는 방법을 배운다. 실시간으로 폼의 유효성을 확인하는 방법과 사용자를 도와주는 방법과 체크박스, 라디오 버튼, 선택 목록을 쉽게 조작하는 방법에 대해 알아본다. 그리고 날짜 선택기, 슬라이더, 드래그앤드롭 같은 사이트의 사용자가 자주 사용하지 않는 고급 컨트롤에 대해서도 살펴본다. 또한 모달 다이얼로그를 살펴보고 모달이 아닌 형태의 알림을 몇 가지 살펴본다.

8장: 리스트, 트리, 테이블
애플리케이션이 '웹 2.0' 애플리케이션일지라도 사용자에게 정보를 전달하려면 매일같이 보는 목록, 단조로운 트리나 종종 놀림거리가 되는 테이블을 사용해야 할 때가 있다. 8장에서는 제이쿼리를 사용해 지루한 것들을 흥미롭게 바꾸는 방법에 대해 알아보고, 목록을 동적이고 정렬 가능한 데이터로 바꾸는 방법과 테이블을 복잡한 기능을 가진 데이터 그리드로 바꾸는 방법에 대해 알아본다.

9장: 플러그인, 테마, 고급 주제
제이쿼리를 사용하면 DOM을 조작하는 일이나 좀 더 쉽게 Ajax 요청을 보내거나 화려한 UI 컴포넌트를 사용할 수 있는 일보다 더 많은 일을 할 수 있다. 제이쿼리에는 고수급 개발자를 위한 기능이 있다. 환상적인 플러그인 구조나 확장성과 유연성이 높은 핵심 부분, 수정이 가능한 이벤트 등 매우 많은 기능이 제이쿼리에 들어 있다. 9장에서는 제이쿼리 UI 테마를 살펴본다. 제이쿼리 UI 테마를 사용하면 제이쿼리 UI 위젯의 모습을 사이트에 잘 어울리도록 쉽게 변경할 수 있다. 또한 직접 만든 플러그인도 테마를 사용하여 모습을 변경할 수 있도록 만들 수 있다.


★ 저자 서문 ★

여러분이 요리 고수든, 기업의 변호사 고수든 진짜 닌자이든 상관 없이 처음 연마해야 할 밑천은 기술이다. 일단 기술을 익히면 완벽한 고수가 되어 창조적이고 독창적인 방법으로 지식을 적용할 수 있게 된다.

제이쿼리는 까다롭고 오래된 브라우저에서조차 웹 페이지를 자유롭게 동작하도록 만드는 간편하지만 강력한 도구로서 각광받고 있다. 제이쿼리는 두 가지 목적을 가진 라이브러리다. 하나는 웹 페이지의 엘리먼트를 조작하는 것이고, 다른 하나는 Ajax 요청 처리를 도와주는 역할이다. 여러 명령어를 사용해 이런 목적을 달성할 수 있다. 명령어는 일관적이며 배우기도 쉽다. 몇 가지 액션을 연결해 적용하면 제이쿼리의 작은 기능들을 연결해 큰 기능을 만드는 일에 중독될 수 있으므로 친구나 가족은 여러분이 이러한 장점을 발견하지 않았으면 하고 바랄 것이다.

핵심 제이쿼리 라이브러리를 이용한 것에는 제이쿼리 UI가 있다. 제이쿼리 UI는 직접 컨트롤을 만들 때 필요한 모든 기능이 구현돼 있는 예쁜 모양(아코디언, 탭, 다이얼로그 같은)의 컨트롤과 위젯의 모음이다. 제이쿼리 UI를 사용하면 적은 노력으로 놀라운 인터페이스를 만들 수 있으며 제이쿼리 UI 자체가 약간의 제이쿼리 노하우만으로도 훌륭한 결과물을 만들 수 있다는 사실을 알려주는 훌륭한 예제다.

제이쿼리는 사이트의 사용성을 개선하고 더 나은 사용자 경험을 만드는 데 도움이 되는 도구다. 사용성은 물건에서 느끼게 되는 효율성이나 정밀함의 뒤에 숨겨져 있는 원리에 대한 연구를 가리킨다. 제이쿼리를 사용하면 단순히 호화롭거나 최신 유행의 디자인을 넘어 완전히 새로운 사용자 인터랙션을 구현하는 일까지 미묘하지만 극적인 방법으로 페이지를 빠르고 즐겁게 만들 수 있다.

고수가 되는 일은 API를 샅샅이 배우는 것이 아니다. 이것은 단순하게 기억력을 시험하는 일일 뿐이다. 진정한 기술과 가치는 지식을 활용해 매우 특별한 것을 만들 때 발현된다. 과거의 여러 통찰력에 근거해 누군가가 이제까지 해왔던 것보다 조금 더 좋게 하는 것이다. 이런 일은 쉽지 않다. 하지만 제이쿼리를 사용하면 재미있게 시도할 수 있다.

★ 옮긴이의 말 ★

내가 자바스크립트를 처음 사용하기 시작한 때는 웹 페이지가 고정된 문서에서 탈피해 서버에서 조건에 따라 HTML의 구성을 다르게 만들어 동적으로 변모하기 시작한 즈음인 것으로 기억한다. 요즘에는 별로 주목받지 못하는 펄(Perl)을 이용해 방명록을 만들면서 입력하는 데이터의 유효성을 확인하고 다른 방명록과 차별성을 주기 위해 마치 포스트잇을 붙이듯 화면 이곳 저곳으로 글을 옮길 수 있는 기능을 만들면서 자바스크립트를 시작했다. 하지만 그 관심은 오래가지 않았다. 상상력의 한계로 자바스크립트로 무엇을 만들어야 할지 고민한 반면 PHP나 자바를 이용해 서버에서 할 수 있는 일은 매우 많아 보였기 때문이다.

한동안 떨어져 있다가 다시 자바스크립트를 보게 됐을 때 한참 유행의 중심에 있던것은 Ajax와 Prototype.js였다. 그리고 그 때만 해도 Ajax와 Prototype.js의 흐름이 한참 계속될 것 같았다. 하지만 몇 년이 지난 지금 Ajax는 널리 확산돼 대부분의 개발자가 활용하는 기본기가 된 반면 Prototype.js는 개발자의 관심에서 벗어나 있다.
그 이유는? 바로 제이쿼리가 Prototype.js의 자리를 대신했기 때문이다. 지금은 많은 개발자가 Prototype.js 대신 제이쿼리를 선택한다.

제이쿼리의 장점을 꼽아보면 브라우저 호환성, CSS3 선택자를 활용한 엘리먼트 선택, 각종 유틸리티 함수, 제이쿼리 UI, 다양한 플러그인 등을 들 수 있다. 또한 자연스럽게 마크업 코드와 분리해 코드를 작성할 수 있다는 점이나 개발자가 많아 커뮤니티의 도움을 얻기 쉽다는 점도 다른 프레임워크와 비교할 때 장점이라 할 수 있다.
하지만 개발자에게 가장 크게 느껴지는 장점은 바로 배우기 쉬우면서도 결과물의 품질은 뛰어나다는 점이다. 이로 인해 초보자도 높은 품질의 결과물을 빠르게 개발할 수 있으니 특히 초보자에게 큰 도움이 되는 프레임워크라고 하겠다.

이 책은 제이쿼리 초보자를 위한 책이다. 정상적으로 동작하는 완성된 예제를 쉬운 설명과 함께 제공하므로 직접 코드를 실행시키면서 제이쿼리의 기초부터 쉽게 배울 수 있다. 그리고 예제도 웹 페이지에 바로 적용해 볼만한 유용한 예제들로 구성돼 있으므로 중간 중간 눈길을 끄는 예제는 직접 적용해볼 수 있을 것이다. 또한 책을 읽는 일에서 끝내지 않고 직접 입력해본다면 이 책을 다 읽을 때쯤이면 자신감을 갖고
제이쿼리를 사용할 수 있을 것이다. 이 책의 마지막 부분에는 플러그인을 제작하거나 제이쿼리의 기능을 확장하는 방법에 대해서도 설명하고 있으므로 직접 만든 자바스크립트 코드를 다른 개발자와 공유하는 즐거움도 얻을 수 있다. 또한 초보자가 아니더라도 제이쿼리에서 제공하는 메소드만 사용했던 개발자에게 흥미로운 주제가 될 것이다.

궁극적으로 자바스크립트를 사용해 웹 서비스를 만드는 일은 사용자에게 최고의 경험을 제공하기 위한 것이다. 그리고 제이쿼리는 이런 목적을 달성하기에 최적의 도구다. 여러분이 제이쿼리라는 좋은 도구를 손에 넣을 때 이 책이 도움이 되기를 바란다.

- 장정환

여러분이 요리 고수든 기업의 변호사 고수든 진짜 닌자이든 상관 없이 처음 연마해야 할 밑천은 기술이다. 일단 기술을 익히면 완벽한 고수가 되어 창조적이고 독창적인 방법으로 지식을 적용할 수 있게 된다.

근래 웹 페이지를 자유롭게 처리하고 변경해 까다롭고 오래된 브라우저에서조차 자유롭게 동작하도록 만드는 제이쿼리가 간편하지만 강력한 도구임이 증명됐다. 제이쿼리는 두 가지 목적을 가진 라이브러리다. 하나는 웹 페이지의 엘리먼트를 조작하는 것이고, 다른 하나는 Ajax 요청 처리를 도와주는 역할이다. 여러 명령어를 사용해 이런 목적을 달성할 수 있다. 명령어는 일관적이며 배우기도 쉽다. 몇 가지 액션을 연결해 적용하면 제이쿼리의 작은 기능들을 연결해 큰 기능을 만드는 일에 중독될 수 있으므로 친구나 가족은 여러분이 이러한 장점을 발견하지 않았으면 하고 바랄 것이다.

핵심 제이쿼리 라이브러리를 이용한 것에는 제이쿼리 UI가 있다. 제이쿼리 UI는 직접 컨트롤을 만들 때 필요한 모든 기능이 구현돼 있는 예쁜 모양(아코디언, 탭, 다이얼로그 같은)의 컨트롤과 위젯의 모음이다. 제이쿼리 UI를 사용하면 적은 노력으로 놀라운 인터페이스를 만들 수 있으며 제이쿼리 UI 자체가 약간의 제이쿼리 노하우만으도 훌륭한 결과물을 만들 수 있다는 사실을 알려주는 훌륭한 예제다.

제이쿼리는 사이트의 사용성을 개선하고 더 나은 사용자 경험을 만드는 데 도움이 되는 도구다. 사용성은 물건에서 느끼게 되는 효율성이나 정밀함의 뒤에 숨겨져 있는 원리에 대한 연구를 가리킨다. 제이쿼리를 사용하면 단순히 호화롭거나 최신 유행의 디자인을 넘어 완전히 새로운 사용자 인터랙션에 이르기까기 미묘하지만 극단적인 방법으로 페이지를 빠르고 즐겁게 만들 수 있다.

고수가 되는 일은 API를 샅샅이 배우는 것이 아니다. 이것은 단순하게 기억력을 시험하는 일일 뿐이다. 진정한 기술과 가치는 지식을 활용해 매우 특별한 것을 만들 때 발현된다. 과거의 여러 통찰력에 근거해 누군가가 이제까지 해왔던 것보다 조금 더 좋게 하는 것이다. 이런 일은 쉽지 않다. 하지만 제이쿼리를 사용하면 재미있게 시도할 수 있다.