'AJAX' 과연 웹 2.0의 중심 기술인가? - (1)

2005년 구글 맵(http://maps.google.com) 서비스가 세상에 처음 나왔을 때 많은 개발자들은 그 결과물에 놀라움을 감추지 못하였다. 바로 이전까지 구현하기 힘들었던 새로운 사용자 인터페이스를 선보였기 때문이다. 하지만 더 놀라운 것은 이를 구현하기 위해 새로운 기술을 사용했던 것이 아니라 이미 나와있던 기술들을 조합해서 만들었다는 점이다. 바로 AJAX(Asynchronous JavaScript and XML)가 그 구현에 중심에 있었다. AJAX는 지금의 웹 2.0 개발 환경에서 가장 많은 주목을 받고 있는 기술의 조합이다. 하지만 과연 웹 2.0을 이끌만한 기술인지 다시 한번 살펴보고 앞으로 나아가야 할 방향에 대해서 고민하여 보자.


어떻게 구현되는지는 모른다. 다만 쉬운 사용이 필요할 뿐이다.
우리 주변의 개발 환경을 한번 살펴보자. 우리는 개발의 편의를 위해 가끔씩은 사용자의 편의성 떨어뜨리는 결정을 해왔었다. 웹 초창기의 화면을 기억해보자. 그때 당시 윈도우 프로그램에서는 쉽게 구현하였던 부분도 기술의 부재와 개발의 편의를 위해 사용성을 떨어뜨리면서 개발되었었다. 현재 포털사이트의 검색어 입력 시 볼 수 있는 추천검색어의 경우에도 작년에서야 활성화되었다. 하지만 윈도우 프로그램에서는 이미 일반화되었던 기능이라는 것을 여러분들은 알 것이다. 물론 데이터 저장소와 기술의 차이는 있지만 사용자들은 이런 것들을 생각하지 않는다.

우리주변의 많은 웹 사이트들을 살펴보자. 인터넷 뱅킹을 사용하고자 할 경우에는 알지도 못하는 여러 가지 ActiveX 컴포넌트의 설치를 요구하고 있다. 여러분들은 종종 “왜 이렇게 복잡하게 설치하려고 하나?”라는 의문을 가졌을 것이다. 사용자들에게 필요한 기능을 제공하기 위해 이런 과정을 필요하다고 하지만 분명 불편한 것은 틀림없는 사실이다. 구글 맵을 실행하여 보자. 어떠한 ActiveX 컴포넌트 설치도 요구하지 않지만 우리가 데스크톱 지도 프로그램에서 볼 수 있는 익숙한 사용자 인터페이스를 그대로 지원하고 있다. 이런 모습에 사용자들은 좋아하고, 열광하는 것이다. 그 이면에 어떤 기술을 사용하였는지 그들은 알려고 하지 않는 것이다.

패닉닷컴(http://panic.com/goods/) 쇼핑몰을 잠깐 살펴보자. 우리가 흔히 알고 있는 쇼핑몰은 제품을 고른 후 장바구니에 추가를 하고, 계속 쇼핑을 하면서 다른 제품을 추가하는 과정으로 이루어진다. 이 모든 과정은 새로운 페이지로 이동하고, 사용자들은 페이지가 변경될 때까지 기다려야만 하는 것이다. 온라인 쇼핑을 많이 사용한 이용자들은 이런 과정이 아주 쉽다고 생각하지만 처음 사용하는 이용자들은 상당히 당황할 수 밖에 없는 복잡한 과정이다. 이런 복잡성을 패닉닷컴은 웹 페이지에서의 드래그&드롭 장바구니 구현으로 해결하고 있다. 


[AJAX를 이용한 패닉닷컴 쇼핑몰의 장바구니 시스템]

사용자들은 구매하고자 하는 물건을 웹 페이지에서 확인하고 해당 이미지를 장바구니로 간단히 끌어다 놓기만 하면 된다. 만일 해당 물건을 장바구니에서 취소하고자 할 경우에는 장바구니에서 홈페이지로 끌어다 놓기를 하면 된다. 이 얼마나 쉬운 구매방식인가! AJAX는 바로 웹 2.0 시대의 웹 서비스를 구축함에 있어 사용자 편의성 향상을 위한 방법을 제공한 기술인 것이다.


새로운 기술이 아닌 AJAX. 발상의 전환이 새로운 트랜드를 만든다.
AJAX는 ‘Asynchronous JavaScript and XML’의 줄임말로, ‘비동기 자바스크립트와 XML’정도로 이해할 수 있다. 그 뜻에서 알 수 있듯이 비동기라는 말이 붙어있을 뿐 우리가 이미 알고 있던 기술들이다. ‘AJAX’라는 용어는 제시 제임스 가렛(Jesse James Garrett)에 의해 2005년 2월 ‘A New Approach to Web Application’이라는 에세이에서 소개된 후 우리에게 알려졌다. 그가 설명하고 있는 AJAX는 다음과 같은 기술들을 포함한다. 

- XHTML과 CSS를 이용한 웹 표준 기반의 화면구현
- DOM(Document Object Model)을 이용한 동적인 화면과 상호작용
- XML과 XSLT를 이용한 자료 교환과 처리
- XMLHttpRequest를 사용한 비동기 데이터 검색
- 이들 기술을 묶어주는 JavaScript


위 설명에 나와있는 모든 기술들은 이미 우리에게 익숙했었던 기술들이었다. 하지만 이런 조합된 결과물이 만들 수 있는 새로운 사용자 환경의 변화가 웹 2.0의 기술 중심에 AJAX를 등장시키게 한 시작이었던 것이다. 그럼 우리들은 AJAX를 어떠한 이점을 얻을 수 있을까? 


[제시 제임스 가렛의 이전 웹 응용 프로그램 모델과 AJAX 웹 응용 프로그램의 모델의 차이]

첫째, AJAX는 XHTML과 CSS를 이용하여 웹 표준 기반의 화면을 구현하게 된다. 지금까지 우리는 일반인들이 이용하는 컴퓨터 모니터 화면에 적합한 개발에 집중하여온 것이 사실이다. 하지만 앞으로는 우리가 만든 웹 페이지를 작은 PDA나 휴대폰의 화면을 통해서도 서비스를 해야 하고, 시각장애를 가진 분들을 위한 페이지도 만들어야 한다. 장애인들을 위한 접근성이 보장되는 웹 사이트 개발은 선진국에서 이미 법으로 재정되었고, 국내에서도 이미 이런 운동이 일어나고 있다. 또한 넷스케이프의 몰락 후 국내 인터넷 환경에서 어느 순간부터 인터넷 익스플로러(IE)에서만 동작하도록 웹 페이지가 구현되고 있었다. 이런 문제들도 AJAX의 표준을 준수하게 된다면 쉽게 해결할 수 있다.

둘째, 지금까지 어쩔 수 없이 사용한 ActiveX 플러그인 형태의 프로그램으로부터 독립할 수 있다. 구글 맵에서 볼 수 있듯이 아무런 플러그인 없이도 웹 브라우저만 이용하여 구현할 수 있다. 이는 앞으로 TV, 휴대폰과 같은 다양한 디바이스에서 웹 페이지 출력을 위한 준비과정이 될 수 있는 중요한 점이다. 지금 RIA 기술과 더불어 이와 같은 환경에서 구현을 위한 다양한 시도들이 있지만 이 모든 것들은 각자 자체의 플러그인을 설치해야만 동작한다는 것을 잊지 말아야 한다. 대표적으로 플래시의 경우에도 플래시 플레이어 기반에서 동작하는 것을 우리는 알고 있다. 물론 다양한 웹 브라우저와 운영체제에서 이미 지원하고 있지만 배포하는 환경에 따라서 이런 단점은 고려해보아야 하는 것이다.

셋째, AJAX는 비동기방식의 데이터 교환을 지원하여 사용자와의 상호작용에 새로운 환경을 지원한다. 즉 지금까지의 웹 페이지는 사용자가 데이터를 보내고 그 결과를 기다린 후 모든 페이지가 다시 출력되는 방식을 따랐다. 하지만 AJAX를 이용하면 화면의 특정 부분의 데이터만 교체할 수 있게 된다. 이는 화면의 전환 없이 새로운 데이터 및 화면 요소를 출력하는 효과를 사용자에게 준다. 더불어 필요한 정보만 전달하기 때문에 서버와의 데이터 교환 과정의 네트워크 리소스 사용량도 줄이는 효과를 같이 얻을 수 있다.

이외의 AJAX는 XML을 기반하여 데이터를 교환하고 처리하기 때문에 보다 개방된 시스템을 만들 수 있는 기반을 제공한다. 매쉬업(Mash-up) 서비스와 오픈 API(Open API)를 통해 새로운 서비스들을 조합할 수 있는 그 기반이 바로 이런 표준형 데이터형식의 사용함에 가능한 것이다. 

2부에서 계속됩니다.

(작성자: 네오비스)
스마트플레이스의 글을 편리하게 구독하세요. 한RSS 추가 구글추가
크리에이티브 커먼즈 라이센스
Creative Commons License이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

트랙백 (0) | 덧글 (7)
트랙백 주소: http://www.smartplace.kr/trackback_post_7.aspx
스마트플레이스의 트랙백은 스팸방지를 위해 관리자 승인 후 등록됩니다.

ENTClic 2006-09-28 06:45:33     답글 삭제
좋은 정보 감사합니다.
뭔지는 알았어도 구체적으로 어떤 차이점이 있는지 몰랐는데 이 글로 많은 것을 이해하게 되었네요 ^^

네오비스 2006-09-28 13:05:31     답글 삭제
To ENTClic
도움이 되셨다니 저도 기분이 좋습니다. 2부에 해당하는 글에서는 실제 사용할 수 있는 툴들과 함께 마무리를 적어보았습니다. 참고하시기 바랍니다. ^^

김경일 2007-02-09 22:59:15     답글 삭제
글 잘읽었습니다... Ajax에 대해서 다시 한번 생각해 봅니다.

english garden designs ideas 2013-11-27 20:17:02     답글 삭제
동작하도록 웹 페이지가 구현되고 있었다. 이런 문제들도 AJAX의 표준을 준수하게 된다면 쉽게 해결할 수 있다

louis vuitton replica 2014-09-02 12:00:20     답글 삭제
2부에 해당하는 글에서는 실제 사용할 수 있는 툴들과 함께 마무리를 적어보았습니다.

gucci replica 2014-09-02 12:02:52     답글 삭제
2부에 해당하는 글에서는 실제 사용할 수 있는 툴들과 함께 마무리를 적어보았습니다.

replica louis vuitton 2014-09-02 12:07:09     답글 삭제
참고하시기 바랍니다. ^^

이름 비밀번호
홈페이지
덧글
비밀글
RSS 피드
전체글한RSS 추가 구글추가
스마트가젯북스타일
Demo Day