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

1. 소개

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

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

이 Codelab에서는 고객이 Google 검색 및 지도에서 관리하는 비즈니스와 소통할 수 있는 비즈니스 메시지와의 통합을 소개합니다. Business Messages와 직접 통합하려는 비즈니스일 수도 있고, 협력하는 비즈니스를 위해 메시지 솔루션을 구축하는 독립 소프트웨어 공급업체에서 근무하고 있을 수도 있으며, Business Messages를 우연히 발견하고 플랫폼을 조정하고 싶을 수도 있습니다.

어떤 이유로 이 페이지에 오셨든 이 Codelab은 시작하기에 좋은 방법입니다. 과정이 끝나면 사용자가 상호작용할 수 있는 첫 번째 디지털 상담사가 생성됩니다. 조금 더 다듬은 후 Business Messages에서 출시할 준비가 되면 수백만 명의 고객에게 도달할 수 있습니다.

참고: Business Communications Developer Console을 통해 Business Messages에 등록하여 시작하세요.

참고: Google I/O에서 이 Codelab에 참여하는 경우 안녕하세요. 이 Codelab에서는 Business Messages 플랫폼을 사용하는 방법을 안내하고 Business Messages 대화형 노출 영역을 통해 메시지를 수신하고 전송하는 방법을 엔드 투 엔드로 설명합니다.

좋은 디지털 상담사는 어떤 상담사일까요?

비즈니스 메시지는 소비자가 추가 앱을 설치하지 않고도 비즈니스와 소통할 수 있는 모바일 기기의 앱과 같은 환경을 제공하는 대화형 플랫폼입니다. 디지털 상담사는 고객이 상호작용하는 로직입니다. 이 로직은 클라우드 또는 인프라에 배포된 웹 애플리케이션에서 관리합니다. 사용자에게 어떻게 응답할지는 전적으로 개발자에게 달려 있습니다. 우수한 상담사는 기대치를 설정하고, 고객의 참여를 유도하며, 사용자의 니즈를 지원하는 기능을 제공하는 맥락을 제공합니다.

빌드할 항목

이 Codelab에서는 가상의 회사인 Bonjour Meal을 위해 Business Messages에서 디지털 에이전트를 빌드합니다. 이 디지털 상담사는 '폐점 시간이 언제인가요?' 또는 '온라인으로 구매할 수 있나요?'와 같은 간단한 질문에 응답합니다.

이 Codelab에서는 사용자가 디지털 상담사를 통해 상품을 구매하고, 결제 처리자를 안내하여 대금을 수취한 후 매장에서 가상의 상품을 수령하도록 예약할 수 있습니다.

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

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

참고: 이 Codelab 과정을 간단하게 진행하고 뛰어난 Business Messages 환경 빌드에 필요한 기본 사항을 설명하기 위해 여기에서는 Google Cloud Platform(GCP)을 사용해서 에이전트 인프라 지원을 위한 웹 애플리케이션을 배포합니다. GCP는 웹 애플리케이션을 배포할 때 훌륭한 옵션 중 하나지만 반드시 이를 따를 필요는 없습니다.

학습할 내용

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

이 Codelab에서는 첫 번째 디지털 에이전트를 빌드하는 방법을 중점적으로 설명합니다.

필요한 항목

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

2. 설정

참고: Business Communications API를 사용하여 이 Codelab에서 안내하는 모든 작업을 완료할 수 있습니다. 하지만 이 Codelab에서는 Business Communications Developer Console을 활용하여 작업의 복잡성을 줄입니다. API를 사용할 수 있는 옵션이 제공되면 문서에서 알려드리고 참조할 수 있도록 할 예정입니다.

API 사용 설정

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

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

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

서비스 계정 만들기

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을 사용하여 Business Communications Developer Console의 계정 설정 페이지에서 webhook URL을 설정합니다.

웹훅 URL은 애플리케이션의 URL + '/callback/'입니다. 예를 들어 https://PROJECT_ID.appspot.com/callback/과 같을 수 있습니다.

