이번 시간에는 약간 기술적인 이야기를 해 볼까 합니다. 웹2.0도 생소하시겠지만, 웹2.0 시대에 갑자기 각광을 받은 기술이 있습니다. 그 이름도 어색하게 들리는 AJAX(에이잭스).

이번 시간에는 AJAX라는 기술이 웹2.0에 어떤 영향을 주었는지, 그리고 어떤 화두를 우리에게 던져 주었는지 살펴보겠습니다.

[AJAX란?]

AJAX(에이잭스)란 Asynchronous JavaScript + XML의 줄임말입니다. 우리말로 풀어쓰면 '비동기 자바스크립트 XML'이라고 하고 읽을 때는 에이잭스라고 읽습니다.

AJAX는 RIA(리아)라는 인터넷을 보다 윤택하게 하는 기술 중 하나로 꼽히고 있습니다. 우리가 잘 알고 있는 RIA에는 플래시가 대표적이죠. 플래시의 다이내믹한 기능과 맞먹을 수 있는 성능을 AJAX라는 기술을 통해 구현하고 있기 때문에 '혁명적인 차세대 기술'로 표현하기도 합니다.

AJAX는 웹2.0 시대에 웹브라우저로 각종 어플리케이션을 구현할 수 있는 방법론이라고 할 수 있습니다. 웹브라우저와 서버 사이에는 XML을 통하여 통신을 하고, 사용자가 보는 웹브라우저 화면 인터페이스로는 자바스크립트를 사용하는 등 복합적인 기술이 접목되어 웹 서비스를 윤택하게 해 줍니다.

기존의 웹 사이트는 변경되는 정보가 하나 있으면 화면 전체를 새로고침 했었죠? 즉 클릭 한번에 화면 새로고침 한번. 이런 식으로 운영되는 것이 일반적인 모습이었습니다. 하지만 AJAX를 활용하면 그러한 새로고침이 줄어듭니다. 변경이 많이 되는 부분은 실시간으로 XML이 서버와 통신을 하겠지만, 변경이 상대적으로 적은 부분은 자바스크립트로 미리 구현을 해 놓고 필요할 때 웹브라우저에서 불러오기 때문에 서버와의 통신 횟수도 적고, 화면의 전환도 빠르게 되는 겁니다. 당연히 서버와의 통신이 적으니 서버의 부담도 적고, 트래픽도 감소하겠죠?

AJAX를 통해 서버의 부담도 줄여주고, 사용성도 높일 수 있는 겁니다.

아... 뭔가 복잡하고 머리 아픈 기술 용어들이 계속 나오죠? 기술 용어는 여기까지만 하고 이제 보다 현실적인 이야기를 해 보겠습니다.

[웹2.0과 AJAX]

AJAX는 웹2.0에 짜잔~ 하고 나타난 신기술이 아닙니다. XML이라는 기술도 예전부터 있었던 것이고, 자바스크립트도 아주 오래된 것입니다. 다만, 이러한 것들을 복합적으로 사용함으로써 기존의 웹서비스의 한계로 생각되는 많은 것들을 가능하게 했다는 점에서 높은 점수를 주고 있는 것입니다.

