RUKXER.net

요새 항상 끼고 살고 있는 서비스가 하나 있는데, 마이크로 블로그로 유명한 트위터입니다 :-)
블로그에도 오른쪽 사이드바에 보시듯이 위젯을 달고 있는데요, 전광판 같이 쓸 수도 있고 나름 재미도 있어서 이 위젯을 설치하는 방법에 대해 간단하게 써볼까 합니다.


제 트위터 화면입니다 :-) Monotype Corsiva 폰트로 크게 알파벳 R을 쓰고 있다면 제 영역?이라고 보셔도 됩니다 -ㅂ- ㅋㅋㅋ

트위터는 먼저 기본적으로 위 스샷과 같이 웹을 기반으로 되어있습니다. 다만, 방문자에게 꼴랑 140자의 글을 보라고 무조건 이 페이지로 오도록 유도하는 것도 무리가 있기 때문에 블로그에 위젯을 설치하면 쉽게 블로그와 트위터를 동시에 노출시킬 수 있습니다.




먼저 위 스샷과 같이 1) Setting 메뉴를 누르고 2) You can also add Twitter to your site here 링크를 누릅니다. 그리하면 아래와 같은 스샷이 뜹니다.





각종 블로그 서비스에 쉽게 위젯을 붙일 수 있도록 지원하고 있지만, 우리는 여기에 리스트 되어있지 않은 티스토리 또는 텍스트큐브에 설치를 할 계획이므로 1) Other를 선택한 뒤 2) Continue 로 넘어갑니다.

그러면 이 다음단계부터 선택지가 갈리는데요, 원하는 위젯을 선택해 설치하시면 됩니다.




가장 크게 갈리는 것이 Flash 타입의 위젯이냐, HTML 타입의 위젯이냐 입니다.
일단은 Flash 타입으로 흘러가보겠습니다.




Flash 타입은 또 두 가지 종류로 나뉩니다.
로그인도 할 수 있고 리플도 달 수 있는 Interactive 위젯과, 심플하게 한 트윗만 띄워주는 Display-only 위젯이 그것입니다.

Interactive 위젯으로 진행해보겠습니다.



Interactive 위젯으로 선택해서 들어오면, 이제 마지막으로 디자인과 위젯 사이즈를 선택하고 코드를 복사하고 끝납니다.
디자인은 총 세 가지가 있는데요, 아래 스샷을 보시고 자신의 블로그에 맞는 걸 골라 선택하시면 됩니다 :-)



개인적으로는 Velvetica가 어떤 블로그에도 쉽게 융화될 수 있는 색상이라고 생각됩니다 :-)

아, 코드에 대해서는 조금 말씀드릴 팁이 있는데요, 맨 아래에 한꺼번에 설명하도록 하겠습니다.



여기서 다시 한 단계 뒤로 가서 Display-only 위젯을 선택해보겠습니다.

Display-only 위젯은 딱히 설정할 내용이 없습니다. 오직 딱 하나의 트윗만 띄워주는 단순한 위젯입니다.
색상만 선택해주고 코드를 복사해 붙여넣으면 끝입니다 :-)



자, 이로써 Flash 타입은 모두 살펴봤으니 HTML 타입을 한 번 보겠습니다.



HTML 타입에서는 노출할 트윗의 갯수와 타이틀을 지정해줄 수 있습니다. 대체적으로 2개~3개 정도로 노출하는 것이 보기에 좋습니다 :-)

HTML 타입인 만큼 스킨에 거의 자연스럽게 녹아 들어가는 것이 특징입니다. 때문에 코드 수정에 따라서 많은 외형 변화를 줄 수도 있기도 합니다.
CSS 스타일에 의존되며 표준 스킨의 style.css 파일의 속성을 따릅니다.

이 역시 코드에 대해서는 따로 말씀드릴 사항이 있어서 밑에 설명토록 하겠습니다.



여튼, 이렇게 Interactive 위젯, Display-only 위젯, HTML 타입 위젯 세 가지 중 하나를 선택해 코드까지 얻어냈다면 어디에 붙여 넣어야 될까요?
앞서 말씀드린 대로 사이드바에 붙이는 것이 간단하기도 하고 보기도 좋으니, 사이드바에 넣는 방법으로 설명드리겠습니다.

티스토리의 경우엔 사이드바 설정에서 아래 스샷과 같이 볼 수 있습니다.



여기서 HTML 배너출력을 오른쪽 '사이드바 꾸미기' 영역으로 옮겨 활성화 시킵니다.
그러면 [편집]이라는 버튼이 생기는데, 그 버튼을 누르면 코드를 집어넣을 수 있는 화면이 뜹니다.



텍스트큐브의 경우도 크게 다르지 않습니다. 아래 스샷을 보시면 쉽게 이해가 가실 듯~ :-)



아....텍스트큐브닷컴은~ 뭐 비슷할테니 알아서;;; ㅡ,.ㅡ 음허허;;


이로써 기본적으로 트위터 위젯을 블로그에 설치하는 과정이 마무리되었습니다.
그러나 남은 문제가 있으니~ 바로 최적화 :-) 입니다.

막상 위젯을 붙여넣으면 블로그와 융화되지 못하고 뭔가 어색하게 될 겁니다. 이를 방지하기 위해 나름 습득한? 방법을 코드를 통해 말씀드리겠습니다.

주로 문제가 되는 건 다음과 같습니다.

Interactive 위젯 - 너무 크다
HTML 타입 위젯 - 제목만 어색하게 크다

뭐... Display-only 위젯은 특별히 문제는 없을 겁니다. 기능이 너무 없고 디자인 변경이 안 돼서 좀 답답할 뿐이지만요;

어쨌든 Interactive 위젯 크기를 조절하려면 다음 코드에서와 같이 표시된 부분을 수정하시면 됩니다.

Interactive 위젯 코드

그리고 HTML 타입 위젯의 코드는 다음을 참조하시면 됩니다.

HTML 타입 위젯 코드

대강은 이렇고, 각자의 스킨에 맞게 수정하면 딱 알맞는 형태로 트위터 위젯이 설치됩니다 :-)
혹시 스킨을 잘 다루지 못하시겠다면 각 스킨 제작자에게 문의하시거나 각 서비스 포럼에 질문 던지시는 것도 대안이 될 수 있을 듯 합니다 :-)

그럼, 트위터 위젯과 함께 즐거운 트위터와 블로그 생활 되시길!