웹사이트 만들기 2026: 무료·빌더·AI 4가지 길 비용 비교, 직접 만들어 봤어요

처음 웹사이트를 만든다면 도구보다 길을 먼저 고르세요. 마우스로 꾸미는 빌더(윅스·아임웹), 문서를 그대로 올리는 노션·구글 사이트, AI 로 코드를 만들어 올리기, 워드프레스 네 갈래예요. 연습용은 0원으로 되고, 내 도메인을 붙이면 한 달 5천 원대부터 2만 원대까지 벌어져요(2026-10-27 각 공식 요금). AI 에게 한 장짜리 포트폴리오를 시켜 보니 HTML 파일 하나, 3.9KB 가 나왔고 내 PC 에서 바로 열렸어요. 길 고르기부터 도메인 연결까지 순서대로 정리했어요.

글 서순명(웹 에이전시·SI 10년 PM, 솔리드그루 이사) · 퓨쳐인프라 — 앱·서버 호스팅과 도메인·DNS 를 직접 운영 · 요금 확인·실습 2026-10-27(윅스·아임웹·노션·구글·워드프레스닷컴·GitHub 공식 페이지 대조) · 운영사 솔리드그루(사업자등록번호 875-44-00335, 서울 구로) · 문의 02-6933-6229 · support@futureinfra.ai · 비교 기준은 "광고 없이 내 도메인을 붙이는 가장 낮은 요금제"이고, 우리(퓨쳐인프라) 요금도 같은 기준으로 넣었어요. 다른 서비스와 제휴·광고 관계는 없어요.

웹사이트, 어떤 길로 만들까요?

길마다 잘하는 일이 달라요. 먼저 "내 사이트에 무엇이 꼭 있어야 하나"를 한 줄로 적어 보세요. 소개·포트폴리오인지, 예약·결제가 필요한지에 따라 길이 갈려요.

정리하면 이래요. 오늘 안에 보여 줄 사이트가 필요하면 빌더나 노션, 한 장짜리를 싸고 가볍게 오래 쓰려면 AI 코드, 글을 계속 쌓을 거면 워드프레스예요. 워드프레스 호스팅과 AI 로 코딩하기(바이브 코딩)는 따로 정리해 두었어요.

무료로 만들 수 있나요? 무료면 무엇이 빠지나요?

연습용은 대부분 무료로 돼요. 다만 무료는 업체 주소와 업체 광고를 함께 쓰는 조건이에요. 내 도메인을 붙이는 순간 유료로 바뀌는 곳이 많아요.

출처는 윅스 무료·프리미엄 비교 · 아임웹 요금 · 노션 요금 · 구글 사이트 맞춤 도메인 · 워드프레스닷컴 요금 · GitHub Pages 한도 예요(모두 2026-10-27 확인).

내 도메인까지 붙이면 한 달에 얼마인가요?

"내 도메인을 붙여 광고 없이 쓰는 가장 낮은 요금제"를 기준으로 맞춰 봤어요. 해외 요금은 2026-10-26 환율(1달러 = 1,325.28원)로 바꿨어요.

도메인 값은 따로 들어요. 첫해 할인과 둘째 해 가격이 크게 다를 수 있으니 도메인 1년 비용을 같이 보세요. 사이트를 업체에 맡길 때 비용은 홈페이지 제작 비용에 정리했어요.

직접 해 보기 — AI 로 한 장짜리 포트폴리오 만들기

코딩을 몰라도 돼요. AI 에게 "무엇을, 어떤 모양으로"만 정확히 말하면 돼요. 이번에 클로드에게 보낸 말은 이게 전부예요.

한 장짜리 포트폴리오 사이트를 HTML 파일 하나로 만들어 줘.
- 나: 동네 가게 간판·메뉴판을 만드는 브랜드 디자이너 김하늘(가상 인물)
- 넣을 것: 한 줄 소개, 작업 3개(카드), 일하는 방식, 문의 버튼
- 휴대폰에서도 보기 좋게, 외부 라이브러리·그림 파일 없이
- 말투는 해요체

돌아온 건 index.html 파일 하나였어요. 크기는 3,876바이트(약 3.9KB), 외부 파일은 0개예요. 이 파일을 폴더에 저장하고, 그 폴더에서 아래 한 줄로 내 PC 에 띄웠어요. 파이썬이 깔린 PC 라면 그대로 돼요.

python -m http.server 8765 --bind 127.0.0.1
# 브라우저에서 http://127.0.0.1:8765 열기

그림 파일이 없어서 작업 사진 자리는 색 띠로 채워졌어요. 실제로 쓸 때는 작업 사진을 같은 폴더에 넣고 "카드마다 이 사진을 넣어 줘"라고 한 번 더 시키면 돼요. 포트폴리오라면 한 줄 소개 · 작업 3~6개(결과와 내 역할) · 연락 방법 세 가지만 있어도 충분해요.

한 번 더 고쳐 달라고 해 봤어요

