인터랙티브한 방탄웹 사이트를 만들자! Ajax 기초에서 활용까지

Ajax 혹은 전체 페이지를 갱신하지 않고도 정보를 변경할 수 있는 웹페이지를 만드는 기술은 최근 부쩍 인기를 끌고 있습니다. 최신 기술에 능숙한 프로그래머가 아니라면 Ajax를 사용해서 페이지를 개선하는 작업은 쉬운 일이 아닐 것입니다. 특히 모든 사용자가 Ajax로 개발한 페이지를 잘 볼 수 있게 만드는 것은 더욱 어려운 일입니다.

이 책에서 제레미 키스는 CSS와 (X)HTML에 익숙한 개발자들이 프레임워크를 사용하지 않고도 모든 사용자가 편리하게 이용할 수 있는 웹페이지를 만들 수 있도록 단계적인 기능 향상의 원리를 적용한 Ajax 애플리케이션을 구현하는 방법을 보여줍니다. 이 책에서는 또한 접근성을 해치지 않으면서도 풍부한 상호 작용을 제공할 수 있는 Ajax 페이지를 만드는 하이잭스라는 기술을 사용한 훌륭한 예제를 확인할 수 있습니다.


[ 이 책의 특징 ]

이 책은 방탄 Ajax를 시작하는 데 필요한 모든 정보를 담고 있습니다. Ajax를 사용하면서 맞닥뜨리게 되는 질문들에 대해 실제 동작하는 예제들로 이뤄진 해답을 찾게 될 것입니다. 더욱 중요한 것은 Ajax와 관련한 개념에 대한 설명과 질문에 대한 답을 발견하게 될 것이라는 점입니다. 하지만 이 책에 상당한 분량의 코드가 포함되어 있더라도 이 책을 그저 프로그래밍 책일 뿐이라고 한정 짓지는 말아주시기 바랍니다. 이 책은 Ajax를 사용하면서 알지 못했던 영역을 탐험하는 데 필요한 안내서의 역할을 해드릴 것입니다.

Ajax는 설명이 필요한 기술입니다. 웹사이트를 만드는 데 사용하는 대부분의 도구는 두 가지 범주에 포함됩니다. HTML이나 CSS, 자바스크립트와 같은 브라우저 기술과 아파치, PHP, MySQL과 같은 서버 측 기술입니다. Ajax를 사용하기 위해서는 클라이언트 쪽 언어인 자바스크립트가 필요하지만 또한 서버와 통신할 필요도 있습니다. 그렇다면 Ajax는 클라이언트 쪽 작업일까요? 아니면 서버 쪽 작업일까요?

Ajax에 대한 관심이 증폭됨과 동시에 서버 측 프로그래머들은 브라우저 쪽으로 옮겨가고 있습니다. 그들은 다년간의 소프트웨어 디자인과 객체 지향 프로그래밍에 대해 경험이 많습니다. 그러나 웹 브라우저에서 개발하기 위해 충분히 준비가 된 상황은 아닙니다. 반면 Ajax 개발이라는 분야에 발을 담근 클라이언트 측 개발자들은 배워야 할 여러 가지 기술들의 해일과 맞닥뜨리고 있습니다.

Ajax를 배우려고 하는 서버 측 프로그래머를 대상으로 하는 책은 많이 나와 있습니다. 이 책은 그런 종류의 책이 아닙니다. 복잡한 객체를 생성하는 데 익숙한 자바프로그래머라면 이 책을 덮고 다른 책을 살펴보시기 바랍니다.
만약 프론트 엔드 개발자라면 이 책은 바로 당신이 찾던 그 책이 될 것입니다. 당신은 아마 웹 표준을 잘 알고 있을 것입니다. 의미에 맞는 마크업과 CSS를 사용하고 있을 것이며 DOM 스크립트에 대해서는 잘 모르실 수도 있습니다. 전혀 개의치 마시고 이 책을 읽어나가시기 바랍니다.

Ajax를 배우는 일이 두려운 일로 여겨질 수도 있습니다. 하지만 걱정하지 마세요. 많이 복잡하지 않습니다. 앞으로 보겠지만 자바스크립트 코드는 복잡하지 않습니다. 어려운 부분은 Ajax 애플리케이션을 방탄이 되도록 작업하는 것입니다.

