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

제 블로그 하단에 보시면 가로로 길다랗게 툴바가 하나 보이실 겁니다. 바로 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. 트위터, 페이스북, 마이스페이스, 버즈... 기타 등등. [본문으로]
이번 글은 블로그나 홈페이지를 운영하시는 분에게 해당하는 글입니다.
블로그나 홈페이지를 운영하는 분이라면 오늘 소개해 드릴 Pingdom 사이트에서 제공하는 웹 서비스에 대해 이미 알고 있는 분이 많으실 겁니다.
따라서 그런 분들은 이 글을 읽으실 필요가 없습니다.
이제 막 블로그를 꾸려가기 시작하는 새내기 블로거를 위한 글이라고 해두죠. ^^

블로그나 홈페이지를 운영하다 보면 이런 저런 플러그인이나 위젯을 주렁주렁 많이 달게 됩니다. 특히 의욕적으로 블로그를 운영하기 시작하는 초창기에는 괜찮다 싶은 위젯이나 서비스가 눈에 보이면 어떻게든 내 블로그에 적용하려고 하는 경향이 강한 것으로 압니다.

별 탈 없이 무사히 자신의 블로그에 적용되면 다행입니다만, 문제는 에러가 발생하거나 제대로 동작하지 않는 경우도 심심찮게 있다는 겁니다. 더군다나 에러가 적용 후 바로 나타나면 그 즉시 해당 위젯을 제거해 버리면 끝입니다.
하지만, 항상 그렇지 않다는 게 문제입니다. 처음 몇 일, 혹은 몇 달 문제없이 잘 동작하다가 어느 순간 에러가 생기거나 제대로 동작을 하지 않는 일도 많습니다.

만약 이러한 상황에 봉착하게 되었을 때 블로거로서 경력이 좀 되면 대충 눈치로 이 부분이 문제구나 하고 감이 오는 경우[각주:1]도 있습니다. 그러나 그렇지 않은 경우가 더 많죠.

알 수 없는 이유 때문에 페이지 로딩 속도가 느리거나 아니면 블로그 웹페이지가 이상하게 로딩이 된다든지, 혹은 어느 로딩과정 이후로는 진행이 안 된다거나 하는 문제가 생깁니다.
많은 분들이 블로그 스킨 만지다 한번 정도는 낭패를 겪어본 경험이 있을 것으로 짐작합니다. 예를 들어, 사이드바가 사라졌다든지, 아니면 엉뚱한 데 붙어 놀고 있는 것[각주:2]처럼 말이지요.

이런 경우 블로그 스킨이나 HTML 코드에 대해 잘 알고 있다면 어떻게든 해결해 나가는 게 가능하지만, 그렇지 않은 경우 난감할 수 밖에 없습니다.


Pingdom Tools - Full page test



어느 날 내 블로그에 접속해 보니 이상하게 평소보다 페이지 뜨는 데 시간이 많이 걸린다. 무슨 문제가 있는 것 같다. 그런데 ㅈㄸ 아무리 봐도 뭐가 문젠지 모르겠다. 며칠 전 좋다고 붙인 위젯이 말썽인가? 아니면 스킨에 추가한 스크립트가?

이거 제 얘기입니다. -_-;

지금은 예전처럼 새로운 위젯이나 웹서비스만 보이면 미친 놈처럼 달려가 코드 따와서 아무데나 철썩 가져다 붙이는 일은 줄었습니다만, 지 버릇 개 주나요? 덜하다는 거죠. ㅎㅎ

아무튼 위 박스와 같은 상황에 직면했을 때 내 블로그 어떤 곳에서 문제가 생겨 로딩이 느려지는 것인지만 알아도 문제의 90%는 해결한 거라 생각합니다.

☞ 팁:

새로운 위젯을 달거나 스킨을 수정하기 전에는 반드시 티스토리 자체에서 제공하는 테이터 백업이나 스킨 저장을 미리 꼭 해두는 습관을 들이시는 게 혹 있을지 모르는 난감한 상황을 피해갈 수 있는 열쇠입니다.

이럴 때 알아두면 요긴하게 써먹을 수 있는 곳이 Pingdom에서 제공해 주는 Full page test라는 서비스입니다.

  Full page test                                          
