슬랙봇 만들기 어렵지 않아요

여러분은 회사에서 어떤 메신저를 사용하나요? 구름에서는 슬랙(Slack)이라는 메신저를 사용하고 있어요. 슬랙은 여러 장점이 있지만, 사용자가 직접 여러 봇을 추가해 기능을 확장할 수 있는 점이 특히 마음에 들어요. 왜 좋냐고요? 여러 알람을 슬랙에 연동하면 따로 일정이나 알람을 확인하러 앱 간에 이동을 하지 않아도 되거든요.

단순 알람뿐 아니라 회사의 각종 지표를 정기적으로 알려주는 리마인더, 정해진 시간에 구내식당 메뉴를 알려주는 봇, 오늘 생일인 사람을 알려주는 봇, 태스크 관리 및 회의 관리 봇 등 슬랙봇은 메신저이자 업무 도우미 역할을 톡톡히 하고 있습니다. 구름도 슬랙봇으로 업무를 자동화해 업무 효율성을 최대한 높이고 있죠.

이러한 봇을 만드는 것은 그리 어렵지 않습니다. 그래서 그 방법을 여러분과 공유하려고 합니다. 그것도 저희 제품인 구름IDE도 이용해서 말이죠! 

만들어볼 슬랙봇은 ‘hello’이라고 인사하면 반갑게 답하는 단순한 기능의 앱입니다. 구름IDE에 Node.js 컨테이너를 두고, 그 속에 Blot란 라이브러리를 통해 슬랙과 통신하는, 매우 단순한 구조의 앱입니다.

by Mono

1. 슬랙 워크스페이스부터 생성해요

일단 혼자서 사용하기 위해 슬랙 워크스페이스를 하나 생성할게요. 단순히 인사하는 기초적인 슬랙봇을 동료나 지인에게 공개하긴 그렇잖아요? 슬랙 워크스페이스란 대화를 나누고 일이 이루어지는 하나의 공간입니다. 일종의 ‘그룹’이라고 할 수 있죠.

다음은 슬랙에 워크스페이스를 추가하는 방법입니다. 아케이드(Arcade)란 서비스로 방법을 상세히 설명했으니, 차근차근 따라해보세요. 그리 어렵지 않을거예요.

❶ 웹 브라우저 주소창에 https://slack.com/intl/ko-kr/를 입력하고 슬랙 홈페이지를 엽니다.
❷ [새 워크스페이스 개설] 버튼을 클릭합니다.
❸ 각자의 계정으로 슬랙에 로그인합니다. 계정이 없다면 먼저 슬랙에 가입하세요.
❹ 워크스페이스 이름(여기서는 mono app)을 입력하고 [다음]을 클릭합니다.
❺ 이름과 프로필 사진을 추가합니다. [다음]을 누르세요.
❻ 동료 추가는 넘어갈게요. [이 단계를 건너뛰기]를 누릅니다.
❼ 망설이지 말고 [단계 건너뛰기]를 누를게요.
❽ 임의의 채널명(mono)을 입력하고 [다음]을 클릭합니다.
❾ 잘 따라하셨습니다. ‘mono app’이란 이름의 워크스페이스와 ‘mono’란 채널이 만들었습니다.

2. 슬랙 워크스테이션에 앱을 추가해요

이제 슬랙에 실제로 나의 앱을 만들고 필요한 권한을 추가할 거예요. 다음 그림에서 채색된 ‘Slack’ 부분입니다. 이 앱은 간단한 event, message를 주고 받고 응답합니다. 그림에서 화살표가 이 앱에 필요한 ‘권한’이라고 할 수 있죠.

앱에게 모든 권한을 주면 편하긴 하겠지만, 보안 이슈가 불거질 수 있어 주의해야 합니다. 그래서 권한은 항상 최소로 부여하는 게 좋죠.

