Clova Extension 음성기반 게임 기획 및 설계 / FaaS를 이용한 개발

FaaS를 이용한
Clova Extension 개발
Clova Platform Evangelist
옥상훈
2018-06-28
발표자료: https://www.slideshare.net/ClovaPlatform/
Clova 스피커용 음성게임 예제 – 구구단놀이, 나라수도맞추기, 업다운

목차
• Clova Platform & extension 개요
• Clova extension 개발 준비 개요
• Clova extension 기획
• 인터렉션모델
• 음성기반 게임 예제 – 구구단놀이, 나라수도맞추기, 업다운
• Cloud Function 및 Clova extension 서버 API 개발
• Clova 앱과 스피커에서 익스텐션 호출 테스트

Clova Plaform & extension 개요

Clova Interface Connect 적용 사례
LG U+ 블루콤 스피커 LG 전자 스마트씽큐
LG전자 가전기기 제어가능IoT 제품 제어가능

LG U+ IPTV STB
- LG U+ IPTV UHD급 이상의 STB 내 Clova 제공 (2017년 12월 적용)
시청 중,
리모콘 side음성버튼
or (음성) LGU플러스야
로 음성명령 수행
‘효리네민박 틀어줘’ ‘스릴러영화 추천해줘’전면 검색키>
전체화면모드, 클로바스러운 검색홈으로 제안
Clova Interface Connect 적용 사례

Clova Interface Connect 적용 사례 (Friends +)
스피커로 '셋탑을 컨트롤' 할 수 있습니다.
브라운과 샐리에게 "유플티비"라는 호출어로 지시해보세요.
"유플티비, 눈물 쏙 빼는 영화 찾아줘"
"유플티비, tvN 틀어줘"

Clova extension 이란?
• Clova 플랫폼에서 작동하는 3rd party 애플리케이션으로서, 예를 들면 음성명령으로 음악을
재생하거나 쇼핑, IoT기기 제어 등이 가능합니다.
• 사용자의 의도(예: 음성명령)에 따라 extension이 정확하게 동작할 수 있도록 Clova 플랫폼
내부적으로 음성인식, 대화분석 등 Clova 인공지능 기술이 적용되어 있습니다.

extension으로 무엇을 할 수 있나요?
• Extension 종류
• (서비스중) Custom extension: 3rd party 서버에서 제공하는 응답(예:
음성, 이미지 등)을 제공할 수 있습니다.
• 예) "팟빵에서 뉴스공장 틀어줘" 라고 하면 "팟빵 extension"이 해당 음원을
들려줍니다.
• (서비스중) Chatbot extension: 고객이 자주 묻는 질문(FAQ)과 답변을
등록하여 사업자 대신 챗봇이 답변을 하게 하는 extension입니다.
• 예) ”네이버고객센터 실행해줘  네이버 쇼핑 가격 비교하는 방법
알려줄래?”
• (제휴문의) Clova Home extension: IoT 기기제어가 가능
• 예) "클로바, TV 좀 켜줘" 라고 하면 클로바가 TV를 켭니다

Clova extension 사례 – ‘체리쉬’ 모션베드제어
https://www.youtube.com/watch?v=kpkRRLWHySc
대표발화: 1) 체리쉬에게 자자 2) 체리쉬에게 무중력 모드 해줘 3) 체리쉬에게 첫번째 메모리 해줘

Clova extension 사례 – ‘배송지킴이’ 택배조회
https://www.youtube.com/watch?v=27NWVG0yhTQ
대표발화: 1) 배송지키미 시작해줘 2) 배송지키미에서 내 택배 조회해줘 3) 배송지키미 내 택배 언제와

Clova extension 사례 – ‘라마마’ 연애운
https://www.youtube.com/watch?v=uCqQem8_LyQ
대표발화: 1) 라마마 시작해줘 2) 라마마에게 연애운 물어봐줘 3) 라마마에게 남친 언제생길지 물어봐줘

https://drive.google.com/file/d/1Ytzx-M6Lub-20RJhR_SNzqezYmFCHC_Z/view

Clova 챗봇 extension 사례 – ‘멍멍이’ 동물소리 번역기
https://www.facebook.com/ClovaAI/photos/a.1639371196371443.1073741828.1637903373184892/17833965653022
38/
대표발화: 1) 멍멍이 시작해줘

Clova extension 개발 준비 개요

