[리플, 방명록]에 귀여운 이모티콘를 달아보자. (Onion Club Emoticon 적용)

2009.06.04 14:50잡다한 이야기들/웹에 관한 짤막한 이야기

이번에 포스팅하고자하는 바는
최근에 필자 블로그에 설치한 [이모티콘] 삽입부분이다.
설치가 무사히 끝난다면,
방명록이나 리플부분에 [주어진 귀여운 이모티콘]을 간단한 클릭만으로 삽일 할 수 있다.
현재 설치되어 있어 바로 해볼 수 있지만, 혹시 모르니 그 예를 스샷으로 보자.


위 사진은 필자 블로그의 기본 글 남기기 부분이다.
이때 상단부 버튼의 이모티콘 넣기를 클릭하면,


위에서처럼 여러 귀여운 이모티콘이 나타난다. 이때 삽입을 원하는 모양을 클릭하면,
아래 글남기는 부분에 [emoticon=000] 형식으로 [ ]로 쌓인 글이 입력된다.
그 후, 글을 완성하고 확인 버튼을 누르면,


위에서처럼 [emoticon=000]으로 사용했던 부분이 이모티콘으로 바뀌어서 나오게 된다 ^_^~
필자는 다른 블로그들을 둘러보다가 위 방식을 적용한 블로그를 보고,
그 기능을 적용하기 위해 관련 자료를 찾아보다가, 결국 약간의 출력부분만 바꿔서 설치하게 되었다.

설치 순서에 대해서 말하기 전에 이 설치 방법은 필자가 개발한게 절대 아니고, 다른 분들이 수정에 수정을 거쳐서 보완되어 완성된 것이다.

[이모콘티 적용하는데 개발 및 설치법 설명해주신 분들]

BLUEnLIVE님의 Blog :
http://zoc.kr/
(BBCODE for Tistory 및 BBCODE 도우미 설치관련, 그밖에 도움되는 자료가 여러가지 있다.)
FOREVLER님의 Blog : http://e-forever.co.cc/
(양파군의 이모티콘 메뉴 추가하기)
Onion Club의 Blog : http://blog.roodo.com/onion_club
(양파군 블로그로 이모티콘 제작자)

처음에는 [아이콘 넣고 빼고, 적용하는 것 그까지껏 간단하지 않을까?] 하고 만만하게 생각했는데,
생각보다 많은 시간이 걸렸다. (설명만 보고 따라하는데만 한시간 조금 더 걸린 듯 하다 -.,- 중간에 막혀서..흙)

그럼 설치 순서를 알아보자.


 1. BBCode 설치.

BBCode
Bulletin Board Code의 약자이다. (BBS는 Bulletin Board System으로 게시판을 의미)
즉, 게시판에 쓰이는 코드라는 의미라고 볼 수 있다.
BBCode는 HTML상의 코드를 제한적으로 허용하기 위해 외국 포럼 게시판에서 사용되어 왔다.
html의 img나 embed, iframe등은 잘못 사용하면 악용의 소지가 있다.
그렇기 때문에 블로그나 게시판의 운영자에게만 태그사용을 허용하게 하고, 일반 접속자에게는 허용하지 않는게 일반적이다.

일반 접속자가 글을 남기거나 리플을 남길때도 제한된 태그를 허용하기 위해 사용된 것이 바로 BBCode이다.

자세한 사용법에 대해 확인해 보고 싶다면, 아래 링크에서 확인하자.

도아님의 QAOS.com : http://qaos.com/bbcode_ref.php
위키피디아 BBCode : http://en.wikipedia.org/wiki/BBCode

이 BBCode는 텍스트큐브에서 플러그인으로 쿠나님이 개발하셨고,
BLUEnLIVE님이 Tistory용으로 개발[각주:1]해 주셨다. (고로 네이버 같은 경우는 설치가 불가능하다.)

BBCode를 먼저 설치해야 하는 이유는 이모티콘의 번호를 이용하여 문자를 그림으로 치환하기 위해서 HTML코드(정의된-bbcode 치환자 사용)를 사용하기 위해서이다.

