Slack Block Kit 주요 블록 유형별 차이점 정리

Slack Block Kit에서 각 블록은 고유의 역할을 가지고 있는데요. 이를 구성하는 요소들도 블록마다 다르게 사용되다보니 헷갈리는 경우가 많습니다.

 

이번 글에서는 Input, Actions, Section 블록을 중심으로, 각 블록이 사용하는 요소들의 차이점과 쓰임새를 정리해보겠습니다.

 

 

1. Input 블록

특징

• 단일 요소 사용
• 사용자로부터 데이터를 입력받기 위한 목적

구성 요소

• element: 단일 상호작용 요소를 포함합니다. 주로 텍스트 입력, 선택 메뉴, 날짜 선택기 등을 사용합니다.

예시

{
    "type": "input",
    "element": {
        "type": "plain_text_input",
        "action_id": "name_input"
    },
    "label": {
        "type": "plain_text",
        "text": "Enter your name"
    }
}

 

 

2. Actions 블록

특징

• 다수의 요소 배열 사용
• 여러 액션 버튼이나 입력 요소를 한 블록에 모아 제공

구성 요소

• elements: 여러 상호작용 요소를 배열로 포함합니다. 버튼, 선택 메뉴, 날짜 선택기 등 다양한 요소를 함께 배치할 수 있습니다.

예시

{
    "type": "actions",
    "elements": [
        {
            "type": "button",
            "text": {
                "type": "plain_text",
                "text": "Click me"
            },
            "action_id": "button_click"
        },
        {
            "type": "datepicker",
            "action_id": "date_picker"
        }
    ]
}

 

 

 

3. Section 블록

특징

• 단일 보조 요소 사용
• 텍스트, 이미지 등과 함께 보조적인 역할로 추가적인 인터페이스 요소를 제공

구성 요소

• accessory: 보조 역할을 하는 단일 상호작용 요소를 포함합니다. 텍스트 또는 이미지와 함께 버튼, 선택 메뉴 등을 추가할 수 있습니다.

예시

{
    "type": "section",
    "text": {
        "type": "mrkdwn",
        "text": "Here is some text with a button accessory."
    },
    "accessory": {
        "type": "button",
        "text": {
            "type": "plain_text",
            "text": "Click me"
        },
        "action_id": "accessory_button_click"
    }
}

 

 

 

정리

• Input 블록은 사용자 입력을 위한 단일 요소(element)를 사용합니다.
• Actions 블록은 여러 상호작용을 제공하기 위해 배열(elements)을 사용합니다.
• Section 블록은 텍스트나 이미지의 보조 역할로 단일 보조 요소(accessory)를 사용합니다.

이처럼 Slack Block Kit에서는 각 블록의 목적에 따라 사용하는 요소들이 다르며, 이를 잘 이해하고 활용하는 것이 중요합니다. 블록의 특성에 맞게 적절한 요소를 사용하여 효율적인 인터페이스를 구축하시기 바랍니다.