이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Google Meet 부가기능 SDK를 사용하여 웹용 부가기능 빌드

이 튜토리얼에서는 웹용 Google Meet 부가기능 소프트웨어 개발 키트 (SDK)를 사용하여 부가기능을 빌드하는 방법을 보여줍니다. 이렇게 하면 Google Meet을 종료하지 않고도 웹 앱 내에서 공유하고 공동작업할 수 있습니다.

웹용 Meet 부가기능 SDK의 측면 패널
사용자가 공동작업하는 웹용 Meet 부가기능 SDK의 기본 단계

목표

Google Cloud 콘솔에서 웹용 Meet 부가기능 SDK를 만들고 배포합니다.
웹용 Meet 부가기능 SDK의 기본 단계와 측면 패널을 만듭니다.

개발 환경 준비

이 섹션에서는 웹용 Meet 부가기능 SDK용 Google Cloud 프로젝트를 만들고 구성하는 방법을 보여줍니다.

Google Cloud 프로젝트 만들기

Google Cloud 콘솔

Google Cloud 콘솔에서 메뉴 > IAM 및 관리자 > 프로젝트 만들기로 이동합니다.
프로젝트 만들기로 이동
프로젝트 이름 필드에 프로젝트를 설명하는 이름을 입력합니다.
선택사항: 프로젝트 ID를 수정하려면 수정을 클릭합니다. 프로젝트를 만든 후에는 프로젝트 ID를 변경할 수 없으므로 프로젝트의 전체 기간 동안 필요에 맞는 ID를 선택하세요.
위치 필드에서 찾아보기를 클릭하여 프로젝트의 잠재적 위치를 표시합니다. 그런 다음 선택을 클릭합니다.
주의: Google Workspace 조직을 찾을 수 없나요?
Google Workspace 계정에 로그인되어 있지 않다는 의미입니다. Google Workspace 개발자 문서에 설명된 일부 기능은 조직과 연결된 프로젝트에서만 사용할 수 있습니다.
만들기를 클릭합니다. Google Cloud 콘솔이 대시보드 페이지로 이동하고 몇 분 내에 프로젝트가 생성됩니다.

gcloud CLI

다음 개발 환경 중 하나에서 Google Cloud CLI (`gcloud`)에 액세스합니다.

Cloud Shell: gcloud CLI가 이미 설정된 온라인 터미널을 사용하려면 Cloud Shell을 활성화합니다.
Cloud Shell 활성화
로컬 셸: 로컬 개발 환경을 사용하려면 gcloud CLI를 설치하고 initialize합니다.
Cloud 프로젝트를 만들려면 `gcloud projects create`명령어를 사용합니다.
```
gcloud projects create PROJECT_ID
```
PROJECT_ID를 만들려는 프로젝트의 ID를 설정하여 바꿉니다.

API 사용 설정

Console

Google Cloud 콘솔에서 Google Workspace Marketplace SDK 및 Google Workspace Add-ons API를 사용 설정합니다.

API 사용 설정
올바른 Cloud 프로젝트에서 API를 사용 설정했는지 확인한 후 다음을 클릭합니다.
올바른 API를 사용 설정했는지 확인한 후 사용 설정을 클릭합니다.

gcloud CLI

필요한 경우 현재 Google Cloud 프로젝트를 gcloud config set project 명령어를 사용하여 만든 프로젝트로 설정합니다.
```
gcloud config set project PROJECT_ID
```
PROJECT_ID를 생성한 Cloud 프로젝트의 프로젝트 ID로 바꿉니다.
gcloud services enable 명령어로 Google Workspace Marketplace SDK 및 Google Workspace Add-ons API를 사용 설정합니다.
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

웹 앱 만들기 및 배포

다음 섹션에서는 웹용 Meet 부가기능 SDK에 필요한 모든 애플리케이션 코드가 포함된 전체 웹 애플리케이션 프로젝트 (Firebase를 사용하여 빌드됨)를 복사하고 업데이트합니다. 먼저 웹 애플리케이션을 구성하고 배포해야 합니다.

샘플 코드 검토

GitHub에서 기본 웹 애플리케이션을 보고 다운로드할 수 있습니다.

GitHub에서 보기

다음은 기본 코드의 개요입니다.

