내맘대로

베컴이 손담비문신을 새겨넣었다??
실제로 가능(?)하다 ㅎㅎ
베컴이 내 얼굴을 문신으로 새겨넣었다면??


http://www.photofunia.com 사이트에 본인 사진 한장 달랑들고 방문해보자
수많은 이미지중 맘에 드는 사진하나 골라서 자신의 사진한장을 업로드하는것으로 끝~
약 3~5초후면 멋진 합성사진이 나타난다

다들 방문해서 자신이 원하는 합성사진을 만들어보자
가입도 필요없다 ㅎㅎㅎ

이번에 다음에서 100% 인수한 티스토리 블로그에 고화실 대용량 동영상을 올리는 과정을 소개합니다. 티스토리 글쓰기 웹에디터에는 동영상을 올리는 기능이 별도로 있지만 용량제한이 있고 원본 동영상을 적당히 변환하기 때문에 원본 화질로 감상할 수 없는 단점이 있습니다. 아래의 동영상은 동영상 자르기 유틸리티로 최대 크기 10M 이하의 파일로 자르고 ASX 파일을 만들어 웹페이지에 윈도우즈 미디어 플레이어(Windows Media Player)로 출력하고 있습니다. (참고:동영상 코덱이 맞지 않으면 동영상이 보이지 않을 수 있습니다.)
그러면 대용량 동영상을 어떻게 올리는 것인지 소개해보겠습니다. 네이버, 다음, 네이트 같은 포털도 아래 소개하는 방법을 이용하면 될겁니다.
우선 심형래 감독의 디워 사이트에서 38M 정도되는 디워 트레일러 동영상 D_war_trailer_720P.wmv 파일을 받습니다. 티스토리는 업로드 사이즈가 최대 10M 로 제한이 되어 있으므로 동영상 자르기 프로그램으로 7~8 메가 정도 되는 사이즈의 파일 5개로 분리합니다. 저는 "AVI/MPEG/RM/WMV Splitter" 라 불리는 유틸리티로 동영상을 잘랐습니다.
분리한 파일들은 5개의 동영상(D_war_trailer_720P_1.wmv, D_war_trailer_720P_2.wmv, D_war_trailer_720P_3.wmv, D_war_trailer_720P_4.wmv, D_war_trailer_720P_5.wmv)으로 분리되었으며 티스토리 글쓰기 웹에디터에서 파일 올리기로 5개의 동영상을 한꺼번에 올립니다. 올리고 나니 다음과 같은 동영상 URL 링크를 확보할 수 있었습니다.

http://factor.kr/attachment/cm213.wmv
http://factor.kr/attachment/cm214.wmv
http://factor.kr/attachment/dm211.wmv
http://factor.kr/attachment/dm212.wmv
http://factor.kr/attachment/cm212.wmv

위의 분리된 동영상들의 URL 링크를 이용해서 문서 편집기로 아래와 같은 내용의 "d_war.asx" 라는 문서 파일을 만들어서 티스토리 웹에디터 파일올리기로 올립니다.

<asx>
<entry><ref href="http://factor.kr/attachment/cm213.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/cm214.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/dm211.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/dm212.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/cm212.wmv"/></entry>
</asx>

올리고 나면 http://factor.kr/attachment/dm213.asx 와 같은 동영상 URL 링크를 얻을 수 있습니다. 링크를 이용하여 아래와 같은 동영상을 출력해주는 HTML 태그를 만들어봅니다.

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="500" height="300"><param name="Filename" value="http://factor.kr/attachment/dm213.asx"/><param name="AutoStart" value="true"/></object>

위의 HTML 태그를 편집기에 HTML 편집 모드를 이용해서 글 내용에 포함시키면 디워 동영상을 출력해주는 포스팅을 할 수 있습니다. 위의 태그에서 빨강색 부분을 디워 동영상의 원본 사이즈로 바꿔서 사용할 수 있지만 일반적인 블로그 포스트 사이즈에 맞지 않으므로 폭(width)을 500 에서 600 정도로 사용하는 것이 좋으며 필요하면 풀스크린 모드를 사용해 전체화면으로 감상할 수 있겠습니다. 풀스크린 모드는 마우스를 동영상에 올리고 오른쪽 버튼을 클릭해서 "축소/확대" 메뉴를 선택하고 "전체화면"을 클릭하면 됩니다.

[참고사항] 티스토리 글쓰기 웹에디터에 파일을 올리고 올린 파일의 URL 주소를 알아 내려면 "파일 업로드 관리"에서 파일을 올리고 난 후에 올린 파일을 선택하고 파일 목록 상단에 있는 버튼을 클릭하면 웹에디터에 파일이 추가 됩니다. 그리고 나서 HTML 모드로 변경을 하면 올린 파일의 URL을 추출할 수 있습니다. 위의 예제를 선택하면 다음과 같은 태그를 확인할 수 있지요. <DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/cm213.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/cm213.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/cm213.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV> <DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/cm214.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/cm214.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/cm214.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV> <DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/dm211.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/dm211.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/dm211.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV> <DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/dm212.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/dm212.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/dm212.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV> <DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/cm212.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/cm212.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/cm212.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV> 위와 같은 태그를 보시고 5개의 동영상 URL을 찾을 수 있습니다. 그런데 잘라낸 동영상이 10개 또는 100개라면 난감할 수 있습니다. 그래서 저는 EDITPLUS 라는 프로그램에서 바꾸기 기능을 이용해서 분리된 동영상 URL 주소들을 찾아 ASX 파일로 손쉽게 바꿉니다. EDITPLUS 바꾸기 기능에서 정규식을 체크하고 ^<DIV.+ data="http://factor.kr/attachment/(.+\.wmv).+(.+\.wmv).+</DIV> 를 <entry><ref href="http://factor.kr/attachment/\1"/></entry> 이것으로 바꾸면 위에 복잡해 보이는 태그를 간편하게 아래와 같이 바꿀 수 있습니다. <entry><ref href="http://factor.kr/attachment/cm213.wmv"/></entry> <entry><ref href="http://factor.kr/attachment/cm214.wmv"/></entry> <entry><ref href="http://factor.kr/attachment/dm211.wmv"/></entry> <entry><ref href="http://factor.kr/attachment/dm212.wmv"/></entry> <entry><ref href="http://factor.kr/attachment/cm212.wmv"/></entry>

HTML 에 대해서 잘 모르시는 분들은 다소 어려울 수 있지만 차근 차근 공부해보시면 블로그에 보다 멋진 포스팅을 할 수 있습니다. 글로 설명하는 것은 표현하기도 이해하기도 쉽지 않은 것 같습니다. 조만간 위에 설명한 내용을 동영상 강의(?)로 만들어봐야겠습니다.^^

웹프로그래머의 홈페이지정보 블로그 http://hompy.info