올해 초, 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 도서의 미리보기 링크를 확인하세요.
링크 미리보기를 위한 스마트 칩을 만들 때 두 가지 기술 중에서 선택하여 부가기능을 만들 수 있는데, 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에 게시하는 방법에 대해 자세히 알아보려면 절차를 안내하는 이 동영상을 시청하세요.
개발자 문서에서 링크 미리보기용 스마트 칩을 만드는 방법에 대해 자세히 알아보세요. 이 문서에서 솔루션의 기반이 되는 추가 정보와 코드 샘플을 찾을 수 있습니다. 여러분이 어떤 스마트 칩 솔루션을 만들지 기대됩니다.