React 기반 프레임워크인 Next.js를 사용하여 빌드됩니다.
스타일 지정에 Tailwind CSS를 사용합니다.
src/components에는 애플리케이션 로직의 대부분이 포함되어 있습니다. 여기에서는 업데이트하거나 수정할 사항이 없습니다.
src/firebase에는 Firebase 구성 및 초기화 코드가 포함되어 있습니다.
src/app에는 웹 앱 진입점이 있습니다.
src/app/page.tsx는 기본 페이지 또는 프로젝트 목록입니다.
src/app/project/[id]/page.tsx는 개별 프로젝트 및 작업 목록의 페이지입니다.
.env에는 환경 구성이 포함됩니다.

Firebase 프로젝트 및 CLI 설정

Firebase는 개발자가 앱을 빌드하는 데 도움을 주는 모바일 및 웹 애플리케이션 개발 플랫폼입니다. Firestore는 사용자가 모바일 및 웹 앱용 데이터를 저장, 동기화, 쿼리할 수 있게 해주는 NoSQL 문서 데이터베이스입니다 Firestore는 할 일 목록 정보를 저장하는 곳입니다. 앱에서 Firebase 기능을 사용하므로 Firebase CLI와 함께 Firebase 프로젝트를 설정해야 합니다. 요청할 작업:

Firebase 프로젝트를 만듭니다.
Cloud Firestore 데이터베이스를 만듭니다.
Firebase CLI를 설치하거나 최신 버전으로 업데이트합니다.
기본 앱의 루트 디렉터리로 이동합니다.
프로젝트를 초기화합니다.

로컬 프로젝트 파일을 Firebase 프로젝트에 연결합니다.
```
firebase init firestore
```
프로젝트 초기화 중 Firebase CLI 프롬프트에서 다음을 수행합니다.
1. 옵션을 선택합니다.
  
  Use an existing project를 선택한 후 만든 Firebase 프로젝트를 선택합니다.
  
  선택한 Firebase 프로젝트는 로컬 프로젝트 디렉터리의 '기본' Firebase 프로젝트입니다.
2. Firestore 규칙에 어떤 파일을 사용해야 하나요?
  
  (firestore.rules)가 표시되면 Enter를 누릅니다. 표시되지 않으면 Enter 키를 누르기 전에 firestore.rules를 입력합니다.
3. firestore.rules 파일이 이미 있습니다. Firebase Console의 Firestore 규칙으로 이 프로젝트를 덮어쓰시겠어요? (Y/N)
  
  'N'을 입력하고 Enter 키를 누릅니다.
4. Firestore 색인에는 어떤 파일을 사용해야 하나요?
  
  (firestore.indexes.json)가 표시되면 Enter를 누릅니다. 표시되지 않으면 Enter 키를 누르기 전에 firestore.indexes.json를 입력합니다.

이제 Firestore 데이터베이스가 설정되었으며 앱에서 사용할 준비가 되었습니다.

Google에서 Firebase 인증

다음으로 Google 제공업체를 통한 인증을 사용 설정합니다. 요청할 작업:

Firebase Console에서 인증 페이지로 이동합니다.

Firebase 인증으로 이동
제공업체를 처음 설정하는 경우 로그인 방법 설정을 클릭합니다. 그렇지 않으면 새 제공업체 추가를 클릭합니다.
Google을 선택하고 상태가 사용 설정으로 설정되어 있는지 확인합니다.

Firebase에서 웹 앱 만들기

마지막으로 Firebase 프로젝트 내에 웹 앱을 만들고 구성을 가져옵니다. 요청할 작업:

Firebase Console에서 Firebase 프로젝트에 웹 앱을 등록합니다.
프로젝트 설정으로 이동합니다.
내 앱에서 등록된 웹 앱을 찾아 클릭합니다.
firebaseConfig의 값을 기록해 둡니다. 다음 섹션에서 환경 변수 업데이트 시 사용합니다.

Google Cloud 프로젝트 번호 찾기

Google Cloud 콘솔을 엽니다.

Google Cloud 콘솔로 이동
Google Cloud 콘솔 옆에 있는 아래쪽 화살표 를 클릭하고 프로젝트를 선택합니다.
메뉴 > Cloud 개요를 클릭합니다.
프로젝트 정보 섹션에서 프로젝트 번호 값을 확인합니다. 다음 섹션에서 이 변수를 사용하여 환경 변수를 업데이트합니다.

