구글맵에서 인사하기

geogreeting.com에서  구글맵을 이용해서 인사를 나눌 수 있습니다. 전세계 곳곳에 위치한 건물들을 이용해서 영어 알파벳과 숫자 및 기호(A-Z 0-9 ,.@#*()-_+=/:!<>?)를 표기할 수 있답니다. 아무래도 한글은 2바이트 언어라서 찾아내기 어렵겠죠. -_-;

연상되는 수 많은 단어/문장 중에서 저는 이메일 주소를 GeoGreeting로 작성해봤습니다. 당신은 어떤 단어와 문장을 입력하게 될까요? :)

i@hooney.net

구글 페이지 랭크 7점 획득

hooney.net이 구글 페이지 랭크 “7″점을 획득했다. 그런 의미에서 기록을 남길 겸 자축 포스팅을 작성한다. 국내외 사이트의 구글 페이지 랭크를 차니님 글에서 확인할 수 있다.

hooney.net 구글 페이지 랭크 7 획득

페이지 랭크 7점 획득도 당황스럽지만, 137등이라는 순위는 황당할 뿐이다. playboy.com 보다 내 블로그의 순위가 더 높다니, 순위 계산 알고리즘을 신뢰하기 어렵다;;

또한 재밌는 점은 올해 초에 만든 KWAG.net 사이트가 6점을 획득한 사실이다. 이를 통해서 페이지 랭크 6점을 획득하는데 6개월 정도면 충분하다는 걸 확인할 수 있다.

그렇다면 4개월 뒤엔 10점 획득?! ^^;

Adsense 디자인 최적화

Web 2.0 MagazineCSS를 이용해서 adsense 디자인을 바꿀 수 있는 방법과 예제를 공개했습니다. 이제 adsense 최적화를 디자인적 관점에서도 논의할 수 있겠네요.

구글 약관은 adsense를 삽입할 때 사용하는 코드를 수정할 수 없도록 규정하고 있습니다. 그동안 구글에서 정해놓은 몇가지 패턴의 HTML 코드만 사용할 수 있었기에 HTML 디자인에 익숙한 웹 디자이너들은 창의력을 발휘하는데 어려움에 부딪치곤 했죠. 하지만 이제는 아니죠. 웹 디자인은 CSS로 할 수 있기 때문입니다.

아쉽게도 위 글에서는 javascript를 이용한 id나 class를 재정의하고 CSS를 이용하여 표현을 극대화하는 방법까지 다루진 않고 있습니다. 다음에 기회가 되면 제가 관련 글을 작성해봐야 겠네요.

최근에 API를 이용해서 다양한 콘텐츠를 새롭게 조합할 수 있는 방법이 개발자들의 호응을 얻고 있습니다. 잘 구성된 HTML과 id와 class를 공개해서 디자인 관점에서 매쉬업도 시도해볼만한 사항인데, 캠페인성 csszengarden을 제외하곤 찾아보기 힘드네요.

네이버 스타일의 다음 사이트 어떨까요? 포털 사이트에서 사용자 CSS를 업로드하고 사용할 수 있는 방법을 제공하는 것도 재밌겠습니다. 개인적으로는 주 RSS 구독기인 hanrss가 이런 기능을 빨리 제공해주셨으면 합니다. ㅎㅎ

변경된 구글 코리아의 첫 화면을 뜯어 보자.

구글 코리아의 첫 화면이 변경됐다. 기존에는 로고에만 1개의 이미지를 제공할 정도의 텍스트 기반 페이지였는데(현재 google.com처럼), 이번에 여러가지 아기자기한 아이콘이 추가됐다. 특히 검색 영역 아래쪽에 위치한 구글 서비스로 바로 갈 수 있는 링크들을 제공하는 점이 눈에 뛴다.

구글 한국

내 경우에는 구글을 검색 뿐만 아니라, GMail, Gtalk, Gcalendar, Gnote, Gdesktop, Ggroup 등 다양한 서비스 등을 이용하고 있기에 Google My Account를 시작 페이지로 구정해서 사용해오고 있었다. 하지만, 이번에 구글 코리아의 첫 화면이 변경됐기에, 시작 페이지 주소를 변경해야겠다.

추가된 바로가기 링크에 마우스를 오버할 때, 아이콘이 변경되는 것을 확인할 수 있다. 플래시를 이용하면 쉽고 빠르게 표현할 수 있는 기법이지만, CSS와 JavaScript만으로 플래시 못지 않게 부드럽게 표현한 점이 놀랍다. 플래시가 설치되지 않은 브라우저, 또는 플래시를 사용할 수 없는 텍스트 브라우저에서도 해당 텍스트와 링크를 이용할 수 있도록 배려한 점이 맘에 든다.

구글 코리아의 서비스 바로가기 아이콘에 사용된 이미지 1개

구글 코리아에서 부가 서비스 바로가기 아이콘에 사용된 이미지

