← 홈으로 돌아가기

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

ressac•0 points•약 10시간 전•원본 링크 (evilmartians.com)

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

2025년에 이미 Chrome, Safari, Firefox에서 지원되고 있는 새로운 AV1 비디오 포맷을 활용해 사용자의 온라인 시청 경험을 즉시 개선해보세요. 이 짧은 가이드에서는 GIF를 AV1이나 H.264 동영상으로 대체해 20~40배 더 작은 파일로 만드는 방법도 함께 알아봅니다.

이미 오래전부터 AV1은 ‘미래의 비디오 코덱’으로 불리며, YouTube와 Netflix도 수년 전부터 이를 사용하고 있습니다.

저희 Evil Martians도 우리 랜딩 페이지에서 AV1을 이미 적용하고 있으며, 이 글에서는 새 비디오 포맷인 AV1을 어떻게 실제 서비스에 도입했는지, 그리고 최적의 인코딩 전략을 단계별로 설명해 드리겠습니다.

코덱과 컨테이너

먼저 큰 틀에서 보자면, 정적인 이미지에 대해서는 별 고민 없이 WebP, JPEG, PNG(모든 브라우저에서 지원) 같은 포맷을 쓰고, 더 최근 브라우저라면 구글이 개발한 AVIF처럼 더 압축률이 뛰어난 포맷을 실험적으로 써볼 수 있습니다.

이미지 파일과 달리, 동영상 파일에서는 조금 더 변수가 생깁니다. .mp4, .wmv, .webm, .mov 같은 확장자는 사실상 ‘컨테이너’를 가리킬 뿐입니다. 그리고 실제 동영상 파일에는 최대 세 종류의 형식이 섞이는데요:

  1. 비디오 코덱: 동영상을 압축하는 방법을 결정합니다. 웹에서 많이 쓰이는 비디오 코덱으로는 H.264, HEVC, VP9, 그리고 최근 AV1 등이 있습니다.
  2. 오디오 코덱: 소리를 압축합니다. 소리가 없는 영상이라면 필요 없습니다. 일반적으로 MP3, Opus, AAC가 많이 쓰입니다.
  3. 컨테이너: 비디오 스트림(특정 비디오 코덱으로 압축됨)과 오디오 스트림(특정 오디오 코덱으로 압축됨)을 담고, 자막이나 메타정보 같은 부가 요소를 추가할 수도 있습니다. MP4, MOV, WebM 같은 컨테이너가 대표적입니다.

즉, .mp4라는 확장자를 보면, MP4 컨테이너를 썼다는 것만 확실하지, 안에 어떤 코덱(H.264/AAC인지, AV1/Opus인지 등)이 들어갔는지는 전적으로 파일 제작자에게 달려 있습니다.

AV1 알아보기

AV1 비디오 코덱은 2018년 3월 첫 출시 이후, 이전 세대 코덱(HEVC/VP9, H.264/VP8)을 잇는 새로운 코덱으로 주목받고 있습니다.

[Tsahi Levent-Levi의 다이어그램]
(코덱 세대별 비교 자료)

저수준 트릭이 많이 들어간 덕분에, AV1은 기존 H.264/VP8 대비 30~50% 더 작은 파일을 만들어내고, HEVC 대비 30% 정도까지 더 줄일 수 있다는 장점이 있습니다. 다만 다음과 같은 단점이 있습니다.

  • 인코더가 더 복잡한 알고리즘을 쓰기에, 인코딩 속도가 느립니다.
  • Chrome과 Firefox는 지원하지만, iPhone 15/16과 MacBook M3 등의 최신 기기에서만 AV1 하드웨어 지원이 됩니다. 따라서 호환성을 생각하면 최소 2가지 이상의 파일(AV1과 H.264)은 준비해둬야 합니다.
  • AV1의 핵심 장점은 낮은 비트레이트에서도 고화질을 유지할 수 있어, 화질 손실 없이 파일 크기를 줄일 수 있다는 점입니다.

