Babel Fish AI 출시: 음성 전사 및 번역 Chrome 확장

Jls - 8 February 2025

Babel Fish AI는 개인 프로젝트로, 탁월한 정확도로 음성을 텍스트로 변환하면서 자동 번역 옵션을 제공하는 혁신적인 Chrome 확장 프로그램입니다. 광고 없이 신뢰할 수 있도록 설계되었으며, OpenAI의 Whisper API를 통해 고품질 음성 전사를 제공합니다. 저는 AI와 대화할 때 명령을 받아들이기 위해 음성으로 요청을 간소화하는 개인적인 필요를 충족하기 위해 이 확장을 제작했습니다. 전사 전용으로 사용하거나 다국어 통신을 쉽게 하기 위해 번역을 활성화할 수 있습니다. 또한 Roo Code를 테스트할 수 있는 이상적인 기회이기도 했습니다.

1. 소개

Babel Fish AI는 Claude, Gemini, OpenAI 등과 같은 AI의 지원을 받아 Roo Code를 통해 개발된 개인 프로젝트입니다. 직관적인 인터페이스와 사용자 설정 가능한 구성 덕분에 Babel Fish AI는 빠르고 정확한 음성 전사를 제공하며, 언어 장벽을 극복할 수 있는 즉각적인 번역 옵션을 제공합니다.

2. 기능 및 옵션

고급 음성 전사:
- 마이크를 통해 고품질 오디오를 캡처합니다.
- OpenAI의 Whisper API를 사용해 전사를 수행하며, 활성 입력 필드에 자동으로 삽입되거나 대화 상자에 표시됩니다.
선택적 자동 번역:
- 필요에 따라 활성화할 수 있는, 전사된 텍스트의 빠르고 정확한 번역.
- 확장을 전사 전용으로 사용할 수도 있습니다.
완전한 다국어 지원: Babel Fish AI는 음성 입력을 처리하고 다양한 언어로 텍스트를 표시하여 국제적 사용 범위를 확장합니다.
지원 언어: 🇸🇦 아랍어, 🇩🇪 독일어, 🇺🇸 영어, 🇪🇸 스페인어, 🇫🇷 프랑스어, 🇮🇳 힌디어, 🇮🇹 이탈리아어, 🇯🇵 일본어, 🇰🇷 한국어, 🇳🇱 네덜란드어, 🇵🇱 폴란드어, 🇵🇹 포르투갈어, 🇷🇴 루마니아어, 🇸🇪 스웨덴어, 🇨🇳 중국어.
직관적이고 사용자 정의 가능한 인터페이스:
- 활성 입력란이나 대화 상자 중에서 선택하여 표시할 수 있습니다.
- 즉각적인 시각 피드백을 위한 색상, 불투명도, 지속 시간을 사용자 지정할 수 있는 상태 배너를 제공합니다.
고급 옵션:
- API URL, 도메인별 매개변수 등 세부 설정을 제공하는 전문가 모드.
- 사용하기 쉬운 옵션 페이지를 통해 확장 설정에 접근할 수 있습니다.

3. 개발 비하인드 스토리: AI와 Roo Code와 함께한 나의 여정

Babel Fish AI는 단순한 Chrome 확장이 아니라, 인공지능과 혁신적인 도구 Roo Code를 활용한 흥미로운 실험의 결과물이기도 합니다.

여러 AI와 독특한 개발 환경의 힘을 빌려 아이디어를 현실로 만든 과정을 소개합니다.

3.1. Roo Code: 나의 AI 코딩 동반자

Roo Code는 단순한 VS Code 확장이 아닙니다. 이는 여러분의 작업을 도와주는 진정한 자율 코딩 에이전트입니다. 자연어로 소통하고, 작업 공간 내 파일을 직접 읽고 쓸 수 있으며, 터미널 명령을 실행하고, 다양한 API(OpenAI, Google Gemini 등)와 통합되며, “사용자 정의 모드"를 통해 그 “개성”을 조정할 수 있는 AI 동반자를 상상해 보십시오.

Babel Fish AI 개발을 위해, 저는 Roo Code를 마치 지휘자처럼 활용하여 여러 AI가 협력해 확장을 만드는 데 도움을 받았습니다.

3.2. 독특한 프로젝트를 위한 AI 캐스팅

각기 강점과 약점을 지닌 다양한 AI를 활용했습니다:

o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: 이 모델들은 주요 협력자로, 각각이 기여하며 프로젝트를 완성했습니다.
Gemini (무료 모델들): 무료 제공이 큰 장점이었지만 할당량 문제를 해결해야 했습니다(다행히도 Roo Code는 실패 시 반복 시도를 관리합니다!).

3.3. 장애물 극복: 도전과 해결의 과정!

개발 과정은 순탄치만은 않았습니다. 다음과 같은 여러 도전에 직면했습니다:

