Claude Code와 Claude.ai를 연결하는 MCP 기반 공유 클립보드 브리지 구축기

실용적 조언

복잡한 로직 구현 전 Claude.ai UI에서 프롬프트를 먼저 설계할 것
MCP 서버를 활용해 로컬과 클라우드 AI 환경 간의 데이터 공유 자동화

섹션별 상세

Claude Code CLI의 강력한 실행력과 Claude.ai UI의 사고 보조 기능을 결합하기 위해 MCP 기반 브리지를 설계했다. CLI는 코드 수정에 탁월하지만 복잡한 프롬프트를 구상하고 시각적 피드백을 받기에는 UI 환경이 더 효율적이라는 사용자 경험에서 출발했다. 두 환경을 연결함으로써 컨텍스트를 수동으로 복사하여 붙여넣는 번거로움을 제거하고 작업의 연속성을 확보했다.

Railway 플랫폼에 FastMCP 기반의 Python 서버와 Postgres 데이터베이스를 배포하여 공유 저장소를 구축했다. clipboard_send와 clipboard_receive라는 두 가지 핵심 도구를 구현하여 한쪽 환경에서 데이터를 쓰면 다른 쪽에서 즉시 읽을 수 있는 구조를 만들었다. 이 아키텍처는 원격 MCP 커넥터를 통해 Claude.ai와 로컬의 Claude Code를 실시간으로 동기화한다.

Claude Code와 Claude.ai 간의 MCP 브리지 작동 원리를 보여주는 시스템 아키텍처 다이어그램이다. — DiagramClaude.ai에서 작성된 프롬프트가 Railway에 배포된 MCP 서버와 Postgres DB를 거쳐 Claude Code로 전달되는 흐름을 시각화했다. 또한 실행 결과가 다시 요약되어 UI로 돌아오는 피드백 루프를 명확히 보여준다.

UI에서 프롬프트를 정교하게 다듬어 전달하는 방식이 토큰 소모를 줄이고 결과물의 정확도를 높이는 것으로 나타났다. CLI에서 즉흥적으로 프롬프트를 작성할 때 발생하는 모호함과 그로 인한 재질의 루프를 방지하여 API 비용을 최적화했다. 실행 전 Grok과 같은 다른 모델을 통해 프롬프트의 유효성을 검증하는 단계도 추가하여 품질을 관리한다.

작업 완료 후 CLAUDE.md 설정에 따라 구조화된 요약본을 생성하여 다시 UI로 피드백하는 순환 구조를 확립했다. CLI에서의 실행 결과와 변경 사항을 요약된 프롬프트 형태로 저장소에 보내면 UI에서 이를 불러와 다음 단계의 브레인스토밍을 이어갈 수 있다. 이를 통해 긴 프로젝트 수행 과정에서도 전체적인 맥락을 잃지 않고 효율적인 협업이 가능하다.

용어 해설

모델 컨텍스트 프로토콜(MCP): — AI 모델이 외부 도구, 데이터 소스 및 서비스와 표준화된 방식으로 상호작용할 수 있도록 Anthropic에서 공개한 개방형 프로토콜이다. 이를 통해 서로 다른 AI 환경 간의 데이터 연동과 기능 확장이 용이해진다.
패스트 MCP(FastMCP): — Python 언어를 사용하여 MCP 서버를 신속하게 구축하고 배포할 수 있도록 설계된 프레임워크이다. 데코레이터를 활용해 도구와 리소스를 정의하며 복잡한 프로토콜 구현 과정을 단순화한다.
레일웨이(Railway): — 코드와 데이터베이스를 클라우드에 쉽게 배포하고 관리할 수 있게 해주는 인프라 서비스 플랫폼이다. 이 프로젝트에서는 MCP 서버와 Postgres 데이터베이스를 호스팅하는 백엔드 인프라로 활용됐다.
포스트그레스(Postgres): — 확장성과 표준 준수율이 높은 오픈소스 관계형 데이터베이스 관리 시스템이다. 여기서는 Claude Code와 Claude.ai가 공유하는 클립보드 데이터를 저장하는 중앙 저장소 역할을 수행한다.

언급된 도구

Claude Code추천

CLI 기반의 AI 코딩 에이전트 및 실행 도구

Claude.ai추천

브레인스토밍 및 프롬프트 작성을 위한 웹 인터페이스

FastMCP추천

Python 기반 MCP 서버 구축 프레임워크

Railway추천

서버 및 데이터베이스 배포 인프라