소개
많은 분이 사용하는 Claude Code는 GUI가 없어 아쉬움이 큽니다. 저 역시 그중 한 사람인데, 최근 Claudia라는 GUI 툴이 나왔다는 소식을 듣고 직접 써 보았습니다. 마침 미뤄 두었던 ‘웹 영상을 실시간 번역하는 브라우저 확장’도 Claudia로 만들어 보기로 했습니다.
진행 과정
Claudia 설치
GitHub 저장소: 〈클로디아 깃 주소〉
설치 전 준비물: Rust, Bun, Node.js, 그리고 운영체제별 추가 패키지. 저장소 README에 상세 안내가 있습니다.
macOS 기준으로 Rust·Bun·Node.js는
curl로,pkg-config는 Homebrew로 설치했습니다.
첫인상
기대했던 Cursor‧VS Code‧Roo 같은 IDE가 아니라 에이전트 설정 툴에 가까워 처음엔 조금 당황했습니다. 그래도 새 확장 폴더를 만들고 개발을 이어 갔습니다.
하루 사용 후기
장점: Agent 설정, MCP 설정 등을 GUI로 손쉽게 클릭해 마무리할 수 있어 편리합니다.
단점: 아직 초기 버전이라 잦은 오류와 직관적이지 않은 UI 동작이 눈에 띕니다. 예를 들어, 입력 창을 크게 열 수는 있지만 입력 후 자동으로 닫히지 않습니다.
앞으로도 계속 쓸지 묻는다면, 개인적으로는 CLI + Cursor 환경이 익숙하고 편해 그쪽을 계속 사용할 것 같습니다.
개발 과정
1. 자료 조사
과거 유사 프로젝트 실패 경험을 교훈 삼아, 이번에는 심층 리서치부터 진행했습니다. [대화 링크]
두 차례에 걸쳐 기술 스택과 주의 사항을 정리했습니다.
계층
사용 기술
선택 이유
브라우저 확장 구조
Manifest V3 서비스 워커 + chrome.offscreen 문서
MV3 필수 구조. 오디오·DOM 작업을 오프스크린 문서로 분리해 서비스 워커 언로드 문제 해소 Chrome Docs
오디오 캡처
chrome.tabCapture → MediaStream → Web Audio API / MediaRecorder
탭 오디오를 실시간 스트림으로 확보해 녹음·재생·분석 가능. 호출은 사용자 제스처 후에만 허용 Chrome Docs
실시간 STT
OpenAI Realtime API(WebRTC) + GPT-4o Transcribe
300 ms 저지연 스트리밍 전사, VAD 내장. 클라이언트에 일회성 키 사용 OpenAI Guide4
번역
Google Cloud Translation API / DeepL API
UI·자막
바닐라 JS + CSS(position: fixed) + Interact.js
페이지 상단에 반투명 자막 박스, 위치·크기 드래그 조정 Interact.js
설정 저장
chrome.storage.local
API 키·언어·UI 옵션을 로컬에 암호화 저장
백엔드(경량)
Node.js + Express
Realtime API 일회성 키를 발급해 클라이언트로 전달
2. Claudia 작업 흐름
CLAUD.md 생성 요청
Claude Opus로 TODO 리스트 작성
바이브 코딩 방식으로 구현 진행
예상보다 빠르게 동작했지만, UI 흔들림·번역 품질 저하·지연 등 여러 문제가 드러났습니다.
3. 문제 해결 시도 및 결과
문제
해결 시도
결과
지연
Whisper 대신 Realtime API 사용, 1.5 초 오디오 청크 전사 후 GPT-4o 번역
지연 감소. 그러나 발화 종료 전 번역되어 어색함 발생
조기 번역
발화 내용 누적 후 완결성 확보 시에만 GPT 호출
조기 번역 문제 완화
맥락 부족
최근 10턴 대화를 히스토리로 GPT-4o에 전달
맥락 일부 보강
장기 맥락
비동기 함수로 GPT-4o-mini 호출, 핵심 키워드를 메모리 버퍼에 저장
번역 품질 추가 향상
결과와 배운 점
이번 기회로 Openai의 realtime api가 비영어권 언어 -> 영어 만 번역기능을 제공하는 사실을 알게 되었습니다.
클로디아도 생각보다는 별로 였지만 향후 더 발전하면 다시 써볼만한 좋은 툴인 것은 인상 깊었습니다.