seevaa의 잡다구리한 이야기

more..

이리저리 포샵으로 해보다가 엠포싱효과로 해봤는데, 의외로 이뻐서 테스트삼아 'Fading Line Gray' 스킨에 넣어 본 모습입니다.

방문 브라우저 비율

작년 11월 부터 웹로그분석 서비스인 다음 웹인사이드 통해 제 블로그에 접속한 브라우저 비율입니다. (방문자의 브라우저비율 로그가 없는 줄 알고 불평만 하고 있었는데, 바보같은 제가 보지 못한 것이군요~ ㅡㅡ;)

비록 개인블로그의 5개월정도의 통계이지만 정말 IE 비율이 높습니다. 한편으론 아직도 IE6 이하버전이 막강해서 짜증도 납니다. 나름대로 크로스브라우징이란것을 해보겠다고 신경썼는데, 그중에서도 IE6에 대한 단점을 여기저기 주워듣고는 아님 IE6 때문에 애를 먹어서 그런지 IE6을 무시하는 태도가 생겼습니다. 다시말하면 "(만약 IE6에서 레이아웃 깨지거나 이상하면) 그건 내탓이 아니라 후진 IE6 탓이고, 많은 사람들은 IE6이 후진지도 모르고 그냥 쓰는게 문제라구!!" 이런식으로 '나만 잘났거든!?'식의 건방진 맘을 은근히 품었나봅니다. ^^

발전이 가속될수록 정보격차(digital divde)는 커진다는 말은 어디선가 본 적이 있습니다. 맞는 말인 것 같아요, 저도 어느순간 이런 정보격차(digital divde)란걸 느끼게 되고 아는 사람과 모르는 사람의 벽(gap)이 생기는 것 같습니다. 그러기에 이런 갭은 앞선 이 쪽에서 발맞춰 갈 수 있는 또는 뒤돌아 손내어 줄 수 있는 배려가 필요하다고 생각합니다. 물론 그런 배려는 앞선 이의 몫도 중하지만 제도적으로나 개개인의 마인드로도 필요하겠지요. 제가 앞선 이는 아니지만 분명 저보다 뒤에 걸어오는 이들이 있는 것이고, 위와 통계를 보니 앞서 저의 태도에 부끄러워집니다. (여기가 소소한 일개 블로그지만) 브라우저의 좋고 나쁨을 떠나 많은 방문자가 사용하기에 그것에 그만큼 배려해야한다는 생각을 해봅니다. 나아가 꼭 다수가 사용하기때문이 아니라 '제가 모르고 있는 가외성들은 무엇이 있나?' 라는 잠깐의 생각을 가져봅니다.

만약 여러분의 블로그 통계에 위나 아래와같은 그래프를 본다면 어떤가요? 혹시, "내 모니터(1920*1200)는 커서 나한테 맞췄어~ 나만 잘보이면 장땡이지~" 이런 생각을 가지신건 아니죠? ^^

아래는 '방문 운영체제 비율', '모니터 해상도 비율'

방문 운영체제 비율

방문 모니터 해상도 비율

20080319, 행복한 오후 보내세요~ ^^//
센님께서 준 타블렛으로 연습삼아...

보통 자기(당 블로그)만의 개성이나 아이덴티티(정체성)을 부각시키기위한 것이 도메인이나 일관된 주제의 포스트, 또는 스킨, 위젯 등 여러가지 있겠지만, 게중에서도 블로그 첫머리에 오는 '블로그타이틀'만한게 없는 것 같습니다. 그래서 블로그타이틀을 일반적인 텍스트로 표현하기보다 이미지로 많이 사용하는 것 같은데, 블로그 타이틀을 텍스트에서 이미지로 바꿀때 팁을 소개해 볼까 합니다.

웹 문서에 있어 H1, H2, H3... 태그를 사용하면 보다 효과적인 문서구조화를 할 수 있고, 즉 나아가 검색노출의 이점(우위)을 취할 수 있다는 것 아시죠? 보통 TT, TC, Tistory 블로그에서 이 블로그타이틀부분이 H1태그에 해당되는데, 이를 텍스트에서 이미지로 바꿔버리면, 그만큼의 효과는 떨어지게 마련입니다.

방법은 (친절한 금자씨인냥) 이미지와 텍스트 두가지 다 H1 태그안에 넣어두는 것입니다. 대신 텍스트부분은 css를 사용해서 보이지 않게 하는 것이지요. *제 블로그도 보시면 'seevaa,'요렇게 보이지만 요건 이미지구요, 실제로 <h1> 안에는 'seevaa의 잡다구리한 이야기'요렇게 되어 있고, 검색에도 그렇게 나온답니다.

