일반 마법 실험

대화형 사용자 인터페이스 개론(구명완 교수님)
이동: 둘러보기, 검색

목차

프로젝트명

일반 마법 실험

지도교수 및 멘토 소개

김지환 지도교수 기술 자문 및 방향 제시

팀 소개

팀명
1M1C
팀원
이름 학번 학과 역할 수행방법
정유진 120160397 컴퓨터공학과 팀장

과제 내용 및 목표 정의 , 개발 환경 설정 , 프로토타입 제작 , 애니메이션 제작 , 애니메이션 재생 모듈 구현 , 모듈 인테그레이션 , 프로토타입 테스트 , 모듈 테스트 , 인테그레이션 테스트 , 결과 보고서 작성

강요셉 20111237 수학과 팀원

과제 내용 및 목표 정의 , UI설계 , 개발 환경 설정 , 프로토타입 제작 , 애니메이션 제작 , 음성인식 모듈 구현 , 프로토타입 테스트 , 모듈 테스트 , 인테그레이션 테스트 , 결과 보고서 작성

프로젝트 목표

사용자의 음성을 인식하여 10개의 마법주문을 분류하고, 주문에 맞는 애니메이션을 보여준다.
어플리케이션을 실행하면 마법을 위한 도구들이 보여진다. (마법 지팡이, 깃털, 탁자 등)
화면의 버튼을 눌러서 음성인식을 활성화 시킨다.
음성인식이 활성화 되면 "...listening..." 과 마법 지팡이에 불빛 나타난다.
10개의 주문을 인식할 수 있다.(아시오, 몸바르다, 윙가르디움레비오우사, 익스펙토펙트로눔, 루모스, 루모스 맥시마, 아비노, 에바네스코, 세르펜소리티아, 스투페파이)
주문을 인식하고 나면, 해당 주문에 맞는 마법이 애니메이션으로 표현된다.
이번 학기의 목표는 안드로이드 어플리케이션 내에서 간단한 애니메이션의 형태로 마법을 보여주는 것 이다.

기대 효과

2014년 유니버셜 스튜디오 재팬에 해리포터관이 생겼을 때, 개장 후 보름동안 87만명이 내방하여 흥행 돌풍을 일으켜 당해 영업이익이 61%나 늘었고 사상 최대 매출액(1385억엔)을 기록한 바 있다.
해리포터는 전 세계에 두터운 매니아층을 가지고 있다. 따라서 해리포터 관련 엔터테인먼트 컨텐츠를 개발한다면 수 많은 매니아들을 즐겁게 해 줄 수 있을 뿐만 아니라, 향후 사업화도 가능할 것이다.



개발 내용

개발 환경

  • Windows 8 64bit 운영체제 Android Studio 환경에서 JAVA로 개발하였다.
  • 갤럭시 A7 2016(Android version 5.1.1), LG G4(Android version 6.0) 디바이스에 apk 파일을 설치하여 테스트하였다.
  • Compile SDK Version은 24 이다.
  • buildToolVersion은 25.0.0 이다.
  • Naver Speech 1.0.4 API 사용

과제 결과물

  • 데모영상 재생 가능 유튜브 주소는 아래와 같다.
https://www.youtube.com/watch?v=XMcmBzr-ErU
파일:KakaoTalk Video 20161202 2033 31 777.mp4
  • 최종 결과물은 안드로이드 환경에서 실행 가능한 엔터테인먼트 어플리케이션이다.
  • Naver Speech 1.0.4 API를 통해 음성인식을 수행한다.
  • Start 버튼을 통해 음성인식을 활성화 할 수 있다.
  • 음성인식을 통해 사용자는 마법 주문을 입력한다.
  • 아래 10가지 마법 주문에 대하여 해당 주문이 음성으로 입력된 경우 애니메이션이 재생된다.


전체실행.png

