웹마스터

IE6 사망선고 운동에 동참하며

2010-03-01T22:44:04+09:00

인터넷 익스플로러, 많은 분들이 '인터넷'이라고 잘못 알고 있는 이 프로그램은 인터넷을 항해할 수 있는 여러 프로그램들 중 하나일 뿐입니다. 인터넷을 항해할 수 있도록 돕는 프로그램을 '웹브라우저'라고 부릅니다. 즉, 우리가 흔히 볼 수 있는 아래 아이콘은 MS가 만든 웹브라우저인 인터넷 익스플로러의 아이콘일 뿐입니다. 그런데 이 익스플로러는 다른 브라우저에 비해 성능이 현저히 떨어집니다. 최근에 발표된 익스플로러8에 와서는 성능을 많이 따라잡았지만, 한국에서 가장 대중적으로 사용되는 6의 경우에는 성능이 정말 현저히! 현저히 떨어집니다. 보안에 취약한 건 말할 필요도 없죠. 얼마 전 중국에서 gmail이 해킹됐을 때, 중국 해커들은 익스플로러의 취약점을 통해 해킹했다고 합니다. 때문에 독일 정부는 익스플로러를 사용하지 말라고 권고하기도 했죠.¹ 저는 평소에 구글에서 만든 웹브라우저인 크롬을 주로 사용합니다. 웹사이트를 만들 때는 모질라라는 비영리재단에서 만든 파이어폭스를 주력 브라우저로 사용합니다. 크롬은 정말 빠릅니다. 파이어폭스는 다양한 부가기능이 장점입니다. 예컨대, 많은 사람들이 영한사전과 마우스 제스쳐 기능 때문에 익스플로러에 알툴바를 설치해서 사용합니다. 알툴바를 설치하면 안 그래도 느린 익스플로러가 더 느려지죠. 그런데 파이어폭스와 크롬 모두 두 부가기능을 사용하면서도 별로 속도가 느려지지 않습니다.(알 시리즈에 대해서는 다음 글을 한 번 읽어 보세요 : http://offree.net/entry/Immoral-Company-ESTSoft) 제가 크롬에서 사용하고 있는 부가기능만해도 여러 가지가 있습니다. 번역, 즐겨찾기 동기화, 네이버/다음 사전, 마우스 제스쳐 등등 다양한 부가기능을 사용하면서도 저는 쾌적한 웹서핑을 할 수 있는 것이죠.(크롬에서 부가기능 설치하기) 단 한가지, 한국의 웹 환경 탓에... 물론, 한 가지 약점이 있습니다. 한국의 이상한 IT 정책 때문에 익스플로러를 사용하지 않으면 인터넷 결제를 할 수 없다는 점이 있는 거죠. 따라서 저는 인터넷 결제를 할 때만 익스플로러를 사용합니다.(여러 개의 웹브라우저를 동시에 설치해 놓고 사용할 수 있습니다.) 이에 관해서는 관련한 <한겨레> 기사를 보시면 이해가 빠를 것 같습니다 : MS도 버린 ‘액티브엑스’ 정부서 고집하다 자충수 그래서 한 고려대 교수는 이에 관해 소송을 내기까지 했습니다 : 인터넷 강국? Active-X 왕국! 이런 한국의 웹환경 탓에 간혹 오래된 웹사이트에 가면 익스플로러6에서만 제대로 보이는 경우도 있습니다. 많은 분들이 여러 홈페이지가 잘 보이는 게 익스플로러 덕분이라고 생각하시는데 아닙니다. 익스플로러에 맞춰서 웹사이트들이 비표준으로 만들어졌기 때문에 익스플로러에서 잘 보이는 것뿐입니다. 한국도 최근에 만들어진 홈페이지들은 다른 브라우저들에서도 잘 보입니다. 특히 포털들은 거의 문제없이 이용할 수 있습니다. 한 사람의 웹 개발자로서 한 사람의 웹 개발자로서 인터넷 익스플로러6(IE6) 사망선고 운동을 완전 환영합니다. 다른 데서 잘 나오는 사이트가 익스플로러6에서는 깨져 나오는 경우가 많습니다. 독점기업의 오만함 때문인지 국제 표준을 따르지 않고 제멋대로 코드를 인지하기 때문입니다. 때문에 사이트를 모두 디자인한 다음에 익스플로러6에 맞춰서 한 번 더 디자인을 해 줘야 하는 수고를 해야 합니다. 개발자 입장에서는 일을 두 번 하는 셈이 되는 것이죠. 이것 때문에 전세계 개발자들이 IE6를 원망합니다. 진짭니다. 의심스러우시면 "IE6, 편히 잠드시길"…장례식 거행이라는 기사와 IE6 no more! 사이트를 방문해 보시기 바랍니다. <레프트21> 사이트를 수정하고 할 때도 항상 IE6에 맞춰서 몇 시간씩 추가 노동을 해야 하니 이거 참 다른 데 쓸 수 있는 역량을 낭비하고 있다는 생각이 드는 것도 어쩔 수 없는 일이지요. 그래서 IE6로 들어오시는 분들에게는 아래와 같은 배너가 보이도록 조치했습니다. 이것은 전 세계에서 일고 있는 IE6 no more! 운동에 동참하는 의미로 한 것입니다. 물론 익스플로러6를 사용해도, 지금 이 웹마스터 블로그와 레프트21 사이트를 아무 무리 없이 사용할 수 있습니다. 그러나 분명한 점은 있습니다. IE8로 업그레이드하시거나 새로운 브라우저를 사용하게 되시면, 저에게도 좋고 여러분에게도 좋다는 것입니다.(여러 개의 브라우저를 동시에 설치하는 건 당연히 가능하니까 한 번 여러 개를 설치해 놓고 사용해 보세요.) 일단, 여러분은 두 가지 이점을 누릴 수 있습니다. 빠른 웹서핑 환경, 그리고 더 나은 보안을 제공받을 수 있습니다. 저는? IE6 사용자가 줄어들어서 1% 미만으로 떨어지면 IE6만을 위한 삽질을 하지 않아도 됩니다. 그 전까지는 IE6를 지원할 수밖에 없지만 말입니다. 그럼... IE6를 사용하고 있으신 분은 꼭 업그레이드해 주시길 부탁드리며 이만 맺습니다.

글 전체보기

유럽이 MS를 견제하는 것의 일환이기도 했겠습니다만, 아무 껀덕지가 없이 이런 권고를 할 수는 없는 것이죠. [본문으로]

블로그에, 자동으로 갱신되는 레프트21 기사를 달아 보자

2010-02-27T10:07:40+09:00

얼마 전에 '계륵, 레프트21 오픈캐스트'라는 글을 쓴 적이 있는데 기억하시나 모르겠습니다.^^ 어쨌든, 네이버에 레프트21 오픈캐스트를 계속 발행하는 입장에서는 다양하게 활용할 방법을 고민하고 있습니다. 일단, 가장 손쉽게 활용할 수 있는 방법을 알려 드립니다. 이 방법은 티스토리, 텍스트큐브.com, 그리고 설치형 블로그나 홈페이지 운영자들이 가능한 방법입니다. 기타 가능한 서비스가 있을지 모르겠으나 제가 모르는 관게로;; 있으면 제보 주세요. ^^ (네이버와 다음, 이글루스에는 달 수 있는 방법이 없는 것 같아요.) 와와 같은 형태로 나옵니다. 지금 이 블로그의 아래쪽에 가면 기사 목록이 있는 걸 볼 수 있으실 거에요. 자, 티스토리와 텍스트큐브에 어떻게 달 수 있는지를 설명하겠습니다. 개인 홈페이지 운영자나 설치형 블로그 운영자라면 티스토리와 텍스트큐브에 어떻게 다는지 설명하면 알아서 달 수 있는 능력이 있을 거라 가정하겠습니다. ^^ 일단, 티스토리. 관리자모드에서 스킨 > HTML/CSS편집을 선택합니다. 그리고 나서 skin.html 칸에서 [##_article_rep_desc_##]을 찾습니다. 아래 보이시죠? 그 줄의 바로 아래쪽에다가 아래 코드를 써 넣습니다.  <div style="text-align:center"> <iframe title="레프트21 오픈캐스트" style="margin: 0px auto;" name="opencastframe" id="opencastframe" src="http://widget.webtools.kr/opencast_em.php?id=LE759&index=&is_footer=1&is_feed=0&feed=" width="475" height="336" border="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true"></iframe> </div> 그리고 저장하면 끝! 텍스트큐브도 비슷합니다. 메뉴가 조그 다를 뿐이죠. 꾸미기 > 스킨편집을 선택합니다. 거기서 역시나 skin.html 항목으로 가서 [##_article_rep_desc_##]을 찾습니다. 그리고 역시 위에서 말씀드린 코드를 그 아래쪽에 집어넣습니다. 어때요? 간단하죠? 그렇게 하면 블로그 글의 하단에 레프트21 오픈캐스트가 붙습니다. 만약 글의 상단에 붙이고 싶다면 [##_article_rep_desc_##]의 아래쪽이 아닌 위쪽에 코드를 삽입하시면 됩니다. 사실 레프트21의 주요기사 목록 같은 걸 제가 직접 코드를 짜서 위젯으로 만들어 배포하고 싶었는데 시간이 나질 않네요. 일단 아쉬운대로 오픈캐스트로나마 대신하겠습니다. 오픈캐스트도 나름대로 일주일에 한 번씩 업데이트가 되니까 충분히 도움이 될 거라 생각합니다. 그럼...

글 전체보기

구글의 웹마스터 퀴즈에서 4등을 하다

2010-02-08T18:28:18+09:00

구글은 제가 가장 좋아하는 검색엔진이자 IT 회사입니다. 물론, 기업을 좋아한다는 게 좀 딜레마가 있긴 하지만, 여튼간에 탐욕적인 이미지의 M$나 자사 중소 컨텐츠가 노출되기 어려운 검색엔진인 Naver 보다 훨씬 도움이 되거든요. 구글 검색은 품질도 좋고, 구글 크롬은 속도도 빠르고, gmail은 스팸이 없고, 구글 번역은 꽤 쓸모있고 등등. 얼마 전에 구글 한국 블로그에서 웹마스터 퀴즈 이벤트를 한 적이 있습니다. 심심풀이로 했죠. 대충 했는데 웬걸~! 제가 4등을 하고 말았습니다. 결과는 여기 가면 볼 수 있죠 ㅋㅋ : 웹마스터 퀴즈, 어떠셨나요? 난이도가 꽤 됐나봐요. 제 점수가 65점인데 4등이니까요.(상품 같은 거 없는 재미를 위한 퀴즈였어요.) 어쨌든, <레프트21> 독자 여러분, 여러분은 꽤 실력이 괜찮은 웹마스터가 관리하는 홈페이지를 보고 계신 겁니다! ^^ (하고 자랑질을;;) 고수 분들이 모두 퀴즈에 참가했다면 제가 4등할 일은 없었을 거라는 겸손(!)의 말을 덧붙이며, 자랑질을 마칩니다. ^^

글 전체보기

기사 보다가 그 기사가 실린 호수로 바로 가기

2010-02-08T18:17:53+09:00

웹마스터가 사이트의 열혈 이용자라면 참 유리한 점이 많은 것 같습니다. 생산자와 소비자가 일치하는 것은 인터페이스를 쉽게 만드는 데 참 유리한 것 같습니다. 오늘 새로 만든 기능은 제가 불편해서 만든 기능인데, 여러 모로 쓸모 있을 거라 생각합니다. 오늘 홍세화 선생님이 공무원과 전교조 탄압에 대해서 노무현 정권 때 했던 인터뷰 기사를 보았습니다. 그게 어느 신문 몇 호에 실린 건지는 알 수 있었지만, 같은 때 실렸던 기사들은 또 뭐가 있을지 궁금했는데 알 수 없었죠. 그래서 링크를 만들었습니다. 아래처럼 말입니다. 기사 하단에 이게 어떤 매체 몇 호에 실린 건지 나오는 부분이 있죠. 거기에 있는 매체명을 클릭하면 해당 호수에 실린 모든 기사를 보실 수 있습니다. 검색할 때, 이 기사가 어떤 정국에서 실린 건지 궁금할 때가 있잖아요? 그럼 저 링크를 누르시면 되는 거죠. 그러면 '아, 홍세화의 전교조 공무원노조 방어 기사는 2004년 총선을 앞두고 실린 거구나. 맞아. 그 때 공무원노조가 민주노동당 공개 지지를 표명하면서 정부가 탄압을 했었지.' 하는 생각을 할 수 있게 되는 것이죠. 그럼, 편리하게 사용하시기 바랍니다. ^^

글 전체보기

다함께가 주최하는 포럼 슬라이드

2010-01-27T13:58:20+09:00

홈페이지를 유심히 보시는 분들은 눈치 채셨을 것입니다. 다함께가 주최하는 포럼이라는 항목이 생겼습니다. 오른쪽 하단을 살펴보시면 발견할 수 있을 겁니다. 이번에 이 기능을 달면서는 자바스크립트 애니메이션을 좀 활용했습니다. 오른쪽 아래에 있는 화살표를 누르면 포럼이 슬라이드로 넘어가는 것을 볼 수 있습니다. 간편하게 아래 동영상을 보셔도 됩니다. 자바스크립트 애니메이션 이번에 포럼을 붙일 때는 자바스크립트 애니메이션을 사용했습니다. 위 동영상을 보시면 알겠지만 포럼을 넘기면 슬라이드처럼 샥샥 넘어가는 효과가 눈으로 보입니다. 자바스크립트 애니메이션은 아주 한정적인 영역에서만 사용해야 합니다. 웹은 기본적으로 움직임이 많지 않은 매체입니다. 애초에 그렇게 설계됐기 때문이죠. 물론 요즘은 RIA(Rich Internet application)라고 해서 웹 화면에서도 화려한 효과들을 많이 주는 쪽으로 방향이 가고 있습니다만, 아직까지 웹에서 그런 화려한 효과를 누리는 건 제한적입니다. 영화 사이트 들어가 보신 분들은 좀 느낄 수 있을 겁니다. 성능 좋은 컴퓨터에서야 모르겠지만, 성능이 평범한 컴에서 영화 사이트에 들어가면 화면이 뚝뚝 끊기고 로딩 속도도 느리고 짜증날 때가 많죠. 게다가 <레프트21>은 신문 사이트로, 화려한 효과를 보는 게 목적인 사이트가 아니라 텍스트 읽기가 주된 활동이 되는 사이트입니다. 움직임이 많으면 오히려 읽는 사람 눈을 피곤하게 하는 효과를 낼 수 있죠. 그래서 최대한 정적으로 화면을 구성하려고 노력하고 있습니다.(최근에 마르크스21 광고는 플래시로 구성해서 움직이게 해 놨는데, 그렇게 맘에 들진 않습니다. 목록이 너무 많아서 그렇게 붙일 수밖에 없었죠.) 그런데 이번 포럼 목록에 자바스크립트 애니메이션을 사용한 것은 다음 이유에서입니다. 사용자가 클릭하기 전에는 움직이지 않게 구성해 눈을 어지럽게 하지는 않았습니다. 사용자의 의도와 무관하게 모든 목록을 보여 줘야 하는(예컨대 <마르크스21> 4호 광고) 그런 기획이 필요한 것이었다면 자바스크립트 애니메이션을 포기하고 다른 방도를 찾으려고 노력했을 것입니다.(예컨대 제목만 보여 주고 모든 목록을 노출하는 방법이 있겠죠.) 텍스트에 애니메이션을 주는 것은 이미지에 애니메이션을 주는 것보다 성능저하가 덜합니다. 바뀌는 모습을 표현해 주는 게 사용자들 편의에 더 부합한다고 판단했습니다. 클릭했을 때 움직임이 없이 그냥 변하면 이게 변한 것인지 아닌 것인지 눈치를 못 채는 경우도 있습니다. 애니메이션 효과가 있으면 변했다는 것을 사용자가 확실하게 감지할 수 있는 것이죠. 원 소스 멀티 유스(One Source Multi Use) 또 하나 자랑(?)할 만한 일이 있습니다. 포럼 슬라이드에 나오는 정보는 레프트21 홈페이지에 저장된 것이 아닙니다. 포럼 홈페이지에서 제공하는 정보를 받아서 그 때 그 때 뿌려 주는 것이죠. 포럼 RSS를 활용한 것입니다. RSS는 실시간으로 최신 정보를 업데이트해 주기 때문에, <레프트21>쪽에서는 따로 입력해줄 것 없이 그냥 만들어 두면 역시 실시간으로 계속 정보가 업데이트되는 것입니다. 이런 것을 '원 소스 멀티 유스'라고 말합니다. 데이터는 한 군데만 저장되 있는데 여러 곳에서 그걸 활용할 수 있는 것이죠. 보통 언론사에서 '원 소스 멀티 유스'라고 하면 기사를 다 모아놓은 데이터베이스가 있고, 그걸 휴대폰에도 뿌려 주고, 웹에도 뿌려 주고, 오프라인 인쇄를 할 때도 사용하고 그렇게 하는 겁니다. 그럼 자료관리를 하기가 아주 편한 거죠. 만약 기사 오타가 하나 났다고 칩시다. 만약 '원 소스 멀티 유스' 방식에 따라 데이터를 한 곳에만 저장한 게 아니라, 신문 따로 웹 따로 핸드폰 따로 이렇게 데이터를 저장했다면, 오타가 발견됐을 때 세 곳에 있는 담당자에게 모두 전화를 해서 오타를 고치라고 해야 할 것입니다. 하지만 '원 소스 멀티 유스' 방식으로 데이터가 저장돼 있다면 데이터가 저장돼 있는 한 곳에서만 오타를 수정하면 되는 것이죠. 그러면 그 데이터를 활용해 서비스하는 곳의 내용은 모두 자동으로 수정되는 것입니다. 마찬가지죠. 다함께가 주최하는 포럼의 데이터에 대해 <레프트21> 관리자는 신경쓸 필요가 없습니다. 그 쪽에서 포럼 내용을 갱신하면 <레프트21> 쪽에서도 갱신되니까요. 그 쪽에서 공개 제공하는 데이터(RSS)를 사용하기 때문에 가능한 일입니다. 이런 방식으로 자료를 관리하고 일을 처리하면 일을 아주 효율적으로 처리할 수 잇는 것이죠. 마치며 이렇게, 포럼 슬라이드 하나를 만들 때도 신경쓸 일이 많이 있습니다. 이렇게 신경을 쓰는 이유는 간단합니다. 이런 것들 하나하나가 쌓여서 웹사이트 전반을 구성하기 때문이죠. 그리고 현재의 판단이 효율적이냐 아니냐에 따라서, 이런 일이 하나하나 쌓였을 때 일이 효율적으로 처리될 수 있느냐 아니냐를 결정할 것이기 때문입니다. 예컨대, 포럼 정보를 눈으로 보고 수동으로 입력하는 식으로 제가 포럼 슬라이드를 만들었다면 앞으로 포럼 정보를 일일이 손으로 긁어 입력하느라 누군가는 고생해야 했을 것입니다. 슬라이드처리되게 하면서 원칙없이 '예뻐 보이니까'라는 기준으로 일을 처리했다면 아마도 웹사이트는 일관성 없이 따로노는 공간으로만 구성된 그런 곳이 될지도 모르는 일입니다. 그럼, 앞으로도 노력하는 웹마스터 되겠습니다. ^^

글 전체보기

레프트21 기사를 퍼가실 때 이렇게 해 주세요~!

2010-01-19T11:08:49+09:00

오늘은 좀 부탁을 드리려고 합니다. 꽤 많은 분들이 레프트21 기사를 고정적으로 퍼가서 블로그에 올리고 있으십니다. ^^ 더 많은 사람들이 레프트21의 목소리를 접할 수 있는 통로가 되기 때문에 저희는 기사 퍼 가는 것을 좋게 생각하고 있습니다.(이것도 레프트21이 거의 비영리로 신문사를 운영하기 때문에 환영할 수 있는 입장이 되는 것이겠죠.) 기사 퍼가기 효과 극대화 하기 그런데, 레프트21을 더 많은 사람들이 읽게 하고 싶다면, 이렇게 해 주시면 도움이 됩니다. 위에서 빨갛게 테두리 친 부분 보이시죠? 이번에 부탁을 드리기 위해서 새로 만든 부분입니다. 저 부분까지 긁어서 블로그나 카페, 개인 홈페이지 등에 붙여 넣어 주세요. 그러면 아래처럼 붙게 된답니다. 짜잔~ ^^ 레프트21로 연결되는 링크가 생겨나게 됩니다. 아울러 레프트21이 택하고 있는 '정보공유 라이선스 2.0:영리금지'라는 저작권 정책도 함께 붙게 됩니다. 댓글로 문의가 있었는데, 저작권 정책 때문에 불안감이 많으신 것 같아서 필요한 조치를 했고, 위 상태대로 퍼가시면 레프트21의 저작권 정책에 완전히 부합하게 되므로 안심하셔도 됩니다.(당연히 영리목적 등 불건전한 목적으로 퍼가는 건 안되겠죠. ^^) (단, 크롬의 경우는 기사제목은 생기지 않고 Left21.com만 생깁니다. 익스플로러와 파이억폭스에서는 기사제목과 저작권정책까지 붙는 걸 확인했고요. 사파리, 오페라는 테스트해보지 못했습니다. OTL;;) 사실, 제가 이 아이디어를 처음 생각한 것도, 기사를 퍼간 다음 출처를 적는 분들이 있는데 그 분들 수고도 덜어드리려는 의도도 있었습니다. 수고도 덜고, 레프트21 링크도 확실히 걸리게 하고. 일석이조라고 생각한 것이죠. 이렇게 하면 어떤 도움이 되나요? 두 가지 도움이 됩니다. 첫째, 검색엔진에서 레프트21 기사의 순위가 올라가게 됩니다. 검색엔진 알고리즘에서 핵심적인 부분 중 하나인데요, 링크가 많이 된 페이지는 검색엔진 순위에서 높은 점수를 받게 됩니다. 어떤 논문의 질을 판단할 때, 그 논문이 다른 논문에 얼마나 많이 인용됐는지를 평가 요소로 삼는 것과 비슷한 것입니다. 구글이 검색엔진을 만들 때 많이 링크된 기사는 많이 도움이 되는 기사라고 생각을 하고 검색 알고리즘을 짠 것은 유명하죠. 구글의 검색엔진이 일단 현존하는 최고의 검색엔진이기 때문에 많은 검색엔진들이 구글의 알고리즘을 참고했을 것이고, 링크가 많이 걸리면 대부분의 검색엔진에서 플러스 점수를 받을 수 있다고 가정할 수 있습니다. 검색엔진 순위에서 레프트21 페이지들의 순위가 상승하게 되면 더 많은 사람들이 레프트21의 목소리를 들을 수 있게 되는 것이죠. 둘째, 레프트21에 있는 다양한 콘텐츠를 보고, 레프트21의 존재를 사람들이 각인할 수 있게 됩니다. 블로그에 기사를 옮겨놓음으로써 자신의 블로그 방문자들에게 기사를 읽히는 효과를 낼 수 있을 것입니다. 그러나 블로그에 모든 기사를 옮겨 놓을 수는 없는 노릇입니다. 레프트21에는 7500여 개의 기사가 있고, 대부분은 주옥 같은 기사들이죠. 검색도 편리하게 할 수 있도록 설계돼 있습니다. 사람들이 사이트를 직접 방문해서 기사를 찾아 본다면 더 도움이 될 거라고 생각하는 이유입니다. 블로그에서 기사 하나만 읽고, 그냥 지나치기보다는 레프트21이 제공하는 다양한 기사를 읽을 기회를 얻게 되면, 레프트21 방문자에게도 좋고, 레프트21에도 좋은 것이라고 생각해요. 블로그 곳곳에 퍼진 기사들을 레프트21 홈페이지와 어떻게 연결시킬 수 있을까 고민하다가 나온 아이디어인데, 어떻게 괜찮은가요? 그럼, 오늘은 이만 씁니다. ^^

글 전체보기

링크 설명(툴팁)을 제깍제깍 뜨게 만들다

2010-01-07T23:43:58+09:00

링크 위에 마우스를 올려놓을 경우 작은 박스가 뜨면서 설명이 나오는 걸 보신 적이 있을 겁니다. 아래 그림처럼 말입니다. 이런 걸 툴팁이라고 합니다. “‘저출산 극복 대회’ - 여성이 애 낳는 도…” 까지만 제목이 나와 있죠. 첫 화면에 긴 제목을 모두 담을 수 없기 때문에 일정 글자수가 넘으면 자르는 것입니다. 그러나 실제 제목이 뭔지 궁금하겠죠. 그래야 글을 읽을지 말지 결정할 수가 있으니까 말입니다. 마우스를 올려 놓으면 위처럼 풀 제목이 뜹니다. 전체 제목은 “[이화여대에서 열린 ‘저출산 극복 대회’를 보고] 여성이 애 낳는 도구인가?” 네요. 그런데 한 가지 단점이 있었습니다. 바로 0.5초 정도 딜레이가 있다는 거예요. 마우스를 올려놓고 0.5초 정도 지나야 툴팁이 뜬다는 거죠. 그래서 어떤 사용자들은 툴팁이 제공되는지 모르고 있었을 지도 몰라요. 이게 좀 마음에 걸렸었죠. 그래서 마우스를 올리자마자 툴팁이 뜨도록 했습니다. 생각을 했었지만 실행을 못 하다가 최근에 실행하게 된 이유가 있습니다. 바로 《마르크스21》 기사를 레프트21에 올리게 되면서입니다. 《마르크스21》은 계간지죠. 글이 길고 주석도 많이 달려 있습니다. 웹마스터로서 서비스 정신(?)을 발휘하여 모든 각주에 툴팁을 달았던 것입니다. 아래처럼 말이죠. 그런데 반응속도가 느리다 보니 이런 툴팁이 제공된다는 것을 모르는 사용자들이 있을 게 분명했어요. 그게 좀 안타까웠어요. 그래서 반응 속도를 0으로 만드는 개혁(?)을 단행한 것이죠! 그렇게 만들면서 스타일도 약간 줬고요. 이제 아래처럼 나옵니다. 자, 그림만으로는 반응 속도가 빨라졌는지 느려졌는지 잘 안 느껴지시죠? 동영상으로 감상하실 수 있습니다! ^^ 아래 동영상 한 번 꼭! 보세요 ㅠ.ㅠ 열심히 만들었어요 ㅋㅋㅋ (시간도 몇 초밖에 안 되요.ㄷㄷㄷ;;) 어떻게 만들었는지 궁금한 분은 'jQuery 툴팁 플러그인 - 마우스 올리면 설명이 나오게 해 주는 플러그인'을 읽어 보시면 됩니다.

글 전체보기

기사 목록에서 허공을 클릭해도 기사로 들어가던 문제 해결

2009-12-31T00:29:52+09:00

이건 예전에 웹마스터였던 연두님이 지적해 주셨던 겁니다. 지난 호 보기의 목록 보기 코너나, 검색 결과 페이지 등에서 허공을 클릭해도 링크로 이동하던 문제(?)가 있었습니다. 말로는 잘 설명이 안 되니까 그림을 보시죠. 위 구조로 돼 있을 때 문제는 말입니다. 저 허공에 클릭을 하면 해당 기사로 이동해 버린다는 점이죠. 그런데 사람들은 흔히 글을 읽을 때 마우스로 드래그를 해서 문장을 선택했다 지웠다 하죠. 아래 처럼 말입니다. 그런데 허공을 클릭해도 기사로 이동한다면? 네. 드래그하려고 허공을 클릭했다가 사용자의 의도와 무관하게 기사로 들어가버리는 현상이 발생하게 되는 것이죠. 연두님이 이를 지적했던 것입니다. 최근에 이 문제를 해결했습니다. 이제는 허공을 클릭했다고 기사로 들어가버리고 하는 일은 없을 것입니다. 기술이 아니라 관점의 문제 사용하기 좋은 웹사이트에는 획기적인 기술이 필요한 게 아닙니다.(물론 기술이 뛰어나면 더 사용성이 좋은 효과를 가미할 수 있으니까 운용할 수 있는 기능이 많아지긴 합니다만 핵심은 아니라고 생각합니다.) 관리자가 얼마나 사용자의 입장에서 고민하고 인터페이스를 만드는가가 중요하다고 생각합니다. 그래서 피드백이 많은 사이트를 관리하고 있는 저는 꽤 유리한 입장에서 사이트의 인터페이스를 고민할 수 있다는 생각이 드네요. ^^ 독자분들께 감사드리며, 혹시라도 제안하실 게 있다면 홈페이지 오류신고, 개선사항 제안 페이지를 이용해 달라고 말씀드리겠습니다. 그럼 이만.

글 전체보기

구글 검색으로 <레프트21> 검색하기

2009-12-27T15:19:47+09:00

<레프트21>은 검색엔진 최적화를 열심히 수행했습니다. 그 결과 기사 대부분이 검색에 잡히기 시작했습니다. 구글 검색에서 대부분의 기사를 검색할 수 있는 게 그 성과입니다. 이런 상황이기 때문에, 구글 검색¹ 을 활용해 레프트21을 검색한다면 다양한 것을 할 수 있습니다. 아래 검색창을 이용해 보세요. 구글로 레프트21 검색하기 위 검색창으로 검색하면 left21.com/article 이라는 주소를 포함한 페이지만 검색해 줍니다. 즉, 레프트21의 기사들만 검색해 준다는 것이죠. 몇 가지 옵션을 줬는데, 검색 도구가 기본으로 열려 있고, 기사에 포함된 이미지도 기본으로 보여 줍니다. 활용법 아래는 위 검색창으로 검색한 결과입니다. 검색어는 신자유주의고요. 기본으로 이미지가 나오도록 세팅돼 있습니다. 일단 맨 위에 '신자유주의'라는 검색어를 보세요. site:left21.com/article 이라는 단어가 없습니다. 그런데도 left21.com의 기사들만 검색됩니다. 제가 옵션을 줬기 때문에 그렇습니다. '신자유주의'라는 검색어 바로 아래쪽에 보면 '검색 left21.com'이라는 단어가 보이죠. 레프트21에서만 검색한다는 얘깁니다. 오른쪽에 보시면 기사에 포함된 사진을 볼 수 있고요. 왼쪽은 검색도구입니다. 지난 1시간, 24시간, 1주, 1년, 기간 설정 등으로 특정 기간에 나온 기사만 검색할 수 있습니다. 물론 이 부분은 완전히 정확한 것은 아닙니다. 그래도 대략적으로는 맞습니다. 타임라인은 기간별로 검색결과를 보여 줍니다. 아래처럼 말이죠. 신자유주의와 연도를 짬뽕해서 검색해 줍니다. 위 그림은 1960~1979년 사이 신자유주의와 연관된 것을 검색한 결과인 것이죠. 마가렛 대처는 1979년에 권력을 잡았군요. 1973년에는 아랍에서 전쟁이 있었네요. 1979년 4월에는 긴축정책 등을 골자로 한 '경제 안정화정책'을 추구했군요. 이 정도가 위 검색창으로 검색해 나온 결과를 활용할 수 있는 부분인 것 같습니다. 구글의 정확한 검색 결과와 기능을 사용하면 원하는 것을 더 빨리, 정확하게 찾을 수 있을 거라 생각합니다. [덧1] 사실, 레프트21에 있는 기본 검색을 저걸로 달고 싶은데, 검색 결과가 구글 페이지인 점 때문에 좀 고민이 듭니다. 저 같이 효율성을 최우선으로 따지는 프로그래머야 디자인과 결과 페이지야 어떻든 간에 정확하고 좋기만 하면 그만이지만, 많은 사용자분들은 디자인이 바뀌면 당황하는 것 같더군요. [덧2]다른 고민은 광고입니다. 보험 같은 검색어로 검색하면 보험 광고가 이빠이 뜨거든요. 참고삼아 말하자면, 소셜리스트 워커 같은 경우는 광고가 나오는 것을 감수하고 구글 검색을 달아 놓았습니다. 레프트21은 어떻게 할지 판단이 안 서네요. 덧1에서 말한 고민도 있고 말입니다. [덧3]현재 달려 있는 구글 검색의 디자인도 몇 달 안으로 수정할 생각입니다. 그러면 좀더 사이트에 밀착해 있는 검색엔진으로 보일 것입니다.

글 전체보기

세계 최고 구글의 검색엔진을 활용해서 레프트21을 검색하는 건 좋은 일이겠죠? ^^ [본문으로]

목록 클릭시 새 창 띄우기, 전체 기사와 기본검색에 사진 썸네일 출력하기

2009-12-21T03:08:43+09:00

제목이 좀 기네요. 주제는 두 개인데 서로 좀 성격이 다른 내용이라 제목이 길어졌습니다. 오늘은 목록 부분에 약간 수정이 있었습니다. 목록 클릭시 새 창으로 전체 기사 목록, 섹션 목록, 주제 목록, 칼럼 목록, 집중이슈 목록, 기획연재 목록, 검색 결과 목록... 많은 목록이 있습니다. 이런 목록들에서 클릭을 했을 때 사용자들은 어떤 화면을 원할까요? 예전에 조명훈 기자 의견은 이랬습니다. 검색을 해서 목록을 띄웠는데, 기사를 클릭했을 때 새 창으로 띄우는 게 더 좋다는 것입니다. 지금 창에서 클릭한 기사로 넘어가면 별로라는 거죠. 클릭한 기사가 원하는 기사가 아닐 수도 있기 때문입니다. 원하는 기사가 아니면 '뒤로 가기'를 눌러서 다시 검색 결과 목록으로 돌아가야 하니까요. 그럼 시간이 걸리죠. 썩 유쾌한 기분은 아닐 겁니다. 생각해 보니 저도 그런 적이 많았습니다. 그런데 지금까지 고치지 않은 이유는 과연 정말 그럴까 하는 고민 때문이었습니다. 지금껏 내내 고민한 건 아니겠죠. 띄엄띄엄 고민을 해봤습니다. 당시 조명훈 기자는 처음에는 '새 창 띄우기' 버튼을 만들어 달라고 했다가, 기본을 새 창 띄우기로 하고 '현재 창' 버튼을 만드는 게 낫겠다고 말했습니다. 저는 고민 끝에, 그냥 무조건 새 창으로 띄우도록 하기로 결정했습니다. 어차피 현재 창 버튼을 만드는 게 큰 의미가 없다고 생각했기 때문입니다. 클릭해서 새 창으로 띄우면 어차피 원하는 기사가 나옵니다. 한 번에 원하는 기사가 나왔다면 보고 닫으면 그만이겠지요. 굳이 버튼을 하나 더 만들어서 사용자들을 헷갈리게 만들 필요는 없다고 생각했습니다. 목록에 사진 썸네일 추가 이건 사진 기자인 수현 씨가 부탁한 것입니다. 기사 목록에 사진 썸네일이 출력되지 않으니까 불편하다는 것이었습니다. 사실, 처음에 <레프트21> 사이트를 제작할 때 시간에 쫓겨서 만들지 못했던 기능입니다. 만들어야지 생각만 하고 차일피일 미루다가 지금까지 왔는데요, 목록에서 사진 썸네일이 출력되면 그리 나쁘지는 않지만 핵심적인 기능은 아니라고 생각했기 때문입니다. 그러나 오판이었던 것 같습니다. 사진을 기준으로 기사를 보는 사람들도 (소수겠지만) 분명히 있다는 것을 확인했습니다. 물론 사진 기자 분은 기사에 어떤 사진이 사용됐는지 확인하기 위한 용도로 요청한 것이지만, 저도 돌이켜 보면 사진을 기준으로 기사를 찾았던 적이 있었던 것 같습니다. 그래서 일단 전체기사 목록보기와 기본 검색에는 사진이 나오도록 처리했습니다. 구글 검색에서는 사진 썸네일을 기본으로 제공하지 않는 것 같습니다. 구글 검색은 여러 형태로 제공되는데요, <레프트21>의 구글 검색뿐 아니라 그냥 구글 검색에서도 사진 썸네일을 기본으로 제공하지는 않습니다. 다만, 검색도구를 열어서 이미지 미리 보기를 선택하면 사진 썸네일을 볼 수 있죠. 구글 검색으로 <레프트21> 사진 썸네일을 보려면 좀 골치가 아픕니다. 예전에 '더 효과적으로 검색 기능을 활용하자!'라는 글을 쓴 적이 있죠? 그걸 참고하시면 되는데요. 구글 검색을 할 때 검색창에 아래처럼 써 주면 됩니다.('검색어' 대신 원하는 검색어를 넣고 검색 버튼 누르시면 실제로 구글 검색 결과 페이지로 갑니다.) 위에서 검색 버튼 눌렀을 때 나오는 페이지에서 '검색도구 열기...'를 클릭하고, '이미지 미리보기'를 누르면 기사에 포함된 사진들을 볼 수 있습니다. 아래 그림을 참고하세요. 독자와 소통의 중요성 사실 기자들은 자신이 <레프트21>의 열혈 독자기도 합니다. 사이트의 훌륭한 사용자인 것이죠. 만약 이 분들이 적극적으로 자신이 불편한 점을 저에게 말해 주지 않았다면 (비록 작은 개선이지만) 오늘 개선은 더 늦춰졌을지도 모르겠습니다. 기사 목록에서 새 창으로 기사를 띄우는 것은 영영 안 됐을 지도 모르는 일입니다. 그런 점에서 독자 분들이 아이디어나 불편한 점을 말해 주는 것은 굉장히 도움이 됩니다. 혹시 이 글을 읽는 지금, 저에게 할 말이 있으시다면 1분만 시간을 내서 '홈페이지 오류신고, 개선사항 제안' 페이지에 댓글을 남겨 주세요. 많은 도움이 된답니다. 그럼, 앞으로도 열심히 노력하는 웹마스터가 되도록 하겠습니다. ^^

글 전체보기