Business Communications Console 계정 설정 페이지로 이동합니다. 오른쪽 상단의 탐색 메뉴 아래에 GCP 프로젝트 이름이 표시됩니다. 드롭다운이 표시되면 GCP 프로젝트를 선택해야 합니다.

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

GCP 프로젝트 참조 옆에 있는 저장을 클릭합니다.

3. 첫 번째 상담사 만들기

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

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

브랜드에 만들 브랜드의 이름을 입력합니다.브랜드는 내가 협업하는 비즈니스이며 소비자가 상담사와 대화식으로 상호작용할 수 있습니다. 상담사 이름에서 사용자에게 Business Messages 대화에서 표시할 이름을 지정합니다. 가상의 Bonjour Meal의 경우 Bonjour Rail은 Bonjour Meal 레스토랑을 관리하는 철도 회사입니다. 따라서 Bonjour Rail을 브랜드로, Bonjour Meal을 상담사로 지정합니다.

에이전트는 브랜드를 대신하여 소비자와 대화하는 대화형 항목입니다.

에이전트 만들기를 클릭하면 콘솔에서 자동으로 에이전트를 만듭니다. 이 요청은 비즈니스 커뮤니케이션 API에 여러 번 요청하여 브랜드와 상담사를 만드는 데 몇 초가 걸립니다. Business Communications API를 직접 사용하여 상담사를 만들고 브랜드를 만들 수 있습니다. 문서에서 콘솔에서 실행하는 것과 동일한 작업을 curl 요청으로 실행하는 방법을 확인하세요.

첫 대화 시작하기

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

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

휴대기기에서 링크를 탭하면 에이전트 테스트 URL이 자동으로 입력된 Business Messages 상담사 런처가 실행됩니다.

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

에이전트와 상호작용하고 에이전트가 어떤 기능을 할 수 있는지 알아보세요. 대부분의 경우 대화형 노출 영역은 개발자의 메시지만 반영합니다. 'Hello, World!'와 같은 메시지를 보내면 상담사가 동일한 메시지를 다시 보내 줍니다.

배포된 애플리케이션에는 비즈니스 메시지에서 사용할 수 있는 다양한 기능을 보여주는 로직도 포함되어 있습니다.

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

축하합니다. 상담사가 고객님과 나누는 첫 번째 대화입니다.

각 풍부한 기능을 사용하여 상담사와 소통하는 사용자에게 더 나은 맥락을 제공할 수 있습니다. 리치 카드로 그래픽 애셋을 전송하여 아이디어를 더 효과적으로 전달하거나 추천 칩을 사용하여 대화를 유도하세요.

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

Developer Console을 사용하여 상담사의 환영 메시지를 수정하고 추천 칩을 활용하여 사용자가 소통할 수 있도록 지원하는 방법을 알아보겠습니다.

상담사 개요 페이지로 이동하여 상담사 정보를 선택합니다. 환영 메시지 및 대화 시작 문구 섹션까지 아래로 스크롤합니다.

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

Bonjour Meal starter 상담사님, 안녕하세요. 고객님의 메시지를 전달하고 플랫폼에서 지원되는 다양한 기능을 보여드리겠습니다. 다음 제안을 사용해 보세요.

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

수정 후 콘솔의 상담사 정보는 다음과 같이 표시됩니다.

콘솔 오른쪽에 상담사의 모습이 미리 표시됩니다. 시작 메시지가 방금 변경한 내용과 그 아래에 있는 추천 칩을 어떻게 반영하는지 확인해 보세요.

이 도구는 사용자 환경을 파악하는 데 유용합니다. 에이전트를 빌드하고 지원하려는 사용자 여정을 계획하는 동안 사용할 수 있습니다.

안타깝게도 이전 데이터가 비즈니스 메시지 인프라 내에 캐시되어 이러한 변경사항이 대화에 즉시 반영되지는 않습니다. 캐시는 약 2시간마다 삭제되므로 내일 다시 시도해 보세요.

그동안 내부에서 작동하는 방식을 살펴보겠습니다.

4. 시작 코드 분석

