White Rabbit

본문

저는 개인적으로 국내의 검색 포털을 잘 사용하지 않습니다. 정보를 가장한 광고들도 물론 짜증나지만, 무엇보다 검색 결과의 질이 별로이기 때문이죠. 하지만 블로그나 커뮤니티의 정보를 찾기 위해 어쩔 수 없이 검색 포털을 이용할 때가 있습니다. 그런데 언젠가 (벌써 꽤 오래 전의 이야기가 되어 버렸지만) N모 사의 검색 서비스를 사용하다가 깜짝 놀란 적이 있었습니다. 검색어 입력창에 검색어를 입력하는 도중에 추천 검색어가 아래에 있는 박스에 뜨는 것이 아니겠어요. 보통 어플리케이션에서 이런 기능은 별 것 아닐 수 있겠지만, 일반적인 웹어플리케이션에서는 이런 기능을 수행하기가 거의 불가능에 가깝기 때문이죠.

전통적인 웹 처리 방식은 웹서버와 브라우저 사이의 동기적인 통신에 의해 구성됩니다. 이전에 XSS를 설명할 때 잠깐 언급한 바가 있지만, 페이지를 하나를 띄우려면 브라우저에서 웹서버로 페이지에 대한 요청을 보내고 웹서버는 이를 처리하여 페이지를 응답합니다. 이 응답결과를 브라우저는 받아 화면에 표시해 주는 것이죠. 중요한 것은 이런 과정이 동기적으로 이루어진다는 것인데, 이는 브라우저가 웹서버가 응답을 보내줄 때까지 기다려야한다는 의미입니다. 잘못된 주소에 요청을 보내면 브라우저에 곧바로 에러가 뜨지 않고 일정 시간을 기다린 후 404 Not Found 에러가 뜨는 것도 이러한 동기적 통신에 의해 처리가 이루어지기 때문이죠.

