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`로 보냅니다.
소개
Slack Block Kit을 활용해 배송팁 공유 기능을 개발한 경험을 공유합니다
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
컨퍼런스 SLASH
매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....
프론트엔드
컨퍼런스 SLASH
토스ㅣSLASH 21 - 토스팀을 위한 슬랙봇 설계
컨퍼런스 SLASH
거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을 적극적으로 도입해나갈 수 있을지 고민한 경험을 공유합니다. 조유성 / 토스 Full Stack Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
웹 개발 프론트엔드
문서 이주함
쓰기 쉬운 Toss Front SDK
문서 강영화
슬랙봇 디자인 101
문서 이규현