[scrap] 구글맵스, 지메일, 개인화에 적용된 AJAX

출처: 김중태문화원 강좌(www.dal.co.kr/chair/) [갈래: semanticweb] 2005년 11월 09일

원본주소: http://www.dal.co.kr/chair/semanticweb/sw0702.html

비동기 자바스크립트는 빠르고 서버 부담이 적다.

'Asynchronous Javascript'는 왜 유용할까? 서버의 응답을 기다리지 않고 작업이 가능하므로 대기시간이 줄어들고, 이에 따라 서버의 부담이 줄기 때문이다. 이전의 동기방식은 이용자가 아이콘을 누르면 서버에 일일이 결과를 요청하고 이 결과를 받아서 브라우저 화면에 보여주었다. 당연히 사용자는 아이콘 하나를 누르고 서버에서 결과처리를 해서 보내줄 때까지 기다려야 했다. 그 동안 자바스크립트와 브라우저는 전달자 역할만 하고 놀고 있었던 것이다. 그렇지만 Ajax를 이용하면 일일이 서버에 묻지 않고 Ajax를 읽은 브라우저가 스스로 생각하면서 작업을 한다. 브라우저 안의 자바스크립트는 부지런하게 사용자가 지시한 일을 하고, 서버와의 통신작업은 배경(백그라운드)작업으로 처리한다. 자바스크립트로 xmlhttp를 통해 XML 자료를 관리하기 때문에 다시 페이지를 불러올 필요가 없는 것이다. 예를 들어 사용자가 그림 감추기를 선택할 경우 서버 응답을 기다리지 않고 브라우저가 일단 그림을 감추어 표시하고 서버와의 통신은 비동기로 처리하는 식이다.

Ajax를 잘 활용한 구글의 지메일을 예로 들자면, 처음 편지를 읽어올 때만 로딩(Loading)을 하고 그 이후에는 자바스크립트 차원에서 처리한다. 편지나 그림, 글씨 등을 감추거나 보여줄 때 일단 자바스크립트가 재빠르게 알아서 처리하고 서버와의 통신은 배경작업으로 처리한다. 그래서 지메일은 로그인 후에 무척 빠른 속도를 보인다.

* 지메일에 로그인 하면 '로드중...'이라는 말이 나오며 서버와 통신을 한다.

* 편지보기에서 추가옵션을 누른다.

* 즉시 추가옵션을 감추거나 보여준다.

일반 브라우저 화면에서 강력한 기능 구현이 가능하다.

그렇지만 Ajax가 단순하게 속도만 좀 빨라지는 것에 불과하다면 '혁명적인 차세대 기술'로 주목받기 어려울 것이다. Ajax의 진정한 힘은 새로운 방식의 웹접근이 가능하다는 점이다. Ajax를 이용한 사이트가 기존 사이트와 다른 점을 살펴보려면 Ajax를 잘 활용하고 있는 구글의 서비스 몇 개를 살펴보는 것이 좋다.

먼저 구글지도(http://maps.google.com/)를 살펴보자. 구글지도 사이트에서 왼쪽의 눈금자로 표시된 줌 단추를 위아래로 움직여서 확대축소(줌인아웃)를 해보면 지도가 커졌다가 작아졌다 한다. 지도를 마우스로 딸깍한 상태에서 상하좌우로 끌어다놓기를 하면 마우스 따라 지도가 움직인다. 얼핏 보면 구글지도의 기능 자체는 평범해보인다. 확대축소 이동 기능은 기존 지도 서비스에서도 지원한 기능이기 때문이다.

* 구글지도 왼쪽의 눈금자를 움직이면 지도가 확대축소된다.

* 방향키 쪽그림(아이콘)을 눌러 지도를 이동시킬 수 있다.

* 구글지도는 일반 브라우저에서도 마우스로 지도를 딸깍 하고 끌어다놓기(drag & drop) 형식으로 지도를 움직일 수도 있다.

구글지도가 놀라운 신기술로 무장했다고 찬사를 받는 이유는 이런 기능이 브라우저의 HTML 문서 안에서 이루어지기 때문이다. 구글지도를 사용하기 위해 프로그램 설치를 하거나 별도의 기능을 갖춘 새로운 창이 뜨지도 않는다. 일반 사이트의 HTML 문서를 보는 것처럼 일반 브라우저 화면 안에서 지도 서비스를 사용하고 있는 것이다. 국내에도 지도 서비스 사이트는 많지만 구글처럼 일반 브라우저 화면 안에서 자유롭게 지도를 움직일 수 있는 서비스는 없다는 사실을 생각하면 구글지도가 왜 대단한 기술인지 알 수 있을 것이다.

이미 출력된 HTML 문서를 자유롭게 재배치한다

그림만 마우스로 자유롭게 제어할 수 있는 것이 아니다. 브라우저 화면 안의 글이나 객체도 자유롭게 제어할 수 있다. 지금까지는 웹사이트 문서를 브라우저에 출력한 상태에서 자료의 위치를 사용자가 마음대로 편집하는 것이 어려웠다. 예를 들어 화면이 작은 PDA 사용자가 왼쪽의 글씨나 그림을 가려서 안 보이는 오른쪽 부분과 바꿔치기 해서 보기는 힘들다. 지금까지 이런 기능을 구현해주는 서비스도 없지만 만약 어떤 사이트에서 이런 기능을 구현한다면 특정 메뉴를 누르도록 한 다음에 HTML 문서를 서버에서 다시 보내주는 형식을 취했을 것이다. 하지만 Ajax를 활용할 경우에는 이미 출력된 HTML 문서의 그림이나 글씨 위치를 마우스로 끌어다놓기로 손쉽게 바꿀 수 있다.

구글의 개인화(한글:http://www.google.co.kr/ig,영문: http://www.google.com/ig)서비스에서 메뉴를 선택하면 화면 이동 없이 화면 구조가 바뀌며, 옮기려는 영역을 마우스로 끌어다놓으면 원하는 위치로 바로 재배치되는 것을 볼 수 있다. 물론 프로그램 추가 설치 없이 일반 브라우저 화면에서 이루어지는 기능이다.

* 구글개인화 서비스에서 'Add Content'를 누르면 페이지 이동 없이 화면 전체가 오른쪽으로 밀리며 왼쪽에 차림표 영역이 만들어진다.

* 왼쪽 중간의 'CNET News.com' 영역을 마우스로 딸깍 한 후 이동시킨다.

* 원래의 CNET 문단과 이동하는 CNET 문단이 겹쳐지면서 이동과정을 볼 수 있다.

* CNET 문단이 가운데 위로 이동했다.

* 이번에는 오른쪽 위에 있던 '자료모음' 문단을 왼쪽으로 옮기고 있다.

* 오른쪽 위의 '자료모음'이 왼쪽 중간의 CNET이 있던 자리로 이동했다.

이처럼 Ajax는 기존의 정적인 HTML 문서에서는 사실상 불가능했던 획기적인 기능을 구현해줄 수 있도록 해준다. 특별한 프로그램을 설치하지 않고도 PC에서나 가능했던 작업이 웹 상에서 가능해질 경우 많은 변화가 일어날 것이다. 나모웹에디터나 포토샵의 편집 기능을 웹 상에서 바로 구현할 수 있는 것이다. 해외는 물론 국내에서도 Ajax에 주목하는 이유는 Ajax를 이용할 경우 이처럼 강력하고 멋진 기능을 가진 웹서비스를 제공할 수 있기 때문이다.