환경 변수 업데이트

기본 코드의 .env 파일에서 이전 단계에서 수집한 세부정보를 다음을 입력합니다.

NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER=GOOGLE_PROJECT_NUMBER
NEXT_PUBLIC_GOOGLE_PROJECT_ID=PROJECT_ID
NEXT_PUBLIC_GOOGLE_API_KEY=API_KEY
NEXT_PUBLIC_GOOGLE_AUTH_DOMAIN=AUTH_DOMAIN
NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET=STORAGE_BUCKET
NEXT_PUBLIC_GOOGLE_MSG_SENDER_ID=MSG_SENDER_ID
NEXT_PUBLIC_GOOGLE_APPID=APP_ID

이전 단계에서 수집한 firebaseConfig 값과 프로젝트 번호를 사용하여 다음을 바꿉니다.

GOOGLE_PROJECT_NUMBER: Google Cloud 프로젝트의 프로젝트 번호입니다.
PROJECT_ID: Firebase 웹 앱의 projectId입니다.
API_KEY: Firebase 웹 앱의 apiKey입니다.
AUTH_DOMAIN: Firebase 웹 앱의 authDomain입니다.
STORAGE_BUCKET: Firebase 웹 앱의 storageBucket입니다.
MSG_SENDER_ID: Firebase 웹 앱의 messagingSenderId입니다.
APP_ID: Firebase 웹 앱의 appId입니다.

앱 사용자 인증 정보 설정

Google 애플리케이션 사용자 인증 정보를 설정하려면 다음 단계를 따르세요.

Firebase Console에서 프로젝트 설정 페이지로 이동합니다.

프로젝트 설정으로 이동
서비스 계정 탭에서 Firebase Admin SDK 탭을 선택합니다.
새 비공개 키 생성을 클릭하고 다운로드한 JSON 파일의 경로를 기록합니다.
터미널에서 다음 명령어를 실행합니다.
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
JSON_PATH를 다운로드한 JSON 파일이 있는 경로로 바꿉니다.

개발 서버에 배포

이제 코드와 환경이 준비되었으므로 웹 앱을 로컬 개발 서버에 배포할 수 있습니다. 이렇게 하려면 웹 앱 디렉터리로 이동하여 다음을 수행합니다.

npm install 명령어를 실행하고 노드 모듈이 다운로드되어 설치될 때까지 기다립니다.
npm run dev 명령어를 실행합니다.
http://localhost:3000/로 이동하여 웹 앱이 실행 중인지 확인합니다.

웹용 Meet 부가기능 SDK 사용하기

다음 단계는 필요한 코드를 업데이트하여 코드를 통합하고 Google Meet 부가기능으로 만드는 것입니다. 요청할 작업:

src/meet/meet.d.ts 파일 만들기
1. https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts에서 최신 유형을 가져와 파일을 로컬에 저장할 수 있습니다.

src/meet/utils.ts 파일 만들기

createAddonSession 함수를 추가합니다. 여기에서 세션이 Google Meet 내에서 통신하도록 설정됩니다.

export function createAddonSession() {
  let session;

  session = window.meet.addon.createAddonSession({
    cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER}`,
  });
  return session;
}

src/app/meet 디렉터리를 만듭니다. 이 파일은 모든 Meet 관련 경로의 전용 디렉터리 역할을 합니다.

src/app/meet/layout.tsx 파일 만들기

모든 Meet 관련 페이지의 공통 레이아웃입니다. 여기에서 Meet SDK 스크립트를 삽입하고 콘텐츠를 렌더링하기 전에 SDK가 로드되었는지 확인합니다.

"use client";

import Script from "next/script";
import { useState } from "react";

type LayoutProps = {
  children: React.ReactNode;
};

/**
* Layout for the add-on pages. Injects the Meet SDK script.
*/
export default function RootLayout({ children }: LayoutProps) {
  const [sdkAvailable, setSdkAvailable] = useState(false);
  return (<>
  <Script
    src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"
    onReady={() => setSdkAvailable(true)}
  />
  {sdkAvailable ? children : <div>Loading...</div>}
  </>);
}

src/app/meet/sidepanel/page.tsx 파일 만들기

Meet 부가기능의 측면 패널 콘텐츠입니다. 이 페이지에서는 콘텐츠 선택 및 콘텐츠가 선택되었을 때의 공동작업 시작 상태 설정을 구체적으로 다룹니다.

"use client";

import { firebaseApp } from "@/firebase/config";
import { getAuth } from "firebase/auth";
import { ProjectList } from "@/components/ProjectList";
import { createAddonSession } from "@/meet/utils";
import { DocumentReference } from "firebase/firestore";
import { useSearchParams } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

async function startCollaboration(ref: DocumentReference) {
  const url = new URL(window.location.href);

  // Initializing session
  const session = await createAddonSession();
  const client = await session.createSidePanelClient();

  client.setCollaborationStartingState({
    mainStageUrl: `${url.protocol}//${url.host}/meet/project/${ref.id}`,
    sidePanelUrl: `${url.protocol}//${url.host}/meet/sidepanel?participant=true`,
  });
}

