View a markdown version of this page

에이전트 셀프 서비스 채팅 경험을 처음부터 끝까지 설정하는 방법 - Amazon Connect
AI 메시징 스트리밍이란 무엇인가요?활성화 상태통신 위젯 생성스트리밍 환경 테스트

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

에이전트 셀프 서비스 채팅 경험을 처음부터 끝까지 설정하는 방법

참고

오케스트레이션 AI 에이전트는 채팅 고객 응대에 대해 채팅 스트리밍을 활성화해야 합니다. 채팅 스트리밍을 활성화하지 않으면 일부 메시지가 렌더링되지 않습니다. AI 기반 채팅을 위한 메시지 스트리밍 활성화을(를) 참조하세요.

AI 메시징 스트리밍이란 무엇인가요?

AI 메시지 스트리밍은 채팅 상호 작용 중에 AI 에이전트 응답을 점진적으로 표시할 수 있는 Amazon Connect 기능입니다. 고객에게 무언가를 보여주기 전에 AI가 완전한 응답을 생성할 때까지 기다리는 대신 스트리밍은 생성되는 텍스트를 표시하여 보다 자연스럽고 대화적인 경험을 만듭니다.

작동 방식

표준 채팅 응답을 사용하면 AI가 전체 응답을 생성하는 동안 고객이 기다리면 전체 메시지가 한 번에 나타납니다. AI 메시지 스트리밍을 사용하면 실시간으로 다른 사람이 유형을 입력하는 것을 보는 것과 마찬가지로 AI가 단어를 생성할 때 단어가 점진적으로 나타나는 텍스트 버블이 늘어나는 것을 볼 수 있습니다.

참고

공식 설명서: 전체 기술 참조는 섹션을 참조하세요AI 기반 채팅을 위한 메시지 스트리밍 활성화.

프로그레시브 텍스트 디스플레이의 이점

AI 메시지 스트리밍은 고객 경험에 대한 몇 가지 주요 이점을 제공합니다.

  • 인식된 대기 시간 단축 - 고객은 로딩 스피너를 바라보지 않고 즉각적인 활동을 볼 수 있습니다.

  • 보다 자연스러운 대화 흐름 - 프로그레시브 텍스트는 사람의 입력을 모방하여 보다 매력적인 상호 작용을 생성합니다.

  • 참여도 향상 - 고객은 응답이 생성되는 동안 응답을 읽을 수 있습니다.

  • 이행 메시지 - AI 에이전트는 처리 중에 "계정을 검토하는 동안 1분"과 같은 임시 메시지를 제공할 수 있습니다.

표준 채팅과 스트리밍 채팅 비교

다음 표에서는 표준 채팅과 스트리밍 채팅 간의 고객 경험을 비교합니다.

속성 표준 채팅 스트리밍 채팅
응답 표시 완료 메시지가 한 번에 모두 표시됨 텍스트가 점진적으로 나타납니다(풍선 증가).
고객 경험 로드 표시기가 있는 전체 응답 대기 실시간으로 표시되는 단어 보기
인식된 대기 시간 더 김(완전한 응답을 기다리는 중) 더 짧음(즉각적인 시각적 피드백)
대화 느낌 트랜잭션 사람과 채팅하는 것과 같은 자연스러움
이행 메시지 사용할 수 없음 AI가 중간 상태 업데이트를 전송할 수 있음
Lex 제한 시간 처리 Lex 제한 시간 적용 Lex 제한 시간 제거

활성화 상태

AI 메시지 스트리밍 가용성은 Amazon Connect 인스턴스가 생성된 시기와 구성 방식에 따라 달라집니다.

새 인스턴스에 대한 자동 활성화

2025년 12월 이후에 생성된 Amazon Connect 인스턴스에는 기본적으로 AI 메시지 스트리밍이 활성화되어 있습니다. MESSAGE_STREAMING 인스턴스 속성은 이러한 인스턴스에 true 대해 자동으로 로 설정되므로 추가 구성이 필요하지 않습니다.

중요

