n8n, Slack Block Kit

📌 Slack Block Kit이란?

Slack Block Kit은 메시지를 시각적으로 더 풍부하고 인터랙티브하게 구성할 수 있게 해주는 Slack의 UI 구성 도구입니다.
텍스트, 버튼, 드롭다운, 이미지 등 다양한 구성 요소를 JSON 기반으로 조합할 수 있으며, GPT나 자동화 워크플로우와 함께 사용할 때 매우 유용한 구조화 인터페이스입니다.

 

Why - Block Kit을 사용하는 이유

Sense Stock이라는 AI 주식 요약 서비스를 기획하면서,
초기에는 단순히 키워드를 받아서 분석하는 구조였지만, 사용자의 성향이나 목적(예: 간단 요약 vs. 디테일 분석)을 먼저 받는다면 AI가 더 개인화된 응답을 생성할 수 있을 것이라고 판단했습니다.

그래서 Slack에서 선택 가능한 UI, 즉 Block Kit을 도입하게 되었습니다.

 

⚙️ Slack Trigger의 Operation 방식

Slack Trigger에는 두 가지 Send 실행 방식이 있습니다

1. Send

• 단순히 메시지를 Slack에 전송
• 이후 사용자 응답은 별도로 처리 (예: Webhook 등)

2. Send and wait for response

• 메시지를 보낸 뒤, Slack 사용자의 입력(예: 선택, 입력, 클릭)을 기다리고
• 응답 결과를 바로 다음 노드에서 처리 가능
• 하지만 Block Kit의 버튼 클릭은 이 방식으로 동작하지 않음
  
  • 버튼 클릭 시 404 에러 발생

🚨 버튼 클릭 시 404 에러가 발생한 이유

버튼은 UI만 생성하는 것이고,
사용자가 클릭했을 때 Slack은 다음과 같은 별도 POST 요청을 보냅니다:

Slack → Interactivity → Request URL로 POST 전송

404 에러의 원인은?

• Slack의 버튼 클릭 요청을 받을 Webhook이 n8n에 없기 때문
• 즉, UI는 그렸지만 눌렀을 때 반응할 회로(Webhook)가 없었던 것

→ 버튼 클릭은 Slack의 Interactivity API를 통해 별도로 Webhook으로 전달되기 때문

🧠 예시

사용자가 버튼 누르는 '스위치'는 설치했는데,

그 스위치가 연결된 회로(=Webhook)를 안 만든 상태

그래서 버튼은 누를 수 있는데, 아무 일도 안 일어남

 

<밑에 해결방법을 참조해주세요>

 

진행 방식

Slack 노드에서 아래와 같이 설정했습니다:

• Operation: Send
• Message Type: Blocks
• Blocks: JSON 구조 작성

{
  "blocks": [
    {
      "type": "section",
      "text": { "type": "mrkdwn", "text": "*어떤 분석을 원하시나요?*" }
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": { "type": "plain_text", "text": "📊 디테일 분석" },
          "value": "detailed",
          "action_id": "detailed_click"
        },
        {
          "type": "button",
          "text": { "type": "plain_text", "text": "📰 간단 요약" },
          "value": "simple",
          "action_id": "simple_click"
        }
      ]
    }
  ]
}

이렇게 메시지가 Slack에 잘 표시되었지만, 버튼을 클릭하자 404 에러가 발생했습니다. (위에 글 참조)

✅ Block Kit Button 활성화 방법

1. Slack App에서 Interactivity 활성화

• Slack App 설정 → Interactivity & Shortcuts
  
  • https://api.slack.com/apps
• Request URL에 n8n Webhook 주소 등록
  • <참조>
    • Slack Trigger Webhook URL <> Webhook URL과는 다르다
    • Interactivity에 작성할 URL은 Webhook URL이다.
      • n8n에서 Webhook URL 생성후 해당 노드 클릭하면 URL 확인가능 

 

2. n8n에서 Webhook 노드 생성

• Path: 자동완성 되어있을겁니다.
  • 안되어있다면, 마지막 끝에 주소입력 webhook/<path>
• Method: POST

3. (중요)n8n Workflow가 Active 상태가 아니라면, 실행하는 Workflow를 두개로 나눠서 실행해야한다.

• 하나의 Workflow에서 두 가지 Test 진행불가
• 1. 기존 Slack Block Kit 생성 Workflow 생성후 잘 들어오는지 확인
• 2. 이후 Webhook Test Workflow 실행하고 Block Kit Button 클릭시 값을 가져오는지 확인

4. 이후, Slack에서 전달되는 payload를 Code 노드에서 JSON 파싱하여 처리

 

 

Slack Trigger 와 Webhook의 차이

✅ 요점만 먼저 말씀드리면

Block Kit 버튼 UI는 Slack에서 이미 보여주는 정적 인터페이스예요.

사용자가 버튼을 클릭하는 순간, Slack이 별도로 POST 요청을 보내는 구조입니다.

• Block Kit은 Slack에게 "버튼을 그려줘"라고 말하는 거고,
• Webhook은 Slack이 "사용자가 버튼 눌렀어!"라고 n8n에 따로 알려주는 통로입니다.

---

🔄 정리된 흐름

1️⃣ @mention 메시지 받기              ← Slack Trigger
2️⃣ Block Kit 메시지 보여주기       ← Slack 노드 (Select_Block에서 Block UI 생성)
3️⃣ 사용자가 버튼 클릭함             ← Slack 사용자 행위
4️⃣ Slack이 n8n Webhook에 POST 요청  ← Webhook 노드 필요!
5️⃣ Webhook에서 action_id 확인하고 후속 작업 실행

---

📦 핵심 요약

• Block Kit UI = Slack이 알아서 그림
• 👉 이건 Slack 노드에서 잘 보내면 끝
• 버튼 클릭 후 동작 = Slack → n8n Webhook으로 별도 알림
• 👉 이건 별도 Webhook 노드로 반드시 처리해야 함

✅ 두 개의 테스트 대상

테스트 항목 설명 테스트 방법

1. Slack Trigger (이벤트)	사용자의 @mention, 메시지 입력 등 Slack 이벤트를 처리	슬랙에서 @Stock 지금 시장 상황 어때?처럼 멘션 테스트
2. Webhook (인터랙션)	사용자가 Block Kit 버튼을 클릭했을 때 Slack이 Webhook에 POST 요청	Block Kit 전송 후 버튼 클릭해서 Webhook 반응 확인

---

✋ Tip

• Block Kit에서 버튼만 만든다고 해서 기능이 작동하는 게 아닙니다.
• Slack에서 누른 버튼은 별도로 n8n의 Webhook에 요청을 보내야 하고, 그걸 따로 받아야 작동합니다.

 

🛠 그 외 필수 설정: 앱 채팅 허용

Slack 앱이 사용자와 대화할 수 있도록 설정도 필요합니다.

• Slack App > App Home > 아래로 스크롤
• ✅ Allow users to send Slash commands and messages from the messages tab 체크

이 설정이 되어 있어야 Slack에서 앱에 다이렉트 메시지를 보낼 수 있습니다.

 

<❓ Block을 여러개 만들어 볼 수 있을까??>

• 예시: Block에서 Action후 다음 Block에서도 Action 진행

https://cord-ai.tistory.com/228

n8n, Slack Block Kit(2)