Clova extension 개발 준비 – 1 (필수)
• 익스텐션서버
• REST API 서버로서, Clova platform은 Clova console에 등록한 REST API 서버URL로 응답과 요
청을 주고 받습니다.
• Clova platform은 1) 익스텐션 실행 2) 인텐트 실행 3) 익스텐션 종료라는 3가지 type의 요청을 보
내고, 익스텐션 서버는 여기에 맞게 응답을 하면 됩니다.
• 익스텐션 서버는 https로 외부망으로 통신할 수 있는 서버이어야 하며, 포트는 80 또는 443로만 통
신합니다.

• 익스텐션서버

• 인터렉션 모델
• 일종의 대화시나리오와 비슷합니다만, 기계인 익스텐션 서버가 사람의 대화를 이해하여 작동할 수
있도록 Clova console에 입력하는 문장 및 메타정보들입니다.
• 인터렉션 모델에는 사용자로부터 입력될 만한 문장들과 각 문장이 어떤 실행 명령(이를 '인텐트'라
고합니다.)으로 연결될 지를 설정합니다.
• 인텐트를 실행할 때 필요한 정보들은 '슬롯'이라는 것으로 정의하여 처리합니다.
• 예를 들면, 피자주문하는 익스텐션의 경우 인텐트와 슬롯은 아래와 같습니다.
• 예) 사용자의 대화: "페퍼로니 피자 2판 주문해줘" --> 'OrderPizza'라는 이름으로 피자주문 처리용 인텐
트로 정의
• 예) 'OrderPizza'인텐트가 실제 피자를 주문하기 위해 필요한 정보는 '피자명'과 '수량'이며, 이는 각기
'pizzaType', 'pizzaAmount'라는 슬롯으로 정의

Clova extension 개발 준비 – 3 (선택)
• OAuth 인증 서버
• 만약 익스텐션이 써드파티 계정
인증이 필요하다면 익스텐션 서
버와 함께 OAuth 인증을 구현하
셔야 필요합니다.
• OAuth 인증 서버는 Clova
console에 등록된 인증정보를 이
용하여 인증을 처리하고, 인증이
완료되면 접근토큰을 반환해야
합니다.
• 인증서버 구축 예) 배달의 민족,
LG 전자, LGU +
관련 가이드: https://www.slideshare.net/ClovaPlatform/clova-tech-summit-3-clova-extension-oauth-89597569

Clova extension 호출명 설정
• 가전기기를 제어하는 Custom extension (이하 '익스텐션') 서비스를 그려 보
도록 하겠습니다.
• 먼저 익스텐션 실행할 때 부르는 이름, 즉 '호출명'을 정해야하는데, 몇 가지
제약이 있습니다.
• 일반적인 명사는 안됨 (예: 박사 (X) )
• 브랜드나 유니크한 명사가 접목된 단어 가능: (예: 짱구박사(O))
• 혹시나 음성인식이 잘 안되는 경우는 다른 호출명으로 하셔야 할 수 있으니,
Clova앱에서 인식이 잘 되는지 확인해보시길 바랍니다.

익스텐션의 작동 시나리오
• 첫번째는 익스텐션에게 바로 질문하고 답을 받는 것입니다. (싱글턴, single-
turn)
• 사용자: 클로바, 짱구박사에서 거실 전등 켜줘
• 익스텐션: 거실 전등이 켜졌습니다.
• 두번째는 익스텐션을 실행한 다음에 질문하고 답을 받는 것입니다. (멀티턴,
multi-turn)
• 사용자: 클로바, 짱구박사를 시작해줘
• 익스텐션: 안녕하세요. 짱구박사가 시작되었습니다. 제어하고 싶은 가전기기와 동작 방
법을 말씀하세요.
• 사용자: 거실 전등 켜줘.
• 익스텐션: 거실 전등이 켜졌습니다.

익스텐션 기본 정보 등록하기
• Clova console에 접속해서 'Clova Extensions Kit'을 클릭한 다음 '새로운 익스텐션 만들기'를 누릅니다.
• URL: https://developers.naver.com/console/clova/
• 익스텐션 정보 설정
• type은 Custom Extension으로 선택하고, 나머지 값들도 입력합니다.
• 오디오플레이어 사용 여부는 '아니오'로 합니다. '예'로 하는 경우는 음원을 재생하는 경우에 사용합니다.

익스텐션 작동 시나리오 고려사항
• 이제 해야할 일은 시나리오가 클로바 플랫폼에서 작동하도록 하는 것인데요.
• 문제는 사용자가 같은 말을 물어보더라도, 위에서 정의한 글자그대로 말하지
는 않는다는 점입니다.
• 예) 거실 전등 켜줘
• 예) 거실 점등 해줘
• 예) 거실 불켜줘
• 이렇게 같은 의도이지만 다양한 표현을 입력하고 인터렉션 모델에 이러한 여
러 문장 케이스들을 잘 정리해놔야 더 똑똑한 익스텐션을 만들 수 있겠습니다.

