이 페이지는 Cloud Translation API를 통해 번역되었습니다.

온라인 구매 후 매장 수령: Bonjour Meal - 1부 - 시작하기

1. 소개

최종 업데이트: 2022년 5월 11일

Business Messages에 오신 것을 환영합니다.

이 Codelab은 Business Messages와 통합하는 방법을 소개합니다. 비즈니스 메시지를 사용하면 고객이 Google 검색 및 지도를 통해 내가 관리하는 비즈니스와 소통할 수 있습니다. Business Messages와 직접 통합하고자 하는 비즈니스이거나, 협업 중인 비즈니스를 위한 메시징 솔루션을 구축하는 독립 소프트웨어 공급업체에서 일하고 있거나, 막 Business Messages를 발견하여 플랫폼을 고조시키고자 할 수도 있습니다.

어떤 이유로 여기까지 왔는지에 관계없이 이 Codelab은 훌륭한 시작 방법입니다. 이 과정을 마치면 사용자와 상호작용할 수 있는 첫 번째 디지털 에이전트가 생성됩니다. 좀 더 다듬어진 후 Business Messages를 출시할 준비가 되면 수백만 명의 고객에게 도달할 수 있습니다.

좋은 디지털 상담사의 조건

Business Messages는 소비자가 추가 앱을 설치하지 않고도 비즈니스와 소통할 수 있도록 휴대기기에서 앱과 같은 환경을 제공하는 대화형 영역입니다. 디지털 에이전트는 고객이 상호작용하는 로직입니다. 로직은 클라우드 또는 인프라에 배포된 웹 애플리케이션에서 관리됩니다. 사용자에게 응답하는 방법은 전적으로 개발자에게 달려 있습니다. 최고의 상담사는 기대치를 설정하고, 고객의 참여를 유도하며, 사용자의 니즈를 지원하는 기능을 제공하기 위한 컨텍스트를 제공합니다.

빌드할 항목

이 Codelab에서는 Bonjour Meal이라는 가상의 회사의 Business Messages에 관한 디지털 에이전트를 빌드합니다. 이 디지털 상담사는 "영업 종료 시간이 언제야?" 또는 "온라인으로 구매할 수 있나요?"와 같은 몇 가지 간단한 질문에 답변합니다.

이 Codelab에서 사용자는 디지털 에이전트를 통해 상품을 구매하고, 사용자를 결제 대행업체로 안내하여 돈을 수취한 다음 가상의 상품을 매장에서 수령하도록 예약할 수 있습니다.

이 Codelab에서 앱은 다음 기능을 수행합니다.

추천 칩을 통해 질문에 응답하기
디지털 상담사가 답변할 수 있는 질문을 사용자에게 안내합니다.
풍부한 대화 기능을 제공하여 사용자의 대화 참여 유도

학습할 내용

Google Cloud Platform에서 App Engine에 웹 애플리케이션을 배포하는 방법입니다. 또는 ngrok를 사용하여 로컬 애플리케이션을 공개적으로 테스트할 수 있습니다.
웹 애플리케이션 웹훅으로 Business Messages 계정을 구성하여 사용자의 메시지를 수신하는 방법
Business Messages API를 사용하여 카드, 캐러셀, 대화형 추천과 같은 리치 기능을 전송하는 방법
Business Messages에서 메시지를 보내는 방법

이 Codelab에서는 첫 번째 디지털 에이전트를 빌드하는 데 중점을 둡니다.

필요한 항목

무료 비즈니스 커뮤니케이션 개발자 계정 등록
개발자 사이트에서 방법 안내 확인
버전 5 이상을 실행하는 Android 기기 또는 Google 지도 앱이 설치된 iOS 기기
웹 애플리케이션 프로그래밍 경험
인터넷 연결

2. 설정

API 사용 설정

이 Codelab에서는 Django 애플리케이션으로 작업하므로 Cloud Build API를 사용하여 애플리케이션을 App Engine에 배포합니다. 또는 ngrok를 사용하는 경우 Cloud Build API를 사용 설정할 필요가 없습니다.

Cloud Build API를 사용 설정하려면 다음 안내를 따르세요.

Google Cloud 콘솔에서 Cloud Build API를 엽니다.
사용 설정을 클릭합니다.

서비스 계정 만들기

Business Communications API 및 Business Messages API에 액세스하려면 서비스 계정을 만들어야 합니다. 비즈니스 커뮤니케이션 개발자 콘솔 내에서 서비스 계정 만들기 문서의 단계를 따르세요.

Django Python EchoBot 시작 코드 배포

터미널에서 다음 명령어를 사용하여 Django Echo Bot 샘플을 프로젝트 작업 디렉터리로 클론합니다.

$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code

