마이크로포맷을 웹페이지에 적용시 주의점

April 21, 2007 at 11:52 pm · Filed under WebDevelopment, WebPlan, WebStandard

슬슬, 마이크로포맷도 수면위로 올라오는 듯 하다.

마이크로포맷을 웹페이지에 적용할 때 주의해야 할 몇가지.

1. AJAX나 DHTML로 마이크로포맷을 만들지 말 것.
물론, 웹브라우저나, OS단에서는 AJAX등으로 만들어지는 마이크로포맷도 충분히 처리할 수 있지만, 여전히 마이크로포맷의 목표는 (Human Readable) Machine Feed이기 때문에 AJAX등을 해석할 수 없는 기계에서도 읽을 수 있도록 JavaScript와 무관하게 HTML안에 마이크로포맷이 들어있어야 한다.

2. 당연한 이야기지만 표준 마크업을 준수해야 한다.
마이크로포맷은 상당히 플렉서블한 구조이긴 하나 어디까지나 표준 HTML을 준수해야만 한다. 마이크로포맷파서는 기본적으로 표준HTML을 파싱할 것을 가정하기 때문에, 마이크로포맷자체가 표준HTML 마크업을 따르지 않을 경우 파싱이 잘못될 수 있다.

3. 보이는 것이 전부는 아닐 수 있다.
CSS를 잘 이용하면, 마이크로포맷을 웹페이지에 적용했을 때, 사람의 눈에 보이는 부분외에도 숨겨진 정보를 제공할 수 있다. 당연히 시맨틱한 마크업이 우선되어야 하며, CSS로 제어가능해야한다.

4. WYSIWYG는 쥐약.
현존하는 WYSIWYG HTML에디터들은 마이크로포맷을 제대로 반영할 수 없다. 마이크로포맷이 필요한 컨텐트는 아직까지 손으로, 혹은 별도의 템플릿을 이용해서 마크업해야 한다.
일단 만들어진 마이크로포맷도 WYSIWYG 에디터를 이용하게 되면 포맷이 깨질 수 있다.
아마도 마이크로포맷을 위한 진화된 WYSIWYG - 이정도라면 이미 WYSIWYM이겠지만 - 을 만들어내면 대박…

Comments

웹사이트의 단축키

April 9, 2007 at 4:00 pm · Filed under WebDevelopment, WebPlan, WebStandard, WorldWideWoops

웹사이트의 단축키를 위한 조언.

1. 사용하지 마라.
웹사이트의 단축키는 접근성과 편의성을 올려줄 수도 있지만, 그 반대일 경우도 많다.
가장 좋은 것은 단축키를 제공하지 않는 것이다. 표준 인터페이스만을 지키는 것이 좋다. accesskey는 계륵이나 마찬가지.

2. 사용자의 환경을 가정하지 마라.
사용자는 Windows XP + IE6만을 쓰는 것은 아니다. 대놓고, “우리는 Windows XP + IE6만 지원해요”라고 써놓지 않았다면, 사용자의 환경을 마음대로 추측해서 가정하면 안된다.
이것은 단지, “OSX와 FF도 고려해주세요..” 라는 뜻은 아니다.
예를 들어 어떤 사용자는 당신이 한번도 경험해보지 못했던 스크린리더를 이용하는 시각장애인일 수도 있다.
또 어떤 사용자는, 손에 익은 개발환경을 위해 수많은 단축키로 구동되는 어플리케이션을 사용하는 하드코어 개발자일 수도 있다.
당신이 이정도면 IE와 FF에서 무리없이 돌아갈 거라고 설정해놓은 단축키들은 사용자가 이미 다른 용도로 사용하고 있었던 단축키일 수도 있다.

3. 단축키에만 의존하지 마라.
애플아이폰에서 사파리로 웹서핑하는 사용자도 있을 수 있고, Wibro용 카PC에서 웹서핑하는 사용자도 있을 수 있다. 터치스크린에서 단축키를 쓴다거나, 운전중에 단축키를 사용할 수 있을까? 핵심기능이 단축키로 제공된다는 것은 접근성면에 심각한 장애를 준다.

