Block Kit Builder
Block Kit Builder(블록 킷 빌더)는 카카오워크에서 제공하는 UI 프레임워크인 Block Kit을 활용하여 조합형 말풍선 및 Modal 화면을 자유롭게 구성할 수 있도록 도와주며, JSON 코드를 쉽게 확인할 수 있는 사이트입니다.
표Block Kit Builder 정보
- 말풍선용 블록 및 Modal 용 블록 지원(현재 말풍선용 블록 9종, Modal 용 블록 3종 지원)
- 카카오워크 클라이언트의 PC 및 Mobile 버전 화면 미리보기 기능
- Modal 화면에서 사용자가 입력 및 선택한 데이터를 전달받는 Callback 응답 내역 확인
| 명칭 | 링크 |
|---|---|
| Block Kit Builder | kakaowork.com/block-kit-builder |
말풍선용 블록
메시지 탭을 선택하고 좌측의 메시지 블록들을 클릭하여 조합형 말풍선을 쉽게 구성할 수 있습니다. 해당 블록들의 기본 텍스트를 편집하거나, 블록의 스타일들을 우측의 편집 영역에서 작업하고, JSON 코드 내역을 쉽게 복사하는 것도 가능합니다.
그림말풍선용 블록 구성
| 구성 요소 | 설명 | |
|---|---|---|
| ① 메시지 블록 | 원하는 블록을 선택 시에는 화면 영역에 조합형 말풍선으로 표시됨 | |
| ② 미리보기 | 화면 영역, 편집 영역 및 각 버튼 제공 - 모달 탭: Modal 용 블록으로 전환 - [코드 복사하기] 버튼: 편집 영역의 JSON 코드 전체 복사 - [전체 삭제] 버튼: 화면 영역의 블록 초기화 |
|
| 화면 영역 | 메시지 블록 목록에서 선택한 블록들의 미리보기 제공 - 블록 위에 마우스 오버 시 단일 블록을 삭제할 수 있는 [X] 버튼 표시 - 블록을 클릭한 뒤 드래그 앤 드롭하여 다른 위치로 이동 가능 |
|
| 편집 영역 | Bot이 메시지를 발송할 때 활용할 수 있는 기본적인 JSON 코드를 실시간으로 표시 - 블록별로 설정된 기본 텍스트나 스타일 값들을 직접 수정 가능 - 수정하는 즉시 화면 영역에 반영됨 |
|
Modal 용 블록
모달 탭을 선택하고 좌측의 모달 블록들을 클릭하여 Modal 화면을 쉽게 구성할 수 있습니다. 해당 블록들의 기본 텍스트를 편집하거나, 필수값 여부 또는 플레이스 홀더 등의 옵션들을 우측의 편집 영역에서 작업하고, JSON 코드를 쉽게 복사하는 것도 가능합니다.
Input Block에 데이터를 입력하거나 Select Block에서 데이터를 선택하는 것도 가능합니다.
그림Modal 용 블록 구성
| 구성 요소 | 설명 | |
|---|---|---|
| ① 모달 블록 | 원하는 블록을 선택 시에는 화면 영역에 실제 화면과 동일하게 표시됨 - 최대 10개까지 선택 가능 |
|
| ② 미리보기 | 화면 영역, 편집 영역 및 각 버튼 제공 - 메시지 탭: 말풍선용 블록으로 전환 - PC 탭: 카카오워크 PC 버전의 Modal 화면 미리보기로 전환 - Mobile 탭: 카카오워크 Mobile 버전의 Modal 화면 미리보기로 전환 - [Callback 응답 확인] 버튼: 화면 영역에서 블록에 입력하거나 선택한 값을 Callback URL로 전달되는 형식 제공 - [코드 복사하기] 버튼: 편집 영역의 JSON 코드 전체 복사 - [전체 삭제] 버튼: 화면 영역의 블록 초기화 |
|
| 화면 영역 | 모달 블록 목록에서 선택한 블록들의 미리보기 제공 - 블록 위에 마우스 오버 시 단일 블록을 삭제할 수 있는 [X] 버튼 표시 - 블록을 클릭한 뒤 드래그 앤 드롭하여 다른 위치로 이동 가능 - Input Block과 Select Block에 데이터 입력 가능 - [확인] 버튼을 클릭하여 Callback 응답 확인 가능 |
|
| 편집 영역 | Bot이 메시지를 발송할 때 활용할 수 있는 기본적인 JSON 코드를 실시간으로 표시 - 블록별로 제공하는 옵션(필수값, 플레이스 홀더)을 직접 수정 가능 - 수정하는 즉시 화면 영역에 반영됨 |
|
Callback 응답 확인
Modal 용 블록들을 구성한 뒤, 화면 영역에서 옵션을 선택하거나 값을 직접 입력해 볼 수 있습니다. 화면 영역 하단에 위치한 [확인] 버튼이나 편집 영역 우측 상단에 위치한 [Callback 응답 확인] 버튼을 클릭하여 사용자가 입력한 데이터가 Bot의 Callback URL에 어떤 형태로 전달되는지 미리 체크할 수 있습니다.
그림고객사 서버에 전달되는 Callback 응답
안내
Callback URL은 관리자 서비스 > Bot 개발 > Bot 권한 및 기능 탭에서 URL 등록 메뉴를 통해 지정할 수 있습니다.
자세한 설명은 Bot 시작 가이드를 참고하시기 바랍니다.