HTML과 CSS를 어느 정도 이해하고 있는 웹 디자이너에게 프로그래밍의 기본기를 알려주고 제이쿼리와 플러그인을 어떻게 사용할 수 있는지를 알려주는 책이다. 프로그래밍 지식이 전혀 없어도 단계별로 따라가면서 나만의 드롭다운 메뉴나 슬라이드쇼를 만들어가는 경험을 할 수 있다. 저자가 UI 디자이너의 시각에서 프로그래밍에 대한 생각을 공유하기 때문에 여타 기본서보다는 디자이너에게 좀 더 익숙한 표현으로 프로그래밍을 배울 수 있을 것이다.


[ 이 책에서 다루는 내용 ]

■ 제이쿼리 라이브러리를 내려받아 웹사이트에 포함하기
■ 사진 갤러리와 멋진 애니메이션 효과가 적용된 슬라이드쇼, 캐러셀, 슬라이더 만들기
■ 플러그인을 사용하지 않고도 몇 줄의 코드로 탭 인터페이스 구현하기
■ 사이트에 어울리고 방문자가 편하게 사용할 수 있는 나만의 스크롤바 만들기
■ 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를 어느 정도 이해하고 있으면서 기본적인 자바스크립트를 배워 실력을 향상하고자 하는 웹 디자이너를 위한 책이다. 이전에 자바스크립트를 한 번도 작성해본 적이 없어도 괜찮다. 이 책에서는 기초적인 자바스크립트 지식을 단계별로 배워가면서 콘텐츠를 접거나 드롭다운 메뉴, 슬라이드쇼 같은 멋진 작업을 완성해나갈 수 있다. 이 모든 것을 제이쿼리 라이브러리만으로 할 수 있다.


[ 저자 소개 ]

나탈리 맥리 (Natalie MacLees)
웹 개발자이자 UI 디자이너인 나탈리 맥리는 로스앤젤레스에서 크라우드소싱을 바탕으로 흩어져 있는 가족 정보를 하나의 가계도로 만들어주는 서비스인 지니(geni.com) 개발팀에서 일하고 있다. 노엘 소(Noel Saw)와 함께 남부 캘리포니아 워드프레스 사용자 그룹(socalwp.org)을 이끌고 있으며 비정기 모임과 세미나, 워크숍을 주관하고 있다. 2010년에는 에이프릴 호지 실버(April Hodge Silver)가 쓴 『WordPress 3 Complete』의 기술 감수자로 참여했다. 개인 홈페이지는 nataliemac.com이다.
웹에 대한 그녀의 열정은 1996년 처음 컴퓨터를 사서 첫 번째 웹사이트를 만들면서 시작됐다. 오프라인에서는 농구 시합 관람, 공예품 만들기, 책 읽기, 요리하기, 벨리댄스, 헬로키티 아이템 모으기를 즐기며 아보카도와 올리브는 절대 먹지 않는다. 로스앤젤레스에 살면서 주근깨가 많아지는 것을 걱정하면서도 일광욕을 즐기며 언제까지나 개발자로 살 수 있기를 희망한다.



[ 옮긴이의 말 ]

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

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

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

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

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

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


[ 옮긴이 소개 ]

