무료로 홈페이지를 만드는 방법 중 가장 추천할 만한 것을 하나만 꼽으라면, 저는 단연 깃허브(GitHub)를 말합니다. 용량 제한이 사실상 없고, 안정적이며, 무엇보다 완전히 무료이기 때문입니다.
다만 한계도 분명합니다. 홈페이지에 게시판을 만들거나, 블로그처럼 카테고리를 나눠 글을 쉽게 올리는 기능은 불가능하지는 않지만 상당히 까다롭습니다. 이미 만들어진 페이지를 수정하는 것도 코딩 지식이 없으면 쉽지 않은 일입니다.
그나마 다행인 것은, 코딩을 전혀 몰라도 AI(클로드)의 도움을 받아 홈페이지 코드를 만들 수 있다는 점입니다. 이 글에서는 AI를 이용해 1장짜리 메인 홈페이지를 만들고, 이를 깃허브에 올려 실제로 인터넷 주소를 갖는 나만의 홈페이지로 완성하기까지의 전 과정을 처음부터 끝까지 순서대로 안내합니다.
시작 전에 미리 준비해두면 좋은 것
- 인터넷이 연결된 컴퓨터 (스마트폰보다는 컴퓨터 화면에서 진행하는 것을 추천합니다)
- 구글(Gmail) 이메일 계정: 깃허브 가입에 사용합니다
- AI 클로드(Claude) 계정: claude.ai에서 무료로 가입 가능합니다
- 크롬(Chrome) 브라우저 사용을 권장합니다
1. 깃허브 홈페이지, 왜 추천할까요?
깃허브는 원래 개발자들이 프로그램 코드를 저장하고 관리하는 공간입니다. 그런데 이 공간에는 깃허브 페이지(GitHub Pages)라는 아주 유용한 기능이 숨어 있습니다.
저장소(폴더라고 생각하면 됩니다)에 홈페이지 파일 하나만 올려두면, 깃허브가 이를 인터넷에서 누구나 볼 수 있는 홈페이지로 자동 변환해주는 기능입니다.
| 장점 | 한계 |
|---|---|
| 완전 무료, 용량 넉넉함 | 게시판·카테고리형 블로그 기능 구현이 어려움 |
| 안정적으로 오래 운영 가능 | 완성된 페이지 수정에 코딩 지식이 다소 필요 |
| 나만의 도메인 연결도 가능 | 회원가입·댓글 등 동적 기능은 별도 도구 필요 |
💡 이럴 때 깃허브 홈페이지가 딱입니다
책 소개 페이지, 개인 소개(포트폴리오) 페이지, 간단한 회사·모임 안내 페이지처럼 한두 장으로 정보를 보여주는 홈페이지를 만들 때 특히 유용합니다. 이 글에서도 ‘책을 홍보하기 위한 소개 페이지’를 예로 함께 만들어 보겠습니다.
2. AI 클로드로 홈페이지 코드 준비하기
이제 AI를 이용해 홈페이지 코드를 만들 차례입니다. 여러 AI 중에서도 코딩에 강점을 보이는 클로드(Claude)를 이용해 보겠습니다.
클로드 창을 매번 새로 열고 같은 설명을 반복해서 입력하는 것은 매우 비효율적입니다. 홈페이지처럼 여러 번에 걸쳐 수정하고 다듬어야 하는 작업이라면 더욱 그렇습니다. 이때 사용하는 기능이 바로 ‘프로젝트‘입니다.
📌 ‘프로젝트’란 무엇인가요?
클로드 화면 왼쪽의 ‘프로젝트’ 메뉴를 열고 제목과 간단한 내용을 입력한 뒤, ‘지침(Instructions)‘을 넣어 줍니다. 지침이란 클로드가 앞으로 이 작업을 진행하는 동안 계속 기억하고 있어야 할 정보(예: “나는 코딩 초보자다”, “홈페이지는 따뜻한 녹색 톤으로 만들어 달라” 등)를 미리 알려주는 기능입니다. 한 번 등록해두면, 이후 이 프로젝트 안에서 나누는 모든 대화에 이 지침이 자동으로 적용됩니다.
이후 홈페이지와 관련된 작업은 모두 이 프로젝트 안에서 진행하는 것을 권장합니다. AI가 이미 프로젝트의 상황을 기억하고 있기 때문에, AI가 생소한 듯한 답변을 내 놓지 않습니다.
3. 클로드에게 홈페이지 제작 요청하기
홈페이지 요청 글은 구체적일수록 결과물도 뛰어납니다. 그렇다고 처음부터 너무 장황하게 설명할 필요는 없습니다. 큰 틀만 설명한 뒤, 결과물이 나오면 클로드와 대화하듯 조금씩 고쳐 나가면 됩니다.
가장 중요한 것은 요청하는 문장의 마지막 표현입니다. 단순히 “…해줘”라고 하지 말고, 반드시 “…를 html로 만들어줘“라고 요청해야 합니다. 이 내용을 지침에 넣어 두면, 간단한 답변도 HTML로 만들어 줄 수 있기 때문에 피하는 것을 추천합니다.
⚠️ 프롬프트(요청 문장) 예시
이렇게 요청하면 좋습니다:
“내 이름은 ○○○이고, 최근 펴낸 책 《제목》을 소개하는 1장짜리 홈페이지를 html로 만들어줘. 책 표지 이미지, 소개 문구, 구매 링크 버튼이 들어갔으면 좋겠어. 전체적으로 차분한 녹색 톤이면 좋겠어.”아래와 같이 요청하면 결과물이 애매해질 수 있습니다:
“홈페이지 하나 만들어줘.” (너무 막연해서 원하는 결과와 다르게 나올 수 있습니다)
결과물이 마음에 들지 않는 부분이 있다면 “여기 색깔을 좀 더 밝게 해줘”, “버튼 위치를 가운데로 옮겨줘”처럼 구체적으로 계속 요청하면서 다듬어가면 됩니다.
수정에 수정을 거쳐 나온 최종 결과물을 다운로드해서 실행시키면, 컴퓨터 브라우저를 통해 실제 모습을 바로 확인할 수 있습니다.
4. 파일 이름을 반드시 index.html로 바꾸기
여기까지 준비를 마쳤다면, 다운로드한 파일의 이름을 index.html로 바꾸어 줍니다.
⚠️ 왜 꼭 index.html 이어야 할까요?
깃허브 페이지는 저장소 안에 있는 파일 중에서
index.html이라는 이름의 파일을 자동으로 홈페이지의 첫 화면(대문)으로 인식합니다. 다른 이름(예:home.html,page1.html)으로 저장하면, 홈페이지 주소로 접속했을 때 화면이 뜨지 않거나 오류가 나타날 수 있습니다. 그러니 이 단계는 절대 빠뜨리면 안 됩니다.
5. 깃허브(GitHub) 계정 만들기
이제 깃허브를 열 차례입니다. 아직 깃허브 계정이 없다면, 구글 이메일을 이용해 3분도 채 걸리지 않아 만들 수 있습니다. github.com에 접속한 뒤 우측 상단의 Sign up 버튼을 눌러 이메일, 비밀번호, 사용자 이름(username)을 순서대로 입력하면 가입이 완료됩니다.
💡 사용자 이름(username)은 신중하게 정하세요
가입할 때 정하는 사용자 이름은 나중에 여러분의 홈페이지 주소(
사용자이름.github.io)에 그대로 사용됩니다. 나중에 바꿀 수도 있지만 과정이 번거로우니, 처음부터 기억하기 쉽고 의미 있는 이름으로 정하는 것을 추천합니다.
깃허브에 로그인해 들어가면 아래와 같은 화면이 보일 것입니다.
6. 저장소(Repository) 만들기
위 화면과 같이 좌측의 ‘Create repository’ 버튼을 클릭합니다.
📌 저장소(Repository)란?
저장소는 여러분의 홈페이지 파일들을 담아두는 ‘폴더’라고 생각하면 쉽습니다. 이 폴더 안에
index.html파일을 넣어두면, 깃허브가 이를 홈페이지로 만들어 줍니다.
Repository name 항목에는 저장소의 이름을 입력합니다. 예를 들어 책을 홍보하기 위한 페이지를 만든다면 book처럼 알아보기 쉬운 이름을 입력하면 됩니다.
화면 앞쪽에 보이는 Owner는 여러분의 계정 이름(가입할 때 정한 username)이 자동으로 표시되는 부분입니다. 예시에서는 ‘당신의 친한 친구’라는 의미로 your7179라는 이름을 사용했습니다.
이 이름은 나중에 홈페이지 주소(your7179.github.io/book)에도 그대로 사용되니, 기억하기 쉬운 의미 있는 이름을 고르는 것이 좋습니다.
화면을 아래로 내리면 위와 같은 화면이 나타납니다. 반드시 Public(공개)으로 되어 있는지 확인한 뒤, 아래쪽의 Create repository 버튼을 클릭합니다.
⚠️ Public과 Private, 무엇이 다를까요?
Public(공개)은 누구나 저장소 내용을 볼 수 있는 설정이고, Private(비공개)은 나만 볼 수 있는 설정입니다. 깃허브 페이지 기능(무료 버전)으로 홈페이지를 인터넷에 공개하려면 반드시 Public으로 설정해야 합니다.
7. index.html 파일 업로드하기
저장소가 만들어지면 아래와 같은 화면이 나타납니다. 화살표가 가리키는 ‘uploading an existing file’을 클릭합니다.
클로드가 만들어 준 홈페이지 파일(index.html)을 위 네모 칸 안으로 업로드합니다.
컴퓨터에 있는 파일을 마우스로 끌어다 놓아도(드래그 앤 드롭) 되고, choose your files를 눌러 파일을 직접 선택해도 됩니다.
index.html 파일이 정상적으로 업로드된 것을 확인한 뒤, 화면 아래쪽의 Commit changes 버튼을 누릅니다.
📌 ‘Commit changes’란?
Commit(커밋)이란 ‘지금까지 한 변경 사항을 저장소에 최종 저장한다’는 의미입니다. 문서 작업할 때 ‘저장’ 버튼을 누르는 것과 비슷하다고 생각하면 됩니다. 이 버튼을 눌러야 방금 올린 파일이 실제로 저장소에 반영됩니다.
8. 깃허브 페이지(GitHub Pages) 켜기
파일 업로드가 끝나면 저장소 화면 상단 오른쪽에 있는 톱니바퀴(설정, Settings) 아이콘을 클릭합니다.
왼쪽 메뉴에서 Pages를 클릭하면 오른쪽에 화면이 나타납니다. 여기서 none으로 되어 있는 부분을 main으로 바꿔주고, 옆에 있는 Save 버튼을 눌러 줍니다.
⚠️ 이 단계를 빠뜨리면 홈페이지가 열리지 않습니다
파일을 업로드하는 것만으로는 홈페이지가 자동으로 열리지 않습니다. 반드시 Settings → Pages에서 main으로 설정하고 저장해야, 깃허브가 이 저장소를 실제 홈페이지로 만들어 줍니다.
9. 배포 상태 확인하고 주소 확인하기
다음은 저장소 상단의 Actions 탭을 클릭한 후, ‘pages build and deployment’ 항목을 눌러 진행 상황을 확인합니다.
💡 배포는 보통 1 ~ 2분 정도 걸릴 수 있습니다.
초록색 체크 표시(✔)가 뜨면 배포가 완료된 것입니다. 만약 홈페이지 주소로 들어갔는데 화면이 뜨지 않거나 404 오류가 나온다면, 아직 배포가 끝나지 않았을 가능성이 크니 1~2분 정도 기다렸다가 새로고침 해보세요.
배포가 완료되면 네모 박스 안에 주소가 나타나는데, 이 주소가 바로 여러분의 홈페이지 주소입니다. 주소를 클릭하거나 복사해서 인터넷 창(브라우저) 주소창에 붙여넣으면 아래와 같이 실제 홈페이지가 나타납니다. (아래 화면은 예시이며, 여러분의 화면은 다르게 나타납니다.)
10. 완성된 홈페이지, 그리고 다음 단계
화면 오른쪽에 보이는 박스는 홈페이지 메뉴인데, 이는 처음 클로드에게 요청할 때 조건을 넣어 만든 것이기 때문에 여러분의 결과물에는 없을 수도 있습니다. 이 페이지가 이제 여러분의 메인 홈페이지가 됩니다.
💡 다음 단계 — 서브 페이지 만들기
메인 페이지가 완성되었다면, 같은 방식으로 클로드에게 “자기소개 페이지를 html로 만들어줘”, “연락처 페이지를 html로 만들어줘”처럼 요청해 서브 페이지를 추가로 만들 수 있습니다. 만든 파일을 같은 저장소에
about.html,contact.html같은 이름으로 업로드한 뒤, 메인 페이지의 메뉴 버튼에 해당 파일 이름을 연결(링크)해주면 여러 장으로 이루어진 홈페이지도 얼마든지 만들 수 있습니다.
⚠️ 참고 — 나중에 파일을 수정하고 싶다면
저장소 안에서
index.html파일을 클릭한 뒤 연필 모양(✏️) 아이콘을 누르면 내용을 직접 수정할 수 있습니다. 다만 코드를 직접 손보는 것은 초보자에게 쉽지 않으니, 클로드에게 수정된 전체 코드를 다시 요청한 뒤 기존 파일을 덮어쓰는 방식(업로드 시 같은 이름으로 올리면 자동으로 교체됩니다)을 추천합니다.
⚠️ 참고 — 네이버 서치어드바이저에 등록하려면
구글 서치콘솔과 달리 네이버 서치어드바이저는 온전한 도메인 주소(예: wpbasic.kr)를 요구하기 때문에 지금까지 설명한 ‘사용자 이름.github.io/폴더명‘체계로는 등록이 되지 않습니다. 그럴때는 ‘사용자 이름.github.io‘에 index.html, sitemap.xml, robots.txt 등 루트에 필요한 파일을 올리시길 권장합니다.
결론
깃허브를 이용한 무료 홈페이지 만들기는 처음에는 낯설고 복잡해 보이지만, 실제로 따라 해보면 ① 클로드에게 html 코드 요청 → ② index.html로 이름 바꾸기 → ③ 깃허브에 저장소 만들기(네이버에 등록할 경우 루트에 올려야 함) → ④ 파일 업로드 → ⑤ Pages 설정 켜기, 이렇게 다섯 단계로 요약할 수 있는 간단한 과정입니다.
한 번 이 흐름을 익혀두면, 책 소개 페이지든 자기소개 페이지든 필요할 때마다 비용 부담 없이 나만의 홈페이지를 얼마든지 만들고 늘려갈 수 있습니다. 처음이 어렵지, 한 번 성공하고 나면 두 번째부터는 훨씬 수월하게 느껴질 것입니다. 오늘 배운 순서대로 천천히, 하나씩 따라 해 보시기 바랍니다.