4. 사용자를 시험에 들게 하지 마라.
제 아무리 편리한 단축키라 해도 단축키를 외우는 것은 사용자에게 쉬운 일은 아니다.
정말 우리 서비스는 겨우 7개의 단축키만 알고 있으면 되는데… 라고 할지라도, 사용자는 당신의 서비스만 쓰는 것은 아니다. 이 서비스에서는 이 단축키, 저 서비스에서는 저 단축키… 사용자가 편리하라고 제공하는 단축키인가? 아니면, 개발자인 당신이 편리하라고 제공하는 단축키인가?

5. 단축키를 사용자가 지정할 수 있도록 하라.
꼭 단축키를 제공하고 싶다면, 사용자가 지정할 수 있게 하라. default 키 조합을 제공하되, 키 조합을 바꿀 수 있는 수단을 제공하라. 그래야 사용자가 자신이 진짜로 손에 익은 단축키를 설정해서 사용할 수 있다. 그렇지 않은 단축키들은 모두 나름 UX 제고를 가장한 기획자와 개발자의 자기만족일 뿐이다.

Comments (4)

OpenID는 익명의 수단이 아닙니다.

February 28, 2007 at 12:04 am · Filed under WebPlan, WebStandard, WorldWideWoops

OpenID의 목적은 새로운 Identity를 보장하기 위함이지, 블로그에 익명로그인을 위해 존재하는 것은 아닙니다.
특히 Simple Registration Extension을 지원하지 않고 프로필도 제공하지 않는 단지 Auth만을 제공하는 OpenID 서비스라면 더욱 그렇죠.
뭐 SRE를 반드시 지원해야 하는 문제는 아니고…

블로그에 OpenID를 이용할 수 있도록 해놓고 지금까지 두어개의 OpenID 커멘트가 달렸는데요…
불행히도(?) OpenID URL 중, myid.net은 email주소를 제외하고는 어떠한 정보도 알려주지 않습니다. 이래서야 URL이 있어도 그림의 떡.
어차피 블로그를 쓰시는 분이라면, 자신의 블로그 URL을 delegate해서 자신의 블로그로 연결시킬 수도 있습니다. 자신은 숨기고 myid.net의 인증만을 들이미는 것은 왠지 기분이 나빠져요. 꼭 인적정보를 까발리라는 게 아니라 자신의 블로그 URL로 delegate해주는 쪽이 좋지 않나 하는 말씀입니다.

그러니까 저는, yong.myid.net이 아니라, 블로거로서의 yy님을 마주대하고 싶은거라는거죠. 똑같은 OpenID 인증을 하시더라도, http://yong.myid.net 보다 http://janice.kaist.ac.kr/~gomeisa/blog를 써주시는 것이 훨씬 좋습니다. (OpenID를 이용하시는 분이 적어 부득이 yy님을 예로 들었습니다.)

제 OpenID는 eouia.openid.ne.jp도, eouia.myid.net도, eouia.openid.com도 아니라, http://dnzin.com/cunnningweb 입니다.

Comments (17)

Flash에서 스크린리더 감지하기

February 27, 2007 at 2:33 pm · Filed under WebStandard

[actionscript]
if (Accessibility.isActive()) {
_root.selfVoicing.play();
}
[/actionscript]

From : Detecting Screen Readers via Semantic Flash: Slippery When Wet (ALA)

그러나, 국산 스크린리더로는 안된다는 것…

조금 다른 이야기인데, 접근성을 위해서는 운영체제의 지원이 필수인데, 국가에서 지정해서 공공기관에 납품되는 PC에 들어가는 운영체제의 필수요건으로 스크린리더를 포함하도록 하는 게 좋지 않을까?

Comments

OpenID 그까이꺼(2)

February 23, 2007 at 4:03 am · Filed under WebDevelopment, WebStandard

이번에는 Consumer 구현입니다.
지난번에 이야기한 건 Provider편이었죠? 많은 부분 Provider와 겹치므로 슬쩍 새 창으로 띄워서 컨닝해가면서 따라오세요.

Consumer편은 더 쉽습니다. 설명할 게 없을 정도.

일단, 세션스토어로 MySQL을 사용할 예정이니 Provider편과 마찬가지로 MySQLStore 객체를 만듭시다.

