해외 블로그들의 추천버튼,소셜아이콘은 어떻게 생겼을까?

Posted on 2009.02.02 23:13 | under 블로그 | permalink :: http://krang.tistory.com/375

약 2주전에 메타사이트 추천버튼을 만들어 공개해 본 적이 있는데요.

2009/01/17 - [Blog, blogging] - 아이폰 스타일 메타사이트 추천버튼 공개합니다.

솔직히, 돌아다니다가 이 버튼 달아놓으신 분들을 보게 되면 어찌나 반가운지! ㅎㅎ 하지만 제작하면서 느낀 가장 중요한 문제는 국내메타사이트 추천버튼의 규격 통일과 각 사이트를 대표하는 상징물(엠블럼)의 부재가 아닌가 싶습니다. 추천버튼이 통일된다면 그것만큼 좋은 것도 없을테고 각 메타사이트 마다 대표하는 상징물만 있더라도 디자이너건 일반블로거든 그것을 이용해 누구나 쉽고 개성있게 버튼을 만들어 배포할 수 있기 때문이죠.

그래서 그동안 해외블로그는 어떤 사정인지 주목해 오면서 괜찮은 버튼 몇가지를 스크랩해 두었는데 오늘 공개해 보려고 합니다. 여러분의 마음에 드는 스타일은 어떤 것인지 추천버튼에 대한 생각은 어떠신지 혹은 더 멋진 스타일의 버튼을 보셨다면 트랙백이나 댓글로 남겨주시면 재밌을(?) 것 같습니다. ^_^


1. 막대바 + 파비콘형

 

▲ 이미지 합성, 편집 서비스를 제공하는 Dumpr.net스케치효과 코너의 플래쉬 버튼들입니다. 

본문이 아닌 사이드바에 위치하고 있고 자그마치 21개의 소셜아이콘이 함께 있는데도 작고 깔끔해서 전혀 복잡해보이지 않죠. 하나의 막대당 90 x 20 px 의 크기의 모서리가 둥근 스타일이고 각 사이트를 상징하는 파비콘 모양의 이미지와 텍스트가 들어있습니다.


2. 아이폰 버튼형

 

