슬랙봇을 만들어봅시다

*이 글의 설명은 Mac을 기준으로 한 것이라, Windows 환경에서는 맞지 않습니다.
*이 글에서는 슬랙봇을 만들기 위해 nodejs를 사용했습니다.

다들 잘 지내고 계시죠? 오랜만에 pxd story에 글을 씁니다.

/

현재 속해 있는 스타트업에서는 커뮤니케이션의 반 이상이 슬랙을 통해 이루어지고 있습니다. 그러다 보니 슬랙과 무척 친해지게 되었는데, 나만의 슬랙봇을 만들어 다양한 용도로 사용하고 싶은 생각이 들었습니다. 하지만 개발자가 아니다 보니 여러 가지 삽질을 하고 겨우겨우 만들게 되었습니다. 최근 다른 팀원에게 슬랙봇 만드는 것을 알려줄 기회가 있었는데, 다시 해보니 결과적으로 매우 간단한 작업이었다는 것을 느끼게 되었습니다. 혼자 엄청나게 삽질을 했던 것이죠. 슬랙봇 만드는 것을 다른 팀원들에게도 알려주고 싶기도 해서 이렇게 글로 정리합니다.

슬랙봇으로 무엇을 할 수 있냐고요?

특정 단어가 이야기되면 단순한 응답을 할 수도 있고, 번역도 할 수 있고, 환율정보를 가져와서 계산을 해줄 수도 있습니다. 웹사이트의 특정 정보를 긁어와서 표시할 수도 있고요. 사실 프로그래밍을 할 수 있다면 할 수 있는 것은 무한대로 늘어나죠.

들어가며

비 개발자가 간단한 것이라도 개발을 한다는 것은 원래 어러운 일입니다. 하지만 여러 가지 경험을 해보니, 그중에 비 개발자에게 가장 어려운 것은 개발 환경을 세팅하고 구조를 이해하는 것 같습니다. 예를 들어 웹사이트를 만들기 위해서는 호스팅 서비스를 세팅해야 하고, ftp를 통해 올리던지 git을 사용하던지 하는 것들 말이죠. 물론 이런 것들도 이해를 해야 하긴 하지만 '초반의 성공에 대한 기쁨'을 만끽하고 나서 필요할 때마다 조금씩 이해해도 된다고 생각합니다. 물론 비 개발자인 경우에 말이죠. 그런 면에서, 구조는 완벽히 이해할 수 없다고 쳐도 환경을 세팅하는 것은 누군가 옆에서 한 번만 해주면 되는 것인데 이 장벽 때문에 다들 한 걸음을 내디딜 수 없다는 것이 아쉽습니다. (저도 매번 삽질할 때마다 그렇게 느끼고...)

따라서, 이 글에서는 슬랙봇을 만들기 위해 필요한 모든 구조나 내용의 이해보다는, 슬랙봇이 동작하는 데까지의 구성에 대해 튜토리얼처럼 전달하려고 합니다. 물론 저도 구체적인 내용은 잘 모르기도 하고요. 튜토리얼은 아래와 같은 순서로 진행됩니다.

1. 환경 설정
 1-1. 개발을 위한 에디터 설치
 1-2. 슬랙봇이 동작할 환경 설정 (hosting & nodejs)
2. 슬랙봇 만들기
 2-1. 슬랙에서 봇 생성 및 Token 받기
 2-2. Slack bot library 설치
 2-3. Slack bot 코드 작성
3. 코드 업로드 및 완성(Deploy)

1. 환경설정

1-1. 개발을 위한 에디터 설치

처음으로, 코딩을 쉽게 할 수 있도록 에디터를 설치합니다. 아래 사이트에서 OS X용으로 다운받아서 설치하시면 됩니다. 에디터를 사용하는 일은 나중이니, 여기까지만 하고 다음 단계로 넘어갑니다.

https://www.sublimetext.com

sublime text 실행화면

1-2. 슬랙봇이 동작할 환경 설정 (hosting & nodejs)

