Hello, World: Internet Explorer 8 이미지 검색 입문
이 글은 Internet Explorer 개발 팀 블로그 (영어)의 번역 문서입니다. 이 글에 포함된 정보는 Internet Explorer 개발 팀 블로그 (영어)가 생성된 시점의 내용으로, 제품의 사양이나 기능이 보장되는 것은 아닙니다. 이 글에 포함된 정보의 이용은 사용 조건을 참조해 주세요. 또, 이 글 게재 시점에서 Internet Explorer 개발 팀 블로그 (영어)의 내용이 변경 될 수 도 있습니다. 최신 정보는 Internet Explorer 개발 팀 블로그 (영어)를 참조하십시오.
영문 원본 : Hello, World: Getting Started with IE8 Visual Search
업데이트 일자: 2008 년 9 월 18 일
안녕하세요. 저는 Sebastien Zimmermann 입니다. 이미 Sharon가 소개를 설명했던 이미지 검색 기능의 개발 주임입니다. 바로 연결(Accelerator) 단추 기능 개발도 담당하고 있으며, Internet Explorer 7에서는 설치 프로그램과 피싱 사기 방지 기능 (현재는 SmartScreen 필터 기능 이라 함)을 담당했습니다.
이 글이 여러분에게 Internet Explorer 8 대상의 독자적인 이미지 검색서비스와 공급자를 생성하는 계기가 되기를 희망합니다. 웹 사이트를 개발, 운영되고 있다면, 소규모 사이트나 인트라넷에 한정된 사이트 등 어떠한 종류의 사이트에서도 이 글이 반드시 도움이 될 것이라고 생각합니다.
브라우저 내에서 검색 기능에 대응한 사이트를 구축하면, 여러분의 고객이나 사용자는 웹 사이트가 제공하는 서비스가 필요할 때에, 웹사이트 주소를 전부 입력하지 않고, 언제라도 액세스 할 수 있습니다. 또한 여러분 (또는 그 브랜드)은 항상 고객이나 사용자의 브라우저 위에 계속 존재합니다. 서비스가 보다 사용하기 쉬워질수록 여러분의 사이트에서 연속적인 경험을 하기 위해서 이 기능을 설치하려고 할 것입니다.
간단히 설명하면, 여기에서는 "Hello, World!" 를 샘플로 채택하여 신속하게 서비스를 시작 할 수 있도록 하는 기본적인 작업을 설명합니다. 기본적인 요소를 알면, 샘플을 여러분의 요구에 적합하도록 만들어 내는 것은 다른 언어로 작성된 페이지에서도 간단합니다.
설명을 간략화하기 위해 이 글에서 웹 사이트는 https://www.example.com에 있다고 가정하기 때문에, 이 도메인이름 부분은 여러분의 웹 사이트의 도메인으로 바꿔주세요.
서비스 정의
사용자가 여러분들의 서비스를 설치하려면, 우선 브라우저가 이해할 수 있는 방법 - 다시 말하면, OpenSearch Description XML 파일 (영어) - 로 서비스를 정의해야 합니다.
다음의 코드를 복사하고, 웹 사이트 루트에 배포할 파일에 저장합니다. 파일 이름은 opensearch.xml 로서 https://www.example.com/opensearch.xml 에서 누구나 액세스 할 수 있습니다.
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="https://a9.com/-/spec/opensearch/1.1/">
<ShortName>example Search</ShortName>
<Url type="text/html" template="https://www.example.com/results.aspx?q={searchTerms}" />
<Url type="application/x-suggestions+xml" template="https://www.example.com/suggestions.xml"/>
<Image height="16" width="16" type="image/icon">https://www.example.com/favicon.ico</Image>
</OpenSearchDescription>
이 파일에서 정의하는 중요한 포인트가 세가지 있습니다.
- 결과를 표시하는 페이지의 URL 은 MIME 설정을 text/html 로 하여 사용자가 검색 결과를 반환하는 장소를 results.aspx 로 지정합니다. “{searchTerms}”의 부분은 Internet Explorer 에 의해서 사용자가 검색하고 싶은 용어를 자동적으로 바꿔줍니다. 이 샘플의 웹 사이트는 통합된 사이트내 검색 엔진이 있다고 가정합니다. 이러한 검색 엔진이 없는 경우에는 그것이 인트라넷의 웹 사이트인 경우는 별도이지만, 이 부분의 URL을 대신하여 바꿔야 합니다. 예를 들면 Live.com를 도메인내의 검색에 이용하는 경우는 다음과 같습니다.
https://search.live.com/results.aspx?q=site:www.example.com+{searchTerms} - 추천 서비스는 검색 쿼리의 입력 중에 사용자를 지원하기 위한 기능으로, 여기에서는 suggestions.xml 를 지정했습니다. 추천 서비스를 웹 사이트에 구현하지 않는 경우, 이 행은 없앨 수 있습니다― 그 경우는 Internet Explorer가 문제 없이 핸들링할 것입니다. 또 XML 대신에 JSON 을사용 (영어) 한 검색 추천 서비스를 이미 이용 한 경우, 그 URL 대신에 이용할 수 있습니다. ― 다만 MIME 유형의 지정을 application/x-suggestions+xml에서 application/x-suggestions+json 으로 바꿔 주세요.
- 아이콘은 웹 사이트의 루트에 있는 favicon.ico 를 참조하도록 설계됩니다. 이 아이콘은 퀵 픽 메뉴의 단추에 이용됩니다. 검색 공급자의 단추 행이 검색창의 드롭 다운 메뉴 하단에 있어, 여기에 드로잉됩니다. 적당한 아이콘이 없는 경우, 해당하는 행 전체를 삭제해 주세요. Internet Explorer 가 기본값 (다만 특징이 없는) 아이콘을 표시합니다. 그러나, 특정한 아이콘을 설정하는 것이 바람직합니다. 아이콘을 설정하면, 사용자가 여러분의 웹 사이트나 브랜드를 식별할 수 있기 때문입니다.
주의: OpenSearch 파일을 Internet Explorer 7에서도 정상적으로 동작하도록 하기 위해서는 text/html MIME 설정이 URL 타입인 파일 내에 먼저 기술되어, application/x-suggestions+xml 또는 application/x-suggestions+json 보다 앞에 있는 것이 중요합니다.
서비스 발견
다음은 서비스 설명이 어디에 존재하는지 브라우저에게 알려줘야 합니다. 이것은 조금 전 생성한 opensearch.xml 파일을 말합니다. 이 작업은 간단하게 서비스를 이용할 수 있도록 웹 페이지의 <head /> 섹션에 다음 행을 추가하면 됩니다.
<link rel="search" type="application/opensearchdescription+xml"
href="https://blogs.msdn.com/opensearch.xml" title="example Search" />
페이지를 로드하면, 검색창의 화살표가(
) 과 같이 빛나 보인다는 것을 알 수 있습니다. 화살표를 클릭하면 여러분의 서비스를 Internet Explorer 에 추가할 수 있습니다.
또한 프로그램에서 Internet Explorer 에 검색 공급자를 추가하고자 할 수도 있습니다. 그 경우에는 AddSearchProvider() 메서드 (영어) 를 호출하여, opensearch.xml 를 참조하는 하이퍼 링크 또는 단추를 페이지에 추가해 주세요.
<a href="javascript:window.external.AddSearchProvider('/opensearch.xml')">Click here to add my search engine to IE8!</a>
주의: 검색 공급자가 이미 도입되어 있는지 확인하려면, IsSearchProviderInstalled() 메서드 (영어) 를 사용해 주세요.
마지막으로 여러분의 서비스가 설치되면, 추가 작업 없이 바로 연결(Accelerator) 단추(
)에서도 자동적으로 호출할 수 있습니다. 텍스트의 범위를 지정하여, 이 단추를 클릭하고, [그 외의 바로 연결(Accelerator)] 를 선택합니다. 서비스를 선택하면, 범위 지정되어 있는 텍스트를 대상으로 서비스가 호출됩니다. 또한 OpenSearch 파일로 직접 바로 연결(Accelerator) 프리뷰의 지원을 추가할 수도 있습니다. 이 기능에 대한 자세한 내용은 여기 문서 (영어)를 이용할 수 있습니다.
이미지 검색 추천 구현
지금까지의 작업으로 서비스가 기술되었습니다. 그러면 suggestions.xml 를 구현 해 봅시다. 여기에서는 새로운 기능의 기초에 대해 설명하기 위한 샘플을 이용합니다.
다음의 코드를 복사하여, 웹 사이트의 루트에 있는 suggestions.xml 에 붙입니다.
<?xml version="1.0"?>
<SearchSuggestion>
<Query>test</Query> <!-- Note: This sample will only work when you type "test" in the search box! -->
<Section>
<Item>
<Text>Hello, World!</Text>
<Url>https://www.webstandards.org/files/acid2/test.html#top</Url>
<Description>Your Visual Search service is working!</Description>
<Image width="100" height="100" alt="Acid2 Smiley" align="top"
source="https://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
<Separator title="This is a separator" />
<Item>
<Text>This is a simple text suggestion</Text>
</Item>
<Item>
<Text>And another one with description</Text>
<Description>This is the description</Description>
</Item>
<Item>
<Text>This is a text suggestion with an image</Text>
<Image width="16" height="16" alt="Acid2 Smiley" align="middle"
source="https://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
<Item>
<Text>This is a suggestion with a link and an image</Text>
<Url>https://www.live.com/results.aspx?q=Hello+World</Url>
<Image width="16" height="16" alt="Acid2 Smiley" align="middle"
source="https://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
</Section>
</SearchSuggestion>
검색 공급자를 선택하여 검색창에 "test" 라고 입력하면, 이 글의 앞에서 멋진 추천 기능을 볼 수 있습니다. 이 검색창에서는 Internet Explorer 는 <Query /> 태그의 적합 상황만 확인하기 때문에 , "test" 이외는 동작하지 않으니 주의해 주십시오.
ASP.NET (영어) 를 이용하면, 이것을 좀 더(왼쪽 screen shot 과 같이) 동적으로 하기 위해, suggestions.xml 파일 이름을 suggestions.aspx 로 변경하여, OpenSearch Description 파일내의 MIME 유형이 application/x-suggestions+xml 가 되는 부분의 URL을 https://www.example.com/suggestions.aspx?q={searchTerms}로 변경하여, 브라우저에 검색서비스를 다시 설치합니다 (먼저 설치한 것은 먼저 도구 메뉴의 애드온 관리에서 삭제합니다). 그리고, suggestions.aspx 의 앞 부분을 다음과 같이 바꾸고 다시 검색을 합니다.
<%@ Page ContentType="text/xml" Language="C#" %>
<%@ OutputCache Location="None" %><?xml version="1.0"?>
<SearchSuggestion>
<Query><%=HttpUtility.HtmlEncode(Request["q"])%></Query>
<Section title="example Search">
<Item>
<Text>You typed: <%=HttpUtility.HtmlEncode(Request["q"])%></Text>
</Item>
<Separator />
<!-- The rest of the file comes here -->
<Item>
<Text>Hello, World!</Text>
<Url>https://www.webstandards.org/files/acid2/test.html#top</Url>
<Description>Your Visual Search service is working!</Description>
<Image width="100" height="100" alt="Acid2 Smiley" align="top"
source="https://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
...
요약
서비스를 시작 단계에서, 이 글이 조금이라도 도움이 되었으면 합니다 여러분이 Internet Explorer 8 의 이미지 검색 기능을 독창적으로 이용하여, 사용자가 원하는 것을 신속하게 찾는데 도움이 되기 바랍니다. 또 이 글의 내용보다, 좀 더 깊이 있는 내용으로 원하시는 분은 “ Search Provider Extensibility” (영어) 를 참조해 주세요.
이 기능을 이용한 훌륭한 서비스를 개발하는 역할은 여러분에게 있습니다. Internet Explorer Gallery (영어)에는 이미 이용 가능한 서비스가 있습니다.
퀵 픽 메뉴는 " 버티컬 ” 검색 - 예를 들면 Wikipedia , Amazon , 여러분 사이트 등등 - 을 보다 시각적이고 편리합니다. 그리고 사용자가 원하는 것을 여러분의 서비스에서 정하는 것도 가능합니다. 그리고 여러분의 웹 사이트 내용이 주식 시세나 금융정보, 또는 음악, 자동차 부품, 과자 판매 등 어떤 내용이든 웹 사이트와 보다 깊고, 편리하고 지속적으로 좋은 관계를 만드는 방법을 고객에게 제공할 수 있습니다.
IE8 Gallery 에 OpenSearch Description 파일을 업로딩 해 주세요 (영어) .
즐거운 코딩을!
Sébastien Zimmermann
Software Design Engineer