김현수

Copilot Technical Specialist

Monthly Copilot · July 2026 · 월간 코파일럿 7월호 · Share
Share
'내가 만든 HTML 결과물' 공유하기 by GitHub Pages
잘 다듬어진 HTML 파일이 있다고요? 저장소 만들고 → 올리고 → URL로 공유하면 끝!
Article Summary
Cowork로 멋진 HTML 결과물을 만들었어도, 그 파일이 내 PC 안에만 있으면 전달이 번거롭습니다. GitHub Pages를 쓰면 서버·비용·터미널 없이 브라우저 클릭 몇 번으로 공개 URL이 생기고, HTTPS까지 자동 적용됩니다. 이 글은 ① 저장소 만들고 Pages 켜기 → ② HTML 파일 작성·배포 확인 → ③ 기존 HTML 업로드·공유의 3단계로, 비개발자도 따라 할 수 있도록 정리했습니다.
Markdown의 한계 → HTML의 시각적 힘 → 공유의 번거로움 → GitHub Pages로 간단히 해결 — 4컷 인포그래픽

1. 왜 GitHub Pages인가 — 공유의 마지막 한 걸음

Markdown으로 지식을 모으고, Cowork로 '보는 결과물'인 HTML을 완성했습니다. 그런데 그 결과물이 로컬 폴더 안에만 있으면, 동료에게 보내려고 파일을 압축하고 메일에 첨부하고 "브라우저로 열어주세요"라고 설명해야 합니다. 공유의 마지막 단계가 의외로 가장 번거롭습니다.

이 지점을 GitHub Pages가 해결합니다. 정적 HTML 파일을 저장소에 올리면, GitHub가 이를 공개 웹사이트로 자동 게시합니다. 별도 서버를 빌릴 필요도, 결제 정보를 넣을 필요도, 터미널 명령을 외울 필요도 없습니다. 브라우저만 있으면 됩니다.

한 줄 요약
Markdown은 모으고, HTML은 보여주고, GitHub Pages는 전달합니다. 잘 만든 결과물도 공유되지 않으면 가치를 다 발휘하지 못합니다. URL 한 줄이 그 마지막 거리를 좁힙니다.

GitHub Pages가 좋은 세 가지 이유

특징 의미 장점
공개 저장소 무료 별도 서버·비용 없음 결제 정보 없이 바로 시작
HTTPS 기본 인증서 자동 발급·갱신 보안 경고 없이 안전하게 공유
1~2분이면 배포 저장 즉시 전 세계 공개 커밋하면 곧바로 링크 갱신

2. 한눈에 보는 흐름 — 내 파일이 URL이 되기까지

내 PC의 HTML 파일이 어떻게 공개 URL로 바뀌는지, 전체 경로를 먼저 그림으로 살펴보겠습니다. 핵심은 "저장소에 올리면 GitHub가 알아서 웹사이트로 게시한다"는 것입니다.

전체 파이프라인
내 HTML 파일
index.html
GitHub 저장소
main / docs/
GitHub Pages
*.github.io
동료 · 고객
링크 한 줄로 공유
내 HTML 파일을 GitHub 저장소(main/docs)에 올리면, GitHub Pages가 자동으로 *.github.io 주소에 게시합니다. 생성된 URL을 동료·고객에게 링크 한 줄로 공유하면 끝입니다.

3. 핵심 3단계 — 비개발자도 OK

이제 실제로 따라 해보겠습니다. 3-1부터 3-3까지 세 단계만 거치면, 내 HTML 결과물이 공개 URL로 바뀝니다. 아래 표로 전체 흐름을 먼저 본 뒤 차례로 진행하세요.

단계 작업 내용
1단계 저장소 · Pages 설정 GitHub에서 공개 저장소를 만들고 Settings → Pages에서 게시 소스를 지정
2단계 HTML 작성 · 배포 확인 docs/index.html을 만들어 커밋하고, 배포된 페이지가 열리는지 확인
3단계 HTML 업로드 · 공유 완성된 HTML 파일을 드래그 앤 드롭으로 올리고, 공개 URL을 공유
핵심 원리
GitHub Pages는 저장소의 특정 폴더(/docs 권장)를 웹 루트로 삼아 게시합니다. 그래서 폴더 이름과 파일 이름(index.html)만 규칙에 맞추면, 나머지는 GitHub가 자동으로 처리합니다.

