https://docs.kakaowork.com/kakao_work/blockkit/ Recent content in Block Kit 구성 및 정책 on 카카오워크 기술문서 Hugo -- gohugo.io ko-kr © Kakao Corp. https://docs.kakaowork.com/kakao_work/blockkit/uxguide/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/uxguide/ UX 공통 가이드 카카오워크에서 제공하는 [Builder 사이트] Block Kit Builder(블록 킷 빌더)에서 메시지 블록과 Modal(모달) 블록들을 사용하여 Block Kit을 구성할 때 블록 유형에 상관 없이 다음의 UX 공통 가이드를 준수하시기 바랍니다. 정책 한 개의 요청에 Block Kit 여러 개를 동시에 전송하지 않습니다. 그림Block Kit 전송 구성 정책 Block Kit 구성 시, 가능한 한 화면에서 전체 Block Kit을 볼 수 있도록 구성합니다. 그림Block Kit 화면 구성 Block별 정책 가이드 Block Kit Builder에서 제공하는 메시지 블록과 Modal 블록들을 사용하여 Block Kit을 구성 시, 블록 유형별 정책 가이드를 준수하시기 바랍니다. https://docs.kakaowork.com/kakao_work/blockkit/textblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/textblock/ Text Block Text Block(텍스트 블록)은 말풍선에서 가장 기본인 텍스트를 표현하는 블록입니다. Text Block은 단독으로도 존재할 수 있지만, 레이아웃 블록을 구성하는 엘리먼트의 속성으로 사용되기도 합니다. 표Text Block 블록 유형 블록명 엘리먼트 레이아웃 블록 말풍선 Text Block O X 기능 소개 Text Block은 다음 기능을 지원합니다. 카카오워크 1.7 버전 이후부터 Text Block의 표준 포맷이 Markdown에서 다음과 같이 변경되었습니다. Plain Text 또는 Inlines 포맷으로 내용 입력 가능 Plain Text와 Inlines 모두 줄 넘김(\n) 기능 지원 표Text Block 구성 블록 포맷 설명 Text Block Plain Text 글자 수: 최대 500자(공백 및 줄바꿈 포함) Inlines 글자 수: 최대 500자(공백 및 줄바꿈 포함) styled: 텍스트 스타일 설정 link: 링크 연결 mention: 사용자 멘션 표Text Block 속성 속성 타입 필수 여부 설명 type String 필수 타입 고정값 https://docs.kakaowork.com/kakao_work/blockkit/imagelinkblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/imagelinkblock/ Image Link Block Image Link Block(이미지 링크 블록)은 말풍선 안에서 이미지를 표현하는 블록으로, 레이아웃 블록을 구성하는 엘리먼트의 속성으로 사용되기도 합니다. Image Link Block은 블록킷의 최하단에 위치할 수 있지만, Button Block 하단에는 배치하거나 Image Link Block을 연속하여 배치하는 것은 권장하지 않습니다. Image Link Block 정책에 관한 자세한 설명은 정책 및 UX 가이드를 참고하시기 바랍니다. 표Image Link Block 블록 유형 블록명 엘리먼트 레이아웃 블록 말풍선 Image Link Block O X 기능 소개 이미지 링크를 삽입하여 이미지를 구성하며, 이미지의 가로 값은 디바이스의 해상도에 따라 말풍선의 비율에 맞추어 표현됩니다. https://docs.kakaowork.com/kakao_work/blockkit/buttonblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/buttonblock/ Button Block Button Block(버튼 블록)은 말풍선에서 버튼을 표현하는 블록으로, 레이아웃 블록을 구성하는 엘리먼트의 속성으로 사용되기도 합니다. 중첩하여 사용할 경우 네 개 이상의 버튼 사용은 지양하며, 더 중요한 버튼을 상단에 위치시키는 것을 권장합니다. 버튼명은 직관적인 명칭으로 가능하면 짧은 명사형을 사용하고, 버튼의 Action Type에 따라 적당한 버튼명을 사용해야 합니다. Button Block 정책에 관한 자세한 설명은 정책 및 UX 가이드 문서를 참고하시기 바랍니다. 표Button Block 블록 유형 블록명 엘리먼트 레이아웃 블록 말풍선 Button Block O X 기능 소개 한 개의 행에 한 개의 버튼을 표현할 때 사용하며, 여러 개의 Button Block을 연속하여 쌓는 것도 가능합니다. https://docs.kakaowork.com/kakao_work/blockkit/dividerblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/dividerblock/ Divider Block Divider Block(디바이더 블록)은 말풍선 안에서 구분 선을 표현하는 블록입니다. Divider Block은 Block과 Block 사이에 자유롭게 위치할 수 있으며, Block Kit의 최상단과 최하단에 배치하는 것은 지양합니다. Divider 정책에 관한 자세한 설명은 정책 및 UX 가이드를 참고하시기 바랍니다. 표Divider Block 블록 유형 블록명 엘리먼트 레이아웃 블록 말풍선 Divider Block X X 기능 소개 Divider Block은 블록 간 구분이 필요한 경우 사용합니다. https://docs.kakaowork.com/kakao_work/blockkit/headerblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/headerblock/ Header Block Header Block(헤더 블록)은 말풍선의 최상단에만 지정할 수 있는 블록으로, 말풍선의 헤더를 색상으로 구분하여 표시할 수 있습니다. 표Header Block 블록 유형 블록명 엘리먼트 레이아웃 블록 말풍선 Header Block X X 기능 소개 말풍선에 타이틀을 지정하거나 혹은 메시지를 의도에 따라 색상으로 구분하고 싶을 때 사용합니다. Text 및 색상 그림Header Block 예시 표기능 리스트 기능 설명 Text 최대 20자까지 입력 가능 https://docs.kakaowork.com/kakao_work/blockkit/actionblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/actionblock/ Action Block Action Block(액션 블록)은 말풍선 안에서 여러 개의 버튼을 하나의 행에 표현할 수 있는 레이아웃 블록입니다. 표Action Block 블록 유형 블록명 엘리먼트 레이아웃 블록 조합된 엘리먼트 말풍선 Action Block X O Button Block 기능 소개 Action Block은 Button Block을 엘리먼트로 활용하는 레이아웃 블록입니다. 한 개의 행에 두 개 이상의 버튼(최대 세 개)을 나란히 배치하는 경우에 사용되며, 기본 속성은 Button Block과 동일합니다. https://docs.kakaowork.com/kakao_work/blockkit/descriptionblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/descriptionblock/ Description Block Description Block(디스크립션 블록)은 두 개의 Text Block이 조합된 레이아웃 블록으로, 말풍선 안에서 짧은 단어와 그에 대한 상세 정보를 설명할 때 사용합니다. 표Description Block 블록 유형 블록명 엘리먼트 레이아웃 블록 조합된 엘리먼트 말풍선 Description Block X O Text Block 기능 소개 Description Block은 일반적으로 메시지에 아이템을 리스트 형태로 표현하고 싶을 때 활용하며, 구성 요소는 다음과 같습니다. https://docs.kakaowork.com/kakao_work/blockkit/sectionblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/sectionblock/ Section Block Section Block(섹션 블록)은 Text Block(좌측)과 Image Link Block(우측)이 조합된 레이아웃 블록으로, 말풍선 안에서 텍스트와 함께 추가 정보를 이미지로 표현하고자 할 때 사용됩니다. Section Block의 엘리먼트인 Text Block과 Image Link Block의 속성과 JSON 예시는 본 가이드의 블록별 설명을 참고하시기 바랍니다. 표Section Block 블록 유형 블록명 엘리먼트 레이아웃 블록 조합된 엘리먼트 말풍선 Section Block X O Text Block, Image Link Block 기능 소개 Section Block은 줄바꿈이 가능한 Text Block의 특성을 살려 예시와 같이 프로필 카드를 구성하거나, 이미지에 대한 설명을 덧붙이는 용도로 활용할 수 있습니다. https://docs.kakaowork.com/kakao_work/blockkit/contextblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/contextblock/ Context Block Context Block(콘텍스트 블록)은 Image Link Block(좌측)과 Text Block(우측)이 조합된 레이아웃 블록으로, 말풍선 안에서 추가적인 정보를 덧붙여 표현하기 위해 사용됩니다. 안내 Context Block은 Image Link Block과 Text Block을 조합한 블록입니다. 각 블록에 대한 자세한 설명과 코드 예시는 Image Link Block과 Text Block을 참고하시기 바랍니다. 표Context Block 블록 유형 블록명 엘리먼트 레이아웃 블록 조합된 엘리먼트 말풍선 Context Block X O Text Block, Image Link Block 기능 소개 Context Block은 Section Block과는 반대로 작은 사이즈의 썸네일 이미지를 좌측에 고정으로 표시하고, 우측에 텍스트를 표시합니다. https://docs.kakaowork.com/kakao_work/blockkit/labelblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/labelblock/ Label Block Label Block(라벨 블록)은 Modal에서 앞뒤에 연속해서 표현되는 블록들의 용도를 정의하거나 설명하는 용도로 활용되는 블록으로 Modal에서만 사용할 수 있습니다. 표Label Block 블록 유형 블록명 엘리먼트 레이아웃 블록 Modal Label Block X X 기능 소개 Label Block은 다른 블록들의 용도를 정의하거나 설명하는 블록으로 다음과 같은 특징을 갖고 있습니다. Label Block에 표시되는 텍스트는 말풍선에서 활용할 수 있는 Text Block보다 작은 폰트 사이즈로 표현됩니다. https://docs.kakaowork.com/kakao_work/blockkit/inputblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/inputblock/ Input Block Input Block(인풋 블록)은 사용자가 내용을 직접 입력할 수 있는 블록으로, Modal에서만 사용할 수 있습니다. 표Input Block 블록 유형 블록명 엘리먼트 레이아웃 블록 Modal Input Block X X 기능 소개 Input Block은 사용자에게 줄바꿈을 포함하여 최대 1,000자까지의 데이터를 입력받을 수 있습니다. 필수 데이터 여부를 설정할 수 있으며, 사용자에게 기본값으로 표시될 Placeholder(플레이스홀더)도 설정할 수 있습니다. 그림Input Block 예시 표기능 리스트 기능 설명 Text 사용자가 최대 1,000자 입력 가능 https://docs.kakaowork.com/kakao_work/blockkit/selectblock/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/selectblock/ Select Block Select Block(셀렉트 블록)은 사용자가 미리 지정된 옵션들 중에서 항목을 선택할 수 있는 블록으로, Modal에서만 사용할 수 있습니다. 표Select Block 블록 유형 블록명 엘리먼트 레이아웃 블록 Modal Select Block X X 기능 소개 Select Block을 클릭하면 드롭다운 목록으로 사전에 지정한 옵션들을 화면에 표시합니다. Input Block과 동일하게 필수 데이터 여부를 설정할 수 있으며, 사용자가 옵션을 선택하기 전에 기본값으로 표시할 Placeholder(플레이스홀더)도 지정할 수 있습니다. https://docs.kakaowork.com/kakao_work/blockkit/appdix_c/ Mon, 01 Jan 0001 00:00:00 +0000 https://docs.kakaowork.com/kakao_work/blockkit/appdix_c/ Block Kit Builder Block Kit Builder(블록 킷 빌더)는 카카오워크에서 제공하는 UI 프레임워크인 Block Kit을 활용하여 조합형 말풍선 및 Modal 화면을 자유롭게 구성할 수 있도록 도와주며, JSON 코드를 쉽게 확인할 수 있는 사이트입니다. 말풍선용 블록 및 Modal 용 블록 지원(현재 말풍선용 블록 9종, Modal 용 블록 3종 지원) 카카오워크 클라이언트의 PC 및 Mobile 버전 화면 미리보기 기능 Modal 화면에서 사용자가 입력 및 선택한 데이터를 전달받는 Callback 응답 내역 확인 표Block Kit Builder 정보 명칭 링크 Block Kit Builder kakaowork.