Article Category

Continue.. (430)
Pass_to_my_chance (6)
Financial (19)
Web (13)
English (43)
My_life (18)
Art (1)
Study (19)
Health (1)
Network (204)
Install_tool (13)
Computer_language (82)
Hacking (10)

Notice

Recent Article

Recent Comment

Recent Trackback

Ajax와 XML: 최고의 Ajax 배우기 (한글)

| Web/ajax 2009. 1. 12. 02:05
Posted by bluebamus
최상의 Web 2.0 애플리케이션으로 사용자 경험 향상

난이도 : 초급

Jack D Herrington, Senior Software Engineer, Leverage Software Inc.


2007 년 6 월 05 일

[출처] Ajax와 XML: 최고의 Ajax 배우기 (한글)|작성자 마검린

Web 2.0에서 최상의 Asynchronous JavaScript™ + XML (Ajax) 애플리케이션을 사용해봅시다. 이러한 애플리케이션들이 사용자 레벨에서 어떻게 성공을 거둘 수 있는지, 자신의 Web 2.0 애플리케이션에 맞는 기술을 찾아 뛰어난 사용자 경험을 이룩하는 방법은 무엇인지를 모색해봅시다.

본 기술자료에서는 최신 웹 애플리케이션들에게서 배울 점을 찾아볼 것이다. 모방의 대상이 되는 사이트들은 이를 문제 삼지는 않을 것이다. 결국 모방은 칭찬의 또 다른 표현이기도 하다.

필자는 기술적인 측면에만 주 초점을 맞추지는 않을 것이다. 이러한 사이트들의 기술적인 측면, 즉 Ajax를 통해 데이터가 전달되는 방법이 중요하긴 하지만 이것이 성공적인 사이트를 만드는 것은 아니기 때문이다. 이러한 사이트들이 브라우저의 Ajax 기능들과 Dynamic HTML (DHTML)을 함께 사용하여 매력적인 사용자 경험을 어떻게 만들어 내는지를 생각해 봐야 한다. 또한, 이러한 사이트들이 사용자 커뮤니티와 어떻게 상호 작동 할 수 있는지도 봐야 한다. 이러한 모든 요소들이 성공적인 사이트를 만드는데 있어서 기술만큼 중요한 것이다.

Google Maps

"가장 영향력 있는 Web 2.0 애플리케이션"에 대한 오스카 또는 골든 글로브 시상식이 있다면, 상은 Google Maps에 돌아가야 한다. 필자의 동료들이 Google Maps를 처음 봤을 때 그들의 반응이 뚜렷하게 기억난다. 브라우저에서 어떻게 이러한 것들이 가능할까? Google Maps는 브라우저의 애플리케이션에 사용자가 기대하는 바를 재정립함으로써 Web 2.0 혁신을 주도했다고 본다.

이 글을 읽고 있는 독자들도 Google Maps를 사용해 보았는지는 모르겠지만, 어쨌든 그림 1의 사이트를 보도록 하자.


그림 1. 현재의 Google Maps 버전
현재의 Google Maps 버전

마치 종이로 된 지도를 보는 것처럼 쉽게 지도를 클릭하고 드래그 할 수 있다. 여러분이 방향을 잡으면 디스플레이 명멸(blinking)이나 지도를 이동시키지 않고도 지도 상에 라인으로서 나타난다. 사실, 대부분의 Google Maps의 기능은 서버의 HTML 페이지 없이도 실행된다.

Google Maps 다음으로 Ajax and Dynamic HTML이라는 단어가 두 번째 웹 혁명을 일으켰다. 이상한 점은 더 정확히 말해서 (XMLHTTP 객체를 사용하여 요청을 송수신 하는 것으로 Ajax를 정의한다면), Google Maps는 Ajax를 사용하지 않는다. Google Maps는 동적으로 생성된 <script> 태그를 사용하여 데이터를 이동한다. 이것은 XMLHTTP 객체 보다 앞서는 기술이다.

그런데 왜 Google Maps는 Ajax를 사용하지 않는 것인가? Google 엔지니어들의 생각까지는 알 수 없지만, 필자의 생각으로는 Google Maps는 "get-go"가 아닌 JavaScript "mashup-able"이 되도록 설계되었기 때문이다.

