(비개발자 CPA가 AI와 함께 감사 도구를 만든 이야기) 4편: GitHub Pages로 무료 배포하기

4편: GitHub Pages로 무료 배포하기

코드 한 줄 없이 웹앱 배포하기 – GitHub Pages 활용법

 

만든 도구를 다른 사람과 공유하려면 "배포"가 필요하다. 서버를 빌려서 운영하면 비용이 들지만, 정적 웹사이트(HTML + CSS + JS)라면 GitHub Pages를 쓰면 무료다.

GitHub Pages란?

GitHub 저장소에 올린 HTML 파일을 웹사이트로 자동 호스팅해주는 서비스다. 별도 서버 설정 없이, 저장소에 코드를 push하면 바로 웹에서 접속할 수 있다.

배포 과정

[1단계] https://github.com 에서 무료 계정을 만든다.

[2단계] New repository → 이름 지정 → Create

[3단계] 파일 구조 만들기

하나의 저장소에 여러 앱을 넣을 수 있다:

00-apps/
├─ index.html          ← 메인 포털 페이지
├─ CNAME               ← 커스텀 도메인 설정 파일
├─ jet/                ← 저널엔트리 테스트 앱
│  ├─ index.html
│  ├─ css/style.css
│  └─ js/
│     ├─ app.js
│     ├─ dataProcessor.js
│     ├─ validation.js
│     ├─ anomalyDetector.js
│     └─ reportGenerator.js
├─ sampling/           ← (향후) 표본추출 도구
└─ analytics/          ← (향후) 재무분석 도구

앱을 폴더별로 분리하면 하나의 도메인 아래에서 경로로 구분하여 여러 도구를 운영할 수 있다:

app.00.kr/          → 메인 포털
app.00.kr/jet/      → 저널엔트리 테스트
app.00.kr/sampling/ → 표본추출 (향후)

[4단계] 저장소 Settings → Pages → Source: Deploy from a branch → main / root → Save

[5단계] https://[유저명].github.io/[저장소명]/ 으로 접속 확인