Using the Right Markup to Invoke Plugins

이 글은 올바른 HTML을 사용하여 플러그인을 불러오는 방법에 대한 글입니다. 여기서 object 요소(element)와 embed 요소에 대해 살펴볼 것이고, 웹 페이지에서 Java를 불러오는 가장 적당한 HTML 사용법에 대해서도 자세히 다룰 것입니다.

object 요소: W3C 표준과 크로스 브라우저 이슈

object 요소는 HTML 4.01 스펙의 일부이며 플러그인을 불러오는 방법으로 권장되는 방식입니다. object 요소의 사용법은 이 절에서 간단히 이야기할 경고 몇 가지에 영향을 받습니다.

전통적으로 object 요소는 Microsoft Internet Explorer와 Netscape 7 같은 Mozilla 기반 브라우저에서 서로 다르게 사용되었습니다. IE에서는 ActiveX 기술로 만든 플러그인을 불러오는데 object 요소를 사용했습니다. 여기 그러한 예제가 있습니다.

<!-- IE ONLY CODE -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 
width="366" height="142" id="myFlash">
    <param name="movie" value="javascript-to-flash.swf" />
    <param name="quality" value="high" />
    <param name="swliveconnect" value="true" />
</object>

위의 예제에서 object 요소의 classid 속성은 "clsid:"라는 URN을 지정하고 있는데, 이것은 ActiveX 컨트롤의 유일한 식별자("D27..."로 시작하는 문자열)입니다. 사실 이 식별자는 Macromedia Flash 플러그인의 식별자입니다. 이런 방식으로 플러그인을 불러오려면 사용하려는 플러그인의 식별자를 알아야 합니다. codebase 속성은 ActiveX 컨트롤을 포함하는 CAB 파일을 얻을 수 있는 위치를 가리킵니다. codebase 속성은 획득 메커니즘 즉, 컨트롤이 존재하지 않을 경우 이를 얻을 수 있는 방법을 알려주기 위해 사용되었습니다. Flash ActiveX 컨트롤이 설치되지 않았다면 IE는 codebase 속성에 지정된 URL로 가서 ActiveX 컨트롤을 받을 것입니다. object 요소의 자식으로 추가된 param 요소들은 Flash 플러그인의 설정 매개변수를 지정하고 있습니다. 예를 들어, the param name="movie"는 Flash 플러그인이 재생할 SWF 파일의 위치를 지정합니다.

Netscape 7.1은 Microsoft® Windows Media Player의 경우 object 요소로 ActiveX를 불러오는 이런 방식을 지원합니다. Netscape 7.1에서 지원하는 유일한 ActiveX 컨트롤이 Windows Media Player입니다. 자세한 내용은 다른 글에서 다루고 있습니다.

Netscape 7같은 브라우저는 위와 같은 방법으로 마크업을 사용해서는 Flash 플러그인을 불러올 수 없습니다. Netscape7은 ActiveX과 ActiveX 기반 컴포넌트 호출을 지원하지 않기 때문입니다. Netscape 7.1이 예외적으로 Windows Media Player를 지원하는 것입니다. Mozilla 기반 브라우저는 Netscape 플러그인 아키텍처를 지원합니다. 이 아키텍처는 ActiveX 같은 COM 기반이 아니므로 유일한 식별자를 이용해서 불러내는 것이 아니라 MIME 형식을 기반으로 플러그인을 불러옵니다. Mozilla 기반 브라우저는 MIME 형식을 이용한 object 요소를 지원합니다. Macromedia Flash 플러그인을 불러오는 예제가 아래에 있습니다.

<object type="application/x-shockwave-flash" data="javascript-to-flash.swf" 
width="366" height="142" id="myFlash">
    <param name="movie" value="javascript-to-flash.swf" />
    <param name="quality" value="high" />
    <param name="swliveconnect" value="true" />
    <p>You need Flash -- get the latest version from 
    <a href= "https://www.macromedia.com/downloads/">here.</a></p>
</object>

위 예제에서 application/x-shockwave-flash는 Flash의 MIME 형식입니다. 이것은 Mozilla 기반 브라우저에서 Netscape의 Flash 아키텍처를 불러옵니다. data 속성은 재생할 SWF 파일을 지정하고 있습니다. 설정 매개변수(param 요소들)는 IE와 Mozilla 기반 브라우저에서 동일하게 사용됩니다. 사실 위의 사용 방법은 IE에서도 잘 동작합니다. IE는 ActiveX 스타일의 classid 호출 뿐만 아니라 Flash 같은 특정 MIME 형식을 이용한 호출도 이해하기 때문입니다.