[php]
$connection = DB::connect($dsn);
$store = new Auth_OpenID_MySQLStore($connection, ’setting’, ‘association’, ‘nonce’);
//$store->createTables();
[/php]

물론, 최초 실행시에는 createTables()를 해줘야합니다.

만약 MySQL대신 다른 Store를 이용하고 싶다면 다른 Store 클래스로 객체를 만드시면 됩니다. Factory 패턴이기 때문에 따로 신경안써줘도 되는건 OO 공부하신 분들이면 다 아실테지요.
[php]
$store = new Auth_OpenID_FileStore($store_path);
[/php]
예를 들어 파일패스를 스토어로 쓰고 싶다면 이렇게 해주면 된다는 말씀.

이제 만들어진 스토어 객체로 Consumer 객체를 만듭시다.
[php]
$consumer = new Auth_OpenID_Consumer($store);
[/php]

일반적인 시나리오에서는, 사용자는 Consumer 사이트에 와서 자신의 OpenID를 Form으로 입력하겠죠. 어쨌거나 인증하고자 하는 OpenID값을 Consumer 객체에 던져주기만 하면 됩니다.

[php]
$openid = $_POST[’login_openid’]; // 뭐, 예를 들자면.. 이런 식이겠죠:)
$auth_request = $consumer->begin($openid); //오픈아이디 서버와 association을 시도하고 그 결과를 돌려줍니다.
if($auth_request) {
//success;
} else {
//fail;
echo “Authentication Fail”;
}
[/php]
$auth_request가 true이면 정상적으로 association이 이루어졌다는 뜻입니다. 만약 false라면 인증에 실패했다는 메시지를 사용자에게 보여주면 되겠죠?

association이 성공적으로 이루어졌다면 이제, 해당 openid에 대한 인증을 시도하면 됩니다.

[php]
$trust_root = ‘http://consumer.com’;
$process_url = ‘http://consumer.com/afterAuth’;
$redirect_url = $auth_request->redirectURL($trust_root, $process_url);
header(”Location: “.$redirect_url);
[/php]
$trust_root는 Provider에게 이 인증시도가 어떤 Consumer로부터 시도된 것인지 신뢰여부를 판단하게 해주는 일종의 키값이 됩니다. 완벽하진 않지만, trustroot와 인증시도 도메인간에 도메인이 다를 경우 피싱시도로 파악해서 인증을 거부하거나 할 수 있도록 하지요. 반대로, trustroot로 인정된 도메인의 경우에는 따로 지정하지 않는 한, 인증을 자동보장한다거나 하는데 쓰일 수 있겠지요.

$process_url은 OpenID Provider가 인증을 처리하고 난 후 그 결과값을 되돌려받을 Consumer 사이트의 url입니다.

위의 코드가 실행되면, $redirect_url이 되돌려집니다. $redirect_url은 Provider의 인증처리 페이지에 인증 Request를 Get 메쏘드로 전달하는 형태이지요. 즉, 이렇게 만들어진 $redirect_url로 redirect시켜주기만 하면 됩니다.

만약 단순한 인증으로 끝나지 않고, Simple Registration Extension를 이용해 사용자 정보를 얻어오길 원한다면
[php]
$auth_request->addExtensionArg(’sreg’, 요구필드타입, 요구필드이름리스트);
[/php]
를 redirecURL메쏘드 실행전에 실행시켜주면 됩니다.
요구필드타입은 required/optional이구요, 비록 required라고 해도 Provider에서 반드시 정보를 제공한다는 보장은 없으니(Simple Registration Extension를 지원하지 않거나, 사용자가 정보제공을 거부하거나…), required로 요구한 필드의 되돌아오는 값이 없다해도 에러는 아니라는 점.
그외에, policy_url을 이용해, 어떤 필드들을 왜 요구하는지 설명을 알려줄 수도 있지요.
요구필드로 현재 Simple Registration Extension 에 정의된 필드는,

의 8 가지인데요, 주의할 점은 각각의 필드의 리턴값은 RFC와 ISO에 정의된 표준 스펙이라는 겁니다. 그러니까, country를 알려달라고 요구해도, “Korea”라든가 “대한민국”같은 형식으로 돌아오지는 않는다는 거지요.
각각의 필드에 대한 스펙 및 Simple Registration Extension에 관한 더 자세한 설명은,
여기를 참고하세요.

