|
|
때로는 기술적이지 않는 문제에도 직면하게 될 것이다. 특정 스크립트나 코드 조각을 작성하는 데에는 도움이 필요하지 않다. 오히려, 여러분이 갖고 있지 않은 데이터나 리소스가 필요하다. 이러한 경우에, 튜토리얼이나 오픈 소스 스크립트가 여러분에게 도움이 되겠지만, 이것으로 여러분의 니즈(needs)가 다 채워지는 것은 아니다. 웹 페이지에 검색 엔진을 설치하는 경우를 생각해 보자. 검색하고 싶은 데이터가 있는데, 그 데이터가 여러분의 기업이나 조직이 갖고 있는 것이 아닐 경우 어떻게 하겠는가?
기술이 아닌 데이터에 의해 제약을 받는 경우, public API가 해당 문제 해결에 도움이 된다. 퍼블릭 API를 사용해서는 다른 서버에 호스팅 된 프로그램을 사용할 수 있고, 다른 사람들의 데이터를 사용할 수 있다. 일반적으로, API 자체는 프로그램과 인터랙팅 하는 방식을 정의한다. 예를 들어, Google 검색 엔진에 대한 퍼블릭 API로 검색을 할 수 있지만, Google의 코드는 Google의 데이터를 검색하고 그 결과를 프로그램에 리턴 할 것이다. 여러분은 이러한 프로그램을 작성할 때 다른 사람의 기술력의 도움을 받을 뿐만 아니라, 여러분 또는 여러분 기업 이외의 데이터 스토어를 활용할 수 있는 혜택도 누리게 된다.
|
Google은 온라인 시대의 대단한 발명품이라는 점은 두말할 나위 없다. 온라인에 대해 모르는 할머니와 4살 먹은 아이들도 Google에 대해 알고 있다. Google은 매우 대중적이고 유용한 검색 엔진을 구축하고, 여러분 각자의 프로그램에서 사용할 수 있는 퍼블릭 API를 가진 무료 서비스들을 제공하는데 헌신하고 있다. 이 섹션에서는, Google API를 사용할 수 있도록 설정하고, Google로의 비동기식 애플리케이션 통신을 만들 수 있는 방법을 설명하겠다.
이 글은 Google의 Ajax Search API에 특히 초점을 맞출 것이다. Google Ajax Search API 홈 페이지(그림 1)를 방문하여 특정 API에 대한 내용을 찾아보기 바란다. (참고자료)
그림 1. Google의 Ajax Search API 페이지
우선 Sign up for a Google AJAX Search API key 링크를 클릭한다. 클릭하면, Google API를 사용을 위한 가입 페이지로 간다. 사용 조건에 동의하고 애플리케이션이 실행 될 웹 사이트의 URL을 제공한다. (그림 2)
그림 2. Google의 Ajax Search API 가입하기
|
동의서를 읽고 체크 박스에 체크를 했다면, URL에 입력하고, Generate API Key를 클릭한 다음 1~2초 정도 기다린다. 이 시점에서 여러분은 Google로 로그인 하거나, 계정을 만들어야 한다. 이것이 기본 프로세스이고 여러분 스스로 쉽게 할 수 있다. 이것이 다 끝나면 응답 스크린이 나타날 것이고, 매우 긴 키가 제공된다. URL을 반복하고, 심지어 샘플 페이지도 제공한다. 키는 다음과 같은 양상을 띤다.
ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg |
여러분에게 할당된 키를 사용하기 전에, Google의 API 문서를 읽어두는 것이 좋다. (키를 제공했던 페이지 하단에 링크가 있고, 아래 참고자료 섹션에서도 제공한다.) 이 글도 충분히 도움이 되겠지만, Google의 API 문서 역시 좋은 참고 자료이며, Google을 사용하는 방법에 대한 훌륭한 통찰력도 얻을 수 있을 것이다.
|
Google이 제공하는 샘플 웹 페이지를 수정해보고, 이것이 어떻게 작동하는지를 보자.
Listing 1은 매우 단순한 웹 페이지이다. 여러분이 좋아하는 에디터에 타이핑하여, 저장하고 Google에 제공했던 도메인이나 URL에 업로딩 한다.
Listing 1. Google 검색 애플리케이션의 HTML
<html>
<head>
<title>My Google AJAX Search API Application</title>
<link href="http://www.google.com/uds/css/gsearch.css"
type="text/css" rel="stylesheet" />
<script
src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR KEY HERE"
type="text/xxjavascript"> </script>
<script language="xxJavascript" type="text/xxjavascript">
function [안내]태그제한으로등록되지않습니다-xxOnLoad() {
// Create the Google search control
var searchControl = new GSearchControl();
// These allow you to customize what appears in the search results
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// Tell Google your location to base searches around
localSearch.setCenterPoint("Dallas, TX");
// "Draw" the control on the HTML form
searchControl.draw(document.getElementById("searchcontrol"));
}
</script>
</head>
<body [안내]태그제한으로등록되지않습니다-xxonload="[안내]태그제한으로등록되지않습니다-xxOnLoad()">
<div id="searchcontrol" />
</body>
</html>
|
볼드체로 되어 있는 부분을 Google에서 받은 여러분의 개발자 키로 대체하는 것을 잊지 말라. 페이지를 로딩하면, 그림 3과 같은 모습이 된다.
특별한 것은 업지만, 이러한 작은 컨트롤 뒤에 Google의 모든 파워가 숨어있다.
검색어를 입력하고 Search를 클릭하여 Google을 실행한다. 여러 개의 결과들이 빠르게 나타나는 것을 볼 수 있다. (그림 4)
확실히, 일단 검색을 수행하면 페이지는 좀더 유려하게 보이며, 비디오, 블로그, 검색 결과들이 이를 장식한다. 여러분이 정의한 검색어인 pre-search를 추가할 수 있다. 이것은 사용자가 페이지를 로딩하면 처음에 나타나는 결과이다. 이를 수행하려면, Listing 2의 굵은 라인을 xxJavaScript에 추가한다.
function [안내]태그제한으로등록되지않습니다-xxOnLoad() {
// Create the Google search control
var searchControl = new GSearchControl();
// These allow you to customize what appears in the search results
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// Tell Google your location to base searches around
localSearch.setCenterPoint("Dallas, TX");
// "Draw" the control on the HTML form
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute("Christmas Eve");
}
|
고유의 초기 검색어를 코드에 삽입하여 페이지가 로딩될 때 나타나는 부분을 커스터마이징 할 수 있다.
더 진행하기 전에, 이러한 기본적인 명령어가 어떤 일을 하는지 보자. 먼저, 새로운 GSearchControl
이 만들어진다. (Listing 3) 이것은 모든 검색을 수행할 수 있도록 해주는 구조이다.
Listing 3. 새로운 GSearchControl 생성하기
function [안내]태그제한으로등록되지않습니다-xxOnLoad() {
// Create the Google search control
var searchControl = new GSearchControl();
...
}
|
그런 다음 이 코드는 GlocalSearch
를 사용하여 새로운 로컬 검색을 설정한다. 이것은 특정 위치에 기반한 검색을 수행하는 특별한 Google 구조이다. 로컬 검색은 Listing 4에 설명되어 있다.
function [안내]태그제한으로등록되지않습니다-xxOnLoad() {
// Create the Google search control
var searchControl = new GSearchControl();
// These allow you to customize what appears in the search results
var localSearch = new GlocalSearch();
...
// Tell Google your location to base searches around
localSearch.setCenterPoint("Dallas, TX");
...
}
|
일단 여러분은 호출할 객체와 메소드를 배우기만 하면 충분히 이해할 수 있다. Listing 4의 코드는 새로운 로컬 검색자를 만든 다음, 검색의 중심 포인트를 설정한다.
Listing 5에서는 검색 컨트롤에게 어떤 유형의 검색을 수행해야 하는지를 지시하고 있다.
function [안내]태그제한으로등록되지않습니다-xxOnLoad() { // Create the Google search control var searchControl = new GSearchControl(); // These allow you to customize what appears in the search results var localSearch = new GlocalSearch(); searchControl.addSearcher(localSearch); searchControl.addSearcher(new GwebSearch()); searchControl.addSearcher(new GvideoSearch()); searchControl.addSearcher(new GblogSearch()); // Tell Google your location to base searches around localSearch.setCenterPoint("Dallas, TX"); ... } |
여러 가지 검색 유형들을 요약하면 다음과 같다.
GwebSearch
: 웹 검색용 객체이고, Google은 이것으로 유명해졌다.
GvideoSearch
: 검색어와 관련된 비디오를 찾는다.
GblogSearch
: 이 객체는 블로그를 통한 검색에 특별한 초점을 맞추고 있는데, 다른 웹 콘텐트 유형과는 약간 다르게 구성되고, 다른 태그가 붙는다. 여러분은 이미 특정 검색을 사전 로딩(pre-load)하는 방법을 배웠다. 이제 남은 것은 Listing 6에 나와있는 draw()
메소드 호출이다. 이 호출을 HTML에 있는 DOM 엘리먼트에 준다. (DOM에 대해서는 이전 기술자료를 참조하라. 참고자료) 컨트롤이 폼에 나타나고 사용할 준비가 된다.
function [안내]태그제한으로등록되지않습니다-xxOnLoad() {
// Create the Google search control
var searchControl = new GSearchControl();
// These allow you to customize what appears in the search results
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
// Tell Google your location to base searches around
localSearch.setCenterPoint("Dallas, TX");
// "Draw" the control on the HTML form
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute("Christmas Eve");
}
|
|
이렇게 간단한 검색 박스에서 비동기 특성이 어디에 나타나있는지 확실치 않다. 확실한 것은, 여러분 고유의 웹 애플리케이션 어딘가에 Google 검색 박스를 두긴 했지만, 이것은 Google 검색에 대한 내용이 아닌 Ajax 애플리케이션 시리즈 글이다. 그렇다면, Ajax는 어디에 있는가?
검색어를 입력하고 Search 버튼을 클릭하면, 매우 Ajax 다운 응답을 보게 된다. 검색 결과는 페이지를 재 로딩하지 않아도 나타난다. 바로 이것이 대부분의 Ajax 애플리케이션의 특징이다. 페이지를 다시 로딩하지 않고 시각적인 콘텐트 변화가 이루어 진다. 일반적인 요청/응답 모델 그 이상이라는 점은 확실하다. 그렇다면, XMLHttpRequest
? Where is the request
객체는 어디에 있는가? 그리고 getElementById()
메소드 외에, DOM과 페이지 조작은 어떻게 되었는가? 이것은 HTML의 단 두 줄이면 해결된다.
첫 번째 줄은 그 동안 많이 다루지 못했던 부분이다. (Listing 7)
Listing 7. 가장 중요한 xxJavaScript 파일
<script
src="http://www.google.com/uds/api?file=uds.js
&v=1.0&key=
[YOUR GOOGLE KEY]"
type="text/xxjavascript"> </script>
|
신택스는 특별한 것은 없지만, 중요한 것은 Google이 uds.js라는 파일을 호스팅하는데, 이 안에 검색 박스가 작동하는데 필요한 모든 xxJavaScript가 들어있다는 점이다. 엄밀히 말하면 다른 사람들의 코드를 사용하고 있는 것이다. 여러분은 서드 파티가 여러분의 애플리케이션이 사용하는 코드를 호스팅 하도록 할 수 있다. Google은 보존과 관리까지 다루기 때문에 이것은 매우 중요하고, 기업이 xxJavaScript 파일을 업그레이드 할 때 자동적으로 혜택이 미친다. Google은 여러분 모르게 API를 변경하지 않기 때문에 여러분의 코드는 xxJavaScript 파일이 수정되더라도 계속 실행된다.
여기에서 숨겨진 한 가지는 GSearchControl
객체용 코드로서 [안내]태그제한으로등록되지않습니다-xxonLoad()
xxJavaScript 함수에서 생성된다. 이 객체를 생성하려면 Listing 8의 코드를 호출한다.
Listing 8. GSearchControl 객체 생성하기
// Create the Google search control var searchControl = new GSearchControl(); |
이 HTML 역시 매우 간단하다. xxJavaScript가 참조할 수 있는 div
태그와 ID가 전부이다. (Listing 9)
Listing 9. 검색 컨트롤을 만드는데 필요한 모든 HTML
<div id="searchcontrol" /> |
|
하지만, 안 보이는 곳에서 Google의 코드는 거의 모든 종류의 일들을 수행하고 있다. 새로운 텍스트 박스, 일부 아이콘 그래픽, xxJavaScript 함수를 호출하는 버튼을 만든다. 따라서 여러분은 모든 종류의 작동을 거저 얻게 되는 것이다. 하지만 여러분은 이러한 일이 어떻게 발생하는지에 대한 기초는 이해하고 있으면, 코드를 사용하고 애플리케이션을 실행시키는데 편리하다.
Ajax 애플리케이션은 단순히 XmlHttpRequest
를 사용하는 것에 관한 것만은 아니다. 이것은 웹 애플리케이션에 접근하는 방식에 관한 것이고, 비동기성에 기반하고 있다. 여러분이 Ajax 스팩의 코드를 작성하지 않았지만, Google 덕택으로 Ajax 애플리케이션이 만들어졌다. Google이 대부분의 작업을 했고, 여러분은 그 수혜자가 된 것이다.
|
이러한 단계들을 거쳐 이것을 여러분 고유의 애플리케이션에 적용하는 것은 여러분에 달려있다. 가장 간단하게는 div
를 자신의 웹 페이지에 추가하고 Listing 1의 xxJavaScript를 웹 페이지에 추가하는 것이다. 이것으로 Google 검색을 사용할 준비가 된 것이다.
하지만 이것이 전부가 아니며, 이러한 옵션이나 컨트롤에만 국한될 필요가 없다. 웹 결과, 블로그 결과, 비디오 결과를 웹 애플리케이션에 통합할 수 있다. 각각 특정 유형의 결과에 초점을 맞춘 검색 컨트롤을 여러 개 제공할 수도 있다. div
에서 측면을 벗어나는 대신, 애플리케이션 콘텐트의 나머지 중간 오른쪽에 span
엘리먼트에 Google 검색 컨트롤을 삽입할 수 있다. 그 어떤 경우이든, Google 검색은 여러분의 필요에 맞춰 구성될 수 있고, Google에 맞추기 위해 애플리케이션을 수정할 필요는 없다.
|
이 글에서 배운 것을 토대로 구현하고, Google 검색 박스와 기타 Google API를 여러분의 Ajax 애플리케이션에 추가해 보기 바란다. 여러분은 이제 퍼블릭 API를 사용하는 방법을 알았다. 예를 들어, Amazon.com은 퍼블릭 API를 제공하면, Amazon 서점의 책과 다른 상품들에 대해서도 Google과 똑 같은 웹 검색을 수행할 수 있다. 여러분이 선호하는 퍼블릭 API를 선택하여 여러분의 코딩 스킬로 할 수 있는 그 이상을 할 수 있다. 사실, Google, Amazon.com, Flickr 등등의 결과물이 통합된 사이트를 쉽게 만들 수 있다.
Google이 제공하는 검색 알고리즘과 수 많은 데이터 스토어 때문에 Google을 사용하는 방법을 익히는 것은 중요하지만, 더 중요한 것은 퍼블릭 API를 사용하는 방법을 배우는 것이다. 코딩 스킬 이상으로 애플리케이션에 대해 생각해야 한다. 이것은 다양한 데이터 조각에 대한 게이트웨이가 될 수 있다. 그 데이터는 Google, Amazon.com, del.icio.us의 서버에 저장될 수 있다. 이렇게 하는 것 만으로도 여러분 스스로 코딩 할 수 있는 것 이상으로 매우 강력한 솔루션을 얻을 수 있다.
큰 애플리케이션을 만들어 보자. 온갖 장소에 있는 데이터를 사용하고, 여러분이 코딩한 것에만 국한하지 말자. 다음 글에서는 데이터 포맷 같은 보다 기술적인 사안을 가지고 다시 돌아오겠다.