재그지그 블로그의 대나무숲 슬랙 앱 따라하기

 

재그지그 블로그에서 대나무숲 슬랙 앱을 만든 것을 공유하였다. 사용해본 입장에서 '와우' 소리가 절로 나왔다. 블로그 글을 봐도 누구나 따라서 슬랙 앱을 만들 수 있어 보일 정도로 잘 정리되어 있었다. 하지만 나처럼 아무런 지식없이 맨땅에 헤딩하는 분들은 고생할 포인트가 여러군데 있다. 자바스크립트도 타입스크립트도 잘 모르고 헤로쿠를 처음 써보았고 Bolt.js는 처음 들어보았고 슬랙앱 하나 만들어본적 없는 필자의 재그지그 블로그의 대나무숲 슬랙앱 따라하기를 해보겠다.

 

 

 

시작하기 전에

반드시 재그지그 블로그를 먼저 읽어보길 바란다. 어디까지나 해당 블로그의 글과 재그지그 Github를 바탕으로 만든 것이기에 본 포스팅보다 원리나 정리면에서는 훨씬 뛰어나다. 여기는 단순히 따라하는 방법만 제시할 뿐. 지식적인 부분을 채워주기에는 부족하다. 본 포스팅은 헤로쿠나 슬랙앱, 기타 기술들을 간접적으로 경험해보기 위한 수단으로 이용해주길 바란다.

 

임금님 귀는 당나귀 귀! 대나무숲 슬랙 앱 만들기 - 재그지그의 개발 블로그

GitHub - wormwlrm/bamboo-forest: 🎋 대나무숲 슬랙 앱 - Echo your message as anonymous on Slack!

 

 

 

 

 

슬랙앱 등록