먼저 Full page test 페이지(http://tools.pingdom.com/fpt/)로 이동합니다.

Pingdom Tools - Full page test
우선 ①의 빈 칸에 자신의 블로그나 홈페이지 URL을 채워 넣습니다.

③의 체크 박스에 체크를 하면 테스트한 사이트의 기록이 저장되어 이후 동일한 사이트를 다시 테스트하였을 때 로딩 타임을 서로 비교해 볼 수 있습니다.

마지막으로 'Test Now'를 클릭합니다.
그러면 아래 그림처럼 각 객체[각주:3]의 로딩 타임이 읽어들이는 순서를 기본으로 표시됩니다.

Pingdom Tools - Full page test

이 화면에서 빨간 타원 안의 'Show link hierarchy'를 클릭하면 읽어들이는 순서대로 정렬된 객체들이 그 객체가 포함되어 있는 곳(예를 들어 CSS 파일)을 기준으로 분류되어 보여집니다. 쉽게 말해서 탐색기의 폴더 구조를 떠올리면 됩니다.

Pingdom Tools - Full page test

어떤 객체가 어디 소속인지 한 눈에 보이시죠? 안 보이시면 클릭해서 큰 그림으로 보세요.


빨간 줄로 보이는 폴더 구조는 보기 쉽게 제가 그린 겁니다. 실제로는 빨간 줄이 없습니다.

Pingdom Tools - Full page test

정렬 방식 선택


①번은 이미 설명드렸고, ②번은 어떤 기준으로 정렬할 것인지 선택할 수 있는 드롭다운 메뉴입니다.
③번은 ②번에서 선택한 정렬 기준을 바탕으로 오름차순, 내림차순을 지정하는 화살표입니다.

입력한 사이트의 테스트가 끝나면 왼쪽 아래 정보가 출력됩니다.


각 항목이 의미하는 바는 간단합니다.
사이트의 총 로딩 타임과 총 객체의 수, 그리고 그 아래 세분하여 각각의 항목이 몇 개나 되는지를 보여줍니다.

그리고 오른쪽 아래에는 테스트한 날짜와 시각, 그리고 로딩 타임이 표시됩니다.
만약 앞서 설명한 Save test라는 체크 박스에 체크를 하였다면 이후 테스트 정보는 계속 저장되어 읽어들이는 시간의 변화를 비교해 볼 수 있습니다.

Pingdom Tools - Full page test

테스트 기록이 한 화면을 넘어가면 오른쪽 아래 빨간 타원 안의 화살표가 활성화됩니다.


Pingdom Tools - Full page test

마지막으로 테스트 화면에서 보이는 막대가 뭘 의미하는지 설명하고 이번 포스트는 마치도록 하겠습니다.

오른쪽 그림에서 보듯이 노란색 부분은 연결되기까지의 시간이며, 초록색 부분은 연결 후 데이터를 읽기 직전까지의 시간이며, 파란 부분은 객체를 읽어오는 시간입니다.

노란색과 초록색 부분이 길게 나타나면 보통 문제가 있다는 걸 의미합니다.
연결이 원활하지 않거나 데이터를 읽어오는데 어떤 걸림돌이 있다는 것으로 해석할 수 있겠죠.
만일 사이트 로딩이 평소와 다르게 느려졌다면 초록색, 특히 노란색이 길게 나타나는 객체를 위주로 하여 주의 깊게 살펴보면 도움이 되실 겁니다.



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

추천 부탁해요~


  1. 삽질의 승리죠. 삽질한다고 무조건 나쁜 것만은 아니란느 거~ ^^ [본문으로]
  2. 전 자주 겪어 봤습니다. 삽질하다 보면 재미있어요. -0-; [본문으로]
  3. CSS, 자바 스크립트, 플래시, frame/iframe, 이미지 등이 모두 포함됩니다. [본문으로]
블로그 이웃과 얼마나 소통을 하고 계십니까? 링크 관리는 부지런히 하고 계시는가요? ^^

2006년 네이버에서 블로그 생활을 시작한 뒤로 2년간 네이버에서 지내다가 2008년 티스토리로 이사를 왔습니다. 티스토리로 이사를 오고자 한 건 아니었지만, 우연찮게 제가 활동하던 커뮤니티에서 회원 한 분이 '티스토리 초대장 줄테니까 여여~ 다 붙어라'라는 글을 보고 공짜면 소도 잡아먹을 수 있다는 말에 동감하는 제가 별 생각없이 덥썩 신청을 한 것이 티스토리와의 첫만남이었습니다.

처음 와서는 정말 삽질도 많이 했습니다. HTML을 잘 아는 것도 아닌 아주 아주 기본 태그 정도 아는 게 전부였고, 디자인적인 감각은 꽝이라 수시로 위젯같은 것을 덕지덕지 붙인다거나 하루 아침에 빼버리곤 하였습니다. 요즘은 조금 자제를 하는 편이긴 합니다만, 이 버릇은 지금도 남아있네요. 제 블로그를 유심히 보실 분이 계실지 모르겠습니다만 갑자기 뭔가 생겼다 싶다가도 순식간에 사라집니다. ㅡ,.ㅡ;

네이버 블로그 시절에는 새로운 서비스나 위젯 등이 나왔을 때 제 마음에 들면 고민할 필요없이 제공된 틀 안에 적용만 시키면 끝이었는데, 티스토리로 오니 니가 다 알아서 해라는 식이더군요. 그때만 하더라도 설치형에 익숙하지 않았기 때문에 많은 어려움이 있었죠. 지금은 다시 네이버로 돌아가라고 하면 도리도리할 겁니다. 스스로 만들어 가는 삽질의 매력에 빠져있다고 할까요? 네이버 블로그도 티스토리나 텍스트큐브 때문에 제법 변화가 있었지만 여전히 제약이 많다고 생각합니다. 그렇지만 훌륭하게 네이버 블로그를 꾸려나가시는 파워 블로그를 보면 역시나 자기 변명이겠지요. ^^;


저와 함께 소통놀이 하실 분을 찾습니다~


티스토리 블로그 처음 개설할 당시 만들고는 거의 수정이 없었던 블로그 이웃 링크를 어제부터 업데이트하고 있습니다. 한RSS에 등록되어 있는 블로그 목록을 제 블로그 사이드 바의 블로그 링크 항목에 적용시키고 있는데 한꺼번에 하려니 이것도 일이네요. 결국 한 번에 다 하는 것은 포기하고 틈틈이 시간나는대로 업데이트하기로 마음 먹었습니다.

블로그 이웃 링크

블로그
정리와 업데이트를 하면서 느끼기를 '참 그동안 소홀했구나.' 싶더군요. 어떤 링크를 클릭하니 블로그가 사라지고 없더군요. 다른 곳으로 옮기신 건가? 아니면 블로그 생활을 아예 접으신 건가? 하는 궁금증과 함께 너무 무관심했다는 자책을 했습니다.
사실 지금까지 저는 적극적으로 이웃 블로그를 방문해서 댓글로 안부를 묻고, 공감을 표하는 것에 인색한 편이었습니다. 가뭄에 콩 나듯 생각나면 찾아보고, 접속하더라도 글만 읽고 쏙 나와버리는 경우가 대부분이었지요. 냉정하게 평가하자면 제 블로그는 소통이 거의 없는 죽은 블로그였다고 생각합니다. 제일 바람직하지 못한 블로그 형태의 하나가 아닌가 반성해 봅니다.

블로그로 소통하기

그래서 결심했습니다. 제 블로그 올해의 좌우명은 '소통'으로 결정했습니다. 시간날 때마다 이웃 블로그 새로운 글도 읽고, 댓글도 남기고 안부도 묻고, 새로운 블로그 이웃 사귀기에도 열심히 해보렵니다. 댓글에 남아있는 저를 보시고 못 보던 사람이 찾아왔네 하시는 블로거 중 실제로 제가 처음 방문한 곳도 있겠지만 대부분의 경우 진작부터  RSS에 등록해 두고 얌체같이 글만 살짝 읽고 그냥 가곤 했었습니다. 이제는 자주 자주 댓글 남기고 할테니 반갑게 맞아주세요~

저의 다짐인 소통 활성화에 도움 주시기를 감히 부탁드려 봅니다. ^^;
모두들 좋은 시간 되세요~



  * 이 포스트는 blogkorea [블코채널 : 우리에게 블로그는 무엇입니까?] 에 링크 되어있습니다.   

추천 부탁해요~

   아래 추천 버튼을 눌러 주시면 저에게 많은 힘이 됩니다. 눌러 주실 거죠? ^ ^ 


블로그나 개인 홈페이지를 운영하고 계십니까? 그렇다면 혹시 방문자를 위한 이메일 연락처를 명기해 두셨습니까?

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

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


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


소통 방식의 다변화를 꾀하는 블로그나 홈페이지의 주인장은 메일 수집봇 걱정없이 이메일로 연락할 수 있는 방법을 웹 사이트 내에 제공하였는데 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에 대해서 전혀 문외한입니다. 겨우 태그 몇 개 아는 정도입니다. 그러므로 이 문제점이 언제 고쳐질지는 며느리도 모른다는 전설이... -_-; 또한, 혹시라도 질문이 있으시면 아래 소개해 드리는 곳의 주인장께 하심이 옳을 것으로 아룁니다.
허접한 놈, 뭐 이따위 문제로 고민하고 있어? 하시는 고수분의 한 수 가르침에 언제나, 항상 경배할 준비가 되어 있다는... 가르침을 주시옵소서~ ^^

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


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

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


  • SilkSoft.jpg (image)(디스펜서 똥꼬)2009-04-20 15:14:07
  • 미네르바 무죄 선고… 실컷 이용해 먹었다는 건가? 까불지 말라는 경고가 먹혀 들었다고 생각하는 건지…2009-04-20 17:04:38
  • 삭발하고~(me2mms me2photo)2009-04-20 22:54:38

    me2photo

  • 밥 먹으러 나왔는데 날씨 너무 좋네요~ 이런 날은 놀러가야 하는데… ㅜ_-(me2sms)2009-04-21 12:01:01
  • 오늘은 바빴네요. 바쁜 날은 무지 바쁘고, 한가한 날은 하루 죙일 놀고…; 이렇게 바쁜 날은 집에 가서 바로 쉬면 좋겠는데, 어떻게 알았는지 울 마눌님 문자로 '마치고 마트 가자.'고 문자 왔음. ㅠ,.ㅠ(바쁜 날)2009-04-21 17:18:48
  • 시키는 대로 다 했는데도 블로그와 연동이 안 된다. 도대체 뭐가 문제인 거야? -_-+ 독립 도메인이라서 그런가…?(블로그 독립도메인 연동)2009-04-21 23:11:22
  • 친하게 지내요~~~ ^^(인사 반가워요~)2009-04-21 23:53:13
  • 자~ 오늘 하루도 활기차게 시작하시기를~~~(아침인사)2009-04-22 09:09:10
  • 아… 날씨가 너무너무 좋습니다. 바깥에 나가보니 봄햇살에 정신이 혼미할 지경입니다. 사무실에 갇혀 있기 정말 싫네요.(봄 날씨)2009-04-22 15:13:30
  • 기온이 올라가니 자연스레 아이스크림과 탄산음료 생각이 납니다.(아이스크림 탄산음료)2009-04-22 15:58:02
  • 어젯밤 잠을 잘못 잤는지 하루 종일 등짝 전체와 양쪽 옆가슴이 아프다. 이거 한해 한해 갈수록 점점 더 삐걱거리는 걸 실감한다. ㅠㅠ 하긴 운동을 게을리 하고 있으니 변명의 여지도 없다;2009-04-22 17:16:59
  • 아… 이제야 큰아들 목욕시키고 나도 샤워 좀 하고 컴 앞에 앉았다. 요즘은 퇴근하고 집에 오면 잠자리 들기 전까지 시간이 어떻게 가는지도 모르겠다.(피곤)2009-04-22 22:54:01
  • 오늘도 힘차게 시작~~~!(아침인사)2009-04-23 09:15:41
  • 나른한 오후… 낮잠 한숨 잤으면 좋겠..;;(나른함)2009-04-23 14:11:36

이 글은 부스카님의 2009년 4월 20일에서 2009년 4월 23일까지의 미투데이 내용입니다.


이거 me2DAY 블로그 글배달 옵션으로 자동 전송된 잡담인데 포스팅 날로 먹는 거 같기도 하고, 무엇보다 좀 쑥쓰럽군요.
글배달을 계속 이용할 건지는 생각 좀 해봐야겠네요. ^^;
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                                                                                                




2009년이 시작한 지도 이미 한 달이 지나갔습니다만, 여기저기 2008년과 관련된 통계가 쏟아지고 있습니다. 이 글에서는 다른 것들은 다 접어두고 2008년 동안의 인터넷에 한정해서 뽑아 본 재미있는 통계를 소개해 봅니다.
광범위한 자료를 이용하여 통계를 산출하였으며, 전체 리스트는 이 글 말미에 링크 걸어 두겠습니다.

자, 그럼 『숫자로 본 인터넷 2008년』 한번 보시죠.

Email
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 13 억: 전 세계적으로 생성된 이메일 계정의 숫자.
  • 2100 억: 2008년 하루 동안 보내진 이메일의 평균량.
  • 70%: 이메일 중에 스팸으로 추정되는 양.
  • 53 조 8000 억: 2008년 한 해 동안 보내진 스팸메일의 양. (바로 위의 70%에 해당)

웹사이트

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 186,727,854: 2008년 12월 기준, 인터넷상의 웹사이트 숫자.
  • 31,500,000: 2008년 한 해 동안 새로 생긴 웹사이트의 숫자.

웹 서버(Web Server)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 24.4%: 2008년 한 해 동안 아파치 웹사이트의 성장률.
  • 13.7%: 2008년 한 해 동안 IIS 웹사이트의 성장률.
  • 22.2%: 2008년 한 해 동안 구글 GFE(Google Front End) 웹사이트의 성장률.
  • 336.8%: 2008년 한 해 동안 Nginx 웹사이트의 성장률.
  • 100.3%: 2008년 한 해 동안 Lighttpd 웹사이트의 성장률.

2008년 12월, 웹 서버 시장 점유율

2008년 12월 기준, 웹 서버 시장 점유율



도메인 명 (Domain names)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 77,500,000: 2008년 마지막 시점 기준, .COM 도메인의 수.
  • 11,800,000: 2008년 마지막 시점 기준, .NET 도메인의 수.
  • 7,200,000: 2008년 마지막 시점 기준, .ORG 도메인의 수.
  • 174,000,000: 최상위 도메인의 수.
  • 19%: 2008년 한 해 동안 도메인 숫자의 증가율.

인터넷 이용자
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 1,463,632,361: 2008년 6월 기준, 전 세계 인터넷 이용자의 수.
  • 578,538,257: 아시아 인터넷 이용자의 수.
  • 384,633,765: 유럽 인터넷 이용자의 수.
  • 248,241,969: 북아메리카 인터넷 이용자의 수.
  • 139,009,209: 라틴 아메리카 인터넷 이용자의 수.
  • 51,065,630: 아프리카 인터넷 이용자의 수.
  • 41,939,200: 중동지역 인터넷 이용자의 수.
  • 20,204,331: 호주를 포함한 오세아니아 지역 인터넷 이용자의 수.

2008년 6월 기준, 지역별 인터넷 이용자의 수

2008년 6월 기준, 지역별 인터넷 이용자의 비율



블로그
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 133,000,000: 인터넷상의 블로그 수. (Technorati 기준)
  • 900,000: 하루 동안 블로그에 등록되는 게시물의 수.
  • 329,000,000: 2008년 한 해 동안 블로그에 등록된 게시물의 수.

이미지 (사진)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 100 억: 2008년 10월 기준, Facebook에 의해 호스팅 되는 사진의 수.
  • 30 억: 2008년 11월 기준, Flickr에 의해 호스팅 되는 사진의 수.
  • 62 억: 2008년 10월 기준, Photobucket에 의해 호스팅 되는 사진의 수.

동영상 (비디오)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 127 억: 2008년 11월 기준, 한 달 동안 미국 인터넷 이용자들이 온라인으로 시청하는 동영상의 수.
  • 87: 미국의 인터넷 이용자 한 명당 한 달 동안 온라인으로 시청하는 동영상의 수.
  • 34%: 2007년 대비 미국 내 온라인 동영상 시청률의 증가율.
  • 3.1: 온라인 동영상의 평균 재생 길이 분 단위 시간.

웹 브라우저
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

2008년 12월 기준, 웹 브라우저 시장 점유율

2008년 12월 기준, 웹 브라우저 시장 점유율



악의적인 목적의 소프트웨어
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • 1,000,000: 2008년 4월 기준, 컴퓨터 바이러스의 수.
  • 468%: 2007년 대비 악의적인 코드(바이러스, Spyware, Malware 등)의 증가율.


☞ 자료 출처:

각 링크를 클릭하시면 통계 페이지로 바로 이동합니다.


- 출처: Royal Pingdom



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


Drop-down Menu Bar


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

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





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

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



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




- 출처: Best Widgets for free


+ Recent posts