어떻게 2025년에 AV1 코덱을 사용해서 웹 비디오 용량을 크게 줄일 수 있을까

번역으로 이동

1. 왜 AV1을 쓰는가?

• 기존 H.264, HEVC(=H.265) 대비 최대 30~50% 더 용량을 줄이면서 비슷한 화질을 유지.
• 이미 Chrome, Safari(최신 iOS/macOS), Firefox 등 주요 브라우저에서 지원 시작.
• 단점: 인코딩 시간이 길고, 일부 구형 기기에서는 AV1을 지원하지 않으므로 H.264(또는 추가로 HEVC) 파일도 함께 제공해야 함.

---

2. 준비: FFmpeg 설치

1. macOS:

   brew install ffmpeg
   

2. 리눅스: 배포판 패키지로 FFmpeg 설치
3. 윈도우: FFmpeg 공식 사이트에서 설치

---

3. H.264와 AV1 두 가지 파일 만들기

3.1 H.264 (구형 호환용)

ffmpeg -i SOURCE.mov \
  -map_metadata -1 \
  -c:a aac \
  -c:v libx264 \
  -crf 24 \
  -preset veryslow \
  -profile:v main \
  -pix_fmt yuv420p \
  -movflags +faststart \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
  video.h264.mp4

• SOURCE.mov 대신 원하는 소스 영상을 입력
• -crf 24를 조정(24 → 26 → 28)하면 화질↓, 용량↓

3.2 AV1 (최신 브라우저용)

ffmpeg -i SOURCE.mov \
  -map_metadata -1 \
  -c:a libopus \
  -c:v libsvtav1 \
  -qp 30 \
  -tile-columns 2 \
  -tile-rows 2 \
  -pix_fmt yuv420p \
  -movflags +faststart \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
  video.av1.mp4

• -qp 30 (값↓ = 화질↑ = 용량↑)
• 소스가 없을 경우, video.h264.mp4 → AV1 변환도 가능(화질 조금 손해)

(선택) HEVC 파일까지 만들기

ffmpeg -i SOURCE.mov \
  -map_metadata -1 \
  -c:a aac \
  -c:v libx265 \
  -crf 24 \
  -preset veryslow \
  -pix_fmt yuv420p \
  -movflags +faststart \
  -tag:v hvc1 \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
  video.hevc.mp4

• 구형 iPhone이나 Mac이 HEVC만 지원하는 경우 조금 더 용량을 줄이고 싶을 때

---

4. HTML에서 코덱별로 분기 처리하기

<video controls width="600" height="400">
  <!-- 최신 기기용: AV1 -->
  <source
    src="video.av1.mp4"
    type="video/mp4; codecs=av01.0.05M.08,opus"
  >
  <!-- (선택) HEVC 지원 기기용 -->
  <source
    src="video.hevc.mp4"
    type="video/mp4; codecs=hvc1"
  >
  <!-- 구형 기기용: H.264 -->
  <source
    src="video.h264.mp4"
    type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
  >
</video>

• 브라우저는 위에서부터 지원 가능한 형식을 찾아 재생
• type 속성에 컨테이너(MP4), 영상 코덱(av1/hvc1/avc1), 오디오 코덱(opus/mp4a.40.2) 명시

---

5. GIF를 영상으로 변환하기 (보너스)

• H.264 변환

  ffmpeg -i IMAGE.gif \
    -map_metadata -1 \
    -an \
    -c:v libx264 \
    -crf 24 \
    -preset veryslow \
    -profile:v main \
    -pix_fmt yuv420p \
    -movflags +faststart \
    -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
    animation.h264.mp4
  

• AV1 변환

  ffmpeg -i IMAGE.gif \
    -map_metadata -1 \
    -an \
    -c:a libopus \
    -c:v libsvtav1 \
    -qp 30 \
    -tile-columns 2 \
    -tile-rows 2 \
    -pix_fmt yuv420p \
    -movflags +faststart \
    -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
    animation.av1.mp4
  

• HTML에 넣어서 자동 반복처럼 쓰기:

  <video autoplay loop muted playsinline width="300" height="200">
    <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
    <source src="animation.h264.mp4" type="video/mp4">
  </video>
  

---

핵심 요점 정리

1. FFmpeg를 이용해 AV1(최신용), H.264(호환용) 최소 2가지 버전 제작.
2. (선택) HEVC를 추가하면 구형 Apple 기기에서 더 작은 용량 사용 가능.
3. HTML <video>에 <source>를 코덱별로 나열 → 브라우저가 자동 선택.
4. GIF 대신 AV1/H.264 MP4 사용 시 용량을 최대 수십 배 줄이고 성능도 개선됨.
5. -crf(H.264), -qp(AV1) 값을 조절해 품질/용량 균형점을 찾기.
6. 인코딩이 오래 걸릴 수 있으니 짧은 영상 먼저 시도 후 최적화.