FREEZZEE, go to http://dusl.x-y.net: 코멘트에 아이콘을 표시하는 초간단 방법

2005년 11월 첨언
기존의 내용은 무버블타입 2.7 버전에서의 이야기입니다. 하지만 기본적인 아이디어는 같으므로 무버블타입 3.2 버전에서도 비슷한 방법으로 응용하실 수 있습니다. 다만, 3.2 에서는 자바스크립트를 따로 템플릿으로 빼놓았기 때문에 스크립트 수정부분은 indivisual templete 이 아닌 Site JavaScript 에서 하셔야 합니다.

그걸 떠나서, 아래와 같은 방법도 좋지만 3.2 버전에서도 잘 동작하는 파비콘 플러그인을 찾았습니다. gemal.dk 의 favicon 플러그인 페이지를 방문해보세요. 파비콘이 없을 때는 default 이미지를 출력시키고 싶었기 때문에 저는 img 태그의 title 대신에 (이미지가 없을 경우 firefox는 title 을 출력합니다) 아래에 언급된 onerror 스크립트를 삽입하였습니다. 그럼 모두 화이팅!

여기를 눌러보세요. 작은 아이콘이 표시된 것 보이세요? 파비콘을 이용해 코멘트옆에 아이콘이 표시되게 해보았습니다.

먼저 파비콘이 뭔지 좀 알아보죠.

파비콘이란
온라인에서 파비콘 만들기
이미지파일에서 파비콘을 자동으로 생성해주는 곳

1. 웹브라우저는 기본적으로 루트디렉토리에 favicon.ico 을 파비콘으로 자동인식한다고 합니다. 다른 위치에 파비콘 파일을 두고 다른이름으로 파비콘 파일을 정의하고 싶으면 웹문서의 head 부분에 파비콘의 위치를 이렇게 정의합니다. < link rel="shortcut icon" href="/favicon.ico" /> href 부분에 파비콘 파일의 위치를 적으면 됩니다. 꼭 그래야 한다는 법은 없지만, 보통은 루트디렉토리 밑에 favicon.ico 파일을 두는 게 일반적이고 외국싸이트의 경우는 대체로 이런 원칙을 지키고 있는듯 보입니다. 그리고 기왕이면 그 위치에 그 이름으로 두는게 좋다고 생각합니다.

2. 파비콘의 파일 형식은 bmp 가 좋은 듯 합니다. 파이어폭스에서는 gif 형식이나 그 밖의 이미지파일형식으로 만들어진 아이콘도 문제없이 표시했지만 인터넷익스플로러의 경우는 bmp 형식이 아니면 화면상에 표시하는데 약간의 문제가 있는 듯합니다. 또, 즐겨찾기목록이나 주소창, 탭에 표시되므로 이미지의 크기는 16x16 픽셀이면 충분하다고 생각됩니다.

3. 자, 파비콘을 16x16 픽셀의 bmp 파일로 만드셨으면, 혹은 위에 소개한 사이트에서 파비콘을 만들었다면 파일이름을 favicon.ico 로 바꾸고 자신의 홈페이지 루트에 업로드 시킵니다. 저의 경우는 http://dusl.x-y.net 에 업로드 했습니다. 그리고 자신의 index 파일의 head 부분에 < link rel="shortcut icon" href="/favicon.ico" > 를 추가해주면 끝. 이제 홈페이지에 접속하면 주소창에 파비콘이 나타납니다. (단 IE 는 파비콘을 표시안해주는 경우가 더 많은 듯 합니다. 3년넘게 업데이트가 없는 프로그램이다보니 하고 생각하고 있습니다)

16x16 픽셀의 작은 이미진데도 요거 만드는게 보통 머리 아픈게 아니더라구요. 크기가 작으니까 더더욱 그런듯합니다. 그럴 때는 살짝 이미 있는 파비콘을 이용하는 것도 나쁘지 않은 방법인듯 합니다. 이를테면 이런곳에서... 파비콘 아직 없는 분들은 이기회에 하나 만들어보시는 것도 좋을듯합니다 ^^;

이제 파비콘을 어떻게 코멘트에 표시하는가에 대해 살펴볼꼐요.

파비콘이 있으신 분은 제 블로그에 코멘트를 남길 때 URL 부분에 자신의 홈페이지 주소만 적어주시면 자동으로 코멘트 옆에 본인의 파비콘을 표시해드립니다. 이 부분은 간단하게 구현되는데 url 의 value 값을 받아서 뒤에 /favicon.ico 을 추가시킨 주소를 img 태그로 불러오면 됩니다. 무버블타입의 경우는 MTCommentURL 이라는 태그가 입력된 url 값을 나타내므로 이 태그를 이용해서

