Mac에서 웹용 비디오 최적화

Mac에서 자르기, 크기 조정, H.264 MP4, faststart, 포스터 이미지, 로딩 동작, 실제 브라우저 재생 테스트로 웹용 비디오를 최적화하세요.

마케팅 페이지의 임베드 영상이 모바일에서 끊기는 이유는 히어로 MOV 파일이 120 MB이고 웹 친화적인 메타데이터가 빠져 있기 때문입니다. 브라우저는 다양한 형식을 재생할 수 있지만, 예측 가능한 임베드와 CMS 업로드에는 MP4에 H.264 코덱, 적절한 비트레이트, faststart 메타데이터가 여전히 가장 효과적입니다.

Core Web Vitals은 대용량 미디어를 성능 리스크로 간주합니다. 적절한 크기의 임베드는 페이지의 나머지 부분이 가볍더라도 LCP를 개선합니다.

웹 비디오의 요구사항

웹 배포는 마스터 파일을 아카이빙하거나 이메일에 파일을 첨부하는 것과 다릅니다.

요구사항	중요도
MP4 컨테이너	가장 넓은 HTML5 `<video>` 지원
H.264 비디오	Safari, Chrome, Edge에서 추가 플러그인 없이 재생
AAC 오디오	브라우저 디코더와 일치
faststart (`moov` atom 앞쪽 배치)	나머지 파일 다운로드 중에도 재생 시작
적절한 해상도	히어로는 1080p 또는 720p, 원본 4K 아님

VP9와 AV1과 같은 최신 코덱은 바이트를 절약하지만 인코딩 복잡성과 폴백(fallback) 요구사항이 추가됩니다. 멀티 코덱 파이프라인을 계획할 때 VP9과 AV1이란 을 참고하세요. 현재 단일 임베드에는 H.264 MP4가 실용적인 기본값입니다.

랜딩 페이지의 자동 재생 루프는 짧게 유지해야 합니다. 스토리텔링에 큰 차이가 없다면 1080p의 60초 히어로보다 720p의 15초 루프가 더 빠르게 로드됩니다.

QuickTime으로 웹용 압축

QuickTime Player는 단일 클립을 처리할 때 가장 빠른 내장 경로입니다.

소스 MOV 또는 MP4 파일을 엽니다.
페이지에 필요한 루프 또는 데모 세그먼트로 편집 → 자르기를 수행합니다.
파일 → 내보내기… → 데스크탑 히어로 비디오용 1080p, 배경 루프용 720p를 선택합니다.

QuickTime 내보내기는 브라우저에서 작동할 수 있지만 faststart 최적화가 누락될 수 있습니다. 느린 연결에서 진행 표시줄이 몇 초 동안 0에 머물러 있다면 아래 FFmpeg로 다시 mux하거나 인코딩하세요.

고품질 마스터 파일은 별도로 보관하세요. 웹용 복사본은 임베드 크기에서 선명하게 보이는 최소 파일이어야 합니다.

마케팅 사이트에서는 음소거 자동 재생이 일반적입니다. 음소거 시 방문자가 놀라지 않도록 오디오 스파이크가 없는 버전을 내보내세요.

faststart 적용 H.264 MP4 (FFmpeg)

Homebrew(brew install ffmpeg)를 통해 FFmpeg를 설치합니다.

균형 잡힌 웹 임베드용:

ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p \
  -c:a aac -b:a 128k -movflags +faststart web-hero.mp4

960 px 너비 칼럼용 4K 화면 녹화 파일을 다운스케일링:

ffmpeg -i input.mov -vf scale=1920:-2 -c:v libx264 -crf 24 -preset medium \
  -c:a aac -b:a 96k -movflags +faststart web-1920w.mp4

플래그	기본 의미
`-movflags +faststart`	점진적 다운로드를 위한 인덱스 이동
`-pix_fmt yuv420p`	Safari의 재생 문제 방지
`scale=1920:-2`	너비 1920, 높이가 2의 배수

좋은 MP4는 있지만 faststart가 없나요? 재인코딩 없이 다시 mux하세요:

ffmpeg -i input.mp4 -c copy -movflags +faststart output-faststart.mp4

임베드용 비트레이트 및 해상도

