AI로 홈페이지 만드는 방법, 파일 주고받기 없이 14일 무료체험 안에 공개까지

AI로 홈페이지를 만들 때 실제로 막히는 곳은 만드는 단계가 아닙니다. 만든 결과를 진짜 주소에 올리고, 그다음에 한 줄씩 고치는 단계에서 막힙니다. 올리는 길은 크게 세 가지입니다. 편집 화면 안에서 말로 시켜 바로 만드는 길, 쓰고 있는 AI 도구를 편집 화면에 연결해 보내는 길, 이미 만든 파일을 압축해서 올리는 길입니다. 처음 공개까지 걸리는 시간은 세 가지가 비슷합니다. 갈리는 것은 그다음입니다. 문구 한 줄을 고칠 때 손이 몇 번 가는지가 완전히 달라집니다.

핵심 요약

• AI로 만든 홈페이지를 올리는 길은 말로 만들기, AI 도구 연결, 파일 올리기 세 가지입니다.
• 한 번 만들고 거의 안 고칠 사이트면 파일 올리기가 가장 간단합니다.
• 문구·사진을 자주 고칠 사이트면 연결 방식이 손이 덜 갑니다. 고칠 때마다 내려받고 압축하는 일이 없어집니다.
• AI 도구와 편집 화면을 잇는 규격은 MCP 한 가지로 모였습니다. 2024년 11월 25일 공개된 열린 규격입니다(앤트로픽 공식 발표 기준).

AI로 홈페이지 만드는 방법은 무엇을 말하나요?

AI로 홈페이지를 만든다는 말에는 서로 다른 두 가지 일이 섞여 있습니다. 하나는 화면을 「만드는」 일이고, 다른 하나는 만든 화면을 사람들이 볼 수 있는 주소에 「올리는」 일입니다. 만드는 일은 요즘 AI가 꽤 잘합니다. 카페 홈페이지를 따뜻한 분위기로 만들어 달라고 말하면 화면이 나옵니다. 문제는 그 결과물이 보통 HTML 파일 묶음으로 내 컴퓨터에 남는다는 점입니다. 파일은 내 컴퓨터 안에서만 보입니다. 주소를 가진 사이트가 되려면 올리는 일이 한 번 더 필요합니다.

그래서 방법을 고를 때는 「어떤 AI가 더 똑똑한가」보다 「만든 뒤에 올리고 고치는 길이 짧은가」를 봐야 합니다. 마치 가구를 사는 일과 같습니다. 디자인이 마음에 들어도, 문을 통과하지 못하면 집에 들여놓을 수 없습니다.

파일로 주고받는 방식과 편집 화면에 바로 잇는 방식은 무엇이 다른가요?

차이는 「고칠 때 반복되는 일의 개수」입니다. 직접 세어 보면 이렇습니다.

파일로 주고받는 방식에서 문구 한 줄을 고치려면 이렇게 움직입니다.

1. AI에게 고쳐 달라고 말합니다.
2. 새로 나온 파일을 내려받습니다.
3. 압축합니다.
4. 관리 화면에 올립니다.
5. 주소를 열어 제대로 바뀌었는지 봅니다.

다섯 번입니다. 그리고 이 다섯 번은 고칠 때마다 똑같이 반복됩니다.

편집 화면에 AI 도구를 연결해 두는 방식은 이렇습니다.

1. 처음에 한 번 연결 정보를 넣습니다.
2. 그다음부터는 쓰던 도구에서 고쳐 달라고 말합니다.
3. 편집 화면에 바로 들어오니 눌러서 확인합니다.

연결은 한 번뿐이고, 반복되는 것은 두 번째·세 번째입니다. 내려받기와 압축이 사라집니다. “한 번 고칠 거면 파일, 자주 고칠 거면 연결”이 가장 단순한 기준입니다.

MCP는 무엇이고, 왜 요즘 이름이 자주 보이나요?

MCP는 AI 도구가 밖에 있는 서비스와 이야기할 때 쓰는 공통 약속입니다. 앤트로픽이 2024년 11월 25일에 공개했고, 처음부터 사양과 개발 도구를 함께 열어 두었습니다. 구글 드라이브·슬랙·깃허브·깃·포스트그레SQL·퍼피티어처럼 미리 만들어 둔 연결 예시도 같이 나왔습니다(앤트로픽 공식 발표 기준).

