

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Amazon Connect의 UI 빌더용 UI 구성 요소 라이브러리
<a name="user-interface-component-library-sg"></a>

모든 UI 빌더 구성 요소는 [Amazon Connect UI 구성 요소 설명서에](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page) 설명되어 있습니다. 이 설명서에서는 UI 빌더에서 사용할 수 있는 개별 UI 구성 요소와 구성 방법을 보여줍니다.

**생성** 패널, 라이브러리 탭의 UI 빌더에서 **라이브러리** 구성 요소에 액세스합니다. 다음 이미지는 **라이브러리** 탭과 **컨테이너** 구성 요소의 예를 보여 줍니다.

![UI 빌더 생성 패널, 라이브러리 탭, UI 구성 요소.](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/user-interface-component-library-example.png)


## 컨테이너를 사용하여 구성 요소 이동 및 구성
<a name="user-interface-component-library-containers"></a>

컨테이너는 보기를 만드는 핵심 구성 요소입니다. UI 구성 요소(다른 컨테이너 포함)를 컨테이너로 이동하여 페이지에서 논리적이고 시각적으로 그룹화할 수 있습니다.

최상위 보기 설정을 사용자 지정할 때 페이지 콘텐츠를 비교적 일관되게 유지하려면 모든 보기에서 컨테이너를 사용하는 것이 좋습니다. 컨테이너에는 열 레이아웃도 함께 제공됩니다. 열 레이아웃을 사용하면 컨테이너 내에서 콘텐츠를 구성할 수 있습니다.

## 양식 생성
<a name="user-interface-component-library-form-section"></a>

에이전트 또는 고객이 작성하고 제출할 양식을 생성하려면 [양식](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) 구성 요소를 사용합니다. 다음 작업 중 하나를 수행할 수 있습니다.
+ UI 라이브러리에서 캔버스로 **양식** 구성 요소를 끌어서 놓습니다.
+ 또는 **템플릿** 탭에서 **양식 예제** 템플릿을 선택합니다. 양식 구성 요소를 사용합니다.

[양식](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) 구성 요소는 입력 필드를 삽입하고 **제출** 버튼을 추가할 수 있는 특수한 유형의 컨테이너입니다. 가이드와 상호 작용 중인 사용자가 **제출** 버튼을 누르면, Amazon Connect는 양식 필드에 입력된 모든 값을 흐름으로 전달합니다. 해당 흐름 단계에서 [AWS Lambda 함수](invoke-lambda-function-block.md) 블록을 활용하여 자체 비즈니스 로직을 커스터마이징하고, 서드파티 시스템으로 데이터를 전송하거나 검색할 수 있습니다.

다음 이미지는 자리 표시자 레이블과 제출 버튼이 있는 **양식** 구성 요소의 예를 보여 줍니다.

![자리 표시자 레이블과 제출 버튼이 있는 양식 구성 요소입니다.](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)
