프로젝트를 위한 사용자 정의 인터페이스 생성

인터페이스를 사용하면 EKB 프로젝트에 대해 사용자 정의된 앱 유형 경험을 만들 수 있습니다. 기본 채팅 인터페이스 대신 다양한 페이지 유형, 사용자 정의 레이아웃 및 맞춤 구성으로 멀티페이지 애플리케이션을 구축할 수 있습니다.

인터페이스는 다음을 제공합니다:

• 사용자 정의 사용자 경험: 용도에 맞는 인터페이스로 기본 채팅 모드를 대체
• 멀티페이지 애플리케이션: 각각 다른 기능을 수행하는 여러 페이지로 인터페이스 생성
• 유연한 페이지 유형: 채팅, 스마트 테이블, 지식 베이스, 작업 또는 사용자 정의 페이지 중 선택
• 게시 및 공유: 인터페이스를 게시하고 프로젝트의 기본값으로 설정
• 전문적인 브랜딩: 외부 사용자를 위한 브랜딩된 인터페이스 생성

주요 개념

인터페이스

인터페이스는 함께 완전한 사용자 경험을 구성하는 페이지 모음입니다. 각 프로젝트는 여러 인터페이스를 가질 수 있지만, 하나만 기본값으로 설정할 수 있습니다.

인터페이스 속성:

• 이름: 인터페이스의 표시 이름
• 설명: 인터페이스 목적에 대한 선택적 설명
• 게시됨: 인터페이스가 게시되어 사용자에게 제공되는지 여부
• 기본값: 이 인터페이스가 프로젝트의 기본 인터페이스인지 여부

페이지

페이지는 인터페이스 내의 단일 화면입니다. 페이지는 각각 고유한 구성 옵션을 가진 다양한 유형이 될 수 있습니다.

페이지 유형:

• 채팅 페이지: 에이전트와 인터랙티브한 채팅 인터페이스
• 스마트 테이블 페이지: 필터링, 편집 및 뷰가 있는 데이터 테이블
• 지식 베이스 페이지: 문서 검색 및 탐색
• 작업 페이지: 도구 및 워크플로우 탐색 및 실행
• 사용자 정의 페이지: 사용자 정의 요소를 사용한 드래그 앤 드롭 페이지 빌더

페이지 구성

각 페이지 유형은 동작과 모양을 제어하는 특정 구성 옵션을 가지고 있습니다.

시작하기

첫 번째 인터페이스 만들기

1. 인터페이스로 이동

   • 프로젝트로 이동
   • 프로젝트 탐색에서 인터페이스를 클릭

2. 새 인터페이스 만들기

   • + 인터페이스 만들기를 클릭
   • 기본 채팅 페이지가 포함된 새 인터페이스가 생성됩니다
   • 인터페이스 빌더로 리디렉션됩니다

3. 인터페이스 구성

   • 인터페이스 빌더를 사용하여 페이지를 추가하고, 설정을 구성하고, 레이아웃을 사용자 정의합니다
   • 자세한 내용은 인터페이스 빌더 섹션을 참조하세요

기본 인터페이스 설정

1. 인터페이스 목록에서

   • 인터페이스 페이지로 이동
   • 기본값으로 설정할 인터페이스를 찾습니다
   • 기본값으로 설정을 클릭

2. 인터페이스 빌더에서

   • 기본값으로 설정할 인터페이스를 엽니다
   • 인터페이스 설정을 사용하여 기본값으로 표시

참고: 한 번에 하나의 인터페이스만 기본값이 될 수 있습니다. 새 기본값을 설정하면 이전 기본값이 자동으로 해제됩니다.

인터페이스 빌더

인터페이스 빌더는 인터페이스를 만들고 구성하는 곳입니다. 다음을 제공합니다:

• 페이지 관리: 페이지 추가, 편집, 삭제 및 순서 변경
• 페이지 구성: 각 페이지의 설정 및 동작 구성
• 미리보기: 게시 전 인터페이스 미리보기
• 게시: 인터페이스를 사용 가능하게 게시

빌더에 액세스

1. 인터페이스 목록에서 인터페이스를 클릭합니다
2. 또는 열기를 클릭하여 게시된 인터페이스를 봅니다

인터페이스 빌더 레이아웃

빌더에는 세 가지 주요 영역이 있습니다:

1. 사이드바: 페이지 목록 및 구성 패널
2. 캔버스: 현재 페이지의 미리보기
3. 구성 패널: 선택된 페이지의 설정

