웹 페이지에 미디어를 임베드할 때 지켜야 할 것

* 2016년 6월 2일 00:17 수정 - 아래 남는 문제 3의 'Human & Technology Syndicate'
는 지금은 접근할 수 없군요. 폐쇄한 것으로 보입니다.

아래는 제가 2006년 8월 무렵 '바람새'(Windbird)라는 포크송 동호회 웹 게시판에 올렸던 글을 현 시점에 맞게 고친 것입니다.
얼마 전 페이스북에 링크된 블로그 페이지의 음악을 안드로이드 스마트 폰으로 듣지 못하는 경험을 하면서, 웹 페이지의 미디어 임베딩(embedding) 문제 - PC에서 인터넷 익스플로러가 아닌 브라우저에서 생기는 문제는 물론 최근 급증한 스마트폰과 관련해서 - 에 관한 글을 찾다가 야후의 어느 블로그에서 조우하였습니다.
퍼가더라도 필자가 누구인지 명기하는 최소한의 예의는 지키는 게 좋았겠는데, 읽어보니 이것은 원래 제가 쓴 두 꼭지의 글과 덧붙은 댓글까지 다 담아 재편집한 것이었습니다. ^^
과정이야 어떻든 제 글을 퍼가서 게시해주신 분께 감사드립니다. 제가 게을러서 홈 페이지도 블로그도 운영해 오지 않았던 터라 유실될 것을 이렇게 살려주셨으니 ...
바람새는 폐쇄했으므로 현재 불필요한 대목은 삭제하고 수정할 것은 수정하여 여기에 올립니다.

이 글은 일차적으로는 마이크로소프트 윈도우즈 운영체계의 다양한 브라우저에서 미디어를 제대로 임베드하고 재생하기 쉽게 하는데 주안점을 두었으며, 리눅스 등 다른 운영 체계의 브라우저에 대한 언급은 별로 하지 않습니다.
하지만, 이 정도만 잘 지켜도 다른 운영체계의 브라우저에서는 조금만 설정을 바꾸면 재생하는 데 큰 문제가 없을 것입니다.

인터넷 일반에서 통용되는 음악 파일은, 대개 마이크로소프트 고유의 형식이나 mp3, m3u, RealAudio, AAC 형식 등으로 되어 있는데, 이 중 RealAudio나 AAC 등 여러 가지 형식은 다른 보조 프로그램을 설치하고 설정해서 윈도우즈 미디어 플레이어에서 재생할 수 있도록 하거나 별도의 프로그램을 설치하면 되는데 그에 관한 언급은 이 글의 목적을 넘어서는 것이라 생략합니다.

이 미디어(오디오, 비디오) 형식에는 고유의 마임 유형(MIME type; MIME은 Multi-Purpose Internet Mail Extensions의 축약어로 인터넷 데이터 유형과 그 교환에 관한 표준)이라는 게 있어서 그것을 정확히 지정하고 문법에 맞게 임베드 구문을 구성해야 현존하는 여러 가지 브라우저가 제대로 해석하고 글쓴이가 의도한 대로 동작합니다.( 마임에 대해서는 ‘Internet Media Type’을 보시면 개괄적으로 이해할 수 있습니다. 한글이라면 더 좋았겠는데 충실히 번역하거나 작성한 것을 찾지 못했습니다.)

우리의 현실은 그렇지 못합니다. 마이크로소프트의 운영체계와 브라우저에서만 동작하는 액티브엑스(ActiveX)라는 플러그인을 사용해야 동작하는 기능이 비일비재하고 MIME type 등이 잘못된 임베드 구문을 내포한 페이지를그대로 여기저기 퍼나르는 과정에서 잘못이 확대재생산되어 왔는데도 다수가 쓰는 인터넷 익스플로러에서는 동작하니 이 문제가 쉽게 고쳐지지 않았습니다.

예들들어, 김민기는 인터넷 익스플로러, 크롬, 파이어폭스, 안드로이드 스마트폰에 두루 잘 재생되는데, '봉우리/김민기'는 인터넷 익스플로러에서만 재생됩니다. 잘못된 MIME type을 지정해서 다른 브라우저 등에서는 어떻게 처리할 줄 모르고 'Missing plugin'같은 에러를 냅니다.

