코딩 없이 홈페이지를 만드는 일은 지금 실제로 됩니다. 다만 대부분이 막히는 곳은 화면을 만드는 단계가 아니라, 만들어진 파일을 사람이 볼 수 있는 주소에 올리는 단계입니다. AI에게 말해서 HTML이 나오는 데까지는 몇 분이면 충분하지만, 그 파일이 대화창 안에 있는 동안에는 아무도 그 홈페이지를 볼 수 없습니다.
핵심 요약
- 화면을 만드는 단계는 도구를 크게 가리지 않습니다. 갈리는 것은 그다음 배포 단계입니다.
- 대화형 AI는 코드를 주지만 주소를 주지 않고, 웹빌더는 주소를 주지만 코드를 자유롭게 바꾸기 어렵습니다.
- 긴 페이지를 통째로 놓고 한 군데만 고치려면 도구가 한 번에 읽는 분량을 먼저 확인해야 합니다.
- 공개까지 가려면 파일 올리기·주소 연결·SSL 세 가지가 자동으로 처리되는지가 실질적인 기준이 됩니다.
코딩 없이 만들 때 실제로 막히는 지점 4가지
도구를 고르기 전에 어디서 멈추게 되는지부터 보는 편이 빠릅니다. 아래 네 가지는 방식과 상관없이 반복해서 나타납니다.
- 주소가 없습니다. 대화형 AI가 만들어 준 결과물은 대화창 안의 코드일 뿐이라, 그대로는 인터넷에 존재하지 않습니다.
- 파일이 흩어집니다. HTML 한 장으로 시작해도 곧 CSS·이미지·서브페이지가 따라붙고, 어느 폴더에 무엇을 넣어야 하는지에서 멈추게 됩니다.
- 고칠 때마다 전체가 바뀝니다. 문구 한 줄만 바꾸려고 페이지를 다시 생성하면 손대지 않으려던 부분까지 달라집니다.
- https가 붙지 않습니다. 주소는 띄웠는데 인증서가 없으면 브라우저가 경고를 표시하고, 방문자는 그 화면에서 대부분 돌아갑니다.
이 가운데 앞의 두 가지는 만드는 도구가, 뒤의 두 가지는 올리는 곳이 해결합니다. 그래서 도구 하나만 잘 골라서는 끝나지 않습니다.
AI가 한 번에 다룰 수 있는 분량은 얼마나 되나요?
모델에 따라 20만 토큰과 100만 토큰으로 갈립니다. 이 값이 곧 페이지 전체를 붙여 넣고 한 군데만 고쳐 달라고 시킬 수 있는지를 결정합니다.
| 모델 | 한 번에 읽는 입력 | 한 번에 쓰는 출력 |
|---|---|---|
| Claude Opus 5 | 100만 토큰 | 12만 8천 토큰 |
| Claude Sonnet 5 | 100만 토큰 | 12만 8천 토큰 |
| Claude Haiku 4.5 | 20만 토큰 | 6만 4천 토큰 |
확인 기준 : 2026년 8월
공식 문서는 100만 토큰을 영어 기준 약 55만 단어 분량으로 안내합니다. 홈페이지 한 페이지의 HTML은 대개 이 범위 안에 넉넉히 들어오므로, 최신 모델에서는 파일을 통째로 넣고 특정 문단만 지목해 고치게 하는 방식이 가능합니다. 구글도 다수의 Gemini 모델이 100만 토큰 이상의 컨텍스트를 다룬다고 안내하고 있습니다(2026년 8월 공식 문서 기준).
1. ChatGPT — 화면은 빨리 나오지만 주소는 나오지 않습니다
특징: 대화만으로 완성된 HTML 한 벌을 받습니다. 구조를 잡고 문구를 다듬는 속도는 가장 빠른 축에 듭니다.
어떤 경우에 맞나: 한 장짜리 소개 페이지나 행사 안내처럼 구조가 단순하고 초안이 급한 경우입니다.
주의점: 결과물이 코드 블록으로 남습니다. 어디에 올릴지는 따로 정해야 하고, 이미지 경로가 깨지는 문제가 이 단계에서 가장 자주 생깁니다.
2. Claude — 긴 페이지를 통째로 놓고 한 군데만 고치는 쪽
특징: 위 표처럼 한 번에 읽는 분량이 큰 편이라, 페이지 전체를 넣어 두고 특정 영역만 바꾸라고 지시하기에 유리합니다. 편집기와 연결해 쓰는 방식(MCP)도 지원합니다.
어떤 경우에 맞나: 페이지가 여러 장으로 늘어났고, 수정할 때마다 다른 곳이 함께 바뀌는 문제를 겪고 있는 경우입니다.
주의점: 코드로 다루는 만큼 파일과 폴더라는 개념 자체는 남습니다. 파일 이름을 신경 쓰는 일이 싫다면 맞지 않습니다.
3. Gemini — 참고 이미지나 문서를 같이 넣어야 하는 경우
특징: 텍스트뿐 아니라 이미지와 PDF를 함께 입력으로 넣을 수 있습니다. 마음에 드는 화면을 캡처해 두고 이런 분위기로 만들어 달라고 시키는 방식이 가능합니다.
어떤 경우에 맞나: 원하는 느낌은 분명한데 글로 설명하기 어려운 경우, 또는 기존 인쇄물의 내용을 그대로 옮겨야 하는 경우입니다.
주의점: 참고 이미지를 그대로 따라 만들면 남의 디자인과 사진을 복제하게 될 수 있습니다. 구조만 참고하고 사진과 문구는 직접 준비하는 편이 안전합니다.
4. v0 같은 화면 생성 전용 도구
특징: 만들어지는 화면을 옆에서 미리 보면서 UI 코드를 받는 도구입니다. 버튼과 카드 같은 요소를 빠르게 뽑아내는 데 강합니다.
어떤 경우에 맞나: 이미 개발 도구에 익숙하고, 화면 조각을 여러 개 만들어 조합하려는 경우입니다.
주의점: 결과가 특정 프레임워크용 코드로 나오는 경우가 있어, 그대로 웹서버에 올린다고 브라우저에서 열리지 않을 수 있습니다. 올리기 전에 HTML·CSS·JS 형태로 정리되는지 확인해야 합니다.
5. 위지윅 웹빌더 — 만드는 순간 이미 공개되어 있는 쪽
특징: 화면에서 끌어다 놓고 글자를 바꾸면 그대로 저장됩니다. Wix, 아임웹, 카페24처럼 국내외에 여러 서비스가 있고, 만드는 시점부터 주소와 인증서가 이미 붙어 있습니다.
어떤 경우에 맞나: 코드를 아예 보고 싶지 않고, 게시판·예약·회원가입처럼 저장이 필요한 기능이 함께 있어야 하는 경우입니다.
주의점: 요금과 무료 범위는 서비스마다 다르므로 가입 전에 직접 확인해야 합니다. 또 만든 화면을 파일로 꺼내 다른 곳으로 옮기기는 대체로 어렵습니다.
6. 아이비전트 — 만든 결과를 그 자리에서 주소까지 잇는 쪽
특징: 대화로 화면을 만든 뒤, 완성된 HTML을 전체 교체·상단·하단·선택영역 네 곳 중 어디에 넣을지 고르면 편집 화면에 바로 반영됩니다. 이미 다른 도구로 만들어 둔 사이트가 있으면 ZIP 파일 하나를 올려 배포합니다. 무료 요금제에서도 xxx.ibigent.com 형태의 도메인 1개와 무료 SSL 자동 발급이 함께 제공되고, 유료 상품은 14일 무료체험이 있습니다.
어떤 경우에 맞나: 다른 AI 도구로 코드는 이미 받아 두었는데 올릴 곳이 없는 경우, 또는 만들기와 올리기를 한 곳에서 끝내고 싶은 경우입니다.
주의점: 무료 요금제는 광고 배너가 노출되고 정적 사이트(HTML·CSS·JS) 전용입니다. 게시판·회원가입·예약처럼 데이터를 저장하는 기능이 필요하면 기능형 빌더 쪽에서 시작해야 합니다.
만든 파일을 공개 주소까지 올리는 순서 5단계
어떤 도구로 만들었든 공개까지의 흐름은 같습니다. 이 순서대로만 확인하면 중간에 되돌아갈 일이 줄어듭니다.
- 파일을 한 폴더에 모읍니다. 첫 화면 파일 이름은 index.html 로 두고, 이미지와 CSS는 하위 폴더에 정리합니다.
- 내 컴퓨터에서 index.html 을 브라우저로 열어 봅니다. 여기서 사진이 안 보이면 올린 뒤에도 안 보입니다.
- 폴더를 통째로 압축해 배포할 곳에 올립니다. 임시 주소가 바로 나오는지 확인합니다.
- 휴대폰으로 그 임시 주소를 열어 봅니다. 글자가 잘리거나 가로로 밀리는 부분을 이 시점에 고칩니다.
- 도메인을 연결하고 https 로 열리는지 확인합니다. 주소창에 경고가 뜨지 않으면 공개 준비가 끝난 것입니다.
MCP를 연결하면 무엇이 달라지나요?
AI가 만든 결과를 사람이 복사해서 옮기는 일이 사라집니다. MCP는 AI 애플리케이션을 외부 시스템에 연결하는 공개 표준으로, 공식 문서는 이를 AI용 USB-C 단자에 비유합니다. Claude와 ChatGPT를 비롯해 Visual Studio Code, Cursor 등이 이 방식을 지원합니다(2026년 8월 공식 문서 기준).
실제로 줄어드는 것은 손이 가는 횟수입니다. 연결되어 있지 않으면 코드를 복사해 편집기에 붙여 넣고 다시 올리는 세 동작이 매번 필요하지만, 연결해 두면 만든 결과가 편집 화면으로 바로 들어옵니다. 아이비전트도 Claude Code·Cursor·Codex·Antigravity 네 가지 도구에 대한 연결 문서를 각각 따로 제공합니다.
도구를 고르기 전에 확인할 것 3가지
- 방문자가 글을 남기거나 예약을 넣어야 하는지. 그렇다면 정적 파일만 올리는 방식은 처음부터 후보에서 빠집니다.
- 만든 결과를 파일로 꺼낼 수 있는지. 나중에 다른 곳으로 옮길 가능성이 있으면 이 항목이 요금보다 중요합니다.
- 주소와 SSL이 자동으로 붙는지. 이 둘을 직접 설정해야 하는 방식은 코딩 없이 만든다는 전제와 어긋납니다.
코딩보다 먼저 정해야 하는 것
코딩 없이 홈페이지를 만드는 방법을 찾을 때 대부분은 어떤 AI가 더 잘 만드는지부터 비교하게 됩니다. 그런데 실제로 시간을 잡아먹는 구간은 만드는 쪽이 아니라, 만들어 놓은 파일이 갈 곳을 정하지 못한 채 컴퓨터에 남아 있는 구간이었습니다. 그래서 도구를 고르기 전에 이 사이트에 방문자 글이 쌓여야 하는지, 나중에 옮길 일이 있는지를 먼저 정하는 편이 순서에 맞습니다.
이미 다른 AI 도구로 코드를 받아 두었는데 올릴 곳을 찾고 있다면, 무료 요금제로 임시 주소부터 띄워 놓고 화면이 제대로 열리는지 확인해 보는 것이 가장 빠른 다음 단계입니다.
확인 기준 : 2026년 8월