이러한 특성 때문에 웹어플리케이션에서 어떤 기능을 수행하려면 언제나 페이지 전체를 로딩해야 합니다. 아무리 간단한 정보라도 웹서버에 일단 요청을 보내면 전체 HTML을 다 받아야만 응답이 마무리되게 되어 있으므로 웹서버는 전체 HTML을 전부 브라우저에 보내주어야 하는 것이죠. 하지만 N사의 추천검색어 박스나 구글의 서제스트(Suggest : http://www.google.com/webhp?complete=1&hl=en) 서비스는 페이지를 로딩시키지 않습니다. 전통적인 웹어플리케이션에서 페이지 로딩없이 이런 기능을 가능하게 하려면 모든 추천검색어를 지닌 사전 데이터를 사용자 PC에 미리 깔아놓고 이를 참조하는 것밖에 방법이 없습니다. 그러나 Ajax를 통해 페이지를 보다 동적으로 만들어주는 이러한 기능들이 가능하다는 사실을 나중에야 알게 되었죠.

Ajax는 Asynchronous JavaScript and XML의 약자로 제시 제임스 가렛(Jesse James Garrett)이라는 사람이 처음 제안한 웹 처리 방식입니다. 정확하게 말하자면 Ajax는 어떤 특정한 기술을 가리키는 말이 아니라 자바스크립트와 XML을 사용하여 웹서버와 통신하는 처리 방식(또는 플랫폼)을 의미하죠. 전통적인 웹 처리 방식이 HTML을 결과로 받는다면, Ajax에서는 XMLHttpRequest 객체를 사용하여 XML로 결과를 받습니다. 브라우저에서는 결과로 받은 XML을 적당히 가공해서 HTML로 보여주는 것이죠. 여기서 중요한 단어는 Asynchronous, 즉 비동기입니다. Ajax를 통해 브라우저가 웹서버에 요청을 보내면 응답이 올 때까지 기다릴 필요가 없습니다. 대신 XMLHttpRequest 객체의 상태 체크를 통해 웹서버로부터 응답이 왔을 때를 알 수 있고, 이 때 이에 맞는 처리를 해 주면 되는 것이죠. 이런 방식으로 페이지 전체를 로딩할 필요없이 HTML의 일부분만을 변경할 수 있습니다. 이를 위해 Ajax에서는 DOM(Document Object Model)을 사용하는데, 이에 대해서는 나중에 설명하도록 하겠습니다.

앞에서 언급한 N사의 추천검색어를 Ajax로 구현한다고 생각해봅시다. "부산국제영화제"를 검색하는 경우, 일단 "부산"이라고 치는 순간 XMLHttpRequest를 통해 "부산"이라는 키워드를 웹서버에 전송합니다. 웹서버는 "부산"에 해당하는 추천검색어를 XML로 브라우저에 돌려주고, 브라우저는 이를 받아 자바스크립트를 통해 박스를 만들고 추천검색어를 이 박스에 써 줍니다. 이런 과정을 통해 페이지 전체를 다시 로딩하는 수고를 하지 않고도 동적인 페이지를 구성할 수 있게 되는 것이죠.

현재 XMLHttpRequest를 사용하여 서비스를 구현하는 곳은 매우 많습니다. 페이지를 다시 로딩하지 않았는데도 뭔가 복잡한 동작들을 수행하는 곳 중 상당수는 Ajax를 쓰고 있다고 생각하셔도 좋습니다. 이런 Ajax를 효과적으로 사용하고 있는 곳 중 하나는 바로 구글입니다. 아까 잠깐 언급했던 서제스트(Suggest)도 그렇지만, 지도 서비스를 하는 구글맵(http://maps.google.com/)은 Ajax를 매우 잘 사용한 모범적인 예라고 할 수 있습니다. 구글맵을 접속해보면 아시겠지만, '뭐를 설치하시겠습니까?'라는 질문을 받지 않습니다. 구글맵은 Active-X나 자바 애플릿 등을 사용하지 않고, 오로지 자바스크립트만으로 구성되어 있습니다. 당연히 처음 지도를 로드할 때에는 화면에 보이는 영역의 이미지를 웹서버로부터 불러오지만, 지도를 드래그해서 전후좌우로 움직일 때 페이지 전체를 로딩하지 않고도 새로운 이미지를 받아오는 것을 확인할 수 있습니다. 이런 방식으로 모든 지도의 이미지를 PC에 다운받는 수고를 할 필요없이 실시간으로 웹서버를 통해 지도의 이미지를 가져올 수 있죠.

Ajax를 사용하여 할 수 있는 일은 무궁무진합니다. 비단 Ajax 뿐만 아니라 매크로미디어(Macromedia)의 Flex나 차세대 윈도인 롱혼(Longhorn)에서 지원할 XAML, 모질라 기반 브라우저에서 지원하는 XUL 등 대안적인 방식들의 등장으로 인해 어쩌면 웹어플리케이션의 모습은 일반 PC에서 사용하는 오피스 같은 어플리케이션과 비슷하게 될 수도 있을 것 같습니다. 이 가운데 Ajax는 웹표준기구인 W3C의 표준안을 기반으로 하고 있으며 XMLHttpRequest 역시 표준으로 지원할 예정이라는 점에 있어 장점을 지니고 있죠. Ajax를 지원하는 웹브라우저 역시 늘고 있기 때문에, 앞으로 Ajax를 사용하는 웹어플리케이션을 쉽게 접할 수 있으리라 생각합니다.

다만 웹어플리케이션의 모습이 화려해지고 풍부해진다고 무조건 좋은 현상이라고 할 수만은 없습니다. 매크로미디어 플래시가 멋진 외관과 다양한 기능을 제공하는 반면 장애인들의 접근성을 떨어뜨리고 많이 사용하지 않는 브라우저를 쓰는 유저들을 배제시키는 것처럼 말이죠. Ajax를 통한 기획/개발을 하는 사람은 언제나 이러한 소수자에 대한 고려를 잊지 말아야 할 것입니다.