<img src="<$MTCommentURL$>/favicon.ico" width="16" height="16" alt="icon"
onerror="this.src='http://dusl.x-y.net/image/favicon.ico';" />

이 문장을 파비콘이 나타나길 원하는 곳에 삽입했습니다. 되게 간단하죠? ^^; 무버블타입이 아닌 다른 블로그툴인 경우에도 탬플릿을 수정할 수 있다면 간단한 img 태그를 한줄 집어넣어줌으로써 방문객의 파비콘을 표시할 수 있겠습니다. (lunamoth 님께서 태터툴즈에도 적용시키셨습니다. 태터툴즈에서 적용하는 법을 보시려면 클릭)

onerror 부분에는 홈페이지가 없거나 url 을 입력하지 않은 경우, 혹은 파비콘이 없는 홈페이지거나 파비콘 파일의 경로가 일반적이지 않을 때를 대비해 대체파비콘의 경로를 적어주시면 됩니다. 제 경우에는 http://dusl.x-y.net/image/favicon.ico 를 넣어서 손님도 아이콘이 표시되도록 했습니다. 가르쳐주신 올리버네 님께 감사드립니다. 올리버네님 초천재! (mylook 님은 이런 경우 아무런 아이콘도 표시 되지 않도록 style 의 background 로 이미지를 불러오는 방법을 소개해주셨습니다)

유의할 것으로, 코멘트 입력시 url 란의 기본값이 공란으로 되있을 경우, 파비콘의 경로가 /favicon.ico 가 되면서 본인의 파비콘이 나오니까, 탬플릿을 수정해서 기본 value 값을http:// 로 수정해주어야 하는데요. 보통은 url 을 입력받는 input 태그에 value="http://' 를 지정해주면 됩니다. 무버블타입의 경우는, 코멘트를 쿠키로 저장하는 부분이 따로 처리가 되어있고, 스크립트에서 value 값을 제어합니다. 쿠키제어 스크립트에서 기본값을 nullstring 으로 넘겨주는 부분이 있기 때문에 탬플릿을 두 군데 수정해주어야 합니다. (sirocco 님의 제보)

이 부분은 indivisual 탬플릿의 윗부분에 있습니다. 한문장을 수정해줍니다.

function forgetMe (f) {
deleteCookie('mtcmtmail', '', HOST);
deleteCookie('mtcmthome', '', HOST);
deleteCookie('mtcmtauth', '', HOST);
f.email.value = '';
f.author.value = '';
f.url.value = 'http://';
}

이 부분은 indivisual 탬플릿의 맨 아래부분에 있습니다. 한문장을 추가해주어야 합니다.

document.comments_form.email.value = getCookie("mtcmtmail");
document.comments_form.author.value = getCookie("mtcmtauth");
document.comments_form.url.value = getCookie("mtcmthome");
if (getCookie("mtcmtauth")) {
document.comments_form.bakecookie[0].checked = true;
} else {
document.comments_form.bakecookie[1].checked = true;
document.comments_form.url.value = 'http://';
}

이로써 코멘트에 파비콘을 이용해 아이콘을 삽입하는 방법은 모두 설명했습니다. 결국 결론은 ''원하는 위치에 img 태그의 한줄을 추가시킨다.'' 가 되는 ~~아주 간단한~~방법입니다 하하핫 ;;;

파비콘을 이용해 코멘트에 달 아이콘을 선택하게 하는 법

간단한 자바스크립트를 이용해 몇개의 파비콘을 고를 수 있게 했습니다. 아래쪽에 보시면 코멘트를 입력하는 곳 URL 란 옆에 몇개의 파비콘이 있지요. 그중에 원하는 것을 클릭하면 URL 란에 파비콘이 위치한 url 이 입력되게 하였습니다. 소스는 간단합니다. 아이콘을 삽입하고자 하는 위치에 아래 소스를 입력하시면 됩니다.

<script language="JavaScript"> function AddChar(ch){ document.comments_form.url.value=ch; } </script>  <a href="JavaScript:onclick=AddChar('http://www.google.com');"> <img src='http://www.google.com/favicon.ico' border=0 align=absmiddle></a> <a href="JavaScript:onclick=AddChar('http://yahoo.com');"> <img src='http://yahoo.com/favicon.ico' border=0 align=absmiddle></a>

