Discord Embedded App SDK 맛보기 - 1

https://support-dev.discord.com/hc/en-us/articles/21204423970071-Introducing-the-Embedded-App-SDK

 

디스코드에서 몇 개월 전 Embedded App SDK에 대해 공개했다.

 

많지는 않지만, 게임, 음악, 유튜브 등 다양한 앱들이 있다.

 

Embedded App SDK는 게임이나 앱을 디스코드 내 활동 시작하기 버튼을 통해 이용할 수 있도록 만든 개발자 도구라고 생각하면 된다.

쉽게 말해 웹에서 사용하던 페이지나 간단한 게임들을 디스코드 내부에서 실행할 수 있도록 만든 도구라고 생각하면 된다.

 

또한 SPA(Single Page Application)용으로 설계되어 React, Vue와 같은 Client Side Rendered SPA 면 디스코드 액티비티를 개발하는 데 문제되지 않는다.

 

 

먼저 액티비티는 디스코드 음성 채널에 접속하면 하단에 로켓 모양의 버튼을 통해 실행할 수 있다. 이는 디스코드 클라이언트 내 iframe에 호스팅된 애플리케이션으로 동작하며 여기서 Discord API 등을 사용하여 우리가 일반적으로 웹에서 사용했던 것 처럼 버튼 클릭 등 여러가지 상호 작용을 할 수 있다.

 

이미 디스코드는 전세계 많은 사람들이 이용하는 플랫폼이기 때문에 사용자들이 다른 플랫폼으로 이동하지 않고 디스코드 앱 내에서 더 오랜 시간 활동할 수 있도록 하여 플랫폼을 확장시키려는 디스코드의 의도가 보인다.

 

다만 개발 Preview 단계이기 때문에 여러가지 제한 사항이 존재한다.

 

제한 사항

Embedded App SDK는 아직 Preview 단계이기 때문에 여러가지 제한 사항이 존재한다.

 

• 액티비티는 25명 이하의 사용자가 있는 서버에서만 플레이할 수 있습니다.
• 앱 내 구매(IAP)는 액티비티 내에서 가능하지만 개발 Preview 단계에서는 아직 개발자에게 제공되지 않습니다.
• Preview에서는 액티비티가 인증될 수 없습니다.
• 기존 인증된 앱은 이 개발자 미리 보기 동안 액티비티를 추가할 수 없습니다.

IAP의 경우에는 일부 국가에서만 시행하고 있기 때문에 아직 한국엔 해당사항이 없다.

 

또한, 앱을 인증받기 위해서는 25명 이상의 서버에서는 반드시 봇을 인증받도록 되어 있기 때문에 아직 미리보기 단계의 Activity 인증은 그 이상의 인원이 있는 서버에서는 허용되지 않는다.

 

디스코드 액티비티의 라이프사이클 다이어그램은 아래와 같다

 

 

---

디스코드 액티비티 제작

https://discord.com/developers/docs/activities/building-an-activity#step-5-authorizing-authenticating-users

Discord Developer Portal — API Docs for Bots and Developers

 

 

위 페이지로 이동하면 디스코드 액티비티의 자세한 설명을 확인할 수 있다.

 

액티비티 개발에서 사용되는 중요 개념

• 비동기: Discord 클라이언트 및 API와 통신하기 위해 Async 메서드 호출을 사용한다.
• UI를 구축하기 위해 React, Vue 등의 프론트엔드 프레임워크가 사용된다.

 

이번 포스트에서는 테스트 목적으로 개발하기 위해, 튜토리얼 설정을 설명해보려 한다.

 

설정해야 할 것이 좀 많고 기본적으로 Node.js가 설치되어 있어야 하기 때문에 Node.js가 설치되어 있지 않은 경우 구글에 검색하여 설치하고 진행한다.

.

1단계: 앱 생성

1. 디스코드 개발자 포탈로 이동하여 New Application 생성

 

이름은 자유롭게 설정한다. 본인은 위와 같이 이름을 설정했다.

 

이후 디스코드 개발 이용약관에 동의하고 Create 클릭

 

 

2. 좌측 사이드바에서 Activities -> Getting Started로 이동하여 Enable 클릭

 

 

3. OAuth2 설정

 

CLIENT SECRET을 리셋하여 토큰을 얻고 잘 저장해둔다.

해당 키값을 공개되면 안되는 키값이기 때문에 유의한다.

 

이후 Redirect를 설정하는데 로컬에서 테스트 할 예정이기 때문에 https://127.0.0.1로 설정한다.

 

 

4. 디스코드 앱 내에서 개발자 모드 설정

디스코드 사용자 설정 -> 고급 -> 개발자 모드를 On 시켜준다.

 

 

 

2단계: 프로젝트 파일 설정

git을 사용하여 예제 프로젝트를 가져온다.

해당 템플릿에는 JavaScript, Node.js, Express, Vite 같은 프론트 엔드 및 백엔드가 포함되어 있다.

 

사용한 IDE는 VSCode를 사용했다.

 

1. VSCode 터미널에서 해당 명령어 입력

git clone git@github.com:discord/getting-started-activity.git
cd getting-started-activity

 

 

※ 만약 해당 명령어를 입력하고 publickey 관련 fatal 오류가 발생한다면 다음과 같이 실행한다.

1. 콘솔 창에 다음 명령어를 입력한다.

