Flexible Template 구성

Flexible Template은 컨테이너(container), 블록(block), 컴포넌트(component)라는 3개의 데이터 계층 요소로 구성되어 있다. 이 페이지에서는 Flexible Template을 구성하는 요소를 예제와 함께 설명한다.

컨테이너 {#container}

컨테이너는 Flexible Template의 최상위 계층을 구성하는 요소이다. 컨테이너는 다음과 같은 타입으로 지정할 수 있다.

버블 {#container-bubble}

버블(bubble)은 하나의 버블로 구성된 컨테이너이다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Bubble 문서를 참고한다.

캐러셀 {#container-carousel}

캐러셀(carousel)은 여러 개의 버블로 구성된 컨테이너이다. 캐러셀을 좌우로 스크롤하여 버블을 확인할 수 있다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Carousel 문서를 참고한다.

블록 {#block}

블록(block)은 버블을 구성하는 요소이다. 지정할 수 있는 블록 타입은 다음과 같다.

블록 타입은 버블의 위에서부터 header, hero, body, footer 순서로 표시된다. 각 블록 타입은 버블에서 한 번만 지정할 수 있으며, 원하지 않는 블록 타입은 생략할 수 있다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Bubble 문서에서 header, hero, body, footer 속성을 참고한다.

컴포넌트 {#component}

컴포넌트(component)는 블록을 구성하는 요소이다. Flexible Template에서 사용할 수 있는 컴포넌트 타입은 다음과 같다.

박스 {#box}

박스(box)는 메시지의 레이아웃을 정의하는 컴포넌트이다.

박스 하위에 박스, 버튼 또는 이미지 등 다양한 컴포넌트들을 추가할 수 있다. 박스 하위에 추가된 컴포넌트(자식 요소)는 자신의 속성과 상위 박스의 속성에 따라 레이아웃이 결정된다. 레이아웃에 대한 자세한 내용은 Flexible Template Box 문서를 참고한다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Box 문서를 참고한다.

버튼 {#button}

버튼(button)은 버튼을 표시하는 컴포넌트이다.

해당 버튼을 누르면 버튼에 설정된 액션이 실행된다. 버튼에 설정할 수 있는 액션은 Action Objects 문서를 참고한다.

버튼은 3가지 스타일로 지정할 수 있으며, 스타일에 따라 버튼의 색상을 변경할 수 있다.

JSON 스키마에 대한 자세한 내용은 Flexible Template API의 Button 문서를 참고한다.

이미지 {#image}

이미지(image)는 이미지 파일을 표시하는 컴포넌트이다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Image 문서를 참고한다.

아이콘 {#icon}

아이콘(icon)은 인접한 텍스트를 꾸미기 위해 아이콘을 표시하는 컴포넌트이다.

아이콘은 베이스라인 박스 baseline box에만 추가할 수 있다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Icon 문서를 참고한다.

텍스트 {#text}

텍스트(text)는 단일 행의 문자열을 표시하는 컴포넌트이다. 문자열의 색상, 크기, 두께를 지정할 수 있다

텍스트 줄 바꿈 {#text-wrap}

문자열의 너비를 초과하는 부분은 기본적으로 말줄임(...) 처리된다.

위 Flexible Template은 아래의 JSON 데이터를 사용하여 구현할 수 있다.

{  "type": "bubble",  "body": {    "type": "box",    "layout": "horizontal",    "contents": [      {        "type": "text",        "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!"      }    ]  }}

wrap 속성을 true로 설정하면 문자열을 자동 줄 바꿈 처리할 수 있다. 또는 wrap 속성을 true로 설정한 다음 개행 문자(＼n)를 입력하여 문자열을 직접 개행할 수 있다.

참고

• 문자열의 줄 바꿈은 기기의 크기, 해상도 등에 따라 달라질 수 있다.

위 Flexible Template은 아래의 JSON 데이터를 사용하여 구현할 수 있다.

{  "type": "bubble",  "body": {    "type": "box",    "layout": "horizontal",    "contents": [      {        "type": "text",        "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",        "wrap": true      }    ]  }}

JSON 스키마에 대한 자세한 내용은 Text 문서를 참고한다.

스팬 {#span}

스팬(span)은 단일 행에서 서로 다른 디자인의 여러 문자열을 표시하는 컴포넌트이다. 문자열의 색상, 크기, 두께, 스타일을 지정할 수 있다. 스팬은 Text 컴포넌트의 contents 속성에 추가할 수 있다.

JSON 스키마에 대한 자세한 내용은 Flexible Template API의 Span 문서를 참고한다.

구분선 {#separator}

구분선(separator)은 박스 내에서 구분선을 표시하는 컴포넌트이다. 수평 박스(horizontal box)에 추가되면 세로 구분선이 그려지고, 수직 박스(vertical box)에 추가되면 가로 구분선이 그려진다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Separator 문서를 참고한다.

필러 {#filler}

필러(filler)는 빈 공간을 만드는 데 사용되는 컴포넌트이다. 박스 내 원하는 위치에 필러를 삽입하여 컴포넌트 사이, 앞 또는 뒤에 빈 공간을 만들 수 있다.

아래는 필러를 사용하여 이미지 사이에 빈 공간을 구현한 예시이다.

JSON 스키마에 대한 자세한 내용은 Flexible Template의 Filler 문서를 참고한다.