🎪 AI 놀이터 #3 — 나만의 홈페이지 실습 키트

GitHub Copilot으로 2시간 만에 나만의 홈페이지 뚝딱 만들기 2026년 8월 26일 (수) 19:30 ~ 21:30 · 마이크로소프트 13층 · 발표자 전대호

📁 파일 지도

파일	누가	언제	한 줄
`content.md`	🙋 수강생	이론 구간	오늘 손으로 쓰는 유일한 파일
`THEME.md`	🙋 수강생	60초	색 A/B/C 중 택1
`PROMPTS.md`	🙋 수강생	제작 구간	복붙할 프롬프트 15개
`DEPLOY.md`	🙋 수강생	배포 구간	Netlify + 가비아 절차
`TROUBLESHOOTING.md`	🙋 수강생	막혔을 때	우회로 모음
`.github/copilot-instructions.md`	🤖 Copilot	자동	기술 규칙 (열지 마세요)
`SPEC.md`	🤖 Copilot	자동	구조 명세 (열지 마세요)

🗣️ 오프닝 멘트: “파일이 7개지만 여러분이 쓰는 건 content.md 하나입니다. 나머지는 제가 미리 다 해뒀습니다.”

⏱️ 시간표 — 오프닝·이론 60분 / 제작 60분

시간	구간	모듈	쓰는 파일
19:30 ~ 19:40 (10분)	오프닝	00 과정 개요 · 완성본 데모	—
19:40 ~ 19:50 (10분)	이론	01 깃 · 깃허브 · 코파일럿	—
19:50 ~ 20:05 (15분)	이론+세팅	02 계정 · github.dev 인터페이스	`README.md` 훑기
20:05 ~ 20:20 (15분)	채우기	02b `content.md` 작성 + 테마 선택	`content.md` `THEME.md`
20:20 ~ 20:40 (20분)	제작 ①	03 뼈대 · 테마 · 메뉴	`PROMPTS.md` P1~P3
20:40 ~ 21:05 (25분)	제작 ②	04 커뮤니티 · 기록 · 음악 · 연락	`PROMPTS.md` P4~P7
21:05 ~ 21:20 (15분)	제작 ③	05 최종 점검 · Netlify · 도메인	P8 + `DEPLOY.md`
21:20 ~ 21:30 (10분)	마무리	QR 교환 · 링크드인 공유	—

오프닝·이론 50분 / 제작 60분 / 마무리 10분 = 120분

💡 핵심 설계: content.md 작성(15분)을 이론 구간 끝에 배치했습니다. 이걸 제작 구간에 넣으면 60분이 절대 안 맞습니다. 사전 안내 메일로 미리 채워오게 하면 오프닝·이론이 35분으로 줄고, 남는 15분을 제작 구간의 완충으로 돌릴 수 있습니다.

📊 채팅 횟수 예산 — 필수 8회

Copilot Free 채팅 = 월 50회

구간	프롬프트	횟수
제작 ①	P1 · P2 · P3	3
제작 ②	P4 · P5 · P6 · P7	4
제작 ③	P8	1
필수		8
예비	P9 ~ P15	최대 7
최악의 경우		15

여유 35회. 실수해도 안전합니다.

🗣️ 멘트: “50번 중에 8번만 씁니다. 왜 8번이면 되는지가 오늘의 진짜 수업입니다.”

🚀 수강생 시작 순서

README.md (이 파일) — 1분 훑기
THEME.md — 색 고르기 (60초)
content.md — 내 내용 채우기 (15분) ⭐
PROMPTS.md — P1부터 순서대로 복붙 (60분)
DEPLOY.md — 배포 (15분)
막히면 → TROUBLESHOOTING.md

🎓 강사 사전 준비 체크리스트

3일 전 — 수강생 안내 메일

GitHub 계정 생성 요청 (github.com/signup, 5분)
노트북 + 충전기 (태블릿·폰 불가)
링크드인 프로필 열어오기
홈페이지에 넣을 사진 1장
(선택) 도메인 결제수단 — 가비아 연 1~2만 원대
content.md 첨부 + “미리 채워오시면 30분 빨리 끝납니다”

전날 — 저장소 준비

템플릿 저장소 생성 → 이 7개 파일 업로드 → Template repository 로 설정
TROUBLESHOOTING.md A-3의 백업 저장소 주소 채워 넣기
P1~P7을 직접 실행해 결과물 확보 → Gist 7개 업로드
TROUBLESHOOTING.md B-2 표에 Gist 주소 7개 채워 넣기 ⚠️ 최소 P1은 필수
완성본 데모 사이트 배포 확인

당일 — 15분 전

현장 Wi-Fi로 github.dev 로딩 테스트
모바일 핫스팟 준비
데모 사이트를 다른 탭에 미리 열어두기
Netlify 대시보드 로그인 상태 확인

⚠️ 진행 리스크 대응

리스크	신호	대응	문서
Copilot 활성화 지연	모듈 02에서 5분 초과	백업 저장소 Fork	`TROUBLESHOOTING.md` A-3
무료 한도 소진	“요청 한도 초과”	모듈별 Gist 붙여넣기	B-2
도메인 구매 미완	결제수단 없음	`xxx.netlify.app` 으로 마무리	`DEPLOY.md` 1단계
DNS 전파 지연	도메인이 안 열림	정상. 수 분~하루 안내	`DEPLOY.md` E-3
Wi-Fi 불안정	github.dev 로딩 실패	모바일 핫스팟	`TROUBLESHOOTING.md` C-1

📐 설계 원칙 4가지

결과물이 먼저 있다 — 빈 화면에서 시작하지 않습니다. content.md도 예시가 채워진 상태로 줍니다.
설치는 0 — 브라우저만. GitHub · Copilot · Netlify 전부 웹에서 끝납니다.
프롬프트는 아껴 쓴다 — 월 50회 제약을 “한 번에 제대로 요청하는 법” 이라는 교육 주제로 정면에 세웁니다.
끝에 진짜 주소가 남는다 — .github.io 가 아니라 www.내이름.com.

🎯 오늘의 약속

“코드를 이해할 필요는 없습니다. 원하는 걸 설명할 수 있으면 됩니다.”

Git은 저장, GitHub는 보관, Copilot은 제작. 오늘은 이 셋만 씁니다.