Google Assistant - Interactive Canvas (Intro)

구글 어시스턴트(Google Assistant)는 다양한 행동과 통합을 제공하는 개인 음성 비서다.
이런 구글 어시스턴트를 사용하여 어떠한 앱을 실행시킬 때에,
캔버스를 이용하여 시각적 다양화를 도모할 수 있다.

목표

• interactive canvas란?
• interactive canvas가 어떻게 움직이는가?
• interactive canvas를 이용하여 액션(action)을 만들기

intro

I/O'19에서 구글은 Interactive canvas라고 하는 Assistant-based-framework를 발표했다.
이것은 개발자들이 스마트 디스플레이에 터치 입력과, 음성, 비주얼적인 것이 제공되는 풀스크린 앱을 만들 수 있도록 해주었다.
한동안은 Actions를 이용한 스마트 디스플레이용 게임이 캔버스를 사용하여 많이 개발될 것으로 보인다.

하지만, Canvas는 오픈 웹 기술인 HTML, CSS, Javascript를 사용하므로 엄청나게 복잡한 게임을 기대하기는 어렵다.
해당 게임들은 일종의 웹 앱으로 생각해야 할 것이다.

Interactive Canvas란?

개발자들이 어떠한 대화적 행동에 대하여 비주얼이나 몰입 경험을 추가할 수 있도록 해 주는 것이다.
고전적인 in-line 방식의 어시스턴트 대화와는 달리, interactive canvas는 풀스크린 웹 뷰를 렌더한다.

다음과 같은 액션에 대하여 Interactive Canvas를 활용할 수 있다.

• 풀스크린 비주얼 만들기
• 커스텀 애니메이션과 트랜지션 만들기
• 데이터 시각화
• 비디오 플레이백 삽입(재생은 될 테지만, 아직 완성형은 아니라고 한다.)

어떻게 작동하지?

Interactive Canvas는,
어떤 conversational Action과 interactive web app을 연결지어서,
사용자가 음성이나 터치 등으로 웹 앱의 visual user interface와 상호작용 할 수 있게 한다.

Interactive Canvas를 사용하는 액션(Actions)은 총 4가지 컴포넌트가 있다.

1. 커스텀 Conversational Action

2. 웹 앱

3. Assistant Canvas

4. Immersive Response

   1) 커스텀 Conversational Action
   사용자의 요청을 수행하기 위하여 대화 인터페이스를 사용하는 Action이다.
   이 Action은 기본적으로 Conversational Action과 같은 원리로 동작하지만,
   다양한 카드나 간단한 텍스트 및 음성 응답 대신에, 몰입형 웹 뷰를 사용하여 응답을 렌더링한다.

   2) 웹 앱
   대화 중 사용자의 응답으로써 사용자의 Action이 전송되는, 커스텀화된 비주얼 기능을 갖춘 front-end 웹 앱.
   HTML, CSS, Javascript 등을 사용하여 개발한 웹 앱이 Conversational Action과 의사소통할 수 있도록 빌드한다.

   3) Assistant Canvas
   빌드한 웹 앱이 conversational Action과 의사소통할 수 있게 웹 앱에 포함시키는 Javascript API를 말한다.

   4) Immersive Response
   웹 앱이 어떤걸 렌더해야할 지 정의하는 응답 유형이다.

   

    1. 사용자가 device에 말을 한다.
    2. Actoins on Google로 사용자 읩력이 전달된다.
    3. Actions on Google이 dialog flow를 호출한다.
    4. 사용자 입력 문장을 기반으로 dialog flow가 화자의도를 매칭한다. 
    5. immersive response를 제공하는 관련 fullfillment를 호출한다.
    6. immersive response의 일부로 응답에는 URL이 포함되어 제공된다.
    7. device가 연관된 웹앱을 URL로부터 로드한다.
    8. 동시에 Interactive Canvas API로부터 몇몇 콜백을 등록한다.(fulfillment로부터 받게 될 특정 response 처리를 위한 콜백)

Interactive Canvas로 Action 만들기

