음성인식 기능을 이용한 

검색 앱 만들기


앱 인벤터 음성인식


앱인벤터에는 다양한 기능들이 제공되고 있습니다. 

그 중 음성인식 기능을 이용하여 검색엔진에서 검색을 하는 실습을 해 보도록 하겠습니다.

앱인벤터 사이트(ai2.appinventor.mit.edu)로 이동하여, 먼저 새 프로젝트를 하나 생성 해 줍니다.


그럼 시작해 보겠습니다.

먼저 디자인 부분을 작업하도록 하겠습니다. 


■ 디자인 영역


화면에 웹뷰어, 그리고 음성인식버튼을 추가 해 주도록 하겠습니다. 그리고 화면 디자인 구조를 위해 레이아웃에서 수평배치 컴포넌트를 사용하도록 하겠습니다.

 1. [사용자 인터페이스] → [웹뷰어] 포함

 2. [레이아웃] → [수평배치] 포함

 3. [사용자 인터페이스] → [버튼] 수평배치 안으로 포함


그럼 각 컴포넌트들의 속성 및 이름을 설정 해 주도록 하겠습니다. 웹뷰어 초기 url로 네이버 주소를 입력하고, 보기좋도록 조금 수정 해 줍니다. 컴포넌트 이름은 알아보기 쉽도록 하며 됩니다.

 1. [웹뷰어] 설정

     - 홈 URL : 'http://naver.com'

 2. [버튼] 설정

    - 속성 : 텍스트 → '음성인식'

    - 컴포넌트 : 버튼이름 → '음성인식_버튼'

 3. [수직배치] 설정

    - 수평정렬 → 중앙

    - 수직정렬 → 가운데

    - 높이 → 자동

    - 너비 → 부모에맞추기


미디어에서 음성인식 컴포넌트를 드래그 하여 포함시켜 줍니다.

 1. [미디어] → [음성인식] 포함 


여기까지 하였다면 다음과 같이 디자인 영역이 설정 됩니다.


디자인화면



■ 블록 영역


블록 부분은 순서를 이미지 부터 보고 그에따른 설명을 드리도록 하겠습니다.


코딩1

[음성인식_버튼]을 클릭하면 음성인식 대기모드가 됩니다. 그 상태에서 말을 하면 음성인식이 되어 검색어 하게 됩니다. [음성인식_버튼]을 클릭하여 텍스트를 가져오는 부분 입니다. 

 1. [음성인식 버튼]  → <언제 음성인식 클릭> 포함

 2. [음성인식]  → <언제 음성인식 클릭> 포함


코딩2

이번에는 텍스트를 가져온 상태에서 실행되는 액션을 구성하도록 하겠습니다.

 1. [음성인식]  → <음성인식 텍스트를 가져온 후 > 포함

 2. [웹뷰어] → <호출 웹뷰어.URL 로 이동> 음성인식 실행 부분에 연결

 3. [텍스트] → <합치기> 를 웹뷰어 url 에 연결

 4. [텍스트] 값 → "https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=

 5. <음성인식 텍스트를 가져온 후 > 결과 부분을 클릭하면 <가져오기 결과>블록이 나타납니다.

    드래그하여 <합치기>에 연결합니다. 



이제 모든 코딩이 완료 되었습니다. 

그럼 모바일 화면에서 확인 해 보도록 하겠습니다.

앱을 실행하면 다음과 같이 나타납니다. 그리고 음성인식 버튼을 클릭하면 인식대기 상태가 됩니다.

이때 말을 하면 인식하여 검색이 됩니다.


초기화면 음성인식화면


다음과 같이 검색이 잘 됩니다. 이렇게 하여, 앱인벤터 음성인식으로 네이버 검색하는 방법을 알아보았습니다.

도움 되셨다면 하트 한번 꾹~!! 눌러 주세요.

앱 인벤터 메뉴를 따로 생성 하였습니다. 앱 인벤터에 대하여 지속적으로 자세하고 쉽게 포스팅 해 보고자 하는 마음에서 입니다. 많이 방문하셔서 함께 앱인벤터에 대하여 알아가면 좋겠습니다.


결과화면

Posted by JOY [바가지]

댓글을 달아 주세요



티스토리 툴바