지난 4월 나모 이야기에서 웹 2.0에 대해 다루어진 내용들은 읽어 보셔서 그 뜻과 기술적인 특징에 대해서는 이해하셨으리라 짐작됩니다.

그럼 이번에는 웹 2.0의 관련 기술 중에 많은 이목을 집중시키고 있는 Ajax에 대해 이야기해보고자 합니다.

이미 Ajax에 대해 들어 보신 분들 중에는 어떻게 읽어야 하는가의 문제를 놓고도 한번쯤 고민을 해보셨으리라 짐작이 되는데, 현재 한국 네티즌들 사이에서는 '아작스'라는 표기로 친숙하게 사용되고 있는 듯 합니다. 그러나 여기에선 Ajax를 한글로 표기하면 '에이잭스'나 '에작크스', '아약스'에 가깝기 때문에 편의상 에이잭스로 표기하고자 합니다.

에이잭스(Ajax)는 Asynchronous JavaScript-x And XML의 약자로 2005년 중반부터 화두로 떠오른 웹 기반의 비동기 통신 기법을 의미하는 용어로 Google Earth - 웹 상에서 화면의 새로 고침(refresh)없이 빠르고, 깊이 있게 세계 지도를 확인 -가 발표되면서 급부상한 기술입니다.

에이잭스(Ajax)는 그 명칭이 의미하듯 단일 기술이라기 보다는 여러 기술을 하나로 묶은 것으로 예를 들면 명칭에 표기되어 있는 Javascript-x와 XML이 그에 해당합니다. 즉, 에이잭스(Ajax)는 SOAP 및 XML 같은 통신 기술을 사용하여 비동기 요청/응답을 서버와 주고 받으며, Javascript-x, DOM, HTML 및 CSS 같은 기술을 사용하여 응답을 처리하는 기술입니다.

이렇게 명칭에 근거하여 설명하긴 했지만, 사실 비동기(Asynchronous)니,  자바스크립트(Javascript-x)니, 엑스엠엘(XML)이니 하는 것에 대한 이해없이는 어려운 개념임에는 틀림없습니다.

좀 더 이해를 돕기 위해 그럼 이번에는 기존의 웹 기법과 에이잭스(Ajax)를 비교해 보겠습니다.

기존의 웹 기법은 폼을 채우고 보내기(submit)를 누르면 웹 서버로 요청 내용이 보내지고, 웹 서버는 전달 받은 요청 내용에 맞춰 새로운 웹 페이지를 작성하여 결과물을 되돌려 보내게 됩니다. 예를 들어 회원가입을 하는 경우를 보면 회원 가입 폼에 맞춰 요구하는 내용을 채워 '가입하기' 단추를 누르죠. 그러면 입력된 자료가 서버로 전달되고 조금 뒤, 회원 가입 폼이 있던 페이지가 '회원가입을 환영합니다'라는 내용의 페이지로 바뀌게 되는 것을 알 수 있습니다.

반면에 에이잭스(Ajax)는 클라이언트 쪽에서 자바스크립트를 이용하여 필요한 데이터에 대해서만 웹 서버에 요청하고 이에 대한 결과를 받기 때문에 페이지를 새로고침할 필요없이 바로 확인할 수 있습니다. 예를 들어 구글지도의 경우 아래 그림과 같이 일본지도가 보이는 화면에 마우스를 누른 상태에서 왼쪽으로 옮기면 페이지가 바뀌지 않고 화면에 바로 결과를 보여줍니다.

이러한 방식은 웹 브라우저와 웹 서버 사이의 교환되는 데이터량이 줄어들기 때문에 응답성이 향상되고, 결과적으로 전체적인 웹 서버 처리량도 줄어드는 잇점이 있습니다.

 

여기까지의 설명만으로도 '에이잭스(Ajax)가 좋은 것인가 보구나!' 정도의 생각을 갖게 되었으리라 짐작됩니다만, 아직까지는 뭔가 부족해 보이죠?

지금부터는 에이잭스(Ajax)의 장점들에 대해 좀더 구체적으로 나열해 보겠습니다.

'비동기식 자바스크립트'가 빠른 이유는 서버의 응답을 기다리지 않고 작업이 가능하므로 대기 시간이 줄어들고, 이에 따라 서버의 부담이 줄기 때문입니다.

이전의 동기방식은 이용자가 보내기(submit)를 눌러 서버에 일일이 결과를 요청하고 이 결과를 받아서 브라우저 화면에 보여주었습니다. 당연히 사용자는 보내기(submit)를 누르고 서버가 결과처리를 해서 보내줄 때까지 모래시계를 보면서 기다리는 시간이 생기게 됩니다.

그러나 에이잭스(Ajax)는 일일이 서버에 묻지 않고 에이잭스(Ajax)를 읽은 브라우저가 스스로 생각하면서 작업을 진행하기 때문에 기다림없이 결과를 볼 수 있습니다. 즉, 브라우저 안의 자바스크립트는 부지런하게 사용자가 지시한 일을 하고, 서버와의 통신은 뒤(배경)에서 처리해 주기 때문에 가능한 일입니다.

에이잭스(Ajax)를 잘 활용한 google의 Gmail을 예로 들자면, 처음 편지를 읽어올 때만 로딩(Loading)을 하고 그 이후에는 편지나 그림, 글씨 등을 감추거나 보여줄 때 자바스크립트(Javascript-x) 차원에서 재빠르게 알아서 처리하고 서버와의 통신은 배경 작업으로 진행되기 때문에 Gmail은 로그인 후에는 무척 빠른 속도를 보여 준답니다.

에이잭스(Ajax)의 진정한 힘은 새로운 방식의 웹 접근이 가능하다는 점이며, 이는 구글지도를 살펴보면 쉽게 알 수 있습니다.

