커피중독자

웹페이지에 음악을 집어넣는 가장 단순한 방법은 a href 링크를 이용하는 것입니다만 세련되지 못한 방법입니다.

그렇다면 다른방법은 무었이 있을까요? 예전에 사용하던 방식으로 Netscape용 <embed> 와 InternetExplorer(이하 IE) 용 <bgsound> 를 사용하는 방법이 있습니다. 하지만 이제는 시대의 유물이 되었습니다. 현재는 <object> 를 사용합니다. 다음은 <object> 태그를 사용하여 mp3 파일을 삽입하는 기본 코드입니다.

<object type="audio/x-mpeg" data="test.mp3" width="160" height="20" autoplay="false"></object>

"type"은 파일의 특성(mp3, mov, ra 등..)을 확인하는 mime type 입니다. "data" 는 url 처럼 출력을 원하는 파일을 가르킵니다. test.mp3 를 출력을 원하는 파일의 이름이나 주소로 변경하면 됩니다. "width"와 "height"로 컨트롤러의 사이즈를 결정합니다. "autoplay"는 말 그대로의 뜻입니다. 그리고 모든 브라우저에서 인식되는것은 아니지만 추가적인 속성들을 사용할 수 있습니다.

지금까진 매우 쉽지만, 이제 조금씩 복잡해 집니다. 위의 코드는 W3C규약에 따른 필요한 모든것과 여러 브라우저들을 지원하기 위한 정보들을 모두 가지고 있습니다. 하지만 엿같은 IE가 항상 말썽이죠. IE6, 7 이 원하는 코드를 조금 추가해줘야 합니다.

<object type="audio/x-mpeg" data="test.mp3" width="160" height="20" autoplay="false">
    <param name="src" value="test.mp3" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
</object>

"param" 태그는 <object> 안의 내용과 같은 내용을 포함하고 있습니다. 단지 표현을 다르게 하는것 뿐입니다. object에 속성이 추가되면 param 또한 추가 할 수 있습니다.

이제 다 끝난걸까요. 아닙니다. 이 Fucking IE 의 옛 버전에서 윈도우미디어용이 아닌 파일을 윈도우미디어로 사용할때의 문제를 해결하기 위한 방법을 추가해 줘야 합니다. 속성에 "class id" 를 추가하고 <object> 안에 또하나의 <object> 를 넣는 방식입니다. 하나는 IE를 위해 classid를 사용하고, 다른 하나는 기타브라우저들을 위해 mime type을 사용합니다. 표준을 준수하는 FireFox와 같은 착한 브라우저들은 classid 가 있는 object를 무시하고 mimetype 이 있는 object로 넘어갑니다. 하지만 IE는 classid 가 있는 object를 처리하고 나서 mimetype이 있는 object를 만나면 혼란을 일으키며 병신같은 화면출력을 만들거나 에러를 토해냅니다. 그래서 우리는 여기에 좀 독특한 주석을 달아 처리합니다. 일명 IE핵이라고 부르는 주석입니다. (IE는 정말 병신같은 브라우저입니다.) 그렇게 해서 만들어진 소스는 다음과 같습니다.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="20">
    <param name="src" value="test.mp3" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
    <!--[if !IE]> <-->
    <object type="audio/x-mpeg" data="test.mp3" width="160" height="20">
        <param name="src" value="test.mp3" />
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
    </object>
    <!--> <![endif]-->
</object>

마지막으로 일부 오래된 브라우저들(Netscape 4) 은 구식태그인 <embed>를 필요로 합니다. 이 태그는 다음과 같은 object 태그 사이에 포함될 수 있습니다.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="20">
    <param name="src" value="test.mp3" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
    <!--[if !IE]> <-->
    <object type="audio/x-mpeg" data="test.mp3" width="160" height="20">
        <param name="src" value="test.mp3" />
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

        <embed src="test.mp3" type="audio/x-mpeg" width="160" height="20" autostart="false" controller="true" ></embed>
    </object>
    <!--> <![endif]-->
</object>

드디어 object 태그가 현재까지 사용되는 대부분의 브라우저에서 돌아갈수 있도록 완성되었습니다.

