HTML에서 preload 속성을 사용하면 페이지가 로드될 때 오디오나 비디오를 미리 불러올지 여부와 그 방식을 브라우저에 힌트로 전달할 수 있습니다. 이 속성은 <audio> 태그와 <video> 태그 모두에서 사용할 수 있으며, 네트워크 상황과 사용자 경험을 고려해 최적의 로딩 전략을 세우는 데 유용합니다.
preload 속성의 주요 값
- none: 페이지 로드 시 미디어 파일을 전혀 다운로드하지 않습니다. 사용자가 재생 버튼을 누를 때만 로드됩니다.
- metadata: 재생 시간, 크기 등 메타데이터만 미리 가져옵니다.
- auto: 브라우저가 판단하여 전체 미디어 파일을 미리 로드합니다. 기본값입니다.
코드 예제
아래 예제는 preload 속성을 "none"으로 설정하여, 사용자가 직접 재생을 시작하기 전까지는 영상이 로드되지 않도록 구현한 코드입니다.
<!DOCTYPE HTML> <html> <body> <video width="300" height="200" preload="none" controls> <source src="/html5/foo.ogg" type="video/ogg" /> <source src="/html5/foo.mp4" type="video/mp4" /> 사용 중인 브라우저는 video 요소를 지원하지 않습니다. </video> </body> </html>
활용 팁
대용량 영상이나 자동 재생이 필요 없는 콘텐츠에는 preload="none"을 사용해 초기 페이지 로딩 속도를 개선할 수 있습니다. 반대로 사용자가 바로 재생할 가능성이 높은 짧은 클립이라면 preload="auto"를 적용해 재생 대기 시간을 줄이는 것이 좋습니다. 이처럼 preload 속성을 상황에 맞게 활용하면 브라우저에게 명확한 힌트를 주어 더 나은 사용자 경험을 제공할 수 있습니다.