MIME 형식을 이용해서 Flash 플러그인을 불러오는 방식은 IE와 Netscape 7에서 모두 잘 동작하기 때문에 위의 방법을 두 브라우저에서 동일하게 사용해도 됩니다. 그러나 object 요소를 Mozilla 기반 브라우저와 IE에서 사용할 때 우리가 반드시 명심해야할 몇 가지 주의 사항들이 있습니다.

주의 사항

• 위 예제에서 살펴본 방식을 이용하여 object 요소를 양쪽 브라우저에서 사용할 경우, 양쪽 브라우저에 동일한 "획득 메커니즘"을 제공하지는 못합니다. ActiveX 컴포넌트를 포함하는 서명된 CAB 파일을 지정하기 위해서 codebase 속성을 사용할 수 없습니다. Netscape 7같은 Mozilla 기반 브라우저에서는 그 방법이 동작하지 않기 때문입니다. 게다가 IE에서 codebase를 획득 메커니즘으로 사용하는 방식은 HTML 4.01 스펙에 완벽히 부합하는 것이 아닙니다. HTML 4.01에서 codebase 속성은 data, archive, classid 속성에 지정된 URN을 한정(qualify)하는데 사용되어야 한다고 말하고 있습니다. Mozilla 소스 코드에 기반한 새로운 Netscape 브라우저에서는 존재하지 않는 플러그인을 얻을 수 있는 위치를 지정하는 특별한 param 요소를 지원할 계획이지만 Netscape 7에는 그런 기능이 없습니다. 그 기능은 Mozilla bug 167601에서 논의중입니다.

• IE는 HTML 4.01 스펙을 따르는 중첩된 object 요소를 제대로 표시하지 않습니다. 스펙에 따르면 우리는 object 요소를 중첩시킬 수 있고, 브라우저는 가장 바깥쪽 요소를 표시할 수 있으면 진행을 멈추고, 그렇지 않으면 표시할 수 있는 요소를 찾을 때까지 계속해서 안쪽 요소를 찾아야 합니다. IE는 중첩된 object 요소들을 연속으로 나열된 object 요소처럼 표시합니다. 그러므로 아래의 예제는 IE가 똑같은 Flash 애니메이션을 두 번 표시하게 만듭니다.

<!-- 의도한 대로 동작하지 않는 사용법입니다 -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 
width="366" height="142" id="myFlash">
    <param name="movie" value="javascript-to-flash.swf" />
    <param name="quality" value="high" />
    <param name="swliveconnect" value="true" />

	<object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
	 width="366" height="142" id="myFlashNSCP">
		<param name="movie" value="javascript-to-flash.swf" />
    		<param name="quality" value="high" />
    		<param name="swliveconnect" value="true" />
		<p>You need Flash -- get the latest version from
		 <a href="https://www.macromedia.com/downloads/">
		here.</a></p>
	</object>

</object>

• 웹 페이지를 만드는 사람들은 Mozilla 기반 브라우저에서 획득 메커니즘을 지정해야 합니다. codebase 속성을 사용해서 플러그인을 받을 수 있는 위치를 지정하지 않는다면 브라우저가 자동으로 플러그인을 받아오는 일은 없을 것입니다. codebase를 지정하지 않았는데 플러그인이 설치되어 있지 않다면 브라우저는 대체 텍스트만 표시할 것입니다. Netscape 플러그인 검색 서비스를 이용해서 플러그인을 받아오거나 하지 않을 것이라는 말입니다. 이런 동작이 HTML 4.01 스펙에 어긋나는 것은 아니지만, 웹 페이지를 만들 때 힘들게 획득 메커니즘을 지정해야만 합니다. 최소한 없는 플러그인을 사용자들이 어디에서 받을 수 있는지 알려주는 대체 텍스트를 object 요소에 넣어야만 합니다. 자동으로 플러그인을 받는 편리한 기능을 추가하는 일은 Mozilla 오픈 소스 코드의 버그 토론의 주제 입니다.