에.. 하여튼간에, 실제로 Simple Registration Extension을 이용하려면,
[php]
$auth_request->addExtensionArg(’sreg’, ‘policy_url’, ‘http://consumer.com/policy’);
$auth_request->addExtensionArg(’sreg’, ‘required’, ‘email’);
$auth_request->addExtensionArg(’sreg’, ‘optional’, ‘nickname’);
$auth_request->addExtensionArg(’sreg’, ‘optional’, ‘gender’);
$redirect_url = $auth_request->redirectURL($trust_root, $process_url);
header(”Location: “.$redirect_url);
[/php]
처럼 하면 된다는 말씀.

이제 인증 요청이 끝났습니다. redirect를 통해 Provider에게 GET 메쏘드로 인증요청을 했으니 나머지는 Provider와 사용자간에 나름의 과정을 통해 인증여부가 회신되겠지요?

전에 지정해둔 $process_url로 회신이 돌아옵니다.

다음은 $process_url에서 GET으로 돌아온 회신에 대한 처리부분입니다.

[php]
$response = $consumer->complete($_GET);
switch($response->status) {
case Auth_OpenID_CANCEL :
// 사용자가 인증을 취소했을 때의 처리
break;
case Auth_OpenID_FAILURE :
// 무언가의 문제로 인해 인증이 실패했을 때의 처리(인증을 요구한 openid가 없다든가..)
break;
case Auth_OpenID_SUCCESS :
// 인증성공!!
break;
}
[/php]

인증은 모두 끝났습니다. 간단하죠?
만약 Simple Registration Extension을 사용했을 경우, 요구했던 필드값들을 구해야겠죠?

[php]
$sreg = $response->extensionResponse(’sreg’);
echo $sreg[’email’];
[/php]

이걸로 진짜 끝.

간단하죠?

그러니까 OpenID 지원하는게 뭐 대단한 것도 아닌거에요. 무슨 코어모듈을 고쳐야 한다거나 하는 작업이 있을리도 없으니까, Consumer 지원하는 건 어려운 일이 아니에요. 물론 Provider가 되려면 좀 더 복잡한 작업이 필요하긴 합니다만, Provider는 많을 필요도 없고요.
OpenID의 의의를 이해하신다면, 별 특징이나 기능도 없는 Provider가 늘어나는 건 그저 사용자들에게 불편만 주고 OpenID의 장점을 전혀 못살리는 멍청한 짓이기도 하지요.
delegation을 이용하면 어떤 Provider를 쓰든 상관없는 거니까요. (오히려 Simple Registration Extension을 지원안하는 Provider라면 편의성이 떨어지는 셈이니 이용에 고민을 해봐야겠지요. 물론 보안문제가 아직 완벽하게 해결된 것은 아니므로 SRE를 믿느냐는 좀 다른 이야기긴 합니다만.)

국내에서 OpenID를 이야기하는 사람들이 많아지긴 했습니다만… 뭐랄까, 실제 개발자들에게는 그런 뜬구름잡는 이야기보다는 간단한 샘플소스에 대한 설명 하나가 더 필요한 시점아닐까 하는 생각이 드네요. 정말로 OpenID를 널리 퍼뜨리게 하고 싶다면요. 혹은, 그냥 기술적 우위를 뽐내는 걸로 만족하는 거라면 또 다른 이야기겠지만요.

Comments (9)

OpenID 그까이꺼 (1)

February 21, 2007 at 8:44 pm · Filed under WebDevelopment, WebStandard

약속했던 대로, OpenID 구현에 대한 이야기입니다.
이번은 JanRain의 라이브러리를 이용한 초간단 OpenID Provider 제작편입니다.
JanRain의 라이브러리는 원래 Python으로 구현되었습니다만, 현재는 여러 언어로 포팅되어있지요. Ruby, Perl, PHP, DotNet, Java, ColdFusion 등이 가능합니다.
여기에서는 PHP Library를 이용하겠습니다.

1) 설치
Pear Installer가 지원된다면