3-1. 1단계 — 저장소 만들고 Pages 켜기

GitHub에 로그인한 뒤, 브라우저에서 아래 순서대로 클릭만 하면 됩니다. GitHub 계정이 없다면 먼저 무료로 가입하세요.

작업 순서
  1. 우측 상단 ＋ → New repository 클릭
  2. 저장소 이름 입력(예: home), Public 선택, Add a README 체크 후 Create repository
  3. 저장소 화면에서 Settings → Pages 이동
  4. Source: Deploy from a branch → Branch는 main, 폴더는 /(root) 또는 /docs 선택 후 Save (이 가이드는 /docs 기준)
완료 확인 · /docs 폴더 추천
Settings → Pages 상단에 "Your site is live at …" 메시지가 뜨면 성공입니다. URL은 https://(계정).github.io/(저장소)/ 형식입니다. 폴더를 /docs로 두면 웹사이트 파일과 다른 자료를 분리할 수 있어 관리가 편합니다. Jekyll 같은 정적 사이트 빌드 도구를 쓰지 않을 거라면, 해당 폴더에 .nojekyll 빈 파일을 추가하면 불필요한 빌드를 건너뜁니다.
실제 작업 화면 — 전체 6단계
우측 상단 + 버튼에서 New repository 클릭
STEP 1 · 우측 상단 ＋ → New repository 클릭
저장소 이름 입력, Public 선택, Add README 체크
STEP 2 · 저장소 이름 입력 · Public 선택 · Add a README 체크 후 생성
Settings → Pages 이동
STEP 3 · 저장소 화면에서 Settings → Pages로 이동
Branch를 main으로 선택
STEP 4 · Source: Deploy from a branch → Branch를 main으로 선택
폴더를 /docs로 선택
STEP 5 · 게시 폴더를 /docs로 선택
Save 버튼 클릭 후 Pages 활성화 확인
STEP 6 · Save 클릭 후 Pages 활성화 확인

3-2. 2단계 — HTML 파일 직접 작성하고 배포 확인

저장소에서 바로 HTML 파일을 만들어, Pages가 정상 동작하는지 먼저 확인합니다. 간단한 한 줄짜리 HTML이면 충분합니다.

작업 순서
  1. 저장소 Code 탭에서 Add file → Create new file 클릭
  2. 파일 경로에 docs/index.html 입력 후 간단한 HTML 코드 작성
  3. 하단 Commit changes 버튼 클릭
  4. Settings → Pages에서 "Your site is live" 메시지 확인 → Visit site
  5. 브라우저에서 배포된 페이지가 정상 출력되는지 확인
docs/index.html 
<!doctype html>
<html lang="ko">
  <head><meta charset="utf-8" /><title>My First Page</title></head>
  <body><h1>배포 성공! 🎉</h1></body>
</html>
파일 이름은 index.html · 배포는 잠시 기다리기
폴더에 접근하면 자동으로 index.html이 열립니다. 1단계에서 Pages Source를 /docs로 설정했다면, 파일 경로도 반드시 docs/index.html로 만들어야 합니다. 파일을 만들거나 업로드한 뒤 실제 사이트에 반영되기까지 수 초~수십 초가 걸리니, 커밋 직후 안 보이면 잠시 기다린 뒤 새로고침하세요.
실제 작업 화면 — 전체 5단계
Add file 메뉴에서 Create new file 또는 Upload files 선택
STEP 1 · 저장소 Code 탭에서 Add file → Create new file 클릭
docs/index.html 파일 경로 입력 및 HTML 코드 작성
STEP 2 · 파일 경로에 docs/index.html 입력 후 HTML 코드 작성
Commit changes 다이얼로그에서 커밋 메시지 입력 후 커밋
STEP 3 · Commit changes에서 커밋 메시지 입력 후 커밋
Settings → Pages에서 Your site is live 확인 및 Visit site 클릭
STEP 4 · Settings → Pages에서 "Your site is live" 확인 후 Visit site
브라우저에서 배포된 페이지 확인
STEP 5 · 브라우저에서 배포된 페이지가 정상 출력되는지 확인

3-3. 3단계 — 기존 HTML 파일 업로드하고 결과 공유

이미 완성된 HTML 파일(예: Cowork로 만든 웹 문서·슬라이드)이 있다면, 드래그 앤 드롭으로 저장소에 올리고 바로 공유할 수 있습니다.

