옷장수 나라: 3월 2007

2007년 3월 27일 화요일

회사 엘리베이터..

회사에 엘리베이터가 4대 있습니다.
평소에 만원인 경우, 친절한 목소리로 '만원입니다. 다음 엘리베이터를 타시기 바랍니다.'라는 안내 멘트가 나옵니다.

그러던, 어느날 그녀(엘리베이터)의 새로운 목소리를 들었습니다.
만원으로 꽉찬 엘리베이터에 덩치큰 남정네 3명이 타자 버럭 화를 내면서,

'정원초과입니다. 마지막 타신 분은 내리시기 바랍니다'..

인공지능이 좋은건지.. -_-;;;;
P.S. 짤방이미지는 한 때 포털의 메인을 장식했던 일본 유도선수의 사진을...

단축키에 대한 잡생각

단축키, 프로그램을 사용하다보면 요즘 빼놓을 수 없는 기능 중 하나가 단축키일 것 같습니다.

[아니라구요?...본인의 가슴에 손을 얹고 나는 Ctrl+C/Ctrl+V도 모르는가를 반성해보세요 ^^;;]

단축키는 사용자들이 미리 정의한 동작들을 '키를 한번 누르거나' 또는 '여러키를 동시에 누름'으로서 실행하는 기능을 의미합니다. [1. Wikiepdia의 단축키, 2. 네이버 국어사전의 단축키]

단축키는 영어로, Shortcut Key(또는 Accelerator key, Hot key, key binding, keybinding, key combo)라고 부릅니다.

Microsoft(한글 Office)에서는 단축키를 다르게 부르는데요. '바로가기 키'라고도 부릅니다.

일반적으로 사용하는 프로그램에는 공통적으로 쓰이는 몇 개의 단축키들이 있습니다. 각각의 단축키들은 동작을 의미하는 영어단어의 첫번째 글자를 많이 사용합니다. (아닌 단축키들도 있습니다.) 외울 때, 각각의 동작과 단축키를 관련지어 생각하면 쉽게 외울 수 있습니다.
(공통적으로 사요되는 키목록-Wikipedia, MS Office)

Ctrl+C 복사 (Copy)
Ctrl+X 잘라내기 (Cut)
Ctrl+V 붙여넣기 (Paste)

Ctrl+B 굵게 (Bold)
Ctrl+I 기울임꼴 (Italic)
Ctrl+U 밑줄 (Underline)

Ctrl+R 오른쪽 맞춤 (Align Right)
Ctrl+E 가운데 맞춤 (Align Center)
Ctrl+L 왼쪽 맞춤 (Align Left)

Ctrl+A 문서 모두 선택 (Selet All)
Ctrl+O 열기 (Open)
Ctrl+P 인쇄 (Print)

Ctrl+Z 실행 취소 (Undo)
Ctrl+Y 다시 실행 (Redo)
Ctrl+S 저장 (Save)
Ctrl+F 찾기 (Find)

플루토

플루토 Pluto 2
테츠카 오사무 지음, 우라사와 나오키 그림 / 서울문화사(만화)
나의 점수 : ★★★★★

오챠노미즈 박사: 로봇이 살인을 저지른 전례는... 브라우 1589(ブラウ1589)의 케이스 뿐이란다.

아톰: 정말 그런가요?

오챠노미즈 박사: 왜 그렇게 묻지?

아톰: 아니에요.. 브라우 1589라는 로봇의 인공지능에는 어떤 결함이 있었나요?

오챠노미즈 박사: 아니... 완벽했었단다...

아톰: 완벽... 인간을 죽이는 완벽함이라니... 그건 무슨 뜻이죠?

오챠노미즈 박사: ...

아톰: 그건... '인간'이라는 뜻인가요?

인간을 죽이는 완벽함... 인간이기 때문에 인간을 죽인다는 얘기일까..

이미지 출처 : PLUTO(플루토) - 보다 재미있게 즐기기 위해서 2