변경점.

만약 재생하려는 음악파일의 포맷이 다르다면 어떻게 해야 할까요. "type"은 다음의 목록에 따라 변경하면 됩니다.

• au (type="audio/basic")
• wav (type="audio/wav" or "audio/x-wav")
• ra (type="audio/x-pn-realaudio") 
• mp3 (type="audio/x-mpeg")
• wma (type="audio/x-ms-wma")
  

"class id" 와 "codebase" 는 다음 목록에 따라 변경합니다.

• Quicktime player :

• classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
• codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  

• Windows media player :
• classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
• codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
  
• Real Audio :
• id=RVOCX
• classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
  
• Flash Shockwave :
• classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
• codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0"
  

오디오와 마찬가지로 가장좋은 방법은 <object>를 사용하는 것입니다. 또한 오디오에서 사용한 방법과 꽤나 비슷한 방식으로 사용합니다. 오디오에서 사용한 예제에서 type 과 파일정의만 변경해 주면 됩니다. 단지 오디오에서는 컨트롤러의 높이만 정의해 주었지만 비디오의 높이를 정의할때는 비디오파일의 높이에 컨트롤러의 높이를 더해서 정의해 주어야 합니다. 이는 일반적으로 16-20픽셀 사이입니다. 따라서 비디오의 크기가 320 x 240 이라면 320 x 256 으로 지정해 주면 됩니다. 이 모두를 적용한 소스는 다음과 같습니다.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
    <param name="src" value="test.mov" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
    <!--[if !IE]> <-->
    <object type="video/quicktime" data="test.mov" width="320" height="256">
        <param name="src" value="test.mov" />
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

        <embed src="test.mov" type="video/quicktime" width="320" height="256" autostart="false" controller="true" ></embed>
    </object>
    <!--> <![endif]-->
</object>

비디오포맷이 변경되면 오디오때와 마찬가지로 type 과 classid, codebases 를 변경해 주면 됩니다.

Real Media Player를 위한 별도설정

리얼미디어를 보기 위해서는 다음의 태그를 추가해 주어야 합니다.

<param name="controls" value="ImageWindow">
<param name="console" value="one">

그리고 controller 파라미터는 여기선 쓸모가 없습니다. 컨트롤러를 보기위해선 컨트롤러부분을 별도로 삽입해 주어야 합니다. 기본적으로 지금까지 작성한 object 블럭 전체를 그대로 복사해서 붙이고 console 파라미터값을 one 에서 all 로 변경해 주기만 하면 됩니다. 마지막으로 다른것들은 그대로 두고 플로그인 참조를 삭제합니다. 변경된 소스는 다음과 같습니다.

<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320" height="256">
    <param name="src" value="test.rm" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="controls" value="ImageWindow">
    <param name="console" value="one">
    <!--[if !IE]> <-->
    <object type="application/vnd.rn-realmedia" data="test.rm" width="320" height="256">
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="controls" value="ImageWindow">
        <param name="console" value="one">
    </object>
    <!--> <![endif]-->
</object>
<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320" height="256">
    <param name="src" value="test.rm" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="controls" value="ImageWindow">
    <param name="console" value="all">
    <!--[if !IE]> <-->
    <object type="application/vnd.rn-realmedia" data="test.rm" width="320" height="256">
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="controls" value="ImageWindow">
        <param name="console" value="all">
    </object>
    <!--> <![endif]-->
</object>

출처 : http://www.danfergusdesign.com/classfiles/generalReference/objectTag.html

사용브라우저 : IE 9, FF 16, CHROME 23, SAFARI 5

* ff 에서 제공하는 플러그인 (wmpfirefoxplugin.exe) 이 설치된 상태입니다.

<embed src="test.wmv" loop="0" hidden="false" autostart="false" width="512" height="384"></embed>

네개 모두 잘 돌아갑니다.

src : 재생할 동영상 주소

loop : 반복 횟수

hidden : 숨김여부, 배경음악등을 사용할때

autostart : 자동시작여부

width : 화면너비

height : 화면높이

