구글 메시지(SMS/RCS)를 Claude Code와 연결하는 MCP 브리지 개발 및 Angular 이슈 해결 요청

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

Claude Code가 구글 메시지를 읽고 쓸 수 있게 하는 Chrome 확장 프로그램 기반 MCP 브리지를 개발했으나, Angular 앱의 입력 감지 문제로 자동 전송 구현에 난항을 겪고 있다.

배경

보험 및 잔디 관리 비즈니스를 운영하는 작성자가 고객 SMS/RCS 메시지에 AI가 답장하도록 만들기 위해 Claude Code와 구글 메시지를 연결하는 MCP 브리지를 직접 구축했다.

의미 / 영향

이 토론은 MCP를 통해 웹 기반 서비스와 AI 에이전트를 로컬에서 안전하게 연결하는 실무적 접근법을 제시한다. 다만 Angular와 같은 현대적 프레임워크의 내부 상태 관리 메커니즘이 브라우저 확장 프로그램을 통한 완전 자동화에 기술적 제약이 됨을 시사한다.

커뮤니티 반응

작성자의 시도에 대해 긍정적인 반응이 있으며, 특히 Angular 앱의 DOM 자동화 문제에 대한 기술적 조언이 논의되고 있다.

주요 논점

01중립다수

확장 프로그램을 통한 로컬 브리지는 보안과 효율성 측면에서 우수하지만, 프레임워크 호환성 문제가 해결되어야 한다.

합의점 vs 논쟁점

합의점

기존 Docker 기반 libgm 프로토콜은 세션 유지력이 낮아 실무 적용이 어렵다.
MCP 도구 정의가 차지하는 토큰 양을 줄이는 것이 비용 및 성능 최적화의 핵심이다.

논쟁점

Angular의 프로덕션 빌드에서 NgZone 인스턴스에 접근하여 변경 감지를 강제로 트리거하는 구체적인 방법론에 대해 의견이 갈린다.

실용적 조언

MCP 도구 설계 시 필수적인 기능만 포함하여 시스템 프롬프트의 토큰 소모를 최소화해야 한다.
Angular 앱 자동화 시 일반적인 DOM 조작이 실패한다면 chrome.debugger API를 통한 신뢰할 수 있는(trusted) 입력 이벤트 주입을 검토해야 한다.

섹션별 상세

기존 솔루션인 OpenMessage와 TextBee의 한계를 극복하고자 했다. Docker 기반의 OpenMessage는 세션 만료가 잦고 도구 정의에 너무 많은 토큰(1,500개)을 소모하며, 클라우드 기반의 TextBee는 개인정보 보안 및 RCS 미지원 문제가 있었다.

Chrome 확장 프로그램이 Google Messages Web 세션에 주입되어 Node.js MCP 서버와 WebSocket으로 통신하는 새로운 아키텍처를 설계했다. 이 방식은 별도의 서버나 클라우드 없이 로컬 브라우저 세션을 활용하며, MCP 도구를 3개로 최적화하여 토큰 오버헤드를 300개 수준으로 줄였다.

Google Messages Web이 Angular 프레임워크로 구축되어 있어 확장 프로그램의 자동화 코드가 정상 작동하지 않는 기술적 병목이 발생했다. 확장 프로그램이 textarea에 텍스트를 입력하고 전송 버튼을 클릭해도 Angular의 zone.js가 값의 변화를 감지하지 못해 폼이 비어있는 것으로 처리된다.

Manifest V3의 world: 'MAIN' 설정을 통해 페이지의 JS 컨텍스트에서 직접 스크립트를 실행하고 dispatchEvent로 입력 이벤트를 발생시켰으나 실패했다. 현재는 메시지 초안만 작성하고 사용자가 수동으로 전송 버튼을 눌러야 하는 'Draft' 도구 단계에 머물러 있으며, Angular 내부의 NgZone에 접근하는 방안을 모색 중이다.

javascript

// Set value
const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value').set;
setter.call(textarea, 'my text');

// Dispatch input event (should trigger DefaultValueAccessor)
textarea.dispatchEvent(new Event('input', { bubbles: true }));

// Wait, then click send button
await sleep(500);
visibleSendButton.click();

Angular 앱의 textarea에 값을 강제로 설정하고 이벤트를 발생시켜 전송 버튼 클릭을 시도하는 코드

실무 Takeaway

Chrome 확장 프로그램을 활용하면 별도 서버 없이 웹 기반 서비스의 데이터를 로컬 환경에서 안전하게 MCP로 연동할 수 있다.
MCP 서버 구축 시 도구 정의를 최소화(7개에서 3개로 압축)하여 대화당 토큰 소모량을 80% 이상 절감할 수 있다.
Angular와 같은 현대적 프레임워크 기반 앱을 자동화할 때 프레임워크 내부의 상태 관리 및 변경 감지 메커니즘이 외부 스크립트의 입력을 차단하는 주요 장애물이 된다.

언급된 도구

Claude Code추천

에이전틱 코딩 및 자동화 수행

MCP추천

모델과 외부 도구 간의 통신 프로토콜

Google Messages Web중립

SMS/RCS 메시지 관리를 위한 웹 인터페이스

언급된 리소스

GitHubgoogle-messages-mcp GitHub Repository