[웹 퍼블리싱 10] HTML - 멀티미디어 audio와 video - TheNullPage(널페이지)

지난 편에서 폼의 값을 검증하는 여러 속성을 익혔습니다. 이번에는 분위기를 바꿔, 화면에 소리와 영상을 담는 멀티미디어를 다룹니다. 글과 이미지만으로는 전하기 어려운 것들이 있습니다. 제품의 사용법을 보여 주는 짧은 영상, 인터뷰 음성, 배경 음악 같은 것들이죠. 이런 미디어를 웹에 올바르게 심는 법을 이번 편에서 살펴보겠습니다.

제가 처음 영상을 웹에 올릴 때는 외부 서비스에 올리고 그 조각을 가져와 붙이는 것만 알았습니다. 그러다 브라우저가 자체적으로 소리와 영상을 재생하는 기능을 갖추고 있다는 것을 알게 되었고, 직접 미디어를 다룰 수 있게 되었습니다. 이번 편에서는 영상과 음성을 심는 법, 여러 형식을 대비하는 법, 자막을 붙이는 법, 그리고 미디어를 모두가 즐길 수 있게 만드는 접근성까지 다루겠습니다.

1. 영상 심기의 기본

영상을 심는 가장 기본은 영상 전용 태그를 두고, 그 안에 재생할 파일을 지정하는 것입니다. 여기에 재생과 정지, 음량 조절 같은 기본 조작 막대를 보여 주는 표시를 붙이면, 사용자가 스스로 영상을 조작할 수 있습니다. 이 조작 막대가 없으면 영상이 그냥 멈춰 있거나 사용자가 통제할 수 없어 답답해집니다.

영상에는 가로와 세로 크기를 지정하는 것이 좋습니다. 크기를 미리 알려 주지 않으면 영상이 로드되기 전까지 브라우저가 자리를 비워 두지 못해, 영상이 뜨는 순간 주변 내용이 갑자기 밀리는 현상이 생깁니다. 이 갑작스러운 밀림은 사용자를 놀라게 하고 클릭 실수를 유발하므로, 크기를 미리 지정해 자리를 잡아 두는 것이 좋습니다.

영상이 로드되기 전에 보여 줄 대표 이미지도 지정할 수 있습니다. 이 이미지는 영상의 첫 장면이나 내용을 대표하는 한 컷으로, 사용자가 재생 버튼을 누르기 전까지 화면에 표시됩니다. 대표 이미지가 없으면 검은 화면이나 빈 화면이 떠서 무슨 영상인지 짐작하기 어렵습니다. 저는 이 대표 이미지를 늘 챙깁니다.

미리 얼마나 내려받을지도 조절할 수 있습니다. 영상 전체를 미리 받아 둘지, 정보만 받아 둘지, 아무것도 받지 않고 재생할 때 받을지를 정하는 것입니다. 자동 재생이 아니고 사용자가 눌러야 재생되는 영상이라면, 정보만 미리 받아 두는 편이 데이터와 성능을 아낍니다. 무거운 영상을 무턱대고 다 받아 두면 페이지가 느려집니다.

모바일에서는 영상이 전체 화면으로 강제 전환되는 것을 막는 표시도 유용합니다. 이 표시가 없으면 일부 기기에서 재생을 누르는 순간 영상이 화면을 꽉 채워 버려, 우리가 의도한 배치가 무너집니다. 화면 안에서 자연스럽게 재생되길 원한다면 이 표시를 붙여야 합니다.

아래는 영상을 심는 기본 예시입니다. 조작 막대, 크기, 대표 이미지가 어떻게 지정되는지 보세요.

2. 여러 형식으로 대비하기

영상과 음성 파일에는 여러 형식이 있고, 브라우저마다 지원하는 형식이 조금씩 다릅니다. 그래서 한 형식만 제공하면 어떤 브라우저에서는 재생이 안 될 수 있습니다. 이를 대비하는 방법은 같은 미디어를 여러 형식으로 준비하고, 이들을 나란히 지정해 브라우저가 재생할 수 있는 것을 골라 쓰게 하는 것입니다.

브라우저는 지정된 파일을 위에서부터 살펴보며, 자신이 재생할 수 있는 첫 번째 형식을 선택합니다. 그래서 형식을 지정하는 순서가 의미를 가집니다. 더 효율적이거나 선호하는 형식을 위에 두면 브라우저가 그것을 우선 고릅니다. 각 파일에는 어떤 형식인지 알려 주는 표시를 함께 다는 것이 좋습니다. 그래야 브라우저가 파일을 내려받기 전에 형식을 판단할 수 있습니다.

