관리자 인증 확인 중...
B 또는 Space 로 복귀
‹
›
LUNA CODE LAB · CLASS II Week 9 — 사이트 통합 · 뮤비 임베드 + 멀티페이지 고1 · 성인 / 120분
1 / 9 📄 워크시트 ←
WEEK 09 · 2026 · CLASS II

사이트와 뮤비가
하나로

지난 주 만든 뮤비, 유튜브에만 있으면 아깝잖아요? — 오늘은 그 뮤비를 내 사이트 한 페이지로 박아넣고, 사이트를 멀티페이지로 확장. 한 콘텐츠가 두 매체에 살아있는 — 진짜 작가/뮤지션의 발행 방식.

Duration120 minutes
ToolHTML5 video · iframe · OG Meta
Output/music 페이지 + SNS 미리보기
Phase콘텐츠 발행 (3/3)
02 / Learning Goals⏱ 5분

오늘의 학습 목표

1
뮤비 페이지 신설
/music 라우트 추가 · 사이트 메뉴에 "Music" 항목 한 줄. 한 페이지 → 여러 페이지로.
2
video 태그 임베드
자체 호스팅 MP4를 video 태그로 임베드 · autoplay·muted·controls 옵션 이해.
3
멀티페이지 라우팅
index.html / about.html / music.html · 헤더 메뉴 링크 일관성. 어디서든 홈으로 돌아갈 수 있게.
4
SNS 공유 OG
Open Graph 메타로 카톡·트위터 공유 시 썸네일·제목 미리보기. 링크가 카드처럼 보이게.
03 / Concept⏱ 10분

하나의 콘텐츠가 두 매체에

뮤지션은 노래 하나를 — 유튜브 · 스포티파이 · 자기 홈페이지에 동시에 올린다. 같은 뮤비도 사이트 안에 있으면 '네 작품 전체의 일부'가 되고, 유튜브에만 있으면 '유튜브의 한 영상'이 된다. 오늘 우리는 뮤비를 사이트의 정식 코너로 승격시킨다.

🎬
W8 뮤비
완성된 MP4
+ 유튜브 업로드본
+
🏠
내 사이트
멀티페이지
(Home · About · Music)
=
📡
발행 완성
/music 페이지
+ SNS 공유 카드
페이지 1개 → 페이지 3-4개로 늘어나는 순간, '사이트'라는 개념이 진짜로 잡힌다. 헤더의 메뉴 클릭 → 다른 페이지 이동 → 다시 홈으로. 이 흐름이 만들어지면 그때부터 '내 콘텐츠 플랫폼'이다.
04 / Prompt Pattern⏱ 10분

video 태그 vs iframe

⚠️ iframe (YouTube/Vimeo)
<iframe src="youtube.com/embed/...">
</iframe>
장점: 용량 0 · 유튜브 인프라 활용 · 모바일 자동 최적화.
단점: 유튜브 로고·관련 영상 노출 · autoplay 제한 · 광고 가능성 · 디자인 통제 불가.
✓ video 태그 (자체 호스팅)
<video src="my-music-video.mp4"
  autoplay muted loop controls>
</video>
장점: 광고 X · 완전한 디자인 통제 · autoplay·muted 조합 OK.
단점: 파일 용량(50MB+) · Firebase Hosting 비용 약간 증가 · CDN 없으면 로딩 느림.
💡 오늘의 전략: 둘 다 시도. 사이트 메인엔 video 태그(자동재생 · 광고 없이 깔끔하게), 별도 페이지엔 YouTube iframe(공유·SEO·자막 기능)으로. 학생이 차이를 손으로 느껴봐야 함.
05 / Live Build · Step 1⏱ 15분

Step 1 — /music 페이지 신설

먼저 사이트가 한 페이지짜리가 아니라는 걸 코드로 선언. music.html 파일 만들고, 헤더 메뉴에 "Music" 링크 추가. 이게 멀티페이지의 시작.

1
Claude에게 멀티페이지 설계 요청
// Cursor 채팅창에 그대로 붙여넣기 "내 사이트를 멀티페이지로 확장하고 싶어. 현재: index.html 한 페이지뿐 원하는 구조: · index.html — 홈 (자기소개·하이라이트) · about.html — 작가 소개 (긴 글) · music.html — 뮤직비디오 페이지 (오늘 신설) 모든 페이지가 공통 헤더·푸터 가져야 함. 헤더 메뉴: Home · About · Music · Contact 현재 페이지는 메뉴에 .active 클래스로 표시. 먼저 music.html 골격만 만들어줘."
🎙
멘토 멘트 "멀티페이지라고 하면 어려워 보이는데 — 사실 HTML 파일이 여러 개 있는 것뿐이에요. 헤더는 그냥 복사·붙여넣기. 나중에 W11에서 컴포넌트화 배울 거예요. 지금은 일단 손으로 복사."
📁
학생 액션 (12분) Claude가 만든 music.html 저장 → 헤더에 "Music" 메뉴 추가 → index.html에서 Music 클릭 시 이동 확인 → 다시 Home으로 돌아오기까지 작동.
05 / Live Build · Step 2⏱ 15분