1. 아시오(아씨오)

  • 멀리있는 물건을 소환하는 마법. 건너편 테이블에 있던 책 더미가 바로 앞의 테이블로 소환된다.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "아시오" 음성 입력, 인식 멀리 있던 책더미가 전면의 테이블로 소환됨. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식아시오.jpg 실행화면아시오.jpg 초기화면.jpg

2. 봄바르다

  • 폭파를 일으키는 주문.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "봄바르다" 음성 입력, 인식 전면에서 폭발이 일어남. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식봄바르다.jpg 실행화면봄바르다.jpg 초기화면.jpg

3. 윙가르디움레비오사(윙가르디움레비오우사)

  • 대상을 떠오르게함. 테이블에 있던 깃털이 떠오른다.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "윙가르디움레비오사" 음성 입력, 인식 테이블 위의 깃털이 떠오른다. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식윙가.jpg 실행화면윙.jpg 초기화면.jpg

4. 익스펙토펙트로눔(익스펙토페트로눔)

  • 페트로누스를 소환. 수사슴 형태의 페트로누스가 소환된다.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "익스펙토펙트로눔" 음성 입력, 인식 수사슴 형태의 페트로누스가 소환된다. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식익스.jpg 실행화면익스.jpg 초기화면.jpg

5. 루모스(루머스)

  • 지팡이 끝에서 빛이 나오는 마법.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "루모스" 음성 입력, 인식 지팡이 끝에서 빛이 나온다. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식루모스.jpg 실행화면루모스.jpg 초기화면.jpg

6. 루모스맥시마

  • 지팡이 끝에서 강력한 빛이 나옴. 루모스의 강화 형태이다.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "루모스 맥시마" 음성 입력, 인식 지팡이 끝에서 강력한 빛이 나온다. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식루모스맥시마.jpg 실행화면루모스맥시마.jpg 초기화면.jpg

7. 아비노

  • 새를 소환
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "아비노" 음성 입력, 인식 화면 상부에 새가 지나간다. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식아비노.jpg 실행화면아비노.jpg 초기화면.jpg

8. 에바네스코

  • 대상을 사라지게함. 테이블 위의 깃털이 점점 사라진다.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "에바네스코" 음성 입력, 인식 테이블에 있던 깃털이 점점 사라진다 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식에바네스코.jpg 실행화면에바네스코.jpg 초기화면.jpg

9. 세르펜 소르티아

  • 뱀을 소환하는 마법.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "세르펜 소르티아" 음성 입력, 인식 뱀이 나타나서 바닥으로 떨어진다. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식세르펜소르티아.jpg 실행화면세르펜소르티아.jpg 초기화면.jpg

10. 스투페파이

  • 기본적인 공격 마법.
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "스투페파이" 음성 입력, 인식 지팡이 끝에서 공격 마법이 나타난다. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식스투페파이.jpg 실행화면스투페파이.jpg 초기화면.jpg

설계과정 및 관련 이론

  • 네이버 음성인식 API로 개발한다.
  • 해당 음성인식기는 안드로이드 환경에서 어플리케이션으로 실행가능 하다.
  • start 버튼을 누르면 음성인식이 활성화되고, 음성인식 후 화면에 마법주문에 맞는 애니메이션이 나온다.


네이버 음성인식 API 사용방법

네이버 음성인식 API

  • https://developers.naver.com/productcog
  • 사람의 목소리를 소켓 통신을 이용해 스트리밍 형태로 전달하면 서버에서 인식해 텍스트로 리턴해주는 API
  • 2개 언어(한국어, 영어)에 대한 음성인식이 가능
  • 음성인식 API는 스트리밍으로 제공됨
  • 처리한도 : 1,000/일
.

