검색
blogia

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

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
Babel Fish AI 출시 : 음성 전사 및 번역용 Chrome 확장

바벨 피쉬 AI(Babel Fish AI)는 개인 프로젝트로, 음성을 매우 정확하게 텍스트로 변환하고 자동 번역 옵션을 제공하는 혁신적인 Chrome 확장입니다. 신뢰할 수 있고 광고 없는 환경을 목표로 설계되었으며, OpenAI의 Whisper API를 통해 고품질 음성 전사를 제공합니다. 이 확장을 만든 이유 중 일부는 개인적인 필요 때문이었습니다. AI에게 요청을 타이핑하는 대신 말로 입력하여 소통을 단순화하고자 했습니다. 전사만을 위해서만 사용하거나, 다국어 소통을 쉽게 하기 위해 번역을 활성화할 수 있습니다. 또한 AI 지원 개발 도구인 Roo 코드를 테스트하기에 이상적인 기회이기도 했습니다.

1. 소개

바벨 피쉬 AI는 개인 프로젝트로, Claude, Gemini, OpenAI 등 여러 AI의 도움을 받아 개발된 Chrome 확장입니다. 직관적인 인터페이스와 사용자 정의 가능한 설정 덕분에 바벨 피쉬 AI는 빠르고 정확한 전사를 제공하며, 언어 장벽을 극복할 수 있도록 즉시 번역 옵션을 제공합니다.

2. 기능 및 옵션

  • 고급 음성 전사:

    • 마이크를 통한 고품질 오디오 캡처.
    • OpenAI의 Whisper API로 전사 수행, 활성 입력 필드에 자동 삽입하거나 대화창에 표시.

  • 선택 가능한 자동 번역:

    • 전사된 텍스트를 빠르고 정확하게 번역하는 기능을 필요에 따라 활성화 가능.
    • 전사 전용으로 확장만 사용하는 것도 가능.

  • 완전한 다국어 지원: 바벨 피쉬 AI는 음성 입력을 처리하고 다양한 언어로 텍스트를 표시하여 국제적 사용 범위를 넓힙니다.
    지원 언어: 🇸🇦 아랍어, 🇩🇪 독일어, 🇺🇸 영어, 🇪🇸 스페인어, 🇫🇷 프랑스어, 🇮🇳 힌디어, 🇮🇹 이탈리아어, 🇯🇵 일본어, 🇰🇷 한국어, 🇳🇱 네덜란드어, 🇵🇱 폴란드어, 🇵🇹 포르투갈어, 🇷🇴 루마니아어, 🇸🇪 스웨덴어, 🇨🇳 중국어.

  • 직관적이고 사용자화 가능한 인터페이스:

    • 활성 입력 영역에 표시할지 또는 대화창으로 표시할지 선택 가능.
    • 상태 배너의 색상, 불투명도, 지속시간 등을 사용자화하여 즉각적인 시각적 피드백 제공.

  • 고급 옵션:

    • 도메인별 API URL 및 매개변수 등 상세 설정을 제공하는 전문가 모드.
    • 확장 옵션 페이지를 통해 접근 가능한 설정들.

3. 개발 비하인드: AI와 Roo Code와 함께한 여정

바벨 피쉬 AI는 단순한 Chrome 확장 그 이상으로, 인공지능 실험과 혁신적 개발 도구인 Roo Code를 활용한 결과물입니다.

아이디어를 현실로 바꾸는 과정에서 여러 AI와 독특한 개발 환경을 활용한 과정을 공유합니다.

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

Roo 코드는 단순한 VS Code 확장 이상입니다. 파일을 읽고 쓰고, 터미널 명령을 실행하며, 다양한 API(OpenAI, Google Gemini 등)와 통합되는 진정한 ‘자율 코딩 에이전트’입니다. 또한 “커스텀 모드”를 통해 성격을 조정할 수 있습니다.

바벨 피쉬 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 키의 안전한 저장: OpenAI API 키를 Chrome에 안전하게 저장하고 불러오는 방법도 큰 과제였습니다. 공식 문서를 Gemini에 제공해 적절한 저장/호출 코드를 제안받았습니다.

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