선택사항: 이 섹션은 참고용입니다. 소스 코드를 함께 살펴보면서 Django에 대해 조금 알아보고 webhook에서 메시지가 수신되는 방식과 Python API를 사용하여 응답이 다시 전송되는 방식에 관해 알아볼 수 있습니다.

소스 코드의 개요

배포한 시작 코드는 사용자에게 메시지를 다시 반향하고 리치 카드, 캐러셀 또는 추천 칩을 표시할 수 있습니다. 작동 방식을 이해할 수 있도록 소스 코드를 자세히 살펴보겠습니다. 그런 다음 변경해야 할 사항을 파악합니다.

시작 코드는 Django 프로젝트입니다. 이 Codelab 시리즈의 후반부에서는 Google Datastore를 사용하여 장바구니 및 관련 대화와 같은 데이터를 보존합니다. 이전에 Django를 사용해 본 적이 없다면 걱정하지 마세요. Django는 매우 간단하며 이 Codelab을 마치면 Django의 작동 방식을 알게 됩니다.

대략적으로 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.")
...

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

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

비즈니스 메시지는 메시지 콘텐츠를 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 라이브러리가 있습니다. 또한 인프라가 라이브러리가 있는 언어가 아닌 경우 직접 요청할 수 있는 REST API도 있습니다. 메시지 보내기를 참고하여 cURL을 사용하여 특정 대화 ID로 메시지를 보내는 방법을 알아보세요.

이 Codelab에서는 GCP 프로젝트의 App Engine에 배포되었거나 ngrok을 통해 로컬에서 실행 중인 Bonjour Meal 시작 코드에 이미 통합된 Python 클라이언트 라이브러리를 사용하는 방법을 중점적으로 살펴봅니다.

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 함수는 서비스 계정 사용자 인증 정보를 사용하여 이 대화에 메시지를 보낼 수 있는지 확인하고, 비즈니스 메시지 클라이언트를 인스턴스화하고, 지정된 conversation ID에 메시지를 보내기 위한 요청을 만드는 작업만 실행합니다.

서식 있는 기능도 이 send_message 함수를 사용하지만 생성되는 메시지는 리치 카드, 캐러셀, 추천 칩에만 해당합니다. 리치 카드와 캐러셀에는 그래픽 애셋이 포함될 수 있지만 추천 칩에는 콜백 로직이 이를 적절하게 파싱할 수 있도록 postback_data가 있습니다.

이제 메시지를 전송하는 방법을 알아봤으므로 샘플이 리치 카드, 캐러셀, 추천 칩을 전송하는 방법을 살펴보겠습니다. 다음 섹션에서는 이러한 풍부한 기능을 사용하여 메시지를 전송하도록 소스 코드를 수정합니다.

준비가 되면 Bonjour Meal 에이전트를 맞춤설정하겠습니다.

5. 에이전트 맞춤설정

지금까지 Codelab을 따라왔다면 멋진 상담사가 표시됩니다.

괜찮습니다. 하지만 깔끔하지는 않고 비즈니스를 잘 나타내지 못하는 것 같습니다. 다행히 상담사를 지원하는 코드에 관한 기본 지식이 있으며 원하는 방식으로 상담사를 맞춤설정하는 데 필요한 도구가 있습니다.

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

• 실제 로고 포함
• 환영 메시지 개선
• 영업시간에 관한 정보 제공
• 사용자에게 온라인 상품 구매 기능이 곧 제공될 예정이라고 알립니다.
• 대화 추천 칩을 사용하여 대화 진행

Google에서는 Business Communications Console을 활용하여 로고와 시작 메시지를 업데이트할 예정이지만, 언제든지 Business Communications API를 직접 사용하여 동일한 작업을 할 수 있습니다. 그런 다음 영업시간 정보와 Bonjour Meal에서 곧 온라인 쇼핑 기능을 제공할 것이라는 정보를 제공하는 적절한 메시지를 전송하도록 소스 코드를 업데이트해야 합니다. 완료되면 Business Communications Console로 돌아가 디지털 상담사가 지원하는 만족스러운 경로 환경으로 대화를 유도하는 대화 추천 칩을 만듭니다.