1. 준비사항

  • 애플리케이션 등록: 네이버 오픈 API로 개발하시려면 먼저 'Application-애플리케이션 등록' 메뉴에서 애플리케이션을 등록. [1]
  • Client ID 확인: '내 애플리케이션'에서 등록한 애플리케이션을 선택하면 Client ID 값을 확인할 수 있음.
  • API 권한 설정: '내 애플리케이션'의 'API 권한관리' 탭에서 '음성인식 API'가 체크되어 있는지 확인. 체크가 안 되어 있으면 인증 실패 에러가 발생하니 주의.
  • 패키지 이름 설정 : '내 애플리케이션'의 '설정' 탭에서 '이용 목적'에 '비로그인 오픈 API'를 체크하시고 '안드로이드 앱 패키지 이름'을 설정.
  • 안드로이드 앱 이므로, 안드로이드 앱 패키지 이름을 입력.
  • 이때 패키지 명은 gradle 빌드하는 곳에 등록된 패키지명과 동일해야합니다.
  • build.gradle 에 있는 패키지명
defaultConfig {
applicationId "패키지명"
}
이용신청
이용신청

이용신청

ClientID 확인

2. 사용법
2.1.app/build.gradle 파일에 아래 구문을 추가.

repositories {
   jcenter()
}
dependencies {
   compile 'com.naver.speech.clientapi:naverspeech-sdk-android-internal:1.0.1'
}
       

2.2.Android Manifest(AndroidManifest.xml) 확인 및 설정
패키지 이름: 아래에 예로 들은 AndroidManifest.xml 파일 내에 있는 manifest tag의 package attribute에서 패키지 이름을 찾을 수 있다. 이 값을 '내 애플리케이션'의 '설정' 탭에 있는 '안드로이드 앱 패키지 이름'과 일치시킴.
권한 설정: 음성인식을 위해선 마이크를 통해 녹음해야 하고 녹음된 데이터를 서버로 전송해야 함. 따라서, 아래처럼 android.permission.INTERNET과 android.permission.RECORD_AUDIO 권한을 반드시 설정.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.naver.naverspeech.client"
  android:versionCode="1" android:versionName="1.0" >
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

3. 네이버 OpenAPI
네이버 OpenAPI는 안드로이드 SDK 버전 10 이상을 지원. build.gradle 파일에서 minSdkVersion의 값을 확인.


4. Proguard-Rules
proguard-rules.pro 파일에 아래의 구문을 추가.

-keep class com.naver.speech.clientapi.SpeechRecognizer {
     protected private *;
}

5. SAMPLE CODE
샘플 코드에서 필요한 lib 및 class를 이식

  • 샘플코드 : [2]
.

6. SpeechRecognitionListener
SpeechRecognitionListener를 상속(implements) 받아서 각 이벤트 발생 시 호출되는 콜백 메서드를 override하여 음성인식 기능을 구현.(예제 코드의 NaverRecognizer class를 이식하여 사용하는 것을 추천)

.

API 문서 : [[3]]

음성인식 결과에 따른 애니메이션 재생

  • 음성인식이 완료된 인식결과를 전달 받을 경우, 인식가능 한 주문 중 무엇에 해당하는지 비교
  • 해당하는 주문이 없을 경우에는 다시 초기화면으로 돌아간다.
private void handleMessage(Message msg) {
...
 애니메이션재생1.PNG
...
}
Animate.PNG
...

과제 평가

기능적 평가

일반 마법 실험 어플리케이션에 요구되는 기능적 요구사항들을 달성하였는지 평가

  • 음성인식기능
    • 초기화면에서 start 버튼을 눌러 음성인식을 활성화
초기화면 음성인식 활성화
"Start"를 눌러 음성인식을 활성화 시킴. 음성인식이 활성화 되었음("...litening..."과 불빛으로 표시)
초기화면.jpg 음성인식중.jpg
  • 애니메이션 재생기능
    • 음성인식 결과에 해당하는 주문이 있을 경우 애니메이션 재생
      • ex, 아시오 (다른 주문에 대한 애니메이션 재생 기능은 "과제결과물" 참고)