구글지도 사이트에서 왼쪽의 눈금자로 표시된 줌 단추를 위아래로 움직여서 확대축소를 해보면 지도가 커졌다가 작아졌다 하고, 지도를 마우스로 누른 상태에서 상하좌우로 끌면 마우스를 따라 지도가 움직입니다. 얼핏 보면 구글지도의 확대축소 이동 기능은 기존 지도 서비스에서도 지원한 기능이라 평범해 보일 수 있습니다.

그럼에도 구글지도가 놀라운 신기술이라는 찬사를 받는 이유는 이런 기능이 브라우저의 HTML 문서 안에서 이루어지기 때문입니다. 구글지도를 사용하기 위해 ActiveX 컨트롤과 같은 프로그램을 설치하거나 별도의 기능을 갖춘 새로운 창을 열 필요가 없습니다. 일반 사이트의 HTML 문서를 보는 것처럼 브라우저 화면 안에서 지도 서비스를 사용할 수 있습니다.

국내에도 지도 서비스 사이트는 많지만 구글처럼 브라우저 화면 안에서 자유롭게 지도를 움직일 수 있는 서비스가 없다는 사실을 생각하면 구글지도가 대단한 기술임에는 틀림없습니다.

브라우저 화면 안의 글이나 객체를 자유롭게 재구성할 수 있습니다. 지금까지는 HTML 문서를 브라우저에 열어 내용의 위치를 마음대로 바꾸는 것이 어려웠던 것은 사실이고, 만약 어떤 사이트에서 이런 기능을 구현했다면 특정 메뉴를 누르도록 한 다음에 서버에서 HTML 문서를 다시 받아 보여주는 우회적인 방식을 취했을 터이지만, 에이잭스(Ajax)를 이용하면 웹 브라우저에 열린 HTML 문서의 그림이나 글과 같은 구성요소의 위치를 마우스를 이용해 끌어다놓는것만으로 손쉽게 바꿀 수 있습니다.

구글의 개인화가 그 예인데, 해당 서비스에서 메뉴를 선택하면 화면 이동없이 화면 구조가 바뀌며, 마우스를 이용하여 옮기려는 내용을 원하는 위치에 끌어다 놓으면 바로 재배치됩니다.

이처럼 에이잭스(Ajax)는 기존의 정적인 HTML 문서에서는 사실상 불가능했던 획기적인 기능을 구현할 수 있도록 해줍니다. 특별한 프로그램을 설치하지 않고도 웹 상에서 이러한 기능 구현이 가능해질 경우 많은 변화가 일어나는 것은 당연하지 않을까요?

그렇다면 이러한 장점을 가진 에이잭스(Ajax)가 어디에 사용되는지 알아 보겠습니다.

구글은 에이잭스(Ajax) 접근법을 개발하는데 엄청난 투자를 하고 있습니다. 지난 몇년간 구글에서 개발된 주요 제품들 Orkut, Gmail, Google Groups, Google Suggest, Google Maps은 모두 에이잭스(Ajax) 어플리케이션입니다.

그외에도 아마존의 A9 검색엔진, 넷플릭스의 DVD 대여서비스 플랫폼 역시 유사한 기술들이 적용되었습니다.

이것은 에이잭스(Ajax)가 실제 어플리케이션 개발에서도 꽤 실용적이라는 것을 보여주는 것입니다. 게다가 에이잭스(Ajax) 어플리케이션은 어떤 규모에서도 구현이 가능해, 현재 대화형 웹 페이지를 위한 도구로서도 이용되고 있으며, 한국에서는 네이버와 다음 등을 비롯한 포털 업체에서 이 기술을 도입하고 있는 것으로 알고 있습니다.

이렇게 다양한 곳에서 이용하려고 시도하고 있는 에이잭스(Ajax)에 대해 우리는 어떤 준비가 필요할까요?

마이크로소프트사의 인터넷 익스플로러만을 고려하면 되었던 예전의 기술과는 달리 에이잭스(Ajax)를 지원하는 브라우저가 다양해져 새로운 형태의 사이트가 나타나는 것은 당연한 일이며, 프레임 워크를 제공하는 회사나 웹 개발자에게도 새로운 기회를 제공할 것이라는 것은 쉬이 짐작할 수 있습니다.

즉, 에이잭스(Ajax)는 향후 웹서비스에서 매우 중요하고 핵심적인 기술로 자리 잡을 것이라는 것은 누구나 전망할 수 있는 일입니다.

그러나 앞에서 언급된 것처럼 에이잭스(Ajax)는 XML과 HTML 태그, CSS, 자바스크립트(Javascript-x)를 사용하므로 웹 표준과 웹 접근성에 대한 근본적인 이해가 있어야 제대로 사용할 수 있습니다. 웹 표준과 웹 접근성 문제는 웹개발자에게 당연하게 요구되는 기본 지식이긴 하지만, 웹디자인 학원에서 단기 과정으로 배출된 수 많은 국내 웹 기획자 웹 디자이너에게 웹 표준과 웹 접근성을 요구하는 것은 쉽지 않습니다.

그러므로 자신의 경쟁력을 높이기 위해 에이잭스(Ajax) 기술을 습득하고자 한다면 웹 표준과 웹 접근성부터 공부한 후에 에이잭스(Ajax)에 관심을 가져야 할 것입니다.

또한 이러한 기술을 갖췄다 하더라도 에이잭스(Ajax) 어플리케이션 디자인에 관심을 가져야 할 것으로 봅니다. 좀 더 넓게 가능성들을 열어 놓고 다양한 방식의 디자인 접근이 되어야 에이잭스(Ajax)에 대한 준비가 되었다고 할 수 있지 않을까요?