로 설치하면 간단 끝.
만약 경로를 따로 제어하고 싶다거나, 혹은 Pear를 쓸 수 없는 환경이라면, 그냥 다운로드 받아서 적당한 곳에 풀어주면 됩니다.

2) 구조
압축을 풀면 여러가지 디렉토리가 있는데, 실제적으로 중요한 곳은 /Auth입니다. 이 안에, OpenID 컨슈머와 프로바이더 모두를 위한 클래스들이 들어있습니다.
실제로 PHP4로 제작되어 있기 때문에 클래스 내부 코드들이 완벽한 OO 스타일을 유지하고 있다고 말하기는 어렵습니다. 코드들은 거의 미로수준. 게다가, 은근히 도큐먼트가 부실해서…

3) 구현
OpenID는 프로바이더와 컨슈머 사이에서 키를 발급하고 조회하는 메커니즘으로 운영됩니다. 발급된 키를 관리하는 방법은 여러가지가 있는데, 예를 들어, 메모리 세션을 이용하거나, 파일 세션, 혹은 DB 세션등을 이용하기도 하지요. 여기에서는 MySQL을 Store로 사용하겠습니다.

우선, 필요한 파일들을 include해야겠지요?
[php]
require_once(’Auth/OpenID.php’);
require_once(’Auth/OpenID/Server.php’);
require_once(’Auth/OpenID/MySQLStore.php’);
[/php]
내부적으로 다른 인클루드 파일들을 요구하기 때문에, include_path에 아까 설치한 Library위치를 포함시켜두면 좋겠습니다. (아니면 ini_set(’include_path’,) 를 설정하던가요.)

그리고 PEAR::DB를 이용한 DB커넥션을 Store로 사용할 것이므로 DB인스턴스를 만들어서 선언해줍니다.

[php]
$dsn = “mysqli://openid:password@localhost/openid”;
$connection = DB::connect($dsn);
[/php]

그리고는 MySQL을 이용하는 Store 객체를 반환받아야겠지요.

[php]
$store = new Auth_OpenID_MySQLStore($connection, ’setting’, ‘association’, ‘nonce’);
// $store->createTables();
[/php]

도큐먼트에 보면, 2번째 파라미터부터는 optional하다고 되어 있고, null값일 경우 default 정의된 테이블 이름으로 생성된다고는 되어있습니다만, 무엇의 문제인지 null값을 넣으면 제대로 생성되지 않더군요. 그리고 createTables()메쏘드를 실행해줍니다. 위에서는 주석처리해놓았는데, 사실 한번 테이블이 생성되면 저 메쏘드는 필요없어지기 때문입니다. 물론 여러번 실행시켜도 문제가 되지는 않습니다. (내부적으로 rollback)

이제, 해당 Store를 사용하는 OpenID Server 객체를 만들어야겠지요. 만약 다른 DB Store나 혹은 File Store를 쓰고 싶다면 해당 Store 클래스로부터 만들어진 객체를 $store로 넣어주면 됩니다.
[php]
$server =& new Auth_OpenID_Server($store);
[/php]

이제, 이 만들어진 Server 객체에 OpenID Request를 넘겨주면 되는데, 이 Request는 대개 Get메쏘드로 넘어온 값을 가지고 Request객체를 만들어 주면 됩니다.

[php]
//$value는 대개 Get으로 넘겨받은 OpenID request문자열입니다. 서버 구현에 따라 이 부분은 달라질 수도 있으니 알아서…
$request = Auth_OpenID::fixArgs($value);
$request = $server->decodeRequest($request);
[/php]

이 Request 객체의 멤버중에 mode라는 멤버가 있습니다. 이에 따라 해당 작업을 해주면 됩니다.

[php]
switch($request->mode) {
case ‘checkid_immediate’:
…
break;
case ‘checkid_setup’:
…
break;
default:
…
break;
}
[/php]

특별한 문제가 없는 한, association mode는 라이브러리에서 알아서 처리해줍니다. 물론 발급되는 키값을 바꾸거나 하고 싶다면 이 부분을 고쳐줘야겠지요. 어쨌거나, 특별히 고칠 부분이 없다면, 위의 default부분에, 아래의 코드를 넣는 것만으로 충분합니다. 이것은 user정보와는 상관없는 기본적인 handshake 단계의 통신이기 때문에 사실 건드릴 것도 별로 없는 셈이죠.
[php]
$response =& $server->handleRequest($request);
$webresponse =& $server->encodeResponse($response);
foreach ($webresponse->headers as $k => $v) {
header(”$k: $v”);
}
header(header_connection_close);
print $webresponse->body;
exit(0);
[/php]