초기화면 음성입력, 인식 애니메이션 재생 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "아시오" 음성 입력, 인식 멀리 있던 책더미가 전면의 테이블로 소환됨. 애니메이션 재생이 끝나면 초기화면으로 돌아감.
초기화면.jpg 음성인식아시오.jpg 실행화면아시오.jpg 초기화면.jpg
  • 음성인식 결과에 해당하는 주문이 없을 경우 초기화면으로 돌아감
초기화면 음성입력, 인식 초기화면으로 복귀
"Start"를 눌러 음성인식을 활성화 시킴. "메리크리스마스" 음성 입력, 인식 해당하는 주문이 없으므로 초기화면으로 돌아감.
초기화면.jpg 음성인식메리크리스마스.jpg 초기화면.jpg
  • 일정 시간동안 음성입력이 없을 경우 초기화면으로 돌아감
초기화면 음성인식 활성화 초기화면으로 복귀
초기화면.jpg 음성인식중.jpg 초기화면.jpg

비기능적 평가

  • 음성인식률
    • 남/녀 1명씩 실험참가
    • 명령어, 거리에 따라 남녀 각각 5번 발성 (총 20회)
  • 마이크 거리 10cm : 평균 98%
주문
아시오(아씨오) 5/5 5/5 10/10
봄바르다 5/5 5/5 10/10
윙가르디움레비오사(윙가르디움레비오우사) 5/5 5/5 10/10
익스펙토펙트로눔(익스펙토페트로눔) 5/5 5/5 10/10
루모스(루머스) 4/5 5/5 9/10
루모스맥시마 5/5 5/5 10/10
아비노 5/5 5/5 10/10
에바네스코 5/5 5/5 10/10
세르펜소르티아 5/5 5/5 10/10
스투페파이 5/5 4/5 9/10
  • 마이크 거리 30cm : 평균 91%
주문
아시오(아씨오) 4/5 5/5 9/10
봄바르다 4/5 4/5 8/10
윙가르디움레비오사(윙가르디움레비오우사) 5/5 5/5 10/10
익스펙토펙트로눔(익스펙토페트로눔) 5/5 4/5 9/10
루모스(루머스) 4/5 5/5 9/10
루모스맥시마 5/5 4/5 9/10
아비노 5/5 5/5 10/10
에바네스코 4/5 5/5 9/10
세르펜소르티아 4/5 4/5 8/10
스투페파이 5/5 5/5 10/10
  • 결과 분석 :
    • 마이크 거리가 10cm 일 경우 100%에 가까운 인식률을 보인다.
    • 마이크 거리가 30cm 일 경우 인식률이 다소 줄어든다. 일반적으로 널리 알려지지 않은 주문 (세르펜소르티아, 봄바르다) 에서 특히 낮은 인식률을 보인다.

프로젝트 진행과정

2016년 11월 2일 (수요일)

- 12시 00분 ~ 1시 00분 ( R관 903호 )

  • 과제내용 및 과제 범위 정의, 차주 목표 설정
1. 과제 범위 : 5 – 15개의 주문을 음성인식, Naver 음성인식 사용, 간단한 애니메이션으로 구현
2. 추가 구현 : unity 환경에 Naver 음성인식 모듈 이식
3. 차주 목표 : UI design, 사용할 툴 set up, 자료구조 및 알고리즘 설계


2016년 11월 8일 (화요일)

- 1시 00분 ~ 1시 30분 ( AS관 912호 )

  • UI design 확정 (스토리 보드 완성), 사용할 툴 확정 및 set up 완료, 차주 목표 설정
1. UI design (스토리 보드)
2. 사용 툴 ( android studio, unity) setup
3. 차주 목표 : 유니티 프로토타입 제작
스토리보드

안드로이드스튜디오 환경설정

유니티 환경설정

2016년 11월 18일 (금요일)

- 7시 30분 ~ 8시 30분 ( AS관 912호 )

  • 프로토타입 테스트, Unity 환경 의 그래픽 또는 2D animation 제작 중 결정, 차주 목표 설정