먼저 슬랙앱을 등록해야 한다. Slack API(https://api.slack.com/)에서 앱을 등록할 수 있다. 'Create an app' 버튼을 클릭하면 앱을 등록하는 화면을 볼 수 있다.

Slack은 미래의 업무가 이루어지는 곳입니다

 

 

'From scratch'를 클릭한다. 다음 화면에서 앱 이름을 작성하고 슬랙앱이 연동될 슬랙 워크스페이스를 선택한다. 연습삼아 만드는 것이라면 워크스페이스를 미리 하나 만들어서 실습해보는 것이 좋다.

 

앱이 생성되고 만든 앱을 클릭해서 설정화면에 진입한다. 앱 Setting 화면이 나타나면 Settings - Basic Information - Permissions를 클릭한다. Permissions 화면 중간에 Scope를 지정할 수 있는 레이아웃을 볼 수 있다.

 

 

'Add an Oauth Scope'를 클릭해서 2개의 스코프를 등록한다. Commands는 앱 바로가기 또는 커맨드 명령어로 대나무숲 메세지를 보내기 위한 용도이고, 'chat:write'는 대나무숲 봇이 메시지를 전송하기 위한 권한 설정이다.

Add an OAuth Scope 버튼을 클릭해서 스코프 2개를 추가해야 한다

검색해서 필요한 스코프를 찾을 수 있다

2개의 스코프를 추가하면 위와 같은 화면을 볼 수 있다

 

 

이제는 봇을 만들 차례. 앱은 대나무숲 기능 전반의 시스템을 칭한다. 이 시스템 내에서 대나무숲 메세지를 전달하는 역할을 하는 것이 봇이다. 슬랙에서 유저가 성명과 표시 이름을 세팅할 수 있는 것처럼 봇도 성명(Default username)과 표시 이름(Display Name)을 세팅할 수 있다. 주의사항이 있다. 아래 이미지는 잘못된 사례로 표시 이름은 반드시 영문으로 해야한다. 영문이 아닌 경우는 에러가 나타나는데 그 경우는 하단 "추가로 확인할 사항" 파트에서 확인할 수 있다. 이렇게 해서 기본적인 앱 등록 과정은 끝났다. 이제 봇이 동작하는 코드를 가지고 오자.

Display Name은 반드시 영문으로 작성하자. 여기서는 한글이 입력되지만 나중에 에러로 인해 정상적인 동작이 안될 수 있다.

 

 

 

Github Fork

재그지그 Github에서 프로젝트를 본인 Repository로 포크해온다. Github 코드를 바탕으로 배포을 해야하기에 개인 Repo에 코드를 넣어두어야 한다. 코드에 대한 설명은 재그지그 블로그를 참고하길 바란다.

 

 

 

Heroku

재그지그 블로그에서는 로컬에서 동작시켜 테스트하는 예시가 나온다. 그렇게 시험해보고 싶은 분들은 재그지그 블로그를 통해서 해보길 권한다. 여기서는 Heroku를 통해 배포해서 동작시켜 볼 것이다. 먼저 Heroku에 가입을 하고 앱을 생성한다. 원하는 앱 이름을 정하고 Create App 버튼을 클릭한다.

 

 

이제 Github 코드를 헤로쿠에 연동시켜보자. 상단에 Deploy 탭을 클릭한다. Deploy 화면 가운데 Github을 선택하고 본인 Github 계정을 연동한 다음 Repository 이름을 넣고 Search 버튼을 눌러서 포크한 Repository까지 연결해둔다.

Github 버튼을 클릭하면 아래 Connet to Github 레이아웃이 등장한다

 

 

아래 이미지에는 Disconnect라고 나와 있지만 처음 진입할 때는 Connect라는 버튼이 보일 것이다. 이 버튼도 클릭해서 활성화시킨다. master 브랜치에 커밋이 생성되면 자동으로 배포가 되도록 'Enable Automatic Deploys'를 클릭한다. 지금은 바로 배포를 해야하니깐 수동 배포를 위해 Deploy Branch를 클릭한다. 그러면 빌드와 관련된 로그가 보일 것이고 문제가 없다면 'Your app was successfully deployed'라는 메세지가 나타날 것이다.

 

 

아래는 'Enable Automatic Deploys' 버튼을 클릭해서 자동배포가 활성화된 모습이다.

 

 

아래는 정상 배포가 된 모습이다. 이제 View 버튼을 클릭해보자.

 

 

예상과 다르게 Error 메세지가 나온다. 하지만 이게 정상이다. 깃헙과 헤로쿠가 연동되었을 뿐, 헤로쿠앱이 동작할 준비는 아직 되어있지 않은 상태이기 때문이다. 슬랙과 관련한 ID값을 로직에 전달하면서 슬랙에도 헤로쿠 주소를 알려줘야 제대로 동작한다.

 

 

 

Request URL과 바로가기

필자가 많이 헤맨 부분이다. 나처럼 고생하지 않길 바래본다. 먼저 재그지그 블로그의 가이드에 나와있는 앱 바로가기 세팅부터 해보자. 슬랙앱 Settings - Basic Information - Add features and functionality - Interactive Components 혹은 왼쪽 메뉴에서 Interactivity & Shortcuts를 클릭한다.

 

아래 이미지처럼 Interactivity를 On으로 만들고, Request URL에 헤로쿠 서비스 URL을 입력한다.

• https://(헤로쿠앱 이름).herokuapp.com/slack/events

 

 

이제 Shortcuts을 만들어주자. Request URL 입력란 아래에 바로 세팅하는 부분이 있다. 먼저 만들 것은 익명 메세지 보내기용 바로가기. Global로 선택하고 바로가기의 이름과 설명, Callback ID를 입력한다. 여기서 주의할 점은 반드시 Callback ID를 'bamboo_message'로 해야하는 점. Bolt.js 서버에서 이 ID로 이미 세팅되어 있어서 만약 다른 ID로 하고 싶다면 서버 코드도 변경해야 한다.

'익명 메세지 보내기'는 전역 옵션으로 진행한다

 

 

익명글에 스레드를 남기는 바로가기도 추가해보자. 'On messages'를 선택하고 바로가기의 이름과 설명, Callback ID를 입력한다. 여기서도 Callback ID를 'Callback_message'로 해야한다.

'스레드 남기기'는 메세지 옵션으로 진행한다

 

 

정상적으로 수행했다면 아래와 같이 '바로가기'가 2개 추가되어 있을 것이다.

 

 

이제 아래처럼 OAuth & Permissions - Install to Workspace 버튼을 클릭하면 슬랙앱이 워크스페이스에 엑세스를 하기 위한 권한 요청화면이 나타나고 허용을 누르면 슬랙앱과 슬랙과의 연동이 끝난다. 슬랙에서 '/'를 누르고 슬랙앱 이름을 입력하면 슬랙앱 바로가기 버튼이 나오는 것을 볼 수 있다.

이미 Install이 되어 있는 경우면 'Reinstall to Workspace'라고 되어 있는 버튼을 클릭하면 된다

당장 이 화면이 보이지 않을 수 있다. 그런 경우에는 일단 다음 단계로 바로 진행하자.

 

 

 

환경 변수 세팅

이제는 코드를 건드릴 차례. 첫번째는 Bolt.js - manifest.json에서 헤로쿠 주소를 다시 설정하는 것. 기존 재그지그 깃허브에는 replace_this로 나와 있다. 여기에 본인 헤로쿠앱 이름을 넣으면 된다. 두번째는 heroku와 heroku-dotenv를 package.json에 추가하는 것. 재그지그 깃허브 Readme를 보면 환경변수 입력하는 방법이 나오는데 헤로쿠에 .env 환경변수를 입력을 돕는 도구가 바로 heroku-dotenv이다. heroku는 계정 연결에 필요해서 추가되었다. 이 두가지 도구의 역할 설명은 아래에서 하겠다. 여기까지 입력했으면 master에 Commit한다. 나중에 알 수 있겠지만 이 커밋으로 헤로쿠는 다시 빌드하고 배포를 하게 된다.

 

 

이제 .env 파일을 만들어보자. 재그지그 깃허브에는 .env 파일이 없다. 그래서 새로 생성해줘야 한다. 해당 파일은 고유 번호가 들어가기 때문에 Github에 올라가지 않도록 .gitignore를 통해 관리할 수 있도록 해야한다.

다시 얘기하지만 env 파일은 원래 없다. 직접 만들어야 한다.

 

 

.env 파일에 들어갈 내용은 아래와 같다.

# 앱 토큰
# Basic Information > App Credential 에서 확인 가능
SLACK_SIGNING_SECRET=

# 슬랙 봇 토큰
# Basic Information > Features > Bots 활성화 후
# OAuth & Permission > OAuth Tokens for Your Workspace 에서 확인 가능
SLACK_BOT_TOKEN=

# 대나무숲 채널 코드
# 웹에서 슬랙 워크스페이스 접속 시 URL에서 확인 가능
SLACK_BAMBOO_CHANNEL=

 

 

앱 토큰은 Basic Information - App Credentials - Signing Secret에 있다. 'Show' 버튼을 눌러서 내용을 복사한 다음 .env에 붙여넣는다.

 

 

슬랙 봇 토큰은 OAuth & Permissions - OAuth Tokens for Your Workspace - Bot User OAuth Token을 Copy해서 .env에 붙여넣으면 된다.

 

 

대나무숲 채널 코드는 슬랙 - 상단 채널 이름 클릭 - 하단에 채널 ID를 복사해서 붙여넣으면 된다.

 

 

 

heroku 및 heroku-dotenv

거의 다 왔다. 하지만 가장 시간을 많이 잡아먹는 작업이 남았다. 바로 heroku 및 heroku-dotenv를 동작하는 것. 프로젝트를 Pull 받은 곳에서 아래 명령어를 입력하여 heroku를 설치한다.

brew tap heroku/brew && brew install heroku

 

이때 원활하게 설치가 되지 않을 수 있다. 필자의 경우 위 명령어를 입력했을 때 아래와 같은 에러 메세지가 출력되는 것을 보았다. 여기에 보면 'sudo rm -rf /Library/Developer/CommandLineTools' 명령어로 해결하라는 솔루션을 제시하는데 고민을 잘 해보고 진행할 것. 시간이 오래걸리고 다른 방법도 있기 때문. 

Error: Your Command Line Tools are too outdated.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install

Alternatively, manually download them from:
  https://developer.apple.com/download/all/.
You should download the Command Line Tools for Xcode 13.4.

 

 

아래처럼 sudo로 명령하면 다른 에러 메세지를 볼 수 있다. 아래에 보이는 에러 메세지를 바탕으로 구글에서 해결책을 찾아볼 수 있다. 이 방식으로도 안된다면 위에 제시된 삭제(rm) 후 설치(xcode-select --install) 방법을 이용해보자.

$ sudo brew tap heroku/brew && brew install heroku

Error: Running Homebrew as root is extremely dangerous and no longer supported.
As Homebrew does not drop privileges on installation you would be giving all
build scripts full access to your system.

 

 

brew로 heroku 설치가 끝났으면 환경변수를 헤로쿠에 올릴 수 있는 heroku-dotenv를 설치해야 한다.

npm i heroku-dotenv

 

 

이제 환경변수 파일인 .env 파일을 헤로쿠에 올려야하는데 접근 권한 혹은 로그인 과정이 필요하다. 간단하게 할 수 있는 방법은 헤로쿠 Log를 보는 명령어로 접근하는 것이다. 아래 명령어를 입력하면 헤로쿠앱의 접근과 관련하여 브라우저 창이 열린다. 헤로쿠에 이미 로그인 되어 있는 경우라면 브라우저를 바로 종료해도 된다. 헤로쿠에 로그인이 되어 있지 않다면 로그인을 진행해서 터미널이 헤로쿠에 접근할 수 있는 절차를 진행하면 된다.

heroku logs --tail -a (heroku app name)

ex)
heroku logs --tail -a dev_namu

 

 

