IMAGES.md — 이미지 현황
과정 페이지에 들어가는 이미지 관리표입니다. 강사용 문서입니다.
경로: assets/images/ai-playground-3/
현재 상태 — 도해 34종 + 스크린샷 5종, 6개 모듈 전부 삽입 완료.
2026-09-01 개정 ① — 배포 시나리오를 Netlify → GitHub Pages로 교체하며 모듈 05 도해 5종을 재작성했습니다.
2026-09-01 개정 ② — github.dev 폐기, GitHub Copilot 웹 UI(github.com/copilot) 기준으로 전환.
아래 도해를 신규 작성·교체했고, 쓰이지 않는 5종은 _to_delete/ai-playground-3/ 로 옮겼습니다.
| 신규·교체 | 내용 |
|---|---|
m02-copilot-ui.svg (신규) |
github.com/copilot 화면 — 입력칸 · @ 드롭다운 · 첨부 아이콘 |
m02-attach-repo.svg (신규) |
@ 저장소 첨부 전/후 비교 · References 확인 |
m02-commit-push.svg (교체) |
Commit changes... → 다이얼로그 → Commit changes |
m02-chat-budget.svg (교체) |
필수 8회 · 숫자 한도 표기 삭제 |
m02-plan-select.svg (수정) |
Free 플랜 문구에서 월 50회 삭제 |
m03-add-file.svg (신규) |
Add file → Create new file / Upload files |
m03-new-file.svg (교체) |
파일명 index.html · 붙여넣기 · Commit changes... |
m04-drag-photo.svg (교체) |
Add file → Upload files → profile.jpg |
m01-flow.svg · m03-repo-form.svg (문구) |
Netlify → GitHub Pages |
timeline.svg (문구) |
제작 70분 · 모듈 03에 Pages 포함 |
폐기(_to_delete/) — m05-netlify-import.svg · m02-githubdev.svg · m02-githubdev-ui.svg ·
m03-url-swap.svg · 02-1_features-use-agent.png
추가로 찍어야 할 필수 이미지는 없습니다.
모듈별 이미지 목록
과정 목차 · 모듈 00 — 완성본 데모
| 파일 | 내용 |
|---|---|
timeline.svg |
2시간 진행 타임라인 (모듈 표지마다 재사용) |
m00-demo-sections.svg |
데모 페이지 6개 섹션 안내도 — 훑으며 번호 순서로 지목 |
m00-address.svg |
username.github.io vs www.내이름.com 대비 — 오늘의 진짜 상품 |
모듈 01 — 깃 · 깃허브 · 깃허브 코파일럿
| 파일 | 내용 |
|---|---|
m01-three-tools.svg |
Git 저장 · GitHub 보관 · Copilot 제작 3분할 |
m01-flow.svg |
나 → Copilot → GitHub → 인터넷 흐름 |
모듈 02 — Copilot 웹 UI 시작 · content.md 작성
| 파일 | 내용 |
|---|---|
02-2_copilot-landing.png |
📷 github.com/copilot 첫 화면 — 오른쪽 위 Sign in |
02-3_signin-modal.png |
📷 Sign in to continue 창 |
02-4_two-factor.png |
📷 2단계 인증 — 6자리 코드 + Verify |
02-5_interface.png |
📷 로그인 후 Copilot 화면 |
m02-plan-select.svg |
플랜 선택 — Free만 고르면 됩니다 (Pro 오선택 방지 · Free는 모델 자동) |
m02-copilot-ui.svg |
github.com/copilot 화면 — 입력칸 · @ 드롭다운 · 첨부 아이콘 |
m02-attach-repo.svg |
@ 저장소 첨부 전/후 비교 · References 확인 |
m02-commit-push.svg |
Commit changes... → 다이얼로그 → Commit changes 3단계 |
m02-chat-budget.svg |
필수 8회 예산 — 숫자 한도 표기 없음 |
모듈 03 — 저장소 · 키트 업로드 · 뼈대 · 소개 · 경력 (P1~P3)
| 파일 | 내용 |
|---|---|
m03-new-repo.svg |
오른쪽 위 + → New repository |
m03-repo-form.svg |
저장소 생성 폼 — 값이 채워진 상태 (Public 강조) |
m03-add-file.svg |
Add file → Create new file / Upload files |
m03-new-file.svg |
Create new file 화면 — 파일명 index.html · 붙여넣기 · Commit changes... |
m05-pages-enable.svg |
(모듈 03에서도 사용) Settings → Pages 켜기 |
m03-themes.svg |
테마 A 미드나잇 / B 클린 화이트 / C 웜 샌드 |
m03-prompt-anatomy.svg |
프롬프트 4요소 → 결과 화면 매핑 |
m03-copy-codeblock.svg |
코드블록 안쪽만 복사하기 |
m03-result-skeleton.svg |
첫 프롬프트 직후의 뼈대 — “80점이면 통과” |
모듈 04 — 커뮤니티 · 기록 · 음악 · 연락 (P4~P7)
| 파일 | 내용 |
|---|---|
m04-content-mapping.svg |
링크드인 프로필 → content.md 매핑 (모듈 02·04에서 사용) |
m04-linkedin-copy.svg |
링크드인에서 정보·경력 두 덩어리 복사 (모듈 02로 이동) |
m04-drag-photo.svg |
Add file → Upload files → profile.jpg (모듈 03으로 이동) |
m04-career-accordion.svg |
경력 아코디언 접힘 / 현재 회사만 펼침 (모듈 03으로 이동) |
m04-share-popup.svg |
공유 버튼의 원리 — 주소 한 줄을 새 창으로 |
m04-suno-id.svg |
Suno 공유주소 → 곡 ID → 커버·음원 주소 조립 |
m04-youtube-id.svg |
유튜브 주소에서 영상 ID 골라내기 |
m04-player-bar.svg |
카드 클릭 → 하단 재생바 |
m04-console-error.svg |
F12 → Console → 빨간 줄 복사 |
모듈 05 — 최종 점검 · 가비아 도메인 (Pages 켜기 도해는 모듈 03에서 사용)
| 파일 | 내용 |
|---|---|
m05-deploy-done.svg |
Your site is live at ...github.io/my-homepage/ (첫 결승선) |
m05-add-domain.svg |
Settings → Pages → Custom domain 등록 · Enforce HTTPS |
m05-gabia-search.svg |
가비아 도메인 검색 결과 · 확장자별 가격 |
m05-gabia-dns.svg |
⭐ 가비아 DNS 설정 — CNAME 한 줄이 채워진 완성 상태 |
m05-dns.svg |
배포 3단계 + CNAME 한 줄 요약 |
m05-qr.svg |
QR로 서로 방문하기 (마무리 화면) |
🗄️
m05-netlify-import.svg는 더 이상 쓰지 않습니다 (Netlify 시나리오 폐기). 페이지에서 참조하지 않으며,_to_delete/로 옮겼습니다.
📷 = 실제 스크린샷 · 나머지는 전부 SVG 도해
수정하는 법
SVG는 텍스트 편집기로 열어 글자만 바꾸면 됩니다. 확대해도 안 깨지고, 빔프로젝터에서도 선명합니다. 폭은 전부 880으로 통일돼 있습니다.
색 규칙 (수정 시 유지)
| 용도 | 색 |
|---|---|
| 강조 · Copilot | #7b5cff · 배경 #f4f2ff |
| GitHub · 정보 | #0078d4 · 배경 #eaf3fb |
| 성공 · 완료 | #1d9e75 · 배경 #e9f6f0 |
| 주의 · 하지 말 것 | #a32d2d · 배경 #fdf3f3 · 강조선 #e0483d |
| 팁 · 안내 | 배경 #fff8e1 · 글자 #8a6d1f |
실사 스크린샷으로 바꾸면 더 좋은 것 (선택)
도해로 충분히 진행되지만, 여유가 있으면 아래를 실제 화면으로 교체하면 현장감이 올라갑니다. 급하지 않습니다 — 없어도 강의는 굴러갑니다.
| 대체 대상 | 찍는 화면 |
|---|---|
m05-gabia-dns.svg |
본인 가비아 계정의 실제 DNS 설정 화면 |
m05-deploy-done.svg |
본인 저장소의 실제 Settings → Pages 배포 완료 화면 |
m03-repo-form.svg |
실제 New repository 폼 |
m02-copilot-ui.svg |
본인 계정의 실제 github.com/copilot 화면 |
촬영 규격 — 1920×1080 · 브라우저 확대 125% · 라이트 모드 ·
주석은 빨간 테두리 3px + 번호 원 ①②③ · 이메일·계정명·결제정보는 흐림 처리 ·
파일명 모듈-순번_영문설명.png
⚠️
02-5_interface.png는 Copilot Max 계정으로 찍힌 화면이라 상단에 크레딧 배너가 남아 있습니다. 수강생은 Free 플랜이라 화면이 조금 다를 수 있으니 강의 중 한 줄로 짚어주세요.