인터렉션 모델 등록하기 – 슬롯 등록
• 짱구박사는 집안의 지역 IoT기기를 제어
할 것이므로 인텐트는 하나만 등록하면
되고, 슬롯은 ’집안의 다양한 장소들이'이
되겠습니다.
• 슬롯 등록하기 전에
• 슬롯에는 커스텀 슬롯과 빌트인 슬롯 2가
지가 있습니다.
• 빌트인 슬롯은 아래와 같이 사람들이 이
미 인지하는 용어들을 모아둔 것으로, 사
용하겠다고 체크하면 편리하게 사용하실
수 있습니다.
• 집안의 다양한 장소들은 커스텀 슬
롯으로 등록합니다.
• IOT_TYPE
• 거실: 리빙룸
• 안방: 침실
• 부억: 키친
• 베란다

인터렉션 모델 등록하기 – 인텐트 등록
• 우측의 '사용중인 Intent' 옆의 + 버튼을 눌러서 ‘turnOnIntent’ 입력하고 '만들기' 버튼을 누릅
니다.
• 사용자 표현 리스트에 사용자들이 입력할 것 같은 대화들을 입력하는데, slot과 의도에 해당
하는 문장들은 다양하게 입력합니다.
• 문장의 가짓수는 많을 수록 더욱 대화의도 파악은 잘 됩니다.
• 거실 전등 켜줘
• 안방 불 켜줘
• 침실 점등 해줘

https://developers.naver.com/console/clova/guide/Design/
Design_Guideline_For_Extension.md#DefineInteractionMod
el

인터렉션 모델 등록하기 – 인텐트 슬롯 등록
• 사용자 표현 리스트에서 ’거실'이라는 단어를 드래그한 다음 앞에서 입력한 ‘homeSlotType’이란 이름
으로 매핑해줍니다.
• 매핑이 완료되면 Slot 에 해당하는 글씨들이 아래와 같이 하이라이트 됩니다.

인터렉션 모델 빌드하기
• ‘저장’ 버튼을 누른 다음
• 우측 상단의 '빌드' 버튼을 눌러 인터렉션 모델을 빌드합니다. 빌드가 완료되면 다시 '빌드'라는 버튼으로 바뀝니다.

인터렉션 모델 테스트
• 체크할 포인트는 인터렉션 모델에 등록한 문장과 비슷한 문장을 입력하더라도 slot과 intent값을 리턴하는지 확인하
는 것입니다.
• 예)
• 거실 전등 켜줘 (인터렉션 모델에 있는 문장)
• 부억 점등 해줘 (인터렉션 모델에 있는 문장과 비슷한 유형이지만, slot 이 다른 문장)
• 침실 불 켜줘 (비슷한 문장)

구구단 놀이
• 개요
• 사용자가 구구단 곱셈의 정답을 맞추는 게임
• 실행 방법
• 시작: “구구단 놀이 시작해줘”
• 구구단 단수 변경: 다른 단수를 말하면 해당 단수로 변경

구구단놀이
• Intent
• 게임시작 – gugudanPlay
• 사용자 대답 – gugudanAnswer
• slot
• 숫자 – dan (built-in number slot)

업다운
• 개요
• 사용자가 1~100사이 숫자를 맞추는 게임
• 실행 방법
• 시작: “업다운 시작해줘”
• 사용자가 대답한 숫자가 크면 up, 숫자가 작으면 down이라는 힌
트를 줌

업다운
• Intent
• 게임시작 – playGameIntent
• 사용자 대답 -
numberAnswerIntent
• slot
• 숫자 – numberAnswer (built-in
number slot)

나라수도맞추기
• 개요
• 사용자가 특정 국가의 수도 도시명을 맞추는 게임
• 실행 방법
• 시작: “나라수도맞추기 시작해줘”
• 난이도 조절: 1단계 ~ 3단계로 조정가능
• 1단계는 누구가 잘 아는 나라
• 3단계는 잘 모르는 나라

나라수도맞추기
• Intent
• 게임시작 – playGameIntent
• 사용자 대답 – answerIntent
• 점수 확인 - getScoreIntent
• slot
• 숫자 – city (도시명입력)

Clova extension 서버 API 개발