2007년 3월 26일 월요일

Woot에서 400만 화소 카메라가 $49.99에 나왔네요.

200만화소 카메라를 40만원 주고 샀던게, 2002년인데... 고작... ^^;;; 생각해보니 좀 지나긴 지났군요.
그래도, $49.99면 오늘의 환율 기준으로 46,915.62원 싸네요. 운전하시는 분들 차사고날때 대비해서 한 대씩 사서 차안에 두고 다녀도 좋겠네요.

출처 : Woot! Polaroid 4 Megapixel Digital Camera

2007년 3월 25일 일요일

3월24일 결혼식~

아침에 일어나보니 비가 내리더군요.
그래도, 3월 24일이 길일이라서 그런지 결혼식이 두군데나 있었답니다.
결혼식 두군데를 참석하고 오니 하루가 다가더군요. -_-;;

P.S. 결혼식에서 스테이크란걸 먹었는데.. 좋더군요. ^^;;

[결혼식 사진 보기..]

2007년 3월 23일 금요일

Google의 Prettify 프로젝트

Google에서 재미난 오픈소스 프로젝트가 나왔습니다.
Google-Code-Prettify라는 프로젝트인데요. JavaScript를 이용해서 브라우져단에서 C 스타일의 코드를 예쁘게 출력해주는(Syntax highlighting) 프로젝트입니다.

프로젝트 명: Google-Code-Prettify
라이센스 : APL(Apache Project License) 2.0입니다.
지원하는 언어 : C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles
사용하는 방법:

먼저, 프로젝트 페이지에서 prettify.js와 prettify.css 소스 파일을 다운로드 받습니다.
다운로드받은 소스를 사용할 페이지에 선언해주구요.
출력할 코드를 code, pre, xmp 태그안에 넣습니다.
1에서 선언한 태그의 class를 prettyprint로 설정합니다. 예를 들자면 <pre class="prettyprint"></pre>와 같은 형태로요.
onload 이벤트에 prettyPrint()를 호출해주면 하이라이팅된 소스를 보실 수가 있습니다.

다음은 xmp를 사용해서 html소스를 출력하는 샘플 코드입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript"src="prettify.js"></script>
<link type="text/css" rel="stylesheet" href="prettify.css" media="screen"></link>
</head>
<body onload="prettyPrint();">
<xmp class="prettyprint">
<html>
<head></head>
<body>
<div id="sample"></div>
</body>
</html>
</xmp>
</body>
</html>

그리고, 다음은 해당코드를 prettify.js를 사용해서 출력해본 화면입니다.

스타일의 경우 prettify.css를 수정하면 되므로 원하는 스타일대로 설정도 가능합니다.

장점 : 다양한 언어를 지원하는 오픈소스 프로젝트입니다. 클라이언트에서 Syntax highlighting을 처리할 수 있기 때문에 서버단의 변경없이 쉽게 추가가 가능합니다.

단점 : 클라이언트 단에서 char단위의 파싱이 발생하기 때문에 많은 양의 소스를 파싱할 수 없으며, (소스 내부에서 250ms 단위로 체크해서 반응이 없을경우 종료시킵니다.) 비용이 많이든다는 문제점이 있습니다.

출처:

Google-Code-Prettify와 예제페이지

prettify.js

prettify.css

2007년 3월 22일 목요일

Safari에서 디버깅하기

이전에 발생하였던 Safari의 버그를 무시무시한 alert으로 잡은 후에 (일단 급한 불은 꺼야겠죠.) Safari에서 디버깅은 어떻게하나 검색을 해보았습니다. 답은 있더군요. (무식이 죄죠.. ^^;;)

먼저 터미널을 연다음에 "defaults write com.apple.Safari IncludeDebugMenu 1"를 터미널에 입력하고 엔터를 친 후, Safari를 다시 띄웁니다.

Safari를 다시 띄우면, Debug항목이 새로 추가된 것을 보실 수가 있습니다.

