AI로 홈페이지 만들고 무료 배포하기: GitHub Pages 초보자 가이드

“AI로 홈페이지를 만들 수 있다는 건 알겠는데, 다른 사람도 보게 하려면 어떻게 해야 하죠?”

ChatGPT나 Claude에 홈페이지를 만들어 달라고 하면 코드를 받을 수 있습니다. 하지만 파일을 만들었다고 곧바로 인터넷에 공개되는 것은 아닙니다.

이럴 때 사용할 수 있는 방법이 GitHub Pages(깃허브 페이지)입니다.

간단한 소개 페이지나 작품 소개 사이트라면 GitHub 무료 계정으로 공개할 수 있습니다. 별도로 비싼 서버를 빌리지 않고도 github.io 주소를 받을 수 있다는 점이 장점입니다.

이번 글에서는 AI에게 홈페이지 제작 요청 → 파일 저장 → GitHub 업로드 → 무료 배포 → 실제 주소 확인까지 순서대로 따라가겠습니다.

다만 GitHub Pages에는 분명한 제한이 있습니다. 로그인 서버나 온라인 결제 서비스를 운영하는 용도가 아니고, 무료 호스팅에도 사용량과 상업적 이용에 관한 정책이 적용됩니다.

이번 실습은 자기소개용 1페이지 홈페이지만 만들겠습니다.

그림: AI가 작성한 홈페이지 파일을 저장소에 올리고 GitHub Pages 공개 설정을 거쳐 실제 주소를 확인하는 순서를 보여 주는 자체 제작 개념도. · EMFLS AI 자체 제작

이 글의 순서

• 1. 시작 전에 무엇을 준비해야 할까요?
• 2. 먼저 AI에게 홈페이지를 만들어 달라고 요청하세요
• 3. AI를 사용하기 어렵다면 이 간단한 예제로 시작해도 됩니다
• 4. GitHub에서 새로운 저장소를 만드세요
• 5. GitHub Pages 주소는 왜 두 종류인가요?
• 6. 만든 홈페이지 파일을 GitHub에 올리세요
• 7. GitHub Pages 공개 설정하기
• 8. 인터넷 주소가 생겼는지 확인하기
• 9. 이미지와 버튼이 안 보일 때는 경로를 확인하세요
• 10. 홈페이지를 수정할 때는 어떻게 하나요?
• 11. 404 오류가 나온다면 이 순서로 확인하세요
• 12. 정말 아무 비용도 들지 않나요?
• 13. AI가 만든 홈페이지에 넣으면 안 되는 것
• 14. 구글 검색에서도 바로 나타날까요?
• 바로 복사하는 ‘배포 전 최종 점검’ 요청문
• 자주 묻는 질문
• 결론: AI가 만든 파일을 ‘다른 사람도 볼 수 있는 사이트’로 바꿔 보세요

1. 시작 전에 무엇을 준비해야 할까요?

준비물은 크게 세 가지입니다.

1. GitHub 계정 — 무료 계정으로 시작할 수 있습니다.

2. AI에 질문할 수 있는 환경 — ChatGPT, Claude 등 자신이 쓰는 AI를 이용합니다.

3. 올릴 홈페이지 파일 — index.html 한 파일이면 이번 예제를 진행할 수 있습니다.

GitHub Free에서는 GitHub Pages를 사용하려는 저장소를 공개(Public)로 만들어야 합니다.

따라서 처음에는 다른 사람에게 보여줘도 되는 연습용 문장만 사용하세요. 주민등록번호, 비밀번호, 회사 내부 문서나 인증키를 올리면 안 됩니다.

이번에 만들 사이트는 아래 정도만 있으면 충분합니다.

• 첫 화면에 보이는 제목과 한 문장 소개
• 나를 소개하는 짧은 내용
• 앞으로 만들고 싶은 프로젝트 두세 개
• 모바일에서도 읽기 편한 디자인 회원가입, 데이터베이스, 온라인 결제, 개인정보 수집 기능은 넣지 않겠습니다.

2. 먼저 AI에게 홈페이지를 만들어 달라고 요청하세요