❶ 웹 브라우저 주소에서 https://api.slack.com 웹 페이지를 엽니다.
❷ [Your apps] 버튼을 클릭합니다.
❸ [Create an App]을 눌러 슬랙 앱을 생성합니다.
❹ 앱 생성 방식을 선택합니다. 여기서는 [From Scratch]를 선택할게요.
❺ 앱 이름을 입력합니다. ‘mononomo’라고 이름 짓겠습니다. 
❻ 슬랙 앱을 추가할 워크스페이스를 선택합니다. 앞서 생성한 워크스페이스를 선택합니다.
❼ [Create App]을 눌러 앱을 생성합니다.
❽ 앱 생성을 축하한다네요. [Got it!]을 눌러 닫아주세요.
❾ 슬랙 앱의 권한을 설정해야 합니다. 웹페이지를 스크롤해 [Permissions]을 찾아 클릭합니다.
❿ [Add an OAuth Scope]를 누릅니다.
⓫ 슬랙 앱에게 워크스페이스에 글을 쓸 수 있는 쓰기 권한을 주어야 합니다. [chat:write]를 선택합니다.
⓬ Bot Token Scopes 항목에 쓰기 권한이 추가됐습니다. 
⓭ 맨 위로 스크롤해 [Install to Workspace] 버튼을 찾고 누릅니다. 생성한 슬랙 앱을 우리의 워크스테이션에 추가됩니다.
⓮ 워크스페이스 액세스 권한을 요청하면 [허용]을 누릅니다.
⓯ 워크스페이스에 슬랙 앱이 추가됐습니다. 슬랙으로 돌아가봅니다.
⓰ 슬랙에 이전에 없던 앱 카테고리가 생기고, 생성한 mononomo 슬랙 앱이 보입니다. 여러분도 보이나요?

3. 슬랙 API 앱에 권한을 추가해요

이번에는 Slack 앱 부분과 API 서버에 대해서 추가로 업데이트할 것입니다.  일단 앱이 실시간으로 반응하도록 Socket 모드와 관련 권한을 추가합니다.

❶ 이번에는 [Socket Mode] 메뉴를 클릭합니다.
❷ [Enable Socket Mode] 토글 버튼을 활성화합니다.
❸ 토큰 이름으로는 ‘nap’ 또는 임의의 이름을 입력하고 [Generate]를 클릭합니다.
❹ 토큰이 생성됐습니다. [Copy]를 눌러 토큰을 복사합니다. 토큰은 유출되지 않도록 보안에 특히 신경쓰세요. 나중에 필요하니 메모장에 잘 기입해두세요.
❺ [Done]을 눌러 토큰 생성을 마무리합니다.
❻ 이번에는 [Event Subscriptions] 버튼을 누릅니다.
❼ [Enable Event] 토글 버튼도 활성화할게요.
❽ [Subscribe to bot events] 항목을 클릭합니다.
❾ [Add Bot User Event] 버튼을 클릭합니다.
❿ message.channels을 찾고 선택합니다. Event로 message.channels가 추가됩니다.
⓫ 마찬가지 방법으로 message.groups, message.mpim, message.im 권한도 추가합니다.

• message.groups
• message.im
• message.mpim

⓬ 메시지 이벤트 4개를 모두 추가했다면 [Save Changes]를 눌러 저장합니다.
⓭ 변경 내역을 반영하려면 앱을 재설치해야 합니다. [reinstall your app]을 클릭합니다.
⓮ 요청한 권한을 모두 [허용]합니다.
⓯ 여러분도 ‘Success!’ 알림이 떴죠?

4. 슬랙 토큰을 알아봐요

구름IDE 로직과 슬랙 API로 연결하기 위해서는 슬랙봇 패키지와 함께 세 가지 토큰이 필요합니다. 앞서 메모장에 정한 토큰이 바로 SLACK_APP_TOKEN과 같은 것들이죠. 세 가지 토큰은 다음과 같습니다.

• SLACK_SIGNING_SECRET
• SLACK_BOT_TOKEN
• SLACK_APP_TOKEN

각 토큰은 다음 페이지에서 확인할 수 있습니다.

• SLACK_SIGNING_SECRET Basic Information 페이지 [Signing Secret] 항목
• SLACK_BOT_TOKEN OAuth & Permissions 페이지 [OAuth Tokens for Your Workspace]
• SLACK_APP_TOKEN Basic Information 페이지 [App-Level Tokens]