작업 순서
  1. docs/ 폴더로 이동 → Add file → Upload files 클릭
  2. HTML 파일과 필요한 리소스를 화면으로 드래그 앤 드롭
  3. 커밋 메시지 입력 후 Commit changes 클릭
  4. 1~2분 후 배포된 URL로 접속해 결과 확인
공유 · 수정 요령
  • 잘 보이면 그 링크를 Teams · Outlook · 카카오톡 등에 그대로 붙여 공유하면 끝.
  • 수정이 필요할 땐 저장소에서 파일을 열어 연필 아이콘으로 편집 후 Commit — 즉시 반영됩니다.
안 보일 때 체크 3가지
  • Pages Source 폴더 설정이 실제 업로드한 폴더와 같은가
  • 파일 이름이 index.html인가 (대소문자 주의)
  • 배포 완료 전일 수 있음 — 1~2분 기다린 뒤 새로고침
직접 확인해 보세요 — 데모
아래는 위 가이드대로 실제 배포한 테스트 사이트입니다.
소스 코드: github.com/studydev/home
실제 작업 화면 — 전체 4단계
docs 폴더에서 Add file → Upload files로 HTML 파일 업로드
STEP 1 · docs 폴더에서 Add file → Upload files 클릭
드래그 앤 드롭으로 파일 추가 후 Commit changes 클릭
STEP 2 · 드래그 앤 드롭으로 파일 추가 후 Commit changes 클릭
배포된 웹 문서형 HTML 페이지 확인
STEP 3 · 배포된 웹 문서형 HTML 페이지 확인
배포된 슬라이드형 HTML 페이지 확인
STEP 4 · 배포된 슬라이드형 HTML 페이지 확인

4. 실습으로 더 깊이 익히기

GitHub Pages의 기본 개념을 먼저 이해하고, 실습으로 직접 따라 해 보세요. 이론 → 실습 순서로 진행하면 더 효과적입니다.

이론
GitHub Pages 기본 이론
Pages의 동작 원리·구조·핵심 개념을 빠르게 파악하는 이론 문서
실습
GitHub Pages 핸즈온 (한국어)
내 저장소에서 단계별 이슈를 따라가며 직접 배포해 보는 공식 실습
추천 학습 순서
  1. 먼저 이론 문서로 Pages의 동작 방식과 개념을 파악
  2. 이어서 핸즈온 실습으로 내 저장소에 직접 배포하며 체험

5. 고급 · 개발자용 (선택)

아래 항목은 필요한 경우에만 펼쳐 보세요. 기본 공유에는 필요 없습니다.

커스텀 도메인(docs.example.com) 연결
github.io 기본 주소 대신 회사·개인 도메인을 쓰고 싶다면, 저장소 Settings → Pages의 Custom domain에 도메인을 입력하고, DNS 공급자에서 CNAME(서브도메인) 또는 A 레코드(루트 도메인)를 GitHub Pages로 가리키게 설정합니다. 설정 후 Enforce HTTPS를 켜면 인증서가 자동 적용됩니다.
Git CLI로 로컬에서 작업하고 push로 배포
파일이 많거나 자주 수정한다면 로컬에서 작업하는 편이 빠릅니다. git clone으로 저장소를 받고, 파일을 수정한 뒤 git add . → git commit -m "메시지" → git push로 올리면 됩니다. push할 때마다 Pages가 자동 재배포되어, 브라우저 업로드보다 반복 작업이 수월합니다.
HTML이 많아졌을 때 — 네비게이션 자동 생성
공유할 HTML이 여러 개로 늘어나면 index.html을 목록(허브) 페이지로 만들어 각 결과물로 가는 링크를 모아두면 편합니다. 파일이 더 많아지면 Jekyll 같은 정적 사이트 생성기를 붙여 사이드바·목차를 자동 생성할 수도 있습니다. 다만 단순 공유 단계에서는 굳이 필요하지 않습니다.

6. 꼭 알아둘 제한 사항

GitHub Pages는 비상업적 · 정적 용도의 무료 서비스입니다. 아래 한도를 넘기지 않는 선에서 자유롭게 쓸 수 있습니다.