2025년 12월 이전에 생성된 Amazon Connect 인스턴스가 있는 AWS 계정을 사용하는 경우 AI 메시지 스트리밍을 수동으로 활성화해야 할 수 있습니다. AI 기반 채팅을 위한 메시지 스트리밍 활성화 설명서의 지침에 따라 인스턴스의 MESSAGE_STREAMING 속성을 확인하고 필요한 경우 활성화합니다.

Amazon Lex 봇 권한

AI 메시지 스트리밍이 올바르게 작동하려면 lex:RecognizeMessageAsync 권한이 필요합니다. 이 권한을 통해 Amazon Connect는 스트리밍 응답을 활성화하는 비동기 메시지 인식 API를 호출할 수 있습니다.

새 Lex 봇 연결의 경우: 새 Amazon Lex 봇을 Amazon Connect 인스턴스와 연결하면 필요한 lex:RecognizeMessageAsync 권한이 봇의 리소스 기반 정책에 자동으로 포함됩니다. 추가 구성은 필요하지 않습니다.

중요

AI 메시지 스트리밍이 활성화되기 전에 Amazon Connect 인스턴스와 연결된 Amazon Amazon Lex 봇이 있는 경우 lex:RecognizeMessageAsync 권한을 포함하도록 봇의 리소스 기반 정책을 업데이트해야 할 수 있습니다.

기존 Lex 봇 정책을 업데이트하려면:

  1. Amazon Lex 콘솔로 이동

  2. 봇을 선택하고 리소스 기반 정책으로 이동합니다.

  3. Amazon Connect 액세스 권한을 부여하는 정책 설명에 lex:RecognizeMessageAsync 작업 추가

  4. 업데이트된 정책 저장

자세한 지침은 AWS 설명서의 Lex 봇 권한 섹션을 참조하세요.

통신 위젯 생성

Amazon Connect Communications Widget은 모든 웹 사이트에 추가할 수 있는 임베딩 가능한 채팅 인터페이스입니다. 이 섹션에서는 AI 메시지 스트리밍을 테스트하는 위젯을 생성하고 구성합니다. 자체 고객 채팅 위젯을 사용하려는 경우이 섹션을 건너뛸 수 있습니다.

  1. Amazon Connect 콘솔에서 인스턴스로 이동합니다.

  2. 왼쪽 탐색 메뉴에서 채널을 클릭합니다.

  3. 커뮤니케이션 위젯 클릭

  4. 통신 위젯 관리 페이지가 표시됩니다.

참고

통신 위젯이란 무엇입니까? 통신 위젯은 Amazon Connect의 out-of-the-box 채팅 솔루션입니다. 간단한 JavaScript 코드 조각을 사용하여 웹 사이트에 포함할 수 있는 완전한 기능을 갖춘 채팅 인터페이스를 제공합니다. 위젯은 연결 설정, 세션 관리 및 메시지 표시의 모든 복잡성을 처리합니다.

2단계: 새 위젯 생성

  1. 위젯 추가를 클릭하여 새 통신 위젯을 생성합니다.

  2. 다음 세부 정보를 입력합니다.

    • 이름: AI-Streaming-Demo-Widget

    • 설명: Widget for testing AI Message Streaming

  3. 통신 옵션에서 채팅 추가가 선택되어 있는지 확인합니다.

  4. 채팅 고객 응대 흐름으로 셀프 서비스 테스트 흐름을 선택합니다.

  5. 저장을 클릭하고 계속을 클릭하여 구성 페이지로 이동합니다.

고객 응대 흐름 선택

다음과 같은 고객 응대 흐름을 선택해야 합니다.

  • 기본 설정이 구성되어 있음(AI 세션 생성, 로깅 등)

  • AI 에이전트 통합을 통해 Lex 봇으로 라우팅

  • 연결 해제에 대한 적절한 오류 처리가 있습니다.

고객 응대 흐름을 아직 생성하지 않은 경우 흐름 생성 섹션을 먼저 완료합니다.

3단계: 위젯 모양 사용자 지정

브랜드에 맞게 채팅 위젯의 모양과 느낌을 사용자 지정하고 저장 후 계속을 선택합니다.

