들어가며

최근 자사 웹 플랫폼을 한창 만들고 있습니다.. 새로운 요구사항이 들어왔는데, 바로 음성인식으로 텍스트 데이터를 입력할 수 있으면 좋겠다는 내용이었습니다. 자사 플랫폼 중에서 전문가의 리뷰를 받는 부분이 있는데, 이 때 전문가 분들이 타이핑을 하기 어려워하는 분들이 많다는 이유였습니다. 한 번도 해보진 않았지만, 일단 해보겠다고 하고 난 뒤 구현에 성공했습니다. 여기서는 그 과정에서 대해서 말해보려고 합니다.

디자인

처음 생각한 디자인은 Mac 의 받아쓰기 기능과 같습니다. 이 기능을 그대로 활용하면 좋겠지만, 아쉽게도 전문가 분들이 대부분 윈도우를 사용하시고 윈도우 11 부터 한국어를 지원하기 때문에 사용하기가 어렵습니다. 어쨋든 기능 디자인은 아래처럼 간단합니다.

• 마우스로 데이터를 입력할 부분을 클릭 해 커서를 활성화시킨다.
• 다음으로 받아쓰기 기능을 키고 말을 한다.
• 원할 때 받아쓰기 기능을 끈다.

구현

1. 음성 인식 기능

Web API에는 편리하게도 SpeechRecognition 기능이 존재합니다. 바로 음성 입력을 번역해주는 기능이죠. 다행히 한국어도 지원하기에 아래와 같이 해석된 문장을 입력받아 콜백을 적용할 수 있습니다. 브라우저 중에서는 이 기능을 지원하지 않는 경우도 있기에 아래와 같이 조건문을 설정했습니다. onresult 가 바로 콜백을 적용하는 문장입니다. 여기서 텍스트 영역이 선택된 경우 음성 인식 문장을 추가해주는 기능을 구현했습니다.

export const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)

if(recognition){
    recognition.continuous = true;
    recognition.interimResults = false;
    recognition.lang = 'ko-KR'
    recognition.onresult = (event) => {
        const focusedComponent = getFocusedComponent()
        const isTextAreaFocused = isTextArea(focusedComponent)
        let interimTranscript = "";

        for (let i = event.resultIndex; i < event.results.length; i++) {
            const transcript = event.results[i][0].transcript;
            console.log(transcript)
            if (event.results[i].isFinal) {
                interimTranscript=transcript
            } else {
                interimTranscript += transcript;
            }
        }
        if(isTextAreaFocused){
            focusedComponent.innerHTML += interimTranscript
        }

    }
}
else{
    console.log("SpeechRecognition is not supported")
}

const getFocusedComponent = ():HTMLElement => {
    return document.activeElement as HTMLElement
}

const isTextArea = (element:HTMLElement):boolean => {
    return element.tagName === 'TEXTAREA'
}

2. 음성인식을 ON/OFF를 설정할 수 있는 버튼

음성 인식 지원 유무를 다시 검사하고 만약 지원하지 않다면 비어있는 컴포넌트를 반환하도록 합니다. recognition.start() 와 recognition.stop() 을 이용해 음성인식 유무를 활성화 할 수 있습니다.

import React from 'react'
import {Button} from "@mui/material";
import MicIcon from '@mui/icons-material/Mic';
import MicOffIcon from '@mui/icons-material/MicOff';
import {recognition} from "./SpeechRecognition";

const isSpeechRecognitionSupported = ():boolean => {
    return 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window;
}

const setSpeechRecognition= (isActivate : boolean) => {
    if(!recognition){
        throw new Error("SpeechRecognition is not supported")
    }
    if(isActivate){
        recognition.start()
    } else{
        recognition.stop()
    }

}
/**
 * 받아쓰기 기능을 활성화, 비활성화 할 수 있는 버튼입니다.
 * 브라우저가 음성인식을 사용하지 않는 경우 사용할 수 없습니다.
 * autoVisible 속성을 true로 설정하면 음성인식이 지원되지 않는 경우 버튼이 보이지 않습니다.
 * @param props
 * @constructor
 */
const DictationActivateButton=({autoVisible  = true})=>{
    const [isActivated, setIsActivated] = React.useState(false);
    const isSupported=isSpeechRecognitionSupported()

    if(!isSupported && autoVisible){
        return <></>
    }

    const onClick=()=> {
        if(isSupported){
            setSpeechRecognition(!isActivated)
            setIsActivated(!isActivated)
        }
        else{
            alert("음성인식을 지원하지 않는 브라우저입니다.")
        }
    }

    return (
        <Button onClick={onClick}>
            {isActivated ? <MicIcon/> : <MicOffIcon/>}
        </Button>
    )
}
export default DictationActivateButton

결과

텍스트 영역을 클릭하고 말을 하면 잘 인식하는 모습을 볼 수 있습니다!