두 번째로 "문의 버튼을 남색으로, 인스타그램 버튼 하나 추가, 링크를 공유할 때 보일 제목·설명(og 태그)도 넣어 줘"라고 보냈어요. 고친 파일은 4,219바이트로 343바이트 늘었어요. 휴대폰 폭 360px·390px 에서 열어 보니 화면이 옆으로 밀리지 않았고(가로 넘침 0), 본문 글자는 16px, 큰 제목은 30px 로 줄어 있었어요.

막힌 곳도 하나 있었어요. AI 가 글꼴을 Pretendard 로 적었는데, 글꼴 파일은 붙이지 않았어요. 이 PC 에는 Pretendard 가 깔려 있어서 예쁘게 보였지만, 방문자 컴퓨터에 없으면 맑은 고딕 같은 기본 글꼴로 바뀌어 보여요. 글꼴까지 맞추려면 "웹폰트를 연결해 줘"라고 한 번 더 시키세요. 내 PC 에서만 보고 끝내지 말고, 휴대폰이나 다른 컴퓨터로 꼭 한 번 열어 보는 게 좋아요.

만든 파일을 인터넷에 올리려면?

내 PC 에서 연 주소(127.0.0.1)는 나만 볼 수 있어요. 다른 사람이 보려면 24시간 켜진 곳에 올려야 해요. HTML 한 장이라면 길은 세 가지예요.

AI 코딩 도구(클로드 코드 등)를 쓴다면 올리는 일까지 맡길 수 있어요. 퓨쳐인프라를 연결한 뒤 "퓨처인프라로 [가게 소개 홈페이지]를 만들어서 인터넷에 올려 줘. 다 되면 접속 주소와 한 달 예상 요금을 쉬운 말로 알려 줘"처럼 말하면, AI 가 앱 하나를 만들어 올리고 주소를 알려 줘요(연결 방법). 호스팅이 처음이면 호스팅이 뭐예요?부터 읽어도 좋아요.

도메인 연결로 마무리하기

어느 길이든 마지막 단계는 같아요. 사이트 쪽에서 값을 받아, 도메인 업체의 DNS 에 적는 일이에요.

1. 도메인 사기 — 도메인 업체에서 원하는 주소를 사요. 업체마다 둘째 해 가격이 달라요(도메인 업체 비교).
2. 사이트 쪽에 도메인 추가 — 빌더나 호스팅 설정에서 "도메인 연결"을 누르면 넣을 값(A 레코드 IP 나 CNAME 주소)을 알려 줘요.
3. DNS 에 적기 — 보통 내도메인.com(루트, @)은 A 레코드, www 는 CNAME 으로 적어요. 서비스가 알려 준 값을 그대로 넣어요.
4. 확인하고 기다리기 — 아래 명령으로 값이 바뀌었는지 보고, HTTPS 인증서가 붙을 때까지 기다려요.

nslookup www.내도메인.com
# 사이트 쪽에서 알려 준 주소나 IP 가 보이면 연결된 거예요

무료 도메인이 있는지는 무료 도메인 글에서 따로 정리했어요.

만든 뒤에는 누가 관리하나요?

사이트는 만드는 날보다 그다음 해가 더 길어요. 길마다 내가 맡을 일이 달라요.

HTML 한 장은 고칠 프로그램이 없어서 손이 가장 덜 가요. 대신 글을 자주 바꾼다면 매번 파일을 고쳐 다시 올려야 해요. 자주 바꾸는 사이트라면 빌더·워드프레스 쪽이 편해요.

자주 묻는 질문

완전 무료로 계속 써도 되나요?

연습·개인 포트폴리오라면 괜찮아요. 다만 업체 광고와 업체 주소가 붙고, GitHub Pages 처럼 영업용 무료 호스팅을 금지하는 곳도 있어요. 가게·회사 사이트라면 내 도메인과 광고 없는 요금제를 권해요.

코딩을 전혀 몰라도 AI 로 만들 수 있나요?

네. 이 글의 예제도 문장 몇 줄로 시켰어요. 막히는 건 주로 올리기와 도메인 연결인데, 이 부분도 AI 코딩 도구에 맡길 수 있어요.

회원가입·예약·결제도 되나요?

HTML 한 장만으로는 안 돼요. 정보를 저장할 곳(데이터베이스)과 서버 프로그램이 필요해요. 빌더의 쇼핑·예약 기능을 쓰거나, 앱에 데이터베이스를 붙여야 해요.

나중에 다른 곳으로 옮길 수 있나요?

HTML 파일은 그대로 옮겨져요. 빌더는 글·사진은 옮겨도 디자인은 다시 만들어야 하는 경우가 많아요. 아임웹도 공식 안내에서 다른 곳의 디자인은 가져오기 어렵다고 적어요.

검색에 나오게 하려면 무엇을 해야 하나요?

페이지 제목과 설명을 채우고, 구글 서치 콘솔과 네이버 서치어드바이저에 사이트를 등록해요. 노션 무료는 검색 노출 설정이 기본만 되고, 제목·설명을 바꾸려면 유료 요금제가 필요해요.

윅스·아임웹·워드프레스 중 무엇이 좋아요?

