Google 검색 진입점 사용

Google 검색 진입점 사용

Google 검색 진입점을 사용하려면 그라운딩된 응답의 메타데이터에 포함된 검색어를 기준으로 진입점을 표시해야 합니다. 응답에 다음이 포함됩니다.

  • 'content': LLM에서 생성한 응답입니다.
  • 'searchQuery': Google 검색 진입점에 사용할 쿼리입니다.

예를 들어 다음 코드 스니펫에서 Gemini는 열대 식물 유형을 묻는 Google 검색 그라운딩된 프롬프트에 응답합니다.

"predictions": [
  {
    "content": "Monstera is a type of vine that thrives in bright indirect light…",
    "groundingMetadata": {
      "webSearchQueries": ["What's a monstera?"],
    }
  }
]

Google 검색 진입점을 사용하여 이 출력을 가져와 표시할 수 있습니다.

Google 검색 진입점 요구사항

해야 할 일:

  • 아래의 디스플레이 요구사항을 준수하면서 진입점을 수정하지 않고 제공된 대로 정확하게 표시합니다.
  • 사용자가 진입점과 상호작용할 때 Google 검색 결과 페이지(SRP)로 직접 가져옵니다.

하지 말아야 할 일:

  • 사용자 탭과 SRP 디스플레이 사이에 전면 광고 화면이나 추가 단계를 포함합니다.
  • 진입점 또는 연결된 그라운딩된 LLM 응답과 함께 다른 검색 결과나 제안을 표시합니다.

디스플레이 요구사항

  • 진입점을 제공된 대로 정확하게 표시하고 색상, 글꼴 또는 모양을 수정하지 마세요. 진입점이 밝은 모드와 어두운 모드를 포함하여 아래 모의에 지정된 대로 렌더링되는지 확인합니다.
  • 그라운딩된 응답이 표시될 때마다 해당 Google 검색 진입점이 계속 표시되어야 합니다.
  • 브랜딩: 서드 파티의 Google 브랜드 표시 사용에 대한 Google 가이드라인을 엄격하게 준수해야 합니다.
  • Google 검색 진입점은 최소한 그라운딩된 응답의 전체 너비여야 합니다.

탭할 때 동작

사용자가 칩을 탭하면 칩에 표시된 검색어의 Google 검색 결과 페이지(SRP)로 바로 이동합니다. SRP는 인앱 브라우저 또는 별도의 브라우저 앱에서 열 수 있습니다. 어떠한 방식으로든 SRP 디스플레이를 최소화, 삭제 또는 방해하지 않는 것이 중요합니다. 다음 애니메이션 목업에서는 탭-SRP 상호작용을 보여줍니다.

Google 검색 진입점을 구현하는 코드

다음 템플릿 예시 및 스타일은 나열된 요구사항을 준수하는 그라운딩에 사용되는 검색어에 대한 Google 검색 진입점을 렌더링합니다.

CSS 스타일 지정을 격리하려면 애플리케이션 내 적절한 위치의 Shadow DOM 내에 삽입하는 것이 좋습니다.

Shadow DOM을 만드는 코드의 형식은 cs const shadow = element.attachShadow({mode: 'open'}); shadow.innerHTML = 'content';입니다. 이 예시에서 요소는 Shadow DOM을 배치할 위치이며 콘텐츠는 다음과 같은 코드 예시입니다.

다음 변수를 바꿉니다.

  • URL_ENCODED_SEARCH_QUERY: groundingMetadata.searchQuery의 URL 인코딩 버전입니다.
  • SEARCH_TERM: groundingMetadata.searchQuery의 첫 번째 요소입니다.
