24일차_speech.js로 미니프로젝트 음성인식 구현 및 github를 통한 정적배포

안녕하세요

 

오늘은 4/4(금) 데브코스 24일차 입니다!

 

브라우저에서 음성 인식을 처리하는 speech.js 모듈을 직접 제작하고,

이를 활용한 미니 프로젝트인 kakaobook을 구현한 뒤, 정적 웹사이트로 GitHub Pages를 통해 배포까지 진행했습니다.

 

1. 음성 인식 기능 구현 (speech.js)

브라우저에서 마이크로 입력된 음성을 인식해 텍스트로 변환하는 기능을 speech.js 모듈로 구현했습니다.

 

• Web Speech API 중 SpeechRecognition을 활용하여 브라우저에서 음성 입력을 감지
• 음성이 감지되면 자동으로 텍스트로 변환해 화면에 출력되도록 처리
• 인식 결과를 콜백으로 넘길 수 있게 모듈화하여 재사용 가능하도록 설계

 

2. kakaobook 프로젝트에 적용

speech.js를 활용해 사용자의 음성 명령으로 책을 검색하거나 페이지 이동을 수행할 수 있는 웹 인터페이스를 제작했습니다.

 

• 음성으로 “다음”, “이전”, “책 검색: 자바” 등의 명령어를 인식
• q_kakaobook.html 내부에서 speech.js를 불러와 사용

 

3. GitHub Pages를 통한 정적 웹 배포

완성된 프로젝트를 GitHub의 voice 레포지토리에 업로드한 뒤, GitHub Pages 기능을 활용해 배포를 진행했습니다.

 

배포 절차

1. GitHub voice 저장소에서 Settings → Pages로 이동
2. Branch를 main으로 설정, 루트 디렉토리 선택
3. Save 버튼을 누르면 GitHub이 자동으로 정적 페이지를 배포함
4. 배포 URL 확인

https://깃허브아이디.github.io/voice/q_kakaobook.html

 

 

 

오늘도 고생하셨습니다.