형이 요즘 코드 짤 때 거의 Claude Code만 켜놓고 삽니다. 터미널 하나 띄워놓고 파일 고치고, 커밋하고, 그대로 끝. 근데 어느 날 문득 이런 생각이 들더라고요. "이거 홈페이지 편집할 때도 그대로 쓰면 안 되나?" 매번 에디터 화면 새로 켜서 마우스로 클릭클릭 하는 것도 나쁘진 않은데, 손에 익은 도구로 바로 이어서 하면 훨씬 편하지 않을까 싶었거든요. 그래서 진짜 붙여봤습니다. IBIGENT Studio에 MCP로 Claude Code를 연결해서요.
MCP가 뭐길래 이렇게 붙는 걸까요
MCP는 쉽게 말해 AI 도구랑 다른 서비스가 서로 대화할 수 있게 해주는 연결 규격입니다. Claude Code나 Cursor, Codex 같은 도구들이 이 규격을 따르는 서비스라면 바로 붙어서 명령을 주고받을 수 있는 거죠. 아이비전트는 IBIGENT Studio라는 실시간 웹 편집기를 이 MCP로 열어뒀습니다. 그러니까 내가 평소 쓰던 AI 코딩 도구 안에서 "이 페이지 헤더 색 좀 바꿔줘"라고 말하면, 그 결과가 실제 내 사이트 편집 화면에 바로 반영되는 구조입니다.
아이비전트 스튜디오의 MCP 연동 문서 화면입니다.
Claude Code 기준으로 직접 붙여본 순서
연동 자체는 생각보다 간단했습니다. 순서만 정리하면 이렇습니다.
- 아이비전트 마이페이지에서 IBIGENT Studio 사이트를 하나 준비합니다.
- Claude Code 연동 문서에 나온 대로 MCP 서버 주소와 인증 정보를 등록합니다.
- 터미널에서 연결이 잡혔는지 확인하고, 편집하고 싶은 페이지를 말로 지시합니다.
- 결과는 별도 배포 과정 없이 곧바로 화면에 반영됩니다.
문서 자체도 마크다운으로 따로 제공하고 있어서 사람이 보는 화면 말고 AI가 직접 읽고 참고하기에도 편하게 되어 있더라고요. Claude Code용 마크다운 문서를 참고하시면 됩니다.
밤늦게 키보드로 명령어를 입력하며 연동을 테스트하는 모습입니다.
실제로 써보니 어땠나
가장 크게 느낀 건 "화면 전환이 사라졌다"는 점입니다. 원래는 에디터 켜고, 수정하고, 저장하고, 다시 터미널로 돌아가는 흐름이었는데 지금은 터미널 하나로 다 끝나요. 다만 완전히 코드만 보고 짜는 작업이 아니라 디자인 감각이 필요한 수정, 예를 들어 색감이나 배치를 눈으로 보면서 다듬는 작업은 여전히 편집 화면을 같이 켜놓고 보는 게 편했습니다. 두 가지를 병행하는 느낌으로 쓰니까 가장 자연스러웠어요.
Cursor나 Codex, Antigravity도 되나요
됩니다. 아이비전트는 Claude Code뿐 아니라 Cursor, Codex, Antigravity까지 도구별 연동 문서를 따로 마련해뒀습니다. 쓰는 도구가 다르다고 해서 새로 뭘 배울 필요는 없고, 각 문서에 나온 설정값만 그대로 옮기면 되는 구조입니다. MCP 연결 전체 문서에서 한 번에 비교해봐도 됩니다.
듀얼 모니터로 코드를 작성하는 개발 환경입니다.
붙이기 전에 알아두면 좋은 점
MCP 연동 자체는 별도 비용이 붙지 않습니다. 이미 쓰고 있는 Claude Code, Cursor 같은 도구의 구독은 그대로 유지한 채로 아이비전트 쪽 설정만 추가하는 방식이거든요. 다만 IBIGENT Studio 자체를 쓰려면 사이트가 있어야 하니, 아직 시작 전이라면 요금제 페이지에서 무료체험부터 확인해보시는 걸 추천합니다.
자주 묻는 질문
MCP 연동에 별도 비용이 드나요
연동 자체에는 추가 비용이 없습니다. Claude Code나 Cursor 같은 도구의 기존 구독료 외에 아이비전트 쪽에서 별도로 청구하는 항목은 없습니다.
코딩을 잘 몰라도 쓸 수 있나요
말로 지시하는 방식이라 코딩 경험이 많지 않아도 됩니다. 다만 도구 자체(Claude Code, Cursor 등)의 기본 사용법은 알고 있어야 편합니다.
기존 편집 화면은 못 쓰게 되나요
아닙니다. MCP는 추가 경로일 뿐이고, 기존 IBIGENT Studio 편집 화면은 그대로 함께 쓸 수 있습니다.
여러 도구를 동시에 연결해도 되나요
가능합니다. Claude Code, Cursor, Codex, Antigravity 문서가 각각 따로 있어서 필요한 도구를 골라 순서대로 연결하면 됩니다.
