Kakao Work::Block Kit 구성 및 정책::Button Block

페이지 이동경로

Button Block

Button Block(버튼 블록)은 말풍선에서 버튼을 표현하는 블록으로, 레이아웃 블록을 구성하는 엘리먼트의 속성으로 사용되기도 합니다. Button Block은 최대 4개까지 중첩하여 사용하는 것을 권장하며, 더 중요한 버튼을 상단에 위치시키는 것을 권장합니다. 버튼 명은 직관적인 명칭으로 가능하면 짧은 명사형을 사용하고, 버튼의 Action Type에 따라 적당한 버튼명을 사용해야 합니다.
Button Block 정책에 관한 자세한 설명은 정책 및 UX 가이드를 참고하시기 바랍니다.

Button Block
블록 유형 블록명 엘리먼트 레이아웃 블록
말풍선 Button Block O X

기능 소개

1개의 행에 1개의 버튼을 표현할 때 사용하며, 여러 개의 Button Block을 연속하여 쌓는 것도 가능합니다.

버튼 표현

1개의 행에 1개 버튼을 표현합니다.

1개의 행에 1개 버튼 표현

그림1개의 행에 1개 버튼 표현

색상

3가지 버튼 색상을 제공합니다.

  • default(일반적인 표현)
  • primary(우선순위로 강조)
  • danger(위험, 경고의 표현)

그림버튼 색상 예시



버튼 및 중첩 표시

버튼

  • 최대 20자까지 입력
  • 버튼 사이즈에 따라 말줄임 처리
  • 가운데 정렬로 표시

중첩 표시

  • Button Block을 연속하여 쌓으면, 긴 형태의 버튼 라인 표현이 가능합니다.

그림버튼 명 및 중첩 예시

블록 속성

블록 속성
속성 타입 필수 여부 설명
type String 필수 타입 고정값
text String 필수 버튼 레이블
style String 필수 버튼 스타일
default: 일반적인 표현
primary: 우선순위로 강조
danger: 위험, 경고의 표현
action_type String 선택 버튼 선택 시 수행할 동작 명령어
open_inapp_browser:value 속성에 담긴 URL을 인앱브라우저로 연결
open_system_browser :value 속성에 담긴 URL을 시스템(System) 브라우저로 연결
open_external_app :value 속성에 담긴 custom app.scheme을 호출
call_modal: Modal 창을 띄우는 요청이며, value 속성값으로 서버에 요청하여 Modal 데이터를 가져와서 표시
submit_action: action_name, value, 문맥 정보들을 고객사 서버에 콜백으로 전달
action_name String 선택 사용자가 여러 액션 엘리먼트 중에 어떤 것을 눌렀는지 구분하기 위해 사용
- 주로 서버 API 호출 시에 사용
value String 선택 버튼의 액션 수행 시, 추가 정보를 담을 수 있는 속성
- 자유 포맷으로 Query Parameter, String Encoded JSON 등을 사용할 수 있음
안내
버튼을 1개의 행에 여러 개 표현하고 싶은 경우에는 레이아웃 블록인 Action Block을 활용해야 합니다. Button Block 정책에 대한 자세한 내용은 정책 및 UX 가이드를 참고하시기 바랍니다.

Action Type

Button Block의 action_type의 종류에 따라 설정되는 예시를 다음과 같이 나타냅니다.

open_system_browser

action_type을 open_system_browser로 설정하면 value 속성에 담긴 URL을 시스템(System) 브라우저로 연결할 수 있습니다.

코드예제open_system_browser Sample Code

{
    "type": "button",
    "text": "자세히보기",
    "style": "primary",
    "action_type": "open_system_browser",
    "value": "http://example.com/details/999"
}

open_external_app

action_type을 open_external_app로 설정하면 value 속성에 담긴 custom app.scheme을 호출할 수 있습니다.

코드예제open_external_app Sample Code

{
    "type": "button",
    "text": "카카오 지도에서 보기",
    "action_type": "open_external_app",
    "value": "ios=kakaomap%3A%2F%2Flook%3Fp%3D37.537229%2C127.005515&aos=kakaomap%3A%2F%2Flook%3Fp%3D37.537229%2C127.005515"
}

주의
사용자의 디바이스 플랫폼에 app scheme에 해당하는 앱이 설치되어 있지 않을 수 있습니다.

  • query string 형식을 이용해 각 플랫폼별 scheme을 담고 있는 value 속성에는 디바이스 플랫폼에 해당하는 값이 없을 수 있습니다.(iOS 앱만 제공하는 경우 등)

submit_action

action_type을 submit_action로 설정하면, action_namevalue 및 문맥 정보들을 고객사 서버에 Callback으로 전달할 수 있습니다. value 속성을 활용하면 다시 돌려 받길 원하는 값으로 자유롭게 설정할 수 있습니다.

코드예제submit_action Sample Code

{
    "type": "button",
    "text": "일정 수락",
    "action_type": "submit_action",
    "action_name": "accept",
    "value":"event_id=20210301-0024"       
}

코드예제submit_action_callback Sample Code

{
    "type": "submit_action",
    "action_time": "2021-03-08T10:10:09.563323Z",
    "message": {
        "blocks": [
            {
                "type": "button",
                "text": "일정 수락",
                "action_type": "submit_action",
                "action_name": "accept",
                "value":"event_id=20210301-0024"       
            }
        ],
        "conversation_id": 123456,
        "id": 123456852531597312,
        "text":"lcfuePYPdxnfTcVG+x4mihoEEcChqHInrBCBEDY5Adc=",
        "user_id": 123456
    },
    "react_user_id": 654321,
    "action_name": "accept",
    "value": "event_id=20210301-0024"
}

안내

  • submit_action 속성을 활용한 Bot과 멤버간 대화 시나리오는 반응형 메시지을 참고하시기 바랍니다.
  • Block Kit을 활용한 다양한 메시지 시나리오는 Bot 메시지 시나리오를 참고하시기 바랍니다.

call_modal

action_type을 call_modal로 설정하면, 버튼 클릭 시 Modal을 화면에 띄우고 사전에 등록한 Bot의 Request URL로 Modal안에 표시할 블록 데이터를 요청합니다. value 속성을 활용하여 다시 돌려받길 원하는 값으로 자유롭게 설정이 가능합니다.

코드예제call_modal Sample Code

{
    "type": "button",
    "text": "결재창 띄우기",
    "action_type": "call_modal",
    "value":"number=20200401-PR-0024"
}

안내

  • call_modal 속성을 활용한 Bot과 멤버간 대화 시나리오는 반응형 Modal을 참고하시기 바랍니다.
  • Block Kit을 활용한 다양한 메시지 시나리오는 Bot 메시지 시나리오를 참고하시기 바랍니다.
  • Button Block 정책에 대한 자세한 내용은 정책 및 UX 가이드를 참고하시기 바랍니다.
이 문서가 만족스러운 이유를 알려주세요.
이 문서에 아쉬운 점을 알려주세요.
평가해주셔서 감사합니다.

더 자세한 의견은 documentation@kakaoenterprise.com 으로 제보해주세요.