AI에게 그냥 “홈페이지 만들어 줘”라고 하면 필요한 파일이 여러 개 생기거나 외부 도구를 설치하라는 답변이 나올 수 있습니다.

처음에는 파일 하나로 만들도록 범위를 지정하는 편이 간단합니다.

그대로 복사해 쓰는 요청문

나는 코딩을 모르는 초보자야. GitHub Pages에 무료로 올릴 한국어 자기소개 홈페이지를 만들고 싶어. 제목, 짧은 소개, 작업한 프로젝트 카드 3개, 맨 아래 안내 문구로 구성해 줘. 배경은 밝고 글자가 잘 보이게 하고, 휴대전화 화면에서도 내용이 잘 보이도록 해 줘. index.html 한 파일 안에 HTML과 CSS를 모두 넣고, 외부 라이브러리, 로그인, 서버, 데이터베이스, API 키, 결제 기능은 사용하지 마. 처음에는 가상 이름과 샘플 프로젝트만 넣어 줘. GitHub에 업로드하거나 공개 배포하지 말고, 우선 완성된 파일 내용과 내가 직접 확인할 방법만 알려 줘.

AI가 코드를 작성했다면 내용을 복사해 index.html이라는 이름으로 저장하면 됩니다.

Mac이나 Windows의 일반 텍스트 편집기를 사용해도 되지만 파일명이 index.html.txt로 저장되지 않도록 확인해야 합니다.

AI가 여러 파일을 제안했다면 처음에는 왜 필요한지 물어보세요. 본 실습은 홈페이지 하나를 공개하는 것이 목적이므로 복잡한 개발 환경이 없어도 됩니다.

3. AI를 사용하기 어렵다면 이 간단한 예제로 시작해도 됩니다

AI가 만들어 준 결과가 너무 복잡하다면 아래 예시를 시작점으로 사용할 수 있습니다.