1개의 배경이미지만으로 마우스가 오버될 때, Javascript로 CSS의 위치지정(position)을 바꿔주는 방법을 사용하여 부드러운 온오프 효과를 보여주고 있다. 정지된 GIF 이미지와 CSS + Javascript로도 플래시의 모션 그래픽 못지 않게 부드러운 효과를 나타낼 수 있는 것을 보여준 좋은 사례로 꼽을 수 있다. 다만, 키보드로 이동할 때를 고려하지 않은 점이 아쉽다. ㅎㅎ

이번 구글 코리아의 첫 화면 개편은 국내 웹 디자이너에게 많은 자기개발과 고민을 할 수 있는 동기를 부여했다. 시각 장애인과 같은 사람은 물론이고, 검색엔진과 같은 기계에게도 접근성 높은 사이트를 디자인하는 것이 결코 1990년대식의 초라한 웹 디자인으로 돌아가지 않아도 된다는 것을 보여줬기 때문이다.

CSS와 Javascript를 이용한 다양한 네비게이션 효과 몇개

꼬릿말1) 많은 사람들이 구글 코리아 첫 화면에 많은 이미지를 사용했다고 하는데, 시각적으로만 그럴뿐이며 실제는 3개만 사용됐다. “구글 로고, 검색 아이콘 세트, 서비스 아이콘 세트” 이렇게 3개의 이미지를 CSS의 배경 위치 변경 기법을 이용하여 여러개 처럼 보이게 한 것이다.

꼬릿말2) 사용자들은 방문한 웹 사이트가 어떻게 만들어졌는지 전혀 고민하지 않는다. 하지만 웹 개발자와 디자이너는 수많은 고민과 노력을 통해서 보다 나은 웹 사이트를 만들어가고 있다. 로딩 속도를 0.00001초라도 빠르게 하기 위해서, 시각 장애인도 접근하고 이용할 수 있도록 하기 위해서, 최고의 웹 사이트를 만들기 위해서 노력하는 그들이 진정한 챔피언이다.

국내 포털에 사이트 등록

현석님의 블로그에서 네이버 사이트 등록에 관한 글을 읽고, 국내 유명 포털 사이트에 등록을 신청한 게 약 2달 전이다.

당시 열린검색 서비스를 시작하던 엠파스의 경우에는 사이트 등록을 신청한지 1주만에 등록완료 메일을 받아볼 수 있었다. 하지만 다른 포털 사이트에서는 아무런 답변 메일을 받을 수 없었기에, back 당한 줄만 알았다.

그러다 지난 7월 말에 네이버에게 등록완료 메일을 받게 됐다. 다른 포털 사이트들도 검색해보니 대부분 등록되어 있었다.

앗싸. 조쿠나~

이번 달(8월) 리퍼러를 확인해보니 지금까지 리퍼러 1위를 고수하던 구글을 제치고, 네이버가 압도적 1위를 차지했다. 네이버의 경우 대부분 CSS 디렉토리웹표준 검색어로 방문하고 있다.

아직까지 네이버 CSS 디렉토리에 등록된 사이트가 7곳일 뿐더러, 국내(한글) 사이트는 Hooney.net 1곳 밖에 없기에 방문객이 집중된 듯 싶다. 또한 최근 CSS에 대한 관심이 늘어난 탓도 있을 것이다.

CSS에 관한 내용을 찾기 위해 방문한 분들을 위해서 조만간 소폭의 개편을 해야할 듯 싶다. ^^;

많은 블로거들이 네이버에 대해 불만을 갖고 있는 것은, 한편으로 국내 웹에서 네이버의 영향력을 무시할 수 없는 반증이라고 생각한다. 국내 포털/검색 사이트의 CSS 디렉토리에 많은 국내 사이트들이 등록되면 좋겠다.

구글 페이지랭크 5/10 획득

2주 전이었던 것 같다. 파이어폭스용 공식 구글 툴바가 나왔다는 소식을 듣고는 바로 설치했다. 이것저것 옵션을 확인하던 중, 페이지랭크(PageRank)라는 것이 있기에 무심결에 체크했다.

몇일 전, 내 사이트(Hooney.net의 첫 페이지)의 페이지랭크가 5라는 것을 알게 됐다. 이 숫자가 무엇을 의미하는 줄 몰랐기에 그리 신경을 쓰지 않았는데, 자주 찾는 사이트 중 하나인 디자인 정글의 첫 페이지도 페이지랭크가 5라는 것을 알게 됐다.

앗싸 가오리~

무슨 조화인지 알 수가 없기에 미국에 계시는 일몰님에게 물어보니, 이 페이지랭크라는 녀석이 검색과 관련이 있다고 한다.

구글 툴바 사이트의 설명 :

PageRank™ 표시 :
잘 알지 못하는 웹 사이트를 방문하신 경우 이 웹 사이트가 볼만한 가치가 있는지 알고 싶으시다면 툴바의 PageRank™ 표시를 사용하시어 구글의 자동 알고리즘에서 보고 계신 페이지의 중요도가 어떻게 평가되는지 알아보십시오.

머.. 어쨓든 Hooney.net 사이트가 첨으로 평가받은 거 같다. 구글에게 5점을 받으니 기분이 좋다. 조만간 디자인 버전으로 리뉴얼하면, 다른 곳에서도 평가받을 기회가 있을까? :)