1. 프로토타입 테스트, 유니티 환경에서의 간단한 그래픽 구현 성공, java 기반의 naver api 이식 실패
2. Unity 환경의 그래픽 / 2D animation 제작 중 결정 / Unity 코드에 Naver Api 이식이 원활하지 않고, 개발 기간이 촉박하므로, 2D animation으로 개발하기로 결정
3. 다음 회의 목표 : 애니메이션 제작, 음성인식 모듈, 애니메이션 재생 모듈 구현 시작 / 차주에는 개인 일정으로 회의를 잡지 않음. 모듈 구현을 마치고 다다음주에 회의 하기로함.


프로토타입 화면1
프로토타입 화면2

2016년 12월 1일 (목요일)

- 6시 00분 ~ 7시 30분 ( AS관 912호 )

  • 모듈 테스트, LG G4(Android 6.0), 갤럭시 A7 2016(Android version 5.1.1) 환경에서의 테스트, 결과보고서 역할 분담, 차주 목표 설정
1. 모듈 테스트 : 음성인식 모듈 ( Naver Speech Api Sample Project ), 애니메이션 재생 모듈 테스트
1.1 : 갤럭시 A7 2016(Android version 5.1.1) 환경
음성인식 모듈
애니메이션 재생 모듈
1.2 : LG G4(Android 6.0) 환경


음성인식 모듈
애니메이션 재생 모듈
2. 결과 보고서 역할 분담 / 정유진 : 과제 수행방법, 과제 결과물, 기타 / 강요셉 : 과제 내용, 과제의 필요성, 과제 목표, 과제 수행 실적
3. 차주 목표 설정 : 모듈 인테그레이션, 결과 보고서 작성

2016년 12월 13일 (화요일)

- 12시 00분 ~ 1시 00분 ( R관 903호 )

  • 인테그레이션 테스트, LG G4, 갤럭시 A7 2016 환경에서의 Integration Test, 결과보고서 완성, 발표 역할 분담
1. 인테그레이션 테스트
1.1 : 갤럭시 A7 2016(Android version 5.1.1) 환경
어플리케이션 실행 화면
1.2 : LG G4(Android 6.0) 환경
어플리케이션 실행 화면
2. 결과 보고서 완성 / 결과 발표 역할 분담


기타

예산 내역

1. 계획
구분 항목 산출근거 금액 비고
1 회의비 4회 / 회당 1인 20000원 / 3명 240,000원 팀원 2명 + 멘토 1명
2 재료비 Unity Pro + Asset 261,000원 *LINC: 예산수정불필요
합계 501,000원


2. 집행
구분 항목 내역 금액 비고
1 회의비 2회 114,500원
2 재료비 Unity Pro + Asset 0원 Naver Api Auth Failure / *LINC문의완료
합계 114,500원

향후 도전 과제

본 과제에서 추가구현으로 유니티 환경에서의 게임적 요소를 제안했으나, Unity 환경에서의 3D 그래픽을 안드로이드스튜디오에서 직접 제작한 2D 애니메이션으로 대체하였다. 향후 전문가의 조언을 통하여 Unity에서 음성인식이 원활히 실행 할 수 있도록 하여 보다 나은 게임성을 향상시킬 수 있기를 기대한다. 또한 구글 음성인식이 네이버 음성인식보다 실험적으로 높은 성능을 나타내었다. 따라서 구글 음성인식 API로 변경하여 보다 정확한 음성인식 인터페이스를 사용자에게 제공할 수 있다.

참고 문헌

[1] 네이버 Developers website <https://developers.naver.com/docs/labs/vrecog>
[2] github(naverspeech-sdk-android) website <https://github.com/naver/naverspeech-sdk-android>
[3] 나무위키 (해리포터 시리즈/마법) website <https://namu.wiki/w/%ED%95%B4%EB%A6%AC%20%ED%8F%AC%ED%84%B0%20%EC%8B%9C%EB%A6%AC%EC%A6%88/%EB%A7%88%EB%B2%95>
개인 도구
이름공간

변수
행위
둘러보기
LINC 사업단
도구