• 몇몇 플러그인은 Mozilla 기반 브라우저에서 이해하지 못하는 param 요소가 있습니다. 한 예로 Macromedia Flash Player 플러그인 버전 6r.47까지는 Flash 플러그인이 재생해야 할 애니메이션 위치를 지정하는 <param name="movie" value="animation.swf"> param 요소를 이해하지 못했습니다. 이 문제를 피하려면 다음과 같이 object 요소의 data 속성을 사용해야 합니다. <object type="application/x-shockwave-flash" data="animation.swf"..../>. Flash 플러그인이 이 param 요소를 이해하지 못하는 문제는 Macromedia Flash Player의 버그이며 버그 데이터베이스에서 논의중입니다.

권장 사항

우리가 IE에서는 object 요소를 중첩해서 쓰지 못한다는 단점과 모든 브라우저에서 문제없이 동작하도록 하는 단순한 object 요소의 사용법은 없다는 단점을 극복하기 위한 가장 좋은 방법은 아키텍처에 따라 동적으로 object 요소를 동적으로 생성하도록 하는 것입니다. 예를 들어, IE 같이 ActiveX를 지원하는 브라우저에서는 classid 속성을 이용해서 object 요소를 만들고, Netscape 플러그인 아키텍처를 지원하는 브라우저에서는 MIME 형식을 사용하는 것입니다. 여기에 예제 JavaScript가 있습니다.

if (window.ActiveXObject)
{

// ActiveX를 지원하는 브라우저
// IE용 OCX 다운로드 URL을 포함한
// object 요소를 만듬

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="https://download.macromedia.com');
document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"');
document.write(' width="366" height="142" id="myFlash">');
document.write(' <param name="movie" value="javascript-to-flash.swf" />');
document.write(' <param name="quality" value="high" />');
document.write(' <param name="swliveconnect" value="true" />');
document.write('<\/object>');

}

else
{

// Netscape 플러그인 API를 지원하는 브라우저

document.write('<object id="myFlash" data="javascript-to-flash.swf"');
document.write(' type="application/x-shockwave-flash"');
document.write(' width="366" height="142">');
document.write('<param name="movie" value="javascript-to-flash.swf" />');
document.write('<param name="quality" value="high" />');
document.write('<param name="swliveconnect" value="true" />');
document.write('<p>You need Flash for this.');  
document.write(' Get the latest version from');
document.write(' <a href="https://www.macromedia.com/downloads">here<\/a>.');
document.write('<\/p>');
document.write('<\/object>'); 

}

Flash Satay도 살펴 보시기 바랍니다.

object 요소와 Java

Netscape 6.x, Netscape 7, CompuServe 7 같은 Mozilla 기반 브라우저는 Sun에서 제공하는 Java 플러그인을 포함하고 있습니다. Netscape 6.x이나 Netscape 7을 설치하는 사용자는 Java를 설치할지 말지 선택할 수 있습니다. Netscape Communicator 4.x와는 달리 Netscape 6.x와 7은 기본 Java 가상 머신을 가지고 있지 않으며 Sun의 플러그인에 의존합니다. Netscape Communicator 4.x가 사용되던 시절에는 Netscape Communications가 Java 1.5.0과 그 하위 버전을 지원하는 Java 가상 머신을 개발했습니다. 이제 Netscape 6과 7에서 Java 가상 머신은 Sun의 플러그인입니다. Netscape는 Netscape Java 가상 머신을 더이상 개발하지 않으며, 브라우저와 함께 제공하지도 않습니다.

Sun의 Java 플러그인은 다른 플러그인들처럼 object 요소로 불러올 수 있습니다. 다시 한 번 말하자면, IE에서는 일반적으로 object 요소에 ActiveX의 유일한 식별자를 지정하는 classid 속성을 같이 씁니다. 플러그인의 각 메이저 버전은 유일한 식별자를 갖고 있습니다. 예를 들어, 다음 예제는 JRE 1.4.1의 유일한 식별자를 가지고 IE에서 JRE 1.4.1을 불러오는 마크업입니다.

<!-- IE ONLY CODE -->
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
     width="460" height="160"
codebase="https://java.sun.com/products/plugin/autodl/jinstall-1_4_1-windows-i586.cab#version=1,4,1">
     <param...>
     <param...>
</object> 