이 약속이 중요해진 이유는 따로 있습니다. 위키백과 정리에 따르면 2025년 3월 오픈AI가, 2025년 4월 구글이 같은 약속을 받아들였습니다. 즉 도구마다 다른 방식으로 붙일 필요가 없어졌습니다. 전기 콘센트 모양이 하나로 통일된 것과 비슷합니다. 플러그를 바꿔 끼울 필요가 없어졌습니다.

실제로 어떻게 생겼는지도 공개되어 있습니다. 커서 공식 문서 기준으로 연결 방식은 stdio·SSE·스트리머블 HTTP 세 가지이고, 설정은 컴퓨터 전체에 적용되는 ~/.cursor/mcp.json 또는 작업 폴더 안의 .cursor/mcp.json 에 적습니다(2026년 10월 공식 문서 기준). 길게 설명했지만 실제로 하는 일은 「주소와 열쇠를 적은 줄 몇 개를 파일에 넣는 것」입니다.

1. 편집 화면 안에서 말로 바로 만들기

특징 — 다른 프로그램을 깔지 않습니다. 편집 화면에서 「회사 홈페이지 만들어줘, 믿음 가는 느낌으로」처럼 말하면 화면이 나오고, 어디에 넣을지(전체 교체·상단·하단·선택 영역)를 고르면 그 자리에 들어갑니다. 고칠 곳만 골라 다시 말할 수도 있습니다.

어떤 경우에 맞나 — 코딩을 해 본 적이 없고, 지금 당장 한 장짜리 소개 페이지가 필요한 경우입니다. 명령줄이나 설정 파일을 열 일이 아예 없습니다.

주의점 — 세밀한 구조를 바꾸는 일은 말로만 하면 여러 번 왔다 갔다 하게 됩니다. 처음 틀을 잡을 때 쓰고, 구조를 크게 손볼 때는 아래 도구 쪽이 편합니다.

2. Claude Code 로 연결하기

특징 — 터미널에서 쓰는 AI 코딩 도구입니다. 파일 여러 개를 한꺼번에 고치는 일에 강합니다. 연결해 두면 고친 결과를 편집 화면으로 바로 보냅니다.

어떤 경우에 맞나 — 페이지가 여러 장이고, 모든 페이지의 머리말·꼬리말을 한 번에 똑같이 바꾸고 싶은 경우입니다.

주의점 — 검은 화면에 명령을 쓰는 방식이라 처음에는 낯섭니다. 연결 정보를 넣는 자리까지는 안내 문서를 보면서 따라가야 합니다.

3. Cursor 로 연결하기

특징 — 코드 편집기 모양이라 화면이 익숙합니다. 왼쪽에 파일 목록, 오른쪽에 AI 대화창이 있습니다.

어떤 경우에 맞나 — 전에 코드 편집기를 써 본 적이 있는 경우입니다. 파일 하나를 열어 눈으로 확인하면서 고치기 좋습니다.

주의점 — 설정 파일을 컴퓨터 전체용과 작업 폴더용 두 곳에 쓸 수 있어서, 연결이 안 될 때는 어느 쪽에 적었는지부터 봐야 합니다.

4. Codex 로 연결하기

특징 — 지시를 주면 스스로 여러 단계를 밟아 가며 고치는 쪽에 가깝습니다. 같은 연결 약속을 쓰므로 편집 화면에 붙이는 방법은 다른 도구와 거의 같습니다.

어떤 경우에 맞나 — 이미 이 도구로 다른 일을 하고 있어서, 홈페이지도 같은 자리에서 끝내고 싶은 경우입니다.

주의점 — 알아서 많이 고치는 성격이라, 바꾸지 말아야 할 영역을 미리 말해 두는 편이 좋습니다.

5. Antigravity 로 연결하기

특징 — 역시 같은 연결 약속을 지원합니다. 도구를 새로 익히지 않고도 편집 화면과 이을 수 있다는 점이 핵심입니다.

어떤 경우에 맞나 — 쓰던 도구를 바꾸고 싶지 않은 경우입니다. 도구를 옮겨도 사이트 쪽은 그대로 남습니다.

주의점 — 도구마다 설정 파일 이름과 자리가 조금씩 다릅니다. 각 도구별 안내를 보고 그대로 베끼는 편이 빠릅니다.

6. 이미 만든 파일을 압축해서 올리기

특징 — 연결이 전혀 필요 없습니다. HTML·CSS·JS 파일을 한 폴더에 모아 ZIP 하나로 만들어 올리면 자동으로 공개됩니다. 서버 설정이나 명령어가 없습니다.

