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

페이지 이동경로

Section Block

Section Block(섹션 블록)은 Text Block(좌측)과 Image Link Block(우측)이 조합된 레이아웃 블록으로, 말풍선 안에서 텍스트와 함께 추가 정보를 이미지로 표현하고자 할 때 사용됩니다. Section Block의 엘리먼트인 Text BlockImage Link Block의 속성과 JSON 예시는 본 가이드의 블록별 설명을 참고하시기 바랍니다.

Section Block
블록 유형 블록명 엘리먼트 레이아웃 블록 조합된 엘리먼트
말풍선 Section Block X O Text Block, Image Link Block

기능 소개

Section Block은 줄바꿈이 가능한 Text Block의 특성을 살려 예시와 같이 프로필 카드를 구성하거나, 이미지에 대한 설명을 덧붙이는 용도로 활용할 수 있습니다. 연속하여 Section Block을 쌓는 경우에는 아이템 리스트와 같이 표현할 수도 있습니다.

Section Block 구성과 블록 조합 예시 그림Section Block 구성과 블록 조합 예시

Section Block 구성
구성 설명
Text(내용) 2줄 이상으로 표현되는 길이일 때, 이미지 고정 폭을 제외한 영역에 표시
Image(이미지) 우측 상단에 48px*48px 사이즈로 고정되어 표시

블록 속성

안내
카카오워크 1.7 버전 이후부터 Section Block의 표준 형식이 다음과 같이 변경되었습니다.
블록 속성
속성 타입 필수 여부 설명
type String 필수 타입 고정값
- section으로 고정
Object 필수 Text Block을 참고하여 작성
type String 필수 타입 고정값
- text로 고정
text String 필수 관련 내용
Array 선택 텍스트에 스타일을 적용할 때 사용
type String 필수 다음의 속성으로 구성
styled: Bold, Strike, Italic, Color 등의 스타일 속성
link: 링크 속성
text String 필수 스타일 또는 링크를 적용할 텍스트
bold Boolean 선택 굵은 글씨체
true: 굵은 글씨체 적용
false(기본값): 굵은 글씨체 미적용
italic Boolean 선택 기울어진 글씨체
true: 기울기 글씨체 적용
false(기본값): 기울기 글씨체 미적용
strike Boolean 선택 취소선
true: 취소선 적용
false(기본값): 취소선 미적용
color String 선택 글자 색상
default(기본값): 검정색
red: 빨간색
blue: 파란색
grey: 회색
url String 선택 연결할 링크 주소
- link 속성을 사용 시 필수로 지정
Object 필수 Image Link Block을 참고하여 작성
type String 필수 타입 고정 값
url String 필수 이미지 URL
안내
content 작성 시 Text Block을 참고하여 작성하시기 바랍니다.

코드예제Section Block Sample Code

{
   "type":"section",
   "content":{
      "type":"text",
      "text":"트럼프\n대통령\n_백악관_",
      "inlines":[
         {
            "type":"styled",
            "text":"트럼프\n",
            "bold":true
         },
         {
            "type":"styled",
            "text":"대통령\n"
         },
         {
            "type":"styled",
            "text":"백악관",
            "italic":false
         }
      ]
   },
   "accessory":{
      "type":"image_link",
      "url":"https://something.storage.host/upload/path/filename"
   }
}

이 문서가 만족스러운 이유를 알려주세요.
이 문서에 아쉬운 점을 알려주세요.
평가해주셔서 감사합니다.

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