당신은 레뷰 추천을 어떻게 하나요?

블로그를 조금 본격적(?)하면서 몇가지 고민거리가 있다. 아마 새로 시작하시는 분들도 비슷하지 않을까.

고민이라기 보다 내가 왜 블로그깅을 하고 있나하는 생각들.

내 생각을 표현하기 위해? 다른 블로거의 글을 읽기 위해? 수익을 얻기 위해? 주목받고 싶어서? 시간이 남아서? 그냥 남들 다 하니까? 그냥? 등등등

사실 저것들이 복합적으로 얽혀서 하고 있는 것이겠지만. 블로그에 관심이 없을 때 그저 관심가는 글 한 두개 읽을 때에 글읅 읽다가,

"이 블로그는 먼데 광고가 이리 많아?" 하며...... 성인동영상이라는 광고 링크를 눌렀다;;; (혹시 보이시나요? ^^)

처음엔 그게 이상했다. 구글애드센스가 가장먼저 치고나와 모두들 애드센스를 쓰던 시절. 사용자들도 설정법을 잘 모르니까 100이면 99개의 블로그들에 성인용 광고가 등장했다.

"자기 블로그가 이런 성인스러운 걸로 더러워져도(응?) 좋은가?" 하며.... 또 눌렀다.

블로그를 하면서 광고를 게시하고 수익을 내는 일. 나쁘지 않다. 아니 어쩌면 어떤 사람들에게는 큰 힘이 되고 어떤 사람들에겐 쏠쏠하고 어떤 사람들에겐 남들은 잘만하는데 나는 못한다며 애달복달하게 만든다. 요즘들어 알게되었지만 주부님들이 좋은 글들을 블로그에 올리고 광고로 수익을 올린다는 것에 감탄하고 있다.  생활비를 벌든 비자금을 조성하는 목적이든 참 긍정적인 일이라는 생각이 든다. 글도 쓰고 돈도 벌고. 블로그로 수익내기는 새로운 직업 혹은 아르바이트 이상이다.

얼마전 나도 비자금 조성좀 해보자고 이것 저것 읽고 배우고 하다 레뷰를 알게되었다. 이건 딱히 광고프로그램이 아닌데 추천으로 수익을 얻는 것. 추천많이 받으면 돈 무쟈게 벌겠는 걸 했다. 물론 웬걸이지만~

레뷰의 다른 점은 다른 광고들은 남들이 눌러줘야 나에게 수익이 생기지만 레뷰는 내가 눌러야 나에게 수익이 생긴다는 것.

물론 아니다. 남들이 내 글을 추천해야 나에게 수익이 생긴다.

그런데 맞다. 내가 남들을 추천하니까 잠깐하는 사이 수익이 생긴다.

그래서 다른 사용자의 글들, 혹은 레뷰 메인에 있는 글들, 혹은 특정 분야에 있는 글들을 주루룩 열어놓고 페이지가 다 로딩되길 기다렸다가 추천을 누르고 창들을 닫는 일이 생긴다. (이런면에서 크롬이 짱이다 - 관련글)심지어는 자기가 추천한 글이 무슨 내용인지도 모르는 경우도 있다. 물론 다들 그러지는 않겠지만 얼마간의 경험으로는 내가 눌러야 남들도 누른다.

구글 크롬에 아름답게 펼쳐진 레뷰 파비콘들;;;

레뷰는 지금 그렇게 동작하고 있는 것 같다.

그래서 레뷰 위젯을 만들면서 사용자의 아이디를 누르면 그 사용자의 글을 몇개, 이를테면 5개를 새로운 창에서 여는 기능을 넗을까 말까 고민했었다. 또 카테고리별 새 글 몇개를 새로운 창에서 여는 기능을 넣을까 말까했다. 그러다 넣지 않기로 했다. (소스파악하기 귀찮아서^^;;;).

 