다양한 AI를 옵션과 현지화 작업에 활용했고, Roo Code를 시험해 보고 싶었습니다.

그 결과 다음과 같은 성과를 얻었습니다:

  • Roo Code 실전 테스트: 바벨 피쉬 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인가? 필요에서 태어난 확장

기술적 세부사항에 들어가기 전에, 왜 이 확장을 만들었는지 이해하는 것이 중요합니다. 시작은 개인적인 필요였습니다:

  • 긴 프롬프트 입력이 번거로움: AI와 더 자연스럽게 대화하고 싶었고, 말로 소통하고자 했습니다.
  • 형편없는 전사 품질: 이전에 사용해본 전사 확장들은 실망스러웠습니다.
  • 투명성 의지: 광고 없이, 오픈소스이고 코드에 대한 완전한 제어가 가능한 확장을 원했습니다.

바벨 피쉬 AI는 이러한 개인적 필요에서 출발해 커뮤니티에도 유용한 도구가 되고자 탄생했습니다.

5. 코드와 기술적 세부사항

바벨 피쉬 AI는 일반적인 Chrome 확장 구조를 기반으로 하며 OpenAI API 사용과 관련한 몇 가지 특성이 있습니다.

주요 구성 요소 개요는 다음과 같습니다:

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: 배너, 대화창, 복사 버튼 등 UI 처리를 위한 유틸리티 함수들.
  • 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 호출, 그리고 전문가 모드에서 사용자 지정 API URL을 허용하기 위한 https://*/*.

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를 사용합니다.
  • 전사: 오디오를 OpenAI의 Whisper API로 보내 전사를 얻기 위해 transcribeAudio(src/utils/api.js) 함수를 사용합니다.
  • 번역(선택 사항): 번역 옵션이 활성화된 경우, 전사된 텍스트를 OpenAI의 GPT API로 보내 번역을 얻기 위해 translateText(src/utils/translation.js) 함수를 사용합니다.
  • 표시: 전사(및 번역)를 페이지의 활성 요소(텍스트 필드나 편집 가능한 요소) 또는 대화창에 표시합니다.
  • 배너 관리: 녹음 상태나 오류 메시지를 표시하기 위해 페이지 상단에 상태 배너를 표시합니다.
  • background script와의 통신: 녹음 시작, 종료, 오류를 알리기 위해 background script에 메시지를 보냅니다.
  • 옵션 변경 수신: 확장 옵션의 변경을 리스닝하고 표시를 업데이트합니다.

5.5. 통신

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

5.6. API

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

  • Whisper: 음성 전사용. 기본 URL은 https://api.openai.com/v1/audio/transcriptions이고 사용되는 모델은 whisper-1입니다.
  • GPT: 번역용(선택 사항). 기본 URL은 https://api.openai.com/v1/chat/completions이고 사용되는 모델은 gpt-4o-mini입니다.

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

5.7. 저장

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

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

5.8. 사용자 인터페이스

확장의 UI는 src/utils/ui.js 및 content.js의 여러 함수로 관리됩니다:

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

5.9. 오류 처리

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

6. 자료

7. 결론

바벨 피쉬 AI는 정확한 음성 전사와 선택 가능한 번역을 위한 완전한 솔루션을 제공하며, 직관적인 인터페이스와 강화된 보안을 보장합니다. 이 확장을 통해 음성을 텍스트로 변환하는 경험이 최적화되고 언어 장벽이 제거됩니다. Chrome 웹 스토어에서 바벨 피쉬 AI를 사용해 보시고 커뮤니케이션 방식이 어떻게 바뀌는지 확인해 보세요.

읽어주셔서 감사합니다. 바벨 피쉬 AI를 잘 활용해 보시길 바랍니다!

이 문서는 gpt-5-mini 모델을 사용하여 fr 버전에서 ko 언어로 번역되었습니다. 번역 과정에 대한 자세한 정보는 https://gitlab.com/jls42/ai-powered-markdown-translator 를 참조하세요.