매시업(Mashup)

이 글 초반에서, 필자는 사용자 커뮤니티를 지원하는 것에 대해 이야기 했다. 이것은 중요하다고 생각한다. 매시업은 사용자 커뮤니티를 지원하기에 딱 알맞다. 매시업은 한 사이트에서 기능과 또 다른 사이트의 기능을 결합하여 보다 더 흥미로운 것으로 만드는 것이다. 매시업의 좋은 예는 Craigslist에서 렌탈 리스팅을 가져와서, Google Maps를 사용하여 이들을 지도 위에 배치하는 것이다.

Google Maps 매시업의 또 다른 예제는 MapMyRun.com이다. 이것은 Google Maps를 사용하여 달리기 선수들이 지도 상에서 거리를 파악할 수 있도록 한다. (그림 2)


그림 2. Map My Run 인터페이스
Map My Run 인터페이스

여기에서 필자는 왼쪽 페인에 있는 인풋 필드에 시작 위치를 넣는다. 그런 다음 마우스를 사용하여 달리기 코스를 가리킨다. 필자가 클릭하면 왼쪽 페인은 동적으로 업데이트 되어 거리를 보여준다. 줌인 기능을 통해 보다 상세하게 보거나 길을 벗어날 경우 위성 모드로 변환한다.

모든 어려운 지도 작업은 Google Maps에 의해 수행된다. MapMyRun 사이트는 지도 위에 몇 개의 JavaScript 코드를 배치하여 마우스 클릭을 처리하고 거리를 계산한다.

그렇다면 성공적인 Web 2.0 애플리케이션을 구현할 때 Google Maps에서 무엇을 배웠을까?

  • 브라우저를 사용한다: Google Maps는 현대적인 브라우저의 동적인 측면을 매우 잘 활용한다. 이러한 브라우저 기능들을 사용하여 매력적인 사용자 경험을 만들어 낸다.
  • Ajax 순수성은 중요하지 않다: 극소수의 사람들은 Google Maps가 순수한 Ajax 애플맄이션이 아니라는 것을 알고 있다. 그러나 이러한 사람들 조차 그것을 문제 삼지 않는다. Google Maps는 사용자에게 놀라운 기능을 제공한다. XMLHttp이 사용되지 않는다는 것은 문제가 되지 않는다. 특정 기술에 너무 얽매일 필요가 없다.
  • JavaScript 매시업: JavaScript 코딩을 사용하여 하나의 사이트에서 또 다른 사이트로 기능을 삽입하는 기능은 매우 매력적이다. 특정 기능에 대한 중요한 소스를 사용할 수 있는 강점을 갖고 있다.



위로


TaDaList

이제 직접 경험해 보자. Google Maps는 Web 2.0 애플리케이션에 매우 높은 장벽을 치고 있다. 하지만 Ajax를 사용하여 애플리케이션에 엄청난 가치를 빠르게 추가할 수 있다. 그러한 가치의 예가 TaDaList이다. TaDaList는 매우 단순한 (그리고 무료의) to-do 리스트 매니저이다. 사이트를 설명하기 위해, 수영 연습을 위해 필자가 해야 할 일을 상기시켜 주는 계정과 수영 리스트를 그림 3과 같이 만들었다.


그림 3. 수영 리스트
수영 리스트

고글을 구매해야 한다는 것을 추가해야 하므로 그 내용을 텍스트 필드에 입력하고 Add to list를 클릭한다. 이 아이템은 페이지 리프레시 없이 곧 알맞은 리스트에 추가된다. (그림 4)


그림 4. "Buy New Goggles"를 추가한 후
'Buy New Goggles'를 추가한 후

많은 것들이 있는 것 같지는 않고 Ajax를 사용하여 구현하기도 어렵지 않은데도 데스크탑 애플리케이션에서나 기대할 수 있었던 세련된 감각을 느낄 수 있다.

TaDaList는 Rails 프레임웍에서 작성된다는 것을 명심하라. 사실, 이것은 Rails를 배우는 사람들이 사용하는 데모용 애플리케이션이다. Rails 프레임웍에서는 이러한 유형의 Ajax 작업을 매우 빠르게 할 수 있다.

