---
title: "Composite"
slug: "ai-application-service-chatbot-composite"
updated: 2026-04-23T08:55:36Z
published: 2026-04-23T09:02:17Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://api.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Composite

<p class="platform-info type-classic-vpc">Classic/VPC 환경에서 이용 가능합니다.</p>

챗봇 답변의 응답 컴포넌트 중 Composite Component에 대해 설명합니다. 
 
Composite 컴포넌트는 다음 2가지 기본 컴포넌트로 구성됩니다. 

* [Template](#Template컴포넌트)
* [Carousel](#Carousel컴포넌트) (Composite 컴포넌트는 [Persistent Menu](#PersistentMenu컴포넌트) 컴포넌트를 포함)

위 컴포넌트는 각 특징에 맞게 챗봇의 응답을 챗봇 빌더에서 설정할 수 있으며, 챗봇 빌더를 통해 설정한 응답 결과를 JSON 형태로 반환합니다.

## Template 컴포넌트<a name="Template컴포넌트"></a>
Template 컴포넌트는 커버(Cover), 콘텐츠 테이블(Content Table), 풋 테이블(Foot Table)로 구성됩니다.

### Template 컴포넌트 응답 바디<a name="Template컴포넌트응답바디"></a>
Template 컴포넌트의 응답 바디는 다음과 같습니다.

| 필드 | 타입 | 필수 여부 | 설명 |
| --- | --- | --- | --- |
| `type` | String | - | 컴포넌트 유형<ul><li>Template 컴포넌트일 경우 2가지 기본 컴포넌트 중 `template`만 사용 가능</li></ul> |
| `title` | String | - | 컴포넌트 제목<ul><li>단문의 굵은 텍스트 (Short bold text)</li></ul> |
| `subTitle` | String | - | 하위 컴포넌트 제목<ul><li>단문의 회색 텍스트 (Short gray text)</li></ul> |
| `data` | Object | - | 템플릿(Template) 컴포넌트 구성 정보 |
| `data.cover` | Object | - | 커버(Cover) 정보 |
| `data.description` | String | - | 컴포넌트 상세 설명<ul><li>장문의 텍스트</li></ul> |
| `data.contentBackgroundImage` | String | - | 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL<ul><li>반드시 `https` 형식의 URL이어야 함</li></ul> |
| `data.contentTable` | Array | - | [contentTable 상세 정보](#Table)<ul><li>2차원 셀 배열</li><li>최대 3행까지 설정 가능</li><li>추가적인 내용은 [Basic 컴포넌트](/docs/ai-application-service-chatbot-basic) 참조</li></ul> |
| `data.footBackgroundImage` | String | - | 풋(Foot) 테이블 영역에 표시되는 배경 이미지 URL<ul><li>반드시 `https` 형식의 URL이어야 함</li></ul> |
| `data.footTable` | Array | - | [footTable 상세 정보](#Table)<ul><li>구성 요소는 `contentTable`과 동일하지만 `contentTable`이 존재해야만 표시될 수 있음</li></ul> |
| `data.footTableShowRows` | Integer | - | 최대 행 수<ul><li>행 수가 최대 값보다 많을 경우 최대 행을 표시하고 접어야 하며 확장 버튼을 추가해야 함</li><li>미설정 시 모든 행 표시</li></ul> |
| `data.action` | Action | - | 컴포넌트 액션(Action) 정보<ul><li>각 액션마다 세부 내용이 상이하므로 자세한 설명은 [Action 컴포넌트](/docs/ai-application-service-chatbot-action) 참조</li></ul> |

#### `Table` <a name="Table"></a>
`Table`에 대한 설명은 다음과 같습니다.

| 필드 | 타입 | 필수 여부 | 설명 |
| --- | --- | --- | --- |
| `rowSpan` | Integer | - | 표의 셀이 차지하는(Span) 행의 수 |
| `colSpan` | Integer | - | 표의 셀이 차지하는(Span) 열의 수 |
| `data` | Object | - | Template 컴포넌트의 `data` 영역 정보 <ul><li>자세한 내용은 [Basic 컴포넌트](/docs/ai-application-service-chatbot-basic) 참조</li><li>`text`, `image`, `button`</li></ul> |
| `data.type` | String | - | 컴포넌트 유형 |
| `data.title` | String | - | 컴포넌트 이름 |
| `data.subTitle` | String | - | 하위 컴포넌트 이름 |
| `data.data` | Object | - | 하위 컴포넌트 구성 정보 |
| `data.data.type` | String | - | 하위 컴포넌트 유형 |
| `data.data.iconUrl` | String | - | 아이콘 URL 주소 |
| `data.data.action` | Object | - | 컴포넌트 액션(Action) 정보 |
| `data.data.action.type` | String | - | 컴포넌트 액션 유형<ul><li>`postback` \| `utterance` \| `link` \| `phone` \| `welcome`<ul><li>`postback`: [Postback 컴포넌트](/docs/ai-application-service-chatbot-action#Postback컴포넌트) 참조</li><li>`utterance`: [Utterance 컴포넌트](/docs/ai-application-service-chatbot-action#Utterance컴포넌트) 참조</li><li>`link`: [Link 컴포넌트](/docs/ai-application-service-chatbot-action#Link컴포넌트) 참조</li><li>`phone`: [Phone 컴포넌트](/docs/ai-application-service-chatbot-action#Phone컴포넌트) 참조</li><li>`welcome`: [Welcome 컴포넌트](/docs/ai-application-service-chatbot-action#Welcome컴포넌트) 참조</li></ul></li></ul> |
| `data.data.action.data` | Object | -   | 컴포넌트 액션 세부 정보<ul><li>각 액션마다 세부 내용이 상이하므로 자세한 설명은 [Action 컴포넌트](/docs/ai-application-service-chatbot-action) 참조</li></ul> |


### Template 컴포넌트 응답 예시<a name="Template컴포넌트응답예시"></a>
Template 컴포넌트의 응답 예시는 다음과 같습니다.

```json
{
    "type": "template",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data":{
        "cover":{
            "contentTableShowRows": 3, 
            "contentTable":
            [ 
                "colSpan": 1,
                "rowSpan": 2,
                "data":{}
            ]
        }
    },
    "footTableShowRows":3, 
    "footBackgroundImage":"https://ssl.pstatic.net/CloudFunctions.png",
    "footTable":[] 
}
```

### Persistent Menu 컴포넌트<a name="PersistentMenu컴포넌트"></a>
고정 메뉴(Persistent Menu) 컴포넌트는 사용자가 채팅바에서 메뉴 버튼을 터치하면 표시되며, 항상 [`Open` 응답](/docs/ai-application-service-chatbot-open)에 포함됩니다. `utils`를 변경하지 않은 다른 응답에 `permanentMenu` 콘텐츠가 포함됩니다.

#### Persistent Menu 응답 바디<a name="PersistentMenu컴포넌트응답바디"></a>
Persistent Menu의 응답 바디는 다음과 같습니다.

| 필드 | 타입 | 필수 여부 | 설명 |
| --- | --- | --- | --- |
| `type` | String | - | 고정 메뉴 유형<ul><li>Template 컴포넌트일 경우 2가지 기본 컴포넌트 중 `template`만 사용 가능</li></ul> |
| `title` | String | - | 고정 메뉴 이름<ul><li>채팅바에 표시됨</li></ul> |
| `data` | Object | - | 고정 메뉴 구성 정보<ul><li>`cover` 사용하지 않음</li></ul> |
| `data.contentBackgroundImage` | String | - | 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL<ul><li>`contentTable` 내 `image` 컴포넌트가 있을 경우에만 표시</li><li>반드시 `https` 형식의 URL이어야 함</li></ul> |
| `data.contentTable` | Array | - | [contentTable 상세 정보](#contentTable)<ul><li>`footTable`은 사용되지 않음</li></ul> |

#### `contentTable` <a name="contentTable"></a>
`data.contentTable`에 대한 설명은 다음과 같습니다.

| 필드 | 타입 | 필수 여부 | 설명 |
| --- | --- | --- | --- |
| `rowSpan` | Integer | - | 표의 셀이 차지하는(Span) 행의 수 |
| `colSpan` | Integer | - | 표의 셀이 차지하는(Span) 열의 수 |
| `data` | Object | - | 컴포넌트 구성 정보<ul><li>자세한 내용은 [Basic 컴포넌트](/docs/ai-application-service-chatbot-basic) 참조 </li></ul> |
| `data.type` | String | - | 컴포넌트 유형 |
| `data.title` | String | - | 컴포넌트 이름 |
| `data.subTitle` | String | - | 하위 컴포넌트 이름 |
| `data.data` | Object | - | 하위 컴포넌트 구성 정보 |
| `data.data.type` | String | - | 하위 컴포넌트 유형 |
| `data.data.action` | Object | - | 컴포넌트 액션(Action) 정보 |
| `data.data.action.type` | String | - | 컴포넌트 액션 유형<ul><li>`postback` \| `utterance` \| `link` \| `phone` \| `welcome`<ul><li>`postback`: [Postback 컴포넌트](/docs/ai-application-service-chatbot-action#Postback컴포넌트) 참조</li><li>`utterance`: [Utterance 컴포넌트](/docs/ai-application-service-chatbot-action#Utterance컴포넌트) 참조</li><li>`link`: [Link 컴포넌트](/docs/ai-application-service-chatbot-action#Link컴포넌트) 참조</li><li>`phone`: [Phone 컴포넌트](/docs/ai-application-service-chatbot-action#Phone컴포넌트) 참조</li><li>`welcome`: [Welcome 컴포넌트](/docs/ai-application-service-chatbot-action#Welcome컴포넌트) 참조</li></ul></li></ul> |
| `data.data.action.data` | Object | - | 컴포넌트 액션 세부 정보<ul><li>각 액션마다 세부 내용이 상이하므로 자세한 설명은 [Action 컴포넌트](/docs/ai-application-service-chatbot-action) 참조</li></ul> |

#### Persistent Menu 응답 예시<a name="PersistentMenu컴포넌트응답예시"></a>
Persistent Menu의 응답 예시는 다음과 같습니다.

```json
{
    "type": "template",
    "title": "persistentMenu",
    "data": {
        "contentBackgroundImage": "url",
        "contentTable": []
    }
}
```

## Carousel 컴포넌트<a name="Carousel컴포넌트"></a>
Carousel 컴포넌트는 동일한 형식이 반복되는 캐로셀(Carousel) 답변이 구성됩니다.

### Carousel 컴포넌트 응답 바디<a name="Carousel컴포넌트응답바디"></a>
Carousel 컴포넌트의 응답 바디는 다음과 같습니다.

| 필드 | 타입 | 필수 여부 | 설명 |
| --- | --- | --- | --- |
| `type` | String | - | 컴포넌트 유형<ul><li>Carousel 컴포넌트일 경우 2가지 기본 컴포넌트 중 `carousel`만 사용 가능</li></ul> |
| `title` | String | - | 컴포넌트 제목<ul><li>단문의 굵은 텍스트 (Short bold text)</li></ul> |
| `subTitle` | String | - | 하위 컴포넌트 제목<ul><li>단문의 회색 텍스트 (Short gray text)</li></ul> |
| `data` | Object | - | 캐로셀(Carousel) 컴포넌트 구성 정보 | 
| `data.cards` | Array | - | 캐로셀을 구성하는 카드(Card) 정보<ul><li>각 카드마다 세부 내용이 상이하므로 자세한 내용은 [Basic 컴포넌트](#Basic컴포넌트), [Composite 컴포넌트](#Composite컴포넌트), [Flex 컴포넌트](#Flex컴포넌트) 참조</li></ul> |

### Carousel 컴포넌트 응답 예시<a name="Carousel컴포넌트응답예시"></a>
Carousel 컴포넌트의 응답 예시는 다음과 같습니다.

```json
{
    "type": "carousel",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data" : 
    {
        "cards": [{}]
    }
}
```