앞서 메모장에 기록한 토큰은 제외하고 나머지 토큰을 찾아 메모장에 기록합니다.

❶ SLACK_SIGNING_SECRET는 슬랙 API 페이지 → [Basic Information]에서 찾을 수 있습니다.
❷ [Signing Secret] 메뉴의 키를 복사해서 메모장에 적어둡니다.
❸ 아래로 스크롤하면 App-Level Tokens 항목이 나타납니다. 앞서 생성한 nep 토큰이 보이네요. 토큰 이름(nep)을 누릅니다.
❹ 이 토큰이 SLACK_APP_TOKEN입니다. 함께 메모해두세요.
❺ 마지막으로 SLACK_BOT_TOKEN을 찾아야 합니다. [OAuth & Permissions] 메뉴로 이동합니다.
❻ 아래로 스크롤하면 Bot User OAuth Token이 나타납니다. 우리가 찾는 마지막 SLACK_BOT_TOKEN입니다. 복사합니다.

5. 슬랙봇의 로직을 처리할 앱 서버 만들기

슬랙에 추가한 앱이 매일 정해진 시간에 오늘 급식 정보를 알리는 등과 같은 연산을 처리할 앱 서버가 필요합니다. 그 서버를 구름IDE에 두려는 거죠.

지금부터는 구름IDE에 Node.js 컨테이너를 생성하고, 자바스크립트와 Bolt 라이브러리로 간단한 코드를 작성할 것입니다. 앱 서버는 대화를 캐치해서(그림의 message 부분) 단순한 대답을 돌려줍니다(그림의 response 부분).

5.1 Node.js 구름IDE 컨테이너를 생성해요

먼저, 구름IDE에서 Node.js 컨테이너를 만들어주세요.

❶ 크롬 웹 브라우저에서 ide.goorm.io 페이지를 열고 로그인합니다.
❷ 새 컨테이너 만들기 영역에서 [Node.js]를 클릭합니다.
❷ 컨테이너를 빠르게 만들어볼게요. [새 컨테이너] 버튼 우측의 [Node.js]를 클릭합니다.
❸ 컨테이너 이름을 입력합니다. 이름은 알파벳, 숫자, 하이픈(-), 언더스코어(_)만 사용할 수 있습니다. 여기서는 Slackbot이라고 이름 지었습니다.
❹ [추가 모듈/패키지] 토글 버튼을 클릭합니다.
❺ Node.js 버턴을 16.x로 업그레이드를 체크합니다.
❻ [생성하기]를 눌러 컨테이너를 생성합니다.
❼ 잠시 후 컨테이너가 생성됐습니다. [컨테이너 실행하기]를 눌러 Node.js 컨테이너를 실행해볼까요?
❽ 방금 생성한 Slackbot 컨테이너가 잘 실행됐네요. 여러분도 잘 따라하셨죠?

3.2 슬랙 앱 서버 코드를 ‘붙여’넣을게요!

코드는 원래 복사, 붙여넣기해서 짜는 것 입니다. main.js 에 복사해서 붙여넣어주세요. 이 코드는 슬랙봇을 태그하고 ‘hello’라고 메시지를 보내면 답변하는 코드입니다. 구름IDE Node.js에 코드를 추가합니다.

❶ 프로젝트 중 Slackbot(컨테이너 이름) 디렉터리를 클릭합니다.
❷ main.js 파일을 클릭해 내용을 불러옵니다.
❸ 기존 코드를 모두 지우고, 다음 슬랙 앱 서버 코드를 붙여넣습니다.

const { App } = require('@slack/bolt');

const app = new App({  // 각종 서버에 설정들 입니다. 해당 토큰들은 잘 설정되었는지 꼭 확인해주세요.  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
  socketMode: true,
  appToken: process.env.SLACK_APP_TOKEN,
  port: process.env.PORT || 3000
});

// hello 라는 메세지가 오는 것을 감지하는 부분입니다.
app.message('hello', async ({ message, say }) => {
  // say() 는 block 이라고 하는 슬랙 메세지 형태의 일종을 보내는 함수입니다. blocks 를 설정해서 보내면 됩니다.
  await say({
    blocks: [
      {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": `Hey there <@${message.user}>!`
        },
        "accessory": {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "Click Me"
          },
          "action_id": "button_click"
        }
      }
    ],
    text: `Hey there <@${message.user}>!`
  });
});

