맛집 추천 슬랙앱 만들기

전 프로젝트에서 리딩을 해주셨던 백엔드 개발자(음 이렇게 말하니 굉장히 거리가 느껴지는 군. 그렇지는 않습니다.) 분께서 같이 슬랙앱을 만들어보지 않겠냐는 이야기를 하셨다.

시작은 회사 직원분께서 스프레드 시트에 정리한 맛집 리스트였다.

회사 근처의 맛집들을 스프레드 시트에 정리해 놓으셨는데 그것을 데이터 베이스 삼아서 맛집을 랜덤하게 추천해주는 기획이었다.

사실 요새 일도 많고, 사이드 프로젝트도 진행중이었어서 조금은 부담이 되었는데 aws, lambda, spread sheet, slack 흥미로워보이는 주제가 많아서 하겠다고 말씀드렸다.

다행히 작업기간은 그리 길지 않았다.

기본적인 것들은 구성했다고 하셔서 살펴보니 꽤 많은 부분이 되어있었다. lambda, gateway api 는 다 설정이 되어있었고, spread sheet 에서 데이터를 가져와서 slack 으로 연결하는 부분도 대충의 흐름이 구성되어 있었다.

사실 lambda 나 gateway api 같은 것들을 좀 만져보고 싶었는데 다 되어있어서 조금 아쉬웠는데, 그 위에서 작업을 하고, 참고하신 링크들을 보니 어느정도 이해가 되어 도움이 되었다.

내가 할 일은 스프레드 시트에서 데이터를 가져오고, 가공해서, 슬랙에서 보여주는 것이었다.

스프레드 시트에서 데이터를 가져오는 것은 간단한데, 구글에서 제공하는 api 를 가지고 원하는 스프레드 시트의 id 를 통해 원하는 범위의 데이터를 가져오면 된다.

슬랙에서 음식 카테고리 별로 선택지를 제공할 것이었기 때문에 카테고리 필드들을 키 값으로 하고, 필요한 데이터들을 밸류로 넣어두었다. 아, 이때 키 값은 한글로 사용했다. 선택지를 한글로 쓸 것이기도 했고, 사이드 프로젝트를 진행할 때의 재미요소로써 한글을 사용해 봐야지 싶기도 했다.

한글로 키값을 설정해 둔것은 역시나 편리했다. 영어 키 값을 출력시에 다시 한글로 옮기지 않고 키 값을 바로 뿌릴 수 있었기 때문이다.

그러면 데이터는 갖춰졌고, 어떻게 보여줄까가 남았다.

보여주는 방식은 슬랙의 interactive message 방법 중에 attachments 를 사용했다.

요즘은 blocks 방식을 사용하는데, blocks 방식으로 interaction 을 하려면 기존 구조보다 조금 더 설정이 필요했다.

이번 프로젝트는 최대한 단순한 구조로, 빠르게 만들 것이었기 때문에 별다른 설정없이 바로 사용할 수 있는 attachments 를 사용했다.

플로우는 이렇다.

사용자가 정의된 슬래시 커맨드를 보낸다. 커맨드를 받으면 선택지 버튼을 제공한다. 사용자가 선택지 중 하나를 선택하면 해당 카테고리의 음식점 중 하나를 추천한다.

여기서 attachments 를 쓸 때 문제가 있었는데, attachments 에서는 한 블럭에서 제공할 수 있는 버튼의 개수가 5개로 제한되어 있었기 때문이다.

흠. blocks 로 바꿔야 하나 싶어서 blocks 로 변경을 하던 중에 5개는 불편해서 누군가가 방법을 찾아뒀을 것 같은데.. ! 역시나 스택오버 플로우에서 attachments 에서 블럭당 5개 제한이 있지만 블럭을 여러개 붙여서 사용할 수 있다는 글을 발견했다.

그 아이디어로 여러개의 블럭을 붙여보았더니 blocks 를 통해 구현한 UI 보다 오히려 가독성이 좋다고 느껴졌다. 그래서 attachments 에 블럭을 여러개를 포함시켜 선택지를 구성했다.

위와 같은 과정을 통해 제공 된 선택지를 사용자가 누르면 base url 뒤에 미리 설정해둔 ‘/interactive’ 로 액션이 입력된다. 해당 액션을 입력받으면 사용자가 클릭한 카테고리를 이용하여 음식점 객체에서 해당 카테고리르 키로 갖고 있는 프로퍼티를 가져온다. 그리고 그 안에 저장된 음식점 배열 중 하나를 랜덤하게 추출하여 response 로 보내면 추천완료가 된다.

이렇게 쓰고보니 아주 간단해 보이는데 그래도 꽤나 열심히 찾아보며 작업을 했다. 재미가 있기도 했고 안해봤던 작업, 안해봤던 환경이라 흥미가 생기기도 했다.

일단 람다 자체를 처음 써보느라 파일을 올리고, 실행하고, 디버깅하는 것을 계속 찾아가며 작업을 진행했다. 나는 파일을 .zip 으로 만들어서 업로드해서 썼는데 터미널에서 zip 파일을 만들고, 다시 lambda 패널에서 업로드를 눌러 업로드를 하는 방식이었다. 아마 cli 를 썼다면 조금 더 간단하게 했을 수 있을 것 같다.

또 재밌었던 것은, 사이드 프로젝트이다 보니 데이터 구조를 다양하게 구성하여 시도해 볼 수 있었다는 것이었다. 한글 키값 객체를 만들어서 키 값을 UI 에 그대로 활용할 수 있게 한다거나, 이모지등을 여러 조건에 따라 붙일 수 있는 함수들을 만들어 사용하기도 했다.

위의 과정을 거쳐 버전 1로 사내 오픈을 했다. 잘 쓰고 계시려나..? 요새 재택하시는 분들이 많아서..

얼떨결에 참여해서 작업했지만 생각보다 굉장히 재밌었다. 작업시간은 대부분의 로직은 하루가 걸렸고, 그 뒤에 UI 를 수정하는 작업을 조금씩 하면서 총 3일 정도가 되었다. 빠르게 작업하고 마무리 할 수 있어서 그것도 좋았다.

다음주에 다시 회의를 하고, 개선 의견들을 수집해 다음 버전 작업도 할 것 같다.

지금은 정말 초간단 구성으로 만들었지만 이번 작업을 하며 살펴보다보니 여러가지를 붙여서 써 볼수도 있겠고, 기획적인 아이디어들을 생각해 둔 것들도 있어서 재미있을 것 같다.