2007년 2월 28일 수요일
OpenID는 익명의 수단이 아닙니다.
2007년 2월 27일 화요일
Evolutionary Stable Web 2.0
Flash에서 스크린리더 감지하기
2007년 2월 25일 일요일
축구와 IT, O 신드롬
2007년 2월 23일 금요일
OpenID 그까이꺼(2)
2007년 2월 21일 수요일
OpenID 그까이꺼 (1)
2007년 2월 15일 목요일
부지런하란다
웹서비스 하나 제대로 쓰려면 부지런해야 한단다.
사용법 노하우까지 알려주고 잘 쓰란다.
게으르면 안되는 것인가...
게으른 컴퓨팅이 목적인 나에게, 부지런함을 요구하는 서비스따위는 필요없다.
하긴, 자신이 필요하면 얼마든지 부지런해질 수도 있을테고, 부지런한 사람에게 더 많은 혜택이 돌아가는 것도 당연하긴 한데...
부지런하고 충성도 높은 사용자만을 위한 서비스란건, 결국...
소위 웹 1.0시대 이야기 아냐?
에... 결국 그런건가. 웹 2.0은 역시 그냥 마케팅 용어?
게으른 사람을 위한 서비스 어디 없나? 은근히 기분나쁘네.
2007년 2월 14일 수요일
openid.ne.jp
근 한달여 삽질 끝에 오픈했습니다.
일본 서비스라 한국에 계신 분들이 사용할리는 없겠지만.
CNET과 니케이 등에 기사가 났더니 제법 많이 들어오는군요. 일본 최초의 OpenID 구현이라 관심들이 많은가 봅니다.
물론, 서버만 제공해서는 아무 의미도 없으니, choix에 OpenID 컨슈머 모듈을 붙여 가입과 로그인을 OpenID로 가능하게 했습니다. News 2.0에도 조만간 붙겠죠.
JanRain의 라이브러리를 많이 참고(실은 거의 베꼈...)했음에도 여전히 숨은 버그들이 있습니다. 안들키기만 조마조마하게.. ^^; 실은 아직까지도 livejournal.com에는 왜 연결이 안되는지 원인파악도 안되지만.
저는 웹 프레임워크를 설계하고 OpenID 인증 파트를 개발했습니다. HTML 코드에 손댈 수 있는 상황이 아니라서, 코드에 불만이 있으신 분들도 있겠지만 조만간 깔끔하게 웹표준이 가능하도록 바꿔놓겠습니다. 그래도 javascript 없이 동작하고, 마이크로포맷을 조금 응용해넣기까지는 했습니다. 조금씩 고쳐가야죠.
시간이 나면 OpenID 서버와 컨슈머 구현에 대해 조금씩 정리해볼까 합니다. 저 자신도 아직 완벽히 프로토콜을 이해하고 있지는 못해서 말이지요. 복습하는 마음으로... :)
ps. 오픈마루 분들이 일본에 오셔서 오픈아이디 이야기를 꺼내셨을 때는 회사 내에서 다들 뜨끔... 조금 빨리 준비했다면 한국에서도 먼저 오픈할 수 있었을 텐데... 뭐, 그래도 OpenID를 이용하는 서비스들이 늘어난다면 좋은 거지요. OpenID 컨슈머들이 많이 늘어났으면 좋겠습니다.
2007년 2월 12일 월요일
FF Extension - Operator
매우 Cool한, 그러나 한국에서는 제대로 써먹지 못하는 익스텐션을 하나 소개하려 합니다.
제가 계속해서 마이크로포맷(microformat)에 관심을 가져온 것에 대해, 이 블로그에 자주 방문하시는 분들은 이미 알고 계시겠지만.
가끔 듣는 질문은, "그런데 마이크로포맷을 과연 실생활에서 써먹을 수 있는 건가요?"입니다.
지금 소개해드릴 익스텐션은 마이크로포맷이 어떤 식으로 쓰일 지에 대한 하나의 예시라고 할 수 있겠네요.
Operator는 현재 보고 있는 웹페이지의 마이크로포맷을 분석해서 다른 서비스와 연동시키는 익스텐션입니다.
Operator가 파악하는 마이크로포맷은 현재,
hCalendar - 언제, 무엇
geo - 어디서
hReview - 무엇에 대해
tag - 어떤 키워드
hResume - 어떤 이력
xFolk - 어떤 북마크
입니다.
페이지 내에 구성된 이러한 데이터를 가지고 다음과 같은 여러가지 액션들을 수행할 수 있습니다.
내 "iCal"에 이벤트 정보 추가하기(혹은 Outlook에, 혹은 Google Calendar에...)
GoogleMap으로 해당 페이지에 언급된 장소 찾아보기(혹은 YahooMap으로..)
GoogleMap으로 해당 페이지에 언급된 인물의 주소 찾아보기
del.icio.us에 해당 태그로 컨텐트 북마크하기
Flickr에서 이 컨텐트와 관련있는 이미지 찾기
Technorati에서 관련 블로그 찾아보기
Yedda에서 관련 정보 찾아보기
Upcoming.org에서 관련 이벤트 찾아보기
Ma.gnolia에 이벤트나 장소, 인물을 저장해두기
한국에서는 사용이 거의 힘든 서비스입니다. 하긴, 외국에서도 아직은 그다지 마이크로포맷 자체가 널리 퍼지진 않았습니다만, 그와는 별개로, 마인드 자체가 국내에서는 아직 성숙하지 않아서지요. Yahoo나 Google, Technorati같은 굵직굵직한 벤더들이 마이크로포맷을 적극적으로 활용하고 있는데 반해, 국내 IT서비스들은 아직 마이크로포맷이 무엇인지 조차 모르는 경우가 대부분이고, 당장 업무에 적용시켜야 할 HTML 퍼블리셔, 기획자, 개발자들이 시맨틱 마크업에 대해 익숙치 않아서입니다.
나름 개인적으로 비슷한 서비스를 만들어서 혼 쓰고 있었습니다만, 확실히 브라우저단으로 기능이 올라가니까 훨씬 사용하기 쉽군요. 웹용으로 만든 건 폐기처분하고 이 익스텐션을 적극 활용해야겠습니다.
2007년 2월 8일 목요일
Just a memo
* 'Social Network' 에는, 'relation'만 있을 뿐, 'society'가 없다.
* 'trust'는 객관적인 가치로부터 나오고, 'reliability'는 주관적인 경험으로부터 나온다.
추가
http://hentol.com/tt/13 :
1. 모든 권력은 부패한다.
2. 절대권력은 절대부패한다.
3. 대중권력은 대중적으로 부패한다.
작년 황우석 난동 때부터 우려한 바이지만, 결국 대중에게 쥐어진 인터넷 권력은 통제되지 못하고, 통제될 수도 없다. People Power와 Collective Intelligence는 결국 지극히 구현되기 어려운 이상향 - 또하나의 사회주의 지상낙원 - 의 재판이 될 가능성이 점점 농후해진다.
요즘의 마이붐은 CI 만능론을 경계하기. Reputation은 생각만큼 효율적이지도, 올바르지도 않은 가치판단기준. (역시, Reliability 를 기반으로한 기계가 최선일꺼나...)
2007년 2월 6일 화요일
I hate WordPress
호스팅을 옮기면서 잠깐 고민하다 결국 WP를 다시 깔았는데...
나는 WP가 싫다.
테마와 플러그인의 dependency를 관리하지 못해 매우 복잡한 이전 절차를 거쳐야 하고...
빨라졌다고는 하나, Static Build의 효율성을 이길 수 없으며,
게다가 테마에 박혀있는 태그들은 잘도 이런걸 가지고 테마를 만드는구나 하는 생각.
이게 테마야? 프로그래밍이지...
테마 템플릿들은 모두 자기 멋대로 만들어 개념도 의미도 없고... 스파게티.
설치된 코드들은 역겹다. 손대고 싶은 생각도 별로 안든다.
어째서! MovableType이 더 깔끔하고 쉬운데도 왜 WordPress가 대세란 말인가! 단지 Perl과 PHP의 차이?
투덜투덜대면서도 결국 사용하긴 하지만... 에이.
밤새서 작업해야 하는데 두시간동안 쓸데없이 WP Config에 바쳤네. 공연한 화풀이려나.
2007년 2월 3일 토요일
좋은 프린팅을 위해
egloos가 print.css를 추가했다.
아주 바람직하고 좋은 시도. 불필요한 장식도 없고, 컨텐트에만 집중할 수 있고, 별도의 인쇄하기 버튼따위가 들어있지도 않다.
그러나 여전히 약간의 아쉬움이 남는다.
과연 인쇄를 위해서는 어떠한 UX가 더 필요할까?
1. 인쇄 전용 CSS
어떤 면에서 프린터는 브라우저보다 CSS를 더 잘 구현해내기도 한다.
이글루스의 경우 print.css를 붙이기는 했는데, 실상 상당히 단순한 속성들로 구성되어 있다. 프린트 전용 CSS라기 보다는, 마치 초단순 스킨이라고 불리워도 무방할 정도로.
기왕 프린트를 위한 CSS라면 프린트 전용 CSS를 맘껏 사용해보는 것도 좋았을 텐데.
(이 print.css가 이글루스 스킨 시스템에 포함되어 사용자가 마음껏 고칠 수 있는 종류의 것인지는 모르겠다. 그렇다면, 심플한 CSS만 제공하고, 기교를 부리는 건 사용자에게 맡기도록 하는 것은 좋은 방법일 수 있다.)
아무튼, 인쇄 전용으로 사용가능한 방법으로는,
셀렉터
@page : .페이지 단위의 셀렉터. 하나의 페이지로 이루어진 모니터와는 달리, 인쇄는 물리적인 여러개의 페이지로 이루어진다.
@bottom-left-corner, @bottom-left, @bottom-center, @bottom-right, @bottom-right-corner : 페이지의 푸터영역 셀렉터(bottom-margin이 있는 경우)
@top-left-corner, @top-left, @top-center, @top-right, @top-right-corner : 페이지의 헤더 영역 셀렉터 (top-margin이 있는 경우)
속성
page-break-after, page-break-before, page-break-inside : 보기좋은 인쇄를 위해 강제로 페이지 브레이크를 걸어야 할 때 사용.
content : 해당 셀렉터에 인쇄시 내용을 추가할 때 사용한다. (예를 들어 @page:first의 @top-left-corner에 저자 이름을 따로 적어둔다거나 하는 식.)
counter-increment, counter-reset : 인쇄물의 페이지 번호등을 조절할 때 사용.
이외에도 더 많은 테크닉들이 있으나 프린터 및 프린터 확장 호환장비들에 따라 미세하게 다르므로 대충 이정도로 소개만. 더 자세히 알고 싶으신 분은, 여기를 참고.
기타 주의사항 :
프린터는 최소한 16가지의 색상을 구별이 가능하도록 다른 형태로 인쇄할 수 있다-인쇄해야 한다.(흑백이라 하더라도 패턴등의 방법을 사용하여.)
프린터는 인쇄물에 대한 페이지 사이즈를 지정할 수 있어야 한다.
2. 링크
링크는 웹문서의 기본이며, 문서의 가장 중요한 컨텐트 요소중 하나이다.
그런데 인쇄를 하면 이러한 링크정보가 사라지게 된다.
링크가 사라진 문서에, '링크였던' 부분에 밑줄만 쳐져 있어 봤자 무슨 소용이 있을까.
erehwon님의 포스팅으로 보아 아마도 이 문서를 참조한 것 같은데, 해당 문서 중에 좋은 팁이 들어있다.
[css]
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
[/css]
못보고 지나쳤을리는 없을 텐데, 왜 안들어 있을까.
아마도 링크를 인쇄물에 포함시켰을 때 인쇄물이 너무 지저분해지기 때문이었으리라. 또, IE에서는 통용되지 않는 다는 점도 고려되었을테고.
그럼에도 불구하고, 링크의 인쇄는 미관적인 이유로 빼버리기에는 너무 중요한 요소이다.
좋은 방법이 있을까?
몇십줄의 자바스크립트의 추가로 더 유용한 인쇄물을 만들 수 있다.
지금 보고 있는 이 페이지를 인쇄하고 그 결과를 이글루스의 그것과 비교해보자. 대부분 거의 비슷하겠지만,
단 한군데 다른 점을 발견할 수 있을 것이다.
(예시로 들기에는 이 블로그의 디자인이 너무 심플한데다가, 본인은 디자이너도, 퍼블리셔도 아니기에. 더 좋은 예시를 들지 못함이 아쉽다.)
3. 더 생각해 볼 만한 것 - selective print.
개인적으로는 그다지 좋은 방법이라고는 할 수 없기에 간단히 링크만 걸어둔다.
프린터용 CSS를 만드는 간단한 방법.
1. 인쇄에서는 사용할 수 없는 기능이 담긴 엘리먼트(검색창, 메뉴등)를 display:none;으로 감춘다.
2. 폰트타입을 바꾼다. 인쇄시에는 작은 글씨의 경우 모니터와는 달리 serif 종류의 폰트들이 더 가독성이 높다. 인쇄물의 특성을 고려하여 폰트를 바꿔준다.
3. 장식용 이미지가 필요하다 해서 HTML코드를 다시 고치지 말고, :after, :before등의 pseudo-element를 사용해 인쇄용 이미지를 추가한다.
4. 대개의 경우, 공용 CSS등에서 bullet 스타일을 지워버렸을 수 있다. 인쇄시에는 까먹지 말고 다시 bullet스타일을 지정해주자.
5. position, float을 사용한 블록들은 인쇄시에 의도한 곳과는 다른 곳에 인쇄될 수 있다. 되도록이면 복잡하지 않은 인쇄레이아웃을 잡도록 한다.
다음은, W3C에서 제공하는 인쇄용 CSS 샘플이다. 이걸 그대로 쓰라는 것이 아니라, 일종의 초기화 가이드라인 삼아 제작하면 좋을 것이다.
[css]
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { line-height: 1.33 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .83em 0 }
h3 { font-size: 1.17em; margin: 1em 0 }
h4, p,
blockquote, ul,
form,
ol, dl { margin: 1.33em 0 }
h5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
h6 { font-size: .67em; margin: 2.33em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
ol, ul, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
br { content: "\A" }
@media print {
@page { margin: 10% }
blockquote,
pre { page-break-inside: avoid }
}
[/css]
2007년 2월 2일 금요일
2007년 2월 1일 목요일
고맙다고 AdSense 클릭하지는 마세요.
생각난 김에 마저 적고 자야겠다.
기획자가 미처 생각하지 못한 용도로 확장해 활용해주기를 모든 서비스 기획자가 꿈꾸긴 하지만...
그렇다고 하지 말라는 것까지 교묘하게 에둘러 활용하는 능력은 전세계에서 우리가 일등일 듯.
원래 구글 애드센스의 목표(?)는, "되도록이면 클릭하지 마시오."라고 표현할 수도 있겠다.
엥? 광고인데 클릭이 많이 되면 좋지 않아?
단기적으로 보면 광고주들은 일견 클릭유입이 늘어나면 이득처럼 느껴지겠지만, 장기적으로는 클릭의 증가는 광고주에게는 그다지 바람직하지 않은 현상이다.
비싼 단가 내고 오버추어 광고 신청했더니 경쟁사가 일부러 자사의 광고를 부정클릭해대는 바람에 엄청난 피해를 봤다는 광고주는 한 둘이 아니다.
애드센스는 이러한 것을 막기 위해, 방문자가 되도록이면 클릭을 하지 않도록 하고 있다. (Don't be evil.)
그래서 컨텐트로 오해받지 않도록 하고, 유혹하는 장식도 넣지 못하게 하고, 어필리들이 클릭을 유도하는 행위도 못하게 한다. 방문자의 '가독성을 위해' 그러지 말라는 것이 아니라는 말씀.
클릭이 늘어나면, 구글로서야 수수료가 늘어나니 좋을 듯 하지만, 종합적으로는 광고 시스템에 대한 신뢰를 떨어뜨리게 된다. 무슨 소린고 하니, "구글 애드센스 프로그램에 참여해서 광고비를 집행했더니 트래픽은 확실히 늘었는데, 우리 상품 판매량은 그대로네..."라는 소리가 광고주 입에서 나오면 이 시스템은 광고매체로서의 매력을 잃게 된다는 뜻.
따라서, 되도록 클릭이 발생하지 않도록 외관도 수수하고, 되도록이면 낙시성 광고가 오르지 않고 진짜로 그러한 난관(?)에도 불구하고 꼭 필요한 사람만 클릭하도록 문맥광고를 하는 것인데...
"좋은 글을 읽어 감사의 뜻으로 애드센스 클릭해드려요." 라는 사용법이라니, 애드센스 기획자가 들으면 펄쩍 뛸 일이다.
'감사의 뜻'으로 애드센스 클릭한 방문자가 그 광고 자체에 관심이 있을리는 만무, 고작해야 창이 뜨자마자 닫아버릴 터.
광고주로 보자면 미치고 환장할 일. 클릭은 발생해서 광고비는 나가는데, 그렇게 유입된 트래픽이 고작 0.1초짜리 뜨내기라니.
이런 행위가 점점 많아지면, 한마디로 같이 죽자.. 상황이 된다.
'감사의 뜻'을 애드센스 클릭으로 표현하는 이들은 장기적으로 애드센스 자체를 망하게 하는 데 일조하는 셈. 뭐야, 모두들 알고보니 안티구글?
조금 관점을 바꿔서...
'감사의 뜻'을 고작 코멘트 하나와 클릭 한번으로 때우려 하다니 너무 싼 거 아냐? 라는 생각도.
진짜로 고맙다면, 애꿎은 광고주의 피같은 광고비를 마치 자기 쌈지돈인양 선심쓰지 말고,
단돈 10원이라도 자기 주머니에서 직접 지출해야 하는 것 아닌가?
생각의 역발상. 차라리 누군가 기부시스템을 만들어보는 건 어떨지?
"진짜로 제 글이 도움이 되어 고맙다고 느꼈다면 이 버튼을 클릭해서 100원씩 부탁해요."
(오마이뉴스의 좋은 기사 원고료후원을 생각해보면 되겠다.)
과연 사람들이 할까? ㅋㅋ
말로 고맙다고 하는 것은 쉽지만, 정말 자기 주머니에서 100원이라도 꺼내 줄 사람들은 얼마나 될까? 뭐, 100원 내는 사람이 한명뿐이라면, 그 글은 고작 100원짜리 글이겠지. 컨텐트에 대한 가치를 측정하는데 이보다 더 좋은 방법도 없겠다.
Assert를 잘하자.
오늘의 교훈: Assertion의 습관화.
Code Complete에 보면, Assert에 관해 한 장을 할애할 정도로 중요하게 여기고 있다. The Pragmatic Programmer에서도 중요하게 다루고 있는 주제.
원론적인 면에서 동의하면서도 현실에서 체감한 적은 별로 없었는데... (솔직히, 너무 뻔한 이야기 아닌가... 라는 생각까지 했었다.)
근 2주가까이 한가지 문제를 해결하기 위해 고민하고 있었는데, 정작 문제는 너무나 간단한 곳에 있었다.
[php]
private function doSomething($param=null) {
...
}
[/php]
이런 메쏘드가 있을 때, 이 코드로만 보아서는 $this->doSomething();처럼 호출해도 문제가 없을 것 처럼 보인다. 주석 및 도큐먼트에는 심지어, $param은 optional하다고 적혀있기까지 하다.
그런데 실제로, 코드를 추적해본 결과, 개발자의 의도와는 달리 이 코드는 특정조건 하에서는 $param값이 null이 되면 오작동하도록 만들어져 있었다.
일차적으로는 개발자가 주석과 도큐먼트를 잘못 작성한 셈이지만,
근본적으로는 Assertion을 제대로 하지 않은 코드의 문제. 선행조건을 엄밀히 명시해두지 않았기 때문에 발생했다.
최소한 다음처럼 코드가 작성되어 있었어야 했다. 오류를 해결하는 것보다, 보고하는 것이 먼저다.
(어디가 문제인지 알아야 고치기라도 할 것 아닌가.)
[php]
private function doSomething($param=null) {
assert('$this->someCondition || $param');
...
}
[/php]
물론 동적으로 생성되는 값들에 대해 미리 선행조건을 알고 있기가 불가능한 경우도 있겠다. 그런 경우에라도 크리티컬한 미션을 수행하기 직전에, 해당 미션이 클리어되기 위한 선행조건에 대한 assertion을 붙이는 방어적 프로그래밍을 습관화해야겠다.
* 좋은 Assertion을 위한 지침. (from Code Complete)
1. 여러분이 발생할 것이라고 예상하는 상황들에 대해서 오류처리코드를 사용하라. 즉, 절대로 발생해서는 안 되는 조건을 위해서 어설션을 사용하라.
2. 실행가능한 코드를 어설션내에 입력하지 않는다.
3. 선행 조건과 후행 조건을 문서화하고 검증하기 위하여 어설션을 사용하라.
4. 매우 견고한 코드를 작성하기 위해서는 어설트한 다음 오류를 처리하라.
* PHP를 위한 assert function
[php]
assert_options(ASSERT_ACTIVE, 1);
assert_options(ASSERT_WARNING, 0);
assert_options(ASSERT_BAIL, 1);
assert_options(ASSERT_CALLBACK, 'assertHandler');
function assertHandler($file, $line, $message) {
echo "$file : $line : $message";
}
...
assert('some assertion syntax...');
[/php]