픽셀 수는 모니터 캡처 크기가 아닌 페이지의 CSS 너비에 맞춰야 합니다.

임베드 역할	시작 내보내기 설정
전체 너비 히어로 (~1200 px)	너비 1920 px, CRF 22~24
인라인 데모 (~800 px)	너비 1280 px
배경 루프, 오디오 없음	720p, 낮은 CRF 허용
작은 텍스트가 있는 제품 UI	너비 1080p 최소, 확대 시 확인

업로드 전 클립이 CDN 또는 CMS 용량 제한에 맞는지 추정하려면 동영상 파일 크기 계산기 를 사용하세요.

-crf 내보내기가 예산을 여전히 초과할 때 동영상 비트레이트란 를 읽어보세요. 대부분의 UI 데모에는 30 fps의 프레임 레이트면 충분하며, 60 fps는 마케팅 임베드에서 미미한 향상 대비 프레임 데이터를 두 배로 증가시킵니다.

게시 전 재생 테스트

방문자가 사용하는 동일한 네트워크에서 검증하세요.

개발자 도구에서 네트워크를 제한하여 Safari와 Chrome에서 MP4를 엽니다.
faststart 내보내기에서 재생이 1초 이내에 시작되는지 확인합니다.
그라디언트에서 눈에 띄는 압축이 있는지 확인하며 음소거 자동 재생 루프를 검사합니다.

증상	해결 방법
첫 프레임까지 지연 시간 김	faststart 추가 또는 비트레이트 낮춤
텍스트가 블록화됨	CRF 품질 높이거나 더 넓은 해상도로 내보내기
자르기 후 오디오 싱크 어긋남	스트림 복사 대신 오디오 재인코딩

포스터 이미지는 인지된 속도에 중요합니다. 경량 JPEG 포스터를 MP4와 함께 사용하여 비디오 버퍼링 중 레이아웃이 점프하지 않도록 하세요.

인코딩은 배포의 일부일 뿐입니다. 요소에 고유 차원을 제공하고, 일반적인 제어된 클립에는 preload="metadata"를 사용하며, 의미 있는 대화가 있을 경우 자막을 제공하고, 페이지가 움직임 없이 더 잘 작동할 때 자동 재생을 피하세요. 장식용 루프의 경우 사용자의 reduced-motion 선호도를 존중하세요.

<video width="1280" height="720" controls preload="metadata" poster="demo-poster.jpg">
  <source src="product-demo.mp4" type="video/mp4">
</video>

동일한 자산이 YouTube에도 올라가는 경우 Mac에서 YouTube용 동영상을 최적화하는 방법 과 비교해 보세요. 웹 임베드는 업로드 미자진(mezzanine) 파일보다 약간 낮은 비트레이트를 허용합니다.

일반 압축 워크플로우: Mac에서 동영상을 압축하는 방법 .

랜딩 페이지 리프레시에 여러 히어로 변형이 포함될 때 밤새 인코딩을 예약하세요. QuickTime에서 각 루프를 수동으로 내보내는 것보다 셸 스크립트의 FFmpeg 프리셋이 더 효율적입니다.

GetCompress 사용법

GetCompress는 Mac에서 MOV 및 MP4 임베드를 로컬로 준비합니다.

히어로 변형 폴더 전체에 web 1080p 또는 720p loop 프리셋을 적용합니다.
내보내기 전에 미리보기 플레이어에서 루프 포인트로 자릅니다.
CMS에서 업로드 시 메가바이트 제한을 부과할 경우 비디오에 목표 파일 크기를 설정합니다.
동일한 모션 레이아웃을 재사용하는 지역화 랜딩 페이지를 위한 일괄 내보내기를 수행합니다.
출시 전 제품 영상을 스테이징 동안에만 디스크에 보관합니다.

FFmpeg 원라인 명령문이 페이지 템플릿마다 늘어날 때 GetCompress는 더 쉬운 대안입니다. 동일한 출시 작업에 저장소에 무거운 PNG 스크린샷이 포함되면 이미지 프리셋과 함께 사용하세요.

CMS가 지원할 경우 폴드(fold) 아래 임베드를 지연 로드하세요. 히어로 MP4는 여전히 faststart가 필요하지만, 보조 클립은 방문자가 스크롤할 때까지 다운로드를 지연시킬 수 있습니다.