Google 문서에서 링크 미리보기를 위한 스마트 칩 만들기

12월 19, 2023

Chanel Greco Developer Advocate Google Workspace

올해 초, Google은 Google 문서 도구에서 사용할 수 있는 타사 스마트 칩의 정식 버전을 발표했습니다. 이 새로운 기능을 사용하면 Google 문서 도구에서 직접 타사 앱의 중요한 정보를 추가하거나 보거나 연결할 수 있습니다. Asana, Atlassian, Figma, Loom, Miro, Tableau, Whimsical 등 여러 파트너가 이미 스마트 칩을 만들었기 때문에 사용자가 해당 앱의 콘텐츠를 Docs에 직접 삽입할 수 있습니다. Google Workspace의 Google 개발 전문가이자 취미 개발자인 Sourabh Choraria는 "Link Previews"라는 타사 스마트 칩 솔루션을 Google Workspace Marketplace에 게시했습니다. 이 앱을 사용하면 일반적으로 사용되는 여러 SaaS 도구의 정보를 Google 문서 도구에 추가할 수 있습니다.

이 블로그 게시물에서는 Google 문서용 스마트 칩을 만드는 방법을 알아볼 수 있습니다.

이벤트 관리 시스템의 정보를 미리보기 위해 만든 스마트 칩의 예

타사 서비스용 스마트 칩의 작동 방식 이해하기

타사 스마트 칩은 Google Workspace 부가기능으로 구동되며 Google Workspace Marketplace에 게시할 수 있습니다. 여기에서 관리자 또는 사용자가 이 부가기능을 설치할 수 있으며 Google 문서 도구의 오른쪽에 있는 사이드바에 부가기능이 표시됩니다.

Google Workspace 부가기능이 서비스의 링크를 감지하고 Google 문서 사용자에게 해당 링크를 미리 보도록 요청합니다. 그러면 공개적으로 액세스할 수 있는 URL이 있는 모든 서비스에 대해 스마트 칩을 만들 수 있게 됩니다. 지원 기록 링크, 영업 리드, 직원 프로필 등과 같은 여러 URL 패턴을 미리 볼 수 있는 부가기능을 구성할 수 있습니다. 부가기능의 매니페스트 파일을 통해 이 구성이 수행됩니다.

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "addOns": {
    "common": {
      "name": "Preview Books Add-on",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/library-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "bookLinkPreview",
          "patterns": [
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books"
            },
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books/edition"
            }
          ],
          "labelText": "Book",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/book-icon.png",
          "localizedLabelText": {
            "es": "Libros"
          }
        }
      ]
    }
  }
}

매니페스트 파일에는 Google 도서 API의 URL 패턴이 포함되어 있습니다.

스마트 칩에서 링크 콘텐츠의 아이콘과 짧은 제목이나 설명을 표시합니다. 사용자가 칩 위로 마우스를 가져가면 파일 또는 링크에 대한 자세한 정보를 미리 볼 수 있는 카드 인터페이스가 표시됩니다. 사용자가 스마트 칩 위로 마우스를 가져갈 때 표시되는 카드 인터페이스를 사용자 정의할 수 있습니다. 카드 인터페이스를 만들려면 위젯을 사용하여 링크에 대한 정보를 표시합니다. 사용자가 링크를 열거나 콘텐츠를 수정할 수 있는 작업을 만들 수도 있습니다. 미리보기 카드에 지원되는 모든 구성요소 목록은 개발자 설명서를 확인하세요.

function getBook(id) {
// Code to fetch the data from the Google Books API
}
 
