02 · 대시보드 배포하기
01 · 대시보드 만들기에서 완성한 web-dashboard/index.html을 GitHub Pages에 게시합니다. Claude Desktop이 파일 준비와 Git 작업을 맡고, GitHub 웹에서는 저장소 생성과 Pages 게시 설정만 합니다. 실습 준비에서 설치한 Git을 사용합니다.
대시보드 만들기에 사용한 Claude Desktop Code 채팅창에서 /clear를 입력해 새 대화를 시작한 뒤 아래 실습을 진행합니다. 작업 폴더의 파일은 그대로 남으므로 같은 web-dashboard 폴더를 다시 엽니다.
1. 공개할 파일 점검
Claude Desktop Code → Local → Select folder에서 finance-ai-practice/web-dashboard를 엽니다. 제공된 공개 실습 자료로 만든 화면인지 확인합니다. index.html에는 분개 상세가 포함되며 Pages 방문자가 볼 수 있습니다. GitHub Pages 공개 범위
현재 web-dashboard 폴더에서 작업해 주세요. `..\.venv\Scripts\python.exe build_dashboard.py`를 실행해 최신 index.html을 만들고, 로컬에서 열리는 단일 HTML인지 확인해 주세요. 연도·월·계정·거래처 필터와 KPI 금액 한 건을 원본 분개장과 대조해 주세요.
게시용 publish 폴더를 따로 만들고 index.html만 복사해 주세요. 폴더가 이미 있거나 Git 저장소이면 덮어쓰기 전에 상태를 알려 주세요. 회사·고객 정보, 비밀번호, API 키, 실습용이 아닌 분개가 HTML에 없는지 확인하고, publish 폴더의 파일 목록과 공개할 내용을 보여 주세요. input, 엑셀, JSON, Python 소스, .venv는 게시용 폴더에 넣지 마세요. 아직 GitHub에는 올리지 마세요.publish 폴더에 index.html 하나만 있는지 직접 확인합니다. 공개하기 어려운 내용이 보이면 실습 자료로 다시 생성합니다.
2. GitHub에서 저장소 만들기
GitHub에 로그인한 뒤 대시보드의 New를 눌러 New repository 화면을 엽니다.
화면 1 · 새 저장소 만들기 시작
저장소 이름은 finance-dashboard-demo로 지정하고 Public을 선택합니다. 같은 이름이 있으면 다른 이름을 사용합니다. Add README는 켜고, .gitignore와 License는 추가하지 않은 뒤 Create repository를 누릅니다. 만들어진 저장소에는 README.md가 이미 있습니다. 저장소 화면의 HTTPS 주소(https://github.com/사용자명/저장소명.git)를 복사합니다. GitHub 저장소 생성 안내
화면 2 · 저장소 이름과 공개 설정 선택
3. Claude Desktop으로 HTML 올리기
복사한 HTTPS 주소를 아래 요청의 [저장소 주소]에 넣습니다. Claude가 표시한 게시 파일과 원격 주소를 확인한 뒤 Git 실행을 승인합니다. 처음 push할 때 Git for Windows의 인증 창이 열리면 본인이 브라우저에서 GitHub 로그인을 완료합니다. Git Credential Manager 안내
게시용 publish 폴더와 방금 만든 GitHub 저장소 [저장소 주소]만 사용해 주세요. 먼저 publish 폴더에 index.html 하나만 있고 Git 저장소가 아닌지, 그 옆에 publish-repo 폴더가 없는지 확인해 결과를 보여 주세요. 기존 Git 이력·원격이나 publish-repo 폴더가 있으면 덮어쓰지 말고 멈춰 주세요.
문제가 없으면 [저장소 주소]를 publish-repo 폴더로 복제해 주세요. 원격 main 브랜치에 README.md만 있는지 확인하고, 다른 파일이 있으면 멈춰 주세요. README.md와 기존 커밋은 그대로 두고 publish/index.html만 publish-repo 루트에 복사해 변경 내용을 보여 주세요. 커밋 작성자 정보가 없으면 제 GitHub 이름과 이메일을 확인받아 이 저장소에만 설정해 주세요. index.html만 커밋해 main에 push해 주세요. 계정 인증 창은 제가 직접 완료합니다. 비밀번호나 토큰을 대화창에 요청하지 마세요. 강제 push는 하지 마세요. 마지막에 원격 저장소의 README.md와 index.html, 새 커밋을 확인해 알려 주세요.4. Pages를 켜고 공개 화면 확인
GitHub 저장소에서 Settings → Pages를 엽니다. Build and deployment의 Source에서 Deploy from a branch를 선택합니다. Branch에서 main과 /(root)를 고른 뒤 Save를 누릅니다. 이후 같은 브랜치에 새 커밋이 올라오면 다시 게시됩니다. GitHub Pages 게시 원본 설정
Pages 화면에 표시된 공개 주소를 엽니다. Actions의 배포 작업이 완료됐는지, 공개 페이지에서 KPI 금액 한 건과 연도·월·계정·거래처 클릭이 로컬 화면과 같은지 직접 확인합니다. Claude의 성공 메시지만으로 게시 완료를 판단하지 않습니다.
아래 화면처럼 Pages 설정을 저장한 뒤 Actions → pages-build-deployment에서 완료 표시를 확인합니다. 실행 내역의 deploy 단계에 공개 주소가 표시됩니다.
화면 3 · Pages 게시 원본 설정
화면 4 · Actions 배포 완료 확인
화면 5 · deploy 단계에서 공개 주소 확인
5. 수정 후 같은 주소에 다시 배포
원본 web-dashboard/template.html의 제목을 "재무 손익 검토 대시보드"로 바꾸고, 집계 로직과 데이터는 그대로 두세요. build_dashboard.py를 다시 실행해 index.html을 생성하고, 로컬에서 제목·KPI·클릭 동작을 확인해 주세요.
새 index.html만 publish 폴더에 복사한 뒤, 앞에서 복제한 publish-repo의 원격 주소와 현재 브랜치를 확인하세요. 맞으면 publish/index.html을 publish-repo 루트에 복사하고 Git 변경 내용을 보여 주세요. index.html만 커밋해 같은 원격 저장소에 push해 주세요. README.md를 수정하거나 다른 파일을 추가하거나 강제 push하지 마세요. 같은 Pages 주소에서 새 제목이 보이는지, 배포 작업이 완료됐는지 확인해 결과를 알려 주세요.완료 확인
- GitHub 저장소 루트에는
README.md와 공개용index.html이 있다. - Pages 공개 화면에서 금액 한 건과 클릭 동작을 원본·로컬 화면에 대조했다.
- 제목 수정 뒤 같은 공개 주소에 새 결과가 반영됐다.
| 증상 | 확인할 곳 |
|---|---|
| Git 인증 창이 안 뜸 | Git 원격 주소가 HTTPS인지, Git Credential Manager가 설정됐는지 확인 |
push 실패 | 저장소 주소·본인 계정 권한·Git 오류 원문 확인. 강제 push로 해결하지 않음 |
| 공개 주소 404 | 저장소 루트의 index.html, Settings → Pages의 main·/(root), Actions 결과 |
| 이전 제목이 보임 | 새 커밋과 Actions 완료 여부, 브라우저 새로고침 |