checkid_setup과 checkid_immediate의 경우에는 프로바이더의 사용자 시나리오에 따라 복잡한 과정들이 처리되어야 하는데, 예를 들자면, 사용자가 인증을 허용하는지 여부등에 따라 반환되어야 하는 값이 달라져야겠지요.

만약 모든 조건이 클리어하다면, (예를 들어, Consumer사이트가 trustRoot에 포함되어 있고, 사용자가 해당 Consumer사이트로의 인증을 허락했다면…)
[php]
$response =& $request->answer(true);
$webresponse =& $server->encodeResponse($response);
foreach ($webresponse->headers as $k => $v) {
header(”$k: $v”);
}
header(header_connection_close);
print $webresponse->body;
exit(0);
[/php]
로 끝.

만약 Simple Registration Extended를 지원한다면, openid.sreg.required / openid.sreg.optional 의 형태(php에서는 openid_sreg_required / openid_sreg_optional 이라는 해쉬값으로..)로, 필요한 사용자의 데이터를 요구하게 됩니다. 이 경우에는,
[php]
$response->addField(’sreg’, 요구필드이름, 해당 데이터);
[/php]
형태로 추가해주면 되지요.(물론 $server->encodeResponse()전에..)

Provider의 사용자 시나리오에 따라서는, 로그인처리, 인증여부처리, 요구필드에 대한 허가 처리 등이 필요한 경우도 있을 수 있습니다. 그런 경우에는 Ajax나 혹은 일반 Form 형태로 사용자 브라우저에서 처리를 받은 후에, 현재 호출된 URL로 다시 redirect해주면 됩니다. (OpenID Request는 Get값으로 이루어지므로… 물론 처리페이지까지 OpenID Request들을 전달해서 그 페이지에서 처리하는 방법도 있겠지요.)

만약 올바른 요구와 답변이 아닐 경우에는,
[php]
$response =& $request->answer(false);
$webresponse =& $server->encodeResponse($response);
foreach ($webresponse->headers as $k => $v) {
header(”$k: $v”);
}
header(header_connection_close);
print $webresponse->body;
exit(0);
[/php]
로 해주면 됩니다.

나머지는 라이브러리에서 다 알아서 해주니까, Provider 개발자가 고민할 부분은, 사용자 시나리오를 어떻게 운영할 것인가.. 하는 부분이겠죠?

이상으로 OpenID 그까이꺼 만드는 법 Provider편 초간단 설명.

물론, 남의 라이브러리를 의지하지 않고, 프로토콜만 가지고 직접 구현할 수도 있겠습니다만, 뭐 굳이 그럴 필요 있나요?

Consumer편은 더 간단합니다만, 다음 기회에. 사실 Provider는 굳이 여러 곳에서 만들 필요는 없어요. 공연히 사용자에게 불편만 줄 뿐. 실상 Cyworld나 Naver Blog같은데서 지원하면 깨끗이 정리될 문제입니다만, 그럴 생각들은 없는 것 같고… (OpenID Provider라면 당연히 자사의 서비스에 Consumer도 붙여야 체면이 서겠습니다만… 과연 N이나 S가 그럴 것인지? ^_^)

Comments (3)

www.openid.ne.jp

February 14, 2007 at 6:03 pm · Filed under WebDevelopment, WebStandard, WorldWideWoops

http://www.openid.ne.jp
근 한달여 삽질 끝에 오픈했습니다.
일본 서비스라 한국에 계신 분들이 사용할리는 없겠지만.
CNET과 니케이 등에 기사가 났더니 제법 많이 들어오는군요. 일본 최초의 OpenID 구현이라 관심들이 많은가 봅니다.
물론, 서버만 제공해서는 아무 의미도 없으니, choix에 OpenID 컨슈머 모듈을 붙여 가입과 로그인을 OpenID로 가능하게 했습니다. News 2.0에도 조만간 붙겠죠.

