Discord.js로 메이플스토리 디스코드 봇 만들기 (0)

한참 이런저런 일로 이슈가 되었던 메이플스토리를 시작하고 난 후, 모르는 것이 많아 수시로 검색을 하곤 했는데, 몇번 찾아봤던 내용도 자세하게 기억나지 않아 여러 번 같은 검색어를 검색하게 되는 것이 좀 불편했다.

 

게임할 때 거의 상시로 켜져있는 디스코드에 봇을 하나 만들어서 필요한 정보를 모아보고, 길드 관리에도 약간의 도움을 줄 수 있도록 하면 좋겠다는 생각이 들어 관련 자료를 찾아보고 개발을 시작하게 되었다.

 

관련 라이브러리를 찾아보았는데, python 기반의 Discord.py와 Node.js 기반의 Discord.js가 대표적인 것 같았고, node.js쪽에 좀 더 관심이 있어 Discord.js를 이용하기로 했다.

 

(참고로 국내에서는 discord.py의 인기가 더 많은 것 같다. 한글로 된 자료는 discord.py가 더 많고, discord.js는 영문으로 된 자료가 많은 것으로 보아 해외에서 많이 사용하는 것으로 추측된다)

---

Discord.js v14

 

봇 개발을 시작하자마자 난관에 부딛혔다. Discord.js를 이용해 봇을 만드는 많은 튜토리얼이 있었지만, 대부분의 글들이 v13 기준으로 작성되어 있어 최신 버전인 v14와 맞지 않는 부분이 있었다. 다행히 한 해외 유튜버가 v14 튜토리얼 영상을 시리즈로 올리고 있는 것을 발견하여, 해당 영상과 공식 가이드 문서를 바탕으로 개발을 진행했다.

 

필자의 개발 환경은 다음과 같다.

OS : macOS ventura

Code Editor : Visual Studio Code (VSC)

---

1. 프로젝트 생성하기

프로젝트에 사용할 폴더를 생성하고, node.js 프로젝트를 생성해 준다.

npm init -y

(node.js나 npm이 설치되어 있지 않다면 먼저 설치하고 진행하면 된다)

 

프로젝트를 생성하면 자동으로 package.json이 생성되는데, 해당 파일에서 "main"의 값을 "src/index.js"로 변경해 주도록 한다.

아래는 package.json 파일 내용의 예시이다.

{
  "name": "maplebot",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

package.json을 저장한 다음, 프로젝트 폴더에 src라는 이름의 폴더를 만들고, 해당 폴더 안에 index.js라는 이름의 폴더를 만들면 된다.

---

(수정)다음 포스팅에서 DJS-Commander라는 라이브러리를 이용할 것인데, 이를 위해서 src폴더를 생성하지 않고 메인 폴더에 index.js를 생성하도록 하자. (package.json도 마찬가지로 수정하지 않는다)

---

다음으로 discord.js 라이브러리를 설치해 줄 것인데, 터미널을 열고 아래 명령어를 사용해 라이브러리를 설치해 준다.

npm i discord.js

 

정상적으로 설치가 완료된 후 프로젝트 폴더의 상태는 다음과 같다.

 

---

2. 디스코드 봇 생성하기

이제 디스코드 봇을 생성해 줄 차례인데, 우선 디스코드 개발자 페이지에 들어가서 로그인을 해 준다.

로그인 성공 시 보게 될 화면

 

로그인에 성공하면 우측 상단의 New Application을 눌러 원하는 이름의 봇을 생성해주면 된다.

 

봇을 생성하고 나면 다음과 같은 화면을 마주하게 될 것인데, 몇 가지 설정을 해 주고 봇을 서버에 초대해볼 것이다.

(봇 개발 및 테스트에 사용할 서버를 따로 만들어두는 것을 추천한다)

 

좌측 메뉴 중 Bot을 클릭하고, Privileged Gateway Intents 옵션을 전부 활성화해준다.

 

이제 다시 좌측 메뉴에서 OAuth2 - URL Generator에 들어가 scopes 중 bot과 applications.commands를 체크해주고, bot permissions는 Administrator(관리자)로 설정해 준다.

 

권한 체크까지 해준 다음 하단에 생성된 url을 브라우저에 붙여넣기하고, 디스코드 계정으로 로그인 후 초대할 서버를 선택하면 다음과 같이 봇이 서버에 입장하게 된다.

---

3. 봇 작동시키기

이제 봇을 작동시키기 위해 먼저 TOKEN이라는 것을 가져올 것인데, 이 토큰은 일종의 열쇠 같은 것이다. 개발자가 작성한 코드대로 봇이 작동하도록 하려면 토큰을 이용해 코드와 봇을 연결해 줘야 한다.

 

토큰은 코드 내에 직접 입력하기보단 따로 환경 변수 파일에 저장해두고 불러오는 것이 보안상 좋기 때문에 환경 변수로 설정해주자.

 

다시 터미널을 열고, 다음 명령어를 입력해준다.

npm i dotenv

 

패키지 설치가 완료되면 프로젝트 폴더에 .env 라는 이름의 파일을 생성한다. 이때 파일명이 다르면 환경 변수 파일로 인식하지 못하니 꼭 이름을 정확하게 입력해주자.

 

다시 디스코드 개발자 페이지로 넘어와서, 메뉴에서 Bot을 선택한 후 username 밑 부분에서 TOKEN을 초기화하고, 복사한다.

Copy 버튼을 누르면 자동으로 복사가 된다.

 

이제 .env 파일을 열고, 다음과 같이 입력해준 뒤 저장한다.

TOKEN = 복사한 토큰

토큰을 환경 변수로 설정해 두면 github에 push하거나, 다른 서비스를 이용해 봇을 가동시킬 때 다른 사람이 나의 토큰을 확인할 수 없다.

환경 변수는 직접 입력하여 넘겨줘야 하기 때문이다.

 

---

이제 본격적으로 메인 파일인 index.js에 코드를 작성해볼 것이다. 가이드 문서에 적힌 예제 코드를 참고하여 index.js 파일을 다음과 같이 작성해 준다.

 

require("dotenv").config();
const { Client, IntentsBitField } = require("discord.js");

const client = new Client({
  intents: [
    IntentsBitField.Flags.Guilds,
    IntentsBitField.Flags.GuildMembers,
    IntentsBitField.Flags.GuildMessages,
    IntentsBitField.Flags.MessageContent,
  ],
});

client.on("ready", (c) => {
  console.log(`${c.user.tag} is online.`);
});

client.login(process.env.TOKEN);

 

그리고 위에서 잊은 게 있는데, 터미널을 열고 아래 명령어를 사용해 nodemon을 설치해 주도록 하자.

npm i nodemon

 

nodemon은 코드를 수정한 후 저장할 때마다 자동으로 봇을 재시작해준다. 사용하지 않아도 괜찮지만, 사용해 본다면 굉장히 편하다는 것을 알 수 있을 것이다!

 

그리고 터미널에 nodemon을 입력하면 자동으로 봇이 실행된다.

(nodemon을 설치하지 않았다면, node src/index.js 라고 입력하면 된다)

터미널에 정상적으로 봇의 태그와 온라인 메시지가 출력되는 모습

봇이 온라인이 된 모습

 

봇 실행을 종료하려면 터미널에 ^C (Control + C)를 입력하면 된다. 필자는 macOS를 사용하지만, 아마 윈도우에서도 같은 방식으로 종료할 수 있을 것이다.

 

이제 봇에 생명을 불어넣어 봤으니 다음 시간부터는 본격적인 봇 개발을 시작해 보도록 하겠다.