블로그 운영하세요?
그럼 성능 좋고, 재주꾼이라 할 만한 툴바 하나 사용해 보세요.

제 블로그 하단에 보시면 가로로 길다랗게 툴바가 하나 보이실 겁니다. 바로 Wibiya 툴바입니다.
이 툴바를 사용한 지는 꽤 되었습니다. 이제야 소개하는 이유는 베타 버전으로 Wibiya 자체가 지속적인 업그레이드와 업데이트를 해왔기 때문에 간혹 불안한 모습도 보이곤 했습니다.

그리고 지금, 여전히 Wibiya는 베타 딱지를 붙이고 있습니다.
하지만 이제는 제공해주는[각주:1] 서비스도 풍부해졌고, 안정성 또한 웬만큼 확보된 것 같습니다. 이 툴바 때문에 블로그가 먹통이 되거나 하는 일은 없었으니 안심하셔도 될 것 같네요.

사실 Wibiya에서 제공하는 서비스라는 게 자체에서 개발한 웹서비스가 아니고, 이름만 대면 알만한 유명 웹서비스[각주:2]입니다. 이렇게 많은 웹서비스를 툴바라는 형식을 빌어 하나로 묶어 주는 역할을 Wibiya 툴바가 하고 있습니다.

서론이 좀 길었는데 설치도 아주 쉽고, 간단하기 때문에 블로그를 운영하신다면 함께 가져가도 좋은 툴바로 추천합니다.


블로그 운영하세요? 그럼 Wibiya 툴바를 사용해 보세요.

Wibiya 툴바의 장점을 꼽으라면 많지만, 가장 추천하는 기능이 소셜 기능을 이용한 컨텐츠 공유와 소통, 부가적으로 블로그 페이지 뷰의 상승 효과도 가져올 수 있다는 겁니다. 쉽게 말씀 드려, 트위터나 페이스북과 같은 소셜 네트워크에 자기자신을 홍보할 수 있는 기회가 늘어난다는 것이죠.
예를 들어, 자신의 트위터 계정 앞에 @를 붙여 놓으면 @b1ue5ky(← 마우스를 올려 보세요.)처럼 선택하기에 따라 이런 소소한 기능은 부수적으로 블로그에 따라 옵니다.


다기능 만능 무료 툴바 Wibiya


  1단계. Wibiya 가입하기