항목 한도 · 정책
저장소 / 게시 사이트 크기 각 1 GB 권장
월 대역폭 100 GB (soft limit)
빌드 횟수 시간당 10회 (custom Actions 사용 시 미적용)
배포 타임아웃 10분 초과 시 자동 중단
상업 · 전자상거래 · SaaS 용도 사용 금지
참고
GitHub Free 플랜은 공개 저장소에서만 Pages를 무료로 제공합니다. 비공개(Private) 저장소에 쓰려면 Pro·Team·Enterprise 플랜이 필요합니다. 또한 동적 백엔드(DB·API 서버)는 지원하지 않습니다. 자세한 내용은 GitHub Pages 제한 문서를 확인하세요.

자주 묻는 질문 (FAQ)

GitHub Pages로 HTML을 공유할 때 가장 자주 나오는 질문을 정리했습니다.

GitHub Pages는 무료인가요?
공개(Public) 저장소에서는 무료로 사용할 수 있고, 별도 서버나 비용 없이 HTTPS까지 자동 적용됩니다. 단, 비공개(Private) 저장소에서 Pages를 쓰려면 Pro·Team·Enterprise 등 유료 플랜이 필요합니다.
HTML 파일은 어디에 두어야 하나요?
docs 폴더 사용을 권장합니다. Settings → Pages에서 Source 폴더를 /docs로 설정하고, 파일 경로를 docs/index.html로 만들면 됩니다. 폴더에 접근하면 index.html이 자동으로 열립니다.
배포까지 얼마나 걸리나요?
커밋한 뒤 실제 사이트에 반영되기까지 보통 수 초~수십 초, 길어도 1~2분 정도 걸립니다. 커밋 직후 페이지가 안 보이면 잠시 기다린 뒤 새로고침하세요.
페이지가 안 보이면 어떻게 하나요?
세 가지를 확인하세요. (1) Pages Source 폴더 설정이 실제 업로드한 폴더와 같은지, (2) 파일 이름이 index.html인지(대소문자 주의), (3) 배포 완료 전일 수 있으니 1~2분 기다린 뒤 새로고침했는지 확인합니다.
만든 링크는 어떻게 공유하나요?
배포된 URL은 https://(계정).github.io/(저장소)/ 형식입니다. 이 링크를 Teams·Outlook·카카오톡 등에 그대로 붙여 넣으면 동료나 고객이 바로 열어볼 수 있습니다.
동적 기능(DB·API)도 사용할 수 있나요?
GitHub Pages는 정적(static) 호스팅 전용이라 데이터베이스나 API 서버 같은 동적 백엔드는 지원하지 않습니다. HTML·CSS·JavaScript로 동작하는 정적 결과물 공유에 적합합니다.
HTML을 특정 사용자에게만 허용하고 싶다면? (비밀번호 보호)
GitHub Pages는 공개 웹사이트라 자체적인 비밀번호 보호 기능이 없습니다. 특정 사용자에게만 공개하려면 같은 HTML을 Azure Static Web Apps로 배포하세요. GitHub·Microsoft Entra ID 로그인 기반 인증은 모든 요금제에서 기본 제공되고, Standard 요금제(SKU)에서는 다음이 추가됩니다.
  • 초대 기반 사용자 지정 역할 — Azure Portal의 Role management에서 허용할 사용자만 초대해 역할을 부여
  • 경로별 접근 제어 — staticwebapp.config.json의 routes에서 보호할 경로에 allowedRoles를 지정
  • 사용자 지정 인증 공급자·IP 제한 — 특정 Entra ID 테넌트로 제한하거나 허용 IP 대역만 접속 허용
이렇게 하면 허용된 사용자만 본인 계정 자격 증명(비밀번호)으로 로그인해야 HTML을 볼 수 있습니다. 단, GitHub Pages처럼 하나의 공통 암호를 공유하는 방식이 아니라, 사용자별 신원 기반 접근 제어입니다. 자세한 설정은 인증·권한 부여 문서를 참고하세요.

마무리

좋은 결과물을 만드는 일과 그것을 전달하는 일은 다른 문제입니다. 아무리 멋진 HTML도 내 PC 폴더에 머물러 있으면, 그 가치를 다 보여주지 못합니다. GitHub Pages는 그 마지막 거리를 URL 한 줄로 좁혀줍니다. 저장소 만들고, 올리고, 링크로 공유하세요. 서버도, 비용도, 터미널도 필요 없습니다. 당신의 결과물이 가장 쉬운 방법으로 세상과 만나는 길입니다.
참고 자료

You May Also Enjoy