페이지 유형

채팅 페이지

채팅 페이지는 사용자가 AI 에이전트와 대화할 수 있는 인터랙티브한 채팅 인터페이스를 제공합니다.

구성 옵션:

• 에이전트 선택:

  • 기본 에이전트: 채팅의 기본 에이전트를 설정
  • 단일 에이전트 모드: 하나의 에이전트만 표시 (에이전트 선택기 숨김)
  • 활성화된 에이전트: 사용 가능한 에이전트 ID 화이트리스트
  • 표시 유형: '간단' 또는 '상세' 채팅 목록 표시 중 선택

• 채팅 설정:

  • 푸터 숨김: 채팅 푸터를 숨김
  • 메타데이터: 채팅 세션에 전달할 사용자 정의 메타데이터

사용 사례:

• 고객 지원 챗봇
• 인터랙티브 Q&A 인터페이스
• 에이전트별 채팅 인터페이스

스마트 테이블 페이지

스마트 테이블 페이지는 고급 필터링, 정렬 및 편집 기능이 있는 데이터 테이블을 표시합니다.

뷰 유형:

1. 테이블 뷰: 행과 열이 있는 표준 데이터 테이블

   • 도구 모음 숨김: 테이블 도구 모음을 숨김
   • 읽기 전용: 테이블을 읽기 전용으로 설정

2. 리뷰 뷰: 데이터 검증을 위한 리뷰 인터페이스

   • 사전 설정 필터: 리뷰 뷰에 사전 구성된 필터
   • 필터 숨김: 필터 컨트롤을 숨김
   • 기본 편집 모드: 편집 모드로 시작

3. 대시보드 뷰: 차트 및 지표가 있는 분석 대시보드

   • 대시보드 뷰 ID: 표시할 대시보드 뷰의 ID
   • 기간 선택기 숨김: 기간 선택기를 숨김
   • 기본 기간: 대시보드의 기본 기간

탭 지원:

스마트 테이블 페이지에는 각각 다른 테이블이나 뷰를 표시하는 여러 탭이 있을 수 있습니다:

• 테이블 탭: 각 탭이 다른 스마트 테이블을 표시
• 뷰 탭: 각 탭이 같은 테이블의 다른 뷰(테이블, 리뷰, 대시보드)를 표시
• 탭 구성: 각 탭을 독립적으로 구성

구성 단계:

1. 표시할 스마트 테이블을 선택합니다
2. 뷰 유형(테이블, 리뷰 또는 대시보드)을 선택합니다
3. 뷰별 설정을 구성합니다
4. 필요한 경우 탭을 추가합니다(멀티테이블 또는 멀티뷰 페이지의 경우)

사용 사례:

• 데이터 관리 인터페이스
• 검증 및 승인 워크플로우
• 분석 대시보드
• 멀티테이블 데이터 뷰

지식 베이스 페이지

지식 베이스 페이지는 문서 검색 및 탐색 기능을 제공합니다.

구성 옵션:

• 검색 활성화: 검색 기능 활성화/비활성화
• 카테고리 활성화: 문서 카테고리 표시/숨김

사용 사례:

• 문서 라이브러리 인터페이스
• 지식 저장소
• 도움말 센터

작업 페이지

작업 페이지를 통해 사용자는 도구 및 워크플로우를 탐색하고 실행할 수 있습니다.

표시 모드:

1. 다중 작업 모드: 그리드 또는 목록에 여러 작업을 표시

   • 검색 표시: 검색 기능 활성화
   • 뷰 모드: '그리드' 또는 'list' 표시 중 선택
   • 도구 모음 숨김: 작업 도구 모음을 숨김
   • 필터링 활성화: 작업 필터링 활성화
   • 기본 필터: 적용할 기본 필터
   • 허용된 작업: 표시할 작업 flow_id 화이트리스트

2. 단일 작업 모드: 하나의 작업을 양식으로 표시

   • 선택된 작업 ID: 표시할 특정 작업의 flow_id
   • 양식 헤더 숨김: 작업 제목/설명을 숨김
   • 자동 실행: 모든 필수 필드에 기본값이 있으면 페이지 로드 시 자동 실행

구성 단계:

1. 표시 모드(다중 또는 단일)를 선택합니다
2. 모드별 설정을 구성합니다
3. 허용된 작업을 선택합니다(화이트리스트를 사용하는 경우)

사용 사례:

• 워크플로우 실행 인터페이스
• 도구 라이브러리
• 단일 작업 양식
• 프로세스 자동화 인터페이스