설치 방법은 아래 블로그를 따라가서 순서대로만 실행하면 무난히 될 것이다.

BBCode for Tistory Ver 3.0 DownLoad : http://zoc.kr/566
BBCode for Tistory Ver 2.1 DownLoad 및 설치방법 설명 : http://zoc.kr/352

간단히 과정을 요약하자면,
js파일[각주:2]을 블로그에 올려주고,
skin 파일에 몇 개의 코드를 추가하는 것이다. 스킨 수정 Helper가 제공되는데, 사용하고 보면 5개의 코드가 추가된다.
이때 추가되는 코드는 대부분이 div로 둘러싸고 div class를 추가해주는 부분이었다. (방명록이나, 댓글 textarea를 둘러쌈)

설치가 끝나면 굵게 또는 밑줄을 이용해서 BBCode가 잘 실행되는지 확인해 보자.


 2. BBCode 삽입 도우미 설치.

BBCode 삽입 도우미란 말그대로 삽입하기 쉽게, GUI로 사용가능한 목록을 버튼으로 만들어 놓은 것이다.
버튼을 생성하고, 버튼을 누를경우
입력하는 TEXTAREA창에 해당 명령어가 삽입된다.
기본적인 설치가 끝나면 아래처럼, 보일 것이다. (스킨에 상관없이 입력 창 바로 위에 아이콘들이 생성된다.)


아래 링크에 따라가서 천천히 설치해 보자.

BBCode 삽입도우미 Forevler님 패치 적용 : http://zoc.kr/493

과정을 요약하자면 첫번째로, 아이콘 파일을 블로그에 올려놓고,
css를 수정하여 삽입될 부분의 형식을 지정한다.
다음으로 skin 파일에 자바스크립트 함수(클릭시 수행될 함수)를 정의한다.
textarea에 사용할 id를 추가하고, 버튼 설정 및 이벤트를 설정해 준다.

이것은 양파 이모티콘을 적용하기 위해서 id를 적용하고, 버튼 디자인 때문이다.
(또한 skin파일에 정의해 높은 함수는 이후에 양파 이모티콘 적용 부분에서 사용된다.)
필자의 경우 이모티콘만 적용하고 다른 BBCode는 별로 사용을 권장하고 싶지 않았기 때문에,
다른 아이콘들은 전부 지우고, 이모티콘 삽입 버튼만 따로 만들어 두었다.

설치가 끝났다면 각 아이콘을 눌러보고 BBCode가 적용되는지 확인해보자.


 3. 양파군 이모티콘 메뉴 추가.


이 3번째에서 막히는 부분이 있어서 필자는 시간이 조금 걸렸다. ㅠ,ㅜ
그만큼 처음이라면 막힐 부분도 있고, 프로그래밍과 다른 세계의 사람이라면 조금 난감할지도 모르겠다.
그래도 조금만 더 힘내서 성공하면 귀여운 아이콘을 사용할 수 있다!!

이 부분은 본격적으로 이모티콘이 나오는 버튼을 누르면 없었던, 그림들이 보여주고,
원하는 이모티콘을 누르면 글 입력 부분에 BBCode가 복사되어 넣어지는 부분이다.

이 작업을 하기전에는 BBCode for Tistory와 BBCode 삽입 도우미가 설치되어 있어야 한다.
(1, 2번과정이 미리 완성되어야 한다. = 이유는 여기에서 1, 2 과정에 삽입된 javascript 함수를 그대로 가져다 사용하기 때문임)

또한 추가로 티스토리 플러그인에서 제공되는 이모티콘 플러그인을 설정해 놓아야 한다.

아래 FOREVLER 님의 블로그에 자세하고 친절한 강의가 있다.
그대로 따라들어가서 순서대로 실행하면 된다.

FOREVLER님의 양파군 이모콘티 메뉴 추가하기 : http://e-forever.co.cc/73

필자가 설치하면서 골머리를 썩였던 부분은 bbcode00.js 파일을 수정하는데,
버릇처럼 " ; "를 추가하는 바람에 에러가 발생했다. 고민끝에 겨우 찾아냈다. -.-;

