AI 코딩 도구가 만들어 준 홈페이지 HTML을 편집 화면으로 옮길 때, 파일을 열어 복사하고 붙여넣는 과정을 거치지 않아도 됩니다. MCP로 도구와 편집기를 한 번 연결해 두면 대화창에서 보내달라고 말하는 것만으로 화면에 들어옵니다. 여기서 말하는 MCP는 AI 도구와 외부 서비스를 잇는 공개 표준이고, 최신 사양은 2026-07-28 판입니다(Model Context Protocol 공식 사양 문서 기준).
핵심 요약
- MCP는 JSON-RPC 2.0 위에서 도는 공개 표준이라, 도구가 달라도 서버 주소 하나로 같이 씁니다.
- Claude Code와 Codex는 터미널 명령 한 줄, Cursor와 Antigravity는 설정 파일, ChatGPT는 개발자 모드를 먼저 켜야 연결됩니다.
- 원격 연결 방식은 API 키를 따로 만들 필요 없이 브라우저 로그인 승인 한 번으로 끝납니다.
- 연결해도 결과물은 여전히 HTML 한 덩어리이므로, 게시판이나 회원 기능이 필요하면 다른 방식을 함께 봐야 합니다.
도구별 MCP 연결 방법 한눈에 보기
같은 표준이지만 등록하는 자리가 도구마다 다릅니다. 아래 값은 각 도구의 공식 문서에 적힌 그대로입니다.
| 도구 | 등록 방법 | 실제 값 |
|---|---|---|
| Claude Code | 터미널 명령 1줄 | claude mcp add --transport http 이름 주소 / 저장 범위 3가지(local·project·user, 기본 local) |
| Codex | 터미널 명령 1줄 | codex mcp add 이름 --url 주소 / 전송 방식 streamable http |
| Cursor | 설정 파일 1개 | .cursor/mcp.json 또는 ~/.cursor/mcp.json, 원격 서버는 url 항목 |
| ChatGPT | 설정에서 개발자 모드 켜기 | 설정 → 보안 및 로그인 → 개발자 모드 후 서버 주소 입력, OAuth 인증 필요 |
| Antigravity | 설정 파일 1개 | serverUrl 항목 사용(url 이 아님) |
확인 기준 : 2026년 8월
연결하기 전에 확인할 것 4가지
- 보낼 곳이 정해져 있는지. 편집기 쪽에 사이트가 하나 만들어져 있어야 받을 자리가 생깁니다.
- 주소가 원격인지 로컬인지. https 로 시작하는 주소면 원격이고, 이때는 설치할 것이 없습니다.
- 전송 방식이 http 인지 sse 인지. 안내에 적힌 쪽을 그대로 따라야 하며, 잘못 고르면 연결 실패로 표시됩니다.
- 저장 범위를 어디로 할지. 이 폴더에서만 쓸지, 계정 전체에서 쓸지, 팀과 공유할지에 따라 등록 위치가 달라집니다.
1. Claude Code
터미널에서 명령 한 줄로 등록하는 방식입니다. 등록이 끝나면 목록 명령으로 연결됨, 인증 필요, 연결 실패 같은 상태를 바로 확인할 수 있습니다. 이미 터미널에서 작업하는 흐름이라면 가장 손이 적게 갑니다. 다만 명령을 어느 범위로 저장했는지 기억해 두지 않으면, 다른 폴더에서 열었을 때 서버가 안 보여 당황하게 됩니다.
2. Codex
역시 명령 한 줄로 원격 주소를 등록합니다. 등록 뒤 조회 명령으로 전송 방식과 주소가 제대로 들어갔는지 확인할 수 있어, 값이 틀렸을 때 원인을 찾기 쉽습니다. 명령줄 도구에 익숙하고 여러 서버를 붙였다 뗐다 해야 하는 경우에 맞습니다.
3. Cursor
명령 대신 설정 파일에 적는 방식입니다. 프로젝트 폴더 안에 두면 그 프로젝트에서만, 사용자 폴더에 두면 어느 프로젝트에서나 쓰입니다. 팀원과 같은 설정을 공유해야 하는 경우에 특히 편합니다. 주의할 점은 활성 상태인 도구가 많아질수록 한 번에 다루는 정보가 늘어난다는 것입니다. 쓰지 않는 서버는 꺼두는 편이 안전합니다.
4. ChatGPT
다섯 중에서 준비 단계가 가장 많습니다. 설정에서 개발자 모드를 먼저 켜야 커스텀 서버를 붙일 수 있고, 인증도 OAuth 로 진행됩니다. 공식 안내에서도 신뢰할 수 있는 서버가 아니면 연결하지 말라고 못 박고 있습니다. 터미널을 쓰지 않고 브라우저 안에서만 작업하는 경우에 맞는 방식입니다.
5. Antigravity
설정 파일에 적는 방식인데, 항목 이름이 다른 도구와 다릅니다. url 이 아니라 serverUrl 로 적어야 인식합니다. 다른 도구의 설정을 그대로 복사해 붙이면 연결이 안 되는 이유가 대개 여기에 있습니다.
HTML을 편집 화면으로 보내는 순서 4단계
연결이 끝난 뒤의 실제 흐름입니다. 아이비전트 편집기를 예로 들면 이렇게 진행됩니다.
- 편집기의 연동 패널에서 6자리 코드를 확인합니다. 이 코드는 10분마다 새로 바뀝니다.
- AI 도구 대화창에 이 HTML을 해당 코드로 보내달라고 말합니다.
- 2~3초 안에 편집 화면에 내용이 들어옵니다.
- 화면에서 확인한 뒤 적용 버튼을 눌러 저장합니다.
넣는 위치는 세 가지 중에서 고릅니다. 그냥 보내면 기존 내용 뒤에 붙고, 맨 앞에 넣어달라고 하면 위쪽에, 전체 교체를 지정하면 통째로 바뀝니다. 보내는 과정에서 script 태그와 iframe 은 서버에서 자동으로 걸러집니다.
MCP를 연결하면 무엇이 달라지나요?
붙여넣기 실수가 사라지고, 만든 결과를 눈으로 확인하는 시점이 앞당겨집니다. 파일을 내려받아 압축을 풀고 올리는 과정을 거치면 화면을 보기까지 여러 단계를 지나야 하지만, MCP 로 보내면 편집 화면에서 바로 보고 그 자리에서 고칩니다. 반대로 말하면, 결과를 자주 확인하지 않고 한 번에 완성해서 올리는 방식이라면 얻는 것이 크지 않습니다.
MCP 연결에 API 키나 별도 결제가 필요한가요?
원격 방식에서는 API 키를 만들지 않습니다. 서버 주소를 등록하면 브라우저에 로그인 창이 뜨고, 연결을 허용하면 그것으로 끝납니다. 키를 발급받아 설정 파일에 적어두는 과정이 없으니 키가 새어 나갈 걱정도 줄어듭니다. 다만 MCP 사양은 도구를 실행하기 전에 사용자 동의를 받도록 정하고 있으므로, 승인 화면에 뜨는 권한 내용은 한 번 읽어보는 것이 좋습니다.
자주 막히는 지점 3가지
- 코드가 만료된 경우. 6자리 코드는 10분마다 바뀌므로, 한참 뒤에 보내면 받지 못합니다. 패널에서 새 코드를 다시 확인하면 됩니다.
- 항목 이름을 잘못 적은 경우. 설정 파일 방식은 도구마다 항목 이름이 달라서, 다른 도구용 설정을 그대로 옮기면 연결되지 않습니다.
- 승인이 풀린 경우. 목록 명령에서 인증 필요로 표시되면 로그인 승인이 만료된 것이니 다시 허용하면 복구됩니다.
이럴 때는 MCP까지 갈 필요가 없습니다
세 가지 경우에는 연결이 오히려 번거롭습니다. 첫째, 코딩 도구를 쓰지 않고 대화만으로 홈페이지를 만들려는 경우입니다. 이때는 편집기 안의 AI 기능으로 바로 만드는 편이 단계가 적습니다. 둘째, 페이지 한 장짜리를 한 번 만들고 끝낼 경우입니다. 파일을 압축해 올리는 것으로 충분합니다. 셋째, 게시판이나 회원가입 같은 기능이 필요한 경우입니다. MCP 로 넘어오는 것은 HTML 이라 기능은 담기지 않으므로, 처음부터 기능형 빌더 쪽을 보는 것이 맞습니다.
편집기까지 연결해 두고 쓸 생각이라면 아이비전트 MCP 연동 문서에 도구별 등록 방법이 정리돼 있습니다. 무료 요금제에서도 임시 주소가 하나 나오므로, 도메인을 사기 전에 연결부터 시험해 볼 수 있습니다.
확인 기준 : 2026년 8월