스크립트 변수설정이 중요합니다. 위의 경우는 무버블타입일 경우의 변수니까, 다른 툴을 사용하신다면 document.(요부분에는 코멘트입력하는 form 의 name 값을).(요부분에는 url 을 입력받는 input 의 name 값으로).value=ch; 바꿔적어주셔야 해요. 샘플 파비콘은 자신이 원하는 파비콘들의 위치로 경로를 수정, 추가해줄 수 있을것입니다. 중요한 점은 파비콘을 img 태그로 url 경로에 favicon.ico 을 출력하게 했으니까 AddChar('요기에는 favicon.ico는 빼고 주소를적어주셔야 해요')

litconan 님, 곰님이 언급하신 아이콘선택하는 것을 파비콘을 이용해서 이렇게 구현할 수도 있을 것입니다. (곰님이 태터툴즈에서 파비콘과 아이콘을 선택하는 기능을 구현하셨습니다. 테터툴즈: 답글에 파비콘 선택 기능 넣는 법을 보시려면 클릭) (무버블타입에서 코멘트 내용에 아이콘을 삽입하는 것은 MTMacro + 이모티콘 삽입 via 초코밀크쩜넷 을 참조하세요)

마치면서

이 방법의 장점이라면, 자신의 파비콘을 그대로 사용할 수 있다는 점입니다. 태터툴즈나 포탈의 블로그에서 사용할 수 있는 이모티콘은 자신이 원하는 것을 선택한다기 보다는 이미 주어진 것들 중에 골라야 하니까요. 어디가서 제 파비콘처럼 생긴걸 본적도 없고 말이죠. 단점은, 제가 프로그래머라거나 하는 사람이 아니므로 무척이나 무식한 방법을 사용했다는 것입니다. 다른분이 보시면 한심할지도... 하지만 어려운 프로그램을 설치하고 하는 것보다 쉽습니다 (--;) 이 모든것은 MTicon 플러그인이 작동하지 않은 때문이야 엉엉.

뭔가 가르침을 내려주실 분은 꼭 가르쳐주세요.
또, 자신의 파비콘을 테스트해보고 싶으시거나 의문사항이 있으신분은 코멘트 남겨주세요.

덧.
스크립트를 디버그해준 (대체 디버그전과 후의 차이는 모르겠음-_-) 최군 천재 천재 초천재! (라고 게시해달라고 부탁받았음 -_-)

Comments

img src="파비콘" 태그에
onerror="this.src='대체이미지주소';"
...를 추가해서 파이콘이 없을 때 다른 이미지를 띄울 수 있겠네요.

Posted by: 올리버네 | October 20, 2004 03:52 PM

올리버네 님/ 아앗!! 정말 너무너무 감사드립니다. 아..이런 꼭 필요한 걸 가르쳐주시다니... 올리버네님 초천재!!

Posted by: 두슬 | October 20, 2004 03:54 PM

요렇게, URL 란 옆의 아이콘을 선택하면 선택한 아이콘으로 표시가 됩니다.

Posted by: 두슬 | October 20, 2004 05:18 PM

이야, 이거 테터에서도 써먹을 수 있겠군요. :)

Posted by: 곰 | October 20, 2004 06:38 PM

네! 써먹어주십시요! (근데 모질라 공룡 아이콘 너무 멋지지 않아요? 멋지다.)

Posted by: 두슬 | October 20, 2004 06:44 PM

신기하네요 >_<

Posted by: mylook | October 20, 2004 06:59 PM

mylook 님 반가와요. 무버블타입 사용하시면 간단히 한줄 추가해서 써먹어보시는게 어때욧?! ^^; 아, 근데 mylook님 파비콘은 bmp 형식이 아니라 IE 에서는 표시가 안되는군요. 이럴땐 아쉬워해야 하는지, 아니면 역시 파이어폭스가 좋아. 하면서 좋아해야 하는지...

Posted by: 두슬 | October 20, 2004 07:02 PM

저도 했습니다
두술님하고 조금 다른방법으로 했어요

스타일 시트로 백그라운드로 지정해서 보여지게 했어요 ㅎㅎ
화일이 없스면 엑박 안생기고 안보여 줘서요 ㅎㅎㅎ

이건 분명 좋은 아이디어 입니다!!

Posted by: mylook | October 21, 2004 02:22 AM

간단하게 구현이 가능하군요!
덕분에 제 블로그에도 쉽게 적용할 수 있었습니다:-)

Posted by: sirocco | October 21, 2004 02:33 AM

mylook / 파일이 없거나 경로가 부정확한 이미지일때 파이어폭스는 alt 를 대신표시해주거나, alt 가 없으면 아무것도 표시되지 않는데, IE 에는 x박스가 나오더라구요. 사실은 나오는게 맞는거 같기도 한데, 안나오는게 이 경우엔 좋구나 하고 생각했었지요. 그런데 고런 좋은방법도 있네요!

sirocco / 힛 감사합니다 ^^;