이 Debug항목을 누른 다음에 Show JavaScript Console을 클릭하시면 JavaScript Error Log를 아주 쉽게 보실 수가 있습니다. 이 외에도 DOM Tree등 여러 기능들을 제공하고 있으니 참고하시면 좋을 것 같습니다.

출처 :

Apple Developer Center - How do I debug JavaScript in Safari

P.S How do I debug JavaScript in Safari에는 window.console을 이용하여서 JavaScript에러 이외에도 원하는 로그를 출력할 수 있는 방법이 소개되어 있으니 참고해보시는 것도 좋을 것 같습니다.

[Flash] Flash Versioning의 순서에 관한 의문?

Flash 컴포넌트를 웹 페이지에 포함시켜서 배포할 때, 버전체크 문제는 자주 발생하는 작업입니다.
서버단에서도 처리할 수도 있지만 클라이언트단에서 JavaScript로도 체크를 할 수 있습니다.

이러한 작업을 위해서 Adobe에서 공식적으로 제공하는 툴이 Flash Player Detection Kit입니다.
이전까지는 문제 없이 사용했습니다만, 오늘 의문이 생기는 사건이 한가지 발생했습니다.

이전까지의 사용방식이 Flash의 Major 버전과 Minor 버전을 체크하는 케이스였는데,
오늘 발생한 문제는 9.0.28.0 이상의 버전만 지원이 된다는 독특한 경우 때문에 발생하였는데요.

Major 버전은 9
Minor 버전은 0
그렇다면... 28과 0의 의미는 무엇일까?

가장 먼저 Adobe의 Developer Center를 살펴보았는데요. 다음과 같은 문서를 찾을 수 있었습니다.

문서에 따르면, 28은 release 버전을 의미하며, 0은 revision 버전을 의미하게 됩니다. 그러나, Flash Player Detection Kit의 코드 DetectFlashVer() 메소드를 보면 세번째가 <revision>이 됩니다.

versionArray[2]의 값이 versionRevision이 된 것을 확인할 수 있습니다. Forum이나 게시판을 뒤져보기는 했지만 답을 찾지 못해서 Adobe에 메일로 문의를 하기는 했습니다만... 영어 실력이 좋지 않은 관계로 답장이 올런지는 미지수네요 ^^;;;;

혹시 답을 아시는 분 있으신가요?

관련 자료 :

Adobe의 Building and Testing Components in Macromedia Flash
Adobe의 Flash Player Detection Kit

2007년 3월 21일 수요일

[JavaScript] Safari에서만 나는 에러

오늘 디버깅 작업을하고 있었는데, 특이한 문제가 Safari에서 발생했습니다.

이전에 php 페이지에서 사용되었던 testFunction 메소드를 Sample의 mtehod로 넣는 과정에서 function의 위치는 적절히 변경하였지만, function뒤의 testFunction을 삭제하지 않아서 발생한 버그입니다.

이러한 버그가 특이하게도 Firefox와 IE에서는 정상 동작을 하는게 문제였습니다.
제가 사용하는 JSEclipse에서도 에러표시가 나지는 않더군요. 그러나, Safari에서는 에러가 나더군요.

그것도, 위와 같은 내용이 js파일에 포함되어 있는 경우 해당하는 js파일 자체를 레퍼런스할 수 없다고 나와버리더군요. 그래서 메소드 하나하나를 alert으로 추적해야하는 암울한 작업을 수행해야 했습니다.

Safari 테스트를 하실 때, js파일이 정상적으로 script태그로 썼는데도 불구하고 레퍼런스할 수 없다고 나오신다면 위의 케이스를 참고하셔서 소스 파일을 확인해보시는게 좋을 것 같습니다. ^^

P.S.1 저같은 경우에는 JavaScript로 개발을 할 때, Firefox는 Firebug와 Web Developer를 사용하고, IE에서는 Developer Toolbar를 사용하고 있습니다. Webkit에서는 Drosera를 사용하고 있구요.