4단계: 허용된 도메인 구성

통신 위젯은 명시적으로 허용된 웹 사이트에서만 로드됩니다. 이 보안 기능은 위젯의 무단 사용을 방지합니다.

  1. 허용된 도메인까지 아래로 스크롤합니다.

  2. 도메인 추가를 클릭하고 localhost 테스트를 위해 다음 도메인을 추가합니다.

    • http://localhost

  3. 보안에서 아니요를 선택합니다.

  4. 나중에 프로덕션 웹 사이트에 배포하려는 경우 해당 도메인도 추가하고 보안을 구성해야 합니다(예: https://www.example.com).

5단계: 위젯 코드 저장 및 가져오기

  1. 저장 및 계속을 클릭하여 위젯 구성을 저장합니다.

  2. 생성 후 임베드 코드가 포함된 위젯 세부 정보 페이지가 표시됩니다.

  3. 중요: 임베드 코드 조각에서 다음 값을 복사하여 저장합니다.

    • 클라이언트 URI - 위젯 JavaScript 파일의 URL

    • 위젯 ID - 위젯의 고유 식별자

    • 코드 조각 ID Base64-encoded 구성 문자열

6단계: 로컬 테스트 환경 설정

위젯을 로컬에서 테스트하려면 통신 위젯을 로드하는 간단한 HTML 파일을 생성합니다.

  1. 컴퓨터에 테스트용 새 폴더 생성(예: ai-streaming-test)

  2. 데모 페이지의 배경 이미지를 다운로드하여 테스트 폴더에 background.jpg 로 저장합니다.

  3. 다음 내용을 사용하여 index.html 테스트 폴더에 라는 새 파일을 생성합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        s.async=1;
        s.id=id;
        d.getElementsByTagName('head')[0].appendChild(s);
        w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
      })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>

7단계: 자리 표시자 값 바꾸기

HTML 파일의 자리 표시자 값을 실제 위젯 값으로 바꿉니다.

Placeholder 로 바꾸기 예제
REPLACE_WITH_CLIENT_URI 5단계의 클라이언트 URI https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js
REPLACE_WITH_WIDGET_ID 5단계의 위젯 ID amazon_connect_widget_abc123
REPLACE_WITH_SNIPPET_ID 5단계의 코드 조각 ID QVFJREFIaWJYbG... (긴 Base64 문자열)

8단계: 로컬 웹 서버 시작

위젯을 테스트하려면 로컬 웹 서버에서 HTML 파일을 제공해야 합니다. 다음은 몇 가지 옵션입니다.

옵션 A: Python(설치된 경우)

python -m http.server 8001
옵션 B: Node.js(설치된 경우)

npx http-server -p 8001
옵션 C: VS Code Live Server 확장

  • VS Code에 "Live Server" 확장 프로그램 설치

  • 마우스 오른쪽 버튼을 클릭하고 "Live Server로 열기"를 index.html 선택합니다.

서버를 시작한 후 브라우저를 열고 다음으로 이동합니다. http://localhost:8001

오른쪽 하단에 주황색 채팅 버튼이 있는 데모 페이지가 표시됩니다.

스트리밍 환경 테스트

위젯이 로드되었으므로 이제 AI 메시지 스트리밍을 테스트하고 진행 중인 텍스트 표시를 관찰할 차례입니다.

찾아야 할 사항: 스트리밍과 비스트리밍

스트리밍 응답과 비스트리밍 응답의 차이를 이해하면 AI 메시지 스트리밍이 작동하는지 확인하는 데 도움이 됩니다.

동작 비 스트리밍(표준) 스트리밍(AI 메시지 스트리밍)
초기 디스플레이 표시기 로드 또는 점 입력 텍스트가 즉시 표시되기 시작합니다.
텍스트 모양 완료 메시지가 한 번에 모두 표시됨 단어가 점진적으로 나타납니다(풍선 증가).
응답 타이밍 AI 생성이 완료될 때까지 기다립니다. 생성 중 응답 확인
시각적 효과 전체 텍스트의 "팝" 다른 사람 유형 보기와 같은 부드러운 흐름 텍스트