형식 표시를 정확히 다는 것은 성능에도 도움이 됩니다. 표시가 있으면 브라우저는 지원하지 않는 형식은 아예 건너뛰고 지원하는 것만 내려받습니다. 표시가 없으면 브라우저가 파일을 조금씩 받아 보며 판단해야 해서 낭비가 생깁니다. 작은 표시 하나가 불필요한 내려받기를 막아 줍니다.

모든 형식을 지원하지 않는 오래된 브라우저를 위해, 마지막에는 대체 안내를 두는 것이 좋습니다. 미디어를 재생할 수 없는 환경에서는 이 안내가 대신 표시됩니다. 예를 들어 영상을 재생할 수 없다는 문구와 함께 파일을 직접 내려받을 수 있는 링크를 두면, 사용자가 아예 아무것도 못 보는 상황을 피할 수 있습니다.

제가 실무에서 정착한 방식은, 널리 호환되는 형식 하나와 더 효율적인 형식 하나를 함께 제공하는 것입니다. 효율적인 형식을 위에 두어 지원하는 브라우저는 그것을 쓰고, 지원하지 않는 브라우저는 아래의 호환 형식으로 물러나게 합니다. 이 조합이면 대부분의 환경을 무리 없이 아우를 수 있었습니다.

아래는 여러 형식과 대체 안내를 함께 둔 예시입니다. 형식 표시와 마지막 안내에 주목하세요.

3. 음성 심기

음성을 심는 방식은 영상과 매우 비슷합니다. 음성 전용 태그를 두고, 그 안에 재생할 파일을 지정하며, 조작 막대를 보여 주는 표시를 붙입니다. 팟캐스트, 인터뷰 녹음, 발음 예시처럼 화면이 필요 없는 소리 콘텐츠에 어울립니다. 영상과 달리 화면 영역을 차지하지 않으니 배치가 한결 단순합니다.

음성도 여러 형식으로 대비하는 원리가 그대로 적용됩니다. 브라우저마다 지원하는 음성 형식이 다르므로, 널리 호환되는 형식과 효율적인 형식을 함께 지정해 브라우저가 재생 가능한 것을 고르게 합니다. 형식 표시를 다는 것도 영상과 같습니다.

음성에서는 미리 내려받기 설정이 특히 중요합니다. 페이지에 음성이 여러 개 있는데 모두 미리 받아 두면 데이터 낭비가 큽니다. 사용자가 재생을 누를 때 받도록 설정하면, 실제로 듣는 음성만 내려받아 자원을 아낄 수 있습니다. 저는 목록에 음성이 여럿 있을 때 이 설정으로 성능을 크게 개선한 경험이 있습니다.

배경 음악처럼 사용자 조작 없이 자동으로 재생하려는 경우에는 주의가 필요합니다. 대다수 브라우저는 소리가 나는 자동 재생을 막습니다. 사용자가 예상치 못한 소리에 놀라는 것을 방지하기 위해서입니다. 그래서 자동 재생을 하려면 소리를 끈 상태로 시작해야 하고, 소리는 사용자가 직접 켜게 두어야 합니다.

음성 콘텐츠에서도 소리를 들을 수 없는 사용자를 배려해야 합니다. 청각에 어려움이 있는 사용자나 소리를 켤 수 없는 환경에 있는 사용자를 위해, 음성의 내용을 글로 옮긴 전사를 함께 제공하는 것이 좋습니다. 이 부분은 뒤에서 접근성으로 다시 다루겠습니다.

아래는 음성을 심는 예시입니다. 여러 형식과 미리 받기 설정을 보세요.

4. 자막과 캡션

영상에 자막을 붙이는 것은 접근성의 핵심입니다. 자막은 영상 안에 태워 넣는 것이 아니라, 별도의 자막 파일을 만들어 영상에 선언적으로 연결하는 방식이 좋습니다. 이렇게 하면 사용자가 자막을 켜고 끌 수 있고, 여러 언어의 자막을 함께 제공할 수도 있습니다. 자막이 그림이 아니라 글자로 남으니 검색도 됩니다.

