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

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

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

위에서처럼 여러 귀여운 이모티콘이 나타난다. 이때 삽입을 원하는 모양을 클릭하면,
아래 글남기는 부분에 [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가 선언되어 있다. [본문으로]