필자는 Rails에서 2분여 만에 매우 기본적인 TaDaList를 작성했다. to-do 아이템의 리스트는 그림 5에 나타나 있다.


그림 5. to-do 아이템 리스트
to-do 아이템 리스트

그리고 나서 Buy earplugs를 입력하고 Add를 클릭한다. 페이지를 리프레시 하지 않고도 아이템이 리스트에 나타난다. (그림 6)


그림 6. "Buy earplugs"를 추가한 후
'Buy earplugs'를 추가한 후

그 다음에는 to-do 아이템들을 저장할 작은 데이터베이스를 만들었다. 그리고 나서 Listing 1에 보이는 Rails 컨트롤러를 만들었다.


Listing 1. Todo_controller.rb
                

class TodoController < ApplicationController

  def list

    @tasks = Todo.find(:all)

  end

  def add

    task = Todo.new

    task.name = params[:task][:name]

    task.save


    @tasks = Todo.find(:all)

  end

end

Listing 1의 코드는 두 개의 메소드를 사용한다. list() 메소드는 페이지를 보여준다. add() 메소드는 새로운 아이템을 리스트에 추가하고 그 리스트를 HTML로 리턴한다.

list() 메소드용 RHTML은 Listing 2에 나타나 있다.


Listing 2. List.rhtml
                

<html>

<head>

<%= javascript_include_tag :defaults %>

</head>

<body>


<div id="results">

<% @tasks.each { |t| %>

<%= t.name %><br/>

<% } %>

</div>


<%= form_remote_tag :url => { :action => 'add' }, :update => 'results' %>

<%= text_field :task, :name %>

<%= submit_tag 'Add' %>

<%= end_form_tag %>


</body>

</html>

이 페이지는 form_remote_tag를 사용하여 단순한 형태의 콘텐트를 컨트롤러에 있는 add() 메소드에 제출한다. add() 메소드는 to-do 아이템을 테이블에 추가하고 결과 <div> 태그에 새로운 콘텐트를 리턴한다. 이 코드는 Listing 3과 같다.


Listing 3. Add.rhtml
                

<% @tasks.each { |t| %>

<%= t.name %><br/>

<% } %>

그렇다면 TaDaList에서 필자는 무엇을 배웠을까? 우선, 웹 애플리케이션을 위한 더 나은 데스크탑 느낌을 갖기 위해서는 Ajax가 갈 길이 멀다는 점이다. 두 번째로, Ajax를 채택하고 있는 웹 프레임웍의 선택은 이러한 유형의 작업을 수월하게 한다는 점이다.




위로


Campfire

Campfire는 같은 그룹(37signals)에서 개발한 TaDaList와 비슷한 사이트이다. 이 경우, 애플리케이션은 온라인 채팅을 호스팅 하고 파일 전송을 쉽게 함으로써 원격 팀을 위한 가상의 친목회를 시뮬레이트 하기 위해 개발되었다.

필자는 시험 계정을 설정하고 몇 가지 이미지 업로딩과 함께 채팅을 수행했다. 결과는 그림 7과 같다.


그림 7. 원격 팀들을 위한 가상 친목회
원격 팀들을 위한 가상 친목회

디스플레이의 왼편을 보면 누구나 언제라도 새로운 메시지를 게시할 수 있는 간단한 채팅 창이 있다. 오른편에는 누가 온라인 상태에 있는지, 파일 업로딩 장소는 어디에 있는지를 나타낸다.

파일 업로딩은 그 자리에서 JavaScript 코드를 사용하여 수행되어 파일 업로드 프로세스를 감시한다. 다시 말해서, 대화 시 다른 페이지로 이동할 필요 없이 파일과 이미지를 추가할 수 있다.

Campfire 역시 몇 가지 교훈을 준다. 우선, 사용자들이 데스크탑 애플리케이션에서 기대하는 채팅 서비스를 대체할 대담성을 갖고 있다. 하지만, 그룹 미팅의 정황에서 채팅을 호스팅 함으로써 이를 무난히 수행하고, 데스크탑과 비교해 볼 때 기능면에서 제한이 있는 시스템을 구현하지만 미팅의 정황에서만 사용할 수 있기 때문에 더욱 값지다.