게다가 웹2.0 기업의 대표주자로 추앙받는 구글이 구글의 지도서비스인 로컬(http://local.google.com)과 이메일 서비스인 지메일(http://www.gmail.com)에 AJAX를 사용함으로써 웹2.0 서비스를 구현하는 인기 개발방법론으로 자리매김 하게 되었습니다.

구글의 AJAX 사용 이후 요즘 나오는 웹2.0 서비스에는 AJAX를 사용하지 않는 것이 거의 없게 되었습니다. 심지어 너무 AJAX를 남발하여 사용성이 저하되는 사례들도 있을 정도로 활용에 대한 인기가 높다고 할 수 있습니다.

아직도 AJAX에 대한 감이 잘 안오시죠? 자...예를 들어보겠습니다.

(*** 개발팀은 콘텐츠 화면에 직접 구글 로컬의 실제 서비스를 불러올 수 있는지 확인 필요... iframe을 사용해서라도... ***)

(***http://local.google.com의 화면 참조***)

화면에 보시는 것은 구글 로컬 서비스입니다. 화면 오른쪽에 지도가 보이죠? 그 지도를 마우스로 드래그 해 보세요. 어떠세요. 화면의 지도가 부드럽게 잘 움직이죠? 이번에는 지도 위에 마우스 커서를 올려 놓고 마우스의 휠을 위, 아래로 움직여 보세요. 지도가 확대, 축소가 부드럽게 되죠?

그런데 여기서 여러분은 이런 생각을 하실 겁니다.

'에이~ 이게 뭐... 내가 그 동안 써 오던 지도 서비스들도 드래그 기능과 확대, 축소 기능은 모두 제공하고 있었는데, 이게 뭐 대단한 거라고...'

그런데요. 구글 로컬 이전의 우리나라 지도 서비스들은 ActiveX로 별도의 소프트웨어를 설치해야만 이런 기능을 제공했던 반면에 구글 로컬은 별도의 소프트웨어를 설치하지 않고 순수 웹브라우저만 가지고 이런 기능을 제공했다는데 놀랐던 겁니다. 이렇게 자유로운 기능을 웹브라우저에서 구현하려면 당연히 별도의 소프트웨어를 설치해야만 한다고 생각하던 웹프로그래머들이 구글 로컬의 서비스를 보면서 입이 쩍 벌어 졌던 겁니다. 그래서 이 서비스가 세상에 알려진 이후에 그리고 구글의 이메일 서비스인 지메일이 유명해 지면서 AJAX라는 기술은 주목을 받기 시작했습니다.

그래서 지금은 네이버의 지도 서비스도 AJAX로 구현되어 구글 로컬과 같은 기능을 별도의 소프트웨어를 설치하지 않고 제공하기에 이르렀죠. 진짜냐구요? 네이버 지도(http://maps.naver.com/) 서비스를 한번 가보세요. 그리고 마우스로 드래그를 한번 해보세요. 구글 로컬과 유사하게 부드럽게 움직이는 지도를 볼 수 있을 겁니다.

물론 이러한 서비스들은 계속해서 진화되고 있기 때문에 여러분이 이 내용을 들으실 때는 어떻게 바뀌어 있을지 모르겠으나, AJAX를 사용하여 사용자들이 보다 편리하게 바뀌고 있다는 것 만은 확실 할 것으로 생각 됩니다.

[AJAX가 사용되는 서비스들]

자...AJAX가 무엇이고 어떻게 주목받기 시작했는지 확인해 보았는데요. 그러면 진짜로 AJAX가 많이 사용되고 있을까요? 그럼 도대체 어디에 어떻게 사용되고 있을까요? 한번 살펴보겠습니다.

1. 검색어 추천

우리가 너무 익숙해서 이것이 도대체 AJAX인지 아닌지도 모르게 사용하고 있는 서비스가 있습니다. 바로 포털 사이트의 검색어 추천 서비스인데요.

(*** 네이버 검색창에 검색어를 입력하면 이전에 입력된 검색어 리스트 중 유사한 것을 추천해주는 서비스를 보여준다.***)

네이버의 검색창으로 예를 들어보겠습니다. 검색창에 "우리나라"라는 검색어를 입력한다고 가정해 보면, 검색창에 우리는 '우', '리', '나', '라' 라는 글자를 한 글자씩 입력하게 됩니다. 이렇게 한 글자씩 입력할 때 마다 검색창 아래에는 각 글자와 과련이 있는 검색어를 추천하고 있죠? 기억이 안나신다고요? 지금 네이버 검색창에 검색어를 입력해 보세요. 물론 다른 포털 사이트의 검색창도 마찬가지 기능을 합니다.

이렇게 검색어 추천을 하는데 AJAX가 사용됩니다. 물론 네이버나 엠파스 등이 먼저 사용한 것이 아니고, 이것도 구글이 구글 서제스트라는 서비스에서 먼저 시도를 한 후에 우리나라 포털 사이트에까지 영향을 주게 된 것입니다.

(*** http://www.google.com/webhp?complete=1&hl=en 주소에 있는 화면 중 검색어를 입력했을 때 아래에 검색어가 추천되는 모습을 움직이는 화면으로 캡쳐하여 보여준다. ***)

2. 지도 서비스

앞서 설명했던 지도 서비스에 AJAX가 많이 사용됩니다. 구글 로컬, 네이버 지도 등에서 활용되고 있고, 윙버스(http://www.wingbus.com)라는 웹2.0 여행 사이트에서도 여행과 관련된 지도를 AJAX로 구현하여 활용도를 높이고 있습니다.

3. 개인화 서비스

이전에 설명했던 개인화 서비스를 기억하시나요? 넷바이브스나 위자드닷컴 등의 개인화 서비스에서는 AJAX를 사용하여 탭의 추가나 메뉴의 추가 시에 우리가 기존에 사용하던 모습과는 다른 사용성을 보여주고 있습니다. 특히 메뉴를 추가할 때 드래그를 해서 원하는 곳에 드롭하면 추가되는 등, 혁신적인 사용환경을 제공하고 있죠. 진짜 그렇냐고요? 그럼요. 꼭 한번 해보세요. 윈도우의 파일을 옮길 때만 가능한줄 알았던 드래그 앤 드롭 기능이 웹브라우저에서도 된 다는 것을 직접 확인해 보시면 AJAX가 왜 웹2.0 서비스에 많이 사용되고 있는지 아실 겁니다.

4. 일정 서비스

일정의 중요성은 비즈니스맨이라면 두말하면 입아프죠. 보통은 아웃룩의 일정 기능을 이용하거나 프로젝트 관리의 경우에는 전문적인 소프트웨어를 이용하는 등 일정을 관리하기 위해 많은 노력을 하고 있습니다. 하지만 아웃록의 일정이나 일정 관련된 윈도우용 소프트웨어는 회사면 회사, 집이면 집에서만 사용할 수 있기 때문에 일정의 공유가 불편하죠. 그래서 나오기 시작한 것이 PIMS인데, 이것도 솔직히 불편합니다.

이러한 일정관리의 불편함을 해소하기 위해 웹2.0이 나섰습니다. 구글 캘린터나 마이스프링(http://www.myspring.net)이 대표적인 경우인데요. 구글 캘린더는 구글 계정이 있어야 체험할 수 있으니, 마이스프링을 가지고 설명 드릴께요.

일단 마이스프링에 접속을 하신 후에 미리써보기 메뉴를 선택합니다. 그러면 달력 모양의 일정표가 나오죠? 빈 칸을 마우스로 클릭한 후에 적고 싶은 일정을 적어보세요. 잘 적히나요? 그리고 왼쪽의 일정과 관련된 메뉴 중 폴더나 달력을 추가해 보세요. 별도의 화면 전환 없이 모든 기능이 동작하죠? 그리고 일정 입력도 마치 윈도우에 설치된 프로그램을 사용하는 것과 유사하게 동작하죠? 어떠세요. 놀랍지 않습니까? 이 모든 것이 AJAX를 활용하였기 때문에 가능한 것들입니다.

5. 검색 서비스

검색 서비스에도 AJAX가 활용되고 있는데요. 앞서 설명드렸던 검색어 추천과는 비교할 수 없을 정도의 AJAX 활용을 느낄 수 있는 곳으로 여러분을 안내하겠습니다.

(*** http://www.a9.com ***)

자... 에이나인이라는 검색 서비스인데요. 인터넷 책 판매로 시작하여 지금은 구글과 더불어 웹2.0의 맏형으로 존경받고 있는 아마존닷컴(www.amazon.com)이 개발한 검색 서비스입니다.

첫화면은 아주 단순하고 깔끔해 보이죠. 여기에 검색어를 입력해 보겠습니다. "web2.0"이라는 검색어를 입력하고 search 버튼을 클릭하면 검색 결과가 나오죠. 검색 결과 화면부터가 우리나라 검색 사이트와는 약간 다르긴 하지만 AJAX의 특징은 발견 못하시겠다고요? 그러면 왼쪽 메뉴 중에 quick start라고 있죠? 그곳에 있는 것 중에 다른 것을 추가해 보세요.

짜잔~ 화면이 윈도우 프로그램이 동작하는 것 처럼 부드럽게 전환되면서 선택한 검색결과가 별도의 다단으로 나뉘어져 보이죠? 어떠세요? 놀랍지 않습니까? 이러한 것이 AJAX를 적용하여 가능한 기능입니다.

6. 쇼핑몰

쇼핑몰에도 AJAX는 활용될 수 있습니다.
화면은 http://panic.com/goods/라는 곳입니다. 썰렁해 보이는 화면에 덩그러니 제품 몇개가 보이죠. 화면을 아래로 내리다가 마음에 드는 제품이 있습니다. 그러면 그 제품을 마우스로 드래그하여 화면 아래 카트에 놓아 보세요. 제품이 부드럽게 이동함은 물론이고 카트에도 자연스럽게 담아지죠? 마치 진짜 카트에 물건을 담는 것처럼요. 이러한 기능을 활용하면 온라인 쇼핑몰도 진짜 마트에서와 유사한 경험을 제공할 수 있게 될 겁니다.

7. 기타

그밖에도 AJAX를 활용한 사례는 무수히 많고, 지금도 수없이 개발되고 있습니다. 그 많고 많은 AJAX 활용 서비스를 모두 설명드리기는 어렵습니다. 여러분께서 AJAX가 무엇인지 확인하셨으니 AJAX를 활용한 곳들을 찾아 보는 것도 재밌겠죠? 뽀나스로 아래 2곳을 알려드리겠습니다. AJAX의 진수를 맛보세요.

http://www.challenger.se/ > 웹사이트가 이렇게도 만들어질 수 있구나~를 느껴보세요.

https://www.youos.com/ > 여기서 Demo를 클릭해서 웹OS의 모습을 감상하세요.

[AJAX의 미래]

AJAX는 XML과 자바스크립트를 사용한다고 했죠? 기억나시죠? 앞서 어느 부분에선가 XML을 활용하는 이유는 웹을 보다 구조화되게 만들기 위함이라고 한 것도 기억나세요? 그래서 RSS라는 것도 XML로 되어 있는 것이라는 이야기요.

네. 기억이 나실겁니다. AJAX는 XML을 사용하기 때문에 웹의 구조화를 도와주고, 그 구조화된 웹을 통해 데이터를 자동화하는데 도움을 줍니다. 그렇기 때문에 웹2.0 서비스에 많이 활용이 되는 것이고요. 따라서 앞으로 AJAX를 활용한 서비스는 더더욱 많이 생겨날 것이며, 앞으로 웹을 윤택하게 하는데 많은 도움을 줄 것입니다.

하지만 AJAX는 자바스크립트를 사용하기 때문에 문제도 있습니다. 자바스크립트가 표준화 되지 않은 언어라는 점 하나와 웹브라우저에서 자바스크립트를 동작하지 않도록 하는 옵션이 켜져 있을 경우에는 웹사이트 자체가 먹통이 될 수도 있다는 점입니다.

이러한 단점에도 불구하고 AJAX의 성장과 활용은 당분간 지속될 것으로 보입니다. 이미 유행을 탄데다가 그 가치도 증명되고 있으니까 말이죠.

자... AJAX라는 다소 생소한 단어와 그 활용된 서비스를 살펴보았는데요. 느낌이 어떠신가요? 그리고 어떤 생각이 드시나요? 여러분의 소중한 느낌과 경험을 우리 함께 나누어 보겠습니다.

(*** 의견 나누기 ***)