"AI에게 말만 하면 홈페이지가 만들어진다"는 문구, 요즘 어디서나 보입니다. 그런데 막상 만들고 나면 그다음이 궁금해집니다. 버튼 색을 조금 바꾸고 싶은데, 이 문구 하나만 고치고 싶은데, 예약 폼처럼 손이 많이 가는 화면은 또 어떻게 넣어야 할까요. AI가 초안을 만드는 것과, 그 초안을 실제로 다듬어 쓰는 것은 전혀 다른 이야기입니다.

아이비전트 AI 호스팅의 편집 화면에는 이 다듬는 과정을 위한 세 가지 방식이 함께 들어 있습니다. 대화로 뼈대를 만드는 IBIGENT AI, 화면을 클릭해 그 자리에서 바로 고치는 선택영역 편집, 그리고 Claude Code 같은 외부 AI 도구가 짠 코드를 그대로 받아 넣는 MCP 연동입니다. 말로 설명하면 셋 다 비슷해 보이지만 실제로 카페 홈페이지 하나를 처음부터 끝까지 만들어 보니, 쓰는 순간이 확실히 다르더군요. 그 과정을 그대로 정리해 봤습니다.

IBIGENT AI, 프롬프트 한 줄로 뼈대부터 만든다

IBIGENT AI(아이비전트 AI)란 API 연동이나 코드 작성 없이, 편집 화면 안의 채팅창에 원하는 내용을 말하면 그 자리에서 홈페이지 초안을 만들어 주는 아이비전트의 대화형 제작 도구입니다. 채팅창에 "카페 홈페이지 만들어줘. 따뜻한 분위기로"라고 입력해 봤습니다.

실제로 넣어보니 진행 순서가 눈에 보입니다. 요청을 인식하고, 화면을 만드는 동안 진행 상황이 표시되고, 완성된 결과를 전체 교체·상단·하단·선택영역 중 어디에 넣을지 고르면, 그대로 편집 화면에 반영됩니다. 업종과 분위기를 함께 말하면(카페·식당·병원·학원·펜션·미용실 등) 그에 맞춰 화면 구성이 달라지고, 참고하고 싶은 이미지가 있으면 채팅창에 붙여넣기(Ctrl+V)만 해도 그 구조와 분위기를 참고해 새로 만들어 줍니다. 단, 화면을 그대로 복제하는 것은 아니고 문구·색·사진은 매번 새로 생성된다는 점은 참고하셔야 합니다.

클릭 한 번으로 색과 문구만 바꾸는 선택영역 편집

프롬프트로 뼈대를 만들었다고 전체가 완성되는 것은 아닙니다. 실제로 손이 가는 건 대개 세부적인 부분입니다. 이름을 조금 다르게 부르고 싶다거나, 버튼 색이 브랜드 컬러와 안 맞는다거나 하는 식입니다. 이럴 때 다시 "전부 새로 만들어줘"라고 할 필요는 없었습니다.

고칠 요소를 화면에서 클릭해 선택한 뒤 "이 문구를 ○○로 바꿔줘"라고 말하면 그 요소만 바뀌고 나머지 화면은 그대로 유지됩니다. 사진도 마찬가지로, 이미지를 클릭하고 "카페 내부 사진으로 바꿔줘"라고 하면 어울리는 사진으로 자동 교체됩니다. 직접 사진을 찾아 올릴 필요가 없다는 점이 은근히 시간을 아껴 줬습니다. 정리하면 이렇습니다.

여기서 한 가지는 분명히 해 둘 필요가 있습니다. 마우스로 요소를 끌어 옮기는 전통적인 의미의 드래그 앤 드롭 배치는 아닙니다. 대신 원하는 위치를 클릭으로 정확히 짚고 말로 지시하는 방식이라, 결과적으로 마우스를 손에서 놓지 않고 위치와 내용을 동시에 다듬는다는 감각은 비슷했습니다.

복잡한 화면은 MCP로 통째로 받는다

카페 홈페이지에 예약 폼을 넣어보고 싶었습니다. 이런 화면은 채팅 몇 마디로 만들기엔 조건이 많고, 클릭 편집으로 세부 조정하기에도 손이 많이 갑니다. 이럴 때 쓴 것이 IBIGENT Studio(아이비전트 스튜디오)의 MCP 연동입니다.

MCP(Model Context Protocol)는 Claude Code·Cursor·Codex 같은 외부 AI 코딩 도구가 만든 HTML을 편집 화면으로 그대로 전달하는 연결 방식입니다. 즉 예약 폼처럼 복잡한 화면은 평소 쓰던 AI 코딩 도구에서 먼저 만들고, 완성된 코드만 아이비전트 편집 화면으로 옮겨 붙이는 식입니다.

키 발급과 MCP 연결은 최초 한 번만 하면 되고, 계정별로 발급된 키로 연동되며 코드는 10분마다 갱신됩니다. 연결만 해두면 이후로는 "코드로 보내줘" 한마디로 끝나서 매번 새로 설정할 필요는 없었습니다. AI가 보낸 코드가 아니어도, 이미 가지고 있는 HTML 파일을 불러오거나 복사·붙여넣기로 넣는 것도 가능합니다.

세 가지를 이어서 써본 실제 순서

신축 아파트로 비유하면 이해가 빠릅니다. 골조와 기본 구조는 시공사가 빠르게 세우고, 벽지 색이나 조명 위치처럼 손이 자주 가는 부분은 입주자가 직접 고르고, 붙박이장이나 시스템 에어컨처럼 전문 기술이 필요한 공사는 별도 업체를 불러 맡깁니다. 이번에 카페 홈페이지를 만들면서 거친 순서도 딱 그랬습니다.

세 방식을 나눠서 쓰는 기준을 굳이 정하자면 이렇습니다. 전체 구조를 처음 세울 때는 프롬프트, 문구나 색처럼 자주 바뀌는 부분은 클릭 편집, 로직이나 조건이 들어가는 특수 화면은 MCP. "AI가 다 알아서 해준다"는 말만 믿고 하나의 방식으로 끝까지 밀어붙이기보다, 화면 성격에 맞춰 도구를 바꿔 쓰는 편이 실제로는 시간이 덜 들었습니다.

시작하는 방법과 비용

이 세 가지 방식은 전부 같은 편집 화면 안에서 이어집니다. 별도로 결제하거나 추가 프로그램을 설치할 필요는 없습니다. AI 호스팅을 시작하면 편집 화면이 열리고, 그 안에서 IBIGENT AI 채팅과 선택영역 편집을 바로 쓸 수 있습니다. MCP 연동만 마이페이지에서 키를 한 번 발급받으면 됩니다.

AI 호스팅은 7일 무료체험으로 시작하며, 무료 SSL과 전용 주소가 자동으로 붙고 트래픽 제한도 없습니다. 체험 기간이 끝난 뒤에는 요금제에 따라 이용하고, 유료 전환 시 기존에 보유한 도메인을 연결하는 것도 가능합니다. "일단 만들어보고 나서 결정한다"는 방식이라, 결제부터 먼저 하고 후회하는 일은 없었습니다.

더 자세한 기능은 IBIGENT AI와 IBIGENT Studio 소개 페이지에서 직접 확인하실 수 있습니다.