function bookLinkPreview(event) {
 if (event.docs.matchedUrl.url) {
// Through getBook(id) the relevant data is fetched and used to build the smart chip and card
 
    const previewHeader = CardService.newCardHeader()
      .setSubtitle('By ' + bookAuthors)
      .setTitle(bookTitle);
 
    const previewPages = CardService.newDecoratedText()
      .setTopLabel('Page count')
      .setText(bookPageCount);
 
    const previewDescription = CardService.newDecoratedText()
      .setTopLabel('About this book')
      .setText(bookDescription).setWrapText(true);
 
    const previewImage = CardService.newImage()
      .setAltText('Image of book cover')
      .setImageUrl(bookImage);
 
    const buttonBook = CardService.newTextButton()
      .setText('View book')
      .setOpenLink(CardService.newOpenLink()
        .setUrl(event.docs.matchedUrl.url));
 
    const cardSectionBook = CardService.newCardSection()
      .addWidget(previewImage)
      .addWidget(previewPages)
      .addWidget(CardService.newDivider())
      .addWidget(previewDescription)
      .addWidget(buttonBook);
 
    return CardService.newCardBuilder()
    .setHeader(previewHeader)
    .addSection(cardSectionBook)
    .build();
  }
}

스마트 칩을 만들기 위한 앱 스크립트 코드입니다.

스마트 칩 위로 마우스를 가져간 상태. 표시된 데이터는 사용자가 붙여넣은 Google for Developers 블로그 게시물 URL에서 가져온 것입니다.

이 게시물에 사용된 코드를 자세히 살펴보려면 스마트 칩 샘플 튜토리얼이 포함된 Google 도서의 미리보기 링크를 확인하세요.

부가기능을 위한 기술을 선택하는 방법

링크 미리보기를 위한 스마트 칩을 만들 때 두 가지 기술 중에서 선택하여 부가기능을 만들 수 있는데, Google Apps Script 또는 대체 런타임입니다.

Apps Script는 Google Workspace에 내장된 신속한 애플리케이션 개발 플랫폼입니다. 덕분에 Apps Script는 기존의 개발 환경이 필요하지 않으므로 스마트 칩 솔루션의 프로토타이핑 및 유효성 검사를 위한 좋은 선택이 될 수 있습니다. 그러나 Apps Script는 일부 개발자가 이를 사용하여 Google Workspace 부가기능을 만들고 사용자가 설치할 수 있도록 Google Workspace Marketplace에 게시하기 때문에 프로토타입 제작에만 사용할 수 있는 것은 아닙니다.

Apps Script로 스마트 칩을 만들고 싶다면 아래 동영상을 확인하세요. Google 문서에서 링크 미리보기용 스마트 칩을 만드는 방법을 상세하게 알아볼 수 있습니다. 동영상 튜토리얼에서 사용된 코드를 원하시나요? 그러면 스마트 칩이 포함된 Google 도서의 미리보기 링크 샘플 페이지를 살펴보세요.

Link to Youtube Video (visible only when JS is disabled)

자체 개발 환경, 프로그래밍 언어, 호스팅, 패키지 등을 사용하여 Google Workspace 부가기능을 만드는 것을 선호하는 경우 대체 런타임이 올바른 선택입니다. Node.js, Java, Python 등과 같은 다양한 프로그래밍 언어 중에서 선택할 수 있습니다. 런타임 코드가 공용 HTTP(S) 엔드포인트로 노출될 수 있는 한 부가기능 런타임 코드를 모든 클라우드 또는 사내 인프라에서 호스팅할 수 있습니다. 개발자 설명서에서 대체 런타임을 사용하여 스마트 칩을 만드는 방법에 대해 자세히 알아볼 수 있습니다.

다른 사용자와 부가기능을 공유하는 방법

Google Workspace Marketplace를 통해 다른 사용자와 부가기능을 공유할 수 있습니다. 스마트 칩 솔루션을 팀에서 사용할 수 있도록 하고 싶다고 가정해 보겠습니다. 이 경우 부가기능을 Google Workspace 조직에 게시할 수 있는데, 이를 비공개 앱이라고도 합니다. 반면에 Google 계정이 있는 사용자와 부가기능을 공유하려면 공개 앱으로 게시할 수 있습니다.

Google Workspace Marketplace에 게시하는 방법에 대해 자세히 알아보려면 절차를 안내하는 이 동영상을 시청하세요.

시작하기

개발자 문서에서 링크 미리보기용 스마트 칩을 만드는 방법에 대해 자세히 알아보세요. 이 문서에서 솔루션의 기반이 되는 추가 정보와 코드 샘플을 찾을 수 있습니다. 여러분이 어떤 스마트 칩 솔루션을 만들지 기대됩니다.

게시 위치: