브라우저의 재발견

SpeechRecognition

말로 하는 대피 훈련

해결하는 문제

손을 쓸 수 없는 상황에서 말로 화면을 조작하고 싶다.

한국어로 말한 문장을 글자로 바꾸고, 그 안에서 방향과 숫자를 찾아 명령으로 실행합니다.

체험하기

서버 의존도

서버 없이 브라우저 기본 기능만 씁니다.

브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요

데이터가 흐르는 길

무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.

들어오는 것목소리
브라우저가 하는 일브라우저 음성 인식으로 문장 변환, 방향 단어와 칸 수 추출
나오는 것이동 명령 실행, 성공·실패 음성 안내

쓰는 브라우저 기술

SpeechRecognition (webkit)speechSynthesisWeb Audio

라이브러리와 모델

외부 라이브러리 없이 브라우저 기본 기능만 씁니다.

바꿀 수 있는 옵션

  • lang: ko-KR
  • continuous: 계속 듣기
  • interimResults: 말하는 도중 결과 받기
  • 명령어 사전(동의어 묶음)

자주 막히는 곳

  • 음성 인식은 브라우저 회사 서버를 거쳐 인터넷이 필요하다
  • "오른쪽"이 "오늘 쪽"처럼 잘못 들리므로 동의어 사전이 필요하다
  • 안내 음성을 마이크가 다시 듣고 명령으로 착각한다

이 능력으로 만들 수 있는 서비스

같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.

AI 서비스
  • 말로 쓰는 업무 비서
  • 말로 하는 데이터 조회
웹 서비스
  • 손을 쓰지 않는 레시피·매뉴얼 넘기기
  • 접근성 음성 내비게이션
피지컬 AI
  • 말로 조종하는 RC카·로봇 (블루투스로 전달)
  • 음성 명령 스마트 조명

넓히는 방법

  • 명령을 AI 언어 모델로 해석해 자유로운 문장 처리
  • 인터넷 없는 받아쓰기는 Whisper로 교체
  • 여러 언어 명령

지원 브라우저

PC 크롬·엣지된다
맥 사파리일부
안드로이드 크롬된다
아이폰 사파리일부

코딩 에이전트에게 줄 프롬프트

복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.

"위로", "오른쪽 두 칸"처럼 한국어로 말하면 캐릭터가 이동해서 번지는 불을 피해 비상구로 가는 음성 인식 게임을 만들어줘.

같은 분류의 능력

04 브라우저 속 AI에 속한 다른 능력입니다.

무료로 보는 것

체험 페이지, 한 줄 설명, 미리보기 영상

스킬팩 구성

full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md