▲ 블로깅 관련 정보와 디자인 리소스를 제공하는 Binary Turf (http://www.binaryturf.com) 입니다. 

지금 제 블로그와 같이 포스트 본문하단에 중앙정렬로 위치해서 안정감이 있고 보시다시피 각 메타사이트를 상징하는 엠블럼이 있기 때문에 (좌측부터, Stumble upon, Rss, Technorati, Digg.com, Delicious) 이용자들이 쉽게 알아볼 수 있구요. 각 버튼의 크기는 48 x 48픽셀. 버튼 하단의 구글광고의 테두리와 배경색도 눈에 띄네요.

3. 네모버튼형 

 

▲ CSS와 웹디자인관련 정보를 제공하는 CSS Rricks (http://css-tricks.com/) 입니다.

마찬가지로 포스트하단과 댓글 사이에 있고 네모 반듯한 아이콘들이 일렬로 정렬해 있어서 깔끔합니다. 젤 우측에 이메일 아이콘까지 같은 모양이어서 통일감도 있구요. 43 x 43 픽셀의 크기이고 마우스를 아이콘 위에 올리면 뚜렷해집니다.

 

▲ Design Shard (http://www.designshard.com/) 인데 위와 같은 네모아이콘에 배경만 검은색입니다. 어두운 바탕에서도 깔끔하네요. ♥ Bookmark & Save Post 라는 문구가 아이콘들을 강조하고 있습니다.


4. 대형 네모아이콘형

 

▲ 디자인 관련 Think Design Blog (http://thinkdesignblog.com/) 입니다.

보통의 아이콘보다 훨씬 큰 75 x 75 픽셀이 압도하는 크기 때문에 눈에 확! 띕니다. 추천 안할수가 없겠네요 :)


5. 메뉴바(menu-bar)형

 

▲ IT관련 뉴스를 주로 다루고 있는 TechRepublic 의 버튼입니다.

원래 이런 서비스가 제공이 되는 것인지 블로그 스킨에 포함되어 있는 것인지 모르겠지만 메뉴바형에다가 추천버튼 모음을 넣는 것도 깔끔해 보입니다. 나중에 국내에서도 이런 유형으로 만들어 배포하시는 분도 있으면 좋겠네요.




6. 구분선형

 

▲ 세계 곳곳의 놀랍고 재밌는 이야기들을 소개하는 Neatorama (http://www.neatorama.com/) 입니다.

HTML 문서에서 상하위 단락을 구분하는 이미지나 선을 보통 'HR라인'이라고 하는데 이러한 구분선의 역할을 하면서도 좌우에 이전, 다음페이지 버튼을 넣어서 자연스럽게 전체적인 조화를 이루는 디자인이네요. 위 아래에 광고를 배치해 공간을 활용한 것도 주목할 만 합니다. 다른 것과 다르게 이 사이트의 캡쳐는 상하가 긴데 그 이유는 댓글란의 디자인 또한 맘에 훅~ 들기 때문이죠. +_+



7. 시선주목형

 

▲ 포토샵강좌, 각종무료자료등을 제공하는 Hongkiat.com (http://www.hongkiat.com/blog/) 입니다.

시선주목형은 주로 텍스트보다는 이미지나 비쥬얼 콘텐츠가 많은 디자인 관련 블로그에서 많이 보입니다. 콘텐츠 못지 않게 추천버튼 공간도 개성있고 큰 폰트나 예쁜 이미지로 이루어진 곳이 많습니다. 하지만 또 하나의 특징은 각각의 메타사이트 엠블럼은 텍스트나 작은 것으로 대체하는 경우가 많다는 것. 그만큼 전체적인 조화를 더 생각하는 것 같습니다.  

 

▲ 마찬가지로 포토샵, 디자인 관련 (http://www.tutorial9.net) 의 시선주목형 버튼모음입니다. 애교섞인 문구와 함께 스티커처럼 생긴 동그란 버튼들이 모여있네요.



마지막으로..

물론, 국내의 메타,소셜사이트들이 이런 추천시스템통일과 버튼제작에 신경쓸 시간과 여유가 부족한 것은 충분히 공감합니다. 하지만 웹 2.0이 이용자의 참여와 소통에 무게를 두는 만큼 웹2.0의 대표선수들인 메타사이트들은 이용자가 직접 제작하고 공유할 수 있도록 방향만 제시해 주면 될 것입니다. 즉, 무엇보다 그림만 척! 봐도 아! 하고 뭔지 알 수 있는 상징물만 있다면!!~


올블로그의 올블이 처럼 각 메타를 대표하는 상징물이 하나씩 있었으면 좋겠습니다.
이 얼마나 알아보기 쉽고 응용하기 쉽고 선따기(?) 쉽쉽니까!


블로그코리아의 상징물은 넘 추상적(엉켜있는 실같은) 이어서 저같은 저질 손으론 선따기조차 힘들어요. ㅠㅠ


믹시..아주 간단하면서도 명료하면서도 가슴팍에 팍 와닿는 파란 둥근 바탕에 하얀 영문 한글자!! -ㅅ-;;

다음블로거뉴스등 기타 메타사이트와 한RSS등등의 구독서비스~ 에도 같은 바람입니다.

덧) 더 괜찮거나 멋진 버튼이 있는 블로그!~ 혹은 아이디어가 있다면 알려주세...요...^^

덧2) 조만간 한차원 업그레이드된 아이퐁 스탈 메타추천버튼 2탄을 공개할 예정이니 많은 기대바랍니다. -_-;;


저작자 표시 비영리 변경 금지
신고

이전 댓글 더보기
BlogIcon 빛이드는창
2009.02.03 09:55 신고
2탄이 너무 기대되요~

BlogIcon Krang
2009.02.03 18:50 신고
저두요 +_+
BlogIcon 레이지폭스
2009.02.03 10:16 신고
언제나 블로거에게 피와살이 되는 정보 감사드려요. :)

BlogIcon Krang
2009.02.03 18:51 신고
뼈는 아껴두겠어요...
BlogIcon 레이지폭스
2009.02.04 14:48 신고
뼈채 주세요...
BlogIcon Krang
2009.02.04 23:25 신고
헉.. 저 말고 정육점에서 알아보세요 ㅠㅠ
BlogIcon MindEater™
2009.02.03 10:31 신고
맞아요..저두 붐바이후에 비슷한 이쁜 서비스 나오기를 기다리고 있어요. ^^;;
추천버튼이나 구독버튼..모두 제각각이라 꾸미기 조금 힘든게 사실입니다..;)

BlogIcon Krang
2009.02.03 18:52 신고
제2의 붐바가 또 나왔으면 좋겠네요. ^^
BlogIcon 꿈꾸는바다
2009.02.03 10:40 신고
krang님 잘 지내시죠?
와우~ 1탄에 이어 2탄 추천버튼이라니 멋지네요^^
기대됩니당ㅎㅎ

BlogIcon Krang
2009.02.03 18:54 신고
뭐 하루하루 조금씩 깨짝깨짝 대는 수준이라서요. ㅎㅎ
언제 완성할지는 모르겠지만 만들면 알려드릴께요. ^^
BlogIcon JUYONG PAPA
2009.02.03 12:04 신고
메뉴바형 좋은데요..

BlogIcon Krang
2009.02.03 19:00 신고
저도 특이해서 맘에 들었어요~~
BlogIcon 라디오키즈
2009.02.03 12:14 신고
-_- 통합 추천바(?) 같은거 누가 만들어줬음 좋겠어요~~
각 업체마다 방식이 다르니 저처럼 실력이 안되는 사람은 만들어 볼 엄두도 안나구 말이죠. 쩝~~

BlogIcon Krang
2009.02.03 18:58 신고
이용자들은 메타사이트 서로서로 머리짜고 통합안을 내놓았으면.. 하는 바람이 있지만 그게 쉬운일이 아닌가봐요. 올블이나 블코의 프레임방식과 믹시와 블로거뉴스의 직접추천이 시스템 자체가 다르다보니.. -_-;; 배너라도 통일된 걸 내놓아주었으면 더할나위 없을텐데.. ^^
BlogIcon Joa.
2009.02.03 13:05 신고
와! 좋은 정보에요.
전 개인적으로 막대바형이 젤 심플해서 끌려요 :)

BlogIcon Krang
2009.02.03 18:59 신고
막대바형은 꿈꾸는 바다님 블로그에
http://idreamsea.tistory.com/50
가시면 있어요. 시간날때 한번 둘러보세요 ^^
BlogIcon ginu
2009.02.03 18:39 신고
크랭님은 저를 네모버튼형으로 분류하셨습니다. ㅋ_ㅋ (36픽셀은 너무 작은가요;;;)

BlogIcon Krang
2009.02.03 19:04 신고
길쭉한 네모버튼형이구만요...ㅎ
이번에 아이콘을 35픽셀까지 만들어봤습니다.
그보다 작으니까 눈에 띄지도 않고 막 뭔지도 못알아보겠고 -_-;;
BlogIcon ginu
2009.02.03 20:18 신고
설치형 텍큐 블로그에 사이드바에 네모낳게 만들어 넣었거든요.
(믹시만 배너 크기로 넣어 비공식 알바임을 티내고 있음 ㅎㅎㅎ)
BlogIcon Krang
2009.02.03 22:39 신고
지누님 블로그가 두개였군요!~ (이제 알았습니다. -_-;;)
그래서 궁시렁이란 닉넴이 가끔 보였던 것이었어요..
그럼 제가 구독하는 블로그는 궁시렁님인지 지누님인지..
아 헷갈리구만요 ㅎㅎㅎ

닷) 티안내도 될만큼 이미 다 알려진 사실..(-_-;; 자포자기)
BlogIcon LieBe
2009.02.03 22:33 신고
그 어디에도 플래시는 음써따....OTL