Step 2 — video 태그로 뮤비 임베드

W8에서 만든 MP4 파일을 사이트 폴더에 넣고, <video> 태그로 자동재생. autoplay만 쓰면 차단됨 — autoplay + muted 조합이 핵심.

2
music.html에 video 태그 박기
// 작업 폴더에 assets/video/my-mv.mp4 복사 후 <section class="hero-video"> <video src="assets/video/my-mv.mp4" poster="assets/img/mv-cover.jpg" autoplay muted loop playsinline controls> </video> </section> // 핵심 속성 4개 ✓ autoplay — 페이지 열리자마자 재생 ✓ muted — 음소거 (autoplay 차단 회피 필수!) ✓ loop — 끝나면 다시 처음부터 ✓ playsinline — 모바일 풀스크린 강제 X (인라인 재생)
💡
왜 muted 없이는 autoplay 안 되나?
// 브라우저 정책 (Chrome·Safari 2018~) "광고 영상이 갑자기 소리 터지는 거 막으려고 사용자가 클릭하기 전엔 소리 있는 비디오 자동재생 차단." → 해결: muted 함께 쓰면 자동재생 허용 → 사용자가 controls의 🔊 버튼 누르면 그때 소리
🎙
멘토 멘트 "내 사이트 들어가자마자 내 뮤비가 풀스크린으로 재생되는 그 순간 — 진짜 뮤지션 사이트 같죠. 인스타그램의 그 작가들 홈페이지 다 이렇게 만들어져 있어요."
🎬
학생 액션 (12분) W8 MP4를 assets/video/ 폴더로 복사 → music.html에 video 태그 박기 → 브라우저에서 새로고침 → 자동재생 작동 확인. 소리 없이도 멋있어야 합격.
05 / Live Build · Step 3⏱ 10분

Step 3 — YouTube iframe 비교

video 태그 옆에 — 같은 뮤비의 YouTube 임베드 버전을 한 번 박아본다. 두 가지 임베드 방식을 손으로 직접 비교해야 차이가 보임.

3
YouTube embed 코드 받기
// 1. 유튜브 영상 페이지 → 공유 → 퍼가기 <iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen> </iframe> // 2. 반응형 16:9 비율 유지 트릭 <div style="position:relative;padding-bottom:56.25%;height:0"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="..."></iframe> </div>
🎙
비교 포인트 "두 영상이 같은 페이지에 떠있죠? video 태그는 깔끔하고 광고 없고 자동재생. iframe은 유튜브 빨간 로고 박혀있고 끝나면 관련 영상 추천 떠요. 어떤 게 내 사이트답나? 정답은 없어요. 둘 다 갖다 쓰세요."
🆚
학생 액션 (8분) 유튜브에 W8 뮤비 업로드(미공개도 OK) → embed 코드 복사 → music.html 하단에 iframe 추가 → 두 임베드 방식 나란히 비교하며 캡처.
05 / Live Build · Step 4⏱ 10분

Step 4 — 가사·크레딧 추가

뮤비만 떠있으면 심심함. 그 아래에 가사 + 크레딧 + 다운로드 링크까지 박아야 진짜 발매 페이지. 음악 스트리밍 페이지의 표준 구성.

4
music.html 콘텐츠 인벤토리 프롬프트
// Claude에게 한 번에 다 알려주기 "music.html에 다음 섹션 차례로 넣어줘. 1. 비디오 영역 (이미 있음) 2. 곡 정보 · 제목: [내 곡 제목] · 발매일: 2026년 X월 X일 · 장르: [...] · 러닝타임: 0:45 (LP 1면) 3. 가사 (한 단 또는 2단) [W6에서 작사한 본문 그대로] 4. 크레딧 · 작사·작곡: [내 이름] · 보컬: ACE-Step (AI) · 영상: AfterEffects + AI 이미지 · 디자인: Claude Code 5. 듣기 링크 · YouTube: [URL] · Spotify: (예정) · 직접 다운로드: MP3 (선택)"
💡
디자인 톤 — 음반 자켓처럼
// 추가 디테일 프롬프트 "가사 섹션은 흑백 LP 자켓 분위기로: - 배경 #0E0E0E (거의 검정) - 가사 텍스트 #F4ECDE (크림) - 폰트 Noto Serif KR · 행간 1.8 - 가사 한 줄 한 줄 살짝 등장 fade-in - 크레딧은 가사 아래 작은 글씨 (12px)"
🎙
멘토 멘트 "가사 페이지 본 적 있죠? Genius·벅스·멜론. 거기 다 같은 구조예요. 비디오 + 가사 + 크레딧. 우리도 같은 그릇에 내 콘텐츠를 담는 거고요. 형식만 빌려와도 프로처럼 보여요."
🎵
학생 액션 (8분) W6 가사 + W8 크레딧 정리 → Claude에 콘텐츠 인벤토리 입력 → 검정 LP 자켓 톤 디자인 받기 → 가사가 비디오 아래 깔끔하게 떠있으면 합격.
05 / Live Build · Step 5⏱ 10분

