IMAGES.md — 이미지 현황과 촬영 목록
과정 페이지에 들어가는 이미지 관리표입니다. 강사용 문서입니다.
✅ 이미 만들어져 사이트에 붙어 있는 도해 9종
촬영이 필요 없는 개념 도해입니다. SVG라 확대해도 안 깨지고, 내용 수정도 가능합니다.
경로: assets/images/ai-playground-3/
| 파일 | 들어간 곳 | 내용 |
|---|---|---|
timeline.svg |
과정 목차 · 00 | 2시간 진행 타임라인 (오프닝·이론 50분 / 제작 60분 / 마무리 10분) |
m01-three-tools.svg |
01 | Git 저장 · GitHub 보관 · Copilot 제작 3분할 |
m01-flow.svg |
01 | 나 → Copilot → GitHub → 인터넷 흐름 |
m02-githubdev.svg |
02 | github.dev 세 영역 ①파일목록 ②편집창 ③Copilot Chat |
m02-chat-budget.svg |
02 | 채팅 50회 중 필수 8 · 예비 7 · 여유 35 게이지 |
m02-content-mapping.svg |
04 | 링크드인 프로필 → content.md 매핑 |
m02-suno-id.svg |
04 | Suno 공유 주소에서 곡 ID 골라내기 (/s/... → /song/곡ID) |
m03-themes.svg |
03 | 테마 A 미드나잇 / B 클린 화이트 / C 웜 샌드 미리보기 |
m05-dns.svg |
05 | Netlify 배포 3단계 + 가비아 DNS 레코드 2줄 |
수정이 필요하면 SVG 파일을 텍스트 편집기로 열어 글자만 바꾸면 됩니다.
✅ 촬영 완료된 스크린샷 5종 (모듈 02)
로그인 흐름 전체가 실제 화면으로 붙어 있습니다.
| 파일 | 화면 |
|---|---|
02-1_features-use-agent.png |
github.com/features/copilot — 초록 Use an agent 버튼 |
02-2_copilot-landing.png |
github.com/copilot 첫 화면 — 오른쪽 위 Sign in |
02-3_signin-modal.png |
Sign in to continue 창 — Sign in / Create a free account |
02-4_two-factor.png |
2단계 인증 — 6자리 코드 + Verify |
02-5_interface.png |
로그인 후 Copilot 화면 (사이드바 + 가운데 입력칸) |
⚠️
02-5_interface.png는 Copilot Max 계정으로 찍힌 화면이고 상단에 크레딧 안내 배너가 남아 있습니다. 수강생은 Free 플랜이라 화면이 조금 다를 수 있으니, 강의 중 한 줄로 짚어주거나 Free 계정으로 다시 찍어 교체하는 편이 안전합니다.
📷 직접 찍어야 하는 스크린샷
실제 서비스 화면(GitHub · Netlify · 가비아)이라 직접 촬영해야 합니다.
아래 파일명 그대로 assets/images/ai-playground-3/ 에 넣고,
해당 모듈 페이지에 아래 형식으로 한 줄 추가하면 됩니다.
⭐⭐ 최우선 — 이게 없으면 현장에서 막힙니다
| 파일명 | 모듈 | 무엇을 찍나 | 왜 |
|---|---|---|---|
05-3_netlify-build-empty.png |
05 | Netlify 빌드 설정 화면 — 두 칸이 비어 있는 상태 | 여기서 뭔가 채워 넣고 배포가 깨집니다 |
05-7_gabia-dns-filled.png |
05 | 가비아 DNS 레코드 입력창 — CNAME·A 두 줄이 채워진 상태 | 빈 양식이 아니라 완성 상태를 보여줘야 합니다 |
02-7_commit-push.png |
02 | github.dev 소스 제어 → 메시지칸 → Commit & Push (번호 ①②③) | Ctrl+S만 하고 왜 반영이 안 되냐는 질문이 반드시 나옵니다 |
00-1_demo-desktop.png |
00 | 완성본 데모 사이트 전체 화면 | 오프닝 첫 화면 |
⭐ 다음 우선순위
| 파일명 | 모듈 | 무엇을 찍나 |
|---|---|---|
00-2_demo-mobile.png |
00 | 데모 사이트 휴대폰 화면 |
00-3_demo-sections.png |
00 | 데모 전체 스크롤 캡처 + 섹션 6개 라벨 + “여기에 여러분 것” 화살표 |
02-6_github-dev.gif |
02 | 주소창 github.com → github.dev 바꾸는 장면 (GIF, 10초 이하) |
03-1_new-repo.png |
03 | New repository 화면 — 이름칸 + Public 체크에 빨간 박스 |
03-4_menu-scroll.gif |
03 | 메뉴 클릭 → 해당 섹션으로 이동 (체크포인트 GIF) |
04-1_upload-photo.gif |
04 | 사진을 편집기 파일 목록에 드래그 → 커밋 |
05-4_netlify-deployed.png |
05 | 배포 완료 + xxx.netlify.app 주소 발급 화면 |
있으면 좋음
| 파일명 | 모듈 | 무엇을 찍나 |
|---|---|---|
02-8_copilot-plan.png |
02 | Copilot 설정 페이지 — Free 활성 + 남은 횟수 위치 |
03-3_open-preview.png |
03 | 우클릭 → Open Preview |
04-2_sections-done.png |
04 | 완성된 소개·기록·음악 섹션 |
04-5_linkedin-share.png |
04 | 링크드인 공유 버튼 → 실제로 뜨는 공유창 |
05-6_gabia-search.png |
05 | 가비아 도메인 검색 결과 (“등록 가능”) |
05-9_dnschecker.png |
05 | dnschecker.org 조회 결과 |
🎨 촬영 규격 (통일해야 산만하지 않습니다)
- 해상도 1920×1080, 브라우저 확대 125% 로 캡처 (뒷줄에서 글자가 안 보입니다)
- 주석 빨간 테두리 3px + 노란 번호 원 ①②③ — 색은 이 둘만
- 테마 브라우저·편집기 전부 라이트 모드 (빔프로젝터에서 다크는 뭉갭니다)
- 마스킹 이메일·계정명·결제정보는 흐림 처리
- GIF 10초 이하 · 3MB 이하. 넘으면 연속 스크린샷으로 대체
- 파일명
모듈-순번_영문설명.png
🔁 재사용 자산 3개
timeline.svg · m01-three-tools.svg · m02-githubdev.svg — 이 셋은 모듈마다 다시 꺼내 쓰면
수강생의 방향 감각이 유지됩니다. 특히 timeline.svg 는 모듈 표지마다 띄워주세요.