마이크 접근 및 권한: 초기에 마이크 접근 권한을 얻는 것이 불가능했습니다! AI들이 Chrome Manifest V3에 존재하지 않는 “microphone” 권한을 추가하려 했기 때문입니다. 공식 문서를 탐독하여 Claude 3.5 Sonnet에 제공, 해결책을 찾았습니다.
API 키의 안전한 저장: 또 하나의 문제는 Chrome에서 OpenAI API 키를 안전하게 저장하고 검색하는 방법이었습니다. 공식 문서를 Gemini에 제공하였고, Chrome 스토리지와 상호 작용할 수 있는 적절한 코드를 제안받았습니다.

3.4. 협업과 실험: 성공의 열쇠

모든 AI를 옵션 및 현지화에 활용하고 Roo Code를 테스트해보고자 했습니다.

이러한 구체적 도전 외에도, 저는 다음을 할 수 있었습니다:

실제 상황에서 Roo Code 테스트: Babel Fish AI 개발은 이 유망한 도구를 실험할 수 있는 기회이기도 했습니다.
아이콘과 배경 이미지 생성: OpenAI에 통합된 DALL-E 3 덕분에, 확장을 위한 독특한 시각적 아이덴티티를 창조할 수 있었습니다.
배너 사용자 지정: GIMP를 사용해 이미지에서 색상을 추출한 후, 배너 옵션 설정 부분을 AI에 코딩하도록 요청했습니다.
다국어 인터페이스 번역: Roo Code의 강력한 기능을 활용해 현지화 파일(_locales)을 생성하고 옵션들을 여러 언어로 번역함으로써 큰 시간 절약 효과를 보았습니다!
드롭다운 메뉴 생성: AI가 모든 메뉴를 생성해 엄청난 시간 절약을 가능하게 했습니다.
옵션의 HTML 렌더링 관리: AI와의 협의로 처리했습니다.

3.5. 겪은 어려움

Google Chat용 iframe 내 텍스트 주입 문제: 예외가 추가되었으며, 기본 팝업을 그대로 두었습니다.
전문가 모드 및 권한: API URL을 변경할 수 있도록 허용하기 위해 매니페스트에서 모든 호스트를 허용해야 했습니다. 이는 Chrome의 강화된 탐색 모드와 충돌하는 문제를 일으키며, 현재로서는 해결책을 찾지 못했습니다 (누군가 아이디어가 있다면 환영합니다!).

4. 왜 Babel Fish AI인가? 개인적 필요에서 탄생한 확장

기술적 세부 사항에 들어가기 전에, 왜 제가 Babel Fish AI를 만들었는지 이해하는 것이 중요합니다. 모든 것은 개인적인 필요에서 시작되었습니다:

긴 프롬프트 타이핑에 지침: AI와 자연스럽게 대화하기 위해 직접 말하고 싶었습니다.
형편없는 전사: 테스트해본 전사 확장들이 실망스러웠습니다.
투명성에 대한 의지: 오픈 소스, 광고 없는, 코드 제어가 가능한 확장을 원했습니다.

따라서 Babel Fish AI는 제 개인적 필요를 충족하면서도 커뮤니티에 유용한 도구를 만들고자 하는 열망에서 탄생했습니다.

5. 코드 및 기술 세부 사항 살펴보기

Babel Fish AI는 OpenAI API 사용과 관련된 몇 가지 특수 사항이 있는 전형적인 Chrome 확장 아키텍처를 기반으로 구축되었습니다.

다음은 주요 구성 요소들의 개요입니다:

5.1. 전체 아키텍처

확장은 서로 상호작용하는 여러 JavaScript 파일로 구성됩니다:

manifest.json: 확장의 주요 설정 파일로, 권한, 스크립트, 접근 가능한 리소스 등을 정의합니다.
background.js: 백그라운드에서 실행되는 서비스 워커로, (아이콘 클릭, 단축키) 이벤트를 관리하며 필요시 content script를 주입하고, content script와 통신합니다.
content.js: 웹 페이지에 주입되어 DOM과 직접 상호작용하며, 마이크 오디오를 캡처하고 전사 및 번역 API를 호출해 결과를 표시합니다.
src/utils/api.js: OpenAI Whisper API(전사)를 호출하는 함수를 포함합니다.
src/utils/translation.js: OpenAI GPT API(번역)를 호출하는 함수를 포함합니다.
src/utils/ui.js: 사용자 인터페이스(배너, 대화 상자, 복사 버튼)를 관리하기 위한 유틸리티 함수를 포함합니다.
src/constants.js: 설정, 상태, 액션 등에 대한 상수를 정의합니다.
src/pages/options/: 확장의 옵션 페이지(HTML, CSS, JavaScript) 파일들을 포함합니다.

5.2. `manifest.json`

manifest.json 파일은 매니페스트 버전 3을 사용합니다. 다음의 권한들을 선언합니다:

activeTab: 활성 탭에 접근하기 위해.
storage: API 키와 확장 옵션을 저장하기 위해.
commands: 단축키를 정의하기 위해.
scripting: content script를 주입하기 위해.
host_permissions: https://api.openai.com/* 은 API 호출을 위해, 그리고 https://*/* 는 전문가 모드에서 사용자가 사용자 정의 API URL을 지정할 수 있도록 필요합니다.