JanRain의 라이브러리를 많이 참고(실은 거의 베꼈…)했음에도 여전히 숨은 버그들이 있습니다. 안들키기만 조마조마하게.. ^^; 실은 아직까지도 livejournal.com에는 왜 연결이 안되는지 원인파악도 안되지만.

저는 웹 프레임워크를 설계하고 OpenID 인증 파트를 개발했습니다. HTML 코드에 손댈 수 있는 상황이 아니라서, 코드에 불만이 있으신 분들도 있겠지만 조만간 깔끔하게 웹표준이 가능하도록 바꿔놓겠습니다. 그래도 javascript 없이 동작하고, 마이크로포맷을 조금 응용해넣기까지는 했습니다. 조금씩 고쳐가야죠.

시간이 나면 OpenID 서버와 컨슈머 구현에 대해 조금씩 정리해볼까 합니다. 저 자신도 아직 완벽히 프로토콜을 이해하고 있지는 못해서 말이지요. 복습하는 마음으로…

ps. 오픈마루 분들이 일본에 오셔서 오픈아이디 이야기를 꺼내셨을 때는 회사 내에서 다들 뜨끔… 조금 빨리 준비했다면 한국에서도 먼저 오픈할 수 있었을 텐데… 뭐, 그래도 OpenID를 이용하는 서비스들이 늘어난다면 좋은 거지요. OpenID 컨슈머들이 많이 늘어났으면 좋겠습니다.

Comments (4)

국위선양? 국제망신?

February 12, 2007 at 2:20 pm · Filed under WebStandard, WorldWideWoops

http://www.zdnet.co.kr/news/spotnews/internet/etc/0,39040060,39155362,00.htm

글쎄, 개인적으로는 매우 혐오하는 회사인데, 저정도 되면 박수라도 쳐줘야 하지 싶다.

물론, 격려의 박수는 아님.

Comments (3)

FF Extension - Operator

February 12, 2007 at 1:53 am · Filed under WebDevelopment, WebPlan, WebStandard, WorldWideWoops

매우 Cool한, 그러나 한국에서는 제대로 써먹지 못하는 익스텐션을 하나 소개하려 합니다.

제가 계속해서 마이크로포맷(microformat)에 관심을 가져온 것에 대해, 이 블로그에 자주 방문하시는 분들은 이미 알고 계시겠지만.
가끔 듣는 질문은, “그런데 마이크로포맷을 과연 실생활에서 써먹을 수 있는 건가요?”입니다.

지금 소개해드릴 익스텐션은 마이크로포맷이 어떤 식으로 쓰일 지에 대한 하나의 예시라고 할 수 있겠네요.

Operator 소개 바로가기

Operator는 현재 보고 있는 웹페이지의 마이크로포맷을 분석해서 다른 서비스와 연동시키는 익스텐션입니다.
Operator가 파악하는 마이크로포맷은 현재,

입니다.

페이지 내에 구성된 이러한 데이터를 가지고 다음과 같은 여러가지 액션들을 수행할 수 있습니다.

한국에서는 사용이 거의 힘든 서비스입니다. 하긴, 외국에서도 아직은 그다지 마이크로포맷 자체가 널리 퍼지진 않았습니다만, 그와는 별개로, 마인드 자체가 국내에서는 아직 성숙하지 않아서지요. Yahoo나 Google, Technorati같은 굵직굵직한 벤더들이 마이크로포맷을 적극적으로 활용하고 있는데 반해, 국내 IT서비스들은 아직 마이크로포맷이 무엇인지 조차 모르는 경우가 대부분이고, 당장 업무에 적용시켜야 할 HTML 퍼블리셔, 기획자, 개발자들이 시맨틱 마크업에 대해 익숙치 않아서입니다.

나름 개인적으로 비슷한 서비스를 만들어서 혼 쓰고 있었습니다만, 확실히 브라우저단으로 기능이 올라가니까 훨씬 사용하기 쉽군요. 웹용으로 만든 건 폐기처분하고 이 익스텐션을 적극 활용해야겠습니다.

Comments

좋은 인쇄를 위해.

February 3, 2007 at 12:11 am · Filed under WebDevelopment, WebStandard

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]

Comments