Slack Block Kit 활용
류충근 · 컬리 · 컬리 기술 블로그
소개
Slack Block Kit을 활용해 배송팁 공유 기능을 개발한 경험을 공유합니다
AI 핵심 요약
배송 팁 승인·거부를 Slack 메시지에서 처리하기 위해 Block Kit으로 버튼이 포함된 메시지를 만들고, Java Slack SDK와 Spring API를 연동했습니다. Block Kit Builder에서 UI를 설계한 뒤 `LayoutBlock` 목록을 구성해 Incoming Webhook으로 전송하고, 버튼의 `actionId`에 따라 승인 또는 거부 이벤트를 구분하도록 했습니다. Spring API에서는 폼 형식으로 전달된 `payload`를 Gson으로 `BlockActionPayload`로 변환해 처리하고, 결과 문구를 반영한 메시지를 `responseUrl`로 다시 보내 기존 메시지를 교체했습니다. Slack을 단순한 알림 채널을 넘어 업무 승인 같은 상호작용에도 활용할 수 있으며, 요청 형식과 메시지 교체 방식을 이해하는 것이 중요하다는 경험을 공유합니다.
- Block Kit Builder에서 메시지 UI를 먼저 구성하고 JSON 구조를 확인한 뒤 Java SDK의 `LayoutBlock`으로 옮기면 구현을 수월하게 시작할 수 있습니다.
- 버튼의 `actionId`와 Slack 앱의 Callback ID를 일치시키고, 버튼 값에는 처리할 데이터 식별자를 담아 이벤트를 구분합니다.
- Slack 인터랙션 요청은 `application/x-www-form-urlencoded`로 전달되므로, 예시에서는 `payload` 문자열을 받은 뒤 Gson으로 `BlockActionPayload`로 변환합니다.
- 승인·거부 결과를 기존 메시지에 반영하려면 `replaceOriginal(true)`를 사용하고, 응답은 요청에 포함된 `responseUrl`로 보냅니다.
비슷한 학습 자료
토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
SLASH · YouTube
토스ㅣSLASH 21 - 토스팀을 위한 슬랙봇 설계
SLASH · YouTube
토스ㅣSLASH 21 - Micro-frontend React, 점진적으로 도입하기
SLASH · YouTube
쓰기 쉬운 Toss Front SDK
이주함 · 토스 기술 블로그
슬랙봇 디자인 101
강영화 · 토스 기술 블로그
우당탕탕 beauty 풀한, 컬리 앱 서비스 런칭기
이규현 · 컬리 기술 블로그