그 동안 인터넷 익스플로러가 아닌 브라우저를 쓰던 이들은 잘못된 임베드 구문으로 인한 문제를 일상적으로 경험해야 했는데, 요 몇 년 사이 국제표준에 대한 인식의 제고와 확산 추세에 더해서 최근에 이것을 가속화하는 또 하나의 큰 변수가 등장했습니다. 스마트폰을 통해 인터넷에 접속하는 이들이 크게 늘어나고 그 동안 개인용 컴퓨터 시장을 지배해왔던 마이크로소프트의 영향력이 예전만 못할 뿐만 아니라 스마트폰 시장에서는 대단히 미약합니다. 게다가 비마이크로소프트 운영체계를 쓰는 아이폰, 안드로이드폰이 대세를 형성하고 있어서 인터넷 익스플로러에서만 잘되면 만사휴의였던 시대는 끝나가고 있습니다. 여기에 차세대 웹 언어인 HTML5까지 등장하고 있어 긴장을 더하고 있습니다. 이런 흐름이 몰고올 변화는 2009년 하반기 이래 애플의 아이폰이 국내 IT 생태계를 짧은 시간에 어떻게 바꾸어놓았는지를 돌이켜보면 상상할 수 있습니다.

이 미디어 임베딩을 제대로 하는 것이 그렇게 어려운 것도 아닙니다. 제대로 동작한다고 입증된 모범 답안같은 게 하나 있으면, 그것을 자신의 pc에 저장해두고 필요하면, 노우트패드 등의 편집기로 불러내어 미디어의 인터넷 주소만 바꿔치기하면 되는 것입니다.
예를들어, 아래와 임베드 구문은, (비록 웹의 국제 표준 기구인 W3C의 표준에는 어긋나지만) 어떤 브라우저에서도 아무런 오류없이 임베드된 미디어를 재생할 수 있게 한 것입니다.

<embed type="video/x-ms-asf-plugin" src="" width="300" height="45" SendPlayStateChangeEvents="true" enabled="true" invokeURLs="false" allowScriptAccess="never" showControls="true" showStatusBar="1" enableContextMenu="0" autoStart="1" playCount="1" volume="10" />

이 임베드 구문을 마우스로 범위 설정한 다음 자신의 pc의 노우트패드 속에 붙여넣어 적당한 이름으로 저장해두는 것이 좋습니다. 그 이후부터는 누구든지, 웹 사이트에 글을 올리면서 음악을 임베드하고 싶을 때는 위의 구문을 복사한 뒤 'src="...""' 속의 인터넷 주소를 지워비리고, 그 자리에 자신이 좋아하는 미디어 파일의 인터넷 주소(URI)만 마우스로 복사해와서 붙여넣으면 됩니다. 그 형식이 'http://...'나 'mms://...' 혹은 'rtsp://...' 등으로 시작하고 마지막은 음악 파일 이름인 mp3, wma, asf, asx 등으로 되어 있으니 처음과 끝만 잘 구분해서 마우스로 범위 설정을 한 뒤 오른쪽 마우스 버튼을 누르거나, 브라우저의 '편집 - 복사' 메뉴를 누른 뒤, 다시 웹 페이지로 돌아와 브라우저의 '편집 - 붙여넣기' 메뉴를 클릭하면 되는 것입니다. 복잡한 것도 없고 어려운 것도 없고 단지 '오려붙이기'(Cut & Paste)만 할 줄 알면 누구나 오류없이 음악을 올릴 수 있고, 인터넷 익스플로러든 파이어폭스든 오페라든 다른 어떤 브라우저에서도, 윈도우즈 미디어 플레이머 및 해당 브라우저의 플러그인만 제대로 설치 설정되어 있다면, 그것을 오류 없이 빠르게 재생할 수 있습니다.

단, 위의 임베드 구문을 개인의 취향에 맞게 수정하려고 할 때는 주의할 것이 있습니다..

1. 'embed ...' 속의 각 항목 즉 변수('type', 'src', 'volume' 등)의 사이는 반드시 한 칸만 띄어야 합니다.

2. 모든 변수의 값은 위와 같이 ""(겹따옴표)로 감싸야 합니다.

3. 위에서 type="video/x-ms-asf-plugin"이라고 지정했는데, 이것이 핵심입니다. wma, wmv, asf, asx, mp3 등 바람새에서 통용되는 대부분의 음악 및 비디오 파일에 적용할 수 있으므로, 각 확장자별로 일일이 고유한 MIME type을 기억하거나 써넣어야 할 필요가 없으므로 아주 편리합니다. 이것 대신에 'application/x-mplayer2'를 써도 같은 결과를 낳습니다. 따라서 이 type="..."은 전혀 손댈 필요가 없습니다.

4. 위의 임베드 구문은 윈도우즈 미디어 플레이어 플러그인용인데, 몇 가지 변수는 그 값을 숫자로만 지정해야 인터넷 익스플로러가 아닌 다른 브라우저에서 잘 인식합니다. 즉, 위에서처럼 enableContextMenu, showStatusBar, autoStart는 그 값을 필요에 따라 '0' 또는 '1'로만 지정해야 합니다. 그렇게 하지 않고, 'true', 'false' 등으로 지정하면 다른 브라우저의 낡은 윈도우즈 미디디 플레이어 플러그인에서는 그것을 무조건 '1'로 처리해버립니다.