사용자 정의 페이지

사용자 정의 페이지는 드래그 앤 드롭 요소를 사용하여 처음부터 페이지를 구축할 수 있게 합니다.

사용 가능한 요소:

데이터 요소:

• 그리드: 데이터 그리드 표시
• 차트: 차트 시각화
• 숫자: 숫자 표시
• 필터: 필터 컨트롤

UI 요소:

• 텍스트: 텍스트 표시
• 버튼: 인터랙티브 버튼
• 구분선: 시각적 구분선

인터랙티브 요소:

• 레코드 피커: 레코드 선택 구성 요소
• 필드: 양식 필드

사용자 정의 페이지 구축:

1. 요소 추가: 팔레트에서 요소를 캔버스로 드래그
2. 요소 위치 지정: 클릭하고 드래그하여 요소 배치
3. 요소 구성: 요소를 선택하여 설정 구성
4. 저장: 변경 사항 저장

사용 사례:

• 사용자 정의 대시보드
• 양식 인터페이스
• 데이터 시각화 페이지
• 브랜딩된 랜딩 페이지

페이지 관리

페이지 추가

1. 인터페이스 빌더에서 + 페이지 추가를 클릭합니다
2. 페이지 템플릿을 선택합니다:
   • 채팅 페이지
   • 스마트 테이블
   • 지식 베이스
   • 작업
   • 사용자 정의 페이지
3. 페이지 설정을 구성합니다
4. 페이지가 인터페이스에 추가됩니다

페이지 편집

1. 사이드바에서 페이지를 선택합니다
2. 구성 패널에서 페이지 설정을 구성합니다
3. 변경 사항은 자동으로 저장됩니다

페이지 순서 변경

1. 페이지 목록에서 페이지를 클릭하고 드래그하여 순서를 변경합니다
2. 이 순서는 게시된 인터페이스의 탐색 순서를 결정합니다

페이지 삭제

1. 삭제할 페이지를 선택합니다
2. 삭제 버튼을 클릭합니다
3. 삭제를 확인합니다

참고: 인터페이스에서 마지막 페이지는 삭제할 수 없습니다. 최소 하나의 페이지가 있어야 합니다.

인터페이스 게시

인터페이스 게시

1. 인터페이스 빌더에서:

   • 게시할 인터페이스를 엽니다
   • 인터페이스 설정에서 게시를 클릭
   • 인터페이스가 게시됨으로 표시됩니다

2. 인터페이스 목록에서:

   • 게시할 인터페이스를 찾습니다
   • 게시 토글 또는 버튼을 사용

게시된 인터페이스는:

• 사용자가 프로젝트에 액세스할 때 사용 가능
• "게시됨" 배지가 있는 인터페이스 목록에 표시
• 프로젝트의 앱 URL을 통해 액세스 가능

인터페이스 게시 취소

1. 게시된 인터페이스를 엽니다
2. 인터페이스 설정에서 게시 취소를 클릭
3. 인터페이스는 더 이상 사용자에게 제공되지 않습니다

모범 사례

인터페이스 설계

1. 계획부터 시작: 구축하기 전에 인터페이스 구조를 계획합니다

   • 필요한 페이지를 식별합니다
   • 페이지 유형을 결정합니다
   • 탐색 흐름을 계획합니다

2. 설명적인 이름 사용: 인터페이스와 페이지에 명확하고 설명적인 이름을 사용합니다

   • 사용자가 목적을 이해하는 데 도움
   • 관리를更容易하게

3. 논리적으로 페이지 구성: 논리적인 순서로 페이지를 배치합니다

   • 가장 중요한 페이지를 먼저
   • 관련 페이지를 그룹화

페이지 구성

1. 채팅 페이지를 주의 깊게 구성:

   • 적절한 기본 에이전트를 설정
   • 하나의 에이전트만 필요한 경우 단일 에이전트 모드를 사용
   • 더 나은 제어를 위해 에이전트 화이트리스트 사용

2. 스마트 테이블 페이지 최적화:

   • 사용 사례에 맞는 뷰 유형을 선택
   • 멀티테이블 뷰에는 탭을 사용
   • 필터 및 설정을 적절하게 구성

3. 작업 페이지 테스트:

   • 다중 및 단일 모드 모두에서 작업을 테스트
   • 작업 화이트리스트가 올바르게 작동하는지 확인
   • 자동 실행 기능을 테스트

성능