서버가 처리해야할 작업 - 1
• Clova 요청 메시지의 request type에 따라 지정된 포맷의 응답 리
턴
• Request type
• LaunchRequest : 익스텐션의 시작 (“짱구박사 시작해줘” 했을 경우)
• SessionEndedRequest : 익스텐션의 종료 (“종료해줘” )
• IntentRequest
• Custom Intent  개발자 콘솔에 입력한 Intent 와 Slot
• Built-in Intent 
https://developers.naver.com/console/clova/guide/CEK/References/CEK_API.md#cek-api-레퍼
런스

서버가 처리해야할 작업 – 2
https://developers.naver.com/console/clova/
guide/CEK/References/CEK_API.md#cek-
api-레퍼런스
응답메시지 구조

서버가 처리해야할 작업 – 3
• 멀티턴 처리
• 응답 메시지의 shouldEndSession은 false
• 계속 유지해야 할 값은 sessionAttribute에 담아서 전송
http://stg.developers.naver.com/console/clova/guide/
CEK/Guides/Build_Custom_Extension.md#DoMultiturn
Dialog

개발 환경 구성
• 개발 도구
• IntelliJ ( with Java )
• 프로젝트 생성
• Spring Initializr로 프로젝트 생성
• 프로젝트 설정
• pom에 api test (rest-assured)에 필요한 dependency 설정

Cloud Functions & CEK
4 / 30
Action
(code)
만들기
CEK URL 등록
NCP
회원 가입

Microservice on Serverless
- UI에서 바로 작성하고 서비스를 배포하는 것이 가능
- 웹 액션으로 만들고 API Gateway를 통해 end-point 설정 및 CEK 연동

4 / 30
Action

4 / 30
Action create

Action 실행

https://github.com/naver/clova-extension-sample-rainsound/blob/github-
public/clova/index.js
Node.js 수정
1) 1개의 js 파일로 (include제거 및 관련 변수치환)
2) api 처리하는 부분을 main function으로
const uuid = require('uuid').v4
const _ = require('lodash')
//const { DOMAIN } = require('../config')

Node.js 코드 입력 및 Default parameter 수정

Default parameter
{
"version": "0.1.0",
"session": {
"sessionId": "7b1652d1-5e44-4f4b-9769-ea2f1190cc6f",
"user": {
"userId": "Gz1xLLqxROGBWE71SDN_gQ",
"accessToken": "07c8d684-a2a9-4147-8abc-8a2e2dc50ef0"
},
"new": true
},
"context": {
"System": {
"user": {
"userId": "Gz1xLLqxROGBWE71SDN_gQ",
"accessToken": "07c8d684-a2a9-4147-8abc-8a2e2dc50ef0"
},
"device": {
"deviceId": "7609cb94-eec5-4728-b07b-271d32e188b0",
"display": {
"size": "l100",
"orientation": "landscape",
"dpi": 96,
"contentLayer": {
"width": 640,
"height": 360
}
}
}
}
},
"request": {
"type": "IntentRequest",
"intent": {
"name": "PlayLoopIntent",
"slots": {
"loopCount": {
"name": "loopCount",
"value": "2"
}
}
}
}
}

