【개발 분투기】AmiVoice API × GPT로 꿈의 “자연 대화 브라우저”를 구현! 지연과 노이즈를 극복한 끝에 마주한 최고의 UX란
요약
본 글은 사용자의 사고 흐름을 방해받지 않고 자연스러운 대화로 브라우저를 조작할 수 있는 '자연 대화 브라우저' 개발 과정을 다루고 있습니다. 기존 음성 입력 기술의 낮은 정밀도, 엄격한 커맨드 구조, 문맥 이해 부족 등의 한계를 극복하기 위해, AmiVoice API를 최고의 '귀'(음성 인식)로, GPT-4o를 똑똑한 '뇌'(의도 해석 및 명령 생성)로 활용했습니다. 최종 아키텍처는 마이크 입력 → AmiVoice API (WebSocket) → GPT-4o API → Chrome 확장 기능 순으로 구성되어, 음성을 받아 구조화된 실행 커맨드로 변환하여 브라우저를 조작합니다.
핵심 포인트
- 자연 대화 브라우저는 사용자의 사고 흐름을 방해하지 않는 직관적인 인터페이스가 목표입니다.
- 기존 음성 입력 기술은 문맥 이해와 실시간성이 부족하여 '파트너' 역할을 수행하기 어렵습니다.
- AmiVoice API는 높은 인식 정밀도와 낮은 지연 시간(Latency)으로 음성 인식을 담당하는 핵심 컴포넌트입니다.
- GPT-4o를 활용한 프롬프트 엔지니어링을 통해 모호한 자연어를 프로그램이 해석 가능한 JSON 형태의 실행 커맨드로 변환합니다.
- 전체 시스템은 Chrome 확장 기능을 기반으로 하며, AmiVoice API와 GPT-4o API가 핵심 역할을 수행하는 아키텍처입니다.
왜 「말하는 것만으로 사용할 수 있는 브라우저」를 만들려고 했는가
"있잖아, 어제 밤에 찾아봤던 이탈리안 레스토랑 탭을 열어서 예약 가능한지 확인해 줄래?"
SF 영화의 한 장면처럼, 컴퓨터와 매우 자연스러운 대화로 주고받는다. 그런 미래를 누구나 한 번쯤은 동경해 본 적이 있지 않을까요.
매일 우리는 브라우저 상에서 무수히 많은 탭을 열고, 마우스와 키보드를 구사하며 정보를 찾고 있습니다. 하지만 문득 "좀 더 직관적으로, 사고의 흐름을 방해받지 않고 조작할 수 있다면..."이라고 느끼는 순간은 없으신가요?
- 요리 중이라 손을 뗄 수 없을 때
- 여러 자료를 비교하며 보고 있어서, 탭 전환이 번거로울 때
- 애초에 키보드 입력이 귀찮을 때
이 작은 스트레스의 축적이 우리의 집중력이나 창의성을 깎아먹고 있는 것은 아닐까. 그런 문제 의식으로부터, "인간과 대화하듯이, 매우 자연스러운 언어로 조작할 수 있는 브라우저"——즉, “자연 대화 브라우저” 개발 프로젝트는 시작되었습니다.
목표로 한 것은 단순한 음성 명령이 아닙니다. "~해줘"라는 명령뿐만 아니라, "~하고 싶은데"와 같은 모호한 요구도 파악하여 앞서서 조작해 주는, 똑똑하고 센스 있는 파트너 같은 존재입니다.
기존의 음성 입력은 왜 「이게 아니다」라고 느껴지는가
개발을 시작하며 기존의 음성 입력 기술을 다시 한번 조사했습니다. OS 표준 음성 어시스턴트나 브라우저 확장 기능 등, 이미 세상에는 많은 음성 입력 도구가 존재합니다. 하지만 그것들은 안타깝게도 「파트너」라고 부르기에는 거리가 멀었습니다.
【Before】 기존 음성 입력의 문제점
인식 정밀도가 낮음: 조금 말이 빨라지거나 주변에 잡음이 있으면 금방 오인식한다.
커맨드가 너무 엄격함: "탭을 닫아"는 인식해도 "이 탭을 지워줘"는 NG인 것처럼, 정해진 말투만 받아들인다.
실시간성 결여: 말을 마친 후, 한 템포 늦게 글자가 입력되거나 액션이 실행된다.
문맥을 이해하지 못함: 이전 대화의 흐름을 전혀 기억하지 못하기 때문에 연속적인 조작이 불가능하다.
이래서는 오히려 조작이 번잡해지고 스트레스만 쌓일 뿐입니다. "이게 아니다"라는 느낌을 지울 수 없었습니다. 우리가 목표로 하는 체험에는 더 고성능인 「귀」와 「뇌」가 필요했습니다.
최고의 「귀」를 찾아서: AmiVoice API와의 만남
먼저 해결해야 할 것은 입력의 근간인 「음성 인식 (Speech Recognition)」의 정밀도입니다. 다양한 API를 비교 검토한 결과, 우리는 AmiVoice API에 도달했습니다. 도입의 결정적인 요인은 다음과 같습니다.
압도적인 인식 정밀도: 실시간 음성 인식 API 「AmiVoice API WebSocket」은 놀라울 정도로 빠르고 정확하게 음성을 텍스트로 변환해 줍니다. 약간의 노이즈나 빠른 말투에도 강하며, 마치 사람이 듣고 있는 것 같은 자연스러움을 보여줍니다.
발화 구분 검출의 유연성: 문장의 끊김을 자동으로 검출하여 실시간으로 텍스트를 반환해 주기 때문에, UX를 해치는 지연(Latency)을 최소한으로 억제할 수 있습니다.
국산 API의 안심감: 일본 기업이 개발·제공하고 있기 때문에 문서도 일본어로 충실하며 서포트도 신속합니다. 이는 개인 개발자에게 매우 든든한 포인트였습니다.
이 최고의 「귀」를 손에 넣음으로써 프로젝트는 크게 전진했습니다.
똑똑한 「뇌」를 구현하다: GPT와의 접속
다음에 필요한 것은 AmiVoice가 텍스트화한 자연어를 브라우저가 실행할 수 있는 구체적인 명령으로 변환하는 「뇌」 부분입니다. 여기서 선택한 것이 바로 잘 알려진 GPT (Generative Pre-trained Transformer) 입니다.
GPT의 역할은 말하자면 "초우수한 통역사"입니다.
"이 기사에서 중요해 보이는 부분을 하이라이트 해줘"
라는 식의 모호한 인간의 말을,
{ "action": "highlight", "keywords": ["중요", "결론", "포인트"] }
와 같이 프로그램이 해석 가능한 구조화 데이터 (JSON)로 변환시키는 것입니다.
이 「자연어 → 실행 가능한 커맨드」의 번역 정밀도가 자연 대화 브라우저의 똑똑함을 결정짓습니다. 우리는 최신 GPT-4o 모델을 채택하고, 프롬프트 엔지니어링 (Prompt Engineering)을 구사하여 사용자의 의도를 정확하게 파악하는 「뇌」를 구축해 나갔습니다.
구현 구성: 이렇게 하여 “자연 대화 브라우저”는 탄생했다
전체 아키텍처는 다음과 같습니다.
[아키텍처 도식: 사용자 음성 → Chrome 확장 기능 → AmiVoice API → GPT-4o API → Chrome 확장 기능 → 브라우저 조작]
마이크 입력 (Chrome 확장 기능): 브라우저 상에서 마이크를 통해 음성을 취득합니다. -
실시간 음성 인식 (AmiVoice API): 취득한 음성을 WebSocket을 통해 AmiVoice API로 전송하고, 실시간으로 텍스트 데이터를 받습니다. -
의도 해석 및 명령 생성 (GPT-4o API): 받은 텍스트를 GPT-4o API로 전송합니다. "이 발언은 어떤 브라우저 조작을 의도하고 있는가?"를 판단하게 하여, 실행 가능한 JavaScript 코드나 JSON을 생성하게 합니다. -
브라우저 조작 실행 (Chrome 확장 기능): GPT가 생성한 명령을 받아, Chrome Extension API를 사용하여 실제로 탭을 이동하거나 페이지를 스크롤하는 등의 조작을 실행합니다.
주로 프론트엔드는 React, API 연동은 Node.js, 그리고 전체적인 토대로 Chrome 확장 기능 기술 스택을 사용하여 개발을 진행했습니다.
개발 분투기: 가로막힌 3가지 벽 (실패담)
최고의 "귀"와 "뇌"를 얻어 순풍에 돛 단 듯 보였던 개발이었지만, 실제로 구동해 보니 많은 문제에 직면했습니다. 이것이야말로 개발의 묘미, 실패담의 공유입니다.
고전 포인트 1: 견디기 힘든 "지연 (Latency)" 문제
첫 번째 프로토타입은 말을 걸고 나서 브라우저가 움직이기까지 3~4초나 걸렸습니다. 이래서는 "자연스러운 대화"라고 도저히 말할 수 없습니다.
원인 분석:
AmiVoice의 사양: 말이 끝나기 전까지 텍스트가 확정되지 않아 API 호출이 시작되지 않음. -
GPT의 사고 시간: 매번 처음부터 의도를 해석하기 때문에 GPT의 응답(Response)에 시간이 걸림. -
API 왕복 시간: Client → AmiVoice → GPT → Client로 이어지는 통신의 오버헤드 (Overhead).
해결책:
AmiVoice의 발화 구분 튜닝: AmiVoice API 설정에서 짧은 포즈 (Pause)에도 발화를 구분하여 텍스트를 전송하도록 조정. 이를 통해 말이 끝나기 전부터 GPT 처리를 선행하는 것이 가능해졌습니다. -
GPT 프롬프트 개선: Few-shot 프롬프팅 (몇 가지 대화 예시를 프롬프트에 포함하는 방식)을 도입하여 GPT의 사고를 가속화했습니다. 또한, 출력 형식을 엄격하게 지정함으로써 불필요한 사고를 하지 않도록 고안했습니다. -
Streaming API 활용: GPT-4o의 Streaming API를 이용하여 생성된 명령부터 순차적으로 실행. 체감 속도를 극적으로 향상시켰습니다.
고전 포인트 2: 생활 "노이즈"와의 싸움
다음으로 문제가 된 것이 환경음에 의한 오인식입니다. 에어컨 작동음이나 조금 떨어진 곳에서의 가족 대화 등을 포착하여, 의도하지 않은 조작이 폭주하는 일이 빈번하게 발생했습니다.
해결책:
웨이크 워드 (Wake Word) 도입: "OK, 브라우저"와 같은 특정 웨이크 워드가 감지되었을 때만 AmiVoice API로의 음성 전송을 시작하도록 구현. 이를 통해 상시 마이크를 ON으로 유지할 필요가 없어져, 프라이버시 보호와 오작동 방지를 양립할 수 있었습니다. -
클라이언트 사이드 노이즈 제거: WebAudio API를 활용하여 음성 데이터를 AmiVoice로 보내기 전에 간단한 노이즈 억제 (Noise Suppression) 처리를 거치게 함으로써 인식 정밀도를 더욱 안정화했습니다.
고전 포인트 3: UX의 "한 끗 차이" 채우기
기본적인 동작은 가능해졌지만, "정말로 사용하기 편한가?"라고 자문했을 때 아직 개선의 여지가 있었습니다.
과제: 실행 중인 조작을 알기 어려움. 정말로 잘 듣고 있는지 불안함. -
해결책:
시각적 피드백 강화: 인식 중인 텍스트를 화면에 실시간으로 표시. 나아가 GPT가 해석한 조작 내용을 "'〇〇'을(를) 검색합니다"와 같이 한 번 되풀이하여 표시한 후 실행하도록 변경. -
조작 취소 기능: 만에 하나 의도하지 않은 조작이 실행되려 할 때, "스톱", "취소"라는 말로 중단할 수 있는 기능을 구현.
이러한 꾸준한 개선을 반복한 결과, 마침내 이상으로 하는 경험을 실현했습니다.
【After】 현재의 "자연 대화 브라우저"의 동작
지연 시간(Latency)은 1초 미만으로 단축되었고, 노이즈에도 강해졌습니다. 무엇보다 시스템이 나의 말을 어떻게 해석하고 무엇을 하려고 하는지가 명확하게 파악되기 때문에, 안심하고 조작을 맡길 수 있습니다.
향후 하고 싶은 일: 확장되는 가능성
이 “자연 대화 브라우저”는 아직 발전 단계에 있습니다. 앞으로는 더욱 많은 꿈을 구현해 나가고 싶습니다.
여러 탭을 가로지르는 고도화된 조작: “A 탭에 있는 그래프를 B 스프레드시트에 붙여넣어 줘”와 같은 더욱 복잡한 태스크(Task)의 자동화.
시선 추적(Eye Tracking)과의 연동: 눈으로 보고 있는 위치를 특정하여 “이 버튼을 눌러줘”, “이 텍스트를 번역해 줘”와 같은 지시를 가능하게 함.
개인화(Personalization) 기능: 사용자가 자주 사용하는 사이트나 조작 습관을 학습하여 더욱 센스 있는 제안을 수행.
오픈 소스화: 이 메커니즘을 라이브러리(Library)로 정리하여, 많은 개발자가 “음성 UI (Voice UI)”를 쉽게 구현할 수 있도록 OSS(Open Source Software)로 공개.
요약
AmiVoice API라는 최고의 “귀”와 GPT라는 똑똑한 “뇌”를 결합함으로써, SF 영화에서 보았던 “컴퓨터와의 자연스러운 대화”가 결코 먼 미래의 이야기가 아님을 실감할 수 있었습니다.
개발 과정은 지연 시간이나 노이즈와 같은 꾸준한 과제와의 싸움이었지만, 하나씩 극복할 때마다 UX(User Experience)가 극적으로 향상되는 과정은 매우 흥미진진했습니다.
이 기사가 음성 인식 기술이나 AI를 이용한 새로운 인터페이스 개발에 도전하는 분들에게 어떤 힌트나 동기부여가 된다면 좋겠습니다. 자, 여러분도 함께 미래의 경험을 창조해 보지 않겠습니까?
AI 자동 생성 콘텐츠
본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기