이준하
현재 ㈜투비소프트에서 개발자들의 행복한 삶을 위해 노력하고 있으며 '열이아빠의 RIA 이야기(http://koko8829.tistory.com)'라는 블로그를 통해 다양한 시각을 나누고 새로운 경험을 중심으로 나타나는 여러 가지 현상을 탐구하고 있다. 최근에는 기업 환경에 최적화된 RIA 솔루션을 고민하며 페이스북 페이지 BizRIA(http://www.facebook.com/BizRIA)에서 다양한 인사이트를 공유하는 데 많은 관심을 갖고 있다.

목차

• 1장 디자이너, 제이쿼리를 만나다
  • 제이쿼리란?
  • 제이쿼리는 왜 디자이너에게 근사한 도구인가?
    • 익숙한 CSS 선택자를 사용한다
    • 이미 알고 있는 HTML 문법을 사용한다
    • 짧은 코드로 인상적인 효과 보여주기
    • 당장 사용할 수 있는 수많은 플러그인
    • 대단한 커뮤니티를 만나보자
  • 자바스크립트 기초
    • 점진적 향상과 적절한 낮춤
    • 서로 분리해보자
  • 디자이너, 자바스크립트를 만나다
    • 변수
    • 오브젝트
    • 함수
  • 제이쿼리를 내려받고 시작할 준비하기
  • 실습 예제: 제이쿼리 내려받기
  • 제이쿼리를 사용하는 또 다른 방법
  • 처음 만나는 제이쿼리 스크립트
  • 실습 예제: 제이쿼리를 만나보자
    • 단락 추가하기
  • 실습 예제: 새로운 단락 추가하기
  • 정리
    
• 2장 링크 다루기
  • 새로운 창에 링크 열기
    • target 속성을 그냥 사용하면 안 되나?
  • 실습 예제: 새로운 창에서 링크 열기
  • 링크에 아이콘 추가하기
  • 실습 예제: 링크 목록 만들기
  • 간단한 탭
  • 실습 예제: 간단한 탭 만들기
  • 정리
    
• 3장 좋아 보이는 FAQ 페이지 만들기
  • FAQ 페이지 마크업
  • 실습 예제: HTML 준비하기
  • 실습 예제: HTML 문서 움직이기
  • FAQ 페이지를 맵시 있게 만들기
  • 실습 예제: 맵시 있게 만들기
  • 이제 거의 다 왔다!
  • 실습 예제: 마무리 작업
  • 정리
    
• 4장 나만의 스크롤바 만들기
  • 디자이너, 플러그인을 만나다
    • 플러그인 선택하기
  • 스크롤이 있는 HTML 준비하기
  • 실습 예제: 스크롤이 있는 HTML
  • 나만의 스크롤바 추가하기
  • 실습 예제: 간단한 나만의 스크롤바 만들기
  • 화살표 추가하기
  • 실습 예제: 위, 아래 화살표 추가하기
  • 나만의 스크롤바 스타일 만들기
  • 실습 예제: 나만의 스타일 추가하기
  • 부드러운 스크롤
  • 실습 예제: 부드러운 스크롤 설정하기
  • 정리
    
• 5장 나만의 툴팁 만들기
  • 간단한 텍스트 툴팁
  • 실습 예제: 간단한 텍스트 툴팁
  • 큐팁을 맵시 있게 만들기
  • 실습 예제: 큐팁 맵시 있기 만들기
  • 나만의 툴팁 스타일
  • 실습 예제: 나만의 툴팁 스타일 만들기
  • 툴팁을 이용한 내비게이션 기능 향상
  • 실습 예제: 맵시 있는 내비게이션 바 만들기
  • 툴팁에서 그 밖의 콘텐츠 보여주기
  • 실습 예제: 나만의 Ajax 툴팁 만들기
  • 정리
    
• 6장 인터랙티브 내비게이션 메뉴 만들기
  • 수평 방향 드롭다운 메뉴
  • 실습 예제: 수평 방향 드롭다운 메뉴 만들기
  • 실습 예제: 제이쿼리로 드롭다운 메뉴 개선하기
  • 수직 플라이아웃 메뉴
  • 실습 예제: 수직 플라이아웃 메뉴 만들기
  • 나만의 내비게이션 메뉴 만들기
    • :hover / .sfHover
    • 다단계로 물려받는 스타일
  • 웹 브라우저 접두사
  • 실습 예제: 나만의 슈퍼피쉬 메뉴 만들기
    • 나만의 애니메이션
  • 실습 예제: 나만의 애니메이션 추가하기
  • 호버인덴트 플러그인
  • 실습 예제: 호버인덴트 플러그인 추가하기
  • 정리
    
• 7장 비동기 내비게이션
  • 간단한 비동기 내비게이션
  • 실습 예제: 간단한 웹사이트 설정하기
  • 실습 예제: Ajax 마법 더하기
  • 고급스런 비동기 내비게이션
  • 실습 예제: 고급스런 비동기 내비게이션 만들기
  • 실습 예제: 비비큐 플러그인 사용하기
  • 실습 예제: 내비게이션에서 현재 페이지 강조하기
  • 실습 예제: 로딩 애니메이션 추가하기
  • 정리
    
• 8장 라이트박스로 콘텐츠 보여주기
  • 간단한 사진 갤러리
  • 실습 예제: 간단한 사진 갤러리 만들기
  • 컬러박스의 기능 확장하기
    • 화면 전환
  • 실습 예제: 전환 효과 바꿔보기
    • 크기 고정하기
  • 실습 예제: 크기 고정하기
    • 슬라이드쇼 만들기
  • 실습 예제: 슬라이드쇼 만들기
  • 멋진 로그인창
  • 실습 예제: 멋진 로그인 양식 만들기
  • 비디오 플레이어
  • 실습 예제: 라이트박스에서 비디오 보여주기
  • 단일 페이지 웹 갤러리
  • 실습 예제: 단일 페이지 웹 갤러리 만들기
  • 정리
    
• 9장 슬라이드쇼 만들기
  • 슬라이드쇼 구성하기
  • 간단한 크로스페이드 슬라이드쇼
  • 실습 예제: 간단한 크로스페이드 슬라이드쇼 만들기
  • 니보 슬라이더
  • 실습 예제: 니보 슬라이더 슬라이드쇼 만들기
  • 갤러리픽 슬라이드쇼
  • 실습 예제: 갤러리픽 슬라이드쇼 만들기
  • 크로스슬라이드 플러그인
  • 실습 예제: 크로스슬라이드 슬라이드쇼 만들기
  • 정리
    
• 10장 캐러셀과 슬러이더로 콘텐츠 다루기
  • 제이캐러셀 기본
  • 실습 예제: 간단한 캐러셀 만들기
  • 움직이는 뉴스 티커
  • 실습 예제: 움직이는 뉴스 티커 만들기
  • 콘텐츠 슬라이더
  • 실습 예제: 콘텐츠 슬라이더 만들기
    • 페이지 이동하기 기능
  • 실습 예제: 페이지 이동하기 기능 추가하기
    • 다음/이전 버튼
  • 실습 예제: 다음/이전 버튼 추가하기
  • 캐러셀 슬라이드쇼
  • 실습 예제: 섬네일 슬라이드쇼 만들기
    • 슬라이드쇼
  • 실습 예제: 슬라이드쇼 추가하기
    • 다음/이전 버튼
  • 실습 예제: 다음/이전 버튼 활성화하기
  • 정리
    
• 11장 인터랙티브 데이터 그리드 만들기
  • 기본 데이터 그리드
  • 실습 예제: 기본 데이터 그리드 만들기
  • 데이터 그리드 디자인하기
  • 실습 예제: 데이터 그리드 디자인하기
  • 정리
    
• 12장 멋진 입력 양식 만들기
  • HTML5 입력 양식
  • 실습 예제: HTML5 입력 양식 설정하기
  • 포커스 설정하기
  • 실습 예제: 첫 번째 입력 필드에 포커스 설정하기
  • 힌트 문자
  • 실습 예제: 힌트 문자 추가하기
  • 사용자 입력 값 검증하기
  • 실습 예제: 즉석에서 입력 값 바로 검증하기
  • 멋진 디자인 만들기
  • 실습 예제: 멋진 양식 디자인 만들기
    • 애매한 요소 디자인하기
  • 실습 예제: 애매한 요소를 디자인할 수 있게 유니폼 플러그인 추가하기
    • 나머지 디자인하기
  • 실습 예제: 나머지 디자인하기
    • 나만의 테마 만들기
  • 실습 예제: 나만의 유니폼 테마 만들기