어떤 경우에 맞나 — 다른 곳에서 이미 다 만들었거나, 회사 보안 규정 때문에 외부 연결을 열 수 없는 경우입니다.

주의점 — 고칠 때마다 다시 압축해서 올려야 합니다. 한 달에 한두 번이면 괜찮지만, 매주 고칠 사이트라면 손이 많이 갑니다.

연결하기 전에 확인할 네 가지

연결이 안 될 때 원인은 대개 여기 네 개 중 하나입니다. 순서대로 보시면 됩니다.

1. 내 사이트의 공개 주소가 무엇인지 — 전용 주소로 쓰는지, 내 도메인을 붙였는지에 따라 연결에 적는 값이 다릅니다.
2. 연결용 열쇠를 어디에 적었는지 — 설정 파일 위치를 헷갈리면 도구가 아무 반응을 하지 않습니다.
3. 정적 파일로만 되어 있는지 — 데이터베이스가 돌아야 하는 프로그램은 이 방식으로 올릴 수 없습니다.
4. 되돌릴 자리가 있는지 — 고치다 망가졌을 때 이전 배포로 돌아갈 수 있어야 마음 놓고 고칠 수 있습니다.

1단계 전용 주소로 먼저 공개합니다

도메인을 먼저 살 필요는 없습니다. xxx.ibigent.com 같은 전용 주소가 바로 나오니, 그 주소로 공개해 두고 내용을 채우면 됩니다. 명함에 주소를 인쇄해야 할 때 내 도메인을 붙이면 됩니다.

2단계 화면을 한 번 만들어 둡니다

대화로 만들거나 템플릿에서 고릅니다. 이 단계는 완성이 목적이 아닙니다. 고칠 대상이 있어야 연결이 제대로 됐는지 확인할 수 있으니, 거친 상태로 둬도 됩니다.

3단계 쓰던 AI 도구에 연결 정보를 넣습니다

도구별 안내 문서에 적힌 줄을 설정 파일에 그대로 넣습니다. 여기까지가 한 번만 하는 일입니다. 연결이 되면 도구 쪽에서 내 사이트의 파일 목록이 보입니다.

4단계 고칠 곳을 말로 지시합니다

「첫 화면 문구를 이렇게 바꿔」처럼 말합니다. 결과가 편집 화면에 들어오면 눌러서 다시 손볼 수 있습니다. 내려받기와 압축이 이 단계에서 사라집니다.

5단계 저장하고 주소를 열어 봅니다

모바일에서도 한 번 보십시오. 글자가 잘리거나 사진이 너무 큰 자리가 이때 보입니다. 바로 다시 말로 고치면 됩니다.

6단계 검색에 걸릴 준비를 합니다

제목·설명 같은 검색 설정과 방문자 분석은 전 요금제에서 쓸 수 있습니다. 여기까지 하면 「만들었다」가 아니라 「운영 중」이 됩니다.

돈은 어디서부터 나가나요?

만들고 공개하는 일까지는 무료 플랜으로 됩니다. 결제가 시작되는 지점은 거의 정해져 있습니다. 내 도메인을 붙일 때, 광고 배너를 떼고 싶을 때, 광고비와 부정클릭까지 한곳에서 관리하고 싶을 때입니다. 전 요금제에서 공통으로 되는 것은 대화로 만들기·화면에서 바로 편집·ZIP 업로드 배포·AI 도구 연동·무료 SSL 자동 발급·검색 설정·방문자 분석·DDoS 방어·배포 이력 되돌리기·문의 폼입니다. 그리고 결제 전에 14일 무료체험이 있습니다.

요금제별로 숫자가 갈리는 칸만 모으면 이렇습니다.

확인 기준 : 2026년 10월

표에서 한 가지만 짚겠습니다. 진단 횟수는 「월 1회」와 「월 10회」가 열 배 차이지만, 실제로 중요한 것은 쪽수입니다. 페이지가 10장인 사이트라면 100쪽도 남습니다. 지금 내 사이트가 몇 장인지 세어 보고 고르시면 됩니다.

이 방식이 안 맞는 경우

장점만 말하면 거짓말이 됩니다. 아래에 해당하면 다른 길을 보셔야 합니다.

