음성으로 플레이 가능한 2가지 단어게임 - Google Interactive Canvas API

코드스테이츠 기업 협업 프로젝트

부트캠프 코드스테이츠의 주요 커리큘럼 중 하나인 기업 협업 프로젝트를
"마인드로직"과 함께 진행하게 되었다.

마인드로직

마인드로직은 AI 기술을 활용하여,
감성적인 대화가 가능한 음성기반의 AI 연인 챗봇 서비스를 제공하고 있다.
서비스명은 가상 남친과 가상 여친이다
자세한 사항은 링크를 참조하면 될 것 같다.

프로젝트 소개

프로젝트의 주제는 간단명료하였다.
Google Assistant 상에서 플레이 가능한 2가지 종류의 단어 게임을 개발하는 것이었다.
세부 조건은 다음과 같다.

• Google Interactive Canvas API 이용
• 음성 중심 플레이가 가능한 끝말잇기 / 초성퀴즈 게임
• 가상 남친 / 가상 여친에 사전 구현된 게임의 고도화 스핀 오프 버전
• 독립된 앱으로써 서비스 가능

기존에 제공하던 가상 남친, 여친 서비스에서도 끝말잇기나 초성퀴즈 게임은 플레이가 가능하였다.
하지만 연인 챗봇으로서의 기능 이외에도 해당 게임들의 인기가 높은 점에서 착안하여,
"독립적인 게임 앱으로 파생시켜보는 것이 어떨까" 하는 정신에서 이번 프로젝트가 시작되었다고 한다.

프로젝트 개요

• 작업 기간 : 2019.07.22 ~ 2019.08.16
• 서비스 종류 : Google Assistant on Android, iOS
• 서비스 기능 : 음성 입력으로 플레이 가능한 게임

Google Assistant

구글 어시스턴트.
간단하게는 나만의 인공지능 비서로 원하는 시간에 알람을 설정시키거나 리마인드 시켜달라는 명령을 수행한다.
더 나아가서는, 나의 모든 스케쥴에 대하여 관리해주고 원하는 음악을 검색하여 들려주기까지 하는 똑똑한 녀석이다.

수많은 기능 중에서도 이번 프로젝트에서 선택된 것은 게임이다.

Google Interactive Canvas

구글은 지난 5월 I/0에서
"Interactive canvas"라는 기술을 발표했다.
기존의 어시스턴트가 제공하는 비주얼적인 부분들이 미흡하다는 점에 기인하여서 개발했다고 한다.
아래는 기술을 사용한 예시이다.

사용자가 음성으로써 실행되고 있는 앱의 비주얼적인 변화를 제어할 수 있도록 지원해주는 프레임워크이다.
일반적으로 터치나 타이핑을 통하여 제어하던 방식과는 달리,
음성 입력을 통하여 실제로 보고 있는 화면의 모습을 조작할 수 있다는 것이 가장 큰 특징이다.

작동 원리

대략적인 작동 흐름의 도식은 다음과 같다.

좀 더 자세한 내용이 궁금하면 다음 링크를 참조하면 좋을 것 같다.

사실 이번 프로젝트의 원리는 위의 그림과 정확히 일치하진 않는다.
프로젝트는 아래의 그림처럼 이뤄진다.

    1. 사용자가 디바이스의 구글 어시스턴트를 통하여 음성 입력
    2. SDK로 음성 정보가 전달, SDK는 음성 전보를 텍스트로 변환
    3. 텍스트로 변환된 정보는 django로 구축된 Backend server로 전달
    4. 현재 상태의 논리에 맞게 session 및 word database 검색 후, 계산된 값을 SDK로 되돌려 줌
    5. SDK는 디바이스를 거쳐 최종적으로 Web app에 해당 값들을 전달
    6. Web app은 전달받은 값들을 기준으로 디바이스에 나타낼 모습을 결정

구글에서 제시한 흐름과 차이가 있는 이유는,
DialogFlow를 사용할 경우 구글이 제공하는 자체적인 자연어 처리 엔진을 사용하게 된다.
사용자의 음성 입력이 어떤 의도를 가지고 한 말인지에 대하여,
미리 예상되는 값들을 파악하고 입력하여 사용하는 작업을 DialogFlow에서 수행할 수 있다.

하지만 자체 제공이다 보니,
원하는 대로 조작하기에 자유도가 떨어지기도 하고,
예상만큼 빠르지 않다는 단점도 있다.

무엇보다도 협업 프로젝트를 진행한 마인드로직은 기업 자체의 자연어 처리 엔진이 존재하였으므로,
그것을 활용하여 서비스가 기획되는 것이 앞으로의 확장성이나 관리 측면에서도 유리한 상황이었다.

사용 기술

서비스를 작동을 시키는데 사용되는 각 기술들은 아래의 그림과 같다.

왜 서버를 node.js와 django 두 가지로 사용하나?
사실 서버를 굳이 두 개나 사용하여서 정보를 전달하는 과정을 늘릴 이유는 없다.
하지만 이번 프로젝트에서는 어쩔 수 없이 두 개의 서버를 사용해야만 했다.

이유는 크게 두 가지였다.

1. interactive canvas api의 sdk는 python 언어를 지원하지 않는다!
2. 마인드로직의 메인 프로젝트가 아니므로, 기존에 운영하던 서버 구조를 따라 djnago에 편입되어야 했다.

앞으로도 interactive canvas api의 sdk는 python에 대한 지원 예정이 없다고 하니,
추후 타 프로젝트를 진행할 시에는 sdk 한 곳에서 NLU, database 등을 처리하는 구조로 설계하는 것이 바람직하겠다.

역할

주 역할은
프론트엔드 개발자로서 웹 앱의 구현을 주로 맡게 되었다.
vue.js를 사용하였는데,
주된 기여 항목은 다음과 같다.

1. 화면에 보여줄 web app의 전체적인 구조 설계 담당 (조건부 렌더)
2. 서버로부터 받게 될 data의 중앙 집중식 관리 구현 (vuex store)

프로젝트 결과물

프로젝트의 결과물로서 완성된 베타 버전의 게임 앱 구동 영상을 첨부하였다.
이미지를 클릭하면 해당 영상의 링크로 이동한다.