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

1. 소개

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

비즈니스 메시지에 오신 것을 환영합니다!

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

무슨 이유로 이곳에 왔든 이 Codelab은 시작하기에 좋은 방법입니다. 이 과정을 마치면 사용자가 상호작용할 수 있는 첫 번째 디지털 에이전트가 만들어집니다. 조금 더 다듬은 후 Business Messages에서 출시할 준비가 되면 수백만 명의 고객에게 도달할 수 있습니다.

참고: 비즈니스 커뮤니케이션 개발자 콘솔을 통해 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로 카드, 캐러셀, 대화형 제안과 같은 리치 기능을 전송하는 방법
• 비즈니스 메시지에서 메시지를 전송하는 방법

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

필요한 항목

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

2. 설정

참고: Business Communications API를 사용하여 이 Codelab에서 안내하는 모든 작업을 완료할 수 있지만, 여기서는 Business Communications 개발자 콘솔을 활용하여 현재 작업의 복잡성을 줄입니다. 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의 계정 설정 페이지에서 웹훅 URL을 설정합니다.

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

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

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

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'를 보내면 리치 카드가 호출됩니다.
• '칩'을 보내면 추천 칩이 호출됩니다.
• '캐러셀'을 보내면 리치 카드 캐러셀이 호출됩니다.

축하합니다. 에이전트가 처음으로 나누는 대화입니다.

각 리치 기능을 사용하면 에이전트와 소통하는 사용자에게 더 나은 컨텍스트를 제공할 수 있습니다. 리치 카드에 그래픽 애셋을 보내 아이디어를 더 효과적으로 전달하거나 추천 칩을 사용하여 대화를 유도합니다.

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

개발자 콘솔을 사용해 보고, 에이전트의 환영 메시지를 수정하고, 제안 칩을 활용하여 사용자가 소통할 수 있도록 지원하는 방법을 알아보겠습니다.

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

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

Bonjour Meal 스타터 에이전트에 오신 것을 환영합니다. 메시지를 에코하고 플랫폼에서 지원되는 다양한 기능을 보여드릴 수 있습니다. 다음 제안을 시도해 보세요.

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

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

콘솔 오른쪽에 에이전트가 어떻게 표시되는지 미리보기가 표시됩니다. 환영 메시지가 방금 변경한 내용과 그 아래에 있는 추천 칩을 반영하는 것을 확인하세요.

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

비즈니스 메시지 인프라 내에 이전 데이터가 캐시되어 있으므로 이러한 변경사항이 대화에 즉시 반영되지는 않습니다. 캐시는 약 2시간마다 지워지므로 내일 시도해 볼 수 있습니다.

그동안 내부적으로 어떻게 작동하는지 살펴보겠습니다.

4. 시작 코드 분석

선택사항: 이 섹션은 순전히 정보 제공용입니다. 소스 코드를 함께 살펴보는 동안 Django에 대해 조금 배우고, 웹훅에서 메시지를 수신하는 방법과 Python API를 사용하여 응답을 다시 보내는 방법에 대해서도 알아볼 수 있습니다.

소스 코드의 개요

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

시작 코드는 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.")
...

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

이는 중요한 기능입니다. 이 로직은 에이전트와 상호작용하는 사용자로부터 메시지를 수신하는 웹 애플리케이션의 웹훅입니다. 웹훅을 확장하여 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로 전송하고, 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 함수에 전달된 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의 나머지 부분에서는 다음과 같이 에이전트를 확장합니다.

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

Google에서는 Business Communications Console을 활용하여 로고와 환영 메시지를 업데이트하지만, 언제든지 Business Communications API를 직접 사용하여 동일한 작업을 할 수 있습니다. 그런 다음 영업시간에 대한 정보를 제공하고 Bonjour Meal에서 곧 온라인 쇼핑 기능을 제공할 것이라는 적절한 메시지를 보내도록 소스 코드를 업데이트해야 합니다. 이 작업이 완료되면 비즈니스 커뮤니케이션 콘솔로 돌아가 디지털 에이전트가 지원하는 해피 패스 환경으로 대화를 안내하는 데 도움이 되는 대화형 제안 칩을 만듭니다.

