블록 킷

블록 킷 (Block Kit)

슬랙 메시지나 모달을 만들 때 단순한 텍스트 한 덩어리로 끝내면 아쉬워요. 블록 킷은 블록(block)·블록 요소(block element)·조성 객체(composition object)라는 세 가지 재료로 화면을 조립하는 UI 프레임워크라서, 버튼과 메뉴 같은 인터랙티브한 구성 요소를 얹은 레이아웃을 짤 수 있어요. 결국 앱은 특별히 구조화된 JSON을 만들어 슬랙에 전달하는 방식으로 UI를 표현한다고 생각하면 돼요.

출처: Slack 공식 문서 — Block Kit

세 가지 재료

블록(block) — 메시지, 모달, 앱 홈 같은 서피스(surface)에 배치하는 시각적 구성 요소예요. 메시지에는 최대 50개, 모달이나 앱 홈에는 최대 100개까지 넣을 수 있어요.
블록 요소(block element) — 대개 버튼·메뉴 같은 인터랙티브한 구성 요소예요. 블록 안에 포함돼요.
조성 객체(composition object) — 특정 블록·블록 요소 안에서 텍스트나 옵션, 인터랙션 기능을 정의해요.

블록을 서피스에 배치하기

블록은 앱 홈, 메시지, 모달에 추가할 수 있어요. 다만 일부 블록은 특정 서피스에서만 쓸 수 있으므로, 블록 킷 레퍼런스 가이드를 확인해 우리가 쓰려는 서피스와 호환되는지 살펴봐야 해요. 레이아웃을 미리 손으로 짜기 전에 블록 킷 빌더(Builder)로 시각적으로 프로토타이핑하는 것도 좋아요.

블록 만들기

블록은 API에서 JSON 객체로 표현돼요. 예를 들어 section 블록은 이렇게 생겼어요:

{
  "type": "section",
  "text": { "type": "mrkdwn", "text": "New Paid Time Off request from <example.com|Fred Enriquez>\n\n<https://example.com|View request>" }
}

type으로 블록 종류를, text로 표시할 내용을 정하는 구조예요. 여러 블록을 쌓으면 배열 형태가 돼요:

[
  { "type": "header", "text": { "type": "plain_text", "text": "New request" } },
  { "type": "section", "fields": [ { "type": "mrkdwn", "text": "*Type:*\nPaid Time Off" }, { "type": "mrkdwn", "text": "*Created by:*\n<example.com|Fred Enriquez>" } ] }
]

직접 JSON을 만들 때는 블록 레퍼런스 가이드를 참고해 완전한 blocks 배열을 구성하면 돼요. Block Kit Builder라는 비주얼 샌드박스를 쓰면 블록을 고르고 설정하며 미리보기할 수 있고, 자동으로 대응 JSON도 생성돼요.

블록 요소로 인터랙티브하게 만들기

블록에 버튼·메뉴·텍스트 입력 같은 요소를 달면 사용자와 상호작용할 수 있어요. section 블록 안에 button 요소를 넣은 예시를 보면:

{
  "blocks": [
    {
      "type": "section",
      "text": { "type": "mrkdwn", "text": "This is a section block with a button." },
      "accessory": {
        "type": "button",
        "text": { "type": "plain_text", "text": "Click Me", "emoji": true },
        "value": "click_me_123",
        "action_id": "button_action"
      }
    }
  ]
}

accessory로 버튼을 달고, action_id로 어떤 액션인지를 지정하는 식이에요. 이렇게 인터랙티브한 블록을 만들었다면, 사용자가 눌렀을 때 흘러 들어오는 상호작용 페이로드를 처리하는 가이드를 참고해 앱이 적절히 응답하게 준비해야 해요.