TRACK 3 (AI with GiGA Genie) GiGA Genie는 왜 Web App을 선택했는가? : 이정호 KT

1. GiGA Genie는 왜 Web App을
선택했는가

2. 발표자
이정호
KT 소프트웨어개발단 AI서비스개발TF
(`12) kt 위치기반시스템 개발 업무 수행
(`14) 위치정보 기반 자녀 안심 서비스 개발
(`17) 실내 WiFi 측위 정확도 개선 프로젝트 수행
(`18~) GiGA Genie 서비스 Front-end 개발
▶ 동화오디오북 / 북클럽 / 대교소빅스 등
키즈 오디오북 서비스 출시
▶ 마이루틴 / 핑크퐁칭찬하기 등
생활 비서 서비스 출시

3. Contents
1 최신 Front-end 웹 개발 트렌드
2 GiGA Genie 서비스의 웹앱 개발 필요성
3 GiGA Genie 웹앱 개발하기
4 GiGA Genie 서비스의 웹앱 전환 효과
QnA

4. Web Developer in 2019
출처 : https://github.com/kamranahmedse/developer-roadmap
01

5. Web Developer in 2019
출처 : https://github.com/kamranahmedse/developer-roadmap
01
Questions
1) 뭐가 보이긴 하나?
2) 어쩌다 이지경이 됬을까?
3) 먹고 살려면 어디까지 해야 될까?

6. Front-end 영역은 점점 복잡해짐01
Package Manager
• 공통 라이브러리 재활용 à 개발 리소스 감소
SPA (Single Page Application)
• 최초 한번 페이지 전체 로드 이후는 부분적으로 갱신
• 사용자 경험 / 데이터통신 최적화
• 초기 구동 오래 걸림 / 검색엔진최적화(SEO) 어려움
Component 기반
• html / CSS / Javascript 를 묶은 컴포넌트
• 컴포넌트 단위의 개발, 유지보수
모듈 번들러, Lint 등 빌드 툴 사용
• 휴먼에러 방지, 모듈의존성 관리 등
Package Managers
CSS Pre-processors
CSS Frameworks
CSS Architecture
Build Tools Task Runners
Module Bundlers
Linters and Formatters
Pick a Frameworks
React.js
Angular
Vue.js

7. “아 뉘예 뉘예~~~
프론트 개발하기 복잡해진 거 알겠어요
근데 뭐하자고 이렇게까지 해야하나요?”

8. Web Application 의 활용 범위가 다양해지기 때문01
“네이티브 앱같이 느껴지는
웹 앱을 만들순 없을까?”
“웹 앱으로 게임을 네이티브 코드를
돌릴 수는 없을까?”
“데스크탑에서 웹 앱을
설치해서 쓸 수는 없을까?”
“모바일에서 네이티브앱을
웹앱으로 대체할수 없을까?”

9. Web Application 의 활용 범위가 다양해지기 때문01

10. Web Application 이 뭐가 좋길래01
1. 실행 환경의 자유로움
à 브라우저만 있다면 실행 가능
2. 설치과정이 필요 없고 업데이트가 손쉬움
à 브라우저에 URL 만 입력하면 사용 가능
à 웹서버에 배포하면 모든 사용자가 즉시 업데이트

11. GiGA Genie 서비스?02
GiGA Genie 서비스

12. GiGA Genie 서비스?02

13. GiGA Genie 서비스 대상 단말02
스피커형 단말
TV형 단말
2017년 2018년 2019년
기가지니1
기가지니 2
기가지니 LTE 2
기가지니 버디
기가지니
TableTV
기가지니 LTE
기가지니
스카이라이프
• OS : Linux 또는 Custom 안드로이드
• 펌웨어 배포 주기 : 단말 별 연간 수회

14. 버전 관리의 지옥02
TV형 단말
Custom Android
Version 8.0.1
스피커형 단말
Custom Android
Version 1.0.8
스피커형 단말
Custom Android
Version 1.2.8
스피커형 단말
Linux 기반 GCC
Version 4.2.8
TV형 단말
Custom Android
Version 8.1.12
TV형 단말
Custom Android
Version 1.0.0
“제겐 간단한
상황이 아닙니다”
“신규 서비스 하나 출시해보죠
간단한거에요 간단한거”

15. 단말 별 배포 일정 관리의 지옥02
“서비스 소개
이미지 하나만 바꿔주세요”
“이미지 수정이야
뭐 간단합니다만..”
“9월쯤 배포 일정 있어요”
“10월쯤 배포 일정 있어요”
“우린 11월 ㅋ”
“어 저희 어제 막 배포했는데 ;;”
“다음 펌웨어
일정 잡는 중이라.. 아직..”
“올해는 펌웨어 업데이트
계획이 없는데요”
???

