Frontend Backend

웹 개발자를 위한 비디오 스트리밍 기초

2024. 07. 15 정연희 5 min read

1. 비디오 압축(Compression)의 개념

  • 개요: 비디오 데이터 내 물리적·시각적 중복성을 제거하여 파일 용량 및 전송 대역폭을 축소하는 기술.
  • 공간적 압축 (Spatial / Intra-frame Compression):
    • 단일 프레임 내부에서 인접 픽셀 간의 시각적 유사성을 분석해 중복 제거.
    • 이산 코사인 변환(DCT) 등 수학적 알고리즘을 사용해 고주파 성분(디테일) 제거 및 저주파 성분(단색 영역) 위주 저장.
  • 시간적 압축 (Temporal / Inter-frame Compression):
    • 연속된 프레임 간의 움직임 변화량 정보만을 추출해 데이터 중복 제거.
    • 움직임 벡터화(Motion Estimation) 및 모션 보상(Motion Compensation)을 수행하고 프레임 간 차이값(Residual Data)만 기록.

2. 인코딩(Encoding)과 디코딩(Decoding)

  • 인코딩 (Encoding):
    • 카메라 등 캡처 디바이스에서 획득한 원본 픽셀 데이터(RGB, YUV)를 전송·저장 목적 규격에 맞추어 압축 및 변환하는 과정.
    • 하드웨어 인코더(GPU 내장 가속 엔진) 또는 소프트웨어 인코더(CPU 라이브러리)를 활용해 대용량 원본 파일 용량을 대폭 축소.
  • 디코딩 (Decoding):
    • 전송받은 압축 비트스트림 데이터를 해석하여 화면에 출력 가능한 원본 픽셀 데이터(Raw Frame)로 복원하는 과정.
    • 하드웨어 디코더 등을 통해 압축 해제된 이미지 프레임을 모니터 디스플레이 장치에 실시간 출력.

3. 프레임의 종류: I-Frame, P-Frame, B-Frame

  • I-Frame (Intra-coded Frame):
    • 이전 또는 이후 프레임을 참조하지 않고 독자적으로 디코딩 가능한 독립 프레임.
    • 공간적 압축만 적용하여 데이터 크기가 가장 크며, 스트리밍 최초 진입 및 임의 구간 탐색(Seeking)의 기준점으로 작용.
    • I-Frame과 다음 I-Frame 사이의 주기를 GOP(Group of Pictures)로 정의.
  • P-Frame (Predicted Frame):
    • 이전 I-Frame 혹은 P-Frame만을 참조하여 변화가 발생한 모션 벡터 및 차이값만 기록하는 프레임.
    • I-Frame 크기 대비 10%~30% 수준으로 데이터 크기 축소 가능.
  • B-Frame (Bi-directional Predicted Frame):
    • 이전 프레임과 이후 프레임을 양방향으로 동시에 참조하여 예측 성능을 극대화한 프레임.
    • 압축률이 가장 높고 용량이 가장 작으나, 미래 프레임을 수신 대기하는 과정에서 버퍼링 지연(Latency)이 발생하여 WebRTC 등 실시간 전송에는 부적합.

4. 색공간과 포맷: RGB vs YUV (YUYV)

  • 개요: 디스플레이 패널의 RGB 색상 정보를 전송 효율을 향상시키기 위해 YUV(또는 YCbCr) 데이터로 표현하는 기법.
  • YUV 채택 요인:
    • 밝기(Luminance) 변화에 민감하고 색상(Chrominance) 변화에 둔감한 인간 시각 체계의 특성에 대응.
    • 밝기 성분(Y)과 색상 성분(U, V)을 분리하여 인간이 인지하기 힘든 색상 해상도를 우선 압축.
  • 크로마 서브샘플링(Chroma Subsampling) 규격:
    • 4:4:4: 압축을 수행하지 않고 전 픽셀의 Y, U, V 데이터를 전송하는 포맷.
    • 4:2:2 (YUYV): 가로 픽셀 2개당 1셋의 색상(U, V) 데이터를 공유하는 포맷. 산업용 카메라 등에서 활용.
    • 4:2:0 (NV12, I420): 가로 2픽셀 및 세로 2픽셀(총 4개 픽셀) 영역이 1셋의 색상 정보를 공유하는 포맷. 미디어 스트리밍 표준으로 널리 사용.

