자신의 Tistory 블로그 검색에 음성 인식 기능을 넣어보자.

Tistory 블로그에는 포스트를 검색할 수 있는 검색 기능이 내장되어 있습니다. 이 기능은 Tistory 블로그에서 자체적으로 제공하는 함수를 기반으로 검색이 이루어지는데요. 보통 검색은 키보드로 자신이 찾고자 하는 키워드를 입력하여 검색을 할 수 있습니다.

12 ~ 13년도 저의 블로그에는 검색 박스에 음성 인식 API를 장착한 적이 있었습니다. 이는 Speech Input API for HTML5를 사용한 것인데요. 사용 방법이 매우 쉽고 편해서 누구나 따라할 수 있었습니다.

위 소스를 input 태그 옆에 부착하면 쉽게 음성 인식 기능을 탑재시킬 수 있었죠.

당시 Google Chrome 브라우저에서 유일하게 사용할 수 있었습니다. 다른 브라우저에서는 지원하지 않는 불편함이 있었고, 태그 속성으로만 사용할 수 있어, HTML 등 마크업 언어를 제외한 나머지 언어에서는 사용이 불가능하여 확장성이 떨어지는 단점을 초래하여 현재 크롬 브라우저에서도 지원이 되지 않습니다.

Web Speech API for Google Chrome

하지만 Google Chrome에서는 위의 API를 사용하지 않는 대신 순수 브라우저에서 자신들만의 TTS(Text To Speech) API를 개발하였습니다. 이 기능은 13년도에 개발되어 현재도 쓰이고 있는 크롬의 음성 인식 API 입니다. Google Chrome 브라우저에서 지원하기 때문에, Google Chrome 브라우저가 아닌 브라우저에서는 사용할 수 밖에 없다는 단점이 있습니다.

Launch Demo

위 버튼을 클릭하여, 데모를 실행해보실 수 있습니다.

내 블로그에 넣어보자.

아무래도 HTML5 처엄 태그 한 개만 넣을 수 있는 것보다는 조금 과정이 복잡할 수 있습니다. 먼저 위에 있는 데모가 소스 코드로 공개 되어 있기 때문에, 우리는 이 소스 코드를 먼저 다운로드 받도록 하겠습니다.

Get Source Code

소스 코드를 받으면, 1개의 HTML 파일과 3개의 gif 파일을 받아보실 수 있습니다.

위 파일을 받으셨다면, 이제 자신의 Tistory 블로그 관리 페이지에서 스킨을 클릭합니다.

자신의 스킨을 먼저 백업해둡시다. 특히 처음 HTML/CSS 편집해보시는 분들이라면, 더욱 더 이 작업을 해주시기 바랍니다...

저장한 스킨은 보관함 버튼을 이용해서 쉽게 복구하실 수 있습니다.

적절한 이름을 넣고, 저장하셨다면, 옆에 HTML/CSS 편집을 눌러줍니다.

파일 업로드를 선택한 후, 밑에 추가 버튼을 클릭해서, 아까 다운로드 받은 소스 코드 중, 3개의 gif 파일을 업로드 시킵니다.

그러면, 위와 같이 3개의 파일이 업로드 된 것을 확인하실 수 있습니다.

적용 버튼을 클릭하고, CSS 버튼을 클릭합니다.

자신의 코드 맨 밑에 위 코드를 복사/붙여넣기 하고 저장을 클릭합니다.

HTML 버튼을 클릭하여, 위 코드도 똑같이 </body> 이전에 복사/붙여넣기 합니다. (저장은 클릭하지 않습니다.)

여기서 이제 여러분들이 수정해주셔야 할 부분이 있습니다. 위 코드에서 제가 주석으로 '자신의 검색 상자 태그ID를 여기에 넣습니다' 라고 된 부분이 있습니다. 거기에 your_searchbox_Name을 지우고, 여러분 블로그 검색 상자의 태그ID를 입력하시면 됩니다.

태그 ID를 잘 모르겠다면, 크롬 브라우저에서 검색 상자에 오른쪽 클릭한 후, Inspect 버튼을 클릭하시면 소스 코드가 나오므로 해당 부분을 참고하시면 됩니다.

위 소스 코드는 자신의 블로그에 마이크를 놓을 소스 코드로, 보통 검색 상자 옆에 달기 때문에, 적당히 여러분들이 넣고 싶은 곳에 복사/붙여넣기 하시면 됩니다.

음성 인식 확인

자 그럼 이제 제대로 동작하는지 확인해보겠습니다. 저는 검색 버튼 오른쪽에 마이크 버튼을 달아두었습니다. 소스 코드를 조금 추가하여, 검색을 누르지 않았을 때는 마이크 버튼이 나오지 않고, 검색 버튼을 클릭했을시에만 마이크가 나오도록 하였습니다. 

자 아직 검색 버튼을 누르지 않았기 때문에, 마이크가 표시되지 않습니다.

오 이제 검색 버튼 오른쪽에 조그만한 마이크 모양이 생겼네요. 이제 한 번 눌러보겠습니다.

어? 그런데, 마이크 아이콘에 줄이 그어지면서, 왼쪽에 무엇이 나타나는군요. 그렇습니다. Google Chrome 브라우저는 사용자의 컴퓨터 하드웨어를 사용하기 전에, 반드시 권한 검사를 하도록 되어 있습니다. 음성 인식은 마이크를 사용해야 하기 때문에 이 사이트가 마이크 사용하는 것을 허락하도록 해줘야 합니다. 가뿐히 Allow를 클릭해줍니다.

그럼 마이크가 Ripple 되면서 음성 인식을 하게 될 것입니다. 아무런 말이나 한 번 해볼까요?

오 잘 인식이 되는군요. 아쉽게도 제가 이어서 단어를 말할 수도 있어, 자동으로 Enter 누르도록 하지는 않았습니다. 그러므로 단어가 적절히 입력되었다면, 검색 버튼을 클릭하시면 바로 검색이 됩니다.

음성 언어는 한국어만 지원됩니다. 소스 코드에서 다른 언어에 대한 지원은 제외하였습니다.

마치며....

여기까지 Tistory 블로그 검색에 음성 인식 기능을 넣는 방법에 대해 적어봤습니다. 이 방법은 Tistory 블로그 뿐만이 아니라 여러분이 직접 만든 블로그, 홈페이지에도 사용하실 수 있습니다. 또한 기존 HTML5 확장 기능처럼, HTML5에서 주는 이미지나 액션에 종속되지 않고, 여러분이 원하는 마이크 이미지도 사용할 수 있으니 여러모로 응용해보시기 바랍니다.