5. 재생기 객체를 감추고 음악만 들을 수 있게 하려면 위의 임베드 구문에서 width="0" height="0"로 바꾸면 됩니다. 별도로 'hidden=".."'을 쓸 필요가 없습니다. 이 'hidden'은 마이크로소프트에서도 권장하지 않는 것이고 어떤 브라우저에서는 제대로 인식하지 못합니다.

6. 재생을 반복하게 하기 위해 흔히 쓰는 'loop' 대신에 'playCount'를 쓰는 것이 좋습니다. 그 값으로 재생 횟수를 숫자로 지정하면 됩니다. '1', '3', '999' 등을 입력하면 됩니다. 'loop'는 'hidden'과 마찬가지로 마이크로소프트에서도 권장하지 않는 것입니다.

7. 음악이 아니라 동영상을 임베드하려고 할 때는, 위 'src="..."'에 비디오 파일의 인터넷 주소를 붙여넣은 뒤, 'width="640" height="480"' 등으로 적당한 재생 화면의 크기를 지정해야 합니다.

8. 유튜브 등 UCC 사이트의 동영상을 주어진 형식으로 복사해올 때는 크게 신경쓸 것이 없습니다. 참고로 유튜브 동영상의 MIME type은 'application/x-shockwave-flash'입니다.

8. 파이어폭스와 오페라 브라우저를 쓰는 경우에는 윈도우즈 미디어 플레이어 플러그인 버전 11을 설치하면 위에서 언급한 미디어를 대부분 잘 재생합니다. 그런데, mp3 형식을 재생하려면 퀵타임(Quicktime) 플러그인을 별도 설치해야 합니다. 파이어폭스는 pluginreg.dat를 편집해서 퀵타임을 설치하지 않고 윈도우즈 미디어 플레이어 플러그인(버전 11)으로 처리하게 할 수 있으나 오페라는 그렇지 않습니다. mp3의 표준적인 MIME type은 원래 'audio/mpeg' 혹은 'audio/x-mpeg'입니다.
파이어폭스용 윈도우즈 미디어 플레이어 플러그인은 'Windows Media Player Firefox Plugin'를 클릭하여 받아서 설치하면 됩니다. 이것은 오페라 등 다른 브라우저에서 자동으로 공유하므로 한 번만 제대로 설치하면 됩니다.


요즘 스마트폰 사용자가 급증하고 그것을 통해 멀티미디어를 감상하는 경우도 많은데, 인터넷에 미디어를 올리는 경우에는 이제 스마트폰 사용자도 고려해야 합니다.

스마트폰(안드로이드폰, 아이폰)에서 지원하는 미디어 형식에 대해서는 이 문단 하단의 링크를 참조하면 됩니다.

아이폰에서는 공식적으로 플래시 미디어를 지원하지 않아서 유튜브 동영상 등을 처리할 수 없는데, 해킹(탈옥, jail-break)을 해서 플래시 미디어를 처리하는 경우도 있겠지만, 아이폰용 skyfire라는 브라우저를 설치하면 탈옥하지 않더라도 100% 만족스럽지는 않아도 플래시 미디어를 처리할 수 있다고 합니다.

스마트폰 사용자의 급증에 맞춰 기존 인터넷 사이트에서는 그 컨텐츠를 '모바일 모드'와 '데스크탑 모드'(사이트별로 이름은 '모바일 화면', 'pc 화면' 등으로 다르게 부를 수 있음)로 제공하는데, 데스크탑 모드로 제공된 유튜브 동영상을 스마트폰에서 보려면 잘 되지 않는 수가 많습니다. 안드로이드폰의 경우에는 아래 방법을 쓰면 대부분은 해결할 수 있을 것입니다.

pc에서 올린(링크한) 유튜브 동영상이 스마트폰에서 재생되지 않는 수가 많습니다. 그 페이지가 스마트폰용이 아니라 pc용이기 때문입니다.
이럴 때는 스마트폰의 유튜브 앱을 쓰지 말고, 브라우저(돌핀 브라우저 HD 추천)로 그동영상을 재생하게 하는 것이 좋습니다. 돌핀 브라우저 HD는 안드로이드 마켓에서 무료로 전송받아 설치할 수 있습니다.
설치 후 브라우저의 설정에서 기본 모드(user agent)를 '데스크탑(desktop)'으로 해서 저장하고, 나중에 페이스북 앱 등에서 유튜브 동영상을 만났을 때 그 동영상을 손가락으로 톡 치면 나오는 메뉴에서 먼저 유튜브 앱을 시도해보고 나서 "휴대 전화에서 볼 수 없는 동영상입니다." 유사한 메시지가 나오면 다시 원래 화면으로 돌아가서 앞서 언급한 절차를 반복해서 돌핀 브라우저 HD를 선택하면 됩니다. 유튜브 앱도 써야 하니 돌핀 브라우저 HD를 기본값으로 체크하지는 말고 볼 때마다 수동으로 선택하는 것이 좋습니다. 이러면 데스크탑 모드로 올라온 유튜브 동영상을 대부분 볼 수 있을 것입니다.
브라우저 설정은, 돌핀 브라우저 HD를 실행하고 스마트폰 하단의 메뉴를 누르면 나타나는 선택 항목 중 '더보기', '설정'을 차례로 누릅니다. 거기서 스크롤해서 아래로 쭉 내려가면 '고급 설정'이 있습니다. 이것을 누른 뒤 나타나는 화면에서 'user agent'를 찾아서 '모바일(mobile)'에서 '데스크탑(desktop)'으로바꾸면 됩니다.