BlogIcon Krang
2009.02.03 22:41 신고
맨위 막대바가 플래쉬입니다. ㅎ
Liebe님 블로그는 정말 갈때마다 신기합니다. +_+
BlogIcon fantastic902
2009.02.03 23:30 신고
버튼들도 눈에 띄지만 전 역시나 Binary Turf의 구글광고 테두리가 눈에 들어오는군요 +_+ 저렇게 효과를 줘도 애드센스 정책에 위배되지 않나보죠? 좋은 글 잘 읽고 갑니다~

BlogIcon Krang
2009.02.04 23:19 신고
클릭을 유도하는 문구나 이미지등만 아니라면 테두리 선정도 변경하여도 괜찮을 듯 싶습니다. 정확한 것은 아니니 혹시 적용하시려면 한번더 확인해보시구요. ^^
BlogIcon 파초
2009.02.04 14:02 신고
웹페이지를 기울이니깐 신문 분위기가 물씬 풍기네요 ㅋㅋ
나중에 2탄 나오면 업어갈게요~

BlogIcon Krang
2009.02.04 23:20 신고
2탄 아이콘들에게 열심히 수영(?)을 가르쳐두어야겠군요!~
BlogIcon thomas sabo anhänger
2010.07.22 11:44 신고
지누님 블로그가 두개였군요!~ (이제 알았습니다. -_-;;)
그래서 궁시렁이란 닉넴이 가끔 보였던 것이었어요..
그럼 제가 구독하는 블로그는 궁시렁님인지 지누님인지..
아 헷갈리구만요 ㅎㅎㅎ