위 예제는 이전에 설명했던 것과 같은 이유로 Netscape 7 같은 Mozilla 기반 브라우저에서는 동작하지 않을 것입니다. 즉, ActiveX 아키텍처를 참조하는 유일한 식별자와 함께 쓰인 classid를 Mozilla 코드에서는 지원하지 않기 때문입니다. Netscape 7과 그외 Mozilla 기반 브라우저에서는 적절한 MIME 형식으로 Java 플러그인을 호출할 수 있습니다.

<object type="application/x-java-applet;jpi-version=1.4.1_01"
width="460" height="160">
	<param name="code" value="Animator.class" />
	<param name="imagesource" value="images/Beans" />
	<param name="backgroundcolor" value="0xc0c0c0" />
	<param name="endimage" value="10" />
	<param name="soundsource" value="audio">
	<param name="soundtrack" value="spacemusic.au" />
	<param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" />
	<param name="pause" value="200" />
	<p>Java 플러그인이 필요합니다.
         <a href="https://java.sun.com/products/plugin/index.html">이곳에서</a> 플러그인을 받으십시오.</p>
</object>

위의 코드는 특정 버전을 가리키는 MIME 형식을 사용합니다. Mozilla 기반 브라우저에 JRE 1.4.1_01이 설치되어있지 않다면 대체 텍스트가 표시됩니다. MIME 형식에 항상 버전을 명시해야 하는 것은 아닙니다. 특정 버전에만 포함된 기능을 사용할 필요가 없다면 application/x-java-vm이라고 좀 더 일반적인 MIME 형식을 지정해도 잘 동작할 것입니다. 초기 진입 지점(initial entry point, "code" param 요소로 지정된 Animator.class)을 포함하여 애플릿을 위한 설정 매개변수들은 여러 개의 param 요소를 이용해 설정되었습니다.

Netscape 7같은 Mozilla 기반 브라우저는 또한 특별한 classid 속성을 지원합니다. 그것은 "java:" classid 입니다. 이 방법을 사용하여 Java를 불러오는 예제를 보십시오.

<object classid="java:NervousText.class" width="534" height="50">
	<param name="text" value="Java 2 SDK, Standard Edition v1.4" />
	<p>Java 플러그인이 필요합니다.
	   <a href="https://java.sun.com/products/plugin/index.html">이곳에서
	   </a>
      플러그인을 받으십시오.
	</p>
</object>

"java:" classid를 이용하면 주요(primary) 진입 지점을 지정할 수 있습니다. 나머지 설정 매개변수들은 param 요소를 통해서 지정합니다.

apple -- 대중적인 선택

applet 요소는 Java 애플릿을 호출하는데 있어 여전히 많은 지원을 받고 있고 가장 인기있는 방법입니다. Netscape 7과 CompuServer 7에서, applet 요소는 직접적으로 Java 플러그인을 호출합니다. 예제를 보십시오.

<applet code="NervousText.class" width="534" height="50">
	<param name="text" value="Java(TM) 2 SDK, Standard Edition v1.4" />
</applet>

applet 요소는 HTML 4.01 스펙에서 권장되지 않는 요소가 되었습니다. 그러나 Netscape 7 같은 Mozilla 기반 브라우저에서 그 요소를 사용한다면 플러그인이 존재하지 않을 때 자동으로 받는 기능을 사용할 수 있다는 장점이 있습니다. 브라우저가 Netscape 플러그인 검색 서비스를 이용해서 Java 플러그인을 내려받을 것입니다. 참고자료절에 applet 요소를 사용하는데 대한 관련 자료가 있습니다.

embed 요소

embed 요소는 Netscape 브라우저 초창기부터 플러그인을 불러오기 위한 방법으로 사용되었습니다. 일반적으로 embed 요소는 object 요소 안에 중첩되는 식으로 사용됩니다. 바깥쪽 object 요소는 IE를 위한 ActiveX 컨트롤을 호출하고, 안쪽의 embed 요소는 Netscape 플러그인을 호출하는 것입니다. 예제를 보십시오.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width=366 height=142 id="myFlash">
	<param name="movie" value="javascript_to_flash.swf" />
	<param name="quality" value="high" />
	<param name="swliveconnect" value="true" />
		<embed src="javascript_to_flash.swf" quality="high" width="366" height="142"
    		type="application/x-shockwave-flash"
    		pluginspage="https://www.macromedia.com/downloads/"
    		name="myFlash" swliveconnect="true">
    		</embed> 
</object>