1. 페이지 수 제한: 페이지 수를 합리적으로 유지합니다

   • 페이지가 너무 많으면 인터페이스가 느려질 수 있습니다
   • 대신 페이지 내 탭 사용을 고려

2. 사용자 정의 페이지 최적화:

   • 사용자 정의 페이지에 요소를 너무 많이 넣지 않습니다
   • 효율적인 요소 구성을 사용

3. 게시 전 테스트: 게시하기 전 항상 미리보기 및 테스트를 수행합니다

   • 모든 페이지 구성을 확인
   • 탐색 흐름을 테스트
   • 모든 기능이 작동하는지 확인

사용 사례

고객 지원 인터페이스

구조:

• 페이지 1: 채팅 - 지원 에이전트와의 주요 지원 채팅
• 페이지 2: 지식 베이스 - 도움말 문서 및 문서화
• 페이지 3: 작업 - 티켓 제출 또는 요청 작업

구성:

• 채팅 페이지: 지원 에이전트와의 단일 에이전트 모드
• 지식 베이스: 검색 및 카테고리 활성화
• 작업: 지원 워크플로우의 다중 작업 모드

데이터 관리 인터페이스

구조:

• 페이지 1: 대시보드 - 스마트 테이블 대시보드 뷰
• 페이지 2: 데이터 입력 - 리뷰 뷰가 있는 스마트 테이블
• 페이지 3: 보고서 - 여러 탭이 있는 스마트 테이블

구성:

• 대시보드: 기본 기간 설정, 기간 선택기 표시
• 데이터 입력: 사전 설정 필터, 편집 모드 활성화
• 보고서: 다른 테이블 뷰가 있는 여러 탭

워크플로우 자동화 인터페이스

구조:

• 페이지 1: 작업 - 워크플로우 탐색 및 실행
• 페이지 2: 상태 - 워크플로우 상태를 표시하는 스마트 테이블
• 페이지 3: 사용자 정의 대시보드 - 차트 및 지표가 있는 사용자 정의 페이지

구성:

• 작업: 그리드 뷰, 검색 활성화, 카테고리별 필터링
• 상태: 테이블 뷰, 읽기 전용, 자동 새로고침
• 대시보드: 핵심 지표를 표시하는 사용자 정의 요소

문제 해결

인터페이스가 표시되지 않음

문제: 인터페이스가 목록에 나타나지 않거나 액세스할 수 없습니다.

해결 방법:

• 인터페이스가 게시되었는지 확인
• 올바른 프로젝트를 보고 있는지 확인
• 적절한 권한이 있는지 확인

페이지가 로드되지 않음

문제: 페이지가 로드되지 않거나 오류가 표시됩니다.

해결 방법:

• 페이지 구성을 확인
• 모든 필수 리소스(테이블, 에이전트, 작업)가 존재하는지 확인
• 페이지 설정에서 구성 오류를 확인

기본 인터페이스가 작동하지 않음

문제: 기본 인터페이스가 사용되지 않습니다.

해결 방법:

• 인터페이스가 기본값으로 설정되어 있는지 확인
• 다른 인터페이스도 기본값으로 설정되어 있는지 확인
• 페이지를 새로고침하거나 캐시를 삭제

스마트 테이블 페이지 문제

문제: 스마트 테이블 페이지가 데이터를 표시하지 않거나 오류가 있습니다.

해결 방법:

• 테이블이 존재하고 액세스할 수 있는지 확인
• 뷰 유형 구성을 확인
• 테이블 권한이 올바른지 확인
• 탭을 사용하는 경우 탭 구성을 확인

작업 페이지 문제

문제: 작업이 나타나지 않거나 실행할 수 없습니다.

해결 방법:

• 작업 화이트리스트 구성을 확인
• 작업이 존재하고 게시되었는지 확인
• 작업 권한을 확인
• 표시 모드 설정을 확인

API 통합

인터페이스는 EKB API를 통해 프로그래밍 방식으로 액세스할 수 있습니다. 다음에 대한 자세한 내용은 API 참조를 참조하세요:

• 인터페이스 생성 및 관리
• 페이지 구성
• 인터페이스 게시
• 인터페이스 데이터 액세스

다음 단계

• 채팅 페이지를 구성하려면 에이전트에 대해 알아보세요
• 데이터 관리를 위해 스마트 테이블을 탐색하세요
• 작업 페이지를 위해 워크플로우를 확인하세요
• 문서 관리를 위해 지식 베이스를 검토하세요