위 순서대로 완성되었다면, 필자의 블로그처럼
귀여운 양파의 이모티콘을 쉽게 추가할 수 있을 것이다.

혹시나 완성하여 잘 쓰고 있다면, 위에 링크된 개발자 블로그에 방문하여
감사의 표시로 댓글이라도 남기도록 하자. ^_^



ps. 설치 방식을 쉽게 다 설명할까 해봤는데, 양만 많아질 것 같아서 쉽고 좋은 설명 위주로 링크를 걸어놓았다.~

  1. 쿠나님 블로그에 가보면, 두 분이서 서로 아이디어를 주고 받으신 듯하다. [본문으로]
  2. bbcode.js 파일에는 사용되는 BBCode가 선언되어 있다. [본문으로]
  • 이전 댓글 더보기
  • 프로필사진
    Favicon of https://blog.jaea.net BlogIcon 재아2009.06.06 09:45 신고

    [emoticon=042][emoticon=042][emoticon=051][emoticon=062]

    음... 댓글창에도 에디터가 지원해야 해요 ㅠㅠ;/// 그래야 좋을듯 ㅋ

    • 프로필사진
      Favicon of http://shinlucky.tistory.com BlogIcon Shinlucky2009.06.06 10:33 신고

      그렇죠.
      기본적으로 티스토리에도 댓글창 플러그인이 존재했으면 하는 바람이..

  • 프로필사진
    Favicon of https://mazeinluna.tistory.com BlogIcon 미로속의루나입니다2009.06.06 23:03 신고

    크와~ 이모티콘 짱 귀여워요. ㅋㅋㅋ
    하지만 포스트를 보다 보니 머리가 지끈 지끈.[emoticon=044]

    • 프로필사진
      Favicon of https://shinlucky.tistory.com BlogIcon 신럭키2009.06.06 23:56 신고

      ㅋ, 시간이 걸리더라도 달면 정말 블로그질 할맛나는 느낌이랄까요 ^_^

  • 프로필사진
    Favicon of https://piaarang.com BlogIcon 피아랑2009.06.07 15:13 신고

    제가 자주 가는 사이트에도 양파군 이모티콘을 사용하지요.^^

  • 프로필사진
    Favicon of https://ggarbenjung.tistory.com BlogIcon 까르벤정2009.06.07 22:02 신고

    귀여운 이모티콘과 달리 댓글창의 이미지가 왠지 섬뜩한데요 [emoticon=040]
    이모티콘 재밌네요 ^^ㅋ

  • 프로필사진
    Favicon of https://allmask.tistory.com BlogIcon 생각하는 사람2009.06.08 08:22 신고

    [emoticon=031]와우~! 귀여운데요 ㅎㅎ

  • 프로필사진
    Favicon of https://hepi.tistory.com BlogIcon HEPI2009.06.08 10:48 신고

    [emoticon=069]정말 괜찮은데요..^^ 언제 시도해봐야겠어요..^^
    잘보고 갑니다.[emoticon=027]

  • 프로필사진
    Favicon of https://sohocafe.tistory.com BlogIcon 아빠공룡2009.06.08 11:34 신고

    ^^ 상단타이틀 이미지보고 뿜었어요...ㅋㅋ[emoticon=051]
    블로그 꾸미신거 보니까 내공이 느껴지는군요...
    발랄한 한주되세요!!

  • 프로필사진
    Favicon of http://taibale.tistory.com BlogIcon T군2009.06.08 11:48 신고

    앗..ㅋㅋ 이 이모티콘들 네이트온에서 쓰던 애들인데..ㅎㅎ
    블로그에도 달아봐야겠네요!

  • 프로필사진
    Favicon of https://tirun.tistory.com BlogIcon 티런2009.06.08 14:08 신고

    우와..정말 유익한정보네요.
    달린 댓글만 봐도...ㅎㅎ^^
    편안한 한주 시작하세요~

  • 프로필사진
    Favicon of https://cansurvive.tistory.com BlogIcon 흰소를타고2009.06.08 14:18 신고

    와우!! 정말.,.. 컴퓨터를 못하는 제가 봤을때는 대단함이 뚝뚝 뭍어져 나오세요 ^^

    음... 저도 마음의 소리 팬입니다

    내여자에게는 따뜻한 차가운 도시 흰소 --;;

  • 프로필사진
    Favicon of https://dmstjs67.tistory.com BlogIcon _FIANCE2009.06.08 15:11 신고

    이모티콘 완전 귀엽네요- [emoticon=086]
    저도 시간나면 블로그에 한번 설치해봐야겠어요 ㅋㅋ

    그런거 요고 본문에도 설치 할 수 있나요??

  • 프로필사진
    휘휭2009.09.29 22:44 신고

    [emoticon=048][emoticon=035][emoticon=036][emoticon=042] 이거 못퍼가는게 아쉽네요.. ㅠ

    • 프로필사진
      Favicon of https://shinlucky.tistory.com BlogIcon 신럭키2009.10.02 11:25 신고

      컥, 필요하시면 보내드릴수도 있습니다. ㅎ
      하지만 저작권은 양파군에게...~

  • 프로필사진
    문래2009.10.13 17:03 신고

    [emoticon=048][emoticon=086]앙~~~이거 이거..이거...이거 ..완전 대박입니다여~~~~

    • 프로필사진
      Favicon of http://shinlucky.tistory.com BlogIcon shinlucky2009.10.13 17:51 신고

      ㅎ 이거 은근히 깔기 힘들다능.
      저도 슬슬 스킨바꾸려고 하는데 적용할려니 까마득 ㅠ.ㅜ;

  • 프로필사진
    Favicon of https://n1e4m7o.tistory.com BlogIcon 마리모2010.04.18 23:39 신고

    [emoticon=078]오~ 유익한 정보 감사해요~ ㅋㅋ

  • 프로필사진
    Favicon of https://ksany.tistory.com BlogIcon Miss.크크2010.08.27 11:30 신고

    [emoticon=078] 이모티콘 보고싶어 아무생각 없이 댓글 남깁니다 ㅋㅋㅋ;;
    블로그 대성하세요~ 잘 보구가요~

  • 프로필사진
    Favicon of http://mood-cela.tistory.com BlogIcon 무드셀라′2010.12.12 15:38 신고

    [emoticon=100] 시간 넉넉할때 차근차근 설명데로 해봐야겠어요,
    지금, 제 머릿속은 ?????????????????? 뿐 ^^
    즐거운 주말 되세요~~*

    • 프로필사진
      Favicon of https://shinlucky.tistory.com BlogIcon 신럭키2010.12.12 18:25 신고

      ㅎㅎ 저도 꽤나 뻘짓을 했습니다.
      링크 따라가셔서 차근차근 커피 호호 불어가시면서 하시면 될꺼에요 ㅋ

  • 프로필사진
    Favicon of https://tip0u.tistory.com BlogIcon dachoigo2010.12.23 21:16 신고

    [emoticon=100]반갑습니다.설명대로 설치하니까 잘 됩니다.
    그런데 한가지 문제가 생겨서 이렇게 문의 드립니다.
    사이드바의 최근 댓글창에 이모티콘 번호가 그대로 노출이 됩니다.
    (즉 "[이모티콘=100]반갑습니다." 이런식으로 말입니다.)
    그외 다른것은 다~~작동이 잘 됩니다.
    제가 뭘 잘못 설정 한 것인지 아니면 따로 뭘 설정을 해 줘야 하는 것입니까?
    해결 방법이 있을까요?
    좋은 정보 여하튼 감사합니다.

  • 프로필사진
    Favicon of http://wree.tistory.com BlogIcon 2011.01.16 00:57 신고

    꺄아 귀엽다[emoticon=092] <---이카무스메 ㅋㅋ

  • 프로필사진
    2011.01.28 18:09

    비밀댓글입니다

  • 프로필사진
    Favicon of https://starcatch.tistory.com BlogIcon StarCatch2011.05.11 01:32 신고

    [emoticon=094] [emoticon=086]

    삭막한 블로그에 한줄기 빛이 보입니다.^^