HTML5에서 대용량 .mp4 파일을 스트리밍하는 방법
웹에서 동영상 파일이 다운로드되는 동안에도 바로 재생되려면(점진적 다운로드 재생), 특수한 방식으로 인코딩해야 하는 경우가 많습니다. 이 글에서는 HTML5 환경에서 대용량 MP4 파일을 원활하게 스트리밍하기 위한 핵심 설정 방법을 단계별로 살펴봅니다.
1. MP4 파일 구조 최적화: moov atom 이동
MP4 파일에는 영상 메타데이터가 담긴 'moov atom'이라는 영역이 있는데, 이것이 파일 맨 뒤에 위치하면 브라우저는 파일 전체를 내려받기 전까지 재생을 시작할 수 없습니다. 예전 Flash 기반 영상 역시 데이터가 스트림 끝에서 시작 부분으로 이동해야만 정상적으로 재생되었습니다.
MP4 FastStart라는 프로그램을 사용하면 이 데이터를 파일 앞쪽으로 자동으로 이동시켜 줍니다. 덕분에 다운로드가 진행되는 중에도 즉시 재생이 가능합니다.
2. 인코딩 단계에서 '웹' 옵션 활용하기
HandBrake처럼 널리 쓰이는 인코딩 도구에는 "웹(Web)" 옵션이 마련되어 있으며, 인코딩 과정에서 위 작업을 자동으로 처리해 줍니다. 처음부터 이 옵션을 활성화하고 인코딩하면 별도의 후처리 없이도 스트리밍에 최적화된 파일을 얻을 수 있습니다.
3. 웹 서버의 이중 압축 방지
웹 서버가 MP4 파일 자체의 압축 위에 gzip 또는 deflate 압축을 추가로 적용하지 않도록 주의해야 합니다. 이미 압축된 미디어 파일은 한 번 더 압축해도 용량이 거의 줄지 않으며, 서버와 클라이언트 양쪽에서 불필요한 CPU 자원만 소모하게 됩니다.
Gzip은 네트워크 전송 속도를 높이기 위해 파일 크기를 줄이는 압축 방식입니다. DEFLATE는 LZ77 알고리즘과 Huffman 코딩을 결합한 무손실 데이터 압축 알고리즘이자 관련 파일 형식을 의미합니다.
4. HTTP 응답 헤더 점검하기
다음 curl 명령으로 웹 서버가 실제로 어떤 헤더를 보내는지 확인할 수 있습니다:
curl -I https://example/video.mp4
HTTP 응답 헤더에는 반드시 아래 두 항목이 포함되어야 하며, Content-Encoding 항목은 존재하지 않아야 합니다:
- Content-Type: video/mp4
- Accept-Ranges: bytes
Accept-Ranges: bytes가 설정되어 있어야 브라우저가 파일의 일부 구간만 요청하는 범위 요청(Range Request)을 사용할 수 있고, 이것이 곧 끊김 없는 스트리밍 재생의 핵심 조건입니다.
마무리
moov atom을 파일 앞쪽으로 이동하고, 웹 서버의 불필요한 gzip/deflate 압축을 제거한 뒤, 올바른 응답 헤더(Content-Type: video/mp4, Accept-Ranges: bytes)를 확인하면 HTML5 <video> 태그에서도 대용량 MP4 파일을 다운로드와 동시에 매끄럽게 스트리밍할 수 있습니다.