Video: 3분 안에 디스코드 앱 만들기?
Channel: 노마드 코더 Nomad Coders
Duration: 6m 34s
Source: subtitle (auto, ko)
Transcript:
얼마 전 디스코드에서 새로운 임베디드 앱 SDK를 출시했는데, 이 SDK를 알게 된 후로 저는 Nomad Coders 디스코드 서버에서 사용할 앱 아이디어가 샘솟고 있습니다. 임베디드 앱 SDK는 정말 멋지고 사용하기도 쉬워서, 오늘은 여러분께 이 SDK의 작동 방식과 첫 번째 디스코드 앱 개발을 시작하는 방법을 알려드리려고 합니다. 안녕하세요, 저는 니콜라스이고 대한민국 중남에 사는 소프트웨어 개발자입니다. 저는 무언가를 만들고 다른 사람들에게 만드는 방법을 가르치는 것을 좋아합니다. 디스코드 채팅방에서는 오랫동안 사용자들이 함께 게임을 하거나 유튜브를 그룹으로 시청하는 등의 활동을 할 수 있었는데, 이는 매우 멋진 기능입니다. 하지만 지금까지는 게임 위주의 활동이 많지 않았습니다. 그런데 디스코드가 작년 3월에 발표한 새로운 임베디드 앱 SDK 덕분에 이제 상황이 달라질 것입니다. 이 SDK를 사용하면 개발자들이 디스코드 사용자들이 디스코드를 떠나지 않고도 참여할 수 있는 멀티플레이어 게임이나 소셜 경험을 직접 만들 수 있게 되었습니다.

개발자에게 이 SDK가 얼마나 좋은 소식인지 아무리 강조해도 지나치지 않습니다. 실시간 게임 이나 소셜 앱을 직접 개발하는 경우, 사람들이 앱을 다운로드하거나 웹사이트에 계정을 만들고 계속 이용하도록 유도하는 마케팅 노력이 엄청나게 중요하기 때문입니다. 내장 앱 SDK를 사용하면 이미 Discord에서 게임을 즐기고 소통하는 수백만 명의 사용자에게 즉시 접근할 수 있습니다. 어떤 앱도 다운로드하거나 계정을 만들 필요 없이, 데스크톱, Android, iOS, 웹에서 Discord의 실시간 멀티플레이어 기능을 무료로 이용할 수 있습니다. 또한 사용자가 앱을 찾을 수 있는 앱 검색 섹션과 구독 및 인앱 구매를 통한 수익 창출 기능도 곧 제공될 예정입니다. 플랫폼이 개발자에게 개방되면 처음 출시되는 앱은 엄청난 이점을 갖게 됩니다. 더 많은 홍보 효과를 얻고, 초기에는 경쟁이 거의 없으며, 모방 앱이 등장하기 전에 팬층을 구축할 수 있습니다. 지금이 바로 Discord 앱 제작 방법을 배우기에 완벽한 시기입니다.

보시다시피 매우 쉽고 개발자 경험도 훌륭합니다. 시작하려면 사용자 설정으로 이동하여 고급을 클릭한 다음 개발자 모드를 활성화하세요. 그런 다음 discord.com 개발자 애플리케이션으로 이동하여 새 애플리케이션을 만드세요. 저는 Nomad Coders 사용자들이 함께 공부할 때 사용할 수 있는 멀티플레이어 포모도로 타이머 앱을 만들 생각이므로 앱 이름을 Tomatina로 지정하고 토마토 아이콘을 추가하겠습니다. 새 앱 설정에서 활동 아래의 시작하기를 클릭한 다음 활성화를 클릭하세요. 우리 앱은 사용자의 계정 정보(예: 사용자 이름, 아바타, 길드)를 가져오기 때문에 Discord를 사용하여 사용자를 인증해야 합니다. 인증 키를 얻으려면 설정에서 클라이언트 ID를 복사하고 ' 비밀번호 재설정' 버튼을 클릭하여 클라이언트 비밀을 받으세요. 클라이언트 비밀을 꼭 저장해 두세요. 그런 다음 ' 리디렉션 추가' 버튼을 클릭합니다. 아직 웹사이트가 없으므로 주소창에는 ' https 127.0.0.1'을 입력하세요.