content_scripts는 모든 URL(<all_urls>)에 주입되며, 문서 로드가 끝난 후("run_at": "document_end") 실행됩니다. background script는 모듈 형식의 서비스 워커로 선언됩니다("type": "module").

5.3. `background.js`

background script는 여러 역할을 수행합니다:

content script 주입: content script가 아직 주입되지 않은 경우, 상호작용(아이콘 클릭 또는 단축키)을 통해 background.js가 주입합니다.
이벤트 관리: chrome.runtime.onMessage(content script로부터의 메시지), chrome.action.onClicked(아이콘 클릭), chrome.commands.onCommand(단축키)를 청취합니다.
content script와의 통신: 전사 시작 또는 중지를 위해 content script에 메시지({ action: ACTIONS.TOGGLE })를 보냅니다.
아이콘 업데이트: 전사의 상태(진행 중, 중지됨, 오류)를 나타내기 위해 확장 아이콘의 뱃지를 업데이트합니다.

5.4. `content.js`

content script는 확장의 핵심으로, 다음 작업들을 수행합니다:

초기화: Chrome 스토리지에서 API 키와 배너 색상 옵션을 초기화합니다.
오디오 캡처: navigator.mediaDevices.getUserMedia API를 사용하여 마이크 접근 및 오디오 녹음을 수행합니다.
전사: src/utils/api.js의 transcribeAudio 함수를 사용하여 오디오를 OpenAI Whisper API로 전송하고 전사 결과를 받아옵니다.
번역 (선택적): 번역 옵션이 활성화된 경우, src/utils/translation.js의 translateText 함수를 사용하여 전사된 텍스트를 OpenAI GPT API로 전송하고 번역 결과를 받아옵니다.
표시: 전사(및 번역, 해당하는 경우)를 현재 페이지의 활성 요소(텍스트 필드 또는 편집 가능한 요소)에 삽입하거나 대화 상자에 표시합니다.
배너 관리: 전사 상태나 오류 메시지를 표시하기 위해 페이지 상단에 상태 배너를 표시합니다.
background script와의 통신: 전사의 시작, 종료 또는 오류를 알리기 위해 background script로 메시지를 보냅니다.
옵션 변경 감지: 확장 옵션 변경을 감지하고 이에 따라 표시를 업데이트합니다.

5.5. 통신

background script와 content script 간의 통신은 Chrome의 메시징 API(chrome.runtime.sendMessage와 chrome.runtime.onMessage)를 통해 이루어집니다.

5.6. API

확장은 OpenAI의 두 가지 API를 사용합니다:

Whisper: 음성 전사를 위한 API. 기본 URL은 https://api.openai.com/v1/audio/transcriptions이며, 사용 모델은 whisper-1입니다.
GPT: (선택적) 번역을 위한 API. 기본 URL은 https://api.openai.com/v1/chat/completions이며, 사용 모델은 gpt-4o-mini입니다.

API URL은 확장 옵션(전문가 모드)에서 변경할 수 있습니다.

5.7. 스토리지

확장은 chrome.storage.sync를 사용하여 다음 항목을 저장합니다:

OpenAI API 키(apiKey).
확장 옵션(표시, 번역, 배너 색상 등).

5.8. 사용자 인터페이스

확장의 사용자 인터페이스는 src/utils/ui.js와 content.js에 정의된 여러 함수를 통해 관리됩니다:

배너: 전사 상태나 오류 메시지를 표시하기 위해 페이지 상단에 상태 배너를 표시합니다. 배너의 색상과 불투명도는 사용자 지정이 가능합니다.
대화 상자: 전사(및 번역)는 대화 상자에 표시될 수 있으며, 표시 지속 시간은 사용자 지정이 가능합니다.
복사 버튼: 대화 상자에 전사된 텍스트를 손쉽게 복사할 수 있도록 복사 버튼이 추가됩니다.

5.9. 오류 관리

오류는 중앙에서 관리됩니다. 오류 메시지는 src/constants.js에 정의된(ERRORS 객체) 대로 관리되며, 배너를 통해 사용자에게 표시됩니다.

6. 자료

GitHub 저장소: Babel Fish AI
Chrome Web Store: Babel Fish AI

7. 결론

Babel Fish AI는 정확한 음성 전사와 선택적 번역 옵션을 제공하며, 직관적인 인터페이스와 강화된 보안을 보장하는 완벽한 솔루션입니다. 이 확장을 통해 음성을 텍스트로 변환하는 경험을 최적화하고, 언어 장벽을 허물 수 있습니다. Chrome Web Store에서 Babel Fish AI를 테스트해 보고, 커뮤니케이션이 어떻게 변화할 수 있는지 확인해 보세요.

읽어 주셔서 감사합니다. Babel Fish AI를 잘 활용하시길 바랍니다!

이 문서는 o3-mini 모델을 사용하여 프랑스어 버전에서 한국어로 번역되었습니다. 번역 과정에 대한 자세한 내용은 https://gitlab.com/jls42/ai-powered-markdown-translator 를 참조하십시오.