Step 5 — SNS 미리보기 (Open Graph)

카톡으로 사이트 URL 보냈을 때 — 큰 썸네일 + 제목 + 설명이 카드로 뜨는 그 효과. <meta property="og:..."> 4줄이면 끝.

5
music.html <head>에 OG 메타 박기
// 모든 페이지 head에 (페이지별로 다르게) <meta property="og:title" content="[곡 제목] — [내 이름]"> <meta property="og:description" content="AI와 함께 만든 첫 싱글. 가사·뮤비·크레딧을 한 페이지에서."> <meta property="og:image" content="https://mysite.com/assets/img/mv-cover.jpg"> <meta property="og:url" content="https://mysite.com/music.html"> <meta property="og:type" content="video.other"> // 트위터·X 카드 추가 (선택) <meta name="twitter:card" content="summary_large_image"> // 검증 방법 1. 사이트 배포 (또는 ngrok로 임시 공개) 2. opengraph.xyz 또는 카톡 본인한테 URL 보내기 3. 큰 썸네일 + 제목 + 설명 카드 떴으면 OK ✓
🎙
왜 OG 메타가 중요한가 "같은 URL인데 OG 메타 있는 것 vs 없는 것 — 클릭율 3배 차이 나요. SNS에서 작은 텍스트 링크는 무시당하고, 큰 썸네일 카드는 손이 멈춰요. 발행하는 사람의 필수 디테일."
📲
학생 액션 (8분) 모든 페이지(index·about·music)에 OG 메타 박기 → opengraph.xyz에서 검증 → 본인한테 카톡으로 URL 보내서 큰 썸네일 카드 뜨면 성공 → 캡처 공유.
10 / Checkpoint⏱ 5분

통합 점검 4가지

✅오늘 잘 됐다면
  • /music 페이지 신설 + 헤더 메뉴 작동
  • video 태그 자동재생 (autoplay·muted·loop) 정상
  • YouTube iframe 도 한 번 시도 — 차이 비교 완료
  • 가사 + 크레딧 LP 자켓 톤으로 박힘
  • 카톡에 URL 보내면 OG 큰 카드 미리보기 뜸
  • 모바일에서도 비디오·메뉴 둘 다 안 깨짐
⚠️자주 막히는 부분
  • autoplay 안 됨 → muted 속성 빠뜨림 (필수!)
  • 모바일에서 풀스크린 강제 → playsinline 빠짐
  • MP4 너무 큼 (200MB+) → Handbrake로 압축 후 재업로드
  • 다른 페이지로 이동 안 됨 → href 경로 오타 (상대경로 vs 절대경로)
  • OG 미리보기 옛날 그대로 → 카톡 캐시 — 페북 디버거로 갱신
  • iframe 깨짐 (16:9 안 맞음) → padding-bottom:56.25% 트릭 사용
11 / Challenge⏱ 10분

발행 깊이 도전

🎚
비디오 스크럽 인터랙션 — 사용자가 마우스로 video 위 좌우 드래그하면 그 시점으로 점프. video.currentTime 조작.
난이도 ★
💡
비트별 가사 하이라이트 — 비디오 재생 시간에 맞춰 가사가 한 줄씩 노란 형광펜처럼 highlight. timeupdate 이벤트 사용.
난이도 ★★
🌐
다국어 자막 (한·영) — <track> 태그로 WebVTT 자막 파일 연결. 사용자가 CC 버튼으로 한국어/English 토글.
난이도 ★★★
12 / Student Gallery⏱ 5분

작년 친구들 /music 페이지

🎬
자동재생 뮤비
📜
가사 + 크레딧
🎚
스크럽 인터랙션
💡
비트별 가사 하이라이트
🌐
한·영 자막 토글
📲
카톡 OG 미리보기
📌 첫 학기 종료 후 학생 결과물 스크린샷을 여기에 채울 예정입니다.
13 / Next Week⏱ 5분

다음 시간 예고

WEEK 10 · COMING UP

Firebase Firestore +
방명록 · 댓글 · 폼

지금까지의 사이트는 정적 — 누가 와도 같은 화면. W10에서 데이터베이스(Firestore)를 붙여서 진짜 인터랙티브로 진화. 방명록·문의 폼·댓글이 실시간으로 작동.

PREPARE · 다음 주 준비물
  • 오늘 완성한 멀티페이지 사이트 (Firebase에 이미 배포된 상태)
  • Firebase 콘솔 접속 — Firestore 활성화 (수업 중 함께 진행)
  • 방명록에 받고 싶은 질문 한 줄 미리 생각 (예: "어디서 영감 받았어?")
  • 대신 답할 관리자 답변 1-2개 미리 준비 (사이트에 미리 박을 견본 댓글용)
  • W10 끝나면 → 친구가 사이트에 글 남기는 게 가능!