01
video 태그 vs iframe — 언제 뭐 쓸까?
⏱ 5분
내 영상 직접 호스팅 = video 태그 / YouTube·Vimeo 영상 = iframe
| 구분 |
<video> 태그 |
<iframe> (YT/Vimeo) |
| 파일 위치 |
내 서버 / Storage |
YouTube · Vimeo 서버 |
| 용량 부담 |
내가 다 부담 (Storage 비용) |
YouTube가 다 부담 |
| 광고 |
없음 |
YouTube 광고 붙음 |
| 컨트롤 |
CSS로 완전 커스텀 |
제한적 (URL 파라미터) |
| SEO |
내 사이트에 적립 |
YouTube에 적립 |
| 추천 용량 |
< 50MB (단편/루프) |
제한 없음 (장편 OK) |
02
video 태그 옵션 치트
REF
기본 형태
<video src="mv.mp4" poster="cover.jpg" controls muted loop playsinline>
</video>
controls
재생 컨트롤 바 표시 (재생/일시정지/볼륨/전체화면). 빼면 안 보임
autoplay
자동 재생. 단, muted 없으면 모바일에서 차단됨
muted
음소거로 시작. autoplay와 짝꿍
loop
무한 반복. 히어로 배경 영상용
poster
재생 전 보일 썸네일 이미지 경로 (= 정지 화면)
playsinline
iOS에서 전체화면 강제 진입 방지. 인라인 재생 필수 옵션
preload
none/metadata/auto — 페이지 로딩 시 얼마나 미리 받을지
03
YouTube / Vimeo 임베드 코드
REF
YouTube
<iframe width="560" height="315"
src="https://www.youtube.com/embed/"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
Vimeo
<iframe src="https://player.vimeo.com/video/"
width="640" height="360"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen></iframe>
04
Open Graph 메타 5종 — 링크 미리보기
SEO
카톡/페북/슬랙에 링크 보낼 때 뜨는 이미지+제목+설명. <head> 안에 박기.
05
카톡 · 인스타 · 페북 미리보기 점검
CHECK
🔵 Facebook Sharing Debugger (developers.facebook.com/tools/debug) — URL 넣고 "Scrape Again" 클릭, 이미지 뜨는지
⚫ X(Twitter) Card Validator (cards-dev.twitter.com/validator) — 트위터 카드 형태 미리보기
🟡 카톡 — 나에게 보내기로 URL 전송 → 썸네일 뜨는지. 안 뜨면 og:image 절대경로(https://)인지 확인
📷 Instagram — DM으로 URL 보내기, 자동으로 카드 떠야 함. 안 뜨면 24시간 캐시 대기
💼 LinkedIn Post Inspector (linkedin.com/post-inspector) — 비즈니스 공유용
🖼 OG 이미지 크기 = 1200 × 630 px (Facebook 권장), 1.91:1 비율
📝 og:title 60자 이내 · og:description 160자 이내 (잘림 방지)
✨ 친구 3명에게 카톡으로 URL 보내서 썸네일 뜨는지 확인
이번 주에 나오는 용어들. 처음 듣는 게 정상입니다. 막힐 때 사전처럼 펴서 보세요.
비디오 태그<video>
HTML에 영상을 박는 태그. 자체 파일 재생용. 예: 내 사이트에 만든 뮤비 직접 재생.
아이프레임iframe
다른 사이트의 페이지를 내 페이지 안 박스로 삽입. 예: 유튜브 영상을 내 사이트에 박을 때.
자동재생autoplay
페이지가 열리는 순간 영상이 자동으로 재생. muted와 같이 써야 작동. 예: 랜딩 페이지 배경 영상.
음소거muted
소리 끄기. 브라우저는 소리 켜진 자동 재생을 금지하므로 필수. 예: 인스타 영상이 처음엔 무음인 이유.
컨트롤controls
재생·정지·볼륨 버튼 표시 옵션. 영상에 기본 UI가 붙음. 예: 유튜브 플레이어의 빨간 진행 막대.
루프loop
영상이 끝나면 처음부터 자동 반복. 예: 인스타 릴스가 계속 돌아가는 이유.
포스터poster
영상 재생 전에 보이는 미리보기 이미지. 로딩 중 검은 화면 방지. 예: 유튜브 썸네일 같은 역할.
오픈그래프Open Graph · OG
SNS에 링크 붙일 때 보이는 미리보기 정보(제목·이미지·설명). Facebook이 시작. 예: 카톡에서 링크 미리보기 뜨는 원리.
OG 태그og:title · og:image
OG 정보를 HTML head에 넣는 태그. 카톡·페북·트위터 공통. 예: og:image = 카톡 미리보기 그림 지정.
트위터 카드Twitter Card
트위터(X) 전용 미리보기. summary(작음)·summary_large_image(큼) 두 종류. 예: 큰 사진 카드가 클릭률 2배.
임베드 코드Embed Code
다른 사이트에 박아 넣을 수 있게 만든 HTML 코드 조각. 예: 유튜브 "공유 → 퍼가기"의 그 코드.
CDNCDN
Content Delivery Network. 영상·이미지를 세계 여러 서버에서 빠르게 전송. 예: 한국 사용자는 한국 서버에서 받아 빠름.