지금 AV1을 사용하는 방법

이제 웹용 고화질 AV1 콘텐츠를 만드는 과정을 살펴보겠습니다. 먼저 컨테이너는 MP4를 추천합니다. 오디오가 있다면 무료이면서 효율적인 Opus를 같이 쓰는 경우가 많습니다.

최대한 많은 브라우저에서 재생 가능하도록, 최소 두 가지(혹은 세 가지) 파일을 준비해야 합니다.

  1. 데스크톱 Chrome, Safari, Firefox, Edge, 그리고 iPhone 15의 모바일 Safari에서 재생될 AV1/Opus + MP4 (전체 사용자의 약 74%, 2023년 9월 기준)
  2. 구형 iPhone이나 macOS Safari 등 AV1을 지원하지 않는 브라우저용 H.264/AAC + MP4
  3. (선택) 구형 iPhone, macOS를 조금 더 나은 용량으로 지원하기 위해 HEVC 버전을 추가로 준비 (H.264보다는 작지만, AV1보다 크기는 좀 더 큼)

인코딩에는 명령줄 도구인 FFmpeg가 가장 많이 쓰이고, 재현 가능성과 자동화 측면에서 GUI 도구보다 장점이 큽니다.

FFmpeg 설치

  • macOS: Homebrew를 깔고 brew install ffmpeg
  • 리눅스: 배포판에서 제공하는 FFmpeg 패키지 설치
  • 윈도우: 공식 가이드 참고

이제 터미널에서 ffmpeg 명령을 쓸 수 있게 되었다면, 먼저 H.264 파일을 만들어봅시다(옛 브라우저용).

아래 명령에서 SOURCE.mov를 변환할 영상 경로로 바꾸세요.

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

결과물인 video.h264.mp4를 확인해보시고, 화질이 마음에 드는데도 파일 크기가 크다면 -crf 26이나 -crf 28처럼 CRF 값을 높여서 용량을 더 줄여볼 수 있습니다(품질도 떨어질 수 있으니 적정선을 찾는 데 다소 감각이 필요합니다).

이제 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
  • AV1은 별도의 무압축 소스가 없다면, 방금 만든 H.264 파일을 다시 변환해도 됩니다.
  • -qp 값을 조정해가며 원하는 화질과 용량 사이의 균형점을 찾으시면 됩니다. (값이 낮을수록 화질이 높고 용량이 큼)