export default function Home() {
  const params = useSearchParams();
  const [user] = useAuthState(auth);
  const [signInWithGoogle] = useSignInWithGoogle(auth);

  const handleProjectSelect = async (ref: DocumentReference) => {
    // Before navigating, make sure project selection is saved
    // for when a shared activity is started.
    await startCollaboration(ref);
  };

  if (!user) {
    return (
      <GoogleButton
        onClick={() => signInWithGoogle()}
      ></GoogleButton>
    );
  }

  if (params.get("participant")) {
    return <div>You may now close this panel.</div>;
  }

  return (
    <div className="px-4">
      <ProjectList onSelect={handleProjectSelect} />
    </div>
  );
}

src/app/meet/project/\[id\]/page.tsx 파일 만들기

Meet 부가기능의 기본 단계 콘텐츠입니다. 측면 패널에서 선택한 프로젝트의 콘텐츠가 표시됩니다.

"use client";

import { Project } from "@/components/Project";
import { createAddonSession } from "@/meet/utils";
import { firebaseApp } from "@/firebase/config";
import { getAuth, User } from "firebase/auth";
import { useRouter } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

// Monitor auth state changes.
if (typeof window !== "undefined") {
  auth.onAuthStateChanged(() => {
    onAuthStateSettled(auth.currentUser);
  });

  auth.authStateReady().then(() => {
    onAuthStateSettled(auth.currentUser);
  });
}

/**
* Check for auth & doc access when auth state changes.
*/
async function onAuthStateSettled(user: User | null | undefined) {
  const session = await createAddonSession();
  const client = await session.createMainStageClient();

  // For participants, side panel should be closed after authentication
  await client.unloadSidePanel();
}

type PageParams = {
  params: {
    id: string;
  };
};

  export default function Page({ params }: PageParams) {
  const router = useRouter();
  const [user, isUserLoading] = useAuthState(auth);

  if (window.meet.addon.getFrameType() === "MAIN_STAGE") {
    if (isUserLoading) {
      return <div>Loading...</div>;
    }
  }

  if (!user) {
    return (
        <GoogleButton
          onClick={() => signInWithGoogle()}
        ></GoogleButton>
      );
  }

  let backButton = null;
  if (window.meet.addon.getFrameType() === "SIDE_PANEL") {
    backButton = (
      <div className="px-2 pb-2 -my-2">
        <button className="flex flex-row" onClick={() => router.back()}>
          <span className="material-icons">arrow_back</span>previous screen
          <div className="sr-only">navigate back</div>
        </button>
      </div>
    );
  }

  return (
    <div className="w-full min-h-screen px-2">
      {backButton}
      <div className="flex flex-col min-h-screeen">
        <Project id={params.id} />
      </div>
    </div>
  );
}

배포 만들기

부가기능 배포를 설정합니다.

Google Cloud 콘솔에서 Google Workspace Add-ons API로 이동합니다.

Google Workspace Add-ons API로 이동
대체 런타임 탭을 클릭합니다.
새 배포 만들기를 클릭하고 부가기능의 배포 ID를 입력합니다. 배포 ID는 부가기능 개발자가 부가기능 매니페스트가 포함된 배포를 식별하는 데 도움이 되는 임의의 문자열입니다. 배포 ID는 필수 항목이며 100자(영문 기준) 이하여야 합니다.
다음을 클릭합니다.