보통의 예
skin.html 의 블로그 타이틀 부분(H1 태그 안)을 아래와 같이 이미지와 텍스트를 모두 넣고, 대신에 텍스트부분은 span 으로 감싸줍니다. *치환자[] 대신에 ()로 표시

<h1><a href="(##_blog_link_##)" title="(##_title_##)"><img src="http://~~/이미지.jpg" width="200px" height="100px" alt="블로그 타이틀 이미지" /><span>(##_title_##)</span></a></h1>

그리고 style.css에 아래와 같이 텍스트 부분만 보이지 않게 합니다. *보통 header에 위치하기에

#header h1 a span { display:none;}

어때요, 간단하죠? 쉽게 보셨다면 '블로그타이틀'을 그냥 이미지로만 하지 마시고, 텍스트와 같이 넣어주세요~

저의 적용 예 *블로그 타이틀이 텍스트 같지만 이미지입니다.
skin.html *저는 이미지도 css로 돌렸습니다. style.css를 불러올 수 없을 경우 이미지말고 텍스트만 나오게끔~ *치환자[] 대신에 ()로 표시

<h1><a href="(##_blog_link_##)" title="(##_title_##)"><span>(##_title_##)</span></a></h1>

style.css

#header h1 a { display:block; width:250px; height:78px; background:url("images/title-seevaa.gif") left top no-repeat;}
#header h1 a:hover	{ background:url("images/title-seevaa-on.gif") left top no-repeat;}
#header h1 a span { display:none;}

앗, 일모리님께서 알려주신 방법을 더해보면
span으로 감싸줄 필요없이 텍스트부분은 text-indent(문단첫머리들여쓰기) 태그를 사용해서 보이는 페이지 밖으로 보내버리고, a 태그에 배경으로 이미지를 넣는 방법입니다.
skin.html *치환자[] 대신에 ()로 표시

<h1><a href="(##_blog_link_##)" title="(##_title_##)">(##_title_##)</a></h1>

style.css

#header h1 { text-indent: -999em;} 
#header h1 a { display:block; width:250px; height:78px; background:url("images/title-seevaa.gif") left top no-repeat;}
#header h1 a:hover	{ background:url("images/title-seevaa-on.gif") left top no-repeat;}
#header h1 a:active, 
#header h1 a:focus{ outline:none;}

한동안 행복한 포스트만 올리다, 조금 씁쓸한 이야깁니다. ^^

테터툴즈 스킨 게시판이 Textcube 스킨 사이트로 옮겼습니다. 얼마전에 올린 'Easy Black'이란 스킨도 Textcube 관리자(?)분께서 옮겨 놓았더군요. 오늘 Textcube 스킨 사이트에 들렀다, 아래와 같은 댓글이 달린 걸 보고 안해도 되는 변명을 해보려구요.

띄어쓰기를 안해서 그런지, 무슨 말인지 몰라 잠시 몇번을 반복해서 읽었네요~ 해서, '그리드포커스테마'에 대해 검색까지 해보았습니다만 마땅한 검색값을 못찾고, 'grid focus theme'라 검색하니 단번에 무슨 말인지 알겠더라요.

필통님께서 말씀하신 '그리드포커스'(WP테마)는 이것(http://5thirtyone.com/grid-focus) 같습니다. 보자마자 어디서 본 기억이 있습니다. 바로 블로그에 대한 유익한 정보를 제공하는 곳으로 유명한 블로거팁닷컴에서 본 적이 있습니다. (Zet님께서 운영하시는 블로거팁닷컴을 언급해서 죄송합니다만, '그리드포커스테마'란걸 몰랐지만 본 적은 있다는 것을 말씀드리기 위해...)

아래 :: WP 그리드포커스 테마(이미지 출처 :: http://5thirtyone.com/grid-focus)

http://preview.seevaa.net/ 와 비교하며 보시기 바랍니다.

보시다시피 메뉴바 부분과 사이드바라인까지 많이 비슷합니다. 헤더, 컨텐츠, 사이드바의 구조나 위치까지 닮았다고 할 수 있습니다. 그래서 필통님께서 위와 같은 댓글을 다신 것 같은데요?

발끈해서 이렇게 변명같은 글을 적는 것도 모양새 이상하고, 정말 진실을 말할 때 어떤식으로 말해야 믿어 줄지 모르겠습니다만, 베끼지 않았습니다. 이건 이렇게 밖에 말을 못하겠네요, 제가 봐도 닮았으니까요.

그래도 몇가지 보태자면,

제 스킨이나 'WP 그리드포커스테마'의 디자인은 꼭 이 둘 뿐 아니라 이세상 웹사이트에 널렸습니다. 제가 만든 스킨이 100% 순수 無에서 有를 창조한 것이 아니기에, 위와 같은 디자인은 무심코 지나친 여러 사이트에서 경험적으로나 무의식적으로 제 머리에 들어왔을 겁니다. 그런 조각을 이렇게 저렇게 모아 만든 것이 하필 '그리드포커스테마'와 비슷하다는 것이구요.

그리고 이런 디자인은 독특하다거나 도드라져 보이는, 즉 그것 특유의 개성이란게 약합니다. 그저 무난하다고 할까요? 일반인이 만들어도 얼마든지 나올 수 있는 디자인이라고 봅니다. 솔직히 별다른 이미지없는 심플함 속에서 '막대모양의 메뉴나 사이드바의 선' 이런건 베끼고 말고 할 것도 아니고, 그런걸 따지는 것도 우스는 것이라고 봅니다.

그나마 위와 같은 디자인의 가치라면 툴구조에 맞게 얼마나 효과적이고 깔끔하게 표현했는지(xhtml/css)라고 생각합니다. 제 스킨의 skin.html, style.css 를 보시면 아시겠지만, 저는 전문가가 아닙니다. 얕은 정보로 웹표준을 지켜보려는 애는 썼지만, 위 테마와 비교해서 구조/표현에 있어 많이 다르고, 제 스킨은 엉망진창이라고 할 수 있습니다.(결론은 엉망진창으로 끝나서 더 씁쓸~ ㅠㅠ)

필통님과 같은 생각은 충분히 있을 수 있는데, 2줄의 댓글에 도둑놈이 된 것 같아 잠시 씁쓸하고, 언짢았습니다. 암튼 제가 아니면 그만인 것을, 얼굴없는 댓글이 상처(의욕을 꺽어버리는)가 될 수 있다는 걸 처음으로 경험하네요~

오늘 뜻밖에 택배가 왔습니다. 라면박스만한 것이, 센님이 보내셨더라구요~
요앞에도 포스팅했지만 지금 명함 이벤트에서도 저는 추첨없이 당첨을 시켜주시는 특권을 주셨는데, 이런 뜻밖의 택배를 보내주신겁니다. (까칠맨님의 빤츄도 그렇고, 블로그를 하니 간만에 재화가 넘처나네요~ ^^;;)

두근두근... 에이 모르겠다... 일단은 마구 개봉합니다. ^^;;
꺄악(소녀버전으로다가...)  꺄악~~ 열어보니 이건 정말 감동을 넘어 졸도하겠습니다. 찬찬히 목록을 보자면,

more..

1. '나는 전설이다' 로고가 있는 가방과 모자(영화경품)
센님께서 작년부터 보주신다는 게 이거였구나... 생각했습니다. ^^;;

2. 미래파 굿바이 피지 5종 견본세트
피지대왕이란건 어떻게 아시고... ㅎㅎ 피지야 이렇게 센님이 도와주시는데 우리 굿바이 하자꾸나~ ^^;;

3. 와콤 타블렛 (CTE-440)
젤루 맘에 드는 타블렛!!! 센님께서 타블렛을 3개나 가지고 계시다고 새것은 아니지만 주신겁니다. 흐흐
예전에 'navisis 마우스 타블렛'이란걸 구입했다가 반품한 뒤로 타블렛에 대한 미련을 접었는데, 제맘을 꿰뚫어보시는 것 같아요? 수전증에 저주받은 손이라 타블렛 적응하기 어렵긴 한데, 고맙게 잘 쓰겠습니다. ^^;;

4. 고양이 인형
요건 센님이 삼청동에서 사신거라고... 개봉하자마자 이녀석먼저 모니터위에 올려놨습니다. ^^;;

5. 후드가디건 / 고양이 인형 세로샷
기온이 오르는 봄날 입으면 아주 이쁠꺼 같은 후드가디건입니다.
흠... 이건 영화경품인지? 구입하신건지 조금 애매하지만;; 또, 사이즈가 100이라 저한테 조금 커요~ 센님 입으려던 건 아닌지?? 헤헤
암튼, 고맙게 받는 입장이라 닥치고 입겠습니다. ^^;;

6. 편지 & 카드영수증
'설명서를 첨부하지 않으면 부탐을 느낄 것 같은 생각에~'라시며 고이(?) 적은 '선물설명서(편지)'도 넣어주셨어요~ 얼마나 고맙고 감사한지 모르겠더라고요... 솔직히 뜻밖에 선물이 어찌나 부담되는지 첨으로 느껴보았습니다. 이렇게 많이 주신거 고맙게 잘 쓰겠습니다. ㅎㅎ
참, 엉뚱한(가마고을이란 식당에서 밥먹은) 카드영수증도 함께 보내주셨더라고요...ㅎㅎ
이건 뭘까? 한참 고민했습니다. ㅎㅎ

센님, 어제 생일이셨는데 선물하나 못드린 저에게 외려 이렇게 푸짐한 선물을 주시니 어찌해야할지 모르겠어요~ 센님 표현을 빌자면 '집이 쓰레기장이 되어서 정리를...'한거라는데, 저도 조만간 봄맞이 집 정리 좀 하려구요~ (ex. 지금보니 배달피자에 딸려오는 콜라(펩시 1.5L)가 6병이나 있네요?? ㅎㅎ)
암튼, 이왕 이렇게 주신거 그냥 기분좋게 받아요~ ^-^//

센님, 너무너무 고맙습니다.

어쩌다 보니 이제서야 올립니다.(택배가 다른곳으로 가는 바람에 이제야 찾아왔습니다.)
까칠맨의 버럭질! 블로그 30만 힛트 기념 이벤트에 참여했는데 당첨되었거든요. 늦게나마 까칠맨님께 고마움을 전하며 빤츄 찍어봤습니다.

까칠맨님께서 디자인은 랜덤으로 간다고 하셨는데, 저에게는 트렁크(이름이 Cat's Rain 이라는...)가 왔네요~ 살포시 입어보니 일반 사각팬티(트렁크)보다 밑위가 짧고 다소 타이트한 것 같아요. ^^  다시 생각해보니 칼라풀한게 이쁘장해서 여자(센님)도 입을 수 있을 것 같아요~ 헤헤 특이한 건 주머니도 있어요, 작아서 손은 안들어가지만요~

암튼, 까칠맨님 완전 감사드립니다. 잘 입을께요~

보너스, 센님을 위한 인증샷..

센님, 과도한 호기심은 건강에 해로워요~(약속 지킨겁니다~ ^^;;)

센님께서 그동안 신기에 가까운 당첨빨로 인해 이웃들로부터 축하를 가장한 시기, 질투를 많이 받으셨나 봅니다. ㅎㅎ 드디어(이제서야?) 첫 이벤트를 한답니다. 디자인밴드 첫 이벤트(원한다면 만들어주마 이벤트), 제목이 다소 공격적이죠? ^^;;

이벤트 내용은 센님의 센스가 묻어나는 이쁜명함(아마도 블로그명함이 되겠죠?)을 만들어 주신답니다. 신청기간은 3/06 ~ 10일까지니까 위 링크로 가서 자세히 읽어보시고 신청해보시기 바랍니다.

암튼, 저는 그동안 센님과의 우정(?)때문인지 추첨없이 당첨을 시켜주신댑니다.
센님, 정말 쌩유~ 쌩유~ ^ㅁ^//

(감사는 여기까지하고) 해서, 간단한 제 블로그 명함 컨셉을 잡아봤습니다.
일단은 사이즈 문제인데, 방금 살짝이 검색을 해보니 300dpi(인쇄용)에 일반지: 88 x 54mm, 수입지: 92 x 52mm 더라구욤. 실제크기는 나중에 여쭤보고 비슷한 비율로 해서 대충의 디자인을 잡아봤습니다.

앞

뒤

어떤가요?(센님은 자동으로 대답을 해주삼~) 조금 없어보이기도... ^^;;

급하게 만들어 보느라 별 디자인랄 것도 없지만, 언제나 외치는 그것, "심플"입니다. 크게 의미가 있는 건 아니고 그냥 별(*)푠데 꽃무늬 같기도 하고 이뻐서 넣었습니다. 색깔은 제 블로그색이랑 맞춰서 빨강이랑 회색톤으로...

곤 사토시 감독의 '파프리카'라는 애니 중에서, (대충 상대방의 꿈속에 들어가서 심리치료를 하는 내용입니다. 그 꿈 탐정/치료사 이름이 파프리카이죠.) 파프리카가 상대방(아저씨)에게 명함을 한장 건네는 장면이 있습니다. 그 명함엔 'radioclub.jp' 이라고 적혀있고 다른 면엔 'paprika' 라고 적혀있습니다. 뭔가 간단하면서도 궁금증을 자아내는 명함이죠? 저도 비슷한 컨셉입니다. 그냥 블로그 주소만 딸랑~ 센님께 좀더 어쭤봐야겠지만 블로그명함이니 일반 비지니스명함처럼 이름, 직업, 전화번소, 주소, e-mail 다 넣고싶지 않아요. 참고로 전 아직 명함이 없거든요, 제 생각이 조금 무린가요? ^^;;

암튼, 오늘은 센님덕에 즐거운 저녁이었습니다. 고맙습니다. 센님~ (지큼 트랙백 걸로 갑니다.)
마지막으로 기쁜맘에 발행을 누르려니... '근뒈, 나 이거 쓸데가 있을까?'라는 생각이... ㅠㅠ;;

추가, IE8 베타버젼이 공개되었다 하여 깔고보니, 제 블로그도 문제가 많아요.. 이걸 다시 또... ㅠㅠ;;
일단은 임시방편으로 일모리님 블로그에서 본 방법(버전타게팅)으로 때워놔야겠습니다.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

얼마전에 공개한 'Easy Black(TT 게시판에 올린 글, 티스토리 포럼에 올린 글)'스킨이 티스토리 2월 베스트스킨 뽑혔습니다. ^-^;;

티스토리 공지 :: 2월 스킨/플러그인 공모전 당첨자 안내 중에서...

...두구둥~ 2008년의 2월의 공모전 당첨자를 발표합니다! 블로거 여러분들의 톡톡 튀고 재미있는 스킨 제작에 직접 참여하고, 공유해주신 덕분에 풍성하고 다양한 티스토리 서비스가 있다고 생각합니다. 앞으로도 스킨 제작자 여러분들의 적극적인 참여와 활동 부탁드립니다!

이번달은 아쉽게도 많은 분들이 참여해주지 못한 관계로 늘 새롭고 멋진 스킨을 만들어 주신 seevaa님과 그리고 무려 2개의 스킨을 공유해주신 celli님 두 분 모두에게 감사의 마음을 전합니다. 앞으로도 더욱 즐겁고 다양한 티스토리를 위하여 여러분의 많은 참여를 부탁드립니다!...

부족한 점이 많은데 이렇게 베스트로 뽑아 주셔서 진짜로 감사드립니다. 헤헤
솔직히 이번달에 자작 스킨 참여가 저조한 가운데 베스트로 뽑혀서 부끄럽기도 합니다. 앞으론 이번달 같지 않게 많은 센스쟁이분들께서 아름답고 미려한 스킨을 제작하시여 더욱 활발하게 참여하고  공유할 수 있었음 하는 바람입니다.

...조만간 스킨 제작자들을 위한 티스토리 스킨 제작자 오픈을 앞두고 있사오며, 또한 스킨위자드에 대한 가이드도 소개할 예정이오니...

제 방명록에 Tistory 님께서 위와 같은 글을 남겨주셨는데,
솔직히 티스토리 포럼에 있는 스킨게시판, 조금 불편하다고 느꼈습니다. TT 스킨게시판 처럼 썸네일형이 아닐뿐 아니라 스킨 외의 글들도 많이 올라와 한눈에 보기가 불편합니다. 게다가 검색기능 같은거도 찾아 볼 수 없으니까요. 해서 티스토리 스킨게시판의 참여/활성화가 조금 저조하지 않았나? 하는 생각도 가집니다.

조만간 스킨 제작자들을 위한 티스토리 스킨 제작자 오픈을 앞두고 있고, 또한 스킨위자드에 대한 가이드도 소개할 예정이라니, 스킨에 관심이 많은 저로선 궁금하고 기대됩니다.
뭣보다 티스토리 유저분들이 스킨제작이나 공유를 보다 편하고 쉬이 하게 된다는 점이고, 그만큼 좋은 스킨도 많이 나올 것이란 점이... ^-^;;

마지막으로 부족하지만 제스킨을 적용해서 쓰시는 분들과 티스토리에 다시 한번 감사드립니다.