1. 데이터베이스가 돌아야 하는 프로그램을 올려야 하는 경우 — 정적 사이트 전용이라 올라가지 않습니다.
2. 연결 설정 파일을 여는 것 자체가 부담인 경우 — 이때는 연결을 건너뛰고 편집 화면에서 말로만 고치는 쪽이 낫습니다.
3. 회사 규정으로 외부 연결을 열 수 없는 경우 — ZIP 업로드만 쓰면 됩니다. 기능이 줄지 않습니다.

도구를 몇 개 쓰는지보다, 손이 몇 번 가는지를 봅니다

AI 도구를 세 개 쓰는 사람과 한 개 쓰는 사람, 어느 쪽이 홈페이지를 더 빨리 고칠까요? 질문부터가 모순이 있는 질문입니다. 도구 개수는 속도와 거의 상관이 없습니다. 도구를 세 개 써도 고칠 때마다 내려받고 압축하고 올리면 다섯 번이고, 한 개만 써도 연결해 두면 두 번입니다.

그래서 비교할 값은 「AI가 얼마나 똑똑한가」가 아니라 「한 줄 고칠 때 내 손이 몇 번 가는가」입니다. 이 숫자는 직접 세어 볼 수 있습니다. 지금 쓰는 방식으로 문구 한 줄을 고쳐 보면서, 마우스를 다른 화면으로 옮긴 횟수만 세어 보십시오. 그 숫자가 세 번을 넘으면 연결 방식이 답이고, 두 번 이하이면 지금 방식을 바꿀 이유가 없습니다.

자주 묻는 질문

코딩을 전혀 못 해도 되나요?

됩니다. 연결 설정은 안내 문서에 적힌 줄을 파일에 붙여 넣는 일이고, 그다음부터는 말로 지시합니다. 다만 그 파일을 여는 것조차 부담이면, 연결 없이 편집 화면에서 말로만 만드는 쪽을 쓰셔도 결과는 같습니다.

도메인을 먼저 사야 하나요?

아닙니다. 전용 주소로 먼저 공개해 두고, 밖에 알릴 때 내 도메인을 붙이면 됩니다. 도메인 연결은 베이직부터 열립니다. 연결하면 SSL 인증서가 자동으로 발급되어 https 로 접속됩니다.

AI가 고친 화면이 엉망이 되면 되돌릴 수 있나요?

배포 이력 되돌리기가 전 요금제에 있습니다. 이전에 올린 상태로 돌아갈 수 있으니, 고치기 전에 한 번 저장해 두는 습관만 들이면 됩니다.

게시판이나 회원가입도 되나요?

AI 호스팅은 정적 사이트 전용이라 게시판·회원관리가 필요하면 빌더 호스팅 쪽을 보셔야 합니다. 빌더 호스팅에는 공지·문의 게시판, 포토갤러리, 회원가입·로그인이 들어 있습니다. 반대로 한 장짜리 소개 페이지라면 정적 쪽이 더 빠르고 단순합니다.

연결 방식은 도구마다 다른가요?

약속은 같고, 적는 자리만 다릅니다. 커서 공식 문서 기준으로 전송 방식은 stdio·SSE·스트리머블 HTTP 세 가지이며, 가장 많이 쓰는 것은 내 컴퓨터에서 바로 띄우는 stdio 입니다. 다른 도구도 이름만 다르고 모양은 비슷합니다.

만든 뒤 광고까지 한곳에서 되나요?

베이직부터 구글·네이버 광고비 관리와 부정클릭 방지를 직접 쓸 수 있습니다. 광고를 아직 안 돌릴 계획이면 이 칸은 비워 두고 무료 플랜으로 운영하셔도 됩니다.

연결은 한 번, 그다음은 말로 고치면 됩니다

정리하면 길은 셋입니다. 한 번 만들고 거의 안 고칠 사이트는 압축 파일 올리기, 코딩이 낯설고 한 장짜리면 편집 화면에서 말로 만들기, 자주 고칠 사이트는 쓰던 AI 도구를 연결하는 방식입니다. 세 가지를 섞어 써도 문제가 없습니다. 아이비전트 계정에서는 이 셋이 같은 사이트 하나 위에서 돌아가고, 공개·검색 설정·방문자 분석까지 같은 자리에서 이어집니다. 어떤 길이든 먼저 목적을 정하고 비교해서 고르시면 됩니다. 연결 방법은 https://www.ibigent.com/docs/ibigent-studio/mcp.html 에 도구별로 정리해 두었습니다.

확인 기준 : 2026년 10월