AI랑 같이하는 코딩

19일차에서는 완성한 웹앱을 GitHub Pages로 배포합니다. 이제 로컬에서만 보던 프로젝트를 링크로 공유할 수 있게 되며, "만드는 단계"에서 "보여주는 단계"로 전환되는 중요한 시점입니다.

초보자에게 배포는 어렵게 느껴질 수 있지만, 저장소 생성 → 파일 업로드 → Pages 설정 순서만 지키면 안정적으로 완료할 수 있습니다.

1. 오늘 만들 기능 소개

오늘 목표는 GitHub 저장소를 만들고 웹앱 파일을 업로드한 뒤, GitHub Pages를 활성화해 실제 접속 가능한 배포 URL을 얻는 것입니다. 이 링크를 통해 다른 사람도 내 웹앱을 바로 확인할 수 있습니다.

2. AI에게 요청할 프롬프트

배포 과정이 익숙하지 않다면 AI에게 체크리스트 형태로 요청하면 좋습니다.

하루 관리 웹앱을 GitHub Pages로 배포하고 싶어.
초보자 기준으로 저장소 생성, 파일 업로드, Pages 설정, 배포 링크 확인까지
단계별 체크리스트로 안내해줘.
실수하기 쉬운 포인트도 같이 알려줘.

3. 코드 작성과 실행 과정

먼저 GitHub에서 새 저장소를 만들고 `index.html`, `style.css`, `script.js` 등 배포 파일을 업로드합니다. 이후 저장소 `Settings > Pages`에서 배포 브랜치(보통 `main`)와 루트 경로를 선택해 저장합니다. 잠시 후 생성된 Pages URL에 접속해 화면이 정상 표시되는지 확인합니다.

4. 코드 이해하기

오늘 핵심은 "배포 가능한 파일 구조"입니다. GitHub Pages는 `index.html`을 시작점으로 읽기 때문에, 경로가 꼬이거나 파일명이 다르면 화면이 비어 보일 수 있습니다.

배포는 기능 개발의 끝이 아니라 검증의 시작입니다. 실제 URL에서 버튼, 저장, 반응형 UI까지 다시 점검해야 진짜 완료입니다.

5. 오늘 만든 내용 정리

오늘은 웹앱을 GitHub Pages에 배포해 공유 가능한 링크를 만들었습니다. 이로써 프로젝트가 로컬 실습 단계를 넘어 실제 서비스 형태에 가까워졌습니다. 다음 20일차에서는 전체 기능을 리뷰하고 확장 아이디어를 정리하며 챌린지를 마무리하겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기