요즘은 AI에게 "회사 소개 페이지 하나 만들어줘" 하면 그럴듯한 HTML을 몇 초 만에 만들어 줍니다. 그런데 막상 그 결과를 내 홈페이지에 넣으려고 하면 이야기가 달라집니다. 코드를 복사해서 어딘가에 붙여넣고, 위치가 안 맞으면 다시 옮기고, 화면이 깨지면 또 손보고. 정작 만드는 것보다 "내 사이트에 집어넣는 일"이 더 번거로운 경우가 많습니다.
IBIGENT Studio(아이비전트 스튜디오)는 바로 이 마지막 한 걸음을 없앤 편집기입니다. AI가 만든 HTML을 복사·붙여넣기 없이, 편집 화면의 원하는 위치로 바로 받아서 화면을 보며 완성합니다. 이 글에서는 그 방법을, 실제 편집 화면과 함께 처음부터 끝까지 정리해 드리겠습니다.
먼저 결론부터 말씀드리면, 순서는 ① 키 발급 → ② MCP 연결 → ③ 코드 전송 세 단계이고, ①·②는 처음 한 번만 하면 됩니다. 두 번째부터는 AI에게 "이거 아이비전트로 보내줘" 한마디면 끝입니다.
IBIGENT Studio(아이비전트 스튜디오)란 무엇인가요?
IBIGENT Studio는 화면을 보면서 바로 고치는 실시간 웹페이지 편집기입니다. 코드를 몰라도 글·이미지·배치를 실제 화면에서 클릭해 수정하고, PC·태블릿·모바일 화면을 오가며 결과를 확인할 수 있습니다. 필요할 때는 코드 보기로 직접 HTML을 볼 수도 있습니다.
흔히 말하는 "홈페이지 빌더"와 결이 비슷하지만, 한 가지가 다릅니다. AI 도구와 곧바로 연결된다는 점입니다. Claude Code나 Cursor 같은 AI에게 디자인을 만들라고 시키면, 그 결과가 복사·붙여넣기 없이 이 편집 화면으로 바로 들어옵니다.
AI가 만든 코드, '붙여넣기'가 왜 번거로울까요?
AI가 코드를 잘 만든다는 건 이제 새로운 이야기가 아닙니다. 문제는 그다음입니다. 만들어진 코드를 내 편집기에 옮기는 과정에서 이런 일들이 생깁니다.
- 어디에 붙여야 할지 몰라 페이지 구조가 엉키는 경우
- 붙여넣고 보니 위치가 맞지 않아 다시 잘라 옮기는 경우
- 바깥에서 가져온 코드라 화면이 깨지거나 보안상 위험한 태그가 섞여 있는 경우
택배로 비유하면 이렇습니다. 물건은 도착했는데 우리 집 문 앞이 아니라 아파트 정문에 놓고 간 것과 같습니다. 결국 내가 다시 들고 올라와야 합니다. AI가 코드를 아무리 잘 만들어도, 그 코드를 내 자리에 정확히 놓는 일이 남아 있으면 반쪽짜리입니다.
IBIGENT Studio의 MCP 연동은 이 "다시 들고 올라오는 과정"을 없앤 것입니다.
MCP 연동이란 무엇인가요?
MCP(Model Context Protocol, 모델 연결 표준)는 AI 도구와 외부 프로그램을 안전하게 이어 주는 표준 통로입니다. 쉽게 말해 AI가 "이 결과를 저기로 보내라"라고 할 때, 그 "저기"를 정해 주는 약속입니다.
IBIGENT Studio는 이 통로를 열어 두었습니다. 그래서 AI 도구가 만든 HTML이 이 통로를 타고 내 편집 화면으로 바로 들어옵니다. 중간에 복사창을 열 필요도, 붙여넣기 단축키를 누를 필요도 없습니다.
시작하기 전에 준비할 것
거창한 준비물은 없습니다. 다음 세 가지면 됩니다.
편집할 사이트가 연결된 계정이 있으면 됩니다.
IBIGENT Studio로 열 수 있는 홈페이지 한 개.
Claude Code · Cursor · Codex · Antigravity 중 평소 쓰시는 것 하나면 충분합니다.
따라 하기 — AI 연동 3단계
전체 흐름은 ① 키 발급 → ② MCP 연결 → ③ 코드 전송입니다. ①·②는 처음 한 번만 해 두면, 이후로는 ③만 반복하시면 됩니다.
1단계. 연동 키 발급 (처음 한 번)
ibg_…)가 만들어집니다.2단계. AI 도구에 MCP 연결 (처음 한 번)
쓰시는 AI 도구에 아래 주소를 MCP 서버로 등록합니다. 주소는 https://mcp.ibigent.com/mcp/<내_키> 형태이며, <내_키> 자리에 1단계에서 발급받은 키를 넣습니다. 도구마다 등록 방법이 조금씩 다릅니다.
터미널에 아래 한 줄을 붙여넣고 실행합니다.
claude mcp add --transport http ibigent https://mcp.ibigent.com/mcp/<내_키>설정(⚙) > Tools & Integrations > Add custom MCP 에서 종류를 HTTP(URL)로 고르고 위 주소를 넣습니다. (Cursor는 앱 1-클릭 등록도 지원합니다.)
터미널에
codex mcp add ibigent --url https://mcp.ibigent.com/mcp/<내_키> 를 실행합니다.MCP Servers 설정에서 키 이름을 serverUrl로 하여 위 주소를 넣습니다.
등록이 끝나면 도구 목록에 ibigent이 보입니다. 이 과정은 도구마다 한 번만 하면 됩니다.
3단계. 코드 전송 (사용할 때마다)
"회사 소개 섹션 만들어서 아이비전트 ABC123 으로 보내줘"
가장 중요한 기능 — 원하는 위치에 넣기
여기가 IBIGENT Studio의 핵심입니다. AI가 보낸 코드를 무조건 페이지 끝에 붙이는 것이 아니라, 어디에 넣을지 내가 고를 수 있습니다. 코드가 도착하면 아래와 같은 선택 창이 뜹니다.
지금 페이지 내용을 이 HTML로 완전히 바꿉니다. 페이지를 처음부터 새로 만들 때 씁니다.
기존 내용 위에 붙입니다. 새 배너나 공지를 맨 위에 올릴 때 좋습니다.
기존 내용 아래에 붙입니다. 섹션을 하나씩 이어 붙여 페이지를 키워 갈 때 씁니다.
편집 화면에서 미리 클릭해 둔 블록 안에 넣습니다. "여기, 이 자리"에 정확히 꽂고 싶을 때 씁니다.
네 번째 방식이 특히 편리합니다. 먼저 편집 화면에서 원하는 블록을 클릭해 두고, AI에게 코드를 보내면 바로 그 자리에 들어갑니다.
저장하기 전까지는 안전합니다
"AI가 보낸 코드가 바로 사이트에 반영되면 위험하지 않나요?"라고 걱정하실 수 있습니다. 그렇지 않습니다.
- 코드가 들어와도 [저장]을 누르기 전까지는 실제 사이트에 반영되지 않습니다. 화면에서 충분히 확인한 뒤 저장하시면 됩니다.
- 보안을 위해 <script>·<iframe> 같은 외부 삽입 태그는 서버에서 자동으로 제거됩니다.
- 전송용 6자리 코드는 10분마다 갱신되고, 연동 키가 노출되면 언제든 폐기 후 재발급할 수 있습니다.
즉 "받는 것"과 "반영하는 것"이 분리되어 있습니다. 마음에 들 때만 저장하면 됩니다.
코드가 안 들어올 때 확인할 점
연동을 처음 하다 보면 코드가 편집 화면에 안 들어오는 경우가 있습니다. 대부분 아래 세 가지 중 하나입니다.
참고로 웹 버튼으로 여러분의 컴퓨터 터미널에 명령을 자동 실행할 수는 없습니다(브라우저 보안). 그래서 명령은 복사한 뒤 붙여넣기가 기본이며, Cursor만 앱 1-클릭 등록을 지원합니다.
어떤 분에게 도움이 될까요?
모든 기능이 그렇듯, 이 방식도 목적에 맞아야 빛을 봅니다. 정리하면 이렇습니다.
- AI로 초안을 빠르게 만들고, 결과를 화면 보며 다듬고 싶은 분 — 잘 맞습니다.
- 복사·붙여넣기 과정에서 위치가 어긋나 스트레스받던 분 — 이 부분이 사라집니다.
- 코드를 잘 모르지만 AI에게 시켜서 홈페이지를 만들어 보고 싶은 분 — 편집은 화면에서 클릭으로 하므로 부담이 적습니다.
반대로 이미 개발 환경이 완벽하게 갖춰져 있고 직접 코드를 관리하시는 분이라면, 굳이 필요하지 않을 수도 있습니다. 도구는 좋고 나쁨이 아니라 내 작업 방식에 맞느냐의 문제입니다.
"AI가 코드를 만드는 시대에, 진짜 차이는 그 결과를 얼마나 쉽게 내 화면에 정확히 반영하느냐에서 갈립니다."
홈페이지를 새로 시작하신다면
IBIGENT Studio는 아이비전트의 빌더 호스팅을 이용하시면 홈페이지 제작 도구로 함께 쓰실 수 있습니다. 처음 시작하는 홈페이지라면 큰 비용을 들이기보다, 목적에 맞는 서비스부터 비교해 보시길 권합니다. 자세한 안내와 비용은 아래에서 확인하실 수 있습니다.
- 서비스 소개: IBIGENT Studio 안내
- 홈페이지 제작·이용 안내: 아이비전트 홈
"제작하시려는 목적을 먼저 정하신 뒤, 그에 맞는 서비스를 고르시는 것이 언제나 가장 좋은 선택입니다."
