#1. 개발 배경

#Electron 앱을 AI로 제어한다면?

chrome-remote-devtools(CRD) 프로젝트를 하면서 Chrome DevTools Protocol(CDP)에 꽤 익숙해졌다. CDP로 브라우저를 원격 제어할 수 있다는 걸 체감하고 나니, 자연스럽게 떠오른 생각이 있었다.

Electron도 크로미움 기반인데, CDP로 Electron 앱도 제어할 수 있지 않나?

맞다. Electron 앱을 --remote-debugging-port=9222로 실행하면 CDP 엔드포인트가 열린다. 여기에 접속하면 일반 크롬 탭처럼 DOM을 검사하고, 스크린샷을 찍고, JS를 실행할 수 있다.

근데 이걸 사람이 수동으로 하는 건 DevTools로 하면 되고, AI 코딩 어시스턴트가 이걸 할 수 있으면 어떨까?

#MCP (Model Context Protocol)

MCP는 AI 어시스턴트와 외부 도구를 연결하는 프로토콜이다. Cursor, Claude Desktop, Claude Code 같은 AI 도구들이 MCP 서버를 통해 파일을 읽고, API를 호출하고, 외부 시스템과 상호작용할 수 있다.

CRD에서 이미 CDP 제어를 경험했으니, 이걸 MCP 서버로 감싸면 AI가 Electron 앱을 직접 제어할 수 있게 된다.

"이 버튼 클릭해봐" → AI가 CDP로 클릭 이벤트 발생

"콘솔에 에러 나오는 거 확인해봐" → AI가 CDP로 콘솔 메시지 수집

"메인 프로세스의 IPC 통신 내역 보여줘" → AI가 CDP로 IPC 이벤트 모니터링

이런 게 가능해진다.

#왜 Electron 전용으로?

이미 브라우저용 MCP 서버는 몇 가지 있었다. Playwright MCP가 대표적이다. 근데 Electron은 브라우저와 다른 점이 있다:

1. 메인 프로세스 — Node.js 런타임이 돌아가는 백그라운드 프로세스. 브라우저에는 없는 개념
2. IPC 통신 — 메인 ↔ 렌더러 간 ipcMain/ipcRenderer 통신. Electron 앱 디버깅의 핵심
3. 멀티 프로세스 구조 — 메인 + 여러 렌더러 프로세스

범용 브라우저 MCP로는 이 Electron 고유의 부분을 다룰 수 없다. 메인 프로세스 IPC 모니터링, 리소스 사용량 확인, CPU/힙 프로파일링 같은 건 Electron 전용 도구가 필요했다.

#CRD의 경험이 밑거름

CRD 프로젝트에서 CDP 프로토콜을 직접 다뤄본 경험이 핵심이었다. CDP의 도메인 구조(Page, Runtime, DOM, Network 등)를 이해하고 있었고, WebSocket으로 CDP 명령을 주고받는 패턴도 손에 익었다.

차이점이 있다면 CRD는 브라우저 확장 + 웹소켓 중계 서버 구조였고, 이번에는 MCP 서버(stdio 기반) + CDP 직접 연결 구조라는 것이다. 더 단순해진 셈이다.