ssh-keygen -t rsa "본인 github 아이디"

 

2. key 파일을 저장할 위치를 선택한다(엔터 클릭 시 기본 위치에 저장된다.)

• 키 값이 기본적으로 저장되는 위치: C:\Users\사용자\.ssh\id_rsa.pub

 

3. 패스워드 및 패스워드 확인

엔터 클릭 시 그냥 넘어간다.

 

4. key가 저장된 위치를 확인하고 해당 위치로 이동하여 다음 명령어를 입력한다.

C:\Users\사용자\.ssh\ > type id_rsa.pub

 

윈도우 기준 해당 명령어를 입력하면 되고 맥 또는 리눅스의 경우에는 type 대신 cat을 입력하여 키 값을 출력한다.

키 값이 출력되면 해당 키값을 복사한다.

 

5. 복사한 키 값을 github ssh에 추가.

https://github.com/

GitHub: Let’s build from here

 

 

github 홈페이지 이동 -> settings -> SSH and GPG keys -> new SSH keys -> 키 값 붙여넣기

 

Title은 마음대로 설정하면 되고 Key 부분에 키 값을 복사한 뒤 Add SSH key 버튼을 클릭하여 등록한다.

 

 

 

2. 환경 변수 설정

1. 프로젝트 폴더에 example.env 파일을 .env 파일에 복사.

getting-started-activity >copy example.env .env

맥 또는 리눅스에서는 cp 명령어를 사용하여 복사하면 된다.

 

2. 복사한 .env 파일로 이동하여 클라이언트 아이디와 시크릿 키를 입력한다.

클라이언트 아이디는 OAuth2 설정 단계에서 확인할 수 있고, 복사해 둔 시크릿 키도 여기에 입력하면 된다.

 

시크릿 키를 미처 복사하지 못했다면 다시 리셋하여 재발급한다.

 

 

3. 프론트 엔드 설정

 

client 폴더로 이동하여 다음 명령어를 입력한다.

getting-started-activity/client>npm install
getting-started-activity/client>npm run dev

http://localhost:5173 을 웹 페이지 주소창에 입력하여 접속해본다.

 

이후 http://localhost:5173 에 방문하면 Vite로 실행되는 프론트엔드 템플릿이 표시된다. 해당 코드는 아직 Discord API나 백엔드 서비스를 호출하지 않기 때문에 설정 후반부에서 설명하도록 하겠다.

 

 

 

3단계: 임베디드 앱 설치

1. getting-started-activity/client 폴더 내부에서 다음 명령어를 입력한다.

getting-started-activity/client>npm install @discord/embedded-app-sdk

 

해당 폴더에서 SDK가 설치되어 package.json에 추가된다.

 

 

2. 프로젝트에 SDK 추가

// Import the SDK
import { DiscordSDK } from "@discord/embedded-app-sdk";

import "./style.css";
import rocketLogo from '/rocket.png';

// Instantiate the SDK
const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID);

setupDiscordSdk().then(() => {
  console.log("Discord SDK is ready");
});

async function setupDiscordSdk() {
  await discordSdk.ready();
}

document.querySelector('#app').innerHTML = `
  <div>
    <img src="${rocketLogo}" class="logo" alt="Discord" />
    <h1>Hello, World!</h1>
  </div>
`;

 

 

3. Discord에서 로컬로 앱 실행

 

여기서 또 설치해야 하는 것이 있다. Cloudflared를 설치해주어야 한다.

https://github.com/cloudflare/cloudflared#installing-cloudflared

GitHub - cloudflare/cloudflared: Cloudflare Tunnel client (formerly Argo Tunnel)

 

디스코드 액티비티의 경우 로컬에서 실행하기 위해서는 터널링을 해주어야 한다.

 

디스코드 앱은 외부에서 실행되는 앱이기 때문에 로컬에서 개발중인 내용을 외부에 공개하기 위해서는 인터넷이 공개되어 있어야 한다. 하지만 로컬 네트워크는 공개된 네트워크가 아니기 때문에 안전하게 접속하기 위한 약간의 보안 수단이 필요하다. 이때 Cloudflare를 사용하여  보안 터널을 생성하고 로컬 호스트를 퍼블릭 환경에 공개시킬 수 있다.

 

 

https://github.com/cloudflare/cloudflared/releases

Releases · cloudflare/cloudflared

해당 링크 또는 아래 명령어를 입력한다.

client>npm install cloudflared

 

설치를 완료했으면 클라이언트에서 앱을 시작한다.

 

 

1. 아래 명령어 입력

client>npm run dev

 

2. 추가로 다른 터미널을 열어 아래 명령어 입력

client>cloudflared tunnel --url http://localhost:5173

 

해당 명령어를 실행하면 http://~에 공개 URL이 생성된다. 해당 URL을 복사한다.

 

3. URL 매핑

 

디스코드 개발자 포탈 -> 좌측 Activities -> URL Mappings로 이동하여

Target 부분에 복사한 URL을 입력한다.

 

 

4. 디스코드에서 액티비티 실행

 

그럼 위와 같이 디스코드 액티비티에서 앱이 실행된 화면을 볼 수있다.

 

기본 설정은 여기까지 하고, 다음 포스팅에서는 백엔드 설정 및 API 호출을 이용하여 액티비티에 출력하는 내용을 포스팅해보도록 하겠다.