<object width="512" height="384" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="video/x-ms-wmv">
    <param name="Url" value="test.wmv" />
    <param name="animationatstart" value="1" />
    <param name="autostart" value="true" />
    <param name="displaymode" value="4" />
    <param name="enablecontextmenu" value="false" />
    <param name="enabled" value="1" />
    <param name="PlayCount" value="1" />
    <param name="showcontrols" value="true" />
    <param name="ShowAudioControls" value="true">   
    <param name="showstatusbar" value="true" />
    <param name="ShowDisplay" value="false">
</object>

IE만 됩니다.

----------------------------------------------

<object type="video/x-ms-asf-plugin" data="test.wmv" width="512" height="384"></object>

IE만 빼고 다 됩니다.

IE에서 다음과 같이 나옵니다.

활성화 안됨.

----------------------------------------------

<object type="application/x-mplayer2" height="384" width="512">
    <param name="filename" value="test.wmv">
</object>

네개 브라우저 모두 동작합니다.

if (/MSIE/.test(navigator.userAgent)) { ... } else { ... }

프로그래머는 외국어 번역가라 생각합니다.

물론 영어로 작성하긴 합니다만 -_-ㅋ 그 뜻이 아니고 한글로 작성된 문장을 외국사람이 이해할 수 있도록 해주는 번역가와 클라이언트의 언어를 컴퓨터가 알아듣는 언어로 번역해 주는 사람이란 점에서 비슷하다고 생각합니다.

좀 더 자세히 풀어 보겠습니다.

한글을 영어로 번역 하는 작업은 크게 어렵지는 않습니다. 우리에겐 인터넷이 있으니까요.^^; 중학교 고등학교 6년간의 수업에서 어느정도 주워들은 정도의 기본만 있다면 google신의 힘을 빌어 누구든지 할 수 있습니다. 좀 막히는 부분들은 숙어, 속담, 숨은뜻, 관용어 등이 있겠지요? 하지만 이것도 검색하다 운이 좋다면 얻어 걸릴수도 있겠죠. 못찾을수도 있구요. 그보다는 번역가의 영어실력에 따라 얼마나 세련된 번역이 가능한지 정도의 차이가 있겠죠.

예를 들어 "숨기고 싶은 비밀" 이라는 말을 번역해야 합니다. 구글번역기로 돌려 봅니다.

You want to hide a secret

이게 외국의 정치계에서 사용하는 관용어구로는 다음과 같은 말을 사용한다고 합니다.(물론 검색해서 나온겁니다. 예로 들자고 쓴거고 틀릴 수도 있습니다. 저두 영어는 잘 모르거든요 ㅠㅠ)

skeleton in the closet

그냥 뜻만 보자면 벽장속의 해골입니다. 숨기고 싶은 비밀인거죠.

흑인영어도 예를 들어 보겠습니다.

"오랜만에 만나네요" 를 영어로 번역하는데 오리지널로 하면

It's been a while since I've been you

흑인영어로 하면

I haven't seen you in a minute

이라고 합니다. 미국인들에게 뭐로 해도 뜻은 통하겠죠? 미국에선 백인영어가 세련된 영어라고 하지요.

사투리도 있습니다.

한글을 "너랑 나랑" 으로 하든 "니캉 내캉" 으로 하든 영어로 번역할때 "You and Me" 라고 해주면 번역된 글을 보는사람에게 큰 문제가 없습니다. 하지만 번역을 사투리로 한다면 힘들어 지겠죠. 다음의 예를 들어 보겠습니다.

출처: http://puwazaza.com/300

미국의 남부지방에서는 about to 대신 fixing to 를 사용한다고 합니다. 한술더떠 want to를 wanna 로 줄여서 사용하듯 fixna 로 줄여서 사용한다고 합니다. i'm fixna see my mama 는 곧 엄마를 만날거라는 뜻이라고 합니다. ..이게 뭥미.@_@.

남부지방 사람이 아닌 미국인중에도 알아듣는사람도 있겠고 못알아듣는 사람도 있겠죠. 식당아주머니에게 된장찌개뚝배기를 넘기며 "이거좀 뜨사주세요" 혹은 "데파주세요" 하면 눈치로 알아듣고 다시 데워 주시는 분도 있을거고 "네?..." 라고 못알아 듣는 분도 있는 것처럼요.