app.action('button_click', async ({ body, ack, say }) => {
  // Acknowledge the action
  await ack();
  await say(`<@${body.user.id}> clicked the button`);
});

(async () => {
  // Start your app
  await app.start();

  console.log('⚡️ Bolt app is running!');
})();

❺ Ctrl+S 단축키로 코드를 저장합니다. 또는, 상단 메뉴에서 [파일] → [저장]을 누르세요. 어렵지 않죠?

6. 슬랙봇 토큰을 추가하고 앱 서버를 실행해요

거의 끝나갑니다. 이제 메모장에 적어둔 토큰을 추가하고 앱 서버를 실행할 것입니다. 그러면 슬랙에서 우리가 만든 봇을 사용할 수 있죠.

먼저 슬랙 Blot를 설치해야 합니다. Blot는 슬랙에서 개발한 프레임워크입니다. 슬랙 앱을 쉽게 만들 수 있게 돕죠. 이 프레임워크는 자바스크립트뿐 아니라 파이썬, 자바 등의 다양한 언어를 지원합니다.

구름IDE 터미널에서 다음 명령어를 입력해 슬랙 Blot 패키지를 설치합니다.

npm install @slack/bolt

다음으로는 토큰을 추가해야 합니다. 우리는 사용 편의를 위해 slackbot.sh란 스크립트 파일을 만들어 토큰을 환경변수로 등록할 것입니다.

❶ 구름IDE 프로젝트 창에서 마우스 우측 버튼을 누릅니다.
❷ [새 파일]을 클릭합니다.
❸ 파일 이름으로 slackbot.sh를 입력하고 enter↵ 키를 누릅니다.
❹ 다음 소스 코드를 복사하고 붙여넣습니다.

export SLACK_SIGNING_SECRET=[토큰]
export SLACK_BOT_TOKEN=[토큰]
export SLACK_APP_TOKEN=[토큰]

node main.js

❺ 각 항목에서 ‘[토큰]’을 지우고 메모해둔 비밀키를 입력합니다.
❻ 토큰을 모두 입력했다면 Ctrl+S 단축키를 눌러 변경사항을 저장합니다.
❼ 터미널에서 bash slackbot.sh 명령어를 입력하고 엔터키를 누릅니다.

bash slackbot.sh

❽ Now connected to Slack라고 나오면 정상적으로 실행된 것입니다.

7. 슬랙에서 봇이 잘 동작하는지 확인해볼까요?

앞서 슬랙 앱 서버를 실행했습니다. 다시 슬랙 메신저로 돌아가 임의의 채널에서 슬랙봇에게 인사를 건내 봅시다. @슬랙봇 이름을 입력해 슬랙봇을 태그하고 hello를 입력합니다. 여러분도 저처럼 슬랙봇이 답변을 하나요?

❶ 다시 슬랙으로 돌아와 #mono나 #일반의 채널을 클릭합니다.
❷ 채널에서 @mononomo(@슬랙봇 이름)를 입력합니다.
❸ @mononomo 슬랙봇을 태그하고 hello라고 입력한 후 enter↵ 키를 누릅니다.
❹ hello란 인사에 슬랙봇이 “Hey there @ID”라고 답변하네요.
❺ 이번에는 슬랙봇 우측 [Click Me] 버튼을 클릭합니다.
❻ ID clicked the button이란 메시지를 출력하네요. 여러분도 잘 동작하나요?

한 발 더 나아가 보기

지금까지 가장 기본적인 슬랙봇을 만들고 사용해봤습니다. “이런 슬랙봇 만들고 싶다”란 욕심이 생기지 않나요? 이번 기회에 인터넷에 있는 다양한 슬랙봇 개발기를 참고해 다양한 앱을 만들어보는 건 어떤가요? ☁️

• Bolt FrameWork 공부해서 더 다양한 슬랙 액션 즐겨보기
• 블럭 빌드 키드를 이용해서 나만의 메세지를 만들어보기