16. “기가지니에 AI서비스를
웹 앱으로는 만들 순 없을까?”
“아니 농담 아니고
진짜 반드시 웹 앱이어야 한다”

17. Javascript 로 GiGA Genie에 웹앱을 개발하려면?03
“GiGA Genie의 웹앱 개발은
일반 웹앱과 어떤 점이 다를까?”

18. GiGA Genie 웹앱 개발은....03
1. 사용자 인터페이스
[ 기존 Web 서비스 ]
“지니야, 날씨 알려줘”
[ GiGA Genie Web 서비스 ]
DOM KeyboardEvent
DOM MouseEvent
????

19. GiGA Genie 웹앱 개발은....03
2. GiGA Genie 단말 특화 기능
• 단말 페어링
• 사용자 정보 입력
• 서비스 설정 정보
• 서비스 설정정보 조회
• Push Notification
• Mic / 스피커 등 단말 제어
• 웹서비스 저장소 제공
• 서비스 상태 관리
[ 기가지니 App ]

20. GiGA Genie Service SDK03
OS
Device Controller
Brower Engine
Rendering Engine
Storage
Camera
Mic
Launcher
Speaker
……… Javascript Engine
(V8)
GiGAGenie
ServiceSDK
Web Resource
(html, css, js)
gigagenie API 호출
GiGA Genie Device
Javascript 라이브러리로 제공되며 CDN URL로 include
• 하드웨어 기능 제어
• Web 상태 관리
• 발화 이벤트 처리
• Native App 간 I/F
• Web Socket
• Push Notification
• ….

21. GiGA Genie Service SDK03
Javascript 라이브러리로 제공되며 CDN URL로 include
Namespace 설명 주요 API
gigagenie.init API 초기화 및 App 상태정보 제공 및 관리
init
init.onAppStatusChange
init.runApp
gigagenie.voice 음성인식 / TTS 등 음성 인터페이스 제어
voice.getVoiceText
voice.sendTTS
voice.onRequestClose
voice.onActionEvent
voice.stopTTS
gigagenie.appdat
a
Web Service 제공에 필요한 데이터 저장/관리
appdata.createNameSpace
appdata.destroyNameSpace
appdata.getKeyData
appdata.setKeyData
appdata.delKeyData
appdata.findKeys
gigagenie.appinfo
GiGA Genie 사용자 정보 및
App 정보 조회/관리
appinfo.getContainerId
appinfo.sendPushMsg
appinfo.getAddress
appinfo.getUserInfo
appinfo.onChangeUser
[ 제공 API 종류 ]

22. 웹앱에서 GiGA Genie 음성 인터페이스 제어하기03
예시1) 사용자에게 음성으로 TTS 제공
“기가지니가 인사드려요.
안녕하세요”
예시2) 사용자에게 음성을 입력 받고자 할 때
“생년월일을 말해 주세요”
“1900년 00월 00일”

23. GiGA Genie 사용자 정보 관리 및 스마트폰 연동하기03
예시3) 사용자 스마트폰에 Web URL 을 Push 메세지로 발송할 때
예시4) 사용자가 저장해둔 우리집 주소 정보가 필요할 때
서울시 서초구 서초동
ㅇㅇ APT 00동
“http://hello.world/~~”

24. GiGA Genie 웹앱 상태 관리03
Resumed
- Foreground
- Audio 재생 가능
Resumed(Mute)
- Foreground
- Audio 재생은 불가능
Paused
- Background
- Audio 재생 불가능

25. GiGA Genie 웹앱 상태 관리03
• Audio 재생 중 Pause
-> 재생 중이던
Audio리소스 중지

26. GiGA Genie 웹앱 상태 관리03
• 웹서비스가 foreground로
복귀되었다면, 오디오 재시작

27. GiGA Genie 웹앱 상태 관리03
• 서비스 Resume 상태지만
Audio 리소스는 사용 불가
• 서비스 시나리오에 따라
대기 or 종료 가능

28. 사용자 음성 요청 처리하기03
“지니야, 동화오디오북에서
대교출판사꺼 인어공주를
들려줄래?”
저기..
무슨 말씀이신지..

29. 사용자 음성 요청 처리하기03
“지니야, 동화오디오북에서 4세동화 들려줘”
“지니야, 동화오디오북 이어서 들려줘”
“지니야, 동화오디오북 2시간만 틀어줄래”
“지니야, 다음 전집 틀어줘”
“지니야, ㅇㅇ출판사 동화책 틀어줘”
“지니야, 일시정지 / 재생 / 나가기 / 종료”
“지니야, 태교에 좋은 동화 들려줘”
“지니야, 인어공주 읽어줘”
“지니야, 세계전래동화중에 5세동화만 읽어줘”
[ 발화 예시 ]
[ 동화오디오북 ]
6개 출판사에서 수급된
약 4천여개 오디오북을 제공하는 서비스
예시 서비스 : 동화 오디오북