위에 적은 이야기가 그대로 반복됩니다.

학원이 됬든 독학이 됬든 기본기만 배운사람이든, 대학4년 전공으로 배운사람이든 프로그램은 누구나 짤 수 있습니다. 구글신이 계시니까요. 검색하면 다 나옵니다. 운좋게 얻어걸리면 남들이 다 짜놓은 소스를 그대로 퍼다 쓸수도 있습니다. 우왕ㅋ굳ㅋ 손안대고 코풀었네요. 혹은 숙어나 관용어구와 비교할 수 있는 라이브러리의 사용법을 배울수도 있습니다. 저의 경우 String.replaceAll() 을 사용할때 검색변수가 regex 여서 자꾸 정규식으로 적용되어 불편함을 느낀적이 있었습니다. 그래도 다른방도가 없는줄 알고 그냥 불편한대로 쓰다가 나중엔 직접 작성해서 쓰고 있었는데 우연히 어떤 소스를 보고 아파치에서 제공하는 StringUtil 라이브러리를 알게 되었습니다. 하나 얻어 걸린거죠.

어쨌거나 뭐가 됐든 번역은 됩니다. 컴퓨터가 알아듣는다는 이야기지요. 프로그램은 돌아갑니다. 

바디랭귀지건 흑인영어건 사투리건 초등학생 수준의 영어건 뜻은 통하고 알아들어먹으면 장땡인거죠.

정말 그럴까요? 뭐.. 그렇긴 하죠.. 어쨌거나.

번역가와 비교해 봤을때 프로그래머의 기본 소양은 두가지라고 생각합니다.

첫번째는 한글로 문장을 만드는 일입니다. 번역가는 다른 문장가가 쓴 글을 번역하면 되지만 프로그래머는 스스로 글도 작성하고 번역도 해야되지요. 클라이언트(또는 본인)의 요구사항을 먼저 잘 만들어진 문장으로 만들어야만 합니다. 로직을 짜고 설계를 하는 능력과 같다고 생각합니다.

아직도 잘 믿겨 지진 않지만 저보다 경력이 많은 한 친구는 회사에서 면접을 담당하는데요. 면접자들중에는 4년제 전공을 하고도 정말 간단한 로직을 짜보도록 요청하면 30분이 넘도록 작성을 못하는 사람들이 종종 있다고 하더군요. 물론 보면 어떻게 돌아가는지는 이해한다고 하네요. 문장을 못 만들지만 독해는 가능한 케이스네요.

두번째는 점점 세련된 영문으로 번역할 수 있도록 노력하는겁니다. 사람도 보는것만으로 해석이 가능한 프로그램을 짜는 겁니다. 컴퓨터만 알아먹게 만들면 된다고 하시면 뭐 할말 없습니다.ㅋ

Calendar.DAY_OF_WEEK == 6 이라고 하면 컴퓨터가 알아듣는데 문제는 없습니다. 하지만,

Calendar.DAY_OF_WEEK == Calendar.FRIDAY 라고 적는다면.. 금요일인지 알아보는거구나..라고 사람도 알아보는데 어려움이 없겠죠. (예제의 허접함을 손가락질 하지 말아주셈..)

MailSender.sendMail(a1, a2, a3, a4);

이런 코드.. 짜증나죠 ㅋ 앞뒤로 한참을 추적하면서 분석해야 뭔지 찾을 수 있는.. 다음처럼 읽기 쉬운코드로 만들면 좋을텐데 말이죠. 그렇게 어려운 작업도 아닌데.

MailSender.sendMail(mailFrom, mailTo, subject, content);

헌데, 캬~ 정말 예제 더럽게 못만드네요. 책쓰는분들이 존경스러운 순간입니다. --a

이런점들이 프로그래머는 번역가와 같다고 생각하게 하는 부분들입니다.

항상 세련된 영문을 작성할 수 있도록 노력을 멈추지 말아야 겠습니다.