Discord 액티비티는 기본적으로 Discord 내에서 렌더링되는 단일 페이지 애플리케이션(SPA)이며, 내장 앱 SDK를 사용하여 Discord와 통신합니다. ReactView 또는 원하는 프레임워크를 사용하여 액티비티의 프런트엔드를 구축할 수 있지만, 최종 결과물은 클라이언트 측에서 렌더링되는 SPA여야 합니다. 이 비디오에서는 TypeScript, VD , Bun을 사용하겠습니다. 내장 앱 SDK를 설치한 후에는 얻은 클라이언트 ID를 사용하여 앱을 초기화해야 합니다. 연결이 완료되면 화면에 메시지를 출력합니다. 앱이 로컬 호스트에서 실행되므로 Discord에서 테스트하려면 공용 인터넷에 노출해야 합니다. Cloudflare를 사용하여 다음 명령어로 로컬 호스트를 노출하겠습니다. 이런 형식의 URL을 통해 Discord에 접속하는 것은 로컬 호스트에 접속하는 것과 같습니다. 공개 URL을 얻었으면 사용자가 활동을 시작할 때 Discord에서 해당 URL을 열도록 설정해야 합니다. 이를 위해 애플리케이션 설정으로 돌아가서 URL 매핑을 클릭하고 첫 번째 매핑의 대상 필드에 해당 URL을 붙여넣습니다.

그런 다음 서버로 이동하여 음성 채널에 참여하고 활동 시작을 클릭한 후 앱을 선택합니다. 이제 Discord 내에서 앱이 실행되는 것을 볼 수 있습니다. 좋습니다! 이제 앱을 실행하는 사용자를 인증하여 프로필, 서버 정보, 아바타 등을 가져와야 합니다. 이를 위해 클라이언트 ID와 사용자에게 요청할 권한을 지정하여 authorized 명령어를 호출합니다. 여기서는 사용자의 프로필과 이메일만 요청하지만, 요청할 수 있는 다른 권한도 많습니다. Discord로 돌아가서 앱을 다시 시작하면 Discord 인증 대화 상자가 표시됩니다. 사용자가 인증을 클릭하면 액세스 토큰으로 교환해야 하는 코드를 받게 됩니다. 이 토큰을 사용하여 사용자를 대신하여 Discord API와 통신할 수 있습니다. 이 작업은 백엔드에서 수행해야 하므로 POST 요청을 보냅니다. 코드를 입력하고 액세스 토큰을 반환받기를 기대합니다. 저는 Hono라는 멋진 프레임워크를 사용하여 백엔드를 구축했는데, 요즘 정말 만족스럽게 사용하고 있습니다.

코드는 매우 간단합니다. 먼저 서버는 프런트엔드에서 코드를 수신하고, 클라이언트 ID, 클라이언트 시크릿, 그리고 코드를 사용하여 Discord API를 호출하여 액세스 토큰을 받습니다. 이 토큰을 프런트엔드로 전송하면, 프런트엔드에서는 해당 액세스 토큰을 사용하여 authenticate 명령어를 호출하여 로그인한 사용자 정보를 가져오고 화면에 이름을 표시할 수 있습니다. 아주 잘 작동합니다. 원한다면 앱에서 액세스 토큰을 사용하여 Discord API를 직접 호출하여 사용자에 대한 더 자세한 정보를 가져올 수도 있습니다. 이제 Discord 앱을 만드는 방법, 작동 방식, 그리고 사용자를 로그인시키는 방법을 알게 되셨습니다. Discord 앱은 웹사이트와 같기 때문에, 이 앱을 시작점으로 삼아 원하는 멋진 앱을 계속해서 만들어 나갈 수 있습니다. 가능성은 무궁무진합니다. SDK 문서를 살펴보면 사용 가능한 모든 메서드, 명령어, 이벤트를 확인할 수 있습니다. 예를 들어, 사용자가 말하는 중인지 아닌지, 새로운 사용자가 앱에 가입했는지, 심지어 로그인했는지 등을 감지할 수도 있습니다.

SDK가 현재 공개 개발자 미리보기 단계에 있기 때문에 몇 가지 일시적인 제한 사항이 있습니다. 예를 들어, 액티비티는 25명 이하의 사용자가 있는 서버에서만 플레이할 수 있으며, 인앱 구매는 아직 사용할 수 없습니다. 이 영상이 유용했다면 좋아요를 누르고 친구들과 공유 하고 채널 구독도 부탁드립니다. 시청해 주셔서 감사합니다. 다음 영상에서 뵙겠습니다. 안녕히 계세요. [음악]