2005년 8월 New Riders 사는 댄 씨더홈이 쓴 『웹 2.0을 이끄는 방탄웹』이라는 책을 발간했습니다. 댄의 철학은 유연함에 집중되어 있습니다. 사용자의 요구사항에 맞는 유연한 디자인 요소를 사용함으로써 웹사이트는 일반적인 브라우징 환경이 아닌 경우에도 정상적으로 동작하게 됩니다. 이러한 철학이 Ajax에도 적용될 수 있다고 믿고 있습니다.

대부분의 많은 Ajax 애플리케이션이 튼튼하지 못한 계획에 기초하고 있고 웹 브라우저의 일부 기술에만 의존하고 있습니다. 애플리케이션에 필요한 기술을 지원하지 못하는 브라우저는 배제되고 그 브라우저의 사용자는 발길을 돌립니다. 이러한 일을 피하기 위해 방탄 Ajax를 사용해 유연한 애플리케이션을 만들 필요가 있습니다.

이 책에 도움이 될 수 있는 웹사이트(http://bulletproofajax.com)를 만들었습니다. 이 사이트(http://bulletproofajax.com/code/)에서 이 책에서 사용된 모든 예제들을 다운로드 받아서 테스트할 수 있으며 한국어판에 실린 소스코드의 내용은 에이콘출판사 도서정보페이지(http://www.acornpub.co.kr/book/bangtan-ajax)에서 다운로드 받으실 수 있습니다. 자바스크립트와 Ajax를 사용한 최신 개발에 대한 정보를 더 얻고 싶다면 제 DOM 스크립트 블로그(http://domscripting.com/blog/)를 방문하시거나 『다이내믹한 웹 표준 사이트를 위한 DOM 스크립트』를 사보시기 바랍니다.


[ 이 책에서 다루는 내용 ]

● 웹 표준을 사용한 Ajax 애플리케이션의 견고한 기초 다지기
● 단계적인 기능 향상의 방법을 적용한 Ajax 기능 추가
● XMLHttpRequest 객체의 사용법
● Ajax를 사용해야 할 때와 사용하지 말아야 할 경우
● Ajax 상호작용으로 인해 발생하는 디자인 문제
● 브라우저의 자바스크립트 지원 여부와 무관하게 제대로 동작하는 애플리케이션 개발

[ 저자 소개 ]

제레미 키스
제레미 키스는 웹 컨설팅 회사인 클리어레프트(Clearleft) 사에서 웹 표준 삼총사인 CSS, (X)HTML, DOM을 사용해 멋지고 유용한 웹 사이트를 만들고 있습니다. 또한 웹 표준 프로젝트의 멤버이며 DOM 스크립트 태스크포스의 공동 리더입니다. 제레미 키스는 여러 워크샵에서 실용 Ajax와 DOM 스크립트를 가르치고 있으며 『다이내믹한 웹 표준 사이트를 위한 DOM 스크립트』 (에이콘출판, 2007)를 집필했습니다.


[ 역자 서문 ]

제가 처음 자바스크립트를 접했던 것은 대학교 시절 후배가 만들었던 방명록을 보았을 때였습니다. 그 때만 해도 단순하게 방명록을 작성했던 시간의 역순으로 방명록의 글들을 출력하던 것이 일반적이었으나 후배가 만들었던 방명록은 각 글들이 메모의 형태로 되어 있어 드래그앤드롭을 사용해 위치를 자유롭게 변경할 수 있었습니다. 지금은 누구나 간단하게 만들 수 있는 기능이고 실제 서비스에도 많이 적용되어 있지만 1998년이었던 저 때만해도 그런 페이지는 찾아보기 어려웠습니다. 처음 자바스크립트가 발표된 것은 1995년 겨울이었지만 국내에서는 3년이 다 되어가도록 자바스크립트를 멋지게 활용하는 사이트가 많지 않던 상황이었습니다. 주로 폼의 값이 정상적인지 여부만을 확인하기 위해 사용되고 있었을 뿐입니다. 하지만 웹 페이지의 요소들을 자바스크립트로 다룰 수 있게 되면서 다이내믹한 웹페이지를 만들기 위해 자바스크립트가 점점 많이 사용되었습니다. 그리고 2005년 Ajax를 활용한 애플리케이션이 발표되면서 자바스크립트는 다시 한번 주목받게 됩니다.

Ajax의 가장 대표적인 특징은 현재 사용자가 보고 있는 페이지에 변화를 주지 않고 서버와 통신을 하고 결과를 화면에 반영할 수 있다는 점입니다. 이러한 특징은 화면을 무조건 리프레시해야 하는 기존 웹서비스의 기반을 흔드는 것이며 Ajax를 사용함으로써 완전히 새로운 형태의 웹서비스를 만들 수 있다는 것을 의미합니다. 이런 경우의 예로서 지도 서비스를 들 수 있습니다. Ajax 이전 웹 페이지에서 지도를 보는 것은 상당히 불편했습니다. 다른 지역으로 이동하거나 축적을 변경하기 위해서는 항상 페이지를 갱신해야 했습니다. 하지만 Ajax를 적용한 최근의 지도 서비스에는 이러한 불편함이 없습니다. 드래그로 다른 지역으로 이동할 수 있으며 축적 바를 클릭해 이미지만 갱신함으로써 더 자세한 혹은 더 넓은 범위를 살펴볼 수 있게 되었습니다.

이 책은 지도 서비스와 같이 사용자들에게 완전히 새로운 경험을 선사할 수 있는 기술인 Ajax의 기초에 대한 책입니다. Ajax의 기본 개념부터 시작해서 Ajax를 사용해 어떻게 웹사이트를 개선할 수 있는지를 예제를 활용해 차근차근 알려주고 있으며 점진적인 기능 향상의 방법을 사용하여 Ajax를 사용할 수 없는 경우라도 서비스를 사용하는데 문제가 없는 웹사이트를 만드는 방법도 제시해줍니다. 나아가 실제와 유사한 예제를 이용해 어떻게 Ajax를 활용하는지를 보여줍니다. 그리고 이 책에 나오는 예제를 잘 따라가면 여러분은 다른 Ajax 개발에서도 사용할 수 있는 훌륭한 Ajax 라이브러리를 하나씩 갖게 될 것입니다. 혹시라도 이 책에서 보여주는 내용들이 다소 어려우신 분들의 경우에는 에이콘출판사에서 출간한 『웹 2.0을 이끄는 방탄웹』이나 『다이내믹한 웹 표준 사이트를 위한 DOM 스크립트』와 같은 웹 표준과 자바스크립트를 활용하는 방법에 대한 책을 먼저 보시면 이 책을 이해하시는 데 큰 도움이 될 것으로 생각합니다.


[ 역자 소개 ]

장정환
서울대학교 전기공학부를 졸업하고 하이홈에 근무했다. NHN으로 이직 후 디스플레이 광고 시스템을 담당했으며 2007년부터 Ajax UI 팀의 팀장으로서 NHN의 자바스크립트 개발 업무와 오픈 API 지원 업무를 맡고 있다. 자바스크립트를 사용해 사용자 경험을 향상시키는 것과 어떻게 하면 오픈 API를 활성화 시킬 수 있을 것인지에 대해 많은 고민을 하는 중이다.

목차

• 1장 Ajax란 무엇인가? 1
  • Ajax의 정의 5
  • Ajax 툴킷 9
  • 요약 13
    
• 2장 자바스크립트와 DOM 15
  • 자바스크립트 18
  • 문서 객체 모델 (DOM) 39
  • 요약 50
    
• 3장 XMLHttpRequest 객체 51
  • 기원 54
  • 인스턴스 만들기 55
  • 요청 보내기 59
  • 응답 받기 64
  • 코드 통합 68
  • 요약 73
    
• 4장 데이터 형태 75
  • XML 78
  • JSON 87
  • HTML 97
  • 요약 102
    
• 5장 하이잭스 103
  • 단계적인 기능 향상 106
  • 자바스크립트 분리 107
  • 단계적인 기능 향상과 Ajax 111
  • 하이잭스 사용하기 116
  • 리치 클라이언트 흉내내기 129
  • 요약 130
    
• 6장 Ajax의 함정 133
  • 하위 호환성 136
  • 자바스크립트 분리 107
  • 웹 서비스 141
  • 사용자 입력에 대한 반응 142
  • 브라우저의 동작 150
  • 요약 154
    
• 7장 Ajax와 접근성 157
  • 스크린리더의 이해 160
  • 스크린리더와 Ajax 161
  • 최신 기술 동향 165
  • 발전 가능성 169
  • 요약 171
    
• 8장 방탄 Ajax 사이트 만들기 173
  • 기획 176
  • Ajax 적용 188
  • 방탄 서점을 더욱 견고하게 204
  • 요약 208
    
• 9장 Ajax의 미래 211
  • 라이브러리, 프레임워크, 툴킷 215
  • 라이브러리 선택 218