AI로 무료 웹사이트 만들기 — 코딩 없이 배포까지 한 방 정리

게시일: 2025년 8월 19일 · 16분 읽기

비개발자 친구한테 실제로 가르쳐본 과정을 정리했다

6개월 전, 비개발자 친구가 "나도 웹사이트 만들 수 있을까?"라고 물었다. 그때 생각한 게 "AI와 무료 호스팅으로 가능하다"였다. 그렇게 실제로 친구에게 처음부터 끝까지 가르쳤고, 2시간 반이 걸렸다.

이 글은 그 과정을 정리한 것이다.

1단계: 웹사이트 콘셉트 정하기

가장 먼저 할 것은 "내 웹사이트가 뭐지?"를 정하는 것이다. 예를 들어:

친구는 카페 사업을 하고 있었으므로 "카페 소개 사이트"로 정했다.

2단계: AI로 HTML 생성

이제 ChatGPT나 Claude에 요청한다. 이렇게:

프롬프트:
나는 작은 카페를 운영하고 있다.
카페 소개 웹사이트를 만들고 싶다.
HTML/CSS로 된 한 페이지 웹사이트를 만들어줄 수 있을까?

포함될 항목:
1. 헤더 (로고, 네비게이션)
2. 히어로 섹션 (멋진 소개 이미지)
3. 카페 소개
4. 메뉴
5. 위치 정보
6. 연락처

디자인은 따뜻하고 카페스러운 분위기로

AI는 완전한 HTML 파일을 만들어줄 것이다. 복사해서 텍스트 파일에 붙여넣고, .html로 저장한다.

3단계: 이미지 추가

HTML에는 이미지 placeholder가 있을 것이다. 무료 이미지 사이트에서 받아 온다:

무료 이미지 사이트:

"cafe" 또는 "coffee" 검색해서 마음에 드는 이미지를 다운로드한다. 저해상도로 받으면 파일 크기가 작아서 로딩이 빠르다.

HTML의 img 태그에서 src 경로를 이미지 파일명으로 수정한다:

<img src="cafe-hero.jpg" alt="카페 내부">

4단계: 정보 수정

AI가 만든 HTML에는 더미 데이터가 들어있다. 자신의 정보로 바꾼다:

이 작업은 메모장에서 Ctrl+H (찾기/바꾸기)로 쉽게 할 수 있다.

5단계: 로컬에서 확인

생성된 HTML 파일을 더블클릭하면 브라우저에서 열린다. 화면을 확인해본다. 이미지가 안 보이면, HTML 파일과 이미지 파일이 같은 폴더에 있는지 확인한다.

6단계: 수정 (선택사항)

마음에 안 드는 부분이 있으면 AI에 다시 요청한다:

이 부분을 수정해줄 수 있을까?
- 배경색을 더 밝게
- 제목 폰트를 더 크게
- 연락처 섹션을 상단으로 이동

AI는 수정된 코드를 제공할 것이다.

7단계: GitHub Pages에 배포

이제 웹에 올려서 누구나 접속하게 한다. 가장 간단한 방법은 GitHub Pages다.

단계:

  1. GitHub 계정 생성 (github.com)
  2. 새 리포지토리 생성: username.github.io
  3. 생성된 리포지토리에 파일 업로드

파일 업로드 (웹 브라우저):

  1. GitHub 리포지토리 페이지 열기
  2. "Add file" 클릭
  3. "Upload files" 선택
  4. HTML 파일과 이미지 파일들을 드래그앤드롭
  5. Commit changes 클릭

5분 정도 기다리면 https://username.github.io 에서 웹사이트가 보인다.

8단계: 커스텀 도메인 (선택사항)

github.io 주소 대신 자신의 도메인을 사용하고 싶으면, 도메인을 구한다. 저렴한 옵션:

도메인을 구한 후 GitHub Pages 설정에서 Custom domain을 등록한다. DNS 설정은 도메인 제공자의 설명을 따른다.

9단계: SEO 최적화 (검색 엔진 최적화)

구글에 검색되게 하려면 몇 가지를 더한다:

<head>
  <title>OO 카페 - 따뜻한 분위기의 로컬 카페</title>
  <meta name="description" content="서울 강남 지역 가정식 카페. 신선한 커피와 수제 디저트를 즐길 수 있습니다.">
  <meta name="keywords" content="카페, 커피, 서울, 강남, 디저트">
  <meta name="author" content="카페 이름">
</head>

그리고 Google Search Console (google.com/search-console)에 사이트를 등록한다. 2주 후 검색 결과에 나타난다.

10단계: 선택사항 — 메일 폼 추가

고객이 메시지를 보낼 수 있게 하려면, Formspree라는 무료 서비스를 쓴다:

  1. formspree.io 접속
  2. 이메일 등록
  3. 제공된 코드를 HTML에 추가
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">전송</button>
</form>

이제 고객이 메시지를 보내면 자신의 이메일로 받는다.

친구의 결과

친구는 2시간 반 만에:

지금 그 사이트는 매월 평균 100명의 방문객을 받고 있다고 한다. 전부 무료다.

자주 묻는 질문

Q: 마음에 안 들면 디자인을 바꿀 수 있을까?
A: AI에 "배경색을 파란색으로", "레이아웃을 변경해달라" 등 요청하면 된다. 몇 초면 완료된다.

Q: 블로그를 추가하려면?
A: 처음부터 "블로그 기능이 있는 웹사이트"로 요청하면 된다. AI가 블로그 섹션을 추가할 것이다.

Q: 나중에 개발자를 고용해서 더 고급 기능을 추가할 수 있을까?
A: 물론이다. 이 HTML은 기초이고, 개발자는 여기에 회원가입, 결제, 대시보드 등을 추가할 수 있다.

Q: 비용이 정말 안 드나?
A: 도메인을 구하지 않으면 0원. 도메인을 구해도 연 $10 정도. 호스팅은 GitHub Pages이므로 평생 무료.

다음 단계

웹사이트가 완성되면:

  1. 소셜 미디어에 링크 공유
  2. 나중에 고객 후기 섹션 추가
  3. 사진 추가 및 업데이트 (매월 1-2회)
  4. Google Analytics로 방문객 분석 (무료)

결론

AI와 무료 서비스들이 발전하면서, 이제 코딩을 몰라도 웹사이트를 만들 수 있는 시대가 왔다. 현업 개발자인 나도 놀랄 정도다. 언제 이렇게까지 가능했지 싶을 정도로.

만약 웹사이트가 필요하지만 예산이 없다면, AI를 활용해보자. 2시간 투자로 온라인 존재감을 만들 수 있다.

iL
ian.lab

실무 개발자입니다. 현장에서 겪은 문제와 해결 과정을 기록합니다. 오류 제보는 연락처로 보내주세요.

관련 글 더 보기

AI & 개발 도구 AI 코딩 도구 6개월 실사용 후기 — 생산성이 정말 올랐을까? AI & 개발 도구 로컬 LLM 돌리기 — ollama로 프라이빗 AI 코딩 어시스턴트 세팅 AI & 개발 도구 LLM 프롬프트 엔지니어링 실전 — 개발자를 위한 패턴 모음