μžμ‹ μ˜ 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μ—μ„œ μ£ΌλŠ” μ΄λ―Έμ§€λ‚˜ μ•‘μ…˜μ— μ’…μ†λ˜μ§€ μ•Šκ³ , μ—¬λŸ¬λΆ„μ΄ μ›ν•˜λŠ” 마이크 이미지도 μ‚¬μš©ν•  수 μžˆμœΌλ‹ˆ μ—¬λŸ¬λͺ¨λ‘œ μ‘μš©ν•΄λ³΄μ‹œκΈ° λ°”λžλ‹ˆλ‹€.

λ°˜μ‘ν˜•
TAGS.

Tistory Comments