참고자료절에서 embed 요소를 사용하는 방법에 대한 링크를 찾을 수 있을 것입니다. Netscape 브라우저에서 플러그인을 불러오기 위해서 가장 널리 쓰이고 있는 것이 embed 요소입니다. 그러나 embed 요소는 HTML 4.01 스펙에 포함되지 않았고, 따라서 W3C 표준이 아니라는 것을 알아둘 필요가 있습니다. embed 요소를 사용할 때 몇 가지 주의 사항이 있습니다.

• name 속성을 object 요소에 사용하지 마십시오. 특히 embed 요소의 name 요소에 사용한 것과 같은 이름을 사용해서는 안됩니다. 그렇게 하는 것은 HTML 4.01 표준을 어기는 것이지만 몇몇 코드 생성기는 object 요소에 name 속성을 추가합니다. Mozilla 기반의 브라우저에서는 같은 name 속성을 가진 object 요소가 있을 경우 JavaScript DOM 0 메소드를 이용하여 같은 name 속성을 가진 embed 요소에 접근할 수 없습니다. object 요소에는 id 속성을 사용하십시오. object 요소의 id 속성은 embed 요소의 name 속성과 같은 값을 가져도 상관없습니다.
• embed 요소는 설정 매개변수를 swliveconnect="true" 같은 식으로 커스텀 속성을 통해 전달할 수 있습니다. 이것은 object의 param 속성과 비슷합니다. 다른 플러그인 제조사는 서로 다른 설정 매개변수를 embed 요소에 전달할 것을 요구할 것입니다. 그 내용을 배울 것을 권합니다.

embed 요소의 획득 메커니즘 -- 설치되지 않은 플러그인을 받아오는 방법 -- 은 pluginspage 속성을 통해 동작한다는 것을 알아두십시오. 이 속성은 브라우저가 인식하지 못한 플러그인을 받을 수 있는 페이지를 가리킵니다. pluginurl 속성을 사용할 수도 있는데, 이 속성은 좀더 능률적인 다운로드를 위해서 XPInstall 파일을 직접 가리키는데 사용하 수 있습니다. embed 요소의 이 속성들에 대해서, Netscape 7과 Mozilla에서는 플러그인 검색 서비스 설정에서 설정할 수 있습니다. 편집(Edit) | 설정(Preference) | Navigator | Help Applications 에서 Netscape 플러그인 검색 서비스에 대한 설정을 할 수 있습니다. 사용자가 플러그인을 받을 때 항상 Netscape 플러그인 검색 서비스를 사용함(Always Use the Netscape Plugin Finder Service to get Plugins) 옵션을 체크해두면, 앞의 두 속성을 지정하거나 하지 않거나 차이가 없습니다. 브라우저는 항상 플러그인 검색 서비스를 사용하여 MIME 형식에 맞는 플러그인을 찾을 것입니다. 사용자가 옵션을 체크해두지 않았다면, 웹 페이지 작성자가 속성을 지정하지 않았을 때에만 플러그인 검색 서비스를 사용핫 것입니다.

원문 정보

• 저자: Arun K. Ranganathan, Netscape Communications
• 마지막 갱신: 14. Nov 2002
• 저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.
• 원문 링크: https://devedge-temp.mozilla.org/view.../index_en.html

참고자료

일반적 -- 스펙들

• HTML 4.01 스펙
• XHTML 1.0 스펙

object 요소

• object 요소에 대한 HTML 4.01 스펙

embed 요소

• EMBED 요소에 대한 플러그인 API 참고자료 on devedge-temp

Java

• HTML 4.01 Applet Definition (Deprecated)
• Java Plugin Homepage
• OBJECT, EMBED, APPLET과 여러 플러그인 버전에 대한 Sun의 문서
• applet 요소를 사용하는 웹 페이지에 대한 Sun의 예제
• OBJECT/EMBED 요소를 사용하는 웹 페이지에 대한 Sun의 예제

Netscape와 Mozilla의 버그와 앞으로의 방향

• Windows Media in Netscape Netscape 7.1과 Windows Media ActiveX 컨트롤
• Flash가 애니메이션을 불러오는데 param 속성을 지원하지 않음
• 편리한 다운로드를 위한 획득 메커니즘에 사용될 "특별한" param 속성을 지원할 계획
• 획득 메커니즘이 지정되지 않은 object 요소에 대한 플러그인 검색 서비스를 지원할 계획