P.S.2 이외에도 몇가지 문제가 발생했었는데요. id가 중복되는 경우 Firefox와 IE에서 에러는 발생하지 않는데요. Safari에서는 id 중복이 발생하는 경우 DOM hierarchy에 대한 에러 메시지를 출력합니다.

Nate mall에서 쿠폰이 발급되었습니다.

2%.......

인터넷 쇼핑몰 최저가 쿠폰이 아닐런지 -_-;;;;;;;;

삼국전투기 2권을 구매했습니다.

삼국전투기 2
최훈 지음 / 길찾기
나의 점수 : ★★★★

최훈작가의 작품을 매우 좋아하는 팬으로서 삼국전투기 2권을 구매했습니다.
(네이버에서 매주 보기도 합니다만, 최훈작가님이 작품을 많이 내놓기 위해서는 금전적인 도움이 될 수 있으리라는 얄팍한 생각에 한권 질렀습니다. ^^)

1권과 마찬가지로 패러디소개와 만담이 추가되었구요. 아쉬운점은 1권의 퀄리티보다는 좀 떨어진다는 느낌이 드네요. 그래도, 3권을 기대합니다. ^^

P.S. : 그래도~ 1주에 한편만 올라오는 분위기를 봐서는 3권이 나올지 걱정이 많이 되네요.

2007년 3월 17일 토요일

미래 웹 기술포럼 참석 후기 [글로벌 웹 기술의 미래]

미래 웹 기술 포럼에서 주최한 '글로벌 웹 기술의 미래'라는 워크샵을 참석하고 왔습니다.
개인적으로 마지막 세션이었던 '글로벌 웹 기술과 한국'이라는 주제로한 패널토의는 재미있었던 것 같아서 어제 들으면서 요약한 내용을 올렸습니다. (재미가 없었다는 분도 있으셨지만요 ^^)

토론의 주제는 마인드 맵으로 각각의 세부토론 주제를 잡아서 진행하였습니다.
(좌장이셨던 전종홍 님께서 자료를 올려주신다고 하셨으나 블로그에 아직 올라오지 않은 관계로 자료는 없습니다. ^^;;)

아래의 내용을 보시기 전에 다음의 사항에 주의해 주세요.

