웹디자인 (HTML,JS)

Slack Block Kit 통한 매력적인 인터랙티브 메시지 만들기

날으는물고기 2024. 10. 10. 00:53

Slack Block Kit은 Slack 메시지에 다양한 형식과 상호작용을 추가할 수 있는 UI 프레임워크입니다. 이를 사용하면 단순한 텍스트뿐만 아니라 버튼, 선택 메뉴, 이미지 등 여러 요소를 통해 사용자와의 상호작용을 강화할 수 있습니다. Slack의 앱 또는 봇을 통해 복잡한 레이아웃을 만들 때, Block Kit을 사용하면 훨씬 직관적이고 흥미로운 인터페이스를 제공할 수 있습니다.

Slack Block Kit의 주요 구성 요소

  1. Blocks (블록)
    • 블록은 메시지의 기본 구성 단위입니다. 각 블록은 메시지에 표시될 내용이나 형식을 정의합니다.
    • 주요 블록 유형:
      • Section 블록: 텍스트, 필드 또는 액션과 같은 주요 콘텐츠를 표시.
      • Image 블록: 이미지를 추가.
      • Divider 블록: 시각적으로 구분선을 추가.
      • Actions 블록: 버튼, 선택 메뉴 등을 포함하여 사용자 상호작용을 추가.
      • Context 블록: 작은 텍스트나 이미지 그룹을 제공하여 추가 정보를 제공.
    예를 들어, Section 블록과 Image 블록을 조합하면 텍스트와 이미지를 함께 표시하는 레이아웃을 만들 수 있습니다.
  2. Block Elements (블록 요소)
    • 블록 내부에 추가되는 상호작용 가능한 요소들입니다.
    • 주요 요소:
      • 버튼: 사용자가 클릭하여 액션을 트리거.
      • 선택 메뉴: 여러 옵션 중 하나를 선택할 수 있는 메뉴.
      • 날짜 선택기: 날짜를 선택할 수 있는 UI 제공.
      • 멀티 선택 메뉴: 여러 항목을 동시에 선택할 수 있는 메뉴.
    이를 통해 Slack 메시지에 단순한 텍스트 이상의 상호작용을 추가할 수 있습니다.
  3. Composition Objects (구성 객체)
    • 블록과 블록 요소 내부에서 데이터를 정의하고 형식화하는 데 사용됩니다.
    • 주요 예시:
      • Text 객체: 텍스트 형식과 내용 정의 (예: mrkdwn 또는 plain_text).
      • Option 객체: 선택 메뉴에 표시될 옵션들 정의.

Block Kit을 사용한 메시지 작성 예시

Block Kit 메시지는 주로 JSON 형식으로 작성됩니다. 아래는 간단한 예시입니다.

{
  "blocks": [
    {
      "type": "section",
      "text": { "type": "mrkdwn", "text": "*Slack Block Kit에 오신 것을 환영합니다!*" }
    },
    {
      "type": "image",
      "image_url": "https://example.com/my-image.png",
      "alt_text": "예시 이미지"
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": { "type": "plain_text", "text": "클릭하세요" },
          "action_id": "button_click"
        }
      ]
    }
  ]
}

이 예시는 다음과 같은 구성입니다.

  • Section 블록: 텍스트를 표시.
  • Image 블록: 이미지를 추가.
  • Actions 블록: 버튼을 통해 사용자가 클릭할 수 있는 상호작용을 추가.

Block Kit Builder를 통한 프로토타입 작성

Slack은 Block Kit 메시지를 시각적으로 설계하고 미리 볼 수 있는 Block Kit Builder 도구를 제공합니다. Block Kit Builder를 사용하면 복잡한 JSON 코드를 직접 작성하지 않고도 블록을 추가, 조정하여 메시지의 레이아웃을 빠르게 구성할 수 있습니다.

  1. Block Kit Builder에 접속: Slack Block Kit Builder를 통해 블록을 추가하고 실시간으로 메시지 미리보기를 확인할 수 있습니다.
  2. 실시간 미리보기: JSON 코드를 작성하면서 미리보기를 통해 실제 Slack에서 어떻게 표시되는지 확인할 수 있습니다.

상호작용 추가하기

