공식적으로, 비공식적으로 웹 2.0의 시대가 되면서 사람들은 정보를 공유하고 서로 소통하는 새로운 방법들을 발견하게 되었다. 요즘 한창 각광을 받고 있는 트위터나 페이스북 같은 소셜 네트워크 서비스SNS들과 이전부터 미디어의 와 소통의 장 역할을 하며 꾸준히 발전해 온 블로그는 상호 공존하며 무궁무진한 웹의 영역을 넓혀가는 존재들이다.
Social Network Service

오늘날 소셜 네트워크 서비스SNS의 가짓수는 쉽게 헤아리기 힘들 정도다. http://bit.ly/92ZX4X


나는 일찍이 SNS에 깊은 관심을 갖고 이것저것 직접 써보며 레고 같은 장난감을 가지고 노는 아이처럼 만지작만지작 하는 것이 취미였다. 미투데이나 트위터 등 짧은 글을 포스팅하는 마이크로블로그Microblog를 먼저 시작한 이후 올 여름부터 블로그를 쓰게 되었다. 글쓰기 실력이 형편 없었던지라 '적어도 싸이월드에 있는 내 일촌들은 내 글을 읽어주겠지' 하는 마음에서 싸이월드블로그를 먼저 열었다. 운 좋게 블로그 운영 초기에 네이트메인에 글이 노출되는 영광을 얻기도 했지만 확장기능을 설치하는 데에 블로그보다는 미니홈피에 가까운 싸이월드는 여러가지 제약이 많았고, 결국 그동안 썼던 대부분의 글을 티스토리로 옮겨오게 되었다.

AddThisExamples

블로그/웹사이트용 SNS 공유 & 북마크 버튼들

한 달 정도 다시 티스토리 블로그에 글을 쓰면서 깨달은 사실은 아직 내 블로그에 그럴 듯한 구독버튼 하나 없다는 것이었다. 물론 좋은 내용의 글을 잘 쓰는 것이 중요하다는 것이 나의 철학이고 이를 위해서 보잘것 없는 나의 필력을 향상시키기 위해 매일 노력하고 있다. 그러나 나의 상황은 마치 갓 시작한 트위터 사용자가 0명의 팔로워를 가지고 열심히 혼잣말을 하는 것과 비슷했다. 아무리 정성스럽게 쓴 글일지라도 사람들에게 읽혀지지 않고 오가는 소통이 없다면 블로그를 통해 내가 얻고자 했던 깨달음의 절반밖에 얻을 수 없는 반쪽짜리 소통을 하고 있다는 생각이 들었다.

메타블로그에 글을 게시하는 것 이외에 여러가지 방법으로 내 블로그의 글을 공유 할 방법을 찾던 중 애드디스AddThis라는 서비스를 발견하게 되었다. 여러가지 SNS로 공유와 북마크를 가능하게 해주는 툴로 HTML과 CSS코드를 조금만 알면 쉽게 설치할 수 있는 장점이 있다.

어떠한 서비스를 많이 이용하는지 통계자료를 통해 확인할 수 있다. http://bit.ly/2ThH2k


애드디스 홈페이지에서 제공하는 몇가지의 간단한 단계만 거치면 블로그에 쓸 수 있는 SNS 공유와 북마크 버튼 코드를 만들 수 있다. 블로그 게시물 상단이나 하단에 버튼을 설치 할 경우, 게시물을 해당 SNS서비스나 북마크 툴로 친구과 함께 공유할 수 있다. 한국 서비스는 잘 보이지 않지만 현존하는 대부분의 SNS를 지원한다. 또한 애드 디스의 베타 기능 중의 하나인 팔로우 메뉴를 이용하면 자신의 트위터나 페이스북, RSS 등으로 쉽게 구독버튼을 만들 수 있다. 각각의 게시물을 공유하는 것이 아닌 소셜네트워크의 프로필 페이지로 직접 이동하는 기능을 제공한다는 점에서 공유 버튼 코드와 다르다.

Yunho Jang's blog에 사용된 AddThis 툴 활용 예

1. 포스트 상단


HTML

<div class="addthis_toolbox addthis_default_style" id="addthis">
    <a class="addthis_button_tweet" tw:count="horizontal"></a>
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_email"> 이메일</a>
    <a class="addthis_separator"> | </a>
    <a class="addthis_button_print"> 인쇄</a>
</div>

버튼이나 툴의 형식은 애드디스가 정의해 놨기 때문에 각각의 버튼은 <a class="addthis_button_(툴제목)" (서식)">(설명)</a> 형식으로 지정해주면 됩니다. 예를들어 게시물을 트위터로 공유할 수 있는 버튼을 만들 때 리트윗의 횟수가 버튼 위에vertical 나오게 하고 싶으면 <a class="addthis_button_tweet" tw:count="vertical"></a> 라고 코드를 써주면 됩니다.

