--- title: "Composite" slug: "ai-application-service-chatbot-composite" updated: 2026-09-17T09:15:53Z published: 2026-09-17T09:15:53Z canonical: "api.ncloud-docs.com/ai-application-service-chatbot-composite" --- > ## 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 Classic/VPC 환경에서 이용 가능합니다. 챗봇 답변의 응답 컴포넌트 중 Composite Component에 대해 설명합니다. Composite 컴포넌트는 다음 2가지 기본 컴포넌트로 구성됩니다. - [Template](/docs/ai-application-service-chatbot-composite#Template%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) - [Carousel](/docs/ai-application-service-chatbot-composite#Carousel%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) (Composite 컴포넌트는 [Persistent Menu](/docs/ai-application-service-chatbot-composite#PersistentMenu%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 컴포넌트를 포함) 위 컴포넌트는 각 특징에 맞게 챗봇의 응답을 챗봇 빌더에서 설정할 수 있으며, 챗봇 빌더를 통해 설정한 응답 결과를 JSON 형태로 반환합니다. ## Template 컴포넌트 Template 컴포넌트는 커버(Cover), 콘텐츠 테이블(Content Table), 풋 테이블(Foot Table)로 구성됩니다. ### Template 컴포넌트 응답 바디 Template 컴포넌트의 응답 바디는 다음과 같습니다. | 필드 | 타입 | 필수 여부 | 설명 | | --- | --- | --- | --- | | `type` | String | - | 컴포넌트 유형 - Template 컴포넌트일 경우 2가지 기본 컴포넌트 중 `template`만 사용 가능 | | `title` | String | - | 컴포넌트 제목 - 단문의 굵은 텍스트 (Short bold text) | | `subTitle` | String | - | 하위 컴포넌트 제목 - 단문의 회색 텍스트 (Short gray text) | | `data` | Object | - | 템플릿(Template) 컴포넌트 구성 정보 | | `data.cover` | Object | - | 커버(Cover) 정보 | | `data.description` | String | - | 컴포넌트 상세 설명 - 장문의 텍스트 | | `data.contentBackgroundImage` | String | - | 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL - 반드시 `https` 형식의 URL이어야 함 | | `data.contentTable` | Array | - | [contentTable 상세 정보](/docs/ai-application-service-chatbot-composite#Table) - 2차원 셀 배열 - 최대 3행까지 설정 가능 - 추가적인 내용은 [Basic 컴포넌트](/docs/ai-application-service-chatbot-basic) 참조 | | `data.footBackgroundImage` | String | - | 풋(Foot) 테이블 영역에 표시되는 배경 이미지 URL - 반드시 `https` 형식의 URL이어야 함 | | `data.footTable` | Array | - | [footTable 상세 정보](/docs/ai-application-service-chatbot-composite#Table) - 구성 요소는 `contentTable`과 동일하지만 `contentTable`이 존재해야만 표시될 수 있음 | | `data.footTableShowRows` | Integer | - | 최대 행 수 - 행 수가 최대 값보다 많을 경우 최대 행을 표시하고 접어야 하며 확장 버튼을 추가해야 함 - 미설정 시 모든 행 표시 | | `data.action` | Action | - | 컴포넌트 액션(Action) 정보 - 각 액션마다 세부 내용이 상이하므로 자세한 설명은 [Action 컴포넌트](/docs/ai-application-service-chatbot-action) 참조 | #### `Table` `Table`에 대한 설명은 다음과 같습니다. | 필드 | 타입 | 필수 여부 | 설명 | | --- | --- | --- | --- | | `rowSpan` | Integer | - | 표의 셀이 차지하는(Span) 행의 수 | | `colSpan` | Integer | - | 표의 셀이 차지하는(Span) 열의 수 | | `data` | Object | - | Template 컴포넌트의 `data` 영역 정보 - 자세한 내용은 [Basic 컴포넌트](/docs/ai-application-service-chatbot-basic) 참조 - `text`, `image`, `button` | | `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 | - | 컴포넌트 액션 유형 - `postback` \| `utterance` \| `link` \| `phone` \| `welcome` - `postback`: [Postback 컴포넌트](/docs/ai-application-service-chatbot-action#Postback%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `utterance`: [Utterance 컴포넌트](/docs/ai-application-service-chatbot-action#Utterance%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `link`: [Link 컴포넌트](/docs/ai-application-service-chatbot-action#Link%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `phone`: [Phone 컴포넌트](/docs/ai-application-service-chatbot-action#Phone%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `welcome`: [Welcome 컴포넌트](/docs/ai-application-service-chatbot-action#Welcome%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 | | `data.data.action.data` | Object | - | 컴포넌트 액션 세부 정보 - 각 액션마다 세부 내용이 상이하므로 자세한 설명은 [Action 컴포넌트](/docs/ai-application-service-chatbot-action) 참조 | ### Template 컴포넌트 응답 예시 Template 컴포넌트의 응답 예시는 다음과 같습니다. ``` { "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 컴포넌트 고정 메뉴(Persistent Menu) 컴포넌트는 사용자가 채팅바에서 메뉴 버튼을 터치하면 표시되며, 항상 [`Open` 응답](/docs/ai-application-service-chatbot-open)에 포함됩니다. `utils`를 변경하지 않은 다른 응답에 `permanentMenu` 콘텐츠가 포함됩니다. #### Persistent Menu 응답 바디 Persistent Menu의 응답 바디는 다음과 같습니다. | 필드 | 타입 | 필수 여부 | 설명 | | --- | --- | --- | --- | | `type` | String | - | 고정 메뉴 유형 - Template 컴포넌트일 경우 2가지 기본 컴포넌트 중 `template`만 사용 가능 | | `title` | String | - | 고정 메뉴 이름 - 채팅바에 표시됨 | | `data` | Object | - | 고정 메뉴 구성 정보 - `cover` 사용하지 않음 | | `data.contentBackgroundImage` | String | - | 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL - `contentTable` 내 `image` 컴포넌트가 있을 경우에만 표시 - 반드시 `https` 형식의 URL이어야 함 | | `data.contentTable` | Array | - | [contentTable 상세 정보](/docs/ai-application-service-chatbot-composite#contentTable) - `footTable`은 사용되지 않음 | #### `contentTable` `data.contentTable`에 대한 설명은 다음과 같습니다. | 필드 | 타입 | 필수 여부 | 설명 | | --- | --- | --- | --- | | `rowSpan` | Integer | - | 표의 셀이 차지하는(Span) 행의 수 | | `colSpan` | Integer | - | 표의 셀이 차지하는(Span) 열의 수 | | `data` | Object | - | 컴포넌트 구성 정보 - 자세한 내용은 [Basic 컴포넌트](/docs/ai-application-service-chatbot-basic) 참조 | | `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 | - | 컴포넌트 액션 유형 - `postback` \| `utterance` \| `link` \| `phone` \| `welcome` - `postback`: [Postback 컴포넌트](/docs/ai-application-service-chatbot-action#Postback%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `utterance`: [Utterance 컴포넌트](/docs/ai-application-service-chatbot-action#Utterance%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `link`: [Link 컴포넌트](/docs/ai-application-service-chatbot-action#Link%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `phone`: [Phone 컴포넌트](/docs/ai-application-service-chatbot-action#Phone%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 - `welcome`: [Welcome 컴포넌트](/docs/ai-application-service-chatbot-action#Welcome%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 | | `data.data.action.data` | Object | - | 컴포넌트 액션 세부 정보 - 각 액션마다 세부 내용이 상이하므로 자세한 설명은 [Action 컴포넌트](/docs/ai-application-service-chatbot-action) 참조 | #### Persistent Menu 응답 예시 Persistent Menu의 응답 예시는 다음과 같습니다. ``` { "type": "template", "title": "persistentMenu", "data": { "contentBackgroundImage": "url", "contentTable": [] } } ``` ## Carousel 컴포넌트 Carousel 컴포넌트는 동일한 형식이 반복되는 캐로셀(Carousel) 답변이 구성됩니다. ### Carousel 컴포넌트 응답 바디 Carousel 컴포넌트의 응답 바디는 다음과 같습니다. | 필드 | 타입 | 필수 여부 | 설명 | | --- | --- | --- | --- | | `type` | String | - | 컴포넌트 유형 - Carousel 컴포넌트일 경우 2가지 기본 컴포넌트 중 `carousel`만 사용 가능 | | `title` | String | - | 컴포넌트 제목 - 단문의 굵은 텍스트 (Short bold text) | | `subTitle` | String | - | 하위 컴포넌트 제목 - 단문의 회색 텍스트 (Short gray text) | | `data` | Object | - | 캐로셀(Carousel) 컴포넌트 구성 정보 | | `data.cards` | Array | - | 캐로셀을 구성하는 카드(Card) 정보 - 각 카드마다 세부 내용이 상이하므로 자세한 내용은 [Basic 컴포넌트](/docs/ai-application-service-chatbot-composite#Basic%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8), [Composite 컴포넌트](/docs/ai-application-service-chatbot-composite#Composite%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8), [Flex 컴포넌트](/docs/ai-application-service-chatbot-composite#Flex%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) 참조 | ### Carousel 컴포넌트 응답 예시 Carousel 컴포넌트의 응답 예시는 다음과 같습니다. ``` { "type": "carousel", "title": "optional, short bold text", "subTitle": "optional, short gray text", "data" : { "cards": [{}] } } ```