처음에 말했지만, 블로그의 목적이 하나인 블로거는 거의 없을 것 같다. 수익도 얻고 싶고, 나의 생각을 말하고도 싶고, 다른 블로거의 생각도 듣고 공유하고도 싶고. 그런데 레뷰 위젯에 저런 기능을 넣으면 읽지도 않고 추천버튼만 누르는 일들이 더 많아질 것 같았다. 물론 위젯을 쓰는 사람이 많진 않지만. 음..

그러면 좀 어떠냐고 반문할 지 모르겠지만,

내 생각엔 다른 블로거의 글이 감동적이거나 좋진 않더라도,

그렇구나 혹은

이런 일이 있었구나 혹은

사진 잘 찍었네 혹은

슬프겠네 혹은

잘됐네 혹은

니 팔뚝 굵다의 의미로

추천버튼을 누르는 것이 '블로깅'의 최소한의 의미가 아닐까 한다.

그런 의미에서 -> 여기가셔서추천

음하하하하

구글 크롬 '요소검사' 기능, 사이드바, 위젯개발에 짱!

엊그제 레뷰 이웃 위젯 만들다 이미지 틀어지고 여백 수정안되는 문제 때문에 짜증이 났었다.

분명 여백도, 패딩도 다 0으로 했는데 들어갔다 나왔다 난리였다. iframe으로 처리하면 좀 나으련만 내가 레뷰서버 주인이 아니라 접속해서 코드를 심어놓을 수도 없고, 그냥 블로그 태그위젯에 코드를 다 떼려넣는 수 밖에 없었다.

그러다 보니 블로그자체에서 정의된 스타일이 계속 상속이 되어 설정된 되로 되질 않고 이랬다 저랬다. 그래서 처음부터 끝까지 필요한 속성들을 다 스타일로 정의하다 보니 그 위젯하나 만들면서 스타일 코드가 길어져 버렸다.

그렇게 씨름한 것도 사실 크롬의 요소검사(inspect element) 기능을 써서 빨리 끝이 났다. 요소 검사 기능은 간단히 말하며 현재 보고 있는 페이지 소스가 어떻게 되어있는지, 어떤 리스소 (이미지, 동영상, 스크립트, 스타일 파일 등)들이 포함되어 있는지 하는 기본적인 것에서부터, 리소스별 로딩 속도, 리소스 추적 등 웹 페이지 디자인 및 디버깅에 관한 아주 편한 기능들을 제공해 준다. 다시한번 구글 소프트웨어에 경의를.

현재 페이지에서 마우스 오른쪽 버튼을 누르면 요소검사(Inspect Element) 라는 기능이 제일밑에 보이는 데 그 기능을 누르면 위 그림처럼 요소검사창이 열린다. 언제 업데이트 되었는지 모르겠는데, 이전에는 별도의 창으로 열렸었다. 직접 써보니 저렇게 같은 창에 있어야 훨씬 버그를 잡긴 쉬운 것 같다. 위 그림은 요소검사창에서 현재 선택된 라인에 해당되는 코드가 웹페이지 어디에 표시되는 가를 보여준다. 내가 만든 위젯에 대한 코드를 선택하니 위젯이 선택되었다. 그리고 선택된 부분에 대한 스타일 정보를 상세히 알려준다.

작성한 코드를 아래 레벨로 들어가서 살펴본 화면. HTML 태그 하나 하나 다 잡아주기 때문에 작은 부분의 실수를 만회할 수 있다. 오른쪽 하단에서 보는 것처럼 상속된 스타일중 어떤 것이 적용되었고 어떤것이 다시 정의되었는를 볼 수 있다. 그렘에서는 블로그 이름이 <a>태그 안에 있는데, 일반 링크처럼 보이지 않게 하기 위해 다시 정의해서 글자 색과 링크 밑줄을 없앴다.

리소스 보기 화면, 어떤 리소스가 이 페이지에 포함되어 있고, 로딩 시간이 얼만큼 걸리는 가를 표시해 준다.