30. 서비스 기능별 대화 모델 설계하기03
[ 서비스명 ]
동화오디오북
오디오북
서비스 실행하기
[ 동사 ]
들려줘
실행해줘
…
[ 동사 ]
나가기
종료
서비스 종료하기
[ 출판사명 ]
대교동화
아람동화
글뿌리
가우스
스마일북스
…
[ 도서명 ]
흥부와 놀부
인어공주
호두까기 인형
엄지 공주
…
특정 컨텐츠 재생하기
[ 동사 ]
들려줘
읽어줘
읽어
들려줄래
…
서비스의 기능 (actionCode)

31. 서비스 기능별 대화 모델 설계하기03
[ 서비스명 ]
동화오디오북
오디오북
서비스 실행하기
[ 동사 ]
들려줘
실행해줘
…
[ 동사 ]
나가기
종료
서비스 종료하기
[ 출판사명 ]
대교동화
아람동화
글뿌리
가우스
스마일북스
…
[ 도서명 ]
흥부와 놀부
인어공주
호두까기 인형
엄지 공주
…
특정 컨텐츠 재생하기
[ 동사 ]
들려줘
읽어줘
읽어
들려줄래
…
서비스의 기능 (actionCode)
명사그룹 (어휘사전)

32. 다시 한 번 봐볼까요?03
“지니야, 동화오디오북에서
대교출판사꺼 인어공주를
들려줄래?”

33. “지니야, 동화오디오북에서
대교출판사꺼 인어공주를
들려줄래?”
다시 한 번 봐볼까요?03
출판사명 도서명
동사
[특정 컨텐츠 재생하기]
특정 출판사의 책을 골라서
재생해달라는 거구만!

34. 사용자 발화 처리 예시03
Service SDK > gigagenie.voice.onActionEvent

35. 사용자 발화 처리 예시03
Service SDK > gigagenie.voice.onActionEvent
• 사용자가 발화한 문장을
분석한 결과가 어휘사전별
전달됨

36. 사용자 발화 처리 예시03
Service SDK > gigagenie.voice.onActionEvent
• TTS 시작 전 재생 중이던
Audio 는 중단
• Audio 와 TTS 가 겹쳐서
재생되지 않도록

37. 사용자 발화 처리 예시03
Service SDK > gigagenie.voice.onActionEvent
• “인어공주 읽어드릴게요”
TTS 안내 후 Audio 재생

38. 사용자 발화 처리 예시03
Service SDK > gigagenie.voice.onActionEvent
• 별도 오디오 스트리밍 서버를
이용할 때 재생실패 감지 필요
(특히 화면없는 단말)

39. 리모컨 입력 처리 예시03
Keyboard Event 처리와 유사하게 처리

40. GiGA Genie 웹앱 서비스 개발 현황04
기가지니 B2C Service
미디어
지니뮤직, 올레TV,
라디오, 팟캐스트 등
키즈 서비스
외국어교육 쇼핑/주문
라이프스타일
개인비서
생활정보
금융
엔터테인먼트
핑크퐁, 소리동화,
내목소리동화, 세이펜 등
야나두, 어학사전,
파고다, 번역 등
기프티쇼, 홈쇼핑,
롯데슈퍼, SPC, G마켓 등
레시피, 맛집, 성경, 불교
명상, 홈트레이닝 등
날씨, 시간, 캘린더
모닝브리핑, 메모 등
뉴스. 길안내, 버스,
맛집, 레시피, 명상 등
환율, K뱅크
우리은행, 키움증권 등
운세, 게임, 웹툰
금영노래방 등
Web Application
총 90여개 B2C 서비스 중 75% 는 Web Application

41. 웹앱으로 만드니 뭐가 좋던가요?04
Text List
(+리모컨Focus)
이미지 List
(+리모컨Focus)
App 상태관리Footer 롤링 문구
UI 컴포넌트화 + 공통기능모듈화
서비스당 개발 기간 à 2~4주

42. 웹앱으로 만드니 뭐가 좋던가요?04
통합 버전 관리
단말별 버전 관리 à TV형 / 스피커형 2종으로 관리
서비스 유지 관리의 Cost 감소 à 개발 퍼포먼스 향상
• 버그 Fix 는 빠르게
• 단말 펌웨어 일정 고민 X
[ Gitlab history Graph ]

43. 미처 하지 못한 이야기들04
• 서비스 발화의 등록하는 방법은?
• 웹앱 실행 시 실행 URL 정보는 어떻게 관리하는지?
• 기가지니 단말에서의 개발 환경(개발자모드)은 어떻게 설정해야 할까?
GiGA Genie 개발자 기술 지원 및 교육
APILink 내 “기술지원” 메뉴 기가지니 개발자 정기 교육 프로그램 운영

44. QnA