이 페이지에서는 검색창과 검색결과의 디자인을 맞춤설정하는 방법을 설명합니다. 컨텍스트 파일을 사용하여 검색엔진의 디자인을 구현하려면 'XML을 사용하여 디자인과 분위기 설계' 페이지를 참조하세요.
개요
제어판 또는 XML 컨텍스트 파일에서 프로그래밍 검색 엔진의 검색창과 검색결과를 모두 변경할 수 있습니다. 검색엔진이 적은 경우 제어판을 통해 매우 간단하게 검색엔진을 관리하고 맞춤설정할 수 있습니다. 디자인 페이지로 이동하여 스타일을 선택하고 구성요소를 디자인한 다음 저장을 클릭하기만 하면 됩니다. 이 페이지에서 이 작업을 수행하는 방법을 설명합니다. 하지만 다수의 검색엔진을 만들고 관리하는 경우 간단한 절차라도 여러 검색엔진에 걸쳐 반복한다면 지루한 일이 될 수 있습니다. 이러한 경우에는 XML을 사용하는 것이 더 좋습니다. XML을 사용하기로 결정한 경우 먼저 이 페이지를 읽고 작업의 일반적인 작동 방식을 파악하세요. 그런 다음 XML을 사용하여 디자인과 분위기 디자인하기 페이지를 읽고 XML 요소 및 속성에 관해 알아보세요.
제어판만 사용해야 할지 XML 형식을 사용해야 할지 잘 모르겠다면 각 형식의 장점과 단점을 설명하는 기본 사항 페이지를 참조하세요.
참고: 맞춤 검색엔진의 디자인과 분위기를 디자인하기 전에 프로그래밍 검색 엔진 구현 가이드라인 을 읽어보세요. 이 문서는 Google 브랜딩 및 저작자 표시를 처리하는 방법을 설명하는 짧은 문서입니다.
Search Element를 사용하여 결과 호스팅
검색 요소는 웹페이지에 삽입할 수 있는 객체로 광범위한 맞춤설정이 가능합니다. 독자가 보고 있는 동일한 웹페이지 또는 다른 웹페이지에 검색창과 검색결과를 함께 표시할 수 있습니다.
참고: 검색 요소는 간단한 레이아웃과 함께 사용하면 휴대기기에서 잘 작동합니다.
프로그래밍 검색 Element Control API를 활용하여 검색 UI를 추가로 맞춤설정할 수도 있습니다. HTML 속성을 통해 다양한 맞춤설정이 지원됩니다. 예를 들어 결과 페이지의 레이아웃 6개 중에서 선택하거나 반환할 검색결과 수를 설정할 수 있습니다.
프로그래밍 검색 엔진에서 더 이상 iframe 호스팅 옵션을 지원하지 않습니다. 새 옵션으로 검색 요소에 '두 페이지' 또는 '결과만' 레이아웃을 사용하는 것이 좋습니다. 자세한 내용은 블로그 게시물 을 확인하세요.
검색 UI의 개별 구성요소 디자인
맞춤설정 가능한 구성요소
맞춤설정할 수 있는 구성요소는 검색엔진에서 선택한 요소 레이아웃에 따라 다릅니다. 예를 들어 제어판을 사용하면 Google에서 호스팅하는 검색엔진의 로고만 추가할 수 있습니다. 다른 호스팅 옵션을 사용하여 검색엔진에 로고를 추가할 수 없습니다.
제어판을 사용하여 다음 구성요소를 정의할 수 있습니다.
검색 요소 레이아웃 설정
검색 UI가 웹페이지에 배치되는 방식을 맞춤설정할 수 있습니다. 검색창과 결과 섹션을 동일한 열에 배치하거나 한 열에 검색창을 배치하고 다른 열 또는 다른 페이지에 결과 섹션을 배치할 수도 있습니다.
레이아웃 옵션은 다음과 같습니다 (데모를 보려면 링크 클릭).
| 옵션 | 설명 |
|---|---|
| OverLay | 검색결과를 오버레이로 표시합니다. |
|
2페이지
단순 여러 검색창/결과 섹션 |
검색창과 검색결과 섹션은 서로 다른 두 웹페이지에 있습니다.
참고: 검색결과 섹션에는 검색창도 있습니다. 사용자는 검색결과 페이지에서 직접 검색어를 제출할 수 있습니다. |
| 전체 너비 | 검색창과 검색결과 섹션은 검색 요소를 삽입한 페이지 또는 열의 전체 너비를 차지합니다. |
| 2열 | 검색창과 검색결과 섹션이 웹페이지의 다른 열 또는 섹션에 있습니다. 검색결과 섹션을 닫으려면 사용자가 검색창 옆에 있는 X 아이콘을 클릭합니다. |
| 좁게 |
전체 너비 옵션과 마찬가지로 페이지 또는 열의 전체 너비를 차지하지만 결과 섹션에 표시되는 결과가 더 적으므로 웹페이지에서 펼칠 때 세로 공간을 덜 차지합니다.
도움말: 이 옵션은 스마트폰과 휴대기기에 최적화되어 있습니다. |
|
결과만
URL을 통해 검색 검색창을 통해 검색 |
검색결과가 내 웹페이지 중 하나에 표시되고 검색결과 페이지에 검색창이 없습니다. 내 검색창을 사용해 검색어를 제출합니다.
참고: 광고를 표시하지 않는 프로그래밍 검색 엔진에는 브랜딩을 사용 중지할 수 있는 옵션이 없습니다. |
|
Google 호스팅
현재 창 새 창 |
검색창은 웹페이지 중 하나에 표시됩니다. 검색결과는 Google에서 호스팅하는 웹페이지에 표시되며, 웹페이지는 동일한 창 또는 새 창에서 열 수 있습니다. |
검색창 설계
검색창은 웹페이지의 HTML 본문 내 어디에나 삽입할 수 있습니다. 단, 검색창은 다음 예와 같이 일반적으로 웹페이지의 상단 (또는 상단 가까이)에 배치됩니다.
그림 1: 검색창이 상단에 배치된 웹페이지
자동 완성 사용 설정
자동 완성 기능은 사용자가 검색창에 검색어를 입력할 때 쿼리 옵션을 제공합니다. 이는 Google 검색에 표시되는 선택적 검색어와 유사합니다.
그림 2: 검색창에 몇 글자만 입력하면 다양한 검색어 옵션을 제공하는 드롭다운 목록이 표시됩니다.
프로그래밍 검색 엔진은 검색엔진에 맞게 자동 완성을 맞춤설정합니다. 이 기법은 검색엔진에 입력하는 검색어, 검색엔진이 다루는 웹사이트 콘텐츠에서 추출한 키워드 및 구문을 비롯한 여러 소스에서 정보를 추출하는 다른 알고리즘을 사용합니다.
자동 완성 검색어는 부분적으로는 검색엔진에서 다루는 웹페이지의 특정 콘텐츠를 기반으로 하기 때문에, 프로그래밍 검색 엔진은 전체 웹을 검색하는 검색엔진에 대해 자동 완성을 생성하지 않습니다. 즉, 미리 정의된 웹사이트 모음인 사이트를 검색하는 검색엔진에만 자동 완성된 검색어가 포함될 수 있습니다. 개요 페이지의 검색할 사이트 섹션에서 검색엔진의 범위를 설정할 수 있습니다.
자동 완성 기능은 검색 기능 페이지의 자동 완성 섹션에 있습니다.
자동 완성을 사용하려면 다음 단계를 따르세요.
- 검색 기능 페이지의 자동 완성 섹션으로 이동합니다.
-
자동 완성 사용 컨트롤을 사용 설정합니다.
참고: 자동 완성 검색어는 검색엔진마다 생성되므로 자동 완성이 검색엔진에 표시되기까지 몇 시간이 걸립니다.
- 기존 검색엔진에서 처음으로 자동 완성을 사용하도록 설정하는 경우 웹페이지에 삽입한 검색창의 코드 스니펫을 삭제해야 합니다. 코드 가져오기 탭에서 생성된 새 코드로 교체합니다. 자세한 내용은 웹사이트에 디자인 구현 섹션을 참고하세요.
결과 설계
결과 페이지의 다음 구성요소를 변경할 수 있습니다.
개별 결과
개별 결과를 시각적으로 묘사하거나 사용자가 선택한 결과를 강조하려면 개별 결과의 테두리와 배경을 정의하면 됩니다.
그림 3: 개별 결과가 묘사된 결과와 마우스 오버 시 개별 결과가 강조 표시된 결과
상세검색 탭
검색엔진에서 상세검색 라벨을 만든 경우 라벨이 검색 요소에 탭으로 표시됩니다. 제어판을 사용해 상세검색 탭의 색상을 변경할 수 있습니다.
프로모션
검색엔진에 프로모션을 만든 경우 디자인과 분위기를 변경할 수 있습니다. 프로모션은 사용자가 만드는 특별한 유형의 검색결과입니다.
로고 (Google 호스팅 전용)
Google에서 결과 페이지를 호스팅하도록 허용하는 경우 검색결과 페이지의 검색창 바로 옆에 로고나 작은 이미지를 포함할 수 있습니다. 이미지는 자체 웹사이트 또는 저작권 제한이 없는 웹사이트에서 호스팅되는 .jpg, .png 또는 .gif 파일이어야 합니다. URL을 이미지와 연결하여 클릭 가능한 이미지로 변환할 수 있습니다.
다음은 로고가 포함된 결과 페이지의 예입니다.
그림 4: 이미지가 있는 검색창
웹사이트에 디자인 구현
검색엔진의 디자인과 분위기를 디자인한 후 다음 단계에 따라 웹페이지에 구현할 수 있습니다.
- 디자인 페이지에서 수정한 섹션에서 저장을 클릭합니다.
- 디자인 페이지의 레이아웃 섹션에서 코드 가져오기를 클릭합니다.
-
Code 팝업에서 생성된 코드 스니펫을 복사합니다.
2열 레이아웃을 선택한 경우 2개의 코드 스니펫을 복사합니다. 하나는 검색창용이고 다른 하나는 결과용입니다.
두 페이지 레이아웃을 선택한 경우 검색엔진의 결과를 표시할 웹페이지의 URL을 입력합니다. URL에 삽입된 쿼리 매개변수 이름을 입력하면 검색결과 페이지에서 이 이름이 파싱됩니다. 마지막으로 두 코드 스니펫을 복사합니다.
결과 전용 레이아웃의 코드 스니펫은 검색결과가 새 페이지에 표시되는 경우에 사용합니다. URL에 삽입된 쿼리 매개변수 이름을 입력하면 검색결과 페이지에서 파싱됩니다. 마지막으로 검색결과 코드 스니펫을 복사합니다.
-
프로그래밍 검색 엔진 상자를 추가할 모든 페이지에 코드를 삽입합니다. 웹페이지의
<body></body>태그 내 어디에나 코드를 붙여넣을 수 있습니다.참고: 브라우저 간 호환성을 최대한 높이려면 HTML 페이지에서
<!DOCTYPE html>와 같이 지원되는 doctype을 사용하는 것이 좋습니다.검색 요소에 마우스 오버 효과를 사용하는 경우 HTML 페이지에서
<!DOCTYPE html>와 같이 지원되는 doctype을 사용해야 합니다.
2열 레이아웃을 선택한 경우 한 열에 검색창 코드를 삽입하고 다른 열에 결과 코드를 삽입합니다.
두 페이지 레이아웃을 선택한 경우 검색창을 표시할 웹페이지에 검색창 코드를 삽입하고 검색결과를 표시할 웹페이지에 결과 코드를 삽입합니다.
결과 전용 레이아웃을 선택한 경우 검색결과를 표시할 웹페이지에 코드 스니펫을 삽입합니다.