뿐만 아니라 현재 페이지가 참조한 (현재 페이지에 포함되어 있지 않더라도) 스타일시트나 스크립트 파일을 열어 검토할 수 있게 해준다. 맨날 노트패드에 복사해서 붙여서 검사했었는데, 저렇게 프로그램개발툴처럼 읽기 쉽게 해노니 너무 좋다.

물론 이미지도 볼 수 있다.

이번 레뷰 위젯 개발에도 큰 도움이 되었지만. 일반 사이드바 위젯 설정할 때도 좋을 듯 하다. 사이드바에 누구나 위젯을 가져다 붙이는데 가끔 패딩이나 마진이 설정되어 있는 위젯들이 있는 경우가 있다. 블로그와 스타일 충돌인 경우도 있고, 내 블로그와 어울리지 않는 스타일을 쓰고 있을 수 있다.

그런 경우 크롬의 요소검사 기능을 이용해서 아주 세밀한 부분까지 깔끔하게 정리해보심이 어떨지!

+소스를 해당 서버에서 가져오는 위젯들은 아무리 발버둥쳐도 고칠수 없긴 하다 ㅠ.ㅠ 예를 들면 링크프라이스 .

레뷰 이웃 위젯 - 스크립트 업데이트

주말인데 할일이 없어 레뷰 위젯을

만들어 보았습니다. 하하. 왼쪽에 달린 저거.스크립트를 뒤지다 보니 아마 조만간 레뷰 개발팀에서 개발을 할 것 같아서 조만간 폐기 될 것 같지만요.

마이레뷰페이지에서 찾아가는 것 보다 훨씬 빠르긴 하답니다.

맘에 드는 분들은 가져다 쓰세요!

일단 이 레뷰위젯의 단점은! 응?

1. 들어가 있는 이미지나 링크들은 프로그램으로 생성된 링크가 아니라 레뷰링크를 그대로 가져온 거라서 레뷰개발진에서 그 링크주소를 바꾸면 위젯에 이미지가 출력이 안된다.

2. 이웃추가기능이 없다. (당연하다 하하) 추가하려면 스크립트 일일이 추가해야한다. 힘들다.

3. 블로그에 따라서 위젯 출력이 이상해질 수 있다.

4. 또 단점이 있을 수 있다.

지금 텍큐랑 티스토리에서 테스트 해보았는데, 그 두개는 멀쩡한 것 같습니다. 다른 블로그들은 모르겠네요.

가로가 200사이즈, 180사이즈 두개 있구요. 가로 사이즈를 조정하면 모양이 조금 이상해질 수 있습니다. 정교하게 만든게 아니라서^^;

호스팅을 하고 계시거나 블로그에 자바스크립트파일을 올리실수 있으신 분들은 올려서 사용하는게 아마 편할 것 같습니다. (레뷰에서 이웃위젯 개발이 늦어지면 나중에 시간나면 고쳐보지요.)

그럼 위젯을 다는 방법은!

제 글 목록에 '레뷰 이웃 위젯 가로 200'이나 '레뷰 이웃 위젯 가로 180' 글 내용 전체를 긁어다가 사이드바 HTML 태그 위젯 하나 생성해서 가져다 붙이세요. 너무 길다고 신경질 내지 마시구요. 설명도 소스에 있습니다. 고수님들은 맘대로 편집하셔도 되고, 그냥 가져다 쓰실 분들은 맨 윗부분에 설정하라고 되어있는 부분만 고치시면 됩니다.

앗! 파일 추가기능이 블로그에 있었군요. 하하하 암 쏘리. 파일을 그냥 받으세요. 업데이트 되거나 색상등 변경된 위젯도 이 글에 계속 올리겠습니다.

revuWidget200_1.doc

   

revuWidget180_1.doc

설명을 위해 워드 파일로 올렸습니다. 그냥 긁어다 설정하시는 위젯에 넣으시면 됩니다.