해당 튜토리얼은 구글 I/O'19에서 발표한 레포를 토대로 진행한다.
튜토리얼 repo

Actions 프로젝트 만들기

빌드하고 있는 어시스턴트 앱과 무관하게,
앱이 기본 조직 단위를 가지도록 항상 Actions 프로젝트를 생성하여야 한다.

먼저, 브라우저에서 Actions on Google Developer Console을 연다.
신규 사용자라면 콘솔이 깨끗하게 비워져 있을 것이다.

Add/Import project를 누르고 서비스 사용에 대한 조건에 동의를 한다.
프로젝트 이름 필드를 클릭하고, 프로젝트 이름을 추가한다.
예제 프로젝트 명은 Interactive Canvas로 한다.

Games & fun 을 선택한다.

Conversational을 선택한다.

선택한 뒤, Deploy의 Directory Infromation을 클릭하고,
앱 카테고리가 Games & Fune으로 된 것을 스크롤 다운으로 볼 수 있다.

Interactive Canvas를 체크하여 활성화한다.

저장한 뒤, Overview로 가서 Build your Actions를 시작한다.

1. ADD YOUR FIRST ACTION을 클릭한다.
2. 팝업이 뜨면, PLAY GAME을 선택하고, GET STARTED IN DIALOG FLOW에서 시작하면 된다.

Dialog Flow

구글 계정에 대한 접근 허가를 해 준다.
허가 후, CREATE를 시작하면 아래와 같은 화면이 나올 것이다.

actions.intent.PLAY_GAME을 클릭하면 아래와 같은 이벤트를 볼 수 있다.

google tutorial repo의 README에 따라 진행해보자면,
Settings ⚙ > Export and Import > 샘플 디렉토리의 agent.zip을 Restore from zip하는 순서이다.

Restore가 끝나면, 다음과 같이 intents가 자동생성된 것을 알 수 있다.

intents

color intent를 클릭하면 training phrase도 잘 생성된 것을 알 수 있다.

하단의 Fulfillment 부분에 Enable webhook call for this intent를 활성화시킨 후 SAVE를 해 준다.

다른 intents들도 한번씩 클릭하여 들어가본 뒤,
Enable webhook call for this intent를 활성화가 되어있는지 확인해준다.

Timer intent
Response를 선택하여, 아래와 같은 코드가 기본 response로 되도록 입력되었는지 확인한다.
다른 intents와 마찬가지로 webhook에 대하여 활성화시킨 후 저장한다.

{
  "google": {
    "richResponse": {
      "expectUserResponse": true,
      "items": [
        {
          "simpleResponse": {
            "textToSpeech": "I'll ask again in 5 seconds."
          }
        },
        {
          "immersiveResponse": {
            "updatedState": {
              "timer": 5
            },
            "suppressMic": true
          }
        }
      ]
    }
  }
}

Backend

Firebase Deployment

1. 로컬에서 clone한 tutorial repo의 functions 디렉토리로 가서 npm install 실행해준다.

   주의사항

   새로운 interactive canvas 프로젝트를 만들 때에는, actions-on-google 라이브러리를 설치해야만 한다.
   Developer Preview Version을 설치해야 하는데, npm install actions-on-google@preview로 하면 된다.

2. firebase deploy --project {PROJECT_ID}를 실행하여 함수를 배포하고 hosting 한다.
   Project ID는 In Dialogflow console under Settings ⚙ > General tab > Project ID로 찾을 수 있다.

Dialogflow Console

1. Dialogflow Console로 돌아간다.
2. Fulfillment 선택한다.
3. Webhook 활성화한다.
4. deploy command로 반환된 Firebase Function URL로 URL을 설정한다.
5. 왼쪽의 네비게이션 메뉴에서 Integrations > Google Assistant 아래의 Integration Settings > Auto-preview changes 활성화 > TEST를 눌러서 Actions on Google simulator를 열어서 말하거나 타이핑해서 Talk to my test app을 Test
6. debug overlay를 숨기고 싶으면, public/css/main.css의 /* Uncomment below to disable the debug overlay */ 아래의 코드들을 주석처리 하면 된다.

참고