로고 포함하기

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

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

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

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

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

환영 메시지 업데이트

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

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

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

'Bonjour Meal에 오신 것을 환영합니다. Bonjour Meal에 관해 궁금한 점이 있으면 도와드릴 수 있습니다. 다음 옵션 중 일부를 사용해 보세요.'

마지막으로 상담사 정보 페이지 오른쪽 상단의 저장을 클릭합니다. 다시 말씀드리지만, 신속한 처리를 위해 캐싱 메커니즘이 적용되어 있어 변경사항이 반영되는 데 시간이 다소 걸립니다.

영업시간 정보 제공

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

메시지는 views.py의 route_message 함수에서 파싱됩니다. 이 함수는 먼저 문자열을 정규화한 다음 정규화된 메시지가 하드 코딩된 매개변수와 일치하는지 확인합니다. 간단하게 하기 위해 정규화된 메시지가 CMD_BUSINESS_HOURS_INQUIRY라는 새 상수와 동일한지 확인하는 조건을 추가합니다. 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라는 상수의 조건을 확인합니다. 조건이 참이면 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)
...

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

사용자가 영업시간을 문의할 수 있도록 이전에 변경한 것과 마찬가지로, ngrok을 사용하는 경우 이 변경사항이 즉시 표시되며 코드를 GCP App Engine에 배포하는 즉시 표시됩니다.

다음 파트에서는 대화 시작 문구와 제안 칩을 사용하여 대화를 최적의 경로로 안내합니다.

칩을 사용하여 대화 안내하기

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

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

새로운 대화 시작 도구 2개를 만들 예정입니다. 첫 번째 질문의 경우 텍스트를 '영업시간이 어떻게 되나요?'로 설정하고 포스트백 데이터를 'business-hours-inquiry'로 설정합니다. 두 번째 대화 시작의 경우 text를 '여기에서 구매할 수 있나요?'로 설정하고 Postback data를 '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 환경을 빌드하는 데 필요한 주요 단계를 알게 되었으며 앞으로의 가능성은 무궁무진합니다. 사용자가 관심을 가질 만한 항목을 추적하기 위해 인벤토리 조회를 지원하거나 장바구니를 도입하도록 에이전트를 확장할 수 있습니다. 캐러셀을 사용하여 메뉴에 있는 항목을 표시하고 제안을 사용하여 사용자가 관심 있는 항목을 선택하도록 할 수 있습니다.

다음은 이러한 기능의 예시입니다.

효과적인 대화형 환경을 빌드하려면 어떻게 해야 하나요?

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

맥락 제공 및 기대치 설정

맥락을 제공하는 방법은 사용자를 도울 수 있는 방법을 명시적으로 설명하는 것부터 사용자가 공감할 수 있는 페르소나로 디지털 상담사를 소개하는 것까지 다양합니다. 비즈니스 메시지의 성공적인 상담사는 대표 아바타를 사용하여 사용자와 대화하는 상대방을 보여줍니다.

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

사용자에게 기능 제공

소비자는 항상 비즈니스와 소통합니다. 주문 상태 확인과 같은 문의부터 상품 재고 확인까지 비즈니스 메시지는 복잡한 사용자 상호작용을 지원할 수 있습니다. 비즈니스 웹사이트에서 답변을 확인할 수 있음에도 불구하고 많은 사용자가 전화로 비즈니스에 문의하여 답변을 얻습니다. 따라서 기업은 특히 휴일 동안 통화량을 처리하기 위해 더 많은 리소스를 투자해야 합니다.

사용자의 재이용 유도

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

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

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

다음 단계

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

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

참조 문서

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