[스틸스] 음성 검색 및 검색 기능 구현 (Google Speech-to-Text API, tag, Key event)

 

검색 기능은 구현하는 데 마지막까지 힘들게 했던 기능 중 하나이다.

 

로직은 오류가 없어보이는 데 계속해서 검색을 실행하는 로직 자체가 작동을 안해서 원인을 찾는 데 매우 오래걸렸다.

 

 

정작 로직이 실행되지 않는 원인은 매우 간단한 부분에서의 오류 때문이었다....

정말...단지...Key event 속성 이름 값이 잘못되었기 때문이었다.

 

검색을 실행하기 위해 'Enter' Key event를 이벤트 리스너로 설정해주었다.

이 과정에서 처음에 keyup 이라는 속성 값을 사용했지만 keyup 속성이 현재 존재하지 않는 속성 값이었기 때문에 로직 자체가 실행이 안되는 것임을 발견하게 됐다.

따라서 이벤트 속성 값을 keydown으로 변경해주었고,

이후로는 검색 로직이 정상적으로 작동하는 것을 확인할 수 있었다.

if (searchInput) {

    searchInput.addEventListener("keydown", (event) => {

        if (event.key === 'Enter') {

 

    });

}

 

 

---

 

 

1. 음성 검색 구현 (Google Speech-to-Text API)

 

디지털 약자를 위한 기능으로 음성 검색을 기획해 구현까지 해보았다.

 

음성을 텍스트로 변환해주는 Google Speech-to-Text API를 활용해 기능을 구현할 수 있었고,

음성 검색과 일반 검색 기능을 구분해 자유롭게 원하는 검색 기능을 사용자가 이용할 수 있도록 했다.

 

 

이벤트 리스너를 통해 음성 검색 버튼을 누르면 speech 함수가 작동하도록 되어있고, speech 함수에 대해 조금 더 자세히 설명해보겠다.

 

function sendSpeech() {

    var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;

    var recognition = new SpeechRecognition();

    var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;

    var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;

    var diagnosticPara = document.querySelector('.output');

    recognition.grammars = new SpeechGrammarList();

    recognition.lang = 'ko-KR';

    recognition.interimResults = false;

    recognition.maxAlternatives = 1;

    recognition.start();

    recognition.onresult = function(event) {

        var speechResult = event.results[0][0].transcript.toLowerCase();

        console.log('Confidence: ' + event.results[0][0].confidence);

        console.log('Speech Result: ' + speechResult);

        diagnosticPara.value = speechResult;

    }

}

 

 

sendSpeech 함수는 음성 인식을 설정하고 시작한다.

• SpeechRecognition 객체 생성. 이는 웹킷 기반 브라우저에서는 webkitSpeechRecognition으로 대체될 수 있다.
• recognition 객체 설정 정의:
  - recognition.grammars : SpeechGrammarList 객체 설정
  - recognition.lang : 인식할 언어를 한국어(ko-KR)로 설정
  - recognition.interimResults : 일시적인 결과를 받을 지 여부를 false로 설정
  - recognition.maxAlternatives : 최대 대안 개수를 1로 설정
• recognition.start(): 음성 인식 시작
• recognition.onresult 이벤트 핸들러 :
  음성 인식 결과 받으면, 결과의 첫 번째 대안을 speechResult 변수에 저장 =>
  인식된 음성 결과를 diagnosticPara 요소의 값으로 설정 => diagnosticPara 값을 검색어 영역에 표시

 

728x90

 

---

 

 

2. 검색 기능 (tag 이용)

 

검색 기능은 keydown 이벤트 리스너를 통해 엔터키로 동작이 되게 구현했으며,

사용자가 검색 창에 입력한 값을 tag 변수에 저장하며 tag 값을 데이터베이스에 있는 상품의 tag와 비교해 검색 결과를 반환한다.

 

if (searchInput) {

    searchInput.addEventListener("keydown", (event) => {

        if (event.key === 'Enter') {

            event.preventDefault();

            const tag = searchInput.value.trim();

            if (!tag) {

                alert('검색어를 입력하세요.');

                return;

            }

            window.location.href = `/search?tag=${encodeURIComponent(tag)}`;

        }

    });

}

 

 

• searchInput이 존재하면 keydown 이벤트 리스너 추가
• 사용자가 Enter 키를 누르면 이벤트를 기본 동작을 막고, 입력된 값을 tag 변수에 저장
• .trim() : 문자열의 양 끝에 있는 공백 문자를 제거. 사용자가 입력한 검색어의 공백 제거
• tag가 비어 있으면 경고 메시지를 표시하고 함수 종료
• tag가 있으면 URL을 /search?tag=${encodeURIComponent(tag)}로 설정하여 검색 결과 페이지로 이동
• encodeURIComponent : 주어진 문자열을 URI(Uniform Resource Identifier) 구성 요소로 인코딩. 이 함수는 문자열을 URL로 전달할 때 특수 문자가 포함되어 있더라도 문제가 없도록 변환함

 

exports.searchByTag = (tag, cb) => {

    const query = 'SELECT * FROM product WHERE pro_tag LIKE ?';

    const tagParams = '%' + tag + '%'

    conn.query(query, [tagParams], (err, results) => {

        if (err) {

            console.error('Error:', err);

            return cb([]);

        }

        console.log(results);

        cb(results);

    });

};

 

 

입력 값이 tag에 포함되는지 판단해 검색 결과를 반환하기 위해 LIKE 비교를 사용했으며 사용자 입력값인 tag를 포함하는 값을 모두 반환하도록 '%tag%' 형태로 값을 넘겨주었다.

 

• searchByTag 함수는 데이터베이스에서 태그를 기반으로 제품을 검색
• 검색어를 포함하는 SQL 쿼리 생성, LIKE 절을 사용하여 부분 일치를 허용
• 데이터베이스 연결 객체 conn을 사용하여 쿼리 실행, 결과를 콜백 함수 cb로 반환

 

음성 검색 및 검색 결과

 

 

 

따라서,

사용자는 원하는 검색어를 입력해 이에 해당하는 결과 값을 검색 결과 페이지에서 확인할 수 있다.

 

 

 

또한, 음성 검색 기능을 자주 사용할 수 있도록 음성 검색을 유도하는 메세지를 초단위로 띄우면서 사용자의 관심을 끌도록 설정해보았다.

 

음성 검색 유도 메세지