아 너무 불친절하군요.

레뷰에 사용자 이미지 뽑는 스크립트 쫓다가 정신이 오락가락. 결국 못찾았습니다.

정신이 든다면 좀 친절한 설명도 붙이도록 하지요!

안되거나 이상하거나 궁금한것은 댓글다세용.

아 제가 만든건 맞는데 혹시 궁금하면 저작권은 유인촌장관에게 문의하세요.

레뷰 이웃 위젯 가로 180

사용법은 여기를 눌러 읽으세요 (아 이 문장은 복사하지 마시고, 아래부터 끝까지 복사)

<html>

<head>

<script type="text/javascript">

//가로 사이즈 180px용 위젯입니다.

//빨간 글씨가 수정할 내용입니다.

//추가하려는 Revu사용자 닉네임을 적으세요. 각사용자 닉네임은 따옴표 안에 들어가야 되고 닉네임다음에 콤마가 있어야 됩니다.

var list = ["별다방미스김", "닉네임1", "닉네임2" ];

//자신의 레뷰 닉네임을 적으세요

var ownerNickname = "별다방미스김";

//자신의 이미지 URL을 적으세요, 굳이 레뷰이미지일 필요는 없겠지용. 자신의 레뷰이미지주소는 로그인한 다음에 자신의 이미지위에다 놓고 오른쪽마우스클릭하면 이미지URL 등의메뉴를 누르면 확인할 수 있습니다.저 암호문자 같은 아이디를 찾아내는 API를 못발견해가꼬 이렇게 할 수 밖에.

var ownerImage = "http://www.revu.co.kr/Image/User?ID=414AFE24-F7D3-49D8-9F75-E7ED58453984";

//자신의 블로그 이름을 적으세요

var ownerBlog = "Misskim in Pittsburgh";

//자신의 블로그 URL을 적으세요

var ownerBlogURL = "http://danceletter.textcube.com";

//친구를 입력한순서대로 출력하려면 1을 가나다순으로 정렬하려면 2를 입력하세요

var sortType = 1;

//위젯의 높이를 입력하세요. 160이상이어야 합니다.

var widgetHeight = 300;

////////////////////////////////////////////////

// 디자인을 변경하시는게 아니면 아래부터는 수정하지 않아도 됩니다. //

/////////////////////////////////////////////////

var i;

var html;

var listHeight = widgetHeight - 120;

if (sortType == 2) list.sort();

html = "<div class=\'revu\' style=\'height:" + widgetHeight + "px;\'> ";

html += "<div class=\'logo\'><img src=\'http://www.revu.co.kr/images/common/img_header_logo_beta6.gif\' width=\'170px\' height=\'45px\'></div>";

html += "<div class=\'profileBox\'>";

html += "<div class=\'profileImage\'>";

html += "<a href=\'http://www.revu.co.kr/MyRevU/" + ownerNickname + "\' target=\'_blank\'>";

html += "<img src=\'" + ownerImage + "\'> </a> </div>";

html += "<div class=\'profile\'>";

html += "<a href=\'http://www.revu.co.kr/MyRevU/" + ownerNickname+ "\' target=\'_blank\'> <b>";

html += ownerNickname + "</b></a><br />";

html += "<a href=\'" + ownerBlogURL + "\' target=\'_blank\'>";

html += ownerBlog + "</a></div></div>";

html += "<div class=\'friends\' style=\'height:" + listHeight + "px\'> ";

html += " <ul>";

for (i=0; i<list.length; i++) {

html += "<li> <div class=\'friendImage\'> ";

html += "<img src=\'";

html += "http://www.revu.co.kr/images/myrevu/ico_menu_on.gif\'> </div> ";

        html += "<div class=\'friendName\'> <span><a  href=\'";

html += "http://www.revu.co.kr/MyRevU/" + list[i] + "/\'" + "target=\'_blank\' >";

html += list[i] + " </a></span></div> </li>";

}