만약 더 구형의 iPhone이나 macOS(HEVC만 지원하고 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

인코딩 옵션 이해하기

  • -i SOURCE.mov: 소스 동영상을 지정합니다.
  • -map_metadata -1: 기존 메타데이터(제작 툴 이름 등)를 제거합니다. 웹에서는 대체로 필요 없으니 제거해도 무방합니다.
  • -c:a libopus 또는 -c:a aac: 오디오 코덱 선택입니다. (음성이 없으면 -an으로 생략 가능)
  • -c:v libsvtav1: AV1 영상을 만들 때 사용할 코덱 라이브러리를 정합니다.
  • -crf 34 (H.264) / -qp 30 (AV1): 품질/용량 균형을 결정하는 옵션입니다. 숫자가 낮을수록 화질이 좋지만 용량이 큽니다.
  • -preset veryslow: 인코딩 시간을 더 늘리는 대신 용량을 더 줄일 수 있습니다(H.264).
  • -profile:v main: H.264 프로필을 “Main”으로 지정해, Safari 호환성을 확보합니다.
  • -pix_fmt yuv420p: 밝기는 원본 해상도를, 색상은 그 절반 해상도를 쓰는 방식(용량 절감 효과).
  • -movflags +faststart: MP4 파일 헤더를 파일 앞쪽으로 옮겨, 브라우저에서 스트리밍 재생을 빠르게 시작할 수 있게 해줍니다.
  • -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2": 영상 가로/세로 크기를 짝수로 맞춥니다(코덱에 따라 짝수 해상도만 지원하는 경우가 있어, 자동으로 짝수 단위로 스케일).
  • -tile-columns 2 -tile-rows 2: 인코딩 속도를 높이기 위한 옵션(압축 효율 소폭 감소).

브라우저별 재생 처리

이제 브라우저가 지원하는 코덱에 따라 맞는 파일을 재생하도록 해야 합니다.

다행히도 <source> 태그에 type 속성을 달면, 브라우저가 지원하는 형식만 골라 재생해줍니다. <video> 태그 사용법은 다음과 같습니다.

<video controls width="600" height="400">
  <source
    src="video.av1.mp4"
    type="video/mp4; codecs=av01.0.05M.08,opus"
  >
  <source
    src="video.h264.mp4"
    type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
  >
</video>

브라우저는 <source>를 위에서부터 읽고, 지원할 수 있는 첫 번째 형식을 재생합니다. type 속성에는 컨테이너(video/mp4), 비디오 코덱(av01.0.05M.08 또는 avc1.4D401E), 오디오 코덱(opus 또는 mp4a.40.2) 정보를 써 줍니다.

만약 구형 iPhone이나 Mac용으로 HEVC 버전을 추가했다면, AV1 바로 뒤에 넣으면 됩니다(AV1 가능 기기는 먼저 AV1을 쓰고, 안 되는 기기는 HEVC로 재생).

<source
  src="video.av1.mp4"
  type="video/mp4; codecs=av01.0.05M.08,opus"
>

<!-- AV1 다음에 HEVC를 추가 -->
<source
  src="video.hevc.mp4"
  type="video/mp4; codecs=hvc1"
>

<source
  src="video.h264.mp4"
  type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
>

보너스: GIF를 AV1이나 H.264로 변환하기

짧은 동영상을 웹에 삽입할 때, GIF를 쓰는 것은 현재로서는 비효율적입니다. GIF는 H.264나 AV1 같은 최신 비디오 코덱 대비 최대 20~40배 더 큰 용량을 차지하고, CPU와 배터리 소모도 더 많습니다. 필요하다면 FFmpeg를 사용해 GIF를 간단히 비디오 파일로 변환할 수 있습니다.

  • 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
  • GIF를 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

생성된 animation.h264.mp4와 animation.av1.mp4는 HTML에서 다음처럼 사용하면 됩니다(가로, 세로 크기, 경로는 적절히 바꿔주세요).

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

autoplay와 loop는 GIF 같은 자동 반복 재생 효과를 내고, muted는 오디오를 끕니다(자동 재생 시 소리가 나면 안 되므로). playsinline은 Safari에서 영상이 자동으로 전체 화면으로 넘어가는 것을 막아줍니다.

마무리하자면, AV1은 상당수의 최신 기기에서 이미 지원이 시작된 비디오 코덱이며, 품질과 용량 두 가지 측면에서 장점이 큽니다. 구형 기기를 위해서는 H.264나 HEVC 버전을 추가로 제공할 수 있고, <video>와 <source> 태그에서 HTML만으로 손쉽게 분기 처리가 가능하니 구현 부담도 크지 않습니다.

FFmpeg의 몇 가지 명령만 익히면, 방문자들에게 더 빠르고 품질 좋은 영상 경험을 제공할 수 있습니다. 실제 프로덕션에서 AV1을 이미 쓰고 있는 프로젝트도 있을 정도로, 사용에 큰 문제는 없었습니다(인코딩 시간이 길다는 점만 빼면요).

여기까지가 AV1에 대한 간단한 사용 가이드였습니다. 도움이 되었다면, 혹은 직접 사용해 본 경험이 있다면 언제든 공유해 주세요!

추가 참고

  • [Decoding AVIF: Deep dive with cats and imgproxy]
  • [Images done right: Web graphics, good to the last byte]

(위 링크들은 관련 주제의 글이니 참고만 해주시면 됩니다.)

댓글 (0)

댓글을 작성하려면 로그인이 필요합니다.

로그인하기