CSS

#addthis {float:right;margin-top:15px;margin-bottom:-20px;}
#addthis a.addthis_button_tweet {margin-top:-2px;margin-right:-17px;}
#addthis a.addthis_button_facebook_like {margin-right:-5px;}

각각의 버튼을 보기 조금 더 좋게 바꾸기 위해 위치를 조금 수정해 봤습니다. 그러나 개인화를 하지 않는 대부분의 경우에는 애드디스가 제공하는 코드를 변경없이 사용해도 예쁘게 나옵니다.

2. 사이드 바


HTML

<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_twitter_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_facebook_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_linkedin_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_googlebuzz_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_delicious"></a>
    <a class="addthis_button_favorites"></a>
    <a class="addthis_button_google"></a>
    <a class="addthis_button_rss_follow" addthis:url="여기 RSS주소를 적으세요"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=여기 애드디스 아이디를 적으세요"></script>

포스트 상단의 예와 다르게 32x32의 버튼이 쓰였기 때문에 div class의 이름이 다릅니다. 버튼의 이미지를 따로 업로드하고 각각의 포스팅 링크를 입력할 필요 없이 제공하는 class의 이름만 제대로 써주면 알아서 다 해주므로 편합니다. 공유버튼이 아니라 프로필 페이지로 직접 들어가는 경우에는 뒤에 _follow 가 붙네요. User ID나 Username을 적는 곳에는 여러분의 SNS 아이디를 적어주시면 됩니다.

페이지가 영문으로 되어있기 때문에 기본적으로 제공하는 포맷 이외에 개인화 된 버튼들을 이용하기 다소 까다로울 수도 있다. HTML이나 CSS를 잘 하는 수준은 아니지만 만일 이해가 안된다면 위의 직접 블로그에 적용한 예를 참고한 후 비교해가면서 보면 쉽게 이해할 수 있다.
Created by Yunho Jang
blog comments powered by Disqus
블로그나 뉴스 기사를 읽다보면 각각의 웹사이트에 포함된 많은 양의 광고나, 우리의 주의를 분산시키는 여러가지 자극적인 요소들로 의해 글을 읽는 일 자체가 피곤해 질 때가 있다. 이런 이유로 나는 아크90랩(Arc90 Lab)의 Readability라는 툴을 쓴다. 글의 본문의 소스만 추출해서 사용자가 미리 설정한 글꼴, 글자색, 글씨크기, 여백, 배경색상 등을 적용해 읽기 쉽게 만들어준다.



위: Readability 사용법 동영상, 아래: 내가 사용하고 있는 Feedly 스크린샷


현재 나는 Readability를 써서 직접 뉴스나 블로그 글을 읽거나, 내가 구독하는 블로그의 글을 Feedly라는 서비스를 통해 읽는다. 이와 같은 툴로 평소에 블로그 글을 즐겨 읽던 나는 급기야 내가 원하는 내용을 쓰고, 연습하기 위해 직접 블로그를 운영하기에 이르렀다. 그러던 중 호기심에 내 블로그에 직접 Readability를 적용해봤는데 잘 작동하지 않았다.



나는 HTML이나 CSS의 기본적인 부분만 알고 있기 때문에 호환이 안되는 이유를 자세히 설명할 수가 없다. 그러나 평균적으로 내가 웹을 통해 글을 읽는 소스들 중 유난히 Readability 호환성 문제가 일어나는 곳은 몇몇 국내 신문사 뉴스 사이트나 싸이월드 블로그와 같은 국내 포탈 소속 서비스인 것 정도는 개인적 경험을 통해 알 수 있다 (네이버 블로그는 최근에 다시 시도해 본 결과 잘 호환된다).


블로그 독자들의 상당수는 자신이 읽고 싶은 소스를 구독해서 읽거나 나와 같이 Readability같은 서비스를 사용해 글을 읽는다. 싸이월드 블로그 서비스가 국내 다른 가입형 블로그 서비스들에 비해 비교적 후발주자인 편이고 사용자 수가 많지 않음에도 불구하고 앞으로 서비스가 잘 번창해 나가기 위해서는 보다 많은 사람들이 싸이월드 블로그를 쉽게 읽을 수 있도록 적절한 기술적 조치를 취해야 할 것이다.


Arc90 Lab Readability 공식사이트

Readability Redux 구글 크롬 확장기능

Readability 파이어폭스 확장기능

Feedly 공식사이트


Created by Yunho Jang
blog comments powered by Disqus
이전버튼 1 이전버튼