안드로이드 폰

아이폰

남는 문제

1. 위에서 임베드(embed) 구문을 주로 다루었는데, 웹의 국제 표준 기구인 W3C(World Wide Web Consortium)에서는 오브젝트(object) 구문을 권장합니다.
그러나, 현실적으로 여러 가지 복잡한 조건 때문에 임베드 구문과 오브젝트 구문을 혼용하는 경우가 많은데, 우리가 쉽게 퍼오는 유튜브나 Daum 등 국내 포털 사이트에서 그렇게 하고 있습니다.

오브젝트 구문은 ‘Bye Bye Embed by Elizabeth Castro’를 참조하시면 좋습니다.

HTML5에서 멀티미디어와 관련된 두드러진 특징은 미디어 플레이어와 코덱을 자체에 내장한 브라우저가 웹 페이지의 미디어 재생을 외부 프로그램의 개입 없이 직접 처리하는 것입니다. HTML5에 대해서는 HTML5 audio 태그, 'HTML5 video 태그'와 ‘HTML5 소개 및 현황’을 참조하시면 됩니다. 'HTML5 audio 태그', 'HTML5 video 태그'에서는 기존의 임베드 구문과는 다르지만 음악과 동영상을 포함시키는 간단한 형식을 쉽게 이해할 수 있으며, 'HTML5 소개 및 현황'은 웹 개발자를 대상으로 한 것이나 일반인들도 큰 흐름을 이해하기에는 좋습니다.

2. 위에서는 언급하지 않았지만, 임베드 구문에 한글 이름으로 된 폴더나 파일이 포함된 경우가 있는데, 복잡한 말을 피해서 간략히 언급하면, 가능하면 폴더나 파일 이름은 영어로 지정하는 것이 좋습니다. 최근에 네이버, Daum 같은 국내 포털 사이트를 위시해서 많은 사이트가 UTF-8(Unicode, 유니코드)로 웹 페이지의 문자셋을 전환하였지만, 아직 과거의 한국어 문자셋인 KSC5601, EUC-KR을 쓰는 곳도 있어서 브라우저에 따라 그런 데이터를 제대로 처리하지 못하는 경우도 생깁니다. 요즘 나오는 여러 브라우저는 대부분 UTF-8 문자셋을 잘 처리하므로 근본적인 해결책은 모든 웹 사이트가 UTF-8로 문자셋을 변환하는 것입니다.

3. 사용하는 사이트에서 고유한 형식으로 통일적 형식으로 멀티미디어를 재생하는 경우(자바스크립트로 동작하는 재생기 등)에는 위에서 언급한 방식을 개인적으로는 처리하지 못할 수도 있을 것입니다. 자바스크립트로 구현된 재생기 관련 사이트는 위에서 예로 든 '김민기' 사이트(Human & Technology Syndicate)를 참조하시기 바랍니다. 국제표준을 준수하는 설치형 블로그 소프트웨어인 Textcube(Tistory는 이것의 서비스형 버전임)로 구축된 사이트입니다. 여기서는 운영체계, 기종 가리지 않고 다 재생됩니다. 자바스크립트로 구현되었다 하더라도 그것은 재생기의 인터페이스 등에 관한 것이지 이면에서는 위에서 말씀드린 내용이 그대로 적용됩니다. 즉 이면에서 임베드 구문을 쓰거나 오브젝트 구문을 쓰거나 혼용하더라도 위에서 적시한 MIME type 등을 바르게 지정하는 것이 관건입니다.

4. 이 글의 목적은, 저작권을 위배한 멀티미디어 유포를 장려하는 것이 아니라 임베드(오브젝트) 구문이 제대로 된 웹 페이지에서 운영체계나 브라우저와는 무관하게 인터넷에서 누구나 쾌적하게 멀티미디어 감상을 하게 하는 것입니다.