index.html 파일의 전체 내용 예시:

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="처음 만든 자기소개 홈페이지입니다.">
  <title>나의 첫 홈페이지</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0; color: #202638; background: #f5f7fb;
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.65;
    }
    header {
      padding: 52px 20px; text-align: center;
      background: #243552; color: #fff;
    }
    header h1 { margin: 0 0 12px; font-size: 2rem; }
    header p { margin: 0; }
    main { max-width: 760px; margin: 0 auto; padding: 32px 20px; }
    section { margin-bottom: 30px; }
    .card {
      background: #fff; border: 1px solid #dce2ed;
      border-radius: 12px; padding: 20px; margin: 12px 0;
    }
    a { color: #1e51a3; }
    a:focus-visible { outline: 3px solid #f9b233; }
    footer { text-align: center; padding: 24px; }
    @media (max-width: 480px) {
      header { padding: 40px 16px; }
      header h1 { font-size: 1.6rem; }
      main { padding: 24px 16px; }
    }
  </style>
</head>
<body>
  <header>
    <h1>안녕하세요! 첫 홈페이지입니다</h1>
    <p>작은 아이디어를 하나씩 만들어 갑니다.</p>
  </header>
  <main>
    <section id="about">
      <h2>소개</h2>
      <p>이 페이지는 홈페이지 제작을 연습하기 위한 예제입니다.</p>
    </section>
    <section id="projects">
      <h2>프로젝트</h2>
      <div class="card"><h3>프로젝트 1</h3><p>나만의 소개 페이지</p></div>
      <div class="card"><h3>프로젝트 2</h3><p>앞으로 만들 작은 웹사이트</p></div>
      <div class="card"><h3>프로젝트 3</h3><p>공개할 작품을 준비 중입니다.</p></div>
    </section>
  </main>
  <footer>이 페이지는 학습용 예제입니다.</footer>
</body>
</html>

이 코드는 연습용 단일 HTML 파일 예시입니다. 본 글 작성자가 실제 GitHub Pages에 배포해 작동을 시험한 결과는 아닙니다.

파일을 저장한 뒤 컴퓨터에서 더블클릭해 브라우저로 열어보고, 제목과 카드가 나타나는지 확인해 보세요.

4. GitHub에서 새로운 저장소를 만드세요

이제 홈페이지 파일을 GitHub에 올릴 차례입니다.

1. GitHub에 로그인합니다.

2. 오른쪽 위의 새 저장소 만들기 메뉴에서 New repository를 선택합니다.

3. 저장소 이름을 my-first-site로 입력합니다.

4. Public(공개)을 선택합니다.

5. 필요하면 Add a README file을 선택해 초기 파일을 만듭니다.

6. Create repository로 저장소를 생성합니다.

이번에는 my-first-site라는 프로젝트 사이트를 사용하겠습니다.

처음부터 저장소 이름을 username.github.io로 만들 필요는 없습니다.

왜냐하면 GitHub Pages에는 이름에 따라 주소가 달라지는 두 종류의 사이트가 있기 때문입니다.

5. GitHub Pages 주소는 왜 두 종류인가요?

예를 들어 GitHub 사용자 이름이 sampleuser라고 가정하겠습니다.

종류	저장소 이름	공개 주소
사용자 홈페이지	sampleuser.github.io	https://sampleuser.github.io/
프로젝트 홈페이지	my-first-site	https://sampleuser.github.io/my-first-site/

두 주소 모두 이해하면 쉽지만 프로젝트 이름이 주소에 들어가는지가 다릅니다.

이번 실습은 프로젝트 홈페이지이므로 아래 주소 형태가 목표입니다.

https://sampleuser.github.io/my-first-site/

위 주소는 설명용입니다. 실제 본인의 GitHub 사용자 이름으로 바꿔야 합니다.

이미 자기 계정의 username.github.io 저장소를 사용하고 있더라도 새 my-first-site 저장소를 이용해 별도 프로젝트 페이지를 만들어 볼 수 있습니다.

6. 만든 홈페이지 파일을 GitHub에 올리세요

방금 만든 my-first-site 저장소 화면에서 파일을 추가합니다.

컴퓨터에 index.html 파일이 있는 경우

1. 저장소의 Code 화면으로 이동합니다.

2. Add file → Upload files를 선택합니다.

3. 컴퓨터에서 만든 index.html 파일을 선택해 업로드합니다.

4. 목록에 파일 이름이 보이는지 확인합니다.

5. Commit changes로 변경을 저장합니다.

AI가 코드만 알려준 경우

컴퓨터에 파일을 저장하지 않고 GitHub 웹에서 직접 만들 수도 있습니다.

1. Add file → Create new file을 선택합니다.

2. 파일 이름에 index.html을 입력합니다.

3. AI가 작성한 전체 HTML 코드를 편집창에 붙여넣습니다.

4. 내용을 확인한 뒤 Commit changes를 선택합니다.

중요한 것은 index.html 파일이 저장소의 최상위 위치에 있어야 한다는 점입니다.

다음과 같은 구조면 초보 예제로 충분합니다.

my-first-site/
├── index.html
└── README.md

이 단계까지 끝났어도 아직 GitHub Pages 공개 설정을 켜지 않았다면 주소에서 원하는 페이지가 바로 보이지 않을 수 있습니다.

7. GitHub Pages 공개 설정하기

이제 실제로 인터넷에 공개할 설정을 합니다.

1. 저장소 상단의 Settings를 누릅니다.

2. 왼쪽 메뉴의 Pages를 선택합니다.

3. Build and deployment 항목을 찾습니다.

4. Source에서 Deploy from a branch를 선택합니다.

5. Branch는 main, 폴더는 /(root)를 선택합니다.

6. Save를 누릅니다.

설정 항목	이번 실습에서 고를 값
Source	Deploy from a branch
Branch	main
Folder	/(root)

만약 저장소의 기본 브랜치가 main이 아니라면 실제로 index.html 파일이 있는 브랜치를 선택하세요.

/(root)는 맨 위 폴더를 뜻합니다. 우리가 만든 index.html을 최상위에 올렸으므로 이 설정이 맞습니다.

설정을 저장하면 GitHub의 배포 작업이 시작됩니다. 발행을 활성화하기 전에 저장소와 페이지에 공개하면 안 되는 정보가 없는지 다시 확인하세요.

8. 인터넷 주소가 생겼는지 확인하기

공개 설정을 마쳤다면 Settings → Pages 화면에서 사이트 상태를 확인하세요.

배포가 완료되면 Visit site 버튼으로 실제 홈페이지를 열 수 있습니다.

우리 예제의 예상 주소는 다음과 같습니다.

https://sampleuser.github.io/my-first-site/

처음 설정하거나 파일을 수정한 직후에는 변경사항이 적용되기까지 시간이 걸릴 수 있습니다. GitHub 공식 문서는 최대 약 10분까지 걸릴 수 있다고 안내합니다.

따라서 파일을 업로드하자마자 404 오류가 뜬다고 무조건 실패했다고 판단할 필요는 없습니다.

배포 상태가 성공으로 표시되고 실제 주소에서 화면이 나타나는지 확인하세요. 문제가 생기면 저장소의 Actions 화면에서 관련 배포 작업 기록을 확인할 수 있습니다.

중요: 사이트가 공개됐다는 것은 해당 주소를 아는 다른 사람이 볼 수 있다는 뜻입니다. 공개 여부를 테스트용이라고 가볍게 생각하면 안 됩니다.

9. 이미지와 버튼이 안 보일 때는 경로를 확인하세요

가끔 홈페이지는 열리는데 이미지나 스타일만 빠지는 경우가 있습니다.

이때 흔한 원인 중 하나가 프로젝트 사이트의 주소 경로입니다.

예를 들어 프로젝트 주소가 https://sampleuser.github.io/my-first-site/인데 HTML에 다음과 같이 적혀 있다면 문제가 발생할 수 있습니다.

<img src="/images/profile.jpg" alt="소개 사진">

앞의 / 때문에 이미지 경로가 프로젝트 폴더를 건너뛰고 다른 위치를 가리킬 수 있습니다.

프로젝트 폴더 안에 이미지 파일이 실제로 있다면 보통 다음처럼 상대경로를 사용하면 됩니다.

<img src="./images/profile.jpg" alt="소개 사진">

물론 이미지가 GitHub 저장소에 실제 업로드되어 있어야 하고, images 폴더와 파일 이름도 일치해야 합니다.

처음에는 우리가 만든 예제처럼 외부 이미지 없이 한 개 HTML 파일로 시작하는 것이 실수를 줄이는 방법입니다.

AI에 요청한다면 다음 문구도 유용합니다.

이 홈페이지는 GitHub Pages의 프로젝트 저장소 my-first-site에 올릴 거야. 이미지와 CSS, 내부 링크는 프로젝트 경로에서도 깨지지 않도록 상대경로로 작성해 줘. HTML 파일이 최상위에 있을 때의 폴더 구조도 함께 알려 줘.

10. 홈페이지를 수정할 때는 어떻게 하나요?

공개한 뒤 오탈자를 발견하거나 프로젝트 내용을 바꾸고 싶을 수 있습니다.

GitHub에 다시 접속해 index.html을 열고 편집한 뒤 Commit changes로 변경을 저장하면 됩니다.

기본적인 Deploy from a branch 방식에서는 게시 대상으로 정해 둔 브랜치와 폴더의 변경사항이 새 배포를 시작하게 됩니다.

예를 들어 이렇게 수정할 수 있습니다.

내 홈페이지의 ‘프로젝트 2’ 부분을 ‘작업한 디자인 예시’로 바꿔 줘. 그 외의 내용과 전체 구조는 그대로 유지해 줘. GitHub에서 index.html의 어느 부분을 수정하면 되는지 알려 줘. 실제 저장소는 직접 수정하지 마.

수정 전 현재 파일 내용을 별도로 복사해 두면 잘못 바꿨을 때 이전 상태로 돌아가기 쉽습니다.

중요한 프로젝트라면 변경 내역과 검토 과정을 조금 더 엄격하게 관리하는 방법을 익히는 것이 좋습니다.

11. 404 오류가 나온다면 이 순서로 확인하세요

사이트가 열리지 않는 가장 흔한 문제를 정리했습니다.

증상	우선 점검할 항목
404 오류	index.html 이름과 실제 파일 위치
공개 주소가 다름	사용자 사이트와 프로젝트 사이트 URL 차이
배포가 시작되지 않음	Settings → Pages의 Source/Branch/Folder 설정
배포 실패 알림	Actions의 실제 오류 기록
글씨와 이미지가 깨짐	CSS/이미지 상대경로와 파일명 대소문자
수정했는데 예전 화면이 보임	배포 완료 여부와 브라우저 새로고침

특히 Index.html과 index.html은 다르게 취급됩니다. 대문자 하나 때문에 페이지가 열리지 않을 수 있습니다.

배포 오류가 계속된다면 GitHub의 Pages 문제 해결 공식 문서를 참고해 주세요.

12. 정말 아무 비용도 들지 않나요?

이번 실습처럼 GitHub Free의 공개 저장소에서 작은 정적 홈페이지를 게시하는 경우에는 GitHub Pages 자체를 이용하기 위한 별도 서버 비용이 필요하지 않습니다.

하지만 무제한·무조건 무료 서비스로 이해하면 안 됩니다.

현재 GitHub 공식 문서는 다음과 같은 제한을 명시합니다.

항목	공식 안내
한 사이트의 게시 파일 크기	최대 1GB
원본 저장소 크기	1GB 권장
월간 사이트 대역폭	100GB 소프트 한도
빌드 횟수	시간당 10회 소프트 한도(일부 Actions 방식 예외)

한도를 넘으면 서비스 제한이나 안내가 발생할 수 있으며, 이것이 영구적으로 모든 사용량을 무료 제공한다는 뜻은 아닙니다.

또한 GitHub Pages는 쇼핑몰 결제나 상업용 SaaS를 무료로 운영하기 위한 호스팅 서비스가 아닙니다. GitHub는 온라인 비즈니스·전자상거래를 주된 목적으로 운영하는 사이트에 대한 이용 제한을 안내합니다.

비밀번호나 신용카드 번호를 제출받는 기능에도 적합하지 않습니다.

처음에는 자기소개, 포트폴리오, 공개 프로젝트 안내처럼 정적인 정보 페이지로 활용하는 것이 안전합니다.

13. AI가 만든 홈페이지에 넣으면 안 되는 것

공개 홈페이지와 GitHub 저장소에 포함할 자료를 검토하세요.

비밀번호와 API 키: HTML이나 JavaScript에 넣으면 다른 사람에게 보일 수 있습니다. 절대 넣지 마세요.

내부 업무자료와 개인정보: 회사 코드나 고객정보, 개인 식별 정보 등은 공개 저장소에 올리지 않는 것이 좋습니다.

허락받지 않은 사진과 콘텐츠: AI가 생성하거나 추천한 이미지라도 실제 사용 권한·저작권을 검토해야 합니다.

로그인·결제 기능 흉내: 실제로 안전한 서버가 없는 상태에서 카드번호나 비밀번호를 입력받는 화면을 만들지 마세요.

동의하지 않은 공개: 자신의 이름이나 연락처를 알리는 것이 불편하다면 가상의 프로필과 연습용 설명만 사용하세요.

특히 GitHub 저장소가 비공개여도 유료 플랜으로 Pages 사이트를 게시하면 실제 웹사이트는 공개될 수 있습니다. 저장소의 비공개 여부를 웹페이지 내용의 비공개 보장으로 생각해서는 안 됩니다.

14. 구글 검색에서도 바로 나타날까요?

GitHub Pages에 홈페이지를 공개했다면 다른 사람에게 주소를 직접 보내 접속하게 할 수 있습니다.

하지만 홈페이지 공개와 구글 검색 결과에 노출되는 것은 다른 과정입니다.

새 페이지는 검색엔진이 발견하고 처리하는 데 시간이 걸립니다. Google Search Console에서 관리하는 사이트의 URL 검사를 통해 색인 생성을 요청할 수 있지만, 요청했다고 바로 검색 결과에 나타나는 것은 아닙니다.

검색 결과가 아직 없다고 사이트가 비공개인 것도 아닙니다.

먼저 GitHub Pages의 실제 공개 주소가 정상적으로 열리는지 확인하고, 검색 노출은 별도로 점검하는 것이 좋습니다.

바로 복사하는 ‘배포 전 최종 점검’ 요청문

AI에게 다음처럼 검토를 요청해 볼 수 있습니다.

이 홈페이지를 GitHub Pages의 공개 저장소 my-first-site에 올릴 예정이야. 실제로 배포하기 전에 파일 목록과 index.html 위치, 상대경로, 모바일 화면, 외부 이미지·폰트, 개인정보 및 API 키 포함 여부를 검토해 줘. 오류 가능성과 수정안을 보여 주되 GitHub 저장소 생성·업로드·공개 배포는 하지 마. 확인된 사실과 실제 브라우저에서 시험해야 할 내용을 구분해 줘.

이 요청만으로 실제 배포나 모바일 테스트가 끝나는 것은 아닙니다. 최종 확인은 본인의 브라우저와 공개 페이지에서 직접 수행해야 합니다.

자주 묻는 질문

코딩을 전혀 몰라도 GitHub Pages를 사용할 수 있나요?

간단한 정적 페이지라면 AI에게 파일 작성을 요청하고 GitHub 웹사이트에서 업로드하는 방식으로 시작할 수 있습니다. 다만 파일 이름과 저장소 공개 설정, 실제 배포 결과는 본인이 확인해야 합니다.

GitHub 무료 계정으로도 홈페이지를 운영할 수 있나요?

네. GitHub Free에서는 공개 저장소로 GitHub Pages를 사용할 수 있습니다. 비공개 저장소의 Pages 조건은 구독 플랜에 따라 다릅니다.

Github Pages 사이트는 몇 개까지 만들 수 있나요?

사용자 이름을 사용하는 대표 사용자 사이트는 계정당 하나입니다. 프로젝트별 사이트는 각각의 저장소에서 만들 수 있으며 관련 정책과 사용 한도가 적용됩니다.

서버나 별도 도메인을 사야 하나요?

이 실습은 github.io 기본 주소를 사용하므로 별도 서버나 유료 도메인을 구매할 필요가 없습니다. 본인만의 도메인을 쓰려면 외부 등록비와 DNS 설정이 발생할 수 있습니다.

회원가입이나 온라인 결제 사이트도 만들 수 있나요?

GitHub Pages는 정적 파일을 제공하므로 일반적인 PHP·Python 같은 서버 실행 기능을 제공하지 않습니다. 민감한 입력·결제와 상업 거래를 주목적으로 한 사이트 운영에도 제한이 있습니다.

AI로 만든 홈페이지는 반드시 검색에 노출되나요?

아닙니다. 공개 URL과 검색엔진 색인 여부는 다릅니다. 실제 검색 노출에는 별도의 발견·수집·색인 과정이 필요합니다.

결론: AI가 만든 파일을 ‘다른 사람도 볼 수 있는 사이트’로 바꿔 보세요

AI가 홈페이지 코드를 만들어 주는 것과 실제 인터넷 주소에서 화면이 열리는 것은 서로 다른 단계입니다.

GitHub Pages를 이용하면 GitHub Free의 공개 저장소에서 간단한 정적 페이지를 배포하고 github.io 주소로 공유할 수 있습니다.

처음에는 복잡한 웹서비스를 만들기보다 한 개의 index.html 파일을 올리고, Settings → Pages에서 배포를 설정하고, 실제 URL에서 확인하는 것부터 시작하세요.

화면이 정상적으로 보인다면 작은 부분부터 수정하면서 익숙해질 수 있습니다.

중요한 것은 빠른 자동 배포보다 공개할 내용을 검토하고, 올린 뒤 직접 확인하고, 문제가 생기면 원인을 찾아 고칠 수 있게 만드는 것입니다.

함께 읽으면 좋은 글

• 코드란 무엇일까? HTML·CSS·JavaScript와 AI 코딩 쉽게 이해하기 — 홈페이지를 이루는 코드와 파일의 역할부터 알아봅니다.
• REA란? GitHub에서 화제인 AI 리버스 엔지니어링 도구, 코딩 몰라도 쓸 수 있을까? — GitHub에 있는 AI 개발 도구와 공개 저장소를 함께 살펴봅니다.