앱인벤터 음성인식으로 네이버 검색하는 앱만들기 - 실습

음성인식 기능을 이용한 

검색 앱 만들기

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

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

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

그럼 시작해 보겠습니다.

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

■ 디자인 영역

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

1. [사용자 인터페이스] → [웹뷰어] 포함  2. [레이아웃] → [수평배치] 포함  3. [사용자 인터페이스] → [버튼] 수평배치 안으로 포함

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

1. [웹뷰어] 설정      - 홈 URL : 'http://naver.com'  2. [버튼] 설정     - 속성 : 텍스트 → '음성인식'     - 컴포넌트 : 버튼이름 → '음성인식_버튼'  3. [수직배치] 설정     - 수평정렬 → 중앙     - 수직정렬 → 가운데     - 높이 → 자동     - 너비 → 부모에맞추기

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

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

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

■ 블록 영역

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

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

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

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

1. [음성인식]  → <음성인식 텍스트를 가져온 후 > 포함  2. [웹뷰어] → <호출 웹뷰어.URL 로 이동> 음성인식 실행 부분에 연결  3. [텍스트] → <합치기> 를 웹뷰어 url 에 연결  4. [텍스트] 값 → "https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query="   5. <음성인식 텍스트를 가져온 후 > 결과 부분을 클릭하면 <가져오기 결과>블록이 나타납니다.     드래그하여 <합치기>에 연결합니다.

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

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

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

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

 

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

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

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