이번에는 슬랙봇이 동작할 환경을 설정합니다. 가장 기본적으로 알아두어야 하는 것은, 웹사이트나 인터넷을 통해 제공되는 서비스들은 항상 인터넷이 연결되어있는 곳에 존재해야 합니다. 슬랙봇 서비스도 마찬가지죠. 그래서 '호스팅 서비스'를 사용하는데, 일정 금액을 내면 인터넷 한 귀퉁이에 자신의 공간이 생기게 됩니다. 그리고 그 기반 위에 다양한 플랫폼(용어가 틀렸을 수 있음)을 얹혀 사용할 수 있습니다. php, nodejs, python 등을 말이죠.

고맙게도, heroku라는 사이트에서는 무료로 이런 서비스를 제공하고 있습니다. 물론 약간의 제약이 있지만 누구나 '초반의 성공에 대한 기쁨'을 맛볼 수 있습니다. 그리고 나서 본격적으로 쓰고 싶다면 돈을 내면 되죠. 아래 사이트에 가셔서 일반 웹사이트처럼 가입을 하시면 되고, 아래 스크린샷 화면까지 가셨다면 성공입니다. 여기서 'Create New App'을 하지는 않습니다.

https://heroku.com

다음으로 heroku에서 제공하는 'getting started with nodejs' 튜토리얼을 따라 하시면 됩니다. 아래 링크를 열고 순서대로 쭉 따라 하시면 되는데, 네 번째, 'Deploy the app' 까지만 하시면 됩니다. 아래에 따라 할 내용을 순서대로 정리했습니다.

https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction

