Flexible Template 개요

Flexible Template은 레이아웃을 사용자가 지정할 수 있는 메시지이다. CSS Flexbox(CSS Flexible Box)의 권고안에 따라 레이아웃을 자유롭게 사용자 지정할 수 있다. ‘Flex container’는 Flexible Template의 ‘박스 컴포넌트’를, ‘Flex item’은 Flexible Template의 ‘컴포넌트’를 의미한다.

Flexible Template 객체 형식 {#flex-format}

다른 메시지 형식과 마찬가지로 Flexible Template은 JSON 형식으로 작성한다. 봇에서 Flexible Template을 보내는 방법에 대한 자세한 내용은 다음 페이지를 참고한다.

  • 구성
  • 참고사항

Request {#flex-request}

Request Content {#flex-request-parameter}

Common {#flex-request-common}

파라미터타입필수 여부설명
typestringYflex 로 고정
altTextstringY메시지 목록과 푸시에 표시되는 대체 텍스트.
대체 텍스트는 다국어로 전송할 수 있다.
최대 글자수: 400자
contentsobjectYFlexible Template 컨테이너

multi language {#flex-request-multi}

파라미터타입필수 여부설명
i18nAltTexts[]arrayN다국어 대체 텍스트 목록
i18nAltTexts[].languagestringY다국어 언어 코드
• ko_KR • ja_JP • zh_CN • zh_TW • en_US
i18nAltTexts[].altTextstringY다국어 대체 텍스트
최대 글자수: 400자

Request Example

Flexible Template structure {#flex-template-structure-example}

{  "content": {    "type": "flex",    "altText": "this is a flexible template",    "contents": {      "type": "bubble",      "body": {        "type": "box",        "layout": "vertical",        "contents": [          {            "type": "text",            "text": "hello"          },          {            "type": "text",            "text": "world"          }        ]      }    }  }}

Multi language (altText) {#flex-multilang-alttext-example}

{  "content": {    "type": "flex",    "altText": "Hello",    "i18nAltTexts":[{      "language": "ja_JP",      "altText": "こんにちは"    },{      "language": "ko_KR",      "altText": "안녕하세요"    }],    "contents": {      "type": "bubble",      "size": "mega",      "hero": {        "type": "box",        "layout": "vertical",        "contents": [          {            "type": "text",            "text": "YOU ARE INVITED!",            "size": "xl",            "color": "#ffffff",            "weight": "bold",            "align": "center",            "wrap": true          }        ],        "backgroundColor": "#81DBA0",        "paddingAll": "15px"      }    }  }}

Flexible Template 컨테이너 작성 {#using-flex-simulator}

Flexible Template 컨테이너에 사용할 JSON 은 Flexible Template Simulator에서 생성한다. Flexible Template Simulator을 사용하면 실제로 메시지를 보내지 않고도 레이아웃을 확인하거나 컨테이너에 사용할 JSON을 생성할 수 있다.

Flexible Template Simulator의 기능 {#what-is-flex-template}

  • CSS Flexbox의 권고안에 따라 복잡한 메시지 레이아웃을 만들 수 있다.
  • 하나의 메시지 버블뿐만 아니라 캐러셀 형태로 여러 개의 버블을 보낼 수도 있다. 사용자는 캐러셀 형태의 버블들을 가로로 스크롤할 수 있다.
  • 텍스트 방향을 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 설정할 수 있다.

Flexible Template Simulator의 구조 {#flex-simulator-function}

Flex Message Simulator는 세 부분으로 구성된다.

  • 미리 보기 영역: 트리 뷰 영역과 속성 영역에서 입력한 데이터를 기반으로 하는 Flex Message가 표시되는 부분입니다.
  • 트리 뷰 영역: Flex Message 의 데이터 구조를 편집하거나 표시하는 부분.
  • 속성 영역: Flex Message 빌드에 필요한 데이터를 편집하는 부분입니다. 이 영역에서 입력한 데이터를 기반으로 Flex Message를 생성합니다.

Flexible Template Simulator로 컨테이너 JSON 생성 {#how-to-use-flex-simulator}

  1. https://flex-simulator.worksmobile.com/ 에 접속한다.
  2. [새로 만들기] 를 클릭하여 [Bubble] 또는 [Carousel] 을 선택하여 컨테이너 레이아웃을 선택한다. 샘플로 제공하는 레이아웃을 사용할 경우, [샘플] 을 클릭하여 레이아웃을 선택한다.
  3. 트리뷰 영역에서 컨테이너 노드의 header / hero / footer 선택한 후, [+] 을 클릭하여 객체를 추가한다.
  4. 객체를 클릭하여 오른쪽 속성영역에서 객체 속성을 지정한다.
  5. 레이아웃을 완성할때까지 3-4 과정을 반복한다.
  6. 화면 상단의 [JSON으로 보기] 를 클릭한다.
  7. [복사] 를 클릭한다.
  8. 메시지 전송 API 의 request body를 아래와 같이 구성하고, content.contents {} 아래에 붙여넣기한다.
{  "content": {    "type": "flex",    "altText": "메시지 목록과 푸시에 표시되는 대체 텍스트",    "contents": {           여기에 붙여넣기 수행        }  }}