일단 Wibiya(http://www.wibiya.com)를 방문합니다.

오른쪽에 'Get It Now' 보이시죠? 클릭합니다.


그러면 필요한 정보를 입력하는 단계로 넘어갑니다.
기분 좋게도 한국어를 지원합니다. 사이트 내에서 한글을 지원하는 게 아니라 제 블로그 Wibiya 툴바에서 보듯이 툴바에서 한글을 지원하는 겁니다.

필요한 정보 입력을 하셨으면, 'Next' 클릭하시고 넘어갑니다.


  2단계. 툴바 설정하기 (최초 설정)


자, 이제 자신이 사용할 툴바의 색깔을 선택하는 단계입니다.
위에 캡쳐한 색깔 이외에도 더 많은 색깔이 있으니까 취향에 맞는 색상으로 선택만 하시면 됩니다.


오른쪽은 같은 단계의 또 다른 선택 메뉴인데 툴바에 나타날 아이콘을 선택하는 것입니다.
자신이 사용하는 블로그 파비콘이나 좋아하는 아이콘이 있다면 직접 등록할 수도 있습니다. 없다면 기본 선택 그대로 두셔도 됩니다.

그럼 또 'Next' 클릭합니다.

툴바에 올려둘 메뉴나 응용 프로그램, 웹서비스 등을 선택하는 단계입니다.
사용하고자 하는 걸 직접 선택하시거나, 딱히 뭘 선택해야 할지 모르겠다 싶으면 'Popular Apps'에 등록되어 있는 것 중에 고르시면 됩니다. 인기있는 것만 모아 놓은 것이므로 어느 걸 선택하셔도 나쁜 선택은 아니겠지요.

다음 단계로 넘어갑니다.


Wibiya 계정을 활성화하기 위한 마지막 단계입니다.
자신이 사용하는 소셜 네트워크 서비스의 계정이나 요구하는 정보를 입력합니다. 물론 입력하지 않아도 상관은 없습니다만 툴바에 올려둘 생각의 웹서비스 요구 정보는 빠짐없이 기입해야 합니다.

여기까지 완료하면 1단계에서 등록해둔 메일 계정으로 Wibiya로부터 메일이 하나 와 있을 겁니다. 예전에는 가입확인 링크가 포함되어 있었는데 요즘은 그냥 '가입을 축하한다.'는 정도의 환영 메일이더군요. 가볍게 무시해도 된다는 말씀. ^^

여기까지 하셨으면 4단계로 넘어가세요.


  3단계. 툴바 설정하기 (수정하기)


최초 설정작업이 끝난 뒤 툴바를 사용 중에 변경이 필요할 때가 있습니다.
이런 경우 'Edit Toolbar'나 'Add Applications' 섹션으로 들어가시면 수정이나 새로 세팅할 수 있습니다.

Edit Toolbar에서는 기존에 사용 중인 툴바 메뉴를 사용 중지, 수정, 삭제를 할 수 있습니다.
Add Applications에서는 2단계에서 사용할 메뉴를 고르는 것과 똑같은 작업을 할 수 있습니다.

두 가지 모두 아래 그림에서처럼 툴바 메뉴를 재배열하는 기능을 제공합니다.


툴바에 올려둔 메뉴의 순서를 바꾸고 싶을 때 'Rearrange Toolbar'를 클릭하면 됩니다.


배열 순서를 바꾸었다면 'Save'를 클릭해야 실제 툴바에 적용된다는 걸 기억하세요.


  4단계. 설치 코드 적용하기


Wibiya에서는 Wordpress, Blogger 등과 같은 유명 블로그 시스템 전용 설치 코드 외에도 코드를 직접 편집, 수정할 수 있는 티스토리와 같은 블로그에도 적용할 수 있는 설치 코드를 제공합니다.

설치 코드를 생성하는 화면에서 위 이미지 왼쪽 상단과 똑같이 생긴 버튼을 클릭하면, 오른쪽에 보이는 스크립트 코드가 생성되어서 클립보드로 복사할 수 있는 걸 확인할 수 있습니다.
누르라고 있는 복사 버튼 클릭합니다.

그리고 최종 단계로 클립보드로 복사해 둔 코드를 블로그 스킨 편집화면에서 </body> 위에 붙여넣기 하면 됩니다.
그림에 나와 있듯이 그것으로 끝입니다.


각자 취향을 살리셔서 멋지고, 유익한 툴바를 만들어 사용해 보세요.

  1. 정확하게 말하면 연결해준다는 표현이 맞을 듯 싶네요. [본문으로]
  2. 트위터, 페이스북, 마이스페이스, 버즈... 기타 등등. [본문으로]
블로그나 개인 홈페이지를 운영하고 계십니까? 그렇다면 혹시 방문자를 위한 이메일 연락처를 명기해 두셨습니까?

한때는 블로그 주인장의 이메일 계정을 잘 보이는 곳에 남겨두는 경우가 많았습니다. 그러다가 스팸 메일 발송의 목적으로 이메일 계정을 수집하는 사람이나 봇들의 등장으로 스팸 메일 폭탄, 혹은 그 수준까지는 아니더라도 부쩍 늘어나는 스팸 메일 때문에 대놓고 텍스트로 이메일 연락처를 남겨두는 예가 거의 사라져 버렸습니다.

또한, 예전에 비하여 이메일을 대체할 수 있는 방법이 많다 보니 굳이 스팸의 번거로움을 감수해가면서까지 이메일 계정을 노출시키려고 하지 않는 건 당연하다 하겠습니다. 거기다가 마이크로블로깅을 비롯한 소셜 네트워크의 발달로 결국 이메일은 사망할 것이라는 예측도 나온 마당입니다. 하지만, 이메일은 여전히 편리하고 쓸모가 많은 소통의 수단인 것만은 틀림없습니다.


당당하게 블로그나 홈페이지에 이메일 주소를 명기해 두자.


소통 방식의 다변화를 꾀하는 블로그나 홈페이지의 주인장은 메일 수집봇 걱정없이 이메일로 연락할 수 있는 방법을 웹 사이트 내에 제공하였는데 mailto: 링크를 이용하거나 이메일 주소를 텍스트가 아닌 이미지 형태로 만들어 웹 사이트 내의 한 켠에 배치하는 방법을 사용했습니다.

이 글에서는 후자의 방법, 즉 이메일 계정을 이미지 형태로 만들어서 이미지를 클릭하면 등록해 둔 이메일 계정으로 실제 메일이 발송되도록 하는 법을 다루어 보겠습니다. 그렇다면 우선 이메일 계정을 아이콘 이미지 형태로 만들어야 하는데 인터넷의 웹 서비스 중에 그런 기능을 제공하는 곳이 몇 군데 있습니다.


1. Signature Generator


Signature Generator 바로 가기

우선 Signature Generator라는 곳입니다. 소개해 드리는 이메일 아이콘 웹 사이트의 결과물들이 비슷비슷합니다만, 그 중에서도 여기가 퀄리티가 쪼까 낫다고 생각하지만 지원하는 메일 종류가 몇 개 안 됩니다. 사용법은 그림에서 보시는 바와 같이 자신이 사용하는 메일 계정의 종류에 따라 선택하셔서 그냥 자신의 메일 주소 @ 앞부분을 적기만 하면 됩니다.

Signature Generator에서 이메일 아이콘 만들기


2. 이메일 주소 이미지 만들기


이메일 주소 이미지 만들기 바로 가기

사용법은 똑같습니다만, 이곳의 장점은 우리나라 웹 사이트이다 보니 우리나라 메일 종류를 거의 다 지원한다는 겁니다.


3. E-Mail Icon Generator

E-Mail Icon Generator 바로 가기

이곳 역시 사용법은 동일합니다. 다만 다른 두 곳과는 다르게 생성된 이메일 아이콘 이미지를 자체적으로 호스팅까지 해주기 때문에 웹 페이지 등에서 사용할 때 제공하는 URL로 바로 링크할 수 있다는 점입니다.

자, 이제 만들어진 이메일 아이콘을 마우스 우클릭 메뉴 중에 '다른 이름으로 사진 저장(S)'을 선택하여 내 PC로 저장하면 됩니다. 이렇게 하면 자신의 이메일 주소를 이미지로 만드는 작업이 끝납니다.

만들어진 이메일 주소 이미지

보통의 경우는 이렇게 이미지를 만들어서 블로그나 홈페이지의 잘 보이는 공간에 적절하게 배치하는 것으로 끝납니다. 그러나 이 글에서는 배치된 이메일 주소 이미지를 클릭하면 그 주소로 바로 메일 발송이 되도록 해보겠습니다.


kontactr는 뭐하는 곳인가?

Kontactr는 사이트 소유자와의 연락을 위한 양식을 제공하며, 등록한 이메일 주소로 메일 발송을 무료로 대행해 주는 서비스를 하는 곳입니다. 이런 서비스를 하는 목적은 역시 스팸 메일 때문입니다.


간단한 회원 가입 절차를 거친 후 블로그에 적용하는 법을 알아 보겠습니다.

Kontactr 이용하기

Kontactr 이용하기

요구하는 정보는 간단합니다. 이름이나 별명, 연결할 이메일 주소, 사용할 ID, 비밀번호. 그리고 'Sign Up' 버튼을 클릭합니다.


ID가 겹치는 등의 문제만 없으면 등록한 이메일로 메일이 발송됩니다. 이메일 계정으로 가셔서 Kontactr로부터 수신된 메일이 있는지 확인합니다.

Kontactr 이용하기

Kontactr 이용하기

Kontactr 이용하기

메일 내의 링크를 클릭했을 때 이 화면이 뜨면 가입이 완료된 겁니다.


Kontactr 이용하기

로그인을 하면 폼 양식 코드가 몇 가지 제공됩니다. 우리는 아까 만들어 둔 이메일 주소 이미지를 사용할 것이므로 노멀 링크 코드를 이용할 것입니다. KPU 코드는 블로그 등의 웹 사이트를 떠나지 않고 양식이 바로 열리는 방식입니다. 노멀 링크 코드는 양식 창이 새창의 형태로 뜬다는 것이 차이점입니다.


다른 이미지를 사용하지 않고 위의 그림에서 보이는 kontactr에서 제공하는 버튼 이미지를 그대로 사용하실 분은 코드 수정없이 그대로 사용하시면 됩니다.
그렇지 않고 아까 만들어 둔 이메일 주소 이미지나 사용하고자 하는 다른 이미지에 컨텍 폼 양식을 링크할 계획이신 분들은 우선 이메일 주소 이미지를 웹에 올립니다. 이용하는 이미지 호스팅 업체가 없다면 운영하시는 티스토리나 텍스트큐브 블로그에 올려도 상관없습니다.

이 글에서는 한 가지의 경우로 설명하기 위하여 무료 이미지 호스팅 서비스를 제공하는 IMAGEBAM을 예로 하겠습니다.
우선 IMAGEBAM으로 연결합니다.


Imagebam

그림처럼 설정한 뒤 'UPLOAD' 버튼을 클릭합니다.


Imagebam

Link only 주소를 메모장 등에 복사해 둡니다.


이제 필요한 것이 다 모였습니다.
아까 생성된 Kontactr의 노멀 링크 코드를 가져와서 이미지 주소만 IMAGEBAM의 것으로 바꾸면 됩니다.

Kontactr 이용하기

이미지 바꾸실 때 바꾸는 이미지의 폭(width)과 높이(height)에 맞게 코드를 수정하시거나 아니면 아예 생략하시면 됩니다.

이제 완성된 최종 코드를 블로그 사이드 바, 혹은 적당한 위치에 붙여 넣기만 하면 됩니다. 제 블로그에는 이메일 주소 이미지가 어디에 있을까요? 찾아 보세요~ ^^

※ UPDATE:

설명을 한다고는 했지만 쉽게 설명드리지 못 한 것 같습니다. 본문에 설명해 놓은 것으로는 도통 무슨 말인지 이해가 안 된다, 그런데 만들어서 적용해 보고는 싶다 하시는 분은 제가 대신 만들어 드리겠습니다. Kontactr 한 군데를 제외하고는 회원가입도 필요없는 곳이라 굳이 본인이 꼭 할 필요는 없겠네요.
이 글에 댓글을 달아주시면 되는데 비밀댓글 형태로 만들고 싶은 Kontactr의 ID와 연결한 이메일 주소를 알려주시면 제가 메일 발송 가능한 이메일 이미지를 만들어 드립니다. 단, 작업이 끝나고 나면 알려주신 메일로 만들어진 발송 가능한 이메일 이미지의 소스 코드,  Kontactr의 ID와 비밀번호를 알려 드릴테니 이후 Kontactr에 접속하셔서 비밀번호는 직접 변경하시면 될 것으로 생각합니다.

추천 부탁해요~

 위(★), 아래(☞) 버튼을 눌러 주시면 저에게 많은 힘이 됩니다. 눌러 주실 거죠? ^ ^ 

블로그 운영하시는 분들은 수시로 업그레이드, 업데이트하시고, 시간 나실 때 틈틈이 이곳저곳 공사 중일 것으로 생각합니다. 이건 제가 그래서 그렇게 생각한 것이므로 상당히 주관적이기는 합니다.

저는 포스트 내용의 질은 쌈싸먹더라도 '실험 정신이 투철해서 항시 블로그 외관에는 신경을 쓴다.'고는  말씀 못 드리겠고, 귀가 얇아서 괜찮아 보이는 기능이나 위젯을 보면 덕지덕지 붙여봐야 직성이 풀립니다. 그러다 보니 블로그 로딩 속도는 점점 안드로메다 왕복 시간만큼 걸리고, 현재 사용 중인 White Board 2.0 스킨의 장점은 심플함과 깔끔함인데 제 블로그에 와서는 그러한 장점을 점점더 잃어가고 있네요. ㅠㅠ

사정이 이러하지만, 포스트 하단에 있는 추천 버튼과 광고 공간의 정렬은 오래 전부터 생각해 오던 거라 다시 스킨 수정을 했습니다. 그리고 며칠 동안 지켜 본 결과 한 가지를 제외하고는 큰 문제가 없는 것 같아 앞으로 특별한 일이 없는 한 계속 유지해 나가기로 했습니다.


추천 버튼과 카테고리 다른 글 보기 정렬


추천 버튼과 카테고리 다른 글 보기 정렬

구글 광고와 추천 버튼, 그리고 광고와 카테고리 다른 글 보기 정렬


추천 버튼과 함께 광고를 같은 줄에 넣기 위하여 오래 전부터 여러가지 형태로 시도해 왔습니다.
추천 버튼에서 추천 부분만 작게 잘라내어 468 x 60 크기의 구글 광고와 표를 이용하여 한줄에 나타내 보기도 했습니다. 그러다가 무슨 이유에서인지 추천 버튼이 전혀 작동하지 않는 먹통 상태를 경험해 보기도 했습니다. -_-; 이것도 제 글이 추천을 많이 받는 일은 거의 없기 때문에 모르고 있다가 친절한 이웃 블로거님이 알려주신 덕분에 고쳤습니다. 앞으로는 이런 사태를 미연에 방지하기 위하여 제 글에 스스로 자추도 한번씩 해 볼...
농담입니다. ^^;

아무튼, 이번에 새로 정렬하면서 애드센스 200 x 200 크기 광고와 다음, 믹시 추천 버튼을 함께 배열하였습니다. 다음과 믹시의 추천 버튼 가로 폭이 400px입니다. 제 블로그 본문 가로 폭이 660px이니 구글 애드센스의 크기는 200 x 200이나 250 x 250 둘 중의 하나가 올 수 있지만, 250 x 250은 광고와 버튼이 너무 딱 붙어 좀 답답한 느낌을 줄 수 있어 여유를 두고 200 x 200으로 했습니다.

② 링크 프라이스 광고와 카테고리의 다른 글 보기를 함께 배열하였습니다.
링크 프라이스 광고는 원어데이 광고인데 사실 원어데이는 제가 심심찮게 이용하는 곳입니다. 그런데 매일매일 들러 확인 못하고 깜박하는 경우가 있습니다. 다른 분들을 위한 광고라기 보다는 저를 위한 광고라고 보는 게 더 맞을 듯합니다. ^^

링크 프라이스 광고와 카테고리의 다른 글 보기는 둘 다 가로 폭이 가변적입니다. 즉, 코드를 붙일 때 임의대로 폭을 수정할 수가 있기 때문에 가로 폭 때문에 맞춤이 어려운 일은 없습니다. 저는 광고 위젯의 기본 폭인 166px를 그대로 두고 카테고리의 다른 글 보기 가로 폭을 거기에 맞추어 조정했습니다.

③은 정렬이라기 보다는 정리라고 하는 게 맞겠군요.
이전에는 메타 사이트 플래쉬가 밖으로 따로 나와 있었습니다. 다음과 믹시 추천 버튼 바로 아래에 오도록 했었습니다만, 어딘가 어색하고 혼자 따로 노는 듯한 느낌이 들었습니다. 그래서 이전부터 있던 구독, 글꼴 권유를 위한 파란색의 사각 블럭 안으로 넣어버렸습니다. 이렇게 하니 소속감(?)이 있어 보여 나름 괜찮은 선택이었다고 혼자 만족하고 있답니다. ㅎㅎ

이건 다른 얘기지만 파비콘도 바꿨습니다. 이전 파비콘은 다른 곳에 올려져 있던 이미지를 아이콘 파일로 만들어 사용했습니다. 그러다 보니 제 스스로 의미 부여를 하여 사용하기는 했지만, 어딘가 생뚱맞은 느낌을 지울 수가 없었지요.
그래서, 제가 예전에 만들었다가 너무 허접해서 창고로 직행했던 아이콘 파일 중에 조금 수정을 해서 파비콘으로 쓰기로 한 것이 지금의 파비콘입니다. 주소줄 앞에 잘 보이시나요? 아직 제대로 안 보일 수도 있습니다. 늦을 때는 상당히 오랜 기간 동안(며칠씩) 이전 파비콘이 그대로 보일 때도 있더군요.

← 바로 요녀석입니다. 잘 보이나요? 16x16x256c 규격으로 만든 겁니다. ComFunny에서 대문자만 따왔어요~

앞서 말씀드린 애드센스와 추천 버튼 정렬에 있어서 한 가지 문제점이 무엇이냐 하면 아래 그림을 먼저 보시죠.

문제점 1

추천 버튼이 한 개만 있을 경우.


문제점 2

추천 버튼이 없는 경우. 상기 이미지와 같이 발행을 하지 않고 공개한 글의 경우 추천 버튼이 없을 때 문제 발생.

그림으로 보시면 아시겠지만, 작성한 포스트를 발행하지 않았을 때 문제가 생깁니다. 공개만 했을 경우처럼 추천 버튼이 없으면 추천 버튼이 있어야 할 자리에 카테고리의 다른 글이 치고 올라 갑니다. 가로 폭이 안 맞으니까 애드센스 광고는 비좁다고 쫓겨 내려 오고, 원어데이도 덩달아 밀려버리는 사태가...;;


마치며...


참고로, 저는 HTML이나 CSS에 대해서 전혀 문외한입니다. 겨우 태그 몇 개 아는 정도입니다. 그러므로 이 문제점이 언제 고쳐질지는 며느리도 모른다는 전설이... -_-; 또한, 혹시라도 질문이 있으시면 아래 소개해 드리는 곳의 주인장께 하심이 옳을 것으로 아룁니다.
허접한 놈, 뭐 이따위 문제로 고민하고 있어? 하시는 고수분의 한 수 가르침에 언제나, 항상 경배할 준비가 되어 있다는... 가르침을 주시옵소서~ ^^

마지막으로 참고한 블로그나 사이트 목록을 정리합니다. 이런 식으로 정렬할 계획을 가진 분은 도움이 많이 되실 겁니다.


▶ 올블로그 포함해서 정리할 때

'▶ 다음, 믹시 추천 버튼 통합 및 카테고리의 다른 글 보기' 위치까지 변경하고 싶을 때


구글 애드센스를 운영하시는 블로거가 겪게 되는 가장 귀찮은 일 중의 하나가 수익금을 수표로 받아서, 추심  전 매입을 해주는 은행을 찾아서 원화로 환전하는 일이었습니다. 은행이 추심 전 매입을 잘 해주면 그나마 낫겠지만, 같은 은행이라도 지점에 따라 해주는 곳이 있고, 안 해주는 곳이 있습니다. 심지어 구글이 뭐하는 곳이냐는 반응을 접하면 정말 난감합니다.

이런 한국 내 구글 애드센스 게시자에게 정말 반가운 소식이 AdSense Blog-Korea로부터 배달되어 왔길래 이미 이 소식을 접한 분들도 많으시겠지만 소개해 봅니다.


Western Union Quick Cash


일단 자세한 사항은 구글에서 제공하는 관련 내용을 읽어 보시기 바랍니다.

지급 방식을 변경하는 방법은 관련 내용에 다 소개가 된 내용이지만 보기 쉽게 과정을 이미지로 남겨 봅니다.

사용자 삽입 이미지

'내 계정' 탭 클릭.


사용자 삽입 이미지

'수정'을 클릭하면,


사용자 삽입 이미지

'Western Union Quick Cash'를 선택하면 된다.

기업은행에 통장 하나 만들어야겠군요. ^^
저같은 경우는 웨스턴 유니온 방식으로 최대 지급 한도액이 $7,000으로 나오는데 꿈같은 액수군요. 저렇게 높게 설정해 두지 않아도 되는데 말입니다. -_-;


  * 이 포스트는 blogkorea [블코채널 : 블로그로 돈벌기!] 에 링크 되어있습니다.   

오늘자(5월 7일) Tistory에 공지가 하나 뜬 것을 확인하셨는지 모르겠습니다. 티스토리에 이미지 관련 플러그인 2종이 추가됐다는 공지였습니다.

하나는 PicApp에서 제공하는 사진을 블로그 포스팅 시 이용할 수 있도록 해주는 플러그인이고, 나머지 하나는 Flickr의 이미지를 포스팅하면서 본문에 삽입할 수 있는 플러그인입니다. 특히 제 개인적으로는 가족사진을 올리는 횟수가 부쩍 많이 늘어나서 얼마 전부터 플리커 프로 계정으로 전환하여 사용 중이기 때문에 Flickr와 티스토리의 이번 조치가 더욱 반갑게 다가옵니다. 또한, 근래 들어서 폭발적으로 늘어난 디지털 카메라의 보급 덕분에 Flickr 이용자가 많을 것으로 추측합니다. 그분들에게도 좋은 소식이겠지요.

그럼 PicApp와 Flickr 플러그인을 이용하여 사진을 본문에 한번 첨부해 볼까요?

키워드를 입력하고 검색한 결과.


아래 사진은 PicApp 플러그인을 통하여 삽입한 이미지들입니다. 이미지 폭이야 코드를 수정하면 되겠지만 손이 두 번 가게 되니 불편하겠지요.

The Final Weeks Of British Troops In Basra

NHRA: APR 03 SummitRacing.com Nationals

Vancouver, BC Scenics

Knowsley Safari Park

Knowsley Safari Park

PicApp 플러그인으로 키워드를 입력하여 검색하면 키워드와 전혀 매칭되지 않는 이미지들이 함께 나타나는데 이것이 공지에서 밝힌 관련 이미지인지는 모르겠습니다. 사파리(safari)를 검색했는데 드레스 입은 여자가 포토라인에서 포즈 잡고 있는 사진들이 몇 페이지씩 왜 나오는지 모르겠네요. 다른 키워드로 검색할 때도 마찬가지네요. -_-a 그리고 간혹 페이지 이동 시 '검색결과가 없다.'라는 메시지를 툭 던져 놓는데 이건 아직 불안정해서 그런 것 같습니다.

 Flickr 플러그인

검색은 플리커 이미지 태그나 제목을 참조하는 것 같습니다.


이제는 블로그에 사용할 CCL 이미지를 찾는 수고를 덜 수 있게 됐네요.

Alpenkorps field kitchen (Gulaschkanone)

Alpenkorps field kitchen (Gulaschkanone)
Alpenkorps field kitchen (Gulaschkanone) by drakegoodman 저작자 표시비영리동일조건 변경허락

☞ 추가사항 (2009년 5월 8일):

저는 웹 브라우저로 Firefox를 사용합니다. 아래 상오기™님의 트랙백 『티스토리의 플리커(Flickr) 플러그인 버그』를 확인해 보니 아직 이 플러그인이 IE에서만 정상 작동하고 FF나 크롬에서는 출처가 표시되지 않는 버그가 있네요. 위의 똑같은 두 개의 사진 중 윗쪽에 있는 것이 파이어폭스에서 플러그인으로 붙여넣은 이미지이고, 아래에 있는 것이 IE에서 플러그인으로 붙여넣은 이미지입니다. 조만간 고쳐질 것으로 생각합니다.

old clinton war days

Europa Trauert (Europe Mourns)
Tiger Comic Sans

04-27 Smithsonian Natural History Museum

Jacek Yerka -  Dinosaur Isle

아래는 제 플리커 계정에 있는 사진 중의 일부를 플러그인을 이용해 가져와 본 겁니다.

성민8개월2

성민8개월

성민8개월3

성민8개월4

noupe_WPPs_14

1222418802KgTT4yX

사용해 본 결과 개인적으로는 PicApp 플러그인보다는 Flickr 플러그인이 더 괜찮네요. 검색결과도 좀 더 정확한 것 같습니다. 어쨌든 티스토리에서 두 개씩이나 이미지 삽입 플러그인을 제공하는 것은 티스토리 사용자로서 아주 반가운 일입니다. 부작용으로 제가 블로그 글을 작성할 때 너무 이미지를 남발하게 되는 건 아닐까 살짝 걱정도 해봅니다. ^^;


* 이 포스트는 blogkorea [블코채널 : 웹, 컴퓨터, it에 관련된 유용한 정보 및 소식] 에 링크 되어있습니다.  

지난 금요일부터 me2DAY 서비스에 가입하고 저도 사용자가 되었습니다. 블로그 하나 꾸려가기도 솔직히 벅찬데 또 판을 벌인다는 게 부담스러워 그냥 멀찍이 바라만 보고 있었다고 해야 하나요?
그런데 한편으로는 그건 저의 귀차니즘이나 게으름을 그럴 듯하게 포장한 변명에 불과할 뿐이고 괜한 탓을 블로그로 돌린다는 생각이 들더군요. 제 블로깅에 족쇄를 채우는 일을 스스로 하고 있더라 이 말씀이지요. 그리고 정말 솔직하게 고백하건대 외국의 Twitter 열풍을 보면서 이거 무관심으로 일관하다가는 흐름을 놓칠 수도 있겠다[각주:1] 싶은 불안감이 들었습니다.

그래서 계정이나 만들어 두자는 생각으로 가입하고 시작했습니다. 이제 막 시작했기 때문에 제대로 아는 건 아무것도 없습니다. 여기저기 막 돌아다니고 있습니다. 휴대폰으로도 남겨 보고, 사진도 올려 보고 여기, 저기 들쑤시고 다닙니다. ^^
지금까지 결론은 이거 은근히 중독성이 있는 것이 재미있군요. 묘한 매력이 있는 것 같습니다. 왜 마이크로블로그로 칭하는지도 감이 옵니다. 그러면서 한편으로는 이런 흐름을 알고 me2DAY를 인수한 NHN, 즉 네이버가 왜 부동의 1위 자리를 고수하고 있는지, 발 빠르게 대처하는 모습에 인정할 건 인정해야 한다 싶습니다. 비록 마음에 안 드는 점도 많지만 말입니다. ^^

휴대폰으로 찍어서 me2DAY photo로 올린 성민이 ㅎㅎ


사이드 바 아래쪽에 제 me2DAY 배너가 있으니 me2DAY 사용하시는 분들은 친구로 초대 좀 해주세요~ ^^

meet me at me2DAY

아니면 제가 초대할 테니 응해 주셔도 됩니다. ㅋ
그리고, me2DAY 생초보가 꼭 알아야 할 팁 같은 것들 조언해 주시면 영광이겠습니다.

※ 아무리 보아도 로고 속 그림은 몽달귀신이라는...;;;


* 이 포스트는 blogkorea [블코채널 : 정말로 아무 이야기나 올리는 채널] 에 링크 되어있습니다.  


  1. 그렇다고 주류를 타고 온 것도 아닙니다. -_-; [본문으로]
며칠 전에 제 블로그 배경이미지를 변경했습니다. 기술적으로나 디자인 면으로 보나 전문적인 것과는 전혀 거리가 멉니다. 또한, 그런 쪽으로 지식도 전혀 없습니다만, 블로그를 시작하고 부터는 관심을 조금 두게 된 정도입니다. 이번 배경이미지 변경도 단지 인터넷 서핑 중 보게 된 대나무 이미지가 너무 쭉쭉 빵빵 시원하게 무료로 나온 게 있기에 '얼씨구나~'하고 이용하여 꾸며 봤습니다. 푸릇푸릇한 것이 계절에도 맞는 것 같고 해서 말이지요.


이번에 Six Revisions라는 곳에서 삽화를 사용한 사이트 헤더 30곳을 소개하는 글을 접하고 나름 괜찮은 것이 많기에 소개해 봅니다. 고수분 중에는 이런 걸 보면 바로 응용해서 자기 것으로 만들어버리는 분도 계시겠지만, 저처럼 항상 초보 영역에서 어슬렁거리는 분과는 이렇게 헤더 부분을 꾸밀 수도 있다는 영감을 공유하고자 합니다. 복잡하게 기술적이고 전문적인 것은 치워버리고 단순히 헤더에 사용된 이미지 자체만 놓고 보더라도 말이죠.


 삽화를 이용한 창의적인 웹 사이트 헤더 30곳                 


CARTONBLANC

CARTONBLANC


Visit Cascadia

Visit Cascadia


Webdesigner Depot

Webdesigner Depot


web.burza

web.burza


Mplusz

Mplusz


Marchand de Trucs

Marchand de Trucs


pallygiraffe.com

pallygiraffe.com


FashionJunkie.com

FashionJunkie.com


Brandi Bakes!

Brandi Bakes!


Brad Colbow

Brad Colbow


Miki Mottes

Miki Mottes


Go Glamping

Go Glamping


Boompa

Boompa


20onepixels

20onepixels


ten24

ten24


Adit Shukla

Adit Shukla


the Octonauts

the Octonauts


Komodo Media

Komodo Media


Themartist

Themartist


Phizz

Phizz


20 jours

20 jours


Cheesetique

Cheesetique


OKAYBOSS.COM

OKAYBOSS.COM


Rock en Seine

Rock en Seine


Unga Toys

Unga Toys


Neweracaptalk

Neweracaptalk


Blog What?

Blog What?


Springtime in Tennessee

Springtime in Tennessee


Blog.SpoonGraphics

Blog.SpoonGraphics


One-Button Mouse

One-Button Mouse


내 블로그 헤더는 '이런 스타일이 딱이야.' 하고 필이 팍 오는 게 있습니까? 혹은 만사 귀찮다 하시는 분은 저처럼 아예 헤더 이미지를 적용 안 하는 것도 하나의 방법 아니겠습니까? ^^;


  * 이 포스트는 blogkorea [블코채널 : 웹, 컴퓨터, it에 관련된 유용한 정보 및 소식] 에 링크 되어있습니다.  

검색 엔진 최적화(SEO) 방법으로 항상 함께 따라다니는 것 중의 하나가 웹로그 분석입니다. 웹로그 분석 서비스가 하는 일은 누가, 어떻게 내 사이트나 블로그를 찾아와서, 무엇을 하다가 빠져나갔는지 등의 정보를 제공합니다. 트래픽 정보, 유입 경로, 방문자들이 많이 보는 메뉴나 페이지가 어떤 것인지 알려주기 때문에 사이트나 블로그를 꾸려가기 위한 계획을 세우는 데 많은 도움을 줍니다.
그리고 그 사이트의 가치를 측정할 때 분석 서비스의 추적 코드, 혹은 분석 코드가 삽입되어 있는지가 하나의 기준이 되기도 합니다.

보통 웹로그 분석 서비스는 유료로 제공됩니다만, 무료 혹은 거의 무료[각주:1]로 제공되는 툴 중에서도 유료 서비스에 못지않게 훌륭한 기능을 제공하는 서비스가 많습니다. 그중에 많이 알려진 Google Analytics, 다음의 웹인사이드, Woopra 등이 있습니다. 우선 Google Analytics를 볼까요? 이 글은 아직 Google Analytics가 뭔지 모르시는 분이나 블로그 초보분들을 위한 글입니다. 이미 사용하고 계신 분은 글이 끝날 즈음에 있는 Google Analytics 스크립트와 관련된 정보를 한번 보시기 바랍니다.


  Google Analytics                                          


구글 계정을 가지고 있으면 사용할 수 있습니다. 강력하고 자세한 분석 결과를 제공하기 때문에 전 세계 많은 웹 사이트들이 사용하고 있습니다. 사용하지 않아도 전혀 지장 없을 것 같은 분석 기능을 왜 굳이 사용하라고 하는가? 라는 의문이 드시는 분은 Google Analytics의 도움말 중에 『Google Analytics를 사용하면 어떤 이점이 있습니까?』를 참조하시기 바랍니다.

그럼, 먼저 Google Analytics로 접속합니다. 오른쪽에 있는 지금 가입하기를 클릭하시거나 구글에 계정이 있는 분은 그 계정을 그대로 사용하시면 됩니다.


Google Analytics의 분석 기능을 제대로 활용하려면 추적 코드를 삽입해야 하는데 그러기 위해서는 먼저 프로필을 구성해야 합니다. 프로필 구성은 어려울 것 없이 추적 코드를 삽입할 사이트, 즉 여기서는 자신 블로그의 URL을 지정해 주면 됩니다. 프로필 추가는 아래 그림과 같이 목적에 맞게 선택해서 하면 됩니다.



왼쪽 아래의 웹사이트 프로필 추가는 새 도메인의 프로필을 추가하거나 기존 도메인의 프로필을 추가[각주:2]하거나 둘 중에 선택할 수 있습니다.

프로필 구성이 끝나면 추적 코드가 생성됩니다.


새 추적 코드(ga.js)가 디폴트로 화면에 보입니다. 이 코드를 클립보드나 메모장 등에 복사해 둡니다. 그리고 빨간 밑줄의 내용처럼 블로그 스킨의 </body> 태그 바로 앞에 붙여 넣어 줍니다. 티스토리의 경우 "스킨 → HTML/CSS 편집" 순으로 들어가서 skin.html에 아래 그림과 같이 추적 코드를 추가해 줍니다.


붙여넣기 한 후 저장을 클릭합니다. 추적 코드가 삽입되고 나서 보고서가 작성되기까지 많게는 24시간 정도가 걸리므로 바로 보고서에 데이터가 잡히지 않는다고 잘못된 건 아닌지 걱정하지 않아도 됩니다.

데이터 확인을 위해서는 Google Analytics에 접속하셔서 계정을 선택한 다음 확인하려는 프로필을 선택하면 됩니다. 계정은 여러 개를 가질 수 있으며[각주:3], 각 계정당 프로필은 여러 개 만들 수 있습니다.

계정 선택 화면



프로필 선택 화면



Google Analytics에서 제공하는 보고서 분석을 잘하셔서 블로그 발전에 큰 보탬이 되기를 바랍니다. 도움말이 잘 갖춰져 있기 때문에 사용 중에 궁금한 점은 도움말을 찾아보시면 웬만한 궁금증은 다 풀릴 것으로 생각합니다.

  Google Analytics 스크립트와 관련된 정보

참고로 Google Analytics와 관련된 정보를 하나 드리면, 인터넷에서 톱클래스에 들어가는 10,000개의 사이트 중에 50%(5,000개)가 Google Analytics를 사용한다고 합니다. 그런데 Google Analytics를 사용하는 5,000개 사이트 중에 40%가 구(舊)버전의 스크립트를 사용한다고 합니다. 구별법은 새 스크립트는 ga.js이며, 기존 스크립트는 urchin.js입니다.


새 스크립트 ga.js가 추적 코드에 사용되기 시작한 것은 2007년 12월부터라고 합니다. Google이 보통 구버전의 스크립트에 대한 지원을 12 ~ 18개월이 지나면 중단한다고 보았을 때, 만일 이 경우에도 같은 규칙이 적용된다면 urchin.js 스크립트의 수명도 곧 끝날 것으로 예상합니다.
Google Analytics의 공인 컨설턴트의 말에 따르면,

구글로부터 얻은 정보에 따르면 urchin.js에 대한 지원은 올여름 쯔음에 끝날 것이다.

라고 했답니다. 따라서, 404 error를 보고 싶지 않으면 ga.js로 갈아타라고 조언하는군요.
아직도 urchin.js를 사용하는 사이트 중에 유명한 몇 곳의 목록을 살짝 살펴보면, Blogger.com, DoubleClick.com, IGN.com, Foxnews.com, Wired.com, PCWorld.com 등이 포함되어 있습니다. 재미있는 건 구글이 소유한 Blogger.com과 DoubleClick.com도 들어 있다는 사실입니다.

혹시라도 확인해 보시고 해당하시는 분은 새 추적 코드로 갱신하셔서 사용하시기 바랍니다.

다음의 웹인사이드, Woopra도 다음에 기회가 생기면 살펴보겠습니다. 살펴본다는 게 제대로 형식을 갖추어서 리뷰를 한다는 뜻은 아니고, 이 글에서 보시다시피 실상은 수박 겉핥기식[각주:4]입니다.


  * 이 포스트는 blogkorea [블코채널 : 웹, 컴퓨터, it에 관련된 유용한 정보 및 소식] 에 링크 되어있습니다.  


  1. 조건부 무료라고 해야겠지요. Google Analytics의 경우 월별 페이지뷰가 5백만 건 이하면 무료로 제공된다고 하지만, 개인 사이트나 블로그에게 한 달에 5백만 페이지뷰는 달성하기 어렵기 때문에 개인 사용자는 무료라고 생각하시면 되겠습니다. [본문으로]
  2. 그림에서 파란 동그라미에 파란 화살표로 가리키고 있는 '+ 새 프로필 추가'와 같은 기능입니다. [본문으로]
  3. 계정을 새로 만들면 자동적으로 추적 코드가 생성됩니다. [본문으로]
  4. 용서하소서~!!! [본문으로]
Time 지가 작년에 이어 두 번째로 올해 2009년 최고의 블로그 25곳을 뽑아서 소개하고 있습니다. 눈에 익은 외국의 유명 블로그들이 많이 보입니다. 그런데 생소한 블로그들도 보이는군요. Time 지가 낯선 블로그를 포함한 것은 올해 활발한 활동을 할 것으로 예상한 것 같습니다.

그리고 너무 과대평가되고 있는 블로그로 5곳을 뽑고 있는데 이름만 대면 아는 유명한 곳입니다. 이것 때문에 선정기준을 둘러싸고 잡음이 좀 있군요.


2009 Time지 선정 최고의 블로그


우선 어떤 블로그들이 2009년 최고의 블로그로 선정되었는지 한번 보시죠.
아래 제목이나 이미지를 클릭하시면 해당 블로그로 바로 이동합니다.


 Talking Points Memo                                                                                   




 The Huffington Post                                                                                    




 Lifehacker                                                                                                 




  MetaFilter                                                                                                 




 The Daily Dish                                                                                            



 Freakonomics                                                                                            




 BoingBoing                                                                                                




 Got2BeGreen                                                                                              




 Zen Habits                                                                                                 




 Paul Krugman                                                                                             




 Crooks and Liars                                                                                        




 Generación Y                                                                                             



 Mashable                                                                                                  




 Slashfood                                                                                                  




 Official Google Blog                                                                                    




 synthesis                                                                                                  




 bleat                                                                                                         



 /Film                                                                                                         




 Seth Godin's Blog                                                                                       




 Deadspin                                                                                                   




 Dooce                                                                                                       



 Confessions of a Pioneer Woman                                                                 




 Said the Gramophone                                                                                  




 Detention Slip                                                                                             



 Bad Astronomy                                                                                           




여기까지가 Time 지가 선정한 2009 최고의 블로그 25곳입니다.


Time지 선정 과대평가 받고있는 블로그


그리고 아래는 앞서 언급한 Time 지가 선정한 너무 과대평가되고 있는 블로그 5곳입니다. 왜 과대평가되고 있는가에 대한 설명을 하고 있습니다. 그중에 제일 처음의 TechCrunch가 과대평가 되는 이유에 대해서,

2005년 만들어진 TechCrunch는 실리콘 밸리의 역동성에 힘입어 태어나서 한때 가장 유명한 블로그 중의 하나였다. 그러나 요즘의 실리콘 밸리를 보라. 어떠한 활기도 찾아볼 수 없다. 최근 올라오는 포스트를 보더라도 별 도움이 되지 않는 기사들이다. 생명이 끝났다고 봐야 한다.

아주 냉정합니다. 나머지 4곳의 블로그가 과대평가 되는 이유에 대해서도 신랄하게 비판하고 있습니다. 개인에 따라 수긍을 할 수도 있고, 그렇지 않을 수도 있겠죠. 혹자는 Time 지의 2009 최고의 블로그 25곳 기사 게재방식을 비판하기도 하는군요. 링크 타고 가 보시면 아시겠지만, 리스트 형식으로 보여지는 것이 아니라 25개 블로그 소개를 25개의 다른 페이지로 나누어서 하고 있습니다. 거대 미디어이면서 페이지 뷰에 연연하는 것 아니냐는 것이죠. ^^

너무 깊게 생각할 필요는 없는 것 같습니다. 많이 기사화되는 내용이고 이번에 기사화한 곳은 Time 지라는 것이며, 기준에 따라 도출되는 결과는 천차만별일 테니까요.
아무튼, Time지에 의하여 과대평가 받고 있다는 불명예스러운 대접을 받은 블로그 5곳은 아래와 같습니다.


 TechCrunch                                                                                               




 Gawker                                                                                                      




 Jim Cramer's Blog                                                                                       




 PerezHilton.com                                                                                         



  DAILY KOS                                                                                                




여기저기서 많이도 이용하는 『올해의 블로그』라는 소재입니다만, 2001년부터 매년 행해지는 분야별 올해의 블로그를 뽑는 곳이 있어 소개해 봅니다. 사이트로 직접 가 보시면 2001년부터 2008년까지는 우승자가 가려졌고, 2009년 제9회 시상의 우승자들은 3월 16일 월요일 발표가 된다고 하는군요.

우승했든 아니든 이곳에 후보로 올랐던 블로그들은 해당 분야에 관심이 있다면 북마크해 둘 가치가 충분히 있는 블로그들입니다.


Weblog awards: the 2009 bloggies



제9회 the 2009 bloggies에서는 30개의 카테고리별로 각각의 추천된 후보 블로그들이 현재 소개되고 있네요. 일단 기본이 영문으로 발행되고 있는 블로그를 대상으로 하고 있기 때문에 아쉽지만 한글로 포스팅되는 우리나라 블로그는 포함되지 않습니다.

이 외에도 이곳처럼 weblog awards 혹은 블로그 어워드라는 표현을 사용하여 분야별 우수 블로그를 소개하는 곳은 많습니다. 우리나라 블로그들은 우리나라 검색엔진에서 '올해의 블로그', '블로그 어워드' 등의 검색어를 사용하셔서 우리나라 것만 골라 보시면 될 겁니다.

아래 링크를 따라가시면 오른쪽 상단에 2001년부터 자료가 잘 정리되어 있습니다.

Ninth annual weblog awards: the 2009 bolggies 보러 가기


앞으로 블로그 꾸미기에 도움이 되는 팁과 테크, 혹은 도구 등도 가끔 포스트 하려고 생각 중입니다. 도구라 하면 대표적으로 블로그용 위젯이나 웹서비스 등이 있겠죠. 제가 아는 지식이 일천한 관계로 주로 소개가 될 것입니다.


Drop-down Menu Bar


이번에 소개해 드리는 깔끔한 메뉴 바는 블로그 사이드바에 적용하면 복잡한 사이드바 공간을 획기적으로 줄일 수 있습니다.

아래 예는 사이드바의 링크를 위젯을 이용하여 드롭-다운 메뉴로 바꾼 것입니다. 길게 늘어질 링크 목록이 단 2개의 메뉴 바로 대체되었습니다. 추가와 삭제가 자유로워서 관리도 쉽습니다. 꼭 링크뿐만 아니고, 카테고리 등 활용 방안은 생각하기에 따라 많겠죠.





  • 기본값으로 드롭다운 메뉴 바 내의 메뉴를 클릭했을 때 새 창에서 열리게 되어 있지만 현재 창에서 바로 열리도록 하고 싶다면,
    코드 중에 "window.open"이라는 부분을 "window.location.replace"로 대체
    하시면 됩니다. 코드를 복사하여 자신의 블로그 환경에 맞게 수정해서 사용하시면 됩니다.

  • 메뉴 바의 가로 폭을 변경하고 싶다면,
    style="width: 160px;"을 찾아서 숫자 160을 여러분의 블로그 사이드바 가로 폭에 맞게 변경
    해 주시면 됩니다. 참고로, 저의 티스토리 블로그 스킨의 가로 폭은 180입니다.



블로그 사이드바용 드롭다운 메뉴 바 코드:




- 출처: Best Widgets for free


+ Recent posts