자막 파일은 시간과 그 시간에 보여 줄 글을 짝지어 적는 단순한 형식입니다. 몇 초부터 몇 초까지 어떤 문장을 보여 줄지를 줄줄이 적으면 됩니다. 이 파일을 영상에 연결하면, 브라우저가 재생 시간에 맞춰 해당 문장을 화면에 띄워 줍니다. 형식이 어렵지 않아 손으로 만들 수도 있습니다.

여기서 구분해야 할 두 종류가 있습니다. 하나는 청각에 어려움이 있는 사용자를 위한 캡션으로, 대사뿐 아니라 배경 음악이나 효과음 같은 소리 정보까지 글로 담습니다. 다른 하나는 번역 자막으로, 다른 언어 사용자를 위해 대사를 옮긴 것입니다. 목적이 다르므로 종류를 정확히 지정해야 브라우저가 알맞게 안내합니다.

자막을 연결할 때는 각 자막이 어떤 언어인지, 사용자에게 어떻게 이름 붙여 보여 줄지도 지정합니다. 그래야 영상 조작 막대의 자막 선택 메뉴에 한국어, 영어처럼 알아보기 쉬운 이름으로 나타납니다. 여러 언어를 제공할 때는 기본으로 켜질 자막 하나를 정해 두는 것도 좋습니다.

제가 자막을 처음 제대로 붙였을 때, 소리를 켤 수 없는 환경에서도 영상 내용이 온전히 전달되는 것을 보고 그 가치를 실감했습니다. 통계를 봐도 자막이 있는 영상은 소리 없이 보는 사용자가 상당히 많았습니다. 자막은 청각장애 사용자만을 위한 것이 아니라, 조용한 환경에서 보는 모든 사용자를 위한 것이었습니다.

아래는 영상에 자막을 연결한 예시입니다. 자막 종류와 언어 지정을 보세요.

5. 미디어 접근성 마무리

미디어를 다룰 때 마지막으로 챙겨야 할 것이 접근성입니다. 앞서 영상에는 자막을, 음성에는 전사를 제공하라고 했는데, 이는 소리나 화면 어느 한쪽에 접근하지 못하는 사용자를 위한 배려입니다. 미디어는 여러 감각에 동시에 호소하는 만큼, 한 감각을 쓸 수 없는 사용자를 위한 대체 통로를 반드시 마련해야 합니다.

자동 재생은 접근성 관점에서도 신중해야 합니다. 예고 없이 소리가 나거나 화면이 움직이면, 소리에 민감한 사용자나 화면 낭독 프로그램을 쓰는 사용자가 큰 혼란을 겪습니다. 그래서 자동 재생은 되도록 피하고, 하더라도 소리를 끈 상태로 시작하며, 사용자가 언제든 멈출 수 있게 하는 것이 원칙입니다.

움직임에 민감한 사용자를 위한 배려도 있습니다. 일부 사용자는 화면의 과도한 움직임에 어지럼증을 느낍니다. 이런 사용자는 기기 설정에서 움직임을 줄여 달라고 요청해 두는데, 우리 페이지가 그 요청을 존중해 자동 재생 영상을 멈추거나 정지 화면으로 대체하면 훨씬 친절합니다.

미디어 조작 막대도 키보드만으로 다룰 수 있어야 합니다. 마우스를 쓸 수 없는 사용자도 재생과 정지, 음량 조절을 할 수 있어야 하죠. 브라우저가 기본으로 제공하는 조작 막대는 대개 키보드 조작을 지원하므로, 이것을 함부로 없애고 우리가 직접 만든 조작 막대로 대체할 때는 키보드 접근성을 잃지 않도록 각별히 주의해야 합니다.

제가 미디어 접근성을 챙기며 얻은 깨달음은, 이 배려들이 결국 모든 사용자를 위한 것이라는 점입니다. 자막은 조용한 곳에서 보는 사람에게, 전사는 빠르게 훑어 읽으려는 사람에게, 자동 재생 자제는 데이터를 아끼려는 사람에게 도움이 됩니다. 특정 사용자를 위한 배려가 결국 모두의 경험을 좋게 만드는 것이죠.

이번 편에서는 영상과 음성을 심는 법, 여러 형식으로 대비하는 법, 자막을 붙이는 법, 그리고 미디어 접근성까지 두루 살펴봤습니다. 다음 편에서는 화면에 보이지 않지만 문서의 정체를 규정하는 메타 태그로 넘어가겠습니다. 사용자에게 미디어를 전하는 법을 익혔으니, 이제 브라우저와 검색엔진에게 문서의 정보를 알리는 법을 배울 차례입니다.