로고 포함하기

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

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

문서의 로고 디자인 가이드라인을 참고하여 자체 로고 사용에 권장되는 권장사항을 알아보세요.

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

마지막으로 상담사 정보 페이지 오른쪽 상단의 저장을 클릭합니다. 상담사 정보는 Google 서버에 캐시되므로 기기에 반영되기까지 다소 시간이 걸리며 변경 후 2시간 이내에 표시됩니다.

환영 메시지 업데이트

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

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

대화 시작 문구를 추가할 예정이므로 환영 메시지에서 이를 언급할 수 있습니다. 입력란에서 다음 텍스트로 바꾸겠습니다.

"Bonjour Meal에 오신 것을 환영합니다. 저는 Bonjour Meal에 관해 궁금한 점을 도와드릴 수 있는 어시스턴트입니다. 다음 옵션 중 일부를 사용해 보세요."

마지막으로 상담사 정보 페이지 오른쪽 상단의 저장을 클릭합니다. 빠른 속도를 보장하기 위한 캐싱 메커니즘으로 인해 변경사항이 반영되기까지 다소 시간이 걸립니다.

영업시간에 관한 정보 제공

이 정보를 사용자에게 제공하기 위해 Google에서는 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)
...

이렇게 하면 사용자가 'business-hours-inquiry'라는 메시지를 보낼 때 봇이 영업시간으로 응답할 수 있습니다. 다음과 같은 내용이 표시될 수 있습니다.

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

소스 변경을 진행하는 동안 사용자가 온라인 쇼핑에 관해 문의할 수 있도록 한 번 더 수정해 보겠습니다. 디지털 상담사가 아직 이 기능을 사용할 수 없지만 나중에 다시 확인해 달라고 응답합니다.

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

사용자에게 영업시간을 알릴 때와 비슷하게 수정합니다. 이번에는 눈길을 끄는 이미지와 함께 정보를 리치 카드에 배치해 보겠습니다.

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

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의 디지털 상담사가 온라인 쇼핑에 관해 문의하는 사용자에게 응답할 수 있습니다. 현재 Google의 디지털 상담사는 온라인 쇼핑을 지원하지 않으므로 사용자에게 이 기능이 곧 제공될 것이라는 메시지를 제공합니다. 사용자가 온라인 쇼핑에 관해 문의하면 디지털 상담사가 다음과 같이 표시됩니다.

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

다음 부분에서는 대화 시작 문구와 추천 칩을 사용하여 대화를 만족스러운 결과로 이끕니다.

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

소스 코드를 일부 변경하고 업데이트된 디지털 상담사를 배포했지만 사용자가 'business-hours-inquiry' 또는 'online-shopping-info'를 입력하여 비즈니스에 문의할 것으로 예상하지는 않습니다. 대화가 열릴 때 사용자에게 친근한 인사말이 표시될 뿐만 아니라 대화 시작 문구도 표시되도록 대화 시작 문구를 업데이트해 보겠습니다.

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

새로운 대화 시작 문구 2개를 만들겠습니다. 첫 번째의 경우 텍스트를 '영업시간이 어떻게 되나요?'로 설정하고 포스트백 데이터를 'business-hours-inquiry'로 설정합니다. 두 번째 대화 시작 문구의 텍스트를 '여기에서 구매할 수 있나요?'로 설정하고 포스트백 데이터를 'online-shopping-info'로 설정합니다.

다음 스크린샷과 같은 구성이 표시됩니다.

Business Communications Console에서 이루어진 다른 변경사항과 마찬가지로 변경사항이 전파되고 휴대기기에 변경사항이 표시되기까지 다소 시간이 걸릴 수 있습니다.