두 번째 교훈은 파일 업로딩 같은 페이지 리프레시를 해야 하는 작동이 처리되어 어떤 페이지 로딩도 필요 없다. 따라서 사용자는 자신의 태스크에 집중할 수 있고 데스크탑 애플리케이션 느낌을 강화할 수 있다.




위로


YourMinis

이러한 사이트들의 일부가 Web 2.0을 사용한다면, YourMinis는 또 다른 영역에서, 여러분의 웹의 widget/gadget 사이트가 된다. 이를 사용하여 여러분은 다양한 위젯(또는, Microsoft lingo를 선호할 경우 gadgets,)을 호스팅 하는 페이지를 생성 및 커스터마이징 할 수 있다. 페이지는 대시보드로서 작동하면서 매력적인 방식으로 정보를 제때에 제공한다.

그림 8은 페이지에 Rottentomatoes 영화 위젯을 배치한 후의 사이트 모습니다.


그림 8. 영화 리뷰를 보여주는 YourMinis
영화 리뷰를 보여주는 YourMinis

Rottentomatoes는 영화 리뷰 사이트인데 약간의 트위스트가 있다. 수 백 개의 영화 리뷰들에서 점수를 모아서 그 수를 백분율로 제공한다. 60% 이상 점수를 가진 영화는 fresh(좋은 영화)로 간주된다. 이 경우, 필자는 Bridge To Terebithia,를 선택했고 우편 번호만 제공하면 위젯을 통해 영화 시간을 알 수 있다. (그림 9)


그림 9. 영화 시간을 보여주는 영화 위젯
영화 시간을 보여주는 영화 위젯

인터페이스는 깔끔하고 빠르며 대중적인 브라우저에서도 잘 작동한다. 위젯 역시 다양한 장소(예를 들어, 이 사이트의 생성자의 블로그)에서 호스팅 할 수도 있다.

이 사이트 외에도, YourMinis는 Firefox 확장도 있기 때문에 여러분이 검색하고 있을 때 여러분을 지켜본다. RSS 피드나 MP3 같은 YourMinis와 함께 사용할 것을 찾으면 리소스를 사용할 수 있다는 것을 알려준다. 비교적 쉬운 브라우저와의 통합은 사이트를 사용자 데스크탑과 더욱 밀접히 통합할 수 있는 좋은 방법이다.

YourMinis는 Web 2.0에 대해서 더 많은 교훈을 준다. 우선, minis와 프레임웍은 Macromedia Flash로 구현된다. 사용자의 관점에서 보면, 이는 문제가 아니다. 특정 기술의 선택 문제는 궁극적인 사용자 이익보다는 중요하지 않다.

개발자들이 페이지 디자인을 커뮤니티에 기여하게끔 만든다. 사용자 커뮤니티와 함께 한다는 것은 여러분이 원래 상상하지도 못했던 방향으로 사이트를 만들 수 있다는 것을 시사한다.

Lightbox

특별한 사이트는 아니지만, Lightbox 기술은 최신 사이트에서 중요한 역할을 한다. lightbox는 사용자 인터페이스 기술과 Ajax를 결합한 것이다. 웹 페이지 예제를 보자. (그림 10)


그림 10. Lightbox JS의 홈페이지
Lightbox JS의 홈페이지

이미지를 클릭하면 전체 페이지가 어두워지고 선택한 박스의 줌인 이미지가 페이지 중앙에 나타난다. (그림 11)


그림 11. 이미지 클릭 후에 나타나는 Lightbox
이미지 클릭 후에 나타나는 Lightbox

이 기술은 많은 장점이 있다. 사용자의 관심을 페이지의 나머지 부분들에서 끌어내어 선택한 부분에 집중할 수 있도록 한다. 사용자는 Close를 클릭하고 정상 페이지로 돌아갈 수 있기 때문에 사용자들이 페이지를 많이 이동하지 않고도 상세한 부분들을 볼 수 있다.

Lightbox 기술은 이미지나 비디오에 좋을 뿐만 아니라, 텍스트 콘텐트에도 유용하다. 필자가 자주 방문하는 콘텐트 사이트는 Lightbox 기술을 사용하여 홈 페이지에 있는 각 아티클의 시놉시스를 제공한다. 하지만 이 시놉시스는 사용자가 (Ajax를 통해) Lightbox 링크를 클릭할 경우에만 로딩된다. 따라서 사용자는 한 페이지에서 여러 아티클 시놉시스 아이템을 읽을 수 있고 서버 대역폭을 줄일 수 있다.

