

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

# step-by-step 가이드의 리소스에 Amazon Connect의 UI 빌더 사용
<a name="no-code-ui-builder"></a>

Amazon Connect의 UI 빌더를 사용하여 step-by-step 가이드에 사용되는 보기 리소스를 생성할 수 있습니다. UI 빌더를 사용하면 다음을 수행할 수 있습니다.
+ UI 구성 요소를 캔버스로 끌어서 놓습니다.
+ 레이아웃을 정렬합니다.
+ 각 구성 요소의 속성과 스타일을 편집합니다.

다음 이미지는 UI 빌더 페이지의 예를 보여줍니다.

![UI 빌더 사용자 인터페이스입니다.](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-updates.png)


1. UI 구성 요소 라이브러리에서 선택하거나 사용 가능한 템플릿 중 하나를 사용하는 **생성** 패널입니다.

1. 구성 요소는 축소 가능한 컨테이너 내에서 그룹화됩니다. 이러한 구성 요소를 보기 리소스의 캔버스로 끌어서 놓습니다.

1. 보기 리소스의 캔버스입니다.

1. **사용자 지정** 패널 및 전역 설정 아이콘입니다. 여기서 열, 정렬 및 색상과 같은 페이지의 전역 속성을 설정합니다. 캔버스에 있는 개별 구성 요소에 대한 속성을 설정하는 위치이기도 합니다.

   다음 이미지는 **주소** 구성 요소에 대한 **속성** 탭의 예를 보여 줍니다. 동적 아이콘(번개 모양)을 선택하면 런타임에 필드가 채워집니다.  
![사용자 지정 패널, 속성 탭, 동적 아이콘입니다.](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties.png)

## UI 빌더 액세스
<a name="no-code-ui-builder-how-to-access"></a>

1. https://{{instance name}}.my.connect.aws/의 Connect Customer 관리자 웹 사이트에 로그인합니다. 관리자 계정 또는 보안 프로필에서 **채널 및 흐름 - 보기** 권한이 있는 계정을 사용합니다.

1.  Connect Customer 관리자 웹 사이트에서 **UI 관리를** 선택합니다.

1. **보기 생성을** 선택합니다. **뷰 생성** 대화 상자에서 뷰의 이름을 지정하고 **용도 유형을** 선택합니다. 뷰에는 두 가지 용도가 있습니다.
   + **가이드 보기**: 통합 인터페이스에서 연락처별 또는 타사 데이터에 액세스하기 위해 에이전트, 최종 고객 또는 관리자에게 표시할 수 있는 단일 또는 다단계 워크플로를 구성하는 데 사용됩니다.
   + **Workspace 보기**: 홈 페이지와 같은 Workspace 페이지를 빌드하는 데 사용되는 이러한 보기는 고객 응대 처리와 관계없이 일반 인터페이스 구성 요소와 기능을 제공합니다.

1. UI 빌더 페이지가 나타납니다. 템플릿으로 빠르게 시작하거나 처음부터 뷰를 빌드합니다.

1. **새로 생성**을 선택합니다. 다음 이미지와 같이 빈 UI 빌더 페이지가 나타납니다.  
![빈 UI 빌더 페이지.](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-blank-page.png)