이제 대화 시작 문구를 작성했으므로 대화가 시작된 후 사용자를 만족스러운 경로로 안내하는 방법도 알아야 합니다. 메시지를 전송한 후 칩을 문맥에 맞게 사용하여 사용자를 디지털 상담사가 제공할 수 있는 다른 기능으로 안내할 수 있습니다. 따라서 사용자가 영업시간 또는 온라인 쇼핑에 관해 문의할 때마다 상담사와 다른 작업을 수행하도록 제안하는 메시지를 전송합니다.

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

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 Communications Console을 사용하여 상담사를 수정했으며, 소스 코드를 변경하여 디지털 상담사의 사용자 환경을 형성했습니다.

이제 양방향 Business Messages 환경을 빌드하는 데 필요한 주요 단계를 알아봤으므로 앞으로 펼쳐질 가능성에 기대가 됩니다. 인벤토리 조회를 지원하도록 상담사를 확장하거나 사용자가 관심을 가질 만한 항목을 추적하는 장바구니를 도입할 수 있습니다. 캐러셀을 사용하여 메뉴에 항목을 표시하고 추천을 사용하여 사용자가 관심 있는 항목을 선택할 수 있도록 허용할 수 있습니다.

다음은 티저입니다.

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

우수한 상담사는 사용자에게 문맥 정보를 제공하는 동시에 대화를 통해 기능을 제공하여 사용자가 평소 전화나 직접 만나서 하는 것처럼 비즈니스에 참여하고 상호작용할 수 있도록 합니다. 다음 주제가 협업 중인 비즈니스와 나누고 싶은 대화에 어떻게 적용될 수 있는지 생각해 보세요.

맥락 제공 및 기대치 설정

맥락을 제공하는 방법에는 사용자가 어떻게 도움을 받을 수 있는지 명시하는 것부터 사용자가 공감할 수 있는 캐릭터로 디지털 상담사를 소개하는 것까지 다양합니다. Business Messages에서 성공적인 상담사는 아바타를 사용하여 사용자에게 자신이 누구와 대화하고 있는지 보여줍니다.

기대치는 빌드하는 사용자 환경에 따라 다릅니다. 예를 들어 상담사가 인벤토리 조회를 지원하는 경우 먼저 사용자에게 재고가 부족할 수 있다고 알린 후 답변을 제공합니다.

사용자에게 기능 제공

소비자는 항상 비즈니스와 소통합니다. 비즈니스 메시지는 주문 상태 확인부터 재고 확인에 이르기까지 복잡한 사용자 상호작용을 지원할 수 있습니다. 많은 사용자가 비즈니스 웹사이트에서 답변을 확인할 수 있음에도 불구하고 비즈니스에 전화를 걸어 질문에 대한 답변을 얻으려고 합니다. 그 결과, 특히 연말연시에는 통화량을 처리하기 위해 기업이 더 많은 리소스를 투자해야 합니다.

사용자의 참여도 유지하기

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

입력 표시기, 추천 칩, 리치 카드, 캐러셀과 같은 풍부한 기능을 사용하여 사용자가 해피 패스 사용자 환경을 통해 상품 메뉴에서 주문과 같은 특정 작업을 완료하도록 안내할 수 있습니다. 목표는 비즈니스의 전화선으로 걸려오는 전화 트래픽을 줄이는 것입니다.

대화에서 사용자에게 기능을 제공하는 것이 중요합니다. 메시지를 통해 비즈니스와 소통하는 사용자는 질문에 빠르게 답변받기를 기대합니다. 바람직하지 않은 상황에서 디지털 상담사가 대화를 진행할 수 없어 사용자 경험이 저하될 수 있습니다. 다행히 대화를 실시간 상담사에게 트랜스퍼하는 등의 해결 방법이 있습니다. 이 방법은 향후 Codelab에서 다룰 예정입니다.

다음 단계

준비되었으면 다음 주제를 체크아웃해서 Business Messages에서 수행할 수 있는 복잡한 상호작용에 대해 자세히 알아보세요.

• 에이전트의 수명 주기: 생성부터 출시까지
• 요구사항 및 가이드라인
• 로고 가이드라인
• 모든 가이드

참조 문서

• SuggestedReply
• Business Messages 메시지 참조 문서
• RichCard에 대한 JSON 정의