이제 .env가 있는 위치에서 다음 명령어를 입력하면 환경변수가 헤로쿠에 올라간다.

$ heroku-dotenv push -a (헤로쿠앱 이름)

// 정상적으로 동작시 아래와 같은 메세지를 볼 수 있다 
Setting SLACK_SIGNING_SECRET, SLACK_BOT_TOKEN, SLACK_BAMBOO_CHANNEL and restarting (헤로쿠앱 이름)... done, v4

 

정상적으로 환경변수가 헤로쿠앱에 반영되면 헤로쿠 대시보드에는 아래 이미지처럼 변수가 세팅되었다는 메세지가 나타난다.

 

 

추가로 확인할 사항

App Manifest

App Manifest에서 display_name은 영문만 가능하다. 잘못된 텍스트가 입력되어 있다면 아래와 같은 에러가 나타날 수 있다.

 

 

슬랙 채널 - 봇 추가

슬랙 채널에 진입해서 익명 메세지 모달(팝업)이 정상적으로 나타나고 입력을 했는데 'Submit' 버튼을 눌러도 채널에 아무런 메세지가 나타나지 않는 경우가 있다. 채널에 봇이 없는 경우인데 채널에 봇을 추가해주면 된다. 그런데 일반 유저 초대하듯 봇을 초대할 수 없다. 그럴 때는 메세지창에 봇을 태그해서 초대할 수 있다.

 

 

