사용 안내 - 블로그에 적용된 BBCode 사용하기

새로운 기능 - BBCode for Tistory

현재 캐플 블로그의 댓글 창에는 아래와 같이 새롭게 BBCode 란 것이 적용되어 있습니다. [방명록엔 적용되어 있지 않습니다.] 

BBCode 를 사용하여 댓글을 작성 중인 모습

BBCode 가 적용되어 출력된 댓글의 모습

BBCode 란 간단하게 HTML 태그를 사용할 수 없는 블로그의 댓글과 같은 곳에서 간단한 HTML 을 적용할 수 있도록 도와주는 마크업 언어입니다. 현재 캐플 블로그에는 제 개인적인 판단으로 꼭 필요하다고 생각되는 BBCode 만 적용한 상태로, 최종적으로 쉬운 입력에서 제공되는 BBCode 의 목록은 아래와 같습니다.

BBCode	출력 결과
[b]굵게[/b]	이것은 굵은 글씨입니다.
[u]밑줄[/u]	이것은 밑줄이 포함된 글씨입니다.
[i]기울임[/i]	이것은 기울임(이탤릭) 글씨입니다.
[s]취소선[/s]	이것은 취소선이 포함된 글씨입니다.
[red]빨간색[/red]	이것은 빨간색 글씨입니다.
[blue]파란색[/blue]	이것은 파란색 글씨입니다.
[rb]빨간색 굵게[/rb]	이것은 빨간색 굵은 글씨입니다.
[bb]파란색 굵게[/bb]	이것은 파란색 굵은 글씨입니다.
[left]왼쪽 정렬[/left]	이것은 왼쪽 정렬된 문장입니다.
[center]가운데 정렬[/center]	이것은 가운데 정렬된 문장입니다.
[right]오른쪽 정렬[/right]	이것은 오른쪽 정렬된 문장입니다.
[code]코드[/code]	Sub Main()     System.Console.WriteLine("Hello, World!"") End Sub
[quote]인용문[/quote]	때론 말로 표현할 수 없는 것들은 침묵으로 극명하게 드러난다.
[img]이미지 주소[/img]

아래의 BBCode 들은 쉬운 입력에서는 제공되지 않지만 사용자가 직접 입력하여 사용할 수 있습니다.

BBCode	출력 결과
[color=#ff00ff]사용자 색상[/color]	이것은 사용자 정의 색상 글씨입니다.
[highlight=#ffff00]구문 강조[/highlight]	이것은 사용자 정의 강조 구문입니다.
[ru]빨간 밑줄[/ru]	이것은 빨간색 밑줄이 포함된 글씨입니다.
[bu]파란 밑줄[/bu]	이것은 파란색 밑줄이 포함된 글씨입니다.

이 외에 BBCode 에서 흔히 사용되는 이모티콘이나 굳이 필요 없다고 판단되는 링크나 동영상 링크와 같은 BBCode 들은 제외하였습니다. 이모티콘 출력을 제외한 이유는 제가 이미지형 이모티콘을 싫어하기 때문입니다. ^^; 뭔가 이미지형 이모티콘이 꼼지락 거리면서 움직이거나 문장 중간에 튀어나오고 그러면 산만하고 보기 싫더군요. 그 뿐입니다. 그 뿐이지만 제가 싫어하는 것이기에 요청하셔도 추가하지는 않을 겁니다. ^^

BBCode 쉬운 입력 도구의 사용 방법

BBCode 는 직접 입력해도 되지만 댓글 창 상단에 준비된 쉬운 입력 도구를 사용하여 간단하게 입력이 가능합니다.

처음 설명과 같이 댓글에서 이미지도 출력할 수 있죠. 이 때 이미지 크기는 가로 640px 를 넘지 않도록 주의해주세요. 이미지가 짤려서 안 보이게 됩니다.

설명과 같이 이미지 파일은 직접 적절한 공간에 업로드하여 준비하셔야 합니다. 블로그를 운영 중이신 분들은 블로그에 업로드하신 후 이미지 주소를 가져오시면 되겠죠? 개인적으론 구글 피카사 웹앨범이 이미지를 공유하기엔 가장 좋더군요. 구글 계정이 있으신 분들은 이참에 피카사 웹앨범을 사용해보세요.

그 외에 마땅히 이미지를 업로드할 공간이 없으신 분들은, 쉬운 입력 도구 가장 우측에서 제공되는 무료 이미지 업로드 사이트인 Imgur.com 을 이용하시면 편하실 겁니다. 외국 사이트지만 사용법이 쉽고, 회원 가입을 하지 않아도 이미지의 업로드가 가능하니 이용에 불편은 없으실 거라 생각합니다. 자동으로 리사이즈도 가능하고요.[640px 로 리사이즈하면 되겠죠?] 참고로 해당 사이트는 페이스북과 트위터 계정으로도 가입이 가능하니 이참에 가입해두시는 것도 좋고요. 아무튼 해당 사이트의 정확한 사용법은 아래의 글을 참고하세요.

무료 이미지 업로드 사이트 - Imgur.com


참고로 티스토리 댓글에 댓글 입력은 따로 별개의 창이 뜨는 구조이죠. 그래서 그곳에선 쉬운 입력 도구를 사용할 수 없습니다. 그 때는 직접 BBCode 를 입력하셔야 합니다. 간단하게 댓글 창에서 내용을 작성 후 복사 - 붙여넣기 하시면 편하실 걸로 생각됩니다.


이번에 추가한 BBCode 는 저에게 질문 같을 걸 하실 때 이미지를 곧바로 보여주면 매우 좋은 상황이 있죠? 또는 어떤 부분을 강조해야 하거나 뭐 그럴 필요가 생깁니다. 그래서 그럴 때 사용하시라고 준비한 겁니다. 뭐 물론 제가 답변을 달면서도 사용하고자 하는 용도도 있고요. 그런 용도에 맞춰 추가한 기능이기 때문에 방명록엔 적용하지 않았습니다.

아무래도 이미지 출력 부분을 제일 많이 사용하게 될 듯 한데요. 뭐 굳이 질문용 참고 이미지가 아니더라도, 상황에 맞는 적절한 이미지를 통한 드립 같은 건 문제 삼지 않겠습니다. 하지만 이상한 이미지는 출력하지 마세요.


약간의 잡담을 하자면 이미지 업로드를 현재 놀고 있는 제 개인 웹호스팅에 공간을 마련하고 제공해드릴까도 생각해봤는데요. 이것저것 관리가 어려울 것 같아 그냥 취소하였습니다. 블로그는 최대한 이것저것 손이 안 가는 방향으로 운영하려고요. 최대한 편의를 맞춰드려야 하는데 그럴 수 없어 죄송하기도 하고 좀 아쉽네요.

BBCode 를 블로그에 추가한지는 좀 되었는데 최종적인 사용 여부를 판단하는데에 오래걸렸네요. 이번에 사용하기로 결정하여 쉬운 입력 도구를 달고 이번 글을 작성하게 되었습니다. 아무튼, 잘 사용하세요. 이상입니다. ^^

참고! 이번에 블로그에서 사용된 BBCode 는 BLUEnLIVE 님께서 개발하신 BBCode for Tistory 를 사용하였으며, 쉬운 입력 도구는 엔즐군님께서 개발하신 것을 사용하였습니다. 관심이 있으신 분들은 방문해보시면 워낙에 쉽게 잘 설명해놓으셨기에 여러분들도 어렵지 않게 적용하실 수 있으실 겁니다. 좋은 도구를 개발하시고, 사용할 수 있게 공개해주신 두 분께 감사드립니다.

BLUEnLIVE's ZockrWorld :: 티스토리용 BBCode 3.5 업데이트
엔즐군의 다이어리 :: BBCode for Tistory 활용하기

참고로 엔즐군님의 쉬운 입력의 버튼 링크 부분은 아래와 같이 이루어져 있습니다.

<a onclick="insertAtCursor(document.getElementById('comment_[# #_article_rep_id_# #]'), '시작코드','끝코드')">버튼이미지</a>


저는 해당 부분을 아래와 같이 적용하여 이미지에 커서를 올렸을 때 손가락 표시가 출력되도록 해주었습니다.

<a href="#" onclick="insertAtCursor(document.getElementById('comment_[# #_article_rep_id_# #]'), '시작코드','끝코드'); return false;">버튼이미지</a>


개인적으로 뭔가 클릭하는 느낌이 들어야 속이 시원하더라고요. ^^; 참고하세요.

BLUEnLIVE 님과 엔즐군님의 자료와 함께 제 블로그에서 사용한 쉬운 입력 도구 이미지를 올려 놓습니다. 참고로 제가 제작한 이미지는 티스토리 글쓰기 도구의 이미지를 토대로 만든 것입니다. 만들었다기 보다는 사이즈만 조절했다고 보시면 됩니다. ^^;

BBCode35.7z bbcodegui.zip BBCodeImg.zip