html += "</ul></div> <div class=\'bottom\'>";

html += "<b> " + list.length + "</b> RevU Friends!</div></div>";

document.write(html);

</script>

<style type="text/css">

.module_plugin .friends ul li{padding:0px;margin:0px;}

.revu{font-family:dotum;font-size:11px;width:176px;overflow:hidden; background-color:#ccffff;border-color:#99cccc;border-style:solid; border-width:1px; padding-top:10px;margin-top:20px;}

.logo{width:172px; height:50px; margin-left:4px; }

.revu .profileBox a, .revu .friends a{color:#5f5f61;text-decoration:none;cursor:pointer;}

.revu a:hover, a:active, a:link {text-decoration:none;}

.revu .friends a:hover, a:active, a:link {text-decoration:none;}

.profileBox{height:50px;margin-left:5px; padding:5 0 10 0px;overflow:hidden;}

.profileBox .profileImage{float:left;display:inline;border:solid 1px #99cccc;background-color:#ffffff;width:40px;height:40px;padding:1px;cursor:pointer;overflow:hidden;}

.profileImage img{width:40px; height:40px}

.profileBox .profile{display:block; font-size:12px;height:30px; padding:1px; margin-top:5px; margin-bottom:5px;margin-left:50px; width:110px; overflow:hidden;}

.profileBox .profile span{}

.friends {background-color:white;position:relative; width:94%; margin-left:5px; overflow:auto; padding:0 0 10 0px;border-style:solid; border-width:1px;}

.friends ul {margin:0; padding:0;list-style-type:none;}

.friends li {background:none; padding: 0 0 0 1px;margin:0 0 0 1px;

position:relative; height:20px; width:120px; text-align:left; white-space:nowrap; overflow:hidden;}

.friends .friendName{display:inline-block; width:90px; overflow:hidden; font-size:11px;margin-top:5px; margin-left:15px; }

.friends .friendImage{float:left;position:relative; padding-left:5px;margin-left:0px;margin-top:5px; width:12px; height:12px; z-index:0;}

.bottom{float:right;margin-right:5px;color:#6699cc;}

</style>

</head>

<body></body></html>

레뷰 이웃 위젯 가로 200

사용법은 여기를 눌러 읽으세요 (아 이 문장은 복사하지 마시고, 아래부터 끝까지 복사)

<html>

<head>

<script type="text/javascript">

//가로 사이즈 200px용 위젯입니다.

//빨간 글씨가 수정할 내용입니다.

//추가하려는 Revu사용자 닉네임을 적으세요. 각사용자 닉네임은 따옴표 안에 들어가야 되고 닉네임다음에 콤마가 있어야 됩니다.

var list = ["별다방미스김", "닉네임1", "닉네임2" ];

//자신의 레뷰 닉네임을 적으세요

var ownerNickname = "별다방미스김";

//자신의 이미지 URL을 적으세요, 굳이 레뷰이미지일 필요는 없겠지용. 자신의 레뷰이미지주소는 로그인한 다음에 자신의 이미지위에다 놓고 오른쪽마우스클릭하면 이미지URL 등의메뉴를 누르면 확인할 수 있습니다.저 암호문자 같은 아이디를 찾아내는 API를 못발견해가꼬 이렇게 할 수 밖에.

var ownerImage = "http://www.revu.co.kr/Image/User?ID=414AFE24-F7D3-49D8-9F75-E7ED58453984";

//자신의 블로그 이름을 적으세요

var ownerBlog = "Misskim in Pittsburgh";

//자신의 블로그 URL을 적으세요

var ownerBlogURL = "http://danceletter.textcube.com";

//친구를 입력한순서대로 출력하려면 1을 가나다순으로 정렬하려면 2를 입력하세요

var sortType = 2;

//위젯의 높이를 입력하세요. 160이상이어야 합니다.

var widgetHeight = 300;

////////////////////////////////////////////////

// 디자인을 변경하시는게 아니면 아래부터는 수정하지 않아도 됩니다. //

/////////////////////////////////////////////////

var i;

var html;

var listHeight = widgetHeight - 120;

if (sortType == 2) list.sort();

html = "<div class=\'revu\' style=\'height:" + widgetHeight + "px\'> ";

html += "<div class=\'logo\'><img src=\'http://www.revu.co.kr/images/common/img_header_logo_beta6.gif\' width=\'185px\' height=\'48px\'></div>";

html += "<div class=\'profileBox\'>";

html += "<div class=\'profileImage\'>";

html += "<a href=\'http://www.revu.co.kr/MyRevU/" + ownerNickname + "\' target=\'_blank\'>";

html += "<img src=\'" + ownerImage + "\'> </a> </div>";

html += "<div class=\'profile\'>";

html += "<a href=\'http://www.revu.co.kr/MyRevU/" + ownerNickname+ "\' target=\'_blank\'> <b>";

html += ownerNickname + "</b></a><br />";

html += "<a href=\'" + ownerBlogURL + "\' target=\'_blank\'>";

html += ownerBlog + "</a></div></div>";

html += "<div class=\'friends\' style=\'height:" + listHeight + "px\'> ";

html += " <ul>";

for (i=0; i<list.length; i++) {

html += "<li> <div class=\'friendImage\'> ";

html += "<img src=\'";

html += "http://www.revu.co.kr/images/myrevu/ico_menu_on.gif\'> </div> ";

        html += "<div class=\'friendName\'> <span><a  href=\'";

html += "http://www.revu.co.kr/MyRevU/" + list[i] + "/\'" + "target=\'_blank\' >";

html += list[i] + " </a></span></div> </li>";

}

html += "</ul></div> <div class=\'bottom\'>";

html += "<b> " + list.length + "</b> RevU Friends!</div></div>";

document.write(html);

</script>

<style type="text/css">

.module_plugin .friends ul li{padding:0px;margin:0px;}

.revu{font-family:dotum;font-size:11px;width:196px;overflow:hidden; border-style:solid; border-width:1px; border-color:#99cccc; background-color:#ccffff;padding-top:10px;margin-top:20px;}

.logo{width:172px; height:50px; margin-left:4px; }

.revu .profileBox a, .revu .friends a{color:#5f5f61;text-decoration:none;cursor:pointer;}

.revu a:hover, a:active, a:link {text-decoration:none;}

.revu .friends a:hover, a:active, a:link {text-decoration:none;}

.profileBox{height:50px;margin-left:5px; padding:5 0 10 0px;overflow:hidden;}

.profileBox .profileImage{float:left;display:inline;border:solid 1px #99cccc;background-color:#ffffff;width:40px;height:40px;padding:1px;cursor:pointer;overflow:hidden;}

.profileImage img{width:40px; height:40px}

.profileBox .profile{display:block; font-size:12px;height:30px; padding:1px; margin-top:5px; margin-bottom:5px;margin-left:50px; width:140px; overflow:hidden;}

.profileBox .profile span{}

.friends {background-color:white;border-color:#99cccc;position:relative; width:94%; margin-left:5px; overflow:auto; padding:0 0 10 0px;border-style:solid; border-width:1px;}

.friends ul {margin:0; padding:0;list-style-type:none;}

.friends li {background:none; padding: 0 0 0 1px;margin:0 0 0 1px;

position:relative; height:20px; width:130px; text-align:left; white-space:nowrap; overflow:hidden;}

.friends .friendName{display:inline-block; width:110px; overflow:hidden; font-size:11px;margin-top:5px; margin-left:15px; }

.friends .friendImage{float:left;position:relative; padding-left:5px;margin-left:0px;margin-top:5px; width:12px; height:12px; z-index:0;}

.bottom{float:right;margin-right:5px;color:#6699cc;}

</style>

</head>

<body></body></html>