Posted by: 두슬 | October 21, 2004 03:31 AM

재미있군요 ^^
MT는 안쓰지만 저도 제 블로그에 만들어 봐야겠네요

Posted by: 구루 | October 21, 2004 05:19 PM

구루 / 예. 사실 특별할 것도 없는 방법이라; 웬만한 경우에 다 써먹을 수 있을 거 같아요. 기왕이면 널리퍼져서 다른 분 블로그에 내 파비콘을 남길 수 있었으면 하는 바람입니다.

Posted by: 두슬 | October 21, 2004 10:43 PM

파비콘 테스트..:0 제 사이트에는 mylook님 버전을 심었습니다.,

Posted by: icedac | October 22, 2004 04:24 AM

icedac / Welcome to the favicon world.

Posted by: 두슬 | October 22, 2004 03:57 PM

아이콘을 24비트 PNG 로 바꿨습니다

PNG 라서 알파값도 넣어줬어요

Posted by: mylook | October 22, 2004 04:47 PM

mylook / 근데 IE 에서도 잘 보이나요?
IE 구려요 구려 ㅠ.ㅠ;

Posted by: 두슬 | October 22, 2004 05:53 PM

http://mylook.org/archives/

최근코멘트 목록에도 아이콘 넣었습니다
(UL LI 의 스타일을 이용했습니다)

이거 바꾸느라고 노가다 했어요 ㅠ.ㅠ

Posted by: mylook | October 22, 2004 06:30 PM

헤헷.. 짝짝짝

전 지금 url 기본 value 값 정하는걸로 노가다 중 ㅠ.ㅠ 스크립트 모르는데 엉엉

Posted by: 두슬 | October 22, 2004 06:41 PM

아아
이제 url value값 잘나오네요 >_<

Posted by: mylook | October 22, 2004 11:26 PM

머쓱... 여러분들이 도와주셔서 점점 완성판이 되가는듯 ^^;

Posted by: 두슬 | October 22, 2004 11:45 PM

헉
저는 2.61에서 쓰던 코멘트 쿠키 스크립트라서 'http://' 를 붙여주기 위해서는 다른 방법으로 수정 해야 하네요 ㅎㅎ

Posted by: mylook | October 22, 2004 11:56 PM

아 그래서 수정 성공하셨어요?
저는 2.66 에서만 테스트해본거라서... 그러고 보니 3.0 에는 다를지도 모르겠네요.

Posted by: 두슬 | October 23, 2004 12:05 AM

음 태터에 적용해봐도 괜찮을 듯 싶은데요. 소스 수정의 압박이... 좋은 아이디어 감사드립니다 :)

Posted by: lunamoth | October 23, 2004 09:43 AM

오오.멋져요.. b2에도 해봐야겠네요

Posted by: hof | October 23, 2004 11:10 AM

예 뭐 제 아이디어는 아니구요 ^^; 본문에도 언급했지만 MTicon 이라는 MT 플러그인이 작동되지 않은탓에 프로그램이라던가 하는걸 이용하지 않고 간단하게 구현하는 방법이 없을까 생각해본 것이지요. 머쓱;;
http://dusl.x-y.net/cgi-bin/movabletype/archives/000425.html

Posted by: 두슬 | October 23, 2004 11:50 AM

test

Posted by: nethyun9 | October 24, 2004 05:46 PM

헉! 지우는 버튼이 없네요.
두슬님. 죄송하지만 삭제해주세요.

Posted by: nethyun9 | October 24, 2004 05:49 PM

테스트 해보셔도 괜찮습니다 ^^;
꽃예쁘네요

Posted by: 두슬 | October 24, 2004 06:43 PM

좋은 글 감사합니다...

이건 테스테예요......^^;;;

Posted by: byte AliBaba@KOR | October 26, 2004 02:20 PM

헉~ 왜 안나타나는거지?.......
두슬님 죄송합니다. 자꾸 테스트해서요...
이해해주실거라 믿고 될때까지 --;;; 해볼께요.......

Posted by: byte AliBaba@KOR | October 26, 2004 02:25 PM

본문에도 언급했지만, 파비콘 파일 형식이 bmp 가 아닐 경우에 인터넷 익스플로러 에서 표시되지 않는 경우가 많은 듯해요. 파이어폭스 브라우저에서는 잘 표시되거든요? (알록볼록이라고 나오네요 ^^) 파비콘 파일을 bmp 로 저장해서 확장자만 ico 로 바꾼걸 이용해보세요.

Posted by: 두슬 | October 26, 2004 02:36 PM

저도 테스트좀 -_-;

Posted by: moowa | November 13, 2004 06:40 AM