<style>
.container {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-family: Google Sans, Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
}
.chip {
  display: inline-block;
  border: solid 1px;
  border-radius: 16px;
  min-width: 14px;
  padding: 5px 16px;
  text-align: center;
  user-select: none;
  margin: 0 8px;
  -webkit-tap-highlight-color: transparent;
}
.carousel {
  overflow: auto;
  scrollbar-width: none;
  white-space: nowrap;
  margin-right: -12px;
}
.headline {
  display: flex;
  margin-right: 4px;
}
.gradient-container {
  position: relative;
}
.gradient {
    position: absolute;
    transform: translate(3px, -9px);
    height: 36px;
    width: 9px;
}
@media (prefers-color-scheme: light) {
  .container {
    background-color: #fafafa;
    box-shadow: 0 0 0 1px #0000000f;
  }
  .headline-label {
    color: #1f1f1f;
  }
  .chip {
    background-color: #ffffff;
    border-color: #d2d2d2;
    color: #5e5e5e;
    text-decoration: none;
  }
  .chip:hover {
    background-color: #f2f2f2;
  }
  .chip:focus {
    background-color: #f2f2f2;
  }
  .chip:active {
    background-color: #d8d8d8;
    border-color: #b6b6b6;
  }
  .logo-dark {
    display: none;
  }
  .gradient {
      background: linear-gradient(90deg, #fafafa 15%, #fafafa00 100%);
  }
}
@media (prefers-color-scheme: dark) {
  .container {
    background-color: #1f1f1f;
    box-shadow: 0 0 0 1px #ffffff26;
  }
  .headline-label {
    color: #fff;
  }
  .chip {
    background-color: #2c2c2c;
    border-color: #3c4043;
    color: #fff;
    text-decoration: none;
  }
  .chip:hover {
    background-color: #353536;
  }
  .chip:focus {
    background-color: #353536;
  }
  .chip:active {
    background-color: #464849;
    border-color: #53575b;
  }
  .logo-light {
    display: none;
  }
  .gradient {
    background: linear-gradient(90deg, #1f1f1f 15%, #1f1f1f00 100%);
  }
}
</style>
<div class="container">
  <div class="headline">
    <svg class="logo-light" width="18" height="18" viewBox="9 9 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M42.8622 27.0064C42.8622 25.7839 42.7525 24.6084 42.5487 23.4799H26.3109V30.1568H35.5897C35.1821 32.3041 33.9596 34.1222 32.1258 35.3448V39.6864H37.7213C40.9814 36.677 42.8622 32.2571 42.8622 27.0064V27.0064Z" fill="#4285F4"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M26.3109 43.8555C30.9659 43.8555 34.8687 42.3195 37.7213 39.6863L32.1258 35.3447C30.5898 36.3792 28.6306 37.0061 26.3109 37.0061C21.8282 37.0061 18.0195 33.9811 16.6559 29.906H10.9194V34.3573C13.7563 39.9841 19.5712 43.8555 26.3109 43.8555V43.8555Z" fill="#34A853"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6559 29.8904C16.3111 28.8559 16.1074 27.7588 16.1074 26.6146C16.1074 25.4704 16.3111 24.3733 16.6559 23.3388V18.8875H10.9194C9.74388 21.2072 9.06992 23.8247 9.06992 26.6146C9.06992 29.4045 9.74388 32.022 10.9194 34.3417L15.3864 30.8621L16.6559 29.8904V29.8904Z" fill="#FBBC05"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M26.3109 16.2386C28.85 16.2386 31.107 17.1164 32.9095 18.8091L37.8466 13.8719C34.853 11.082 30.9659 9.3736 26.3109 9.3736C19.5712 9.3736 13.7563 13.245 10.9194 18.8875L16.6559 23.3388C18.0195 19.2636 21.8282 16.2386 26.3109 16.2386V16.2386Z" fill="#EA4335"/>
    </svg>
    <svg class="logo-dark" width="18" height="18" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
      <circle cx="24" cy="23" fill="#FFF" r="22"/>
      <path d="M33.76 34.26c2.75-2.56 4.49-6.37 4.49-11.26 0-.89-.08-1.84-.29-3H24.01v5.99h8.03c-.4 2.02-1.5 3.56-3.07 4.56v.75l3.91 2.97h.88z" fill="#4285F4"/>
      <path d="M15.58 25.77A8.845 8.845 0 0 0 24 31.86c1.92 0 3.62-.46 4.97-1.31l4.79 3.71C31.14 36.7 27.65 38 24 38c-5.93 0-11.01-3.4-13.45-8.36l.17-1.01 4.06-2.85h.8z" fill="#34A853"/>
      <path d="M15.59 20.21a8.864 8.864 0 0 0 0 5.58l-5.03 3.86c-.98-2-1.53-4.25-1.53-6.64 0-2.39.55-4.64 1.53-6.64l1-.22 3.81 2.98.22 1.08z" fill="#FBBC05"/>
      <path d="M24 14.14c2.11 0 4.02.75 5.52 1.98l4.36-4.36C31.22 9.43 27.81 8 24 8c-5.93 0-11.01 3.4-13.45 8.36l5.03 3.85A8.86 8.86 0 0 1 24 14.14z" fill="#EA4335"/>
    </svg>
    <div class="gradient-container"><div class="gradient"></div></div>
  </div>

  <div class="carousel">
    <a class="chip" href="https://www.google.com/search?q=<var>URL_ENCODED_SEARCH_QUERY</var>&client=app-vertex-grounding&safesearch=active">
      <var>SEARCH_TERM</var>
    </a>
  </div>
</div>
</pre>

다음 단계