clearMultiturn() {
this.response.shouldEndSession = true
this.sessionAttributes = {}
}
addDirective(directive) {
this.response.directives.push(directive)
}
setSimpleSpeechText(outputText) {
this.response.outputSpeech = {
type: "SimpleSpeech",
values: {
type: "PlainText",
lang: "ko",
value: outputText,
},
}
}
appendSpeechText(outputText) {
const outputSpeech = this.response.outputSpeech
if (outputSpeech.type != 'SpeechList') {
outputSpeech.type = 'SpeechList'
outputSpeech.values = []
}
if (typeof(outputText) == 'string') {
outputSpeech.values.push({
type: 'PlainText',
lang: 'ko',
value: outputText,
})
} else {
outputSpeech.values.push(outputText)
}
}
}
function main(params) {
const httpReq = {"body": params}
cekResponse = new CEKResponse()
cekRequest = new CEKRequest(httpReq)
cekRequest.do(cekResponse)
return cekResponse
};
intentRequest(cekResponse) {
console.log('intentRequest')
console.log(JSON.stringify(this.request))
const intent = this.request.intent.name
const slots = this.request.intent.slots
switch (intent) {
case "PlayIntent":
case "PlayLoopIntent":
let loopCount
const loopCountSlot = slots.loopCount
if (intent == "PlayIntent") {
loopCount = 1
} else if (slots.length == 0 || !loopCountSlot) {
loopCount = 3
} else {
loopCount = parseInt(loopCountSlot.value)
}
if (loopCount == 1) {
cekResponse.appendSpeechText("빗소리를 재생합니다.")
} else {
cekResponse.appendSpeechText(`빗소리를 ${loopCount}번 재생합니다.`)
}
for (let i = 0; i < loopCount; i++) {
cekResponse.addDirective(audioDirective())
}
break
case "Clova.GuideIntent":
cekResponse.appendSpeechText("죄송해요. 이해할 수 없습니다.")
cekResponse.appendSpeechText("빗소리 틀어줘, 라고 시도해보세요.")
break;
}
}
sessionEndedRequest(cekResponse) {
console.log('sessionEndedRequest')
cekResponse.setSimpleSpeechText("빗소리 익스텐션을 종료합니다.")
cekResponse.clearMultiturn()
}
}
class CEKResponse {
constructor () {
this.response = {
directives: [],
shouldEndSession: true,
outputSpeech: {},
}
this.version = "0.1.0"
this.sessionAttributes = {}
}
setMultiturn(sessionAttributes) {
this.response.shouldEndSession = false
this.sessionAttributes = _.assign(this.sessionAttributes, sessionAttributes)
}
const uuid = require('uuid').v4
const _ = require('lodash')
//const { DOMAIN } = require('../config')
class Directive {
constructor({namespace, name, payload}) {
this.header = {
messageId: uuid(),
namespace: namespace,
name: name,
}
this.payload = payload
}
}
function audioDirective() {
episodeId = Math.floor(Math.random() * 1000)
return new Directive({
namespace: 'AudioPlayer',
name: 'Play',
payload: {
audioItem: {
audioItemId: uuid(),
stream: {
beginAtInMilliseconds: 0,
playType: "NONE",
token: uuid(),
url: `http://**********/rainning_sound.mp3`,
urlPlayable: true
},
// type: "custom",
},
playBehavior: "REPLACE_ALL",
source: {
logoUrl: `http://**********/img_sound_rain_108.png`,
name: "소리 시리즈"
}
}
})
}
class CEKRequest {
constructor (httpReq) {
this.request = httpReq.body.request
this.context = httpReq.body.context
this.session = httpReq.body.session
}
do(cekResponse) {
switch (this.request.type) {
case "LaunchRequest":
return this.launchRequest(cekResponse)
case "IntentRequest":
return this.intentRequest(cekResponse)
case "SessionEndedRequest":
return this.sessionEndedRequest(cekResponse)
}
}
launchRequest(cekResponse) {
console.log('launchRequest')
cekResponse.appendSpeechText("빗소리를 재생합니다.")
cekResponse.addDirective(audioDirective())
}
Node.js 코드 – 빗소리
https://github.com/okgosu/CEK-CloudFunction-Exam

액션실행

Cloud Function Server 주소 설정

Clova 앱과 스피커에서 익스텐션 호출 테스트

테스트 단계
• 개발자 콘솔에 test할 네이버 계정 등록
• 음성 테스트 방법1 – Clova 앱
• Clova 앱에 해당 아이디로 로그인 후
•  “짱구박사 시작해줘” 라고 했을 때 익스텐션 서버로 LaunchRequest가 오는지, 익스텐션의 응답이 음성으로 나가는지 확인
• 음성 테스트 방법2 – Friends 스피커
• 테스터로 등록된 아이디로 Clova앱을 이용해서 스피커 설정
•  “짱구박사 시작해줘” 라고 했을 때 익스텐션 서버로 LaunchRequest가 오는지, 익스텐션의 응답이 음성으로 나가는지 확인

Appendix.
• Clova 플랫폼 개발자 문서 : https://developers.naver.com/console/clova/guide/
• Design 챕터 / Clova Extensions Kit 챕터 / Clova Developer Console 챕터 참고
• 튜토리얼 및 샘플 코드 참고
• 샘플 코드 Github
• 마법 구슬 : https://github.com/naver/clova-extension-sample-magicball
• 빗소리 : https://github.com/naver/clova-extension-sample-rainsound
• 주사위 놀이 : https://github.com/naver/clova-extension-sample-dice
• 코인 헬퍼 : https://github.com/naver/clova-extension-sample-coinhelper

Clova Extension 음성기반 게임 기획 및 설계 / FaaS를 이용한 개발

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Clova Extension 음성기반 게임 기획 및 설계 / FaaS를 이용한 개발

Similar to Clova Extension 음성기반 게임 기획 및 설계 / FaaS를 이용한 개발 (20)

More from Clova Platform

More from Clova Platform (11)

Clova Extension 음성기반 게임 기획 및 설계 / FaaS를 이용한 개발