5. 컨테이너 포맷 (Container Formats)

  • 개요: 압축된 비디오 스트림, 오디오 스트림, 자막, 메타데이터 등을 하나의 파일로 패키징하는 규격.
  • 코덱과의 차이: 코덱은 압축 방식(알고리즘)이며, 컨테이너는 이를 결합하여 담아두는 파일 포맷.
  • 주요 규격:
    • MP4 (MPEG-4 Part 14): 높은 호환성을 가진 범용 컨테이너 포맷으로 H.264/AAC 코덱 조합에 널리 활용.
    • WebM: 구글이 개발한 오픈소스 표준 컨테이너 포맷으로 VP9/AV1 및 Opus 오디오 코덱과 결합하여 웹 브라우저 네이티브 재생에 최적화.

6. 스트리밍 프로토콜 (Streaming Protocols)

  • 개요: 압축된 미디어 데이터를 네트워크를 통해 클라이언트로 전송하는 통신 규약.
  • HTTP 기반 세그먼트 전송 (HLS / MPEG-DASH):
    • 미디어를 수 초 분량의 파일(Segment)로 분할하여 표준 HTTP 웹 서버 및 CDN 캐싱을 통해 전송하는 기법.
    • 서버 확장성이 우수하지만 물리적인 세그먼트 생성 및 캐싱 과정으로 인해 수 초 이상의 재생 지연(Latency) 발생.
  • 초저지연 전송 (WebRTC):
    • UDP/SRTP 기반의 실시간 양방향 통신 표준 프로토콜.
    • 미디어 데이터를 실시간 패킷 단위로 직접 전송하여 1초 미만의 지연 시간을 보장하며, 실시간 화상회의 및 제어 시스템에 사용.

7. 비트레이트 및 적응형 스트리밍

  • 비트레이트 (Bitrate):
    • 초당 전송 및 처리하는 비디오 데이터 양(bps). 대역폭 사용량과 최종 화질을 결정하는 주요 변수.
    • CBR (Constant Bitrate): 데이터 전송 속도를 일정하게 유지하는 고정 비트레이트 제어 기법.
    • VBR (Variable Bitrate): 화면의 복잡도에 따라 가변적으로 비트레이트를 할당하여 데이터 효율을 극대화하는 기법.
  • 적응형 비트레이트 스트리밍 (ABR - Adaptive Bitrate Streaming):
    • 사용자의 실시간 네트워크 대역폭 변동을 브라우저가 모니터링하여 이에 대응하는 해상도 및 비트레이트 화질로 동적 자동 전환하는 기술. 버퍼링 끊김 현상을 방지함.

8. 프레임 레이트 (Frame Rate - FPS)

  • 개요: 화면에 초당 표시되는 프레임(정지 이미지) 수.
  • 특징:
    • 웹 표준 미디어에서는 주로 30fps 또는 60fps가 사용됨.
    • 프레임 레이트가 높을수록 시각적 움직임이 부드럽지만, 초당 연산 부하(CPU/GPU) 및 대역폭 요구량도 비례하여 증가함.

9. 비디오 코덱의 종류

  • H.264 (AVC):
    • 대다수 하드웨어 장치에서 네이티브 디코딩을 지원하는 세계 표준 코덱. 호환성이 우수하지만 신규 코덱 대비 데이터 전송량 감소율이 떨어짐.
  • H.265 (HEVC):
    • H.264 대비 동일 화질 기준 약 50%의 대역폭을 절감하는 고효율 코덱. 4K 이상의 해상도에 활용되며 유료 특허 라이선스 비용 발생.
  • VP9:
    • 구글이 개발한 무료 오픈소스 코덱. H.265에 상응하는 압축 성능을 내며 웹브라우저와의 호환성이 뛰어남.
  • AV1:
    • 주요 기업 연합이 개발한 최신 무료 오픈소스 코덱. 압축성능은 최상급이나 디코딩 연산 부하가 커 구형 디바이스에서 CPU 사용량이 상승함.
× 확대된 이미지