서비스 계정에 대해 생성된 JSON 사용자 인증 정보를 샘플 리소스 폴더에 복사하고 사용자 인증 정보 이름을 'bm-agent-service-account-credentials.json'으로 바꿉니다.

bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json

터미널에서 샘플의 step-1 디렉터리로 이동합니다.

터미널에서 다음 명령어를 실행하여 샘플을 배포합니다.

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy

PROJECT_ID는 API 등록을 위해 사용되는 프로젝트의 프로젝트 ID입니다.

마지막 명령어 결과에서 배포된 애플리케이션의 URL을 기록해 둡니다.

Deployed service [default] to [https://PROJECT_ID.appspot.com]

방금 배포한 시작 코드에는 Business Messages에서 메시지를 수신하기 위한 웹훅이 있는 웹 애플리케이션이 포함되어 있습니다. 애플리케이션은 사용자에게 메시지를 다시 에코하고 대화형 환경에서 사용할 수 있는 다양한 기능을 보여줄 수 있습니다.

웹북 구성

이제 서비스가 배포되었으므로 애플리케이션 URL을 사용하여 비즈니스 커뮤니케이션 개발자 콘솔의 계정 설정 페이지에서 웹훅 URL을 설정합니다.

웹훅 URL은 애플리케이션의 URL과 '/callback/'이 됩니다. 예를 들어 https://PROJECT_ID.appspot.com/callback/과 비슷할 수 있습니다.

비즈니스 커뮤니케이션 콘솔 계정 설정 페이지로 이동합니다. 탐색 메뉴 오른쪽 상단에 GCP 프로젝트 이름이 표시됩니다. 드롭다운이 표시되면 GCP 프로젝트를 선택합니다.

기술 담당자 세부정보를 작성한 다음 배포된 애플리케이션의 웹훅 URL로 웹훅을 업데이트합니다.

GCP 프로젝트 참조 옆에 있는 Save(저장)를 클릭합니다.

3. 첫 번째 에이전트 만들기

비즈니스 커뮤니케이션 개발자 콘솔 사용

비즈니스 커뮤니케이션 콘솔에서 왼쪽 상단의 로고를 클릭하여 콘솔 대시보드로 돌아간 다음 에이전트 만들기를 클릭합니다. 에이전트를 만들면서 브랜드도 만듭니다. 상담사 유형으로 Business Messages를 선택하고 파트너 정보가 올바른지 확인합니다.

브랜드에 만들려는 브랜드의 이름을 입력합니다.브랜드는 협업 중인 비즈니스이며 소비자가 에이전트와 대화할 수 있습니다. 상담사 이름에 Business Messages 대화에서 사용자에게 표시할 항목을 지정합니다. 가상의 Bonjour Meal의 사례인 Bonjour Rail은 Bonjour Meal 레스토랑을 관리하는 철도 회사입니다. 브랜드로 Bonjour Rail을, 에이전트로 Bonjour Meal을 지정하겠습니다.

에이전트는 브랜드를 나타내는 대화체입니다.

에이전트 만들기를 클릭하고 콘솔이 자동으로 실행되도록 합니다. 이 요청에서 브랜드와 에이전트를 만들기 위해 Business Communications API에 여러 번 요청하는 데 몇 초 정도 걸립니다. Business Communications API를 직접 사용하여 에이전트를 만들고 브랜드를 만들 수 있습니다. curl 요청이 콘솔과 동일한 작업을 수행하는 방법을 알아보려면 문서를 확인하세요.

첫 대화 시작하기

방금 만든 에이전트를 열면 에이전트 세부정보 검토를 시작할 수 있는 개요 페이지가 표시됩니다. 에이전트 테스트 URL을 살펴봅니다. 이러한 URL은 기기에서 대화 영역을 호출하는 데 사용됩니다.

칩 중 하나를 클릭하여 테스트 URL을 복사할 수 있습니다. 물론 테스트에 사용할 기기의 테스트 URL을 복사해야 합니다. 복사한 메시지를 원하는 방식으로 기기로 전송합니다.

휴대기기에서 링크를 탭하면 에이전트 테스트 URL이 자동 입력된 Business Messages 에이전트 런처가 호출됩니다.

실행을 탭하여 에이전트의 대화 영역을 호출합니다.

상담사와 상호작용하면서 상담사가 할 수 있는 작업에 관해 알아봅니다. 대부분의 경우 대화 표면은 메시지만 에코한다는 사실을 알 수 있습니다. 'Hello, World!'와 같은 메시지를 보내면 상담사가 동일한 메시지를 나에게 다시 보내는 것을 확인할 수 있습니다.

배포된 애플리케이션에는 Business Messages에서 사용할 수 있는 풍부한 기능을 보여주는 몇 가지 로직도 포함되어 있습니다.

'카드'를 전송하면 리치 카드가 호출됩니다.
'칩'을 보내면 추천 칩이 호출됩니다.
'캐러셀'을 전송하면 리치 카드의 캐러셀이 호출됩니다.

축하합니다. 상담사와의 첫 대화입니다.

각각의 다양한 기능을 사용하여 에이전트와 소통하는 사람에게 더 나은 컨텍스트를 제공할 수 있습니다. 풍부한 카드의 그래픽 애셋을 전송하여 아이디어를 더 효과적으로 전달하거나 추천 검색어 칩을 사용하여 대화를 유도하세요.

환영 메시지 업데이트 및 대화 칩 사용하기

Play Console을 연습하고 에이전트의 환영 메시지를 수정하고 추천 검색어 칩을 활용하여 사용자와 소통하는 방법을 알아보겠습니다.

에이전트 개요 페이지로 이동하여 상담사 정보를 선택합니다. 환영 메시지와 대화 주제 섹션까지 아래로 스크롤합니다.

다음과 같이 환영 메시지 (노란색 입력 필드)를 업데이트합니다.

Bonjour Meal 시작 에이전트에 오신 것을 환영합니다. 전달해 주신 메시지를 받아볼 수 있고 플랫폼에서 지원하는 몇 가지 다양한 기능을 안내해 드릴 수 있습니다. 다음 권장사항을 활용해 보세요.

위 이미지의 보라색 상자에 나와 있는 + 대화 시작 조건 추가를 클릭하여 추천 검색어 칩, 캐러셀, 카드를 호출하는 대화 시작 조건을 추가하세요. 추가하는 대화 시작 조건에는 텍스트 구성요소와 postbackData 구성요소가 필요합니다. 텍스트는 사용자에게 표시되는 반면 postBack 데이터는 에이전트의 웹훅으로 전송됩니다. 웹훅은 포스트백 데이터를 파싱하고 사용자에게 적절한 응답을 전송합니다.

수정 후 콘솔의 에이전트 정보는 다음과 같이 표시됩니다.

콘솔 오른쪽에 에이전트가 어떻게 표시되는지 미리 볼 수 있습니다. 환영 메시지에 방금 변경한 내용과 그 아래의 추천 검색어 칩이 어떻게 반영되는지 확인하셨나요?

이는 사용자 환경이 어떤지 파악할 수 있는 유용한 도구입니다. 에이전트를 빌드하고 지원하려는 사용자 여정을 계획할 때 사용할 수 있습니다.

안타깝게도 이전 데이터는 Business Messages 인프라 내에 캐시되므로 이러한 변경사항을 대화에 즉시 반영할 수는 없습니다. 캐시는 약 2시간마다 삭제되므로 내일 시도해 보시기 바랍니다.

기다리는 동안 모든 기능이 어떻게 작동하는지 살펴보겠습니다.

4. 시작 코드 분석

3,000m 높이의 소스 코드 보기

배포한 시작 코드는 사용자에게 메시지를 다시 표시하고 리치 카드, 캐러셀, 추천 검색어 칩을 제공할 수 있습니다. 작동 방식을 이해할 수 있도록 소스 코드를 자세히 살펴보겠습니다. 그런 다음 무엇을 변경해야 하는지 알 것입니다.

시작 코드는 Django 프로젝트입니다. 이 Codelab 시리즈의 후반부에서는 Google Datastore를 사용하여 장바구니 및 관련 대화와 같은 데이터를 유지합니다. 이전에 Django를 사용해 본 적이 없더라도 걱정하지 마세요. 매우 간단하며 이 Codelab을 마칠 때쯤이면 작동 방식을 배울 수 있을 것입니다.

개략적으로 설명하자면 Django는 URL을 뷰로 라우팅하며 뷰 로직은 브라우저에서 렌더링되는 템플릿을 생성합니다. 프로젝트의 urls.py를 살펴보겠습니다.

bm-django-echo-bot/bmcodelab/urls.py[31~37행]

from django.urls import include, path
import bopis.views as bopis_views

urlpatterns = [
    path('', bopis_views.landing_placeholder),
    path('callback/', bopis_views.callback),
]

여기에 두 개의 경로가 정의되므로 Django가 두 URL이 인식되면 로직을 실행할 수 있습니다. 프로젝트 URL이 https://PROJECT_ID.appspot.com/인 경우 프로젝트가 인식하는 경로는 다음과 같습니다.

https://PROJECT_ID.appspot.com/
https://PROJECT_ID.appspot.com/callback/

두 URL 경로는 bopis/views.py에서 가져온 bopis_views를 참조합니다. 이 파일의 내용을 살펴보겠습니다. 먼저 bopis_views.landing_placeholder에 관해 알아보겠습니다.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py[302~309행]

... 
def landing_placeholder(request):
    return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
    <br/><br/>
    To message your Bonjour Meal agent, go to the Developer Console and retrieve
    the Test URLs for the agent you have created as described in the codelab
    <a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...

이 로직은 프로젝트의 루트를 가리키는 웹 요청을 수신할 때 웹 서버에 의해 실행됩니다. 여기서는 그다지 복잡한 일이 없습니다. 요청을 보낸 브라우저에 일부 HTML이 포함된 HTTPResponse를 반환하기만 하면 됩니다. 따라서 프로젝트의 루트 URL을 실제로 열 수 있지만 이 Codelab으로 다시 돌아오므로 그리 할 일이 별로 없습니다.

다른 URL은 마찬가지로 bopis/views.py에 있는 callback이라는 함수로 라우팅됩니다. 이제 이 함수를 살펴보겠습니다.

bm-django-echo-bot/bopis/views.py [60~101행]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

이 로직은 메시지 또는 suggestionResponse의 요청 본문을 파싱하고 해당 정보를 route_message이라는 함수에 전달한 다음 Business Messages 인프라에 HttpResponse를 다시 반환하여 메시지 수신을 확인합니다.

이는 중요한 함수입니다. 이 로직은 웹 애플리케이션의 웹훅으로, 에이전트와 상호작용하는 사용자로부터 메시지를 수신합니다. 웹훅을 확장하여 Dialogflow와 같은 자동화 도구로 메시지를 전송하여 사용자가 말하는 내용을 파악하고 해당 추론에서 응답을 생성할 수 있습니다. 또한 메시지를 전달하여 사용자가 실제 상담사와 연결될 수 있도록 할 수도 있습니다. 다음 다이어그램을 참고하세요.

Business Messages는 메시지 내용을 JSON 페이로드로 웹훅에 전송하여 실시간 에이전트로 라우팅하거나 일부 로직으로 봇으로 응답합니다. 여기서 이 라우팅 메커니즘은 route_message입니다. 하나씩 소개해 드리겠습니다.

bm-django-echo-bot/bopis/views.py [105~122행]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

이 로직은 사용자가 수신한 메시지를 검토하기 시작합니다. 첫째, 메시지는 모든 문자를 낮춰 정규화됩니다. 정규화되고 나면 메시지가 파일 상단에 정의된 상수 중 하나인지 확인합니다.

bm-django-echo-bot/bopis/views.py [40~42행]

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...

즉, 봇은 이 Codelab의 이전 단계에서 대화 시작 조건의 postback_data에 배치한 문자열을 구체적으로 포함하는 메시지를 파싱합니다. 이러한 문자열 중 어느 것도 표시되지 않으면 echo_message라는 함수에 메시지를 전달합니다. 상상할 수 있듯이 메시지를 에코할 수 있습니다.

메시지 보내기

이제 웹 애플리케이션에서 메일을 수신하는 방법을 알았을 것입니다. 이 모든 작업은 웹훅에서 처리됩니다.

하지만 애플리케이션에서 Business Messages를 사용하여 사용자에게 아웃바운드 메시지를 보내려면 어떻게 해야 할까요?

인프라가 사용자에게 응답하면 Business Messages API에 응답을 전송하여 사용자에게 메시지를 전송합니다.

Business Messages API에는 Python, Node.js, Java로 작성된 라이브러리가 있습니다. 인프라의 언어가 Google에서 제공하는 라이브러리에서 사용할 수 없는 경우 직접 요청할 수 있는 REST API도 제공합니다. cURL을 사용하여 특정 대화 ID로 메시지를 보내는 방법은 메시지 보내기를 참고하세요.

이 Codelab의 목적상 GCP 프로젝트의 App Engine에 배포된 Bonjour Meal 시작 코드에 이미 통합된 Python 클라이언트 라이브러리를 사용하거나 ngrok를 통해 로컬로 실행하는 데 중점을 둡니다.

echo_message 함수를 살펴보고 API와 상호작용하여 Business Messages에 메시지를 전송하는 방법을 살펴보겠습니다.

bm-django-echo-bot/bopis/views.py [199~212행]

...
def echo_message(message, conversation_id):
    '''
    Sends the message received from the user back to the user.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

이 함수에서 BusinessMessagesMessage는 echo_message 함수에 전달된 메시지 변수로 인스턴스화됩니다. 인스턴스화가 끝나면 객체는 대화 ID와 함께 send_message에 전달됩니다.

bm-django-echo-bot/bopis/views.py [214~236행]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

send_message 함수는 서비스 계정 사용자 인증 정보를 사용하여 이 대화에 메시지를 보낼 수 있는지 확인하고 Business Messages 클라이언트를 인스턴스화하며 주어진 conversation ID에 메시지를 보내기 위한 요청을 생성하는 것뿐입니다.

리치 기능도 이 send_message 함수를 사용하지만 이러한 기능이 만드는 메시지는 리치 카드, 캐러셀, 추천 검색어 칩과 관련이 있습니다. 리치 카드와 캐러셀에는 그래픽 애셋이 포함될 수 있지만 추천 칩에는 콜백 로직이 적절하게 파싱할 수 있도록 postback_data가 있습니다.

메시지를 보내는 방법을 알아보았으므로 이제 샘플에서 리치 카드, 캐러셀, 추천 검색어 칩을 전송하는 방법을 살펴보겠습니다. 다음 섹션에서는 이러한 리치 기능이 포함된 메시지를 보내기 위해 소스 코드를 수정합니다.

준비가 되면 Bonjour Meal 에이전트를 맞춤설정해 보세요.

5. 에이전트 맞춤설정

지금까지 Codelab을 진행해 봤다면 멋진 에이전트를 볼 수 있을 것입니다.

그래요. 그렇게 아름답지는 않습니다. 실제로 약간 겉으로 보입니다. 실제로 우리 비즈니스를 잘 나타내지 않습니다. 다행히 에이전트를 지원하는 코드에 관한 기본 지식을 갖추고 있으며 원하는 방식으로 에이전트를 맞춤설정하는 데 필요한 도구를 갖추고 있습니다.

이 Codelab의 나머지 부분에서는 다음을 사용하여 에이전트를 확장합니다.

실제 로고 포함
개선된 환영 메시지
영업시간 정보 제공
온라인 상품 구매가 곧 제공될 예정이라고 사용자에게 알림
대화 촉진을 위한 대화 추천 칩 사용

비즈니스 커뮤니케이션 콘솔을 활용하여 로고 및 환영 메시지를 업데이트하겠습니다. 하지만 언제든지 Business Communications API를 직접 사용하여 업데이트하실 수 있습니다. 그런 다음 영업시간 정보를 제공하기 위한 적절한 메시지를 보내기 위해 소스 코드를 업데이트해야 하며 Bonjour Meal은 곧 온라인 쇼핑 기능을 제공할 예정입니다. 이 과정을 완료하면 비즈니스 커뮤니케이션 콘솔로 돌아가서 디지털 에이전트가 지원하는 행복한 경험으로 대화를 안내하는 데 도움이 되는 대화형 추천 칩을 만들게 됩니다.

로고 포함

비즈니스 커뮤니케이션 콘솔에서 에이전트를 선택하고 상담사 정보로 이동합니다. 아래 노란색으로 표시된 비즈니스 로고를 업데이트하겠습니다.

업로드를 클릭하면 업로드하거나 URL에서 가져올 이미지를 선택할 수 있습니다.

자체 로고 사용에 권장되는 권장사항에 관해 알아보려면 문서의 로고 디자인 가이드라인을 살펴보세요.

이 Codelab의 시작 부분에서 클론한 소스 코드에 있는 로고를 업로드해 보겠습니다. 저장소의 ./assets/ 디렉터리에서 찾을 수 있으며 파일 이름은 'bonjour_meal-logo.png'입니다. 웹브라우저에서 파일을 모달로 드래그하면 이미지 품질을 조정하고 자르기를 수행할 수 있는 간단한 편집 도구가 표시됩니다. 이미지 해상도를 조정하고 이미지가 50KB 제약 조건 이하가 되도록 자릅니다. 이미지가 만족스러우면 파란색 원 안의 체크표시를 클릭하여 확인하고 모달 하단의 선택을 클릭합니다.

마지막으로 Agent information(상담사 정보) 페이지 오른쪽 상단의 Save(저장)를 클릭합니다. 에이전트 정보가 Google 서버 내에 캐시되며 변경 후 2시간 이내에 표시되기 때문에 이 변경사항이 기기에 반영되려면 어느 정도 시간이 걸립니다.

환영 메시지 업데이트하기

환영 메시지를 업데이트하는 작업은 이 Codelab의 앞부분에서 이미 했습니다. 다시 시작하지만 이번에는 Bonjour Meal 사용자 여정에 더 적합한 환영 메시지를 구성합니다.

비즈니스 커뮤니케이션 콘솔에서 에이전트를 선택하고 상담사 정보로 이동합니다. 메시지를 업데이트할 수 있는 환영 메시지 입력란이 표시될 때까지 아래로 스크롤합니다.

대화 시작에 도움이 되는 표현을 추가할 것이므로 환영 메시지에서 이를 참조할 수 있습니다. 입력란을 다음 텍스트로 바꿔 보겠습니다.

"Bonjour Meal에 오신 것을 환영합니다. 어시스턴트입니다. Bonjour Meal에 관한 질문에 답변해 드립니다. 다음 옵션을 시도해 보세요.'

마지막으로 Agent information(상담사 정보) 페이지 오른쪽 상단의 Save(저장)를 클릭합니다. 다시 말씀드리지만, 이 변경사항이 반영되려면 캐싱 메커니즘으로 인해 시간이 다소 걸립니다.

영업시간 정보 제공

사용자에게 이 정보를 제공하기 위해 Business Messages API를 사용하여 사용자에게 맞춤 메시지를 전송합니다.

메시지는 views.py의 route_message 함수에서 파싱됩니다. 이 함수는 먼저 문자열을 정규화한 다음 정규화된 메시지가 하드 코딩된 매개변수와 일치하는지 여부를 확인하기 시작합니다. 편의상 정규화된 메시지가 CMD_BUSINESS_HOURS_INQUIRY이라고 부르고 'business-hours-inquiry' 값을 포함할 새 상수와 동일한지 확인하는 조건을 추가해 보겠습니다. 조건이 true로 평가되면 send_message_with_business_hours라는 함수를 호출합니다.

이제 route_message 함수가 다음과 같이 표시됩니다.

bm-django-echo-bot/bopis/views.py

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    else:
        echo_message(message, conversation_id)
...

코드가 작동하려면 두 가지를 더 변경해야 합니다. 첫 번째는 다른 상수와 함께 CMD_BUSINESS_HOURS_INQUIRY를 정의하고, 두 번째는 실제로 send_message_with_business_hours 함수를 정의하고 Business Messages API를 사용하여 메시지를 전송하는 것입니다.

먼저 파일 상단에 다른 상수 선언과 함께 상수를 정의해 보겠습니다.

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...

이제 send_message_with_business_hours를 정의합니다. 이 함수는 적절한 Python 구문에 따라 파일의 아무 곳에서나 정의할 수 있습니다. 이 함수는 echo_message과 마찬가지로 단순히 메시지를 전송하므로 이 함수를 정의하는 템플릿으로 사용할 수 있습니다.

bm-django-echo-bot/bopis/views.py

...
def send_message_with_business_hours(conversation_id):

    message = '''Thanks for contacting us! The hours for the store are:\n
    MON 8am - 8pm\n
    TUE 8am - 8pm\n
    WED 8am - 8pm\n
    THU 8am - 8pm\n
    FRI 8am - 8pm\n
    SAT 8am - 8pm\n
    SUN 8am - 8pm
    '''

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

이를 통해 사용자가 '영업시간 문의'라는 메시지를 보낼 때 봇은 이 영업시간으로 응답할 수 있어야 합니다. 다음과 같은 상황을 예상할 수 있습니다.

소스 코드를 GCP에 배포하면 변경사항이 즉시 표시됩니다. Google은 에이전트 정보가 캐시되는 것과 동일한 방식으로 Google Cloud Platform의 웹 애플리케이션을 캐시하지 않으므로 이 환경을 바로 테스트할 수 있습니다.

소스를 변경하는 데 어느 정도 모멘텀을 얻고 있지만 사용자가 온라인 쇼핑에 관해 문의할 수 있도록 한 가지를 더 수정해 보겠습니다. 디지털 상담사가 이 기능을 아직 사용할 수 없다고 응답할 것입니다. 이 기능은 나중에 다시 확인해 주세요.

사용자에게 온라인 쇼핑이 곧 제공될 것이라고 알림

사용자에게 영업시간을 알리기 위해 했던 것과 유사한 방식으로 수정합니다. 이번에는 흥미로운 이미지와 함께 리치 카드에 정보를 배치해 보겠습니다.

정규화된 메시지를 파싱하고 조건이 참이면 send_online_shopping_info_message을 호출하는 'online-shopping-inquiry'에 값이 설정된 CMD_ONLINE_SHOPPING_INQUIRY 상수의 조건을 확인합니다.

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    else:
        echo_message(message, conversation_id)
...

이제 send_online_shopping_info_message를 정의합니다. 이 메시지를 이미지가 포함된 리치 카드로 보내려고 하므로 send_rich_card 함수를 복사하여 send_online_shopping_info_message를 정의하는 템플릿으로 사용합니다.

먼저 적절한 메시지가 포함되도록 대체 텍스트를 업데이트해야 합니다. 어떤 이유로든 기기에서 리치 카드를 받을 수 없는 경우 대체 텍스트가 사용됩니다. 그런 다음 관련 제목, 설명, 추천, 미디어 필드를 포함하도록 BusinessMessagesRichCard를 업데이트해야 합니다. 함수는 다음과 같아야 합니다.

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
    fallback_text = ('Online shopping will be available soon!')

    rich_card = BusinessMessagesRichCard(
        standaloneCard=BusinessMessagesStandaloneCard(
            cardContent=BusinessMessagesCardContent(
                title='Online shopping info!',
                description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
                suggestions=[],
                media=BusinessMessagesMedia(
                    height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                    contentInfo=BusinessMessagesContentInfo(
                        fileUrl=SAMPLE_IMAGES[4],
                        forceRefresh=False
                    ))
                )))

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text)

    send_message(message_obj, conversation_id)
...

축하합니다. 이제 Google의 디지털 상담사는 온라인 쇼핑에 관해 문의하는 사용자에게 응답할 수 있습니다. 현재 디지털 상담사는 아직 온라인 쇼핑을 지원하지 않으므로 이 기능이 곧 출시될 것임을 알리는 메시지를 사용자에게 제공합니다. 사용자가 온라인 쇼핑에 관해 문의할 때 디지털 에이전트가 다음과 같이 표시됩니다.

사용자가 영업시간에 대해 문의할 수 있도록 이전에 적용한 변경사항과 마찬가지로, 이 변경사항은 ngrok를 사용하는 경우 또는 코드를 GCP App Engine에 배포하는 즉시 바로 확인할 수 있습니다.

다음 부분에서는 대화 시작 조건과 추천 칩을 사용하여 대화를 행복한 경로로 안내합니다.

칩을 사용하여 대화 유도하기

소스 코드를 일부 변경하고 업데이트된 디지털 에이전트를 배포했지만 사용자가 비즈니스에 대해 문의하기 위해 '영업시간 문의' 또는 '온라인 쇼핑 정보'를 입력할 필요는 없습니다. 대화가 열리면 사용자에게 환영 메시지가 표시될 뿐만 아니라 대화 시작 조건도 표시되도록 대화 시작 조건을 업데이트하겠습니다.

비즈니스 커뮤니케이션 콘솔로 이동하여 에이전트의 상담사 정보 페이지에 액세스합니다. 이전에는 '칩', '카드', '캐러셀'을 위한 대화 시작 조건을 정의했습니다. 여전히 작동하기는 하지만 비즈니스 기능과는 더 이상 관련이 없습니다. 이러한 다양한 기능을 계속 표시하거나 삭제하여 디지털 에이전트가 Bonjour Meal 비즈니스를 위한 대화 주제 문구를 표시하도록 할 수 있습니다.

새로운 대화 주제 2개를 만들겠습니다. 첫 번째 요청의 경우 텍스트를 '영업시간은 몇 시인가요?'로 설정하고 포스트백 데이터를 '영업시간 문의'로 설정합니다. 두 번째 대화 시작 조건으로 텍스트를 '여기에서 구매할 수 있나요?'로 설정하고 포스트백 데이터를 'online-shopping-info'로 설정합니다.

결과는 다음 스크린샷과 같은 구성입니다.

비즈니스 커뮤니케이션 콘솔의 다른 변경사항과 마찬가지로 이 변경사항이 휴대기기에 적용된 사항을 확인하려면 시간이 다소 걸립니다.

대화 시작을 마쳤으므로 이제 대화가 시작되면 사용자를 행복한 경로로 안내하는 방법도 필요합니다. 메시지가 전송된 후 상황에 맞게 칩을 사용하여 디지털 에이전트가 할 수 있는 다른 기능을 사용자에게 안내할 수 있습니다. 따라서 사용자가 영업시간이나 온라인 쇼핑에 관해 문의할 때마다 상담사에게 다른 조치를 취하라는 제안이 포함된 메시지를 보냅니다.

함수 끝에 다음을 추가합니다.

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Business hours',
                postbackData='business-hours-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Can I purchase online?',
                postbackData='online-shopping-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

BusinessMessagesSuggestion 내의 텍스트 필드는 문서에 설명된 대로 25자(영문 기준)로 제한됩니다.

대화 주제 업데이트와 추천 칩의 전략적 사용을 감안하여 예상되는 사용자 환경의 스크린샷은 다음과 같습니다.

6. 축하합니다

축하합니다. 첫 번째 Business Messages 디지털 에이전트를 빌드했습니다.

Business Messages에서 디지털 에이전트를 지원하는 웹 애플리케이션을 배포하고 비즈니스 커뮤니케이션 콘솔을 사용하여 에이전트를 수정했으며 소스 코드를 변경하여 디지털 에이전트로 사용자 경험을 구성했습니다.

대화형 Business Messages 환경을 구축하는 데 필요한 주요 단계와 지금부터 그 가능성에 대해 알아보았습니다. 에이전트를 확장하여 인벤토리 조회를 지원하거나 장바구니를 소개하여 사용자가 관심을 가질 만한 제품을 추적할 수 있습니다. 캐러셀을 사용하여 메뉴의 항목을 표시하고 추천을 사용하여 사용자가 관심 있는 항목을 선택하도록 할 수 있습니다.

이 그림은 어떤 모습일 수 있을지에 대한 티저입니다.

우수한 대화형 환경을 구축하려면 어떻게 해야 하나요?

가장 좋은 상담사는 사용자에게 상황 정보를 제공하는 동시에 대화를 통해 기능을 제공하여 사용자가 일반적으로 전화나 직접 대면하듯이 비즈니스에 참여하고 상호작용할 수 있도록 합니다. 다음 주제가 함께 일하는 비즈니스와의 대화에 어떻게 적용될 수 있는지 생각해 보세요.

맥락 제공 및 기대치 설정

맥락을 제공하는 것은 사용자를 어떻게 도울 수 있는지 명시적으로 언급하는 것에서부터 사용자가 공감할 수 있는 캐릭터를 가지고 디지털 상담사를 소개하는 것에 이르기까지 무엇이든 가능합니다. Business Messages에서 성공적인 상담사는 대표 아바타를 사용하여 사용자에게 대화하고 있는 대상을 보여줍니다.

기대치 설정은 빌드 중인 사용자 환경에 따라 달라집니다. 예를 들어 상담사가 인벤토리 조회를 지원하는 경우 답변을 제공하기 전에 먼저 이용 가능 여부가 낮을 수 있음을 사용자에게 알립니다.

사용자에게 기능 제공

소비자는 항상 비즈니스와 연결됩니다. 주문 상태 확인과 같은 문의에서 상품의 재고 확인에 이르기까지 Business Messages는 복잡한 사용자 상호작용을 지원할 수 있습니다. 비즈니스 웹사이트에서 답변을 찾을 수 있더라도 많은 사용자가 계속해서 전화를 통해 비즈니스에 전화를 걸고 있습니다. 그 결과 비즈니스는 특히 연휴 기간에는 통화량을 처리하기 위해 더 많은 리소스를 투자해야 합니다.

사용자의 참여 유지하기

사용자가 대화에 계속 참여할 수 있도록 대화형 터치 포인트를 제공합니다. 메시지 중간에 입력 표시기를 호출하여 사용자의 답변을 처리하고 있음을 사용자에게 알릴 수 있습니다.

입력 표시기, 추천 칩, 리치 카드, 캐러셀과 같은 다양한 기능을 사용하면 사용자에게 만족스러운 경로 사용자 환경을 안내하여 항목 메뉴에서 주문하는 등의 특정 작업을 완료하도록 할 수 있습니다. 업체의 전화 회선으로 걸려 오는 통화 트래픽을 줄이는 것이 목표입니다.

대화가 사용자에게 기능을 제공하는 것이 중요합니다. 메시지 기능을 통해 비즈니스와 소통하는 사용자는 질문에 신속하게 답변을 받기를 기대합니다. 이상적인 상황이 아닌 경우 디지털 상담사가 대화를 촉진할 수 없어 부정적인 사용자 경험으로 이어질 수 있습니다. 다행히 이를 해결할 수 있는 방법이 있습니다. 예를 들어 대화를 실시간 에이전트로 전송하는 방법이 있으며, 이 내용은 향후 Codelab에서 다룹니다.

다음 단계

준비가 되면 다음 주제를 확인하여 Business Messages에서 수행할 수 있는 더 복잡한 상호작용에 관해 알아보세요.

온라인 구매 후 매장 수령: Bonjour Meal - 1부 - 시작하기

1. 소개

Business Messages에 오신 것을 환영합니다.

좋은 디지털 상담사의 조건

빌드할 항목

학습할 내용

필요한 항목

2. 설정

API 사용 설정

서비스 계정 만들기

Django Python EchoBot 시작 코드 배포

웹북 구성

3. 첫 번째 에이전트 만들기

비즈니스 커뮤니케이션 개발자 콘솔 사용

첫 대화 시작하기

환영 메시지 업데이트 및 대화 칩 사용하기

4. 시작 코드 분석

3,000m 높이의 소스 코드 보기

bm-django-echo-bot/bmcodelab/urls.py[31~37행]

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py[302~309행]

bm-django-echo-bot/bopis/views.py [60~101행]

bm-django-echo-bot/bopis/views.py [105~122행]

bm-django-echo-bot/bopis/views.py [40~42행]

메시지 보내기

bm-django-echo-bot/bopis/views.py [199~212행]

bm-django-echo-bot/bopis/views.py [214~236행]

5. 에이전트 맞춤설정

로고 포함

환영 메시지 업데이트하기

영업시간 정보 제공

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

사용자에게 온라인 쇼핑이 곧 제공될 것이라고 알림

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

칩을 사용하여 대화 유도하기

bm-django-echo-bot/bopis/views.py

6. 축하합니다

우수한 대화형 환경을 구축하려면 어떻게 해야 하나요?

맥락 제공 및 기대치 설정

사용자에게 기능 제공

사용자의 참여 유지하기

다음 단계

참조 문서