구글 검색엔진 등록 – Google Sitemap

Google에서 Google Sitemaps이라는 새로운 프로그램을 만들었습니다. 이제 웹마스터는 웹사이트의 개별 웹페이지를 XML feed 형식으로 Google 검색엔진에 더욱 빠르고 정확하게 알려줄 수 있습니다.

사이트 등록이 공짜?

아무리 훌륭한 검색엔진이라하더라도, 물론 유료등록도 마찬가지겠지만, 검색결과에는 한계가 있습니다. 하지만, Google Sitemaps은 각각의 웹페이지의 위치나 수정된 시간까지 Google 검색엔진에 알려줄 수 있기 때문에 더욱 효과적인 검색결과를 기대할 수 있을 것 같습니다. 네이버나 다음과 같은 국내 검색엔진에 돈을 지불하고 웹사이트를 등록하는 것과는 전혀 다릅니다.

구글 계정만 있다면, 자신의 웹사이트의 sitemap.xml (이름은 상관없음)을 등록시킬 수 있습니다. 물론 무료입니다. 기본적으로 utf-8의 인코딩된 웹사이트를 지원하며, utf-16, ascii, iso8859-1의 인코딩도 지원하고 있습니다. 하지만 euc-kr은 지원하지 않습니다. 이미 인코딩의 대세는 utf-8인 것 같습니다. ^^

이 프로그램에 대한 더욱 자세한 설명은 searchenginewatch.com의 리뷰글에서 확인할 수 있습니다. sitemap.xml을 만드는 방법과 기타 자세한 설명은 구글 Sitemaps FAQ구글 Sitemaps 그룹을 참조하세요. (참고 : Hooney.net 에 사용된 sitemap.php 파일) 이곳에서 WP 관련 sitemap을 쉽게 만들 수 있습니다. (Jay님이 정보를 제공해주셨습니다. :) )

드디어 블로그에 구글 검색창 추가

지난주 금요일에 신청한 구글 애드센스 계정의 승인 이메일을 오늘에서야 받았다. 구글 광고에 관심있는 게 아니라, 내 블로그에 구글 검색창을 달아보고 싶었다.(언제 기회가 되면 구글 광고도!) 물론 기존의 워드프레스 검색창은 다시 사용할 수도 있을 것 같아서 주석처리 해뒀다.

간단한 클릭 몇번으로 만들어준 구글 검색 코드를 블로그에 copy & paste 했더니만, 이럴 수가.. 검색창과 버튼 몇개들을 테이블로 감싸논 것이 아닌가? 아직 많은 웹사이트들이 테이블 레이아웃으로 만들어져 있고, CSS를 사용할 경우 사용자 정의 CSS와 중복될 것을 감안해서 어쩔 수 없는 선택이었나 싶지만, 어쨓든 실망은 실망이다.

구글에서 만들어 준 코드 :

@
Web Hooney.net
@

나름대로 간단하게 수정해본 코드 :

@
Web Hooney.net
@

CSS 코드는 아직 완성이 않됐기에 일단 pass~ ^^;

Gmail 초대장 50장을 나눠드립니다.

Gmail에 초대할께요~ POP3로 메일을 확인하다가 스팸메일 정리겸 오랫만에 Gmail에 갔더니 초대장이 50장이나 왔더군요. 예전에는 Gmail 초대장을 돈주고 산다고 했지만, 요즘은 희소성이 줄어든 것 같습니다. 조만간 beta테스트가 끝나고, 정식 서비스를 오픈하면 초대장이란 개념도 없어질 것 같네요.

저 역시 다른 분의 초대로 Gmail을 사용하기 시작했으니, 당연히 다른 분들에게 나눠줘야겠죠~ ㅎㅎㅎ 아래 글은 Gmail 초대장의 미리보기에 들어있는 내용입니다.

Gmail을 친구에게 초대하기 – 50개의 초대장이 남았습니다.
Gmail 사용에 만족하시길 바랍니다. Google은 보다 더 나은 Gmail을 만들기 위해 노력하고 있습니다. Gmail은 사용자들이 친지와 공유하고자 보내는 초대장을 통해 크게 성장해왔습니다. 여러분께서도 다른 분들께 Gmail에 대해 알려주시기 바랍니다. 아래 양식을 작성하면 여러분의 친구나 가족이 Gmail 계정을 개설할 수 있도록 초대장을 보내 드립니다.

아직 Gmail 계정이 없으신 분들 중에서 초대받고 싶으신 분은 메일수집기에 발견되지 않는 방법(예: hooney 옛 핫메일)으로 제게 메일주소를 남겨주세요.

Gmail 특징 :

  1. 계정 용량 : 놀랍게도 2 Gbyte 제공!
  2. POP3 당연히 지원
  3. 메일 필터 지원
  4. 강력한 메일 검색 지원
  5. RSS feed 지원 (http://USERNAME:PASSWORD@gmail.google.com/gmail/feed/atom)

Be Friend~! Be Friend~!