a. Introduction
   - [I'm ready to start] 버튼 클릭

b. Set up
   - [Download the Heroic CLI for …] 드랍다운 > [Mac OS X] > 클릭&다운로드
   - 다운로드 받은 'heroku-osx.pkg' 설치
   - Mac에서 터미널 열기 [Finder > Application > Utilities > Terminal]
   - 터미널에 명령어 실행
     (아래 내용. '$'는 명령어 입력란 정도로 이해하시면 됩니다. 실제로 '$'는 입력하지 않습니다. )
   - $ heroku login

   - id, password 입력
   - $ node -v (nodejs 설치확인 및 버전확인. 맥은 기본으로 설치되어 있음)
   - $ npm - v (nodejs package manager 설치확인 및 버전확인. 맥은 기본으로 설치되어 있음)
   - $ git --version (git 설치확인 및 버전 확인. 맥은 기본으로 설치되어 있음)

c. Prepare the app
   - $ git clone https://github.com/heroku/node-js-getting-started.git (샘플 소스 다운받기)
   - $ cd node-js-getting-started (다운받은 소스 폴더로 이동)

d. Deploy the app
   - $ heroku create (heroku, 아까 로그인한 계정에 앱 생성. 랜덤으로 이름(url) 부여됨)
   - $ git push heroku master (샘플 소스를 생성한 heroku 앱에 업로드, 배포)
   - $ heroku ps:scale web=1 (서비스의 타입과 스케일 지정. 걍 적으시면 됩니다)
   - $ heroku open (생성한 앱 url열기)

마지막 'heroku open'까지 하셨다면, 웹브라우저에 어떤 웹페이지가 떴을 겁니다. 이게 바로 아까 샘플소스를 업로드&배포한 결과고, 그 샘플은 express라는 웹 애플리케이션 프레임워크였습니다.

여기까지 성공하셨다면, 여러분은 nodejs를 개발-배포할 수 있는 환경을 모두 세팅한 것입니다. 이제 nodejs를 통해 슬랙봇을 만드는 작업을 하면 됩니다.

2. 슬랙봇 만들기

2-1. 슬랙에서 봇 생성 및 Token 받기

슬랙에서 봇을 만들기 위해서는 token을 발급받아 소스에 적용을 시켜야 합니다. 일단 따라 해보시죠. 아래 경로를 따라가시면 슬랙 봇을 생성할 수 있습니다.

자신이 속한 Slack > Manage Apps > Custom Integrations > Bots > Add Configuration

- User name 입력 > Add bot integration
  (이후 icon등 여러 정보를 등록할 수 있는데 이건 나중에 해도 됩니다)
- API 토큰 확인 > 해당 토큰을 복사해서 어딘가에 기록해둡니다. 아래 'xoxb-....'가 token입니다.

2-2. Slack bot library 설치

이번엔 slack에서 제공하는 bot library를 설치합니다. 다시 Mac의 터미널로 돌아와서 아래 명령어를 입력합니다. (이 때, 폴더는 아까 다운받은 샘플코드의 폴더에 위치해 있어야 합니다)

$ npm install @slack/client --save

2-3. Slack bot 코드 작성

이제 소스를 수정할 시간입니다. 1-2에서 다운로드받아 업로드&배포를 했던 소스를 슬랙봇 코드로 교체하는 과정입니다. 1-1에서 설치했던 sublime text를 쓸 때가 왔습니다. 아래와 같이 따라 하여, 샘플 소스의 index.js를 sublime text에서 열여주세요.

Sublime text > File > Open > Users > {Username} > node-js-getting… > index.js

해당 파일을 열면 아래와 같은 내용이 담겨있을겁니다.

이 내용 전체를 삭제하고 아래 코드를 적습니다. 그리고 아래 코드 중, SLACK_BOT_TOKEN 뒤에 적힌 'xoxb-....'은 2-1에서 발급받은 token으로 교체해주세요. 그러고 나서 파일 저장을 해주세요.

const { RTMClient } = require('@slack/client');

const token = process.env.SLACK_TOKEN || 'xoxb-190626573414-500782710453-jVbhdun3GVdfcOJdW4z2HyZ6';

const rtm = new RTMClient(token);

rtm.start();

rtm.on('message', (message) => {

var text = message.text

if (text.includes("천재") ) {

rtm.sendMessage("감사", message.channel);

}

else if(text.includes("바보")){

rtm.sendMessage("반사", message.channel);

}

});

 

파일을 하나 더 수정해야 합니다. sublime text에서 해당 폴더의 'Procfile'을 열어주세요.

Sublime text > File > Open > Users > {Username} > node-js-getting… > Procfile

아래와 같이 적혀있을 텐데, 여기에서 'web'을 'worker'로 변경한 후 저장합니다.

기존 : web: node index.js
변경 : worker: node index.js

3. 코드 업로드 및 완성(Deploy)

자, 이제 거의 마지막 단계입니다. 마지막으로 수정한 내용을 업로드&배포하고, 한가지 설정만 바꾸면 완성됩니다. 다시 Mac 터미널을 열고, 아래의 명령어를 순서대로 실행합니다.

$ git add .
$ git commit -m "slackbot"
$ git push heroku master

이렇게 하면 아래와 비슷한 화면이 보일겁니다.

이렇게 하면 업로드 및 배포가 완료된 것입니다.

마지막으로 한가지 설정 변경이 필요한데, 터미널에 아래와 같이 실행해주시면 됩니다.

$ heroku ps:scale web=0 worker=1

이제 슬랙으로 돌아와 아까 만든 봇의 이름을 찾아서 말을 걸어보면 됩니다. 슬랙봇 샘플코드를 보면 대충 감이 오실 텐데, '천재'라고 입력하면 '감사'라고 응답을 합니다. 그리고 원하는 채널에 봇을 초대하면, 해당 채널에서도 말을 알아듣고 응답을 합니다.

이제 앞으로 소스코드를 마음껏 수정하고, 다시 업로드&배포를 하실 땐 매번 아래의 명령어를 터미널에 순서대로 적으시면 됩니다.

$ git add .
$ git commit -m "변경사항"
$ git push heroku master

마치며

지금까지 슬랙봇을 만들기 위한 환경 세팅과, 슬랙봇 샘플코드를 배포하여 동작하는 것까지 설명을 드렸습니다. 제가 가장 어려웠던 부분이 이 과정들이었기 때문에, 슬랙봇의 응답을 어떻게 다양하게 할 수 있는지나 그 구조는 설명을 거의 못 드렸습니다. 다음에 힘이 좀 나면 슬랙봇을 다양하게 활용하는 방법을 정리해보도록 하겠습니다 :)

* 이 글은 제가 브런치에 작성한 글을 옮긴 것입니다.

[참고##챗봇##]