재가동

대부분 완료했는데 동작을 안한다면 각 부분을 재가동해보자. 아래 케이스 중 하나가 제대로 반영되어 있지 않아 동작을 안할 수 있다.

• Slack API 페이지 - Settings - Reinstall to workspace 버튼 클릭
• Heroku 대시보드 - 상단 Deploy 탭 - Deploy Branch 버튼 클릭
• 슬랙앱 새로고침 (Mac OS 기준 : cmd + R)

 

 

테스트

확인해 볼 사항은 다음과 같다.

• '/'를 눌렀을 때 대나무숲 슬랙앱이 나타난다
• 슬랙앱을 선택했을 때 모달(팝업)이 나타난다
• 확인 체크를 하지 않고는 Submit을 할 수 없다
• 이름을 입력하지 않고 Submit을 했을 때 랜덤한 이름이 채널에 출력된다
• 스레드 달기 버튼을 클릭해서 스레드를 달 수 있다
• 이름 입력란에 임의의 이름을 입력했을 때 채널에 해당 이름이 출력된다

 

위 사항이 모두 만족하면 아래와 유사한 화면을 볼 수 있다.

 

 

 

이렇게 해서 재그지그 블로그의 대나무숲 슬랙앱 만들기가 완료되었다. 완성하면 새삼 재그지그님이 대단하게 보인다. 누구나 따라할 수 있도록 설명도 잘하셨고 사소해보이는 아이디어를 이렇게 구현했다는 것도 굉장하고. 이 자리를 빌어 재밌는 경험을 하게해준 재그지그님에게 감사의 인사를 남긴다. 

 

재그지그님에게 드리는 쌍따봉