BlogIcon louis vuitton
2010.07.22 11:44 신고
이용자들은 메타사이트 서로서로 머리짜고 통합안을 내놓았으면.. 하는 바람이 있지만 그게 쉬운일이 아닌가봐요. 올블이나 블코의 프레임방식과 믹시와 블로거뉴스의 직접추천이 시스템 자체가 다르다보니.. -_-;; 배너라도 통일된 걸 내놓아주었으면 더할나위 없을텐데.. ^^

BlogIcon louis vuitton watches
2010.07.22 11:45 신고
설치형 텍큐 블로그에 사이드바에 네모낳게 만들어 넣었거든요.
(믹시만 배너 크기로 넣어 비공식 알바임을 티내고 있음 ㅎㅎㅎ)

BlogIcon business cards maid in delaware
2012.02.10 12:37 신고
Nice being visiting your web site again, it has been months to me. Now this article that I have been previously waited for such a long time.

BlogIcon create and print business cards for free
2012.02.15 20:27 신고
Appreciate your making a real cool project. I have already been checking the internet site to the Windows version, nonetheless never mentioned regarding this. I do know that you are spending so much time and working at no cost so you shouldn't feel rushed or anything.

BlogIcon free business cards templates for word
2012.02.16 10:16 신고
Which i enjoy reading such posts that provide knowledge based information such as this blog. Thank you for sharing it with us.

BlogIcon Grant
2012.04.24 21:22 신고
수행하려고하는 건 종종 마을 문제입니다.

BlogIcon Evra
2012.06.26 02:12 신고
Hot damn, looking pretty usfuel buddy.

BlogIcon Vania
2012.06.28 17:11 신고
I came, I read this article, I conqreued.

체크시 주인만 볼 수 있습니다.

* 티스토리 단축키를 활용하세요. [A:다음글 S:이전글 Q:로그인]
« previous : [1] : [···] : [212] : [213] : [214] : [215] : [216] : [217] : [218] : [219] : [220] : [···] : [483] : next »