여러 발표자 분의 의견을 옷장수라는 필터에 걸러진 내용을 보신다는 점에 유의해주세요.
따라서, 그 분들의 의견과 다를 수 있습니다. 또한, 제가 기록을 잘못했을 수도 있습니다. (잘못된 기록에 대해서 댓글을 달아주시면 수정하겠습니다. (__)

P.S.: 바쁜 직장생활 속에 참여하느라 중간에 졸았을 수도 있습니다. (^^;;;)

요약 내용 보기..

2007년 3월 13일 화요일

모듈 탭(Module Tabs ) 패턴

웹페이지를 만들다보면 탭이 들어가 있는 페이지를 볼 수가 있습니다.
내비게이션 탭(Navigation Tabs)하고는 다른 형태로 하나의 웹 페이지 내에서 사용되는 탭을 의미합니다.

그러면, 언제 모듈 탭 패턴을 사용할까요? (Use When):

컨텐츠들이 여러가지가 있으나 보여줄 공간이 한정되어 있을 때
각각의 컨텐츠들을 동시에 보여줄 필요가 없을 때
다른 페이지로의 이동없이 컨텐츠들을 이동하고 싶을 때
2~10가지의 카테고리 타이틀을 가지고 있을 때
카테고리 타이틀들이 상대적으로 짧고 예측가능할 때
현재 어떤 화면이 보여지고 있는지에 대해서 전달하는게 중요할 때
(It is important to communicate which content pane is currently being viewed)

그러면, 모듈 탭은 어떠한 기능들을 갖춰야할까요(Solution)?

쌓여진 컨텐츠들을 통제할 수 있는 한줄로 표현된 링크들이 있어야 합니다.
(카테고리 타이틀 링크들이 있어야 겠죠? ^^)
하나의 컨텐트에 대해서 두 줄 이상의 탭을 쌓지 않습니다.
(Navigation Tabs의 경우에는 두 줄 이상 쌓은 경우가 있죠. 아마존이 대표적이죠 ^^)
'|' 또는 '|'와 동일한 형태의 그래픽 이미지 등을 통하여 링크들을 분리해야 합니다.
(카테고리 타이틀과 현재 선택된 컨텐트를 보여주는 부분은 강조가 되어야 무엇이 선택되었는지가 구분이 되겠죠)
하나의 컨텐트에 대해서 하나의 탭만이 선택된 것처럼 보여져야 합니다.
선택되어 있는 탭에 대해서 배경을 칠하여 강조를 합니다.

(Yahoo! News의 경우 "Pointer"를 선택된 탭 아래에 두어서 강조를 하고 있습니다.)
컨텐트들과 컨텐트와 관련된 탭은 시각적으로 연결되어지거나 박스 형태로 감싸진 형태로 보여져야 합니다.
항상 한순간에는 한 컨텐트만 보여져야 합니다.

모듈 탭을 사용할 때 주의할 점은 어떠한 점이 있을까요?

한탭에서 다른 탭으로 클릭할 경우 동일 위치선상에 탭들이 위치해야 합니다.
새탭을 클릭할 때 전체 페이지를 다시 로딩해서는 안됩니다.
탭을 선택한 결과가 다른 탭의 컨텐트에 영향을 줘서는 안됩니다.

탭의 원리(Rationale)는 다음과 같습니다.

탭은 사용자들에게 문맥(또는 문장의 전후관계)을 제공합니다. 탭은 탭이 감싸고 있는 컨텐트들의 정보를 요약해서 대표함으로서 사용자가 어떠한 내용을 읽고 있는지에 대한 위치 정보를 제공해줍니다.
탭은 실세상의 메타포로 만들어졌습니다. 특히 탭을 선택하는 모습의 경우는 탭이 달려있는 책이나, 노트를 선택했을 때 선택한 쪽이 맨 앞에 오는 물리적 현상의 메타포를 사용하고 있습니다.
탭은 컨텐츠의 화면을 번갈아 볼 수 있는 내비게이션을 제공해줍니다.

사용자들이 탭(모듈 탭)을 편하게 사용하기 위한(Accesibility) 탭이 가져야할 특성은 다음과 같습니다.

카테고리 탭을 이동하기 위해서 Tab 키를 사용하여 이동할 수 있어야 합니다.
Enter키를 이용해서 포커스가되어 있는 탭을 선택할 수 있어야 합니다.
탭의 카테고리를 구성하고있는 element들의 title, alt속성에 선택되어 있음을 나타내는 'active'단어를 포함함으로서 활성화되어 있는 탭임을 비시각적인 방법으로도 보여줄 수 있어야 합니다.

출처 : Yahoo Design Pattern Library - Module Tabs
탭 이미지 출처 : Denn님의 Tabs

* Yahoo의 Design Pattern Library를 번역한 글입니다. 오역이나 잘못된 부분 있으면 얘기해주세요.
** Tab에 대한 여러 얘기도 환영합니다. ^^

2007년 3월 12일 월요일

로그인(Log-in| Sign-in) 패턴

웹사이트의 대부분은 로그인을 하는 폼이 존재합니다. 로그인 폼의 경우 4가지 요소들로 구성이 되는데요.

아이디를 입력받는 인풋 (Input type="text")
패스워드를 입력받는 인풋 (Input type="password")
로그인과 관련한 세부설정 체크박스 (input type="checkbox")
로그인버튼 (input type="button")

※ '패스워드를 잃어버린 경우' 또는 '도움말'이 아래에 들어갑니다.
※※ 국내 사이트의 경우 '보안접속' 항목이 하나 더 들어갑니다.

국내 사이트의 로그인 폼을 보게 되면 대부분이 다음과 같은 형태로 구성이 됩니다.

싸이 월드의 경우 가장 처음에 아이디 입력에 포커스가 가게 됩니다. 그리고 탭을 누르게 되면 패스워드 입력, 로그인 버튼, 아이디 저장, 보안접속 순으로 진행되게 되죠.

사용자가 각 input을 마우스로 이동한다고 가정을 해봅니다.
(일반적으로 사이트가 로딩하게 되면 아이디를 입력하는 인풋에 포커스가 가기 때문에 이메일을 클릭할 필요는 없습니다. 따라서 이메일 클릭은 생략하겠습니다.)

아이디를 입력합니다.
그리고, 비밀번호를 클릭한 후 패스워드를 입력합니다. (입력한 후 엔터를 눌러서 바로 로그인할 수도 있겠죠.)
만약, 이메일 저장, 보안 접속을 설정하고 싶으면 마우스로 해당 항목을 클릭합니다.
마지막으로, 로그인 버튼을 누르고 로그인을 합니다.

자, 이제 input을 키보드만으로 이동한다고 가정을 해보겠습니다.

아이디를 입력합니다.
탭을 눌러서 비밀번호로 이동한 후 패스워드를 입력합니다.
탭을 눌러서 로그인버튼을 눌러서 로그인합니다.

여기서 문제가 발생합니다. 사용자가 이메일 저장, 보안 접속을 하려고하면 문제가 발생하게 됩니다. 탭이동에 대한 고려가 없었다고 봐야겠죠.

네이버의 경우에는 패스워드 입력 다음에, 아이디 저장, 보안접속 순으로 이동하기는 합니다만, 로그인 버튼에 포커스가 가지 않기 때문에 로그인을 하기 위해서는 결구 마우스 클릭이 발생하게 되죠.

다음의 경우에는 'ID저장'으로 가는 포커스가 포함되어 있지 않습니다. (보안접속 동일)

엠파스의 경우에도 '아이디 기억', '보안접속'을 클릭하기 위해서는 마우스로 설정해주는 동작이 더 필요합니다.

그러면, 외국 사이트에서는 어떻게 처리하는지 잠시 살펴보겠습니다.
야후의 로그인 창을 들어가게 되면 아래와 같은 로그인 화면이 나옵니다. (좀 더 심플한 케이스도 있습니다만, 하고 싶은 말을 하기 위해서 큰놈으로 골라 봤습니다.^^)

먼 저, 사용자가 아이디, 패스워드를 입력하고, 탭을 누르면 아이디 저장을 선택할 수 있게 됩니다. 그리고 다시 탭을 누르면 Sign In 버튼을 누를 수 있게 되어 있구요. 만약, 아이디, 패스워드를 모르면 탭 이동만으로도 아이디/패스워드 찾기로 이동하거나, 도움말을 클릭할 수 있게 됩니다.

웹페이지를 이동하는 방법 중 하나는 마우스고 하나는 키보드입니다.
마우스가 많은 부분을 차지하지만, 키보드만을 사용하는 사용자들을 위해서 Tab키만으로 이동이 가능하게 하는 것은 중요한 부분이겠죠.

언제 사용할 것인가? (Use When?)

사용자의 로그인 입력을 받아야 하는 경우(Tab키로 이동하는 방법을 지원하고 싶을 때)

해결책 (Solution)

아이디/패스워드/로그인 설정/로그인 버튼 순으로 포커스가 이동할 수 있도록 배치합니다.
필요시에는 tab index를 사용하여 순서를 변경합니다.

P.S. 패턴이라고 부르기에는 많이 미흡합니다만, 약간의 고려만으로도 사용자 편의성을 얻을 수 있지 않을까요? ^^

2007년 3월 7일 수요일

한달간 문 닫앗던 블로그 다시 열었습니다.

개인적인 문제로 인하여 한동안 문 닫았던 블로그를 다시 엽니다. (__)