Block Kit의 큰 장점 중 하나는 상호작용을 쉽게 추가할 수 있다는 점입니다. 사용자가 버튼을 클릭하거나 선택 메뉴를 사용하는 것처럼 Slack 메시지에서 직접적인 상호작용이 가능합니다.

  • 버튼 추가 예시 
    {
  "type": "button",
  "text": { "type": "plain_text", "text": "더 알아보기" },
  "url": "https://example.com"
}
  • 선택 메뉴 추가 예시 
    {
  "type": "static_select",
  "placeholder": { "type": "plain_text", "text": "옵션을 선택하세요" },
  "options": [
    { "text": { "type": "plain_text", "text": "옵션 1" }, "value": "option_1" },
    { "text": { "type": "plain_text", "text": "옵션 2" }, "value": "option_2" }
  ]
}

사용자 상호작용 처리

사용자가 버튼을 클릭하거나 선택 메뉴를 사용할 때 해당 액션을 처리하려면 서버에서 이벤트를 처리해야 합니다. 이를 위해 Interactive Components를 사용하여 Slack 앱이 상호작용을 처리할 수 있도록 백엔드 코드를 구성합니다.

  • 예시: 버튼 클릭 처리 
    app.post('/slack/actions', (req, res) => {
  const payload = JSON.parse(req.body.payload);
  if (payload.actions[0].action_id === 'submit_action') {
    // 액션 처리 코드
  }
});

Slack Block Kit은 메시지와 인터페이스를 시각적으로 풍부하게 만들고 사용자와의 상호작용을 더욱 직관적으로 구성할 수 있는 강력한 도구입니다. Block Kit Builder를 활용하여 메시지를 손쉽게 설계하고, JSON 형식을 통해 복잡한 레이아웃 메시지를 보다 풍부하고 상호작용 가능하게 만드는 도구입니다. 기본적인 메시지 구성을 단계별로 정리합니다.

1. 기본 Section 블록 추가

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Hello, this is a message with a *section* block."
      }
    }
  ]
}

이 예제는 기본 텍스트를 포함한 Section 블록을 추가합니다.

2. Divider 블록 추가

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Hello, this is a message with a *section* block."
      }
    },
    {
      "type": "divider"
    }
  ]
}

Section 블록 아래에 Divider 블록을 추가하여 구분선을 넣습니다.

3. Image 블록 추가

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Hello, this is a message with a *section* block."
      }
    },
    {
      "type": "divider"
    },
    {
      "type": "image",
      "image_url": "https://www.example.com/image.png",
      "alt_text": "Example Image"
    }
  ]
}

Divider 블록 아래에 Image 블록을 추가하여 이미지를 표시합니다.

4. Actions 블록 추가

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Hello, this is a message with a *section* block."
      }
    },
    {
      "type": "divider"
    },
    {
      "type": "image",
      "image_url": "https://www.example.com/image.png",
      "alt_text": "Example Image"
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "Click Me"
          },
          "value": "click_me_123"
        }
      ]
    }
  ]
}

Image 블록 아래에 Actions 블록을 추가하여 버튼을 삽입합니다.

완성된 메시지 구성

이제 여러 블록을 조합하여 완성된 메시지를 구성해보겠습니다.

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Hello, this is a message with a *section* block."
      }
    },
    {
      "type": "divider"
    },
    {
      "type": "image",
      "image_url": "https://www.example.com/image.png",
      "alt_text": "Example Image"
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Here is another section with more text."
      }
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "Click Me"
          },
          "value": "click_me_123"
        },
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "Another Button"
          },
          "value": "click_me_456"
        }
      ]
    }
  ]
}

이 예제는 여러 Section, Divider, Image, Actions 블록을 조합하여 복잡한 메시지를 구성합니다.

5. 메시지 전송 방법

블록을 구성한 JSON을 사용하여 Slack API를 통해 메시지를 전송할 수 있습니다. 예를 들어, chat.postMessage 메서드를 사용하여 메시지를 전송합니다.

curl -X POST -H 'Authorization: Bearer xoxb-your-token' -H 'Content-type: application/json' \
--data '{"channel":"#your-channel","blocks":[{...}]}' \
https://slack.com/api/chat.postMessage

여기서 xoxb-your-token은 Slack API 토큰, #your-channel은 메시지를 보낼 채널입니다.

 

위 단계를 따라가며 Block Kit을 활용하여 Slack 메시지를 구성하고 전송할 수 있습니다. 필요에 따라 다양한 블록을 조합하여 원하는 형태로 메시지를 만들 수 있습니다.

728x90
저작자표시 비영리 동일조건