슬랙봇 디자인 101
그동안 토스팀에서 꽤 많은 슬랙봇을 만들었어요. 그러면서 좋은 슬랙봇 디자인에 대해서도 치열하게 고민했어요. 이 고민의 흔적을 나누면 업계 커뮤니티에도 도움이 될 거로 생각해서 이렇게 글을 써봅니다.
제가 그동안 만들었던 봇 중 일부인데요. 업무 시간 중에 커피를 빠르게 주문하도록 슬랙에서 주문하는 토스팀 사이렌오더 커싸봇 부터, Jira에 접속하지 않고도 이슈를 생성하고 관리하는 이슈봇 등 수많은 슬랙봇이 있지요.
슬랙봇은 메이커 입장에서도, 사용자 입장에서도 좋은 도구랍니다. 메이커 입장에서는 싸게 만들 수 있어서 편리하고요. 유저 입장에서는 업무 맥락에서 다른 페이지로 이동할 필요없이 바로 사용해서 편리하죠.
위에 언급한 JIRA 티켓을 만드는 이슈봇을 예로 들어볼게요.
과거 이슈봇이 없던 시절에는 다음과 같은 워크플로우로 업무를 처리했는데요.
슬랙으로 이슈를 제보받으면, 브라우저를 열고 지라에 접속해서 이슈 생성
이슈봇이 나오고 나서는 다음과 같이 간편해졌어요.
이슈봇을 통해 언제 어디서나 슬랙 내에서 즉시 이슈 생성 / 수정 / 완료
이슈봇을 통해서 각 이슈를 생성하는 시간을 45초, 업데이트 하는 시간을 15초 절약했는데요. 2021년에 계산한 바로는 이슈봇이 토스팀원의 업무시간을 1,076시간 절약했는데, 지금까지는 더 많은 시간이 절약됐겠죠. 1,076시간은 209시간 기준 한명이 5개월동안 풀타임으로 일한 시간이라고 해요. 실제로 퇴사하신 분 중에 이슈봇을 그리워 해서 재입사 하고 싶다는 팀원도 있다는 소식을 들을 정도였는데요. 팀원들에게 편리하고 유용한 봇들을 만들어왔어요.
좋은 슬랙봇이란 무엇일까요? 채팅 앱에서 업무를 ‘가장 빠르게 처리하도록 돕는’ 봇입니다. 왜 슬랙봇을 사용하는지 이해하면 이 답변에 공감하기 쉬우실 거예요. 우리는 업무시간에 “대화”를 가장 많이 합니다. 구두로 하는 대화를 제외하면 거의 서면 대화죠. 그중에서도 압도적으로 채팅을 많이 하곤 해요. 이 글을 읽는 여러분들도 업무 중엔 채팅으로 가장 많이 이야기 나눈다는 걸 금방 알아차리실 거예요. 슬랙봇은 해야 하는 태스크를 “업무 대화" 맥락에 위치시켜 빠르게 처리하게 돕기 위해서 사용해요.
그동안 도움이 됐던 꼭지는 다음 주제들이에요.
1) 슬랙이라는 플랫폼에 대한 이해
2) 타사, 자사 레퍼런스 찾기
3) 심플한 인터페이스 설계
4) 사용자 맥락 이해
하나씩 살펴볼게요!
슬랙이라는 플랫폼
먼저, 플랫폼의 특이한 구현 제약사항을 이해해야 해요. 처음 슬랙봇 디자인하는 디자이너들이 온보딩에 가장 어려움을 겪는 부분이기도 하지요. 슬랙 위에서 디자인하는 건 디자인 툴 위에서 그림을 그리는 우리 멘탈 모델과 달라서 시안을 가져가면 문제가 생기는 경우가 많았어요.
가장 다른 점은 HTML 등 웹 문서 마크업 하는 방식이 아니라 슬랙에서 정의한 “블록"이라는 개념으로 이루어져 있다는 점이에요.
그렇기 때문에 아래와 같은 제약 사항이 생기곤 했어요.
- UI 커스텀이 불가능해요. 슬랙에서 블록으로 정의한 UI인 블록킷으로만 써야해요.
- 블록 갯수가 제한되어있어 긴 메시지를 만들려면 필수로 일부 메시지를 숨김처리해야해요.
- 버튼에 들어가는 글자 수가 한정되어 있어요.
- 웹과 달리 링크 텍스트를 눌렀을 때 페이지 전환이 안 되고 무조건 버튼을 사용해야 해요.
이런 내용들을 이해해야 좀 더 고도화된 UX를 만들 수 있어요. 어떻게 할지 엔지니어분과 긴밀하게 얘기했던 기억이 나요. 가령, 모바일에서 보면 블록킷으로 제공된 버튼이 너무 약하게 보이는데 바꾸지 못했어요. 모달 안에서 리치한 경험을 주고 싶을 때도 제약이 있었어요. 그래서 가능한 부분들을 엔지니어분께서 다른 방법으로 제안 주시고, 디자이너로서 받아들일지 보고 결정하는 워크플로우로 업무를 하기도 했답니다. 제약 사항을 피해 가는 꼼수를 많이 썼죠.
타사, 자사 레퍼런스 찾아보기
이런 플랫폼 제약 위에서 잘 디자인하려면 이미 잘 돌아가고 있는 제품을 확인해야 해요. Producthunt나, 슬랙 앱 목록 화면에서 다양한 봇의 모양을 살펴봤어요. 토스팀 내에 있는 사람을 칭찬하는 봇을 만들 때는 HeyTaco를, 온보딩 져니 설계를 위한 봇을 만들 때는 Donut 을 참고했지요.
여러 가지 참고했는데요.
- 어떤 식으로 제약 조건을 우회했는지
- 어떤 모양으로 만들면 최적의 설계인지
- 사용자와 커뮤니케이션은 어떻게 하는지
- 마케팅은 어떻게 하는지
이러 내용을 참고하면서 만들었어요.
그 외에도 다른 디자이너분들이나 엔지니어분들이 만든 반응이 좋았던 슬랙봇 모양도 참고했어요.
여러 순위나 숫자를 캐주얼하게 보여주는 재밌는 슬랙봇을 팀원들이 좋아하셨고요.
.png)
말투가 귀엽고 엉뚱한 봇도 반응이 좋았어요. PR 리뷰 등 업무를 독려하는 커뮤니케이션을 위해 위트가 섞인 봇을 만든 것을 참고했었죠.
.png)
작은 포인트지만 다른 레퍼런스를 참고해서 팀원들이 업무에서 만나는 봇의 껍데기, 캐릭터도 최대한 귀엽게 만들었어요. 귀여울수록 말 걸고 싶고 팀원들에게 잘 각인되는 효과가 있더라고요. 피곤한 업무시간 중에 잠깐의 휴식을 주기도 해요.
실제로 봇으로 만든 캐릭터 상품을 굿즈샵에서 판매했는데, 팀원분들이 정말 좋아하셨어요.
.png)
심플한 인터페이스 설계
여러 슬랙봇들을 살펴보았을 때 더 단순하고 심플해야 빠르게 태스크를 수행하겠더라고요. 너무 많은 버튼을 노출한다거나, 설명과 버튼 간 거리가 너무 멀다거나 하는 복잡한 인터페이스는 지양해야 해요. 사용자들은 뭘 눌러야 할지 혼란을 느껴요.
심플한 인터페이스를 설계하려 할 때 PP 리뷰와 UT(사용성 테스트)의 도움을 받았어요. PP 리뷰는 저희 디자인 챕터 내에서 매주 PP(Product Principle)를 잘 지켜서 디자인했는지 서로서로 피드백해 주는 미팅이에요. 내부 제품이다 보니 사용성 테스트도 사용자를 만나기 너무 쉽기 때문에 바로바로 가서 진행하곤 했지요.
예를 들어볼게요. 이전에 만들었던 리서치봇의 모양인데요. 왼쪽의 화면을 오른쪽의 화면으로 바꿀 때 PP 리뷰에 들고 가서 피드백을 주고받았었어요.
.png)
버튼과 설명이 너무 멀고, 요소가 많다는 피드백을 들었어요. 그래서 아예 버튼에 설명을 넣어서 버튼의 라벨 길이가 조금 길더라도 직관적으로 인지하도록 수정했어요. 당시에 PP 리뷰에서 블록킷 빌더를 켜서 바로 수정한 다음에 이야기 나눴던 기억이 나요. 그리고 바로 사용자분들께 피드백을 들었을 때 더 잘 이해된다고 이야기해주셨어요.
직관적인 봇을 만들때 설명적이고 복잡한 라벨을 인지가 쉽게 만들거나 UI를 더 잘 구성하는 방법은 슬랙 이모지를 추가하는 것이기도 해요. 저는 저희 슬랙 워크스페이스에 이모지를 추가해서 UI 구성의 옵션을 블록킷에서 제공하는 것보다 더 다채롭게 구성하기도 했답니다. 설명이 직관적으로 잘 되기도 하고요!
.png)
사용자 맥락 이해
어떤 업무 맥락에서 쓰는지도 중요하더라고요. 봇은 용도와 맥락에 따라 디자인되어야 해요. 이를 구분하는 구분자는 “단순 열람인지, 아닌지” 인데요. 이런 구분자에 따라 가독성만 따지면 될지, 버튼과 화면 전환 등 인터랙션이 많이 들어가게 만들어야 할지 등 전반적인 컨셉을 정하게 돼요.
그리고 업무 맥락과 관련해서 봇을 설정하는 UX를 어떤 환경에 위치시켜야 할지 항상 고민이 되더라고요. 고민하다가 슬랙봇의 상세 세팅은 조금 더 자유도가 높은 웹페이지로 구현했었어요. 복잡한 슬랙봇 설정은 슬랙에서 세팅하게 만드는 것 보다 웹으로 빼는 게 사용자에게 편리하다는 배움이 있었거든요. 구독이나 ON, OFF를 설정하는 단순한 세팅은 봇에서 설정하도록 하지만 그것보다 복잡한건 웹페이지 안에서 설정하도록 했어요.
.png)
바깥 고리
마지막으로 다른 글도 몇 개 첨부합니다. 저는 슬랙 봇을 만들 때 다음 글을 참고했어요.
슬랙봇을 만들기 전에 다음 할 일 리스트를 꼭 해보세요. 더 쉽게 디자인하실 수 있을 거예요.
✅ 슬랙 블록에 대해 이해하고 배운점 내 언어로 정리하기
✅ 슬랙에서 제공하는 블록킷 빌더 써보기
✅ Producthunt나, 슬랙 앱 목록 화면에서 다양한 봇의 모양을 살펴보고 조사하기
✅ 인터페이스 설계하고나면 고객이나 팀원 대상으로 UT 해보기
✅ 사용자 맥락을 이해하고 디자인했는지 한 번 더 점검하기
봇은 늘 단순한 UI지만 봇을 만들어가는데 생각보다 고민할 게 많았다는 사실을 새삼스럽게 느끼네요. 이 글은 슬랙에 대해서만 다뤘지만 다른 플랫폼에서 봇을 만들때도 참고해보세요. 디스코드나 팀즈나 봇을 만들 때 구성이나 참고할 부분이 비슷할거로 생각해요. 이 글이 봇을 만들어 가는 여러분들께 조금이나마 도움이 되시길 바라요!