Lightbox를 만드는데 여러 오픈 소스 JavaScript 라이브러리들을 사용할 수 있다. 위에 설명한 것은 Lightbox JS version 2이다.

위로


기타 Web 2.0 사이트

이 글을 쓰면서 필자는 많은 Web 2.0 사이트들을 둘러보았다. 대부분이 위에 설명한 예제들에는 미치지 못했다. 특히 Google은 여러 가지 뛰어난 오퍼링을 갖고 있다. Google Documents와 Spreadsheets는 브라우저 내에서 WYSIWYG 에디팅이 어디까지 갈 수 있는지를 증명하고 있다. Google Reader는 RSS 피드를 통해 호스팅 솔루션을 제공하여 사용자가 어떤 장소에서든 뉴스를 볼 수 있게 하는 방법을 시사하고 있다. Google Mail은 Ajax, JavaScript, DHTML, Google Maps를 사용한다.

Google이 탁월성을 보이는 또 다른 분야는 모바일 접근성이다. Google의 모든 서비스들은 전화기와 기타 작은 장치에서도 잘 작동하는 버전을 갖고 있다. 하나의 Google 계정으로 웹 버전과 전화기 버전에 맞춰 커스터마이징 된 홈페이지가 생긴다.

놀라운 Ajax 작동을 보이는 것이 Google 만은 아니다. Meebo는 단순하지만 우아한 인터페이스를 가진 채팅 애플리케이션의 좋은 예이다. Kiko는 캘린더 편집에 DHTML을, 새로운 약속, 연락처, 관련 정보들로 서버를 업데이트할 때는 Ajax를 사용하는 캘린더 애플리케이션이다.

위로


결론

이 글에서 설명한 모든 사이트들에서 배울 점은 아주 많다. 특히, 훌륭한 기술 트릭을 배울 수 있다. 이 모든 사이트들이 공유하는 한 가지 공통적인 엘리먼트는 HTML과 JavaScript 코드의 결합에서 나오는 힘에 대한 깊은 신뢰이다. JavaScript 코드는 최근 프로그래밍 세계에서 나쁜 평판을 받았다. 필자가 들었던 대부분의 결점들은 JavaScript 언어 자체 보다는 Document Object Model (DOM)과의 브라우저 호환성과 더욱 관련이 있기 때문에 그러한 평판은 부당하다. 확실한 점은, 여러분이 매력적인 Web 2.0 애플리케이션을 만들고 싶다면 JavaScript 코드를 사용해야 한다는 것이다.


초반에 언급했듯이, 기술만이 문제가 아니다. 매력적인 사용자 경험을 이룩하는 것에 관한 것이기도 하다. 필자가 이 글에서 설명하기 위해 선택했던 모든 사이트들은 이 분야에 새로운 지평을 연 것들이다. 일부는 단순한 폼에 복잡성을 숨기기도 했고(Google Maps), 어떤 것들은 Ajax를 통해 인터페이스를 향상시켰다.

Web 2.0 애플리케이션들 역시 커뮤니티가 있다. Google Maps에서는 사용자들이 자신들의 애플리케이션에 사용할 기술을 혼합할 수 있다. Campfire 같은 사이트들은 집중된 사용자 경험을 향상시킨다.

확실히, 여러분은 많은 것을 배울 수 있다. 하지만 감사하게도, JavaScript와 DHTML 애플리케이션을 쉽게 구현할 수 있기 때문에 Web 2.0 애플리케이션 구현이 더욱 즐거워 질 것이다.


[출처] Ajax와 XML: 최고의 Ajax 배우기 (한글)|작성자 마검린


'Web > ajax' 카테고리의 다른 글

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)  (0) 2009.01.12
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷  (0) 2009.01.12
php java ajax 웹프로그래밍 기술서 출처  (0) 2009.01.12
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글)  (0) 2009.01.12
And

Tag Cloud

Calendar

«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31

Archive

My Link

티스토리툴바