JSON 형식으로 부가기능 매니페스트 사양을 제출할 수 있는 측면 패널이 열립니다. 이 패널을 사용하여 다음을 매니페스트 파일로 입력합니다.

{
"addOns": {
  "common": {
    "name": "My First Meet Web Add-on",
    "logoUrl": "https://fonts.gstatic.com/s/i/googlematerialicons/markunread_mailbox/v6/black-24dp/1x/gm_markunread_mailbox_black_24dp.png"
  },
  "meet": {
    "web": {
      "sidePanelUri": "http://localhost:3000/meet/sidepanel",
      "addOnOrigins": ["http://localhost:3000"]
    }
  }
}
}

제출을 클릭합니다. 부가기능이 성공적으로 배포되면 배포 'ID' 생성됨 메시지가 표시됩니다.
페이지의 배포 섹션에서 배포를 확인합니다.

웹용 Meet 부가기능 SDK 테스트하기

전체 웹용 Meet 부가기능 SDK를 테스트하려면 Google Meet을 실행하고 앱이 예상대로 작동하는지 확인합니다. 요청할 작업:

Meet으로 이동하여 새 회의를 시작합니다.
활동을 클릭합니다.
내 부가기능 섹션에 내 첫 번째 Meet 웹 부가기능이 표시됩니다. 선택하여 부가기능을 실행합니다.
부가기능이 실행되면 측면 패널이 열립니다.
Google 계정을 사용하여 앱에 로그인합니다. 로그인하면 New Project를 클릭합니다.
생성된 제목 없는 프로젝트를 선택합니다.
측면 패널에서 Start Activity를 클릭합니다.
시작하면 측면 패널이 닫히고 기본 스테이지가 열립니다.

이제 부가기능이 예상대로 실행되지만 앱을 통해 로그인한 사용자 (5단계)에 대해서만 실행됩니다. Meet을 통해 활동에 참여하는 다른 참여자는 첫 번째 사용자와 동일한 세션을 공유할 수 없으므로 앱 내에서 공동작업할 수 없습니다. 콘텐츠를 다른 사용자와 공유하려면 토큰 공유 메커니즘과 같은 추가 구현이 필요합니다.

삭제

이 튜토리얼에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 Cloud 프로젝트를 삭제하는 것이 좋습니다.

주의: 프로젝트를 삭제하면 다음과 같은 효과가 발생합니다.

프로젝트의 모든 항목이 삭제됩니다. 이 튜토리얼의 기존 프로젝트를 사용한 경우 프로젝트를 삭제하면 프로젝트에서 수행한 다른 작업도 삭제됩니다.
커스텀 프로젝트 ID가 손실됩니다. 이 프로젝트를 만들 때 앞으로 사용할 커스텀 프로젝트 ID를 만들었을 수 있습니다. appspot.com의 URL과 같이 프로젝트 ID를 사용하는 URL을 보존하려면 전체 프로젝트를 삭제하는 대신 프로젝트 내에서 선택한 리소스만 삭제하세요.

여러 튜토리얼과 빠른 시작을 살펴보려는 경우 프로젝트를 재사용하면 프로젝트 할당량 한도 초과를 방지할 수 있습니다.

Google Cloud 콘솔에서 리소스 관리 페이지로 이동합니다. 메뉴 > IAM 및 관리자 > 리소스 관리를 클릭합니다.
Resource Manager로 이동
프로젝트 목록에서 삭제할 프로젝트를 선택하고 삭제 를 클릭합니다.
대화상자에서 프로젝트 ID를 입력한 후 종료를 클릭하여 프로젝트를 삭제합니다.

Google Meet 부가기능 SDK를 사용하여 웹용 부가기능 빌드

목표

개발 환경 준비

Google Cloud 프로젝트 만들기

Google Cloud 콘솔

gcloud CLI

API 사용 설정

Console

gcloud CLI

웹 앱 만들기 및 배포

샘플 코드 검토

Firebase 프로젝트 및 CLI 설정

Google에서 Firebase 인증

Firebase에서 웹 앱 만들기

Google Cloud 프로젝트 번호 찾기

환경 변수 업데이트

앱 사용자 인증 정보 설정

개발 서버에 배포

웹용 Meet 부가기능 SDK 사용하기

배포 만들기

웹용 Meet 부가기능 SDK 테스트하기

삭제

관련 주제