1 개요 #
현재 사용자 반응적인 디자인에 대한 무언가가 "매력적"이라고 불릴수 있다면 그건 웹어플리케이션을 만드는 걸 말하는 것 일겁니다. After all, when was the last time you heard someone rave about the interaction design of a product that wasn’t on the Web? (Okay, besides the iPod.) All the cool, innovative new projects are online.
Despite this, Web interaction designers can’t help but feel a little envious of our colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web’s rapid proliferation also creates a gap between the experiences we can provide and the experiences users can get from a desktop application.
That gap is closing.
Google Suggest을 보도록 하죠. Watch the way the suggested terms update as you type, almost instantly. 이제
Google Maps을 봅시다. 확대기능이 있지요. 커서로 맵을 잡아 어느정도 스크롤을 시킬수도 있습니다. 다시말하자면, 이러한 모든 처리는 거의 순간적으로 일어나며, 페이지가 다시 로딩되는 것을 기다리지 않습니다.
Google Suggest을 보도록 하죠. Watch the way the suggested terms update as you type, almost instantly. 이제
Google Maps을 봅시다. 확대기능이 있지요. 커서로 맵을 잡아 어느정도 스크롤을 시킬수도 있습니다. 다시말하자면, 이러한 모든 처리는 거의 순간적으로 일어나며, 페이지가 다시 로딩되는 것을 기다리지 않습니다.
Google Suggest와 Google Maps은 Adaptive Path(원문 아티클 사이트의 개발자그룹)의 Ajax라 불리는 새로운 웹어플리케이션 제작방법에 대한 두가지 예제입니다. Ajax는 Asynchronous JavaScript + XML의 줄임말이며, 웹에서 구현가능한 것들에 대한 근본적인 발상전환을 보여줍니다.
2 Ajax의 정의 #
Ajax는 하나의 기술이 아닙니다. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
The Elements of User Experience know, what makes the Web good for hypertext doesn't necessarily make it good for software applications.
- XHTML과 CSS를 통한
표준기반표현방식
Document Object Model을 사용한 동적 화면출력 및 사용자대화처리
XML과 XSLT을 사용한 데이타 교환 및 관리
XMLHttpRequest을 사용한 비동기 데이타 수신
- 모든 것을 바인딩하는데 사용하는 JavaScript 기술
The Elements of User Experience know, what makes the Web good for hypertext doesn't necessarily make it good for software applications.
| http://www.adaptivepath.com/images/publications/essays/ajax-fig1_small.png |
| 그림 1: 전통적인 웹어플리케이션 모델(왼쪽)과 Ajax 모델(오른쪽)의 비교 |
This approach makes a lot of technical sense, but it doesn't make for a great user experience. 서버가 자신의 일을 하고 있을동안 사용자는 대체 무얼하고 있을까요? 맞습니다. 기다리는 거죠. 한 작업안에 매 단계 동안 사용자는 조금 더 기다리게 됩니다.
당연한 얘기지만, 어플리케이션으로서 웹을 디자인하려한다면 사용자가 기다리지 않는 것을 원할겁니다. Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?
3 Ajax의 차이점 #
Ajax 어플리케이션은 사용자와 서버사이에 Ajax 엔진이라는 중간단계를 놓음으로서 웹상에서의 시작-정지-시작-정지와 같은 반복요소를 제거합니다. 어플리케이션에 계층을 추가하는 것은 반응성을 줄이는 것처럼 보이지만, 사실 그 반대입니다.
세션 시작시점에서 웹페이지를 로딩하는 대신, 브라우져는 Ajax 엔진을 로딩합니다. (엔진은 Javascript로 작성되어져있으며, 일반적으로 숨겨진 프레임에 쑤셔놓습니다.)
이 엔진은 사용자가 보는 인터페이스를 랜더링하는 것과 사용자를 대신하여 서버와 통신하는 일을 할 책임을 지게 됩니다. Ajax 엔진은 어플리케이션에 대한 사용자 대화를 서버통신과는 별개로 비동기적으로 처리할 수 있습니다. 이렇게 함으로서 사용자는 서버가 무언가를 처리할동안 텅빈 브라우져 윈도우 또는 모래시계 커서에서 해방됩니다.
| http://www.adaptivepath.com/images/publications/essays/ajax-fig2_small.png |
| 그림 2: 전통적인 웹 어플리케이션의 동기적인 반응패턴(위)와 Ajax 어플리케이션의 비동기적 패턴(아래)와의 비교 |
Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user's interaction with the application.
4 누가 Ajax를 사용하는가? #
구글은 Ajax 접근법을 개발하는대 엄청난 투자를 하고 있습니다. 지난 몇년간 구글에서 개발된 주요 제품들(
Orkut,
Gmail,
Google Groups,
Google Suggest,
Google Maps)은 모두 Ajax 어플리케이션입니다. (이들 Ajax 구현들에 대한 보다 많은 내부 기술사항에 대한 내용은 다음의 개별 분석들을 읽어보시기 바랍니다 -
Gmail 분석,
Google Suggest 분석,
Google Maps 분석) 나머지는 다음과 같습니다 -
Flickr에서 사람들이 좋아하는 기능중 대부분은 Ajax에 의존하고 있으며, 아마존닷컴의
a9.com 역시 유사한 기술들을 적용하고 있습니다.
Orkut,
Gmail,
Google Groups,
Google Suggest,
Google Maps)은 모두 Ajax 어플리케이션입니다. (이들 Ajax 구현들에 대한 보다 많은 내부 기술사항에 대한 내용은 다음의 개별 분석들을 읽어보시기 바랍니다 -
Gmail 분석,
Google Suggest 분석,
Google Maps 분석) 나머지는 다음과 같습니다 -
Flickr에서 사람들이 좋아하는 기능중 대부분은 Ajax에 의존하고 있으며, 아마존닷컴의
a9.com 역시 유사한 기술들을 적용하고 있습니다.
이들 프로젝트들은 Ajax가 단순히 기술적인 주장뿐만 아니라, 실제 어플리케이션 개발에서도 꽤 실용적이라는 것을 보여주고 있습니다. 이는 연구실안에서만 동작하는 별개의 기술이 아닙니다. 게다가 Ajax 어플리케이션은 간단하고 단지 하나의 함수로 구성된 구글 Suggest에서 매우 복잡하고 세련된 구글 maps에 걸쳐, 어떤 규모에서도 구현이 가능합니다.
At Adaptive Path, we've been doing our own work with Ajax over the last several months, and we're realizing we've only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google's lead in reaping the competitive advantage Ajax provides.









