HTML 비디오와 오디오 (HTML video and audio)
웹에서의 비디오와 오디오
초창기 온라인 비디오와 오디오의 등장은 Flash나 Silverlight 같은 독점적인 플러그인 기반 기술 덕분에 가능했습니다. 하지만 이런 기술들은 보안과 접근성에 치명적인 문제가 있었어요. 그래서 지금은 완전히 구시대의 유물이 되었고, 그 자리를 네이티브 HTML 솔루션인 <video>와 <audio> 요소, 그리고 이를 제어할 수 있는 JavaScript API가 대체하게 되었습니다. 이번 시간에는 JavaScript를 사용한 제어보다는, HTML만으로 달성할 수 있는 기본적인 뼈대 구축에 집중해 볼게요.
오디오나 비디오 파일을 제작하는 방법은 여기서 가르쳐드리지 않습니다. 그건 완전히 다른 분야의 기술이거든요! 대신 여러분이 직접 테스트해 볼 수 있도록 샘플 오디오/비디오 파일과 예제 코드를 준비해 두었으니, 본인만의 파일이 없다면 이걸 활용하시면 됩니다.
💡 참고:
본격적으로 시작하기 전에 알아두시면 좋은 점이 있어요. 세상에는 YouTube, Dailymotion, Vimeo 같은 OVP(온라인 비디오 제공자)나 Soundcloud 같은 온라인 오디오 제공자가 아주 많습니다. 이런 서비스들은 막대한 트래픽(대역폭 소비)을 걱정할 필요 없이, 영상을 호스팅하고 소비할 수 있는 매우 편리하고 쉬운 방법을 제공해요. 게다가 보통 여러분의 웹 페이지에 미디어를 바로 삽입할 수 있는 완성된 코드를 제공하기도 하죠. 이런 방식을 사용하면 이번 글에서 다룰 여러 가지 골치 아픈 문제들을 피할 수 있습니다. 이런 서비스 활용법에 대해서는 다음 글에서 조금 더 자세히 다룰게요.
<video> 요소
<video> 요소를 사용하면 정말 간단하게 비디오를 삽입할 수 있어요. 아주 기본적인 예시는 다음과 같습니다:
<video src="rabbit320.webm" controls>
<p>
현재 브라우저가 HTML 비디오를 지원하지 않습니다.
대신 <a href="rabbit320.webm">비디오 링크</a>를 통해 시청해 주세요.
</p>
</video>여기서 꼭 기억해야 할 주요 특징들을 짚어볼게요:
src
<img> 요소와 마찬가지로, src(source) 속성은 여러분이 삽입하고 싶은 비디오 파일의 경로를 담고 있습니다. 완전히 똑같은 방식으로 작동하죠.
controls
사용자가 비디오나 오디오 재생을 스스로 제어할 수 있도록 하는 것은 매우 중요합니다 (특히 광과민성 증후군(epilepsy)이 있는 분들에게는 치명적일 수 있거든요). 브라우저가 기본적으로 제공하는 제어 인터페이스를 포함시키려면 이 controls 속성을 꼭 써야 해요. 만약 기본 컨트롤을 쓰지 않는다면, 적절한 JavaScript API를 사용해 여러분만의 인터페이스를 직접 만들어야 합니다. 어떤 방식이든 최소한 미디어를 시작하고 멈추는 방법, 그리고 볼륨을 조절하는 방법은 반드시 포함되어야 해요.
🧑🏫 강사님의 팁: > 기본 제공되는
controls인터페이스는 편하지만, 크롬, 사파리, 파이어폭스 등 브라우저마다 디자인이 전부 다릅니다. 만약 실무에서 깔끔하고 통일된 포트폴리오를 만들고 싶다면, Figma 같은 디자인 툴로 플레이어 UI를 와이어프레임부터 예쁘게 짠 뒤에 CSS로 입히고 JavaScript로 동작을 연결하는 커스텀 플레이어를 만들어 보는 것을 강력 추천해요!
<video> 태그 안의 단락(paragraph)
이걸 대체 콘텐츠(fallback content)라고 부릅니다. 구형 브라우저처럼 해당 페이지에 접속한 브라우저가 <video> 요소를 지원하지 않을 때 이 텍스트가 화면에 표시되죠. 대체 콘텐츠는 여러분이 원하는 대로 자유롭게 작성할 수 있습니다. 이 예제에서는 사용자가 어떤 브라우저를 쓰든 최소한 영상에 접근할 수 있도록 비디오 파일로 직접 연결되는 링크를 제공했어요.
대체 텍스트인 a 요소의 href 값을 보면 video의 src와 같습니다.
브라우저가 해당 형식을 지원한다는 의미는 아닙니다. 이 상황을 정확히 이해하려면 '브라우저 화면 안에서 직접 재생하는 것'과 '단순히 파일을 다운로드하는 것'의 차이를 구분하셔야 해요.
-
<video>태그: 브라우저가 '직접' 재생할 수 있는가?
<video src="rabbit320.webm">코드는 브라우저에게 "이 웹페이지 화면 안에 비디오 플레이어를 띄우고, 네가 직접 이 webm 파일을 해독해서 영상을 재생해 줘!"라고 명령하는 것입니다.
만약 브라우저가 오래되었거나 webm 형식(코덱)을 해독할 능력이 없다면, 브라우저는 영상 재생을 포기하고<video>태그 안에 있는 대체 텍스트(Fallback)인<p>태그 안의 내용을 화면에 보여줍니다. -
<a>태그: 운영체제(OS)에게 토스하기
그렇다면 대체 텍스트 안에 있는<a href="rabbit320.webm">링크는 왜 있는 걸까요?
브라우저가 이 파일을 직접 화면에 틀어줄 능력은 없지만, 사용자가 저 링크를 클릭하면 브라우저는 해당 파일을 '다운로드'해 버립니다.파일이 사용자의 컴퓨터(또는 스마트폰)에 다운로드되고 나면, 그때부터는 브라우저의 손을 떠나게 됩니다. 사용자의 기기에 깔려 있는 외부 동영상 플레이어(예: 곰플레이어, VLC, 윈도우 미디어 플레이어 등)가 그 파일을 대신 재생해 줄 수 있기 때문이죠.
그렇다면 download 속성이 없는데 왜 다운로드를 할까?
-
브라우저는 파일을 어떻게 처리할까?
브라우저가<a>링크를 클릭해 특정 파일(rabbit320.webm)에 접근하면, 서버로부터 이 파일이 어떤 종류인지(Content-Type)를 응답받습니다.지원하는 파일일 때: 브라우저가 자기가 읽을 수 있는 파일(예: .html, .jpg, .pdf, 혹은 자기가 지원하는 .mp4)이라고 판단하면, 새 창이나 현재 창에서 직접 열어서 화면에 보여줍니다.
지원하지 않는 파일일 때: 브라우저가 화면에 띄울 수 없는 미지의 확장자나 해독할 수 없는 포맷을 만나면, 브라우저는 "어? 나는 이걸 화면에 그릴 능력이 없는데? 그럼 일단 사용자 컴퓨터에 저장(다운로드)해 주자!" 하고 기본 다운로드 프로세스를 진행해 버립니다.
-
왜 다운로드가 된다고 했을까?
우리가 마주한 상황은<video>태그에서 .webm 파일을 틀려고 했는데 실패해서 대체 텍스트(Fallback)가 뜬 상황입니다.
즉, 해당 브라우저는 애초에 .webm 형식을 해독할 능력이 없는 구형 브라우저이거나 미지원 브라우저라는 뜻이죠.이 상태에서 사용자가 링크를 클릭해 .webm 파일에 직접 접근하면, 브라우저는 이 파일을 열어볼 능력이 없기 때문에 화면에 재생하는 대신 자동으로 다운로드 처리를 해버립니다. download 속성이 없어도 브라우저의 '예외 처리' 덕분에 파일이 컴퓨터에 저장되는 것입니다.
-
그렇다면 download 속성의 진짜 역할은?
download 속성은 브라우저가 충분히 화면에 띄울 수 있는 파일임에도 불구하고, 화면에 띄우지 말고 무조건 강제로 다운로드하게 만들고 싶을 때 사용합니다.
예를 들어, .jpg 이미지 링크를 클릭했을 때 이미지가 새 창에서 열리는 대신 내 컴퓨터에 바로 저장되게 하고 싶을 때 download 속성을 넣는 것이죠.
이 예제는 여기에서 직접 실행해 볼 수 있습니다 (소스 코드도 확인해 보세요).
호환성 향상을 위한 다중 소스 포맷 사용하기
위의 예제에는 한 가지 문제가 있습니다. 바로 여러분의 브라우저에서는 저 비디오가 재생되지 않을 수도 있다는 점이죠. 브라우저마다 지원하는 비디오(및 오디오) 포맷이 제각각이기 때문입니다. 다행히도 이 문제를 해결할 수 있는 방법이 있습니다.
미디어 파일의 내용
먼저 관련 용어부터 빠르게 짚고 넘어갈게요. OGG, WAV, MP4, WebM과 같은 포맷들을 컨테이너 포맷(container formats)이라고 부릅니다. 컨테이너 포맷은 미디어를 구성하는 오디오 및/또는 비디오 트랙을 저장하는 뼈대 구조를 정의하며, 여기에는 미디어를 설명하는 메타데이터나 각 채널을 인코딩하는 데 사용된 코덱 정보 등도 함께 포함됩니다.
메인 비디오 트랙 하나, 대체 앵글 트랙 하나, 그리고 영어와 스페인어 오디오 트랙, 추가로 영어 코멘터리(해설) 오디오 트랙까지 포함된 영화가 담긴 WebM 파일을 상상해 보세요. 이런 복잡한 구성은 아래 다이어그램처럼 개념화할 수 있습니다. 심지어 영화의 폐쇄 자막(closed captions), 스페인어 자막, 코멘터리용 영어 자막을 포함하는 텍스트 트랙들도 함께 들어가 있죠.
컨테이너 안의 오디오와 비디오 트랙들은 해당 미디어를 인코딩할 때 사용된 코덱에 맞는 포맷으로 데이터를 저장하고 있어요. 오디오 트랙과 비디오 트랙은 서로 다른 포맷을 사용합니다. 각 오디오 트랙은 오디오 코덱을 사용해 인코딩되고, 비디오 트랙은 (짐작하셨겠지만) 비디오 코덱을 사용해 인코딩되죠. 아까 말씀드렸듯이, 브라우저마다 지원하는 비디오/오디오 포맷도 다르고, 이를 담는 컨테이너 포맷(OGG, MP4, WebM 등)도 각기 다릅니다.
예를 들어볼까요:
- WebM 컨테이너: 보통 Vorbis나 Opus 오디오와 VP8/VP9 비디오를 함께 묶습니다. 모든 최신 브라우저에서 지원되지만, 구버전에서는 동작하지 않을 수 있어요.
- MP4 컨테이너: AAC나 MP3 오디오와 H.264 비디오를 묶는 데 자주 쓰입니다. 역시 모든 최신 브라우저에서 잘 지원됩니다.
- Ogg 컨테이너: 주로 Vorbis 오디오와 Theora 비디오를 사용해요. 파이어폭스와 크롬에서 가장 잘 지원되지만, 더 나은 품질을 제공하는 WebM 포맷으로 거의 대체되었습니다.
몇 가지 예외도 있습니다. 예를 들어 FLAC 코덱 같은 경우 컨테이너 없이 코덱 데이터만 저장되거나 아주 단순화된 컨테이너에 담기곤 합니다.
또 다른 예로 우리가 너무나 잘 아는 "MP3 파일"이 있죠. "MP3 파일"은 MPEG-1 Audio Layer III 압축 방식으로 인코딩된 오디오 파일입니다. 메타데이터를 포함할 수는 있지만, 별도의 MPEG이나 MPEG-2 컨테이너 안에 캡슐화되어 있지는 않아요. 이 포맷이 <audio>와 <video> 태그에서 이렇게 광범위하게 지원되는 건 그만큼 인기가 압도적이기 때문입니다.
일반적으로 오디오 플레이어는 MP3나 Ogg 파일 같은 오디오 트랙을 직접 재생하려 합니다. 이런 것들은 별도의 컨테이너가 필요 없거든요.
브라우저의 미디어 파일 지원
💡 참고:
MP3나 MP4/H.264 같이 매우 훌륭하고 인기 있는 포맷들은 특허 문제가 얽혀 있습니다. 즉, 이 기술들의 전체 또는 일부를 덮고 있는 특허권이 있다는 거죠. 미국에서는 MP3 특허가 2017년까지 유지되었고, H.264 관련 특허는 최소 2027년까지 유지됩니다.이런 특허 때문에 브라우저 개발사들이 해당 코덱 지원을 구현하려면 엄청난 라이선스 비용을 지불해야 합니다. 게다가 어떤 사람들은 제한이 있는 소프트웨어를 피하고 오픈 포맷만 고집하기도 하죠. 이런 법적인 이유와 사용자의 선호도 때문에, 웹 개발자들은 모든 방문자에게 영상을 제대로 보여주기 위해 여러 가지 포맷을 동시에 지원해야만 합니다.
앞서 설명한 코덱들은 원본(raw) 오디오와 비디오 파일의 어마어마한 용량을 관리 가능한 크기로 압축하기 위해 존재합니다. 웹 브라우저들은 압축된 오디오와 비디오를 바이너리 데이터로 변환하고 다시 풀어내는 데 사용하는 Vorbis나 H.264 같은 다양한 코덱(codecs) 세트를 지원합니다. 코덱마다 장단점이 다르고, 컨테이너 역시 어떤 것을 선택하느냐에 따라 긍정적/부정적 영향을 미치게 되죠.
상황이 좀 복잡해지는 이유는, 브라우저들이 지원하는 컨테이너 포맷 종류가 다를 뿐만 아니라 지원하는 코덱의 종류마저 다르기 때문이에요. 여러분이 만든 웹사이트나 앱이 어떤 사용자의 브라우저에서든 무사히 재생되게 하려면, 동일한 미디어를 여러 포맷의 파일로 준비해서 제공해야 할 수도 있습니다. 사이트가 제공하는 포맷과 방문자의 브라우저가 지원하는 포맷이 일치하지 않으면 미디어는 재생되지 않으니까요.
타겟으로 하는 모든 브라우저, 플랫폼, 디바이스 조합에서 영상을 안정적으로 보여주기 위해 최적의 코덱과 컨테이너 조합을 찾는 건 꽤 까다로운 작업입니다. 여러분의 필요에 딱 맞는 컨테이너 포맷을 고르려면 올바른 컨테이너 선택하기 가이드를 참고하세요. 마찬가지로 오디오/비디오 코덱 선택에 대해서는 비디오 코덱 선택하기와 오디오 코덱 선택하기를 읽어보시면 큰 도움이 될 겁니다.
🧑🏫 강사님의 팁: > 만약 여러분이 나중에 React, Next.js, 혹은 TypeScript를 이용해 프론트엔드를 구축한다면, 이 미디어 소스들을 매번 하드코딩하기보다는 배열로 데이터를 관리해서
<source>태그를map함수로 뿌려주는 재사용 가능한VideoPlayer컴포넌트를 만들어보세요. 코드도 훨씬 깔끔해지고 유지보수하기도 참 좋습니다! 취업용 포트폴리오 코드 리뷰 때 이런 확장성까지 고려했다는 걸 보여주면 아주 좋겠죠.
한 가지 더 염두에 두어야 할 점은, 모바일 브라우저는 데스크톱 버전에서는 지원하지 않는 추가 포맷을 지원할 수도 있고, 반대로 데스크톱에서 되는 포맷이 모바일에서는 안 될 수도 있다는 것입니다. 게다가 브라우저 자체적으로 미디어를 처리하는 대신 사용자의 기기에 설치된 미디어 처리 소프트웨어로 재생을 넘겨버릴(offload) 수도 있어요. 결국 미디어 지원 여부는 사용자가 어떤 소프트웨어를 설치했느냐에 따라 부분적으로 달라질 수 있습니다.
그렇다면 코드로 어떻게 구현할까요? 아래의 업데이트된 예제를 살펴봅시다 (여기서 직접 실행도 해보세요):
<video controls>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
현재 브라우저가 비디오를 지원하지 않습니다.
대신 <a href="rabbit320.mp4">비디오 링크</a>를 통해 시청해 주세요.
</p>
</video>여기서는 <video> 태그 안에 있던 src 속성을 빼내고, 대신 각 소스 파일의 경로를 가리키는 별도의 <source> 요소들을 추가했습니다. 이렇게 하면 브라우저는 위에서부터 차례대로 <source> 요소를 읽어 내려가다가 자기가 지원하는 코덱을 발견하는 즉시 그 파일을 재생합니다. 요즘에는 WebM과 MP4 소스 두 가지만 포함해 두어도 대부분의 플랫폼과 브라우저에서 무리 없이 재생이 가능해요.
각 <source> 요소에는 type 속성도 들어있죠. 필수는 아니지만 꼭 적어주는 것을 강력히 권장합니다! type 속성에는 해당 파일의 MIME 타입(MIME type)이 들어가는데, 브라우저는 이 type 값을 보고 자기가 해석할 수 없는 영상은 아예 로딩조차 하지 않고 즉시 건너뜁니다. 만약 type이 없으면 브라우저는 일단 파일을 하나하나 다운로드하고 재생을 시도해 보면서 동작하는 걸 찾아야만 해요. 시간이 오래 걸리고 불필요한 리소스가 낭비되겠죠?
어떤 컨테이너와 코덱을 고를지, 각 포맷에 맞는 정확한 MIME 타입이 무엇인지는 미디어 타입과 포맷 가이드를 참조하세요.
다른 <video> 기능들
HTML 비디오를 화면에 띄울 때 사용할 수 있는 유용한 기능들이 꽤 많습니다. 다음 예제를 한번 보실까요:
<video
controls
width="400"
height="400"
autoplay
loop
muted
preload="auto"
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
현재 브라우저가 비디오를 지원하지 않습니다.
대신 <a href="rabbit320.mp4">비디오 링크</a>를 통해 시청해 주세요.
</p>
</video>이렇게 하면 브라우저에서는 대략 이런 모습으로 출력됩니다:
적용된 속성들은 다음과 같습니다:
width와 height
이 속성들을 쓰거나 CSS를 사용해서 비디오의 크기를 제어할 수 있습니다. 어느 방식을 쓰든 비디오는 고유의 가로세로 비율(즉, 종횡비(aspect ratio))을 유지하려는 성질이 있어요. 만약 여러분이 설정한 크기가 영상의 종횡비와 맞지 않으면, 비디오는 빈 공간을 남기며 가로폭에 맞춰 꽉 차게 들어가고, 남는 빈 공간은 기본적으로 단색 배경으로 채워집니다.
autoplay
웹 페이지의 다른 요소들이 로딩되는 중이더라도, 미디어가 즉시 재생을 시작하도록 만듭니다. 하지만 사용자가 갑작스러운 소리나 움직임에 매우 짜증을 낼 수 있으므로, 웹사이트에 자동 재생되는 비디오나 오디오를 넣는 것은 권장하지 않아요!
🧑🏫 강사님의 부연설명: > 만약 여러분이 프론트엔드 프레임워크인 React 스터디를 하다가 비디오 태그를 쓰게 된다면, 이 속성들을 작성할 때 주의해야 해요. HTML에서는
autoplay라고 쓰지만, React(JSX)에서는 카멜 케이스인autoPlay로 적어줘야 한답니다. 그리고 브라우저 정책상 사용자 경험을 위해muted상태가 아니면autoplay가 차단되는 경우가 아주 흔하니 꼭 명심하세요!
loop
비디오나 오디오가 끝났을 때 처음부터 무한 반복해서 재생되게 만듭니다. 이것도 사용자에게 피로감을 줄 수 있으니 정말 필요한 경우에만 쓰세요.
muted
미디어가 재생될 때 소리를 기본적으로 꺼진(음소거) 상태로 둡니다.
poster
영상이 재생되기 전에 화면에 표시할 이미지의 URL을 지정합니다. 영상의 스플래시 화면(썸네일)이나 광고 화면 용도로 주로 사용돼요.
preload
대용량 파일을 얼마나 미리 버퍼링(다운로드)할지 결정하는 속성입니다. 세 가지 값 중 하나를 가질 수 있어요:
"none": 미디어 파일을 미리 버퍼링하지 않음 (데이터 절약)."auto": 미디어 파일 전체를 버퍼링함 (기본적으로 영상을 볼 거라 예상될 때)."metadata": 파일의 메타데이터(길이, 크기 등)만 버퍼링함.
위의 예제 코드는 GitHub에서 직접 실행해 볼 수 있습니다 (소스 코드도 확인해 보세요). 라이브 데모 버전에는 autoplay 속성을 빼두었어요. 왜냐고요? 페이지가 로드되자마자 재생이 돼버리면, 기껏 설정한 멋진 포스터 이미지를 볼 수가 없으니까요!
<audio> 요소
<audio> 요소는 아래 설명할 몇 가지 사소한 차이점만 빼면 <video> 요소와 완전히 똑같이 작동합니다. 전형적인 예시 코드는 이렇게 생겼어요:
<audio controls>
<source src="viper.mp3" type="audio/mp3" />
<source src="viper.ogg" type="audio/ogg" />
<p>
현재 브라우저가 오디오 파일을 지원하지 않습니다.
대신 <a href="viper.mp3">오디오 링크</a>를 클릭해 주세요.
</p>
</audio>브라우저에서 렌더링 되면 대략 이런 모습입니다:
💡 참고:
GitHub에서 오디오 데모를 직접 실행해 볼 수 있습니다 (오디오 플레이어 소스 코드도 있어요).
오디오 플레이어는 영상처럼 시각적으로 보여줄 컴포넌트가 없기 때문에 비디오 플레이어보다 차지하는 공간이 훨씬 적습니다. 단순히 오디오를 재생할 '컨트롤러'만 띄우면 되거든요. HTML 비디오와 또 다른 점들은 다음과 같습니다:
<audio>요소는width나height속성을 지원하지 않습니다. 앞서 말했듯 시각적인 콘텐츠가 없기 때문에 너비나 높이를 부여할 대상 자체가 없죠.- 마찬가지 이유로
poster속성도 지원하지 않습니다. 썸네일을 띄울 화면이 없으니까요.
이 두 가지를 제외하면 <audio>는 <video>와 동일한 기능(속성)들을 모두 지원합니다. 각 기능이 궁금하시다면 위쪽의 비디오 섹션을 다시 한번 훑어보시면 돼요.
비디오 텍스트 트랙 표시하기
자, 이번에는 알아두면 정말 유용한 살짝 고급 개념을 다뤄볼게요. 세상에는 웹에서 찾은 오디오/비디오의 소리를 들을 수 없거나, 혹은 특정 상황 때문에 듣고 싶지 않은 사람들이 아주 많습니다. 예를 들어볼까요?
- 청각 장애(난청이나 농인 등)가 있어서 소리를 명확히, 혹은 전혀 듣지 못하는 분들.
- 시끌벅적한 스포츠 경기가 중계 중인 술집처럼 소음이 너무 심해서 소리를 들을 수 없는 환경에 있는 사람들.
- 반대로 소리가 나면 안 되는 환경(조용한 도서관이거나, 옆에서 파트너가 자고 있을 때 등)에 있는 사람들. 이럴 땐 자막이 최고죠.
- 비디오에서 나오는 언어를 모르는 사람들의 경우, 미디어 내용을 이해하기 위해 텍스트 스크립트(대본)나 번역이 필요할 수 있습니다.
이런 상황에 놓인 분들을 위해 오디오/비디오에서 나오는 음성을 텍스트로 제공할 수 있다면 정말 멋지지 않을까요? HTML 비디오를 활용하면 당연히 가능합니다! 이를 위해 WebVTT 파일 포맷과 <track> 요소를 사용합니다.
💡 참고:
"Transcribe(전사하다)"는 누군가 말하는 음성을 텍스트로 받아 적는 것을 뜻합니다. 그렇게 적혀진 결과물이 바로 "Transcript(대본/스크립트)"죠.
WebVTT는 영상의 특정 시간대에 어떤 텍스트가 표시되어야 하는지에 대한 시간 정보와 메타데이터, 그리고 약간의 스타일/위치 지정 정보까지 포함해 여러 줄의 텍스트 문자열을 작성하는 포맷입니다. 이런 개별 텍스트 문자열 단위를 큐(cues)라고 불러요. 목적에 따라 다양한 종류의 큐가 있는데, 가장 흔하게 쓰이는 큐는 다음과 같습니다:
자막 (subtitles)
오디오에서 나오는 외국어를 알아듣지 못하는 사람들을 위해 번역된 텍스트를 제공합니다.
폐쇄 자막 (captions)
동기화된 대사 전사뿐만 아니라 문이 쾅 닫히는 소리 등 중요한 소리 정보까지 함께 텍스트로 제공하여, 오디오를 들을 수 없는 사람들이 상황을 완벽하게 이해할 수 있도록 돕습니다.
시간 지정 설명 (timed descriptions)
시각 장애인이나 시력이 몹시 나쁜 사용자를 위해 미디어 플레이어가 음성 합성으로 읽어주어야 할 화면의 중요한 시각적 요소들을 텍스트로 묘사한 것입니다.
전형적인 WebVTT 파일은 대략 이렇게 생겼습니다:
WEBVTT
1
00:00:22.230 --> 00:00:24.606
이것은 첫 번째 자막입니다.
2
00:00:30.739 --> 00:00:34.074
이것은 두 번째입니다.
…이 자막 파일을 HTML 미디어와 함께 띄우려면 다음 단계를 거쳐야 합니다:
- 이 텍스트 내용을
.vtt확장자를 가진 파일로 저장한 뒤, HTML 파일과 같은 폴더 등 서버가 제공할 수 있는 위치에 업로드합니다. <track>요소를 사용해 이.vtt파일을 연결해 줍니다.
예제 코드를 볼까요:
<video controls>
<source src="example.mp4" type="video/mp4" />
<source src="example.webm" type="video/webm" />
<track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>🧑🏫 강사님의 팁: > 여러분 중에 혹시 "AI 문서 번역기" 같은 포트폴리오 프로젝트를 구상 중이신 분 있나요? 만약 영상이나 음성을 입력받아 AI가 번역해 주고 그 결과를
.vtt파일 형식으로 출력해서 화면에 동기화해 뿌려주는 기능을 만든다면 정말 어마어마한 포트폴리오가 될 거예요! 프론트엔드 개발자 채용 면접에서도 이런 '웹 접근성(Accessibility, A11y)' 요소인<track>의 개념을 설명하면서 본인 프로젝트에 적용했다고 어필하면 합격률이 쑥쑥 올라갑니다.
이 코드를 브라우저에서 제대로 테스트해 보려면 파일을 로컬 HTTP 서버에 올려야 합니다. 제대로 설정했다면 브라우저 화면에 비디오와 함께 자막이 출력되는 걸 볼 수 있을 거예요. 자막 선택 기능이 포함된 완전한 애플리케이션과 소스 코드가 궁금하시다면 HTML 비디오에 캡션과 자막 추가하기 문서를 참고해 보세요. 이 예제는 JavaScript를 사용해 사용자가 여러 언어의 자막 중 하나를 선택할 수 있게 만들어 두었습니다. (자막을 켜려면 플레이어의 "CC" 버튼을 누르고 English, Deutsch, Español 중 하나를 골라야 합니다.)
💡 참고:
텍스트 트랙은 검색 엔진 최적화(SEO)에도 엄청난 도움이 됩니다! 검색 엔진들은 텍스트 데이터를 아주 좋아하거든요. 텍스트 트랙을 제대로 구성해두면 검색 엔진이 영상 중간 특정 지점으로 사용자를 다이렉트로 연결해 줄 수도 있습니다.
나만의 오디오와 비디오 삽입하기
이번에는 바깥으로 나가서 여러분만의 오디오나 비디오를 직접 촬영해 보는 건 어떨까요? 스마트폰이 있다면 그걸로 영상이나 소리를 녹음해서 컴퓨터로 옮긴 다음 실습에 활용해 보세요. 웹에 올리려면 영상을 WebM이나 MP4로, 오디오를 MP3나 Ogg로 변환해야 할 수도 있지만, 인터넷에는 CloudConvert (온라인 도구)나 Audacity (데스크톱 앱)처럼 큰 어려움 없이 포맷을 바꿔주는 도구가 널려 있습니다. 꼭 한번 직접 해보시길 바라요!
💡 참고:
만약 개인적으로 미디어 파일을 구하기 힘들다면, 저희가 제공하는 샘플 오디오 및 비디오 파일을 다운로드해서 과제를 진행하셔도 좋습니다.
여러분이 직접 해보실 미션은 이렇습니다:
- 여러분의 컴퓨터에 새로운 폴더를 만들고 그곳에 오디오와 비디오 파일을 저장하세요.
- 같은 폴더 안에 저희가 제공하는 시작하기 템플릿을 기반으로
index.html이라는 이름의 새로운 HTML 문서를 만드세요. - 페이지에
<audio>와<video>요소를 각각 추가하고, 브라우저의 기본 컨트롤이 보이도록 설정하세요. - 두 태그 모두 안에
<source>요소들을 넣어서, 브라우저가 본인에게 가장 잘 맞는 포맷을 찾아 로드할 수 있게 만드세요. 물론type속성도 빠트리면 안 되겠죠! - 해당 태그를 지원하지 않는 옛날 브라우저를 위해 미디어 파일로 직행하는 다이렉트 링크가 포함된
<p>태그(대체 콘텐츠)를 양쪽 모두에 넣어주세요. <video>요소에는 영상이 재생되기 전에 보여질poster속성(썸네일 이미지)을 지정해 보세요. 여러분만의 멋진 포스터 그래픽을 만들어보는 것도 재미있을 겁니다.
완성된 HTML 코드는 대략 이런 모습이어야 합니다:
<video controls poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
현재 브라우저가 HTML 비디오를 지원하지 않습니다.
대신 <a href="rabbit320.mp4">비디오 링크</a>를 통해 시청해 주세요.
</p>
</video>
<audio controls>
<source src="viper.mp3" type="audio/mp3" />
<source src="viper.ogg" type="audio/ogg" />
<p>
현재 브라우저가 HTML 오디오를 지원하지 않습니다.
대신 <a href="viper.mp3">오디오 링크</a>를 클릭해 주세요.
</p>
</audio>