국내 결제·쇼핑 기능과 한국어 안내가 중요하면 아임웹, 템플릿 고르는 재미와 해외 결제가 괜찮으면 윅스, 글을 오래 쌓을 거면 워드프레스가 맞아요. 사이트 종류에 따라 답이 달라요.

파이썬·리액트 같은 걸 배워야 하나요?

소개·포트폴리오 사이트라면 필요 없어요. 로그인처럼 기능이 많은 서비스를 만들 때 배우면 돼요.

부록: AI 가 만든 HTML 전체(고친 뒤)

위 실습에서 받은 파일 그대로예요(두 번째 요청까지 반영, 4,219바이트). 메모장에 붙여 index.html 로 저장하면 같은 화면을 볼 수 있어요. 이메일·인스타그램 주소는 예시예요.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>김하늘 · 브랜드 디자이너 포트폴리오</title>
<meta name="description" content="작은 가게의 첫인상을 만드는 브랜드 디자이너 김하늘의 작업 모음">
<meta property="og:title" content="김하늘 · 브랜드 디자이너">
<meta property="og:description" content="동네 가게의 간판·메뉴판·로고를 만들어요">
<style>
  :root { --ink:#1d2430; --sub:#5d6877; --line:#e4e8ee; --bg:#fbfaf7; --accent:#1f3a8a; }
  * { box-sizing:border-box; margin:0; }
  body { font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:var(--ink); background:var(--bg); line-height:1.7; }
  .wrap { max-width:960px; margin:0 auto; padding:0 20px; }
  header { padding:72px 0 40px; }
  header p.role { color:var(--accent); font-weight:700; letter-spacing:.02em; }
  header h1 { font-size:clamp(30px,6vw,48px); line-height:1.25; margin:8px 0 14px; }
  header p.intro { color:var(--sub); max-width:560px; font-size:1.05em; }
  .btns { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
  .btn { display:inline-block; padding:11px 20px; border-radius:10px; font-weight:700; text-decoration:none; }
  .btn.main { background:var(--accent); color:#fff; }
  .btn.sub { border:1px solid var(--line); color:var(--ink); background:#fff; }
  h2 { font-size:1.3em; margin:40px 0 16px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
  .card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .thumb { height:150px; }
  .t1 { background:linear-gradient(135deg,#ffd9a8,#ff9a6b); }
  .t2 { background:linear-gradient(135deg,#b8e3d4,#5fb39a); }
  .t3 { background:linear-gradient(135deg,#c9d6ff,#7b8cff); }
  .card div.txt { padding:16px 18px 20px; }
  .card h3 { font-size:1.05em; }
  .card p { color:var(--sub); font-size:.93em; margin-top:4px; }
  .tag { display:inline-block; font-size:.78em; color:var(--accent); margin-top:10px; }
  section.about { margin-top:12px; }
  section.about ul { padding-left:18px; color:var(--sub); }
  footer { border-top:1px solid var(--line); margin-top:56px; padding:28px 0 48px; color:var(--sub); font-size:.9em; }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <p class="role">브랜드 디자이너</p>
    <h1>작은 가게의 첫인상을<br>만드는 김하늘이에요</h1>
    <p class="intro">동네 빵집, 꽃집, 1인 카페의 간판·메뉴판·로고를 7년째 만들고 있어요. 손님이 문 앞에서 3초 안에 "여기다" 하고 알아보게 하는 게 제 일이에요.</p>
    <div class="btns">
      <a class="btn main" href="mailto:hello@example.com">작업 문의하기</a>
      <a class="btn sub" href="#works">작업 보기</a>
      <a class="btn sub" href="https://www.instagram.com/" rel="noopener">인스타그램</a>
    </div>
  </header>

  <h2 id="works">최근 작업</h2>
  <div class="grid">
    <div class="card"><div class="thumb t1"></div><div class="txt"><h3>밀알 베이커리</h3><p>로고와 종이봉투, 매장 간판을 새로 만들었어요.</p><span class="tag">로고 · 패키지</span></div></div>
    <div class="card"><div class="thumb t2"></div><div class="txt"><h3>초록 꽃방</h3><p>계절마다 바뀌는 메뉴판과 인스타그램 틀을 만들었어요.</p><span class="tag">메뉴판 · SNS</span></div></div>
    <div class="card"><div class="thumb t3"></div><div class="txt"><h3>한 잔 카페</h3><p>1인 카페의 이름 짓기부터 컵 홀더까지 함께했어요.</p><span class="tag">네이밍 · 브랜딩</span></div></div>
  </div>

  <section class="about">
    <h2>이렇게 일해요</h2>
    <ul>
      <li>첫 상담 30분은 무료예요. 가게를 직접 보고 이야기해요.</li>
      <li>시안은 2개, 수정은 3번까지 해요.</li>
      <li>보통 2~3주면 끝나요.</li>
    </ul>
  </section>

  <footer>© 2026 김하늘 · hello@example.com · 이 페이지는 연습용 예시예요.</footer>
</div>
</body>
</html>

이 글의 숫자는 어디서 왔나요?