오픈비 : 삽질은없다

검색결과

검색결과는 사용자의 질의에 대한 검색엔진의 결과이다. 보통 랭킹알고리즘의 적용결과를 반영하여 순서대로 보여주고, 검색대상이나 형태에 따라 탭이나 그룹핑하여 보여주는, 요즘 말하는 통합검색 또는 Universal Search라고 하는 것이 검색결과의 일반적인 모습이다.

사용자들은 질의어를 입력하기 전 제공하는 다양한 옵션에 비하여 검색결과를 어떤 순서로 어떻게 보여주는가에 따라서 검색엔진이 좋다 나쁘다를 말하는 경우가 많다.

오늘 이야기 하고 싶은 것은 , 검색결과의 Visualization에 대한 이야기이다.


AMAZNODE : Amazon related Product Search


http://amaznode.fladdict.net/

이 검색서비스는 검색결과가 플래쉬로 만들었다. 왜 이 검색을 Related Product Search라고 하냐 하면, "customers who bought this item also bought" 짧은 영어실력으로 풀어보면, '이 책을 사신 고객이 사신 책' 즉, 내가 찾는 책을 산 사람과 관련이 있는 플래쉬로 선으로 연결해서 보여주는데, 책 한권 한권이 뿅뿅 올라온다.

검색결과의 연관성을 비주얼하게 보여준다는 아이디어는 매우 독창적이기는 하지만, 사실 연관성이 선으로만 연결되는 직관성이 좀 떨어진다.


Blackdogair.com

 www.blackdogair.com

위에서 소개한 Amaznode 검색서비스와 이 서비스 모두 일종의 매쉬업 검색서비스라고 불러야 할 것 같다. 이 서비스 역시 아마존의 내가 산 것을 산 사람이 산 것에 대한 연관관계를 비주얼하게 보여준다.

하지만, Amaznode 서비스에 비해서 훨씬 직관적이다.


Vivisimo

http://www.vivisimo.com

한때 검색업계의 루키로 한참 각광을 받던 서비스이다. 이 서비스는 소위 검색결과의 Clustering이다. 검색결과를 분석해서 몇가지 주제별로 Clustering한다는 것이 이 서비스의 장점이다.

Clustering이라는게 개념은 쉬어보이지만, 생각보다 복잡한 기술이 필요하고, 아직 국내에서도 상용화되기에는 기술의 완성도가 많이 떨어진다고 한다.

개인적으로 검색결과의 비주얼은 결국 이 Clustering이 기반이 되어야 하지 않나 생각된다. 위에서 언급한 2개의 서비스는 '이 물건을 산 사람이 산 다른 물건'이라는 것은 그룹핑이 되고 있으니..


Kartoo.com

http://kartoo.com

비주얼 메타 서치엔진이라고 말하는 검색서비스이다. 정말 검색엔진 결과의 최고봉이 아닌가 생각된다. 위에서 언급한 검색결과의 주제별 Clustering이 최적화되어 플래쉬로 이미지로 구현되고 있다.

예를 들어 autos.yahoo.com은 담고 있는 컨텐츠의 주제를 보험, 회사, 리뷰, 프라이스 등이 포함되어 있다고 비주얼하게 보여주면서 특정 주제를 선택하면, 주제와 관련된 사이트들이 비주얼하게 선으로 연결되어 보여진다.

국내의 온톨로지 및 검색엔진 회사인 솔트룩스(소금과 빛인가..)에서 Kartoo사의 시각화툴인 Visu를 판매하고 있는데, 검색결과 뿐만 아니라 각종 컨텐츠의 비주얼하게 보여주는데 큰 효과가 있어보인다.

Web 2.0과 Ajax
 

 

Web 2.0을 기술적으로 구현하는데 있어서 가장 많이 눈에 띄는 단어는 Ajax이다. Ajax로 개발 했을 경우 궁극적인 모습은 어떠한 클라이언트 사용자의 브라우저, 운영체제, 디바이스 등에 상관없이 웹상에서 Desktop Application 수준의 application을 이용하는 것이라고 할 수 있다. 이미 Google Map, Yahoo Map 등의 Ajax 레퍼런스 사이트들은 웹 브라우저에서 Desktop Application 수준의 화면과 기능을 구현할 수 있다는 여지를 충분히 보여줬다.

 

Ajax로 구현한 화면을 RIA(Rich Internet Application)라고 달리 말할 수 있는데, 이미 2000년부터 이러한 Desktop Application 수준의 UI를 구현하기 위한 많은 노력이 있어왔고, 현재 X-internet 솔루션이라는 이름으로 여러 벤더에서 제품을 출시했고 시장에서 이미 도입된 상태이다. 그 중 가장 안정적이고 화려한 UI를 자랑하는 제품이 이번에 소개하고자 하는 Adobe Flex이고 Flex의 특징이 무엇이며, Flex로 Web 2.0을 어떻게 구현하였는가도 알아보도록 하겠다.

 

Ajax와 Flex

 

 

Web 2.0에서 중요한 기술적 이슈 중 하나가 Rich Client Application이라는 개념일 것이다. 기존의 Web Application의 편리한 배포, 관리, 저렴한 유지 비용 등의 장점과 Desktop Application 수준의 사용자 편의성, 효율적인 데이터 통신, 견고한 아키텍처 구현 등의 장점을 합친 것이 RIA이라 할 수 있고 Web 2.0을 구현하고 UI에 RIA를 적용하기 위해 Google과 Yahoo에서 도입한 기술이 Ajax와 Flex 등이 있다.

 

Ajax는 차세대 웹 어플리케이션을 위한 최선의 대책이 될 수도 있지만, 아직까지 장점만큼 단점도 많이 존재하는 대안이라 볼 수 있다. Javascript + XML이라는 태생적 한계 때문에 생기는 Javascript가 가지는 언어적 한계와 구현의 복잡성, 웹 브라우저별로 상이한 DOM 핸들링 및 메모리 처리방법으로 인한 호환성 문제, Back/Forward, Bookmark등의 사용자 편의성 문제, Ajax를 이해한 제대로 된 기획안 부재와 Flash 수준의 화려한 UI API 부재 등의 단점으로 Ajax로 선뜻 개발을 주도하기가 쉽지 않은 현실이다. 그래서 Ajax의 여러 가지 문제점을 극복하고 Flash 수준의 화면을 보여주는 RIA를 만들어 Web 2.0을 실현하는 최선의 대안이 Flex 이다.

 

Flex 란?

 

Flex는 앞서 말했듯이 RIA를 구축하기 위한 솔루션으로써 정식 명칭은 Flex Presentation Server이다. 기존의 정적이고 수동적인 웹 환경에서 보다 능동적이고 개방적인 WEB 2.0 기술 구현을 쉽게 해주는 스크립트 언어이다. Flex는 데스크탑의 풍부함과 웹의 광범위함을 접목시킨 리치 인터넷 애플리케이션(Rich Internet Applications)의 UI 개발을 태그 및 스크립트로써 구현할 수 있도록 해주는 최적의 솔루션이다.

 

특히 서버 클라이언트 간에 자유롭게 커뮤니케이션 할 수 있는 개발환경을 통해 XML로써 필요한 데이터만을 적시에 서버로부터 가져오고, 특정 클라이언트가 새로운 데이터를 다른 클라이언트와도 손쉽게 공유함으로써 성능 개선뿐만 아니라 양방향 커뮤니케이션이 주는 WEB 2.0 서비스 개발환경이 되는 것이다.

Flex는 최근 출시된 Flash player 8이 주는 우수한 성능과 파일 접근을 비롯한 자바스크립트 인터페이스 API 등의 다양한 API를 제공함으로써 웹 브라우저 안에서 해결하고 있다. 또한 자바스크립트, AJAX 및 ActiveX와 연동하는 인터페이스 API를 제공하고, 웹 서비스, 자바 빈즈 등의 비즈니스 객체들을 호출할 수 있는 서비스를 제공하여 애플리케이션과 연동을 가능하게 한다.

 

Flex는 Flash 기술로부터 탄생했다. 그래서 Flash나 Flex로 구축된 사이트는 비슷한 UI를 가진다. Flex는 Flash의 컴포넌트들을 XML 태그로 표현할 수 있도록 컴포넌트화 하였다. Flash는 Flash8로써 각종 도형과 컴포넌트들을 마우스로써 디자인하는 반면, Flex는 그런 Flash 컴포넌트들을 XML 태그 스크립트를 이용하여 코딩한다.

 

Flex, 어떤 기술이 적용되어 있나?

 

개발언어 측면에서 플렉스는 XML, ECMAScript, CSS, UTF-8 기술요소를 사용한다.

플렉스의 mxml은 'mx'라는 XML 네임스페이스를 사용하며 XML 문법을 따르며, ECMAScript는 플렉스 액션스크립트가 준수하는 표준으로 자바스크립트와 유사하다. 또한 MXML 스타일은 CSS 문법을 지원하고, MXML 파일은 UTF-8로 작성 및 저장되어 서버에서 처리된다.

서버 서비스 측면에서 DOM 레벨 3 이벤트 모델은 플렉스의 이벤트 모델로 사용되며 DOM 트리 구조를 통해 이벤트를 전달한다. 플렉스 애플리케이션은 HTTP 통신뿐 아니라 XML 통신 프로토콜인 SOAP 메시지로 데이터를 송수신할 수 있다. 이외에 플렉스는 자바 애플리케이션 서버에서 작동되며 플렉스에서 자바빈즈 컴포넌트의 메쏘드를 호출하여 결과를 받을 수 가 있다.

Flex 서버는 어떻게 구성되나?

 

Flex의 구성요소는 모두 국제 표준에 기반한 것으로 ActionScript(Javascript), MXML(XML), DOM3 등의 표준 위에 Adobe의 API와 클래스 라이브러리가 추가된 형태이다.  Javascript의 언어적인 단점을 보안한 ActionScript는 강력한 객체지향 언어로 거듭났을 뿐만 아니라, Flash의 기존 버전에서 검증되었던 강력한 라이브러리들을 Flash보다 훨씬 편리하고 쉽게 이용할 수 있는 길을 제공해 준다.

 

MXML은 요즘 웹 어플리케이션 개발 방법론에 부합하게 XML 태그 형식으로 UI를 구성하게 해주는 훌륭한 도구라 할 수 있다. 또한 Flex는 Flash Player가 동작한다면 운영체제, 브라우저, 디바이스를 가리지 않고 실행되 는 완벽한 유비쿼터스 솔루션이라고 할 수 있다. 즉, 한번의 개발로 ActiveX나 JVM등에 관계없이 IE, Firefox, PDA, 핸드폰, 위성 단말기 등 어디에서든지 인터넷으로 같은 어플리케이션을 공유할 수 있게 해주는 미래지향적인 환경을 제공한다.

Flex 도입의 궁극적인 목표는 화려한 UI와 다양한 기능을 가진 Desktop Application수준의 Web Application을 만들어 내는 것에 있다. 이미 많은 다국적 기업과 국내 대기업에서 Flex를 도입해서 기존에 Clinet/Server 환경 기반에서 사용해 왔던 Install 기반의 Desktop Application을 웹으로 전환을 하고, 또 거기에 따른 많은 비용 절감과 높은 사용자 만족도를 가져올 수 있게 되었다

 

 

** Flex 서버 아키텍쳐

 

 

 

Flex는 어떻게 구동되나?

 

사용자가 플렉스로 구현된 사이트로 접속하면 웹애플리케이션 서버에 설치된 플렉스 서버는 MXML 코드를 SWF(플래시 실행파일)로 컴파일해서 사용자PC에 전송되어 플래시플레이어가 이를 보여준다.

사용자의 플래시플레이어에서 구동되기때문에 사용자는 브라우저에 상관없이 동일한 화면을 보게됩니다. 아래는 플렉시 구동절차에 대해 간략히 표현된 그림이다.

 

 

Flex로 구축하였을 때의 장점은?

 

Flex를 통한 Web 2.0 구현시 장점은 사용자 측면과 개발자 측면에서 살펴볼 수 있다.

사용자 측면에서 플렉스는 기본적으로 제공하는 컴포넌트 외에 플래시 컴포넌트 및 사용자 정의 컴포넌트가 있어 사용자에게 편리한 유저인터페이스를 제공할 뿐만 아니라, 플래시플레이어에서 작동하므로 어떤 환경의 클라이언트더라도 동일한 화면을 볼 수가 있다.

플렉스는 한번 로딩되면 그 다음부터는 서버로부터 실행코드를 받을 필요가 없으므로 실행속도가 빠르며 서버에 부하를 적게 준다. 모든 플렉스 컴포넌트는 화면크기에 맞게 자동으로 사이즈를 조절하므로 해상도에 따라 애플리케이션을 따로 개발할 필요가 없다.

개발자 측면에서 플렉스는 표준을 준수하는 XML태그(mxml)과 액션스크립트로 코딩되므로 html 코딩을 이해하는 수준정도면 쉽게 배울 수 있다. 다양한 유저 인터페이스를 기본 컴포넌트로 제공하므로 개발자의 코딩량이 줄어들어 개발속도를 향상할 수 있고, 다양한 방법으로 컴포넌트를 만들 수 있어 코드재사용성이 높아 개발속도를 향상할 수 있다. 기존 시스템 및 다른 애플리케이션과 연동할 수 있는 다양한 방법을 제공한다.

 

맺음말

 

 

Web 2.0과 Flex에 대해 간략하게 알아보았다. 사실 Web 2.0을 설명하는 부분이 너무 빈약하고 Ajax를 너무 비판적으로 설명했지만, Ajax는 단점보다 장점을 많이 이용해야 하는 것이 바람직한 것이고, 단지 Flex는 그러한 단점까지도 극복하게 해준다는 점을 말씀 드리고 싶다.

 

Web as Platform, 사용자 중심/참여, 개방성, Simple&Lightweight, Decentralized, Long Tail, Blog, RSS, tag, Mashup, Internet Clipboard, 개발자 중심 생태계 등 Web 2.0을 설명하기 위해 담고 싶은 말이 너무나도 많지만 간단히 Adobe Flex를 소개하는 자리인지라 태깅정도의 언급만 하고 유저들이 직접 찾아보는 수고를 기대하고 싶다.

 

 

 

 

 

 

플랙스2 의 기본 사용법

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part1_GetStarted.html

 

플랙스2 유저 가이드

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part6_Using_FB.html

 

플랙스2 래퍼런스

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/langref/index.html

 

플랙스2 개발가이드

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part2_DevApps.html

 

플랙스2 컴퍼넌트의 작성과 확장

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part3_CreateComps.html

 

플랙스2 어플리케이션의 구축과 데프로이

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part7_Build_Deploy.html

 

Flex Data Service 2 to Java

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/fds2javadoc/

 

액션스크립트 3.0

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part5_ProgAS.html

 

액션스크립트 2.0 -> 3.0 마이그래이션

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/langref/migration.html

 

웹표준 3종 세트

http://channy.creation.net/blog/?p=283

2. 접근성 향상 적용 과제

1. 웹 표준 준수
2. 구조,표현,행동 분리
3. 최소한의 디버깅을 거쳐라.
4. 효율적인 웹 개발 방법론을 가져라.
5. 의미에 맞는 HTML 태그 사용 (가독성)
6. 올바른 표(table) 사용
7. 대체 수단 제공 (이미지,플래시,동영상,음성)
8. 반복 네비게이션 링크
9. 키보드로만 서비스 이용 가능
10. 독립적인 링크 텍스트
11. 웹 문서에는 독립적인 제목을 붙인다
12. 양식 컨트롤과 양식 이름표를 명확히 짝짓는다.

---

2.6 올바른 표(table) 사용

2.6.1 리스트형 표 사용법

HTML 표(table) 모델은 제작자에게 데이터를 줄(low)과 컬럼(column)의 셀(cell)들에, 텍스트, 양식화 된 텍스트, 이미지, 연결, 폼(form), 폼 휠드(field), 다른 표(table), 등으로, 정돈 할 수 있게 한다.

• 테이블은 레이아웃이 아닌 본래 목적에 맞게 표로만 사용한다.
• summary,Caption에 표의 목적을 간단하게 기술하는 제목을 갖는다.
• 제목은 th 에 내용은 td 에 넣는다.
• 리스트형 표의 th 에는 scope="col" 을 넣는다.

<table class="list" width="100%" summary="표의 목적을 간단하게 기술하는 제목"> <caption>표의 목적을 간단하게 기술하는 제목</caption> <tr> <th scope="col">제목</th> <th scope="col">제목</th> <th scope="col"><a href="#">제목</a></th> </tr> <tr> <td>내용</td> <td><a href="#">긴 내용내용내용내용내용내용내용 내용내용내용내용내용내용내용내용내용</a></td> <td>내용</td> </tr> <tr> <td>내용</td> <td><a href="#">긴 내용내용내용내용내용내용내용 내용내용내용내용내용내용내용내용내용</a></td> <td> </td> </tr> </table>

2.6.2 Table layout vs CSS layout

Table layout

장점

FrontPage 나 Dreamwever 같은 위지윅(WISIWYG) 에디터에서 테이블로 개발하기가 매우 쉽다.

단점

표현데이타와 컨텐츠의 혼용 (페이지 크기를 불필요하게 증가)

사이트 재디자인시 많은 작업과 비용을 유발

사이트 전체의 일관성을 유지하는데 매우 힘들고 과도한 비용을 발생시킴

장애인,핸드폰,PDA..등에서 접근성을 떨어뜨린다.

프로그램에서 데이터를 알기 힘들고, pc이외의 기계에서 렌더의 어려움이있다.

내부 Td안의 데이터가 모두 로드 되기 전까지 전체를 표시하지 않아 속도가 느리다

CSS layout

장점

효율적인 마크업

페이지 용량감소

유지보수 편리 비용절감

이해하기 쉬운 구조

메인 컨텐츠를 먼저 보여주고 그래픽을 나중에 로드할 수 있게 한다.

HTML/텍스트 비율을 낮게 유지함으로써 로딩 시간을 감소시킨다.

리퀴드 디자인을 추구함으로써 사용성을 증가시킨다.

포지셔닝에 있어 극단적인 유연성을 가능하게 한다.

단점

어렵고 구현하는데 시간이 많이 소요

---

2.7 대체 수단 제공 (이미지,플래시,동영상,음성)

Flash

플러그인을 사용하는 경우 대체 콘텐츠를 제공해야 한다.

<!-- 플래시 플러그인 --> <object data="hello.swf" type="application/x-shockwave-flash"> <!-- PNG 이미지 --> <object data="hello.png" type="images/png"> <!-- GIF 이미지 --> <object data="hello.gif" type="images/gif"> <!-- 일반 text --> <p>Hello!</p> </object> </object> </object>

image

Alt, title, longdesc

<img src="images.gif" alt="[Description]“ longdesc="imgdesc_a.html" />

iframe

title

<iframe title=“꼬리말” id="commentFrame" src=“cmt.html" width="100%" height="100" scrolling="no" frameborder="0"></iframe>

frame

title,noframes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Daum UI Style Guidline </title> <link rel="SHORTCUT ICON" href="http://guideline.hosts.daum.net/uidev2006/file/favicon.ico"> <link rel="stylesheet" href="common.css" type="text/css" > </head> <frameset rows="30,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame src="frameup.html" name="topFrame" scrolling="NO" noresize title=“로고”> <frameset cols="160,*" frameborder="NO" border="0" framespacing="0" rows="*"> <frame src="menu.html" name="left" noresize scrolling="no" border="0" title=“Daum UI 개발 가이드라인 메뉴”> <frame src="top.html" name="main" scrolling="yes" border="0“ title=“ 업데이트 소식” > </frameset> </frameset> <noframes> <body> <P>이 프레임세트(frameset)는 다음 문서들을 포함한다.</p> <ul> <li><a href="menu.html">Daum UI 개발 가이드라인 메뉴</a></li> <li><a href="svc.html">업데이트 소식</a></li> </ul> </body> </noframes> </html>

동영상

caption 지원

---

2.8 반복 네비게이션 링크

숨은 Text 링크를 사용하라

웹 콘텐츠는 반복적인 네비게이션 링크(repetitive navigation link)를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.

<div id=“skiptocontent"> <ul> <li><a href="#cH_logo" onclick="skipid('cH_logo')" onkeypress="skipid('cH_logo')" >Global 메뉴로 바로가기</a></li> <li><a href="#left" onclick="skipid('left')" onkeypress="skipid('left')">왼쪽 메뉴로 바로가기</a></li> <li><a href="#wrap_content" onclick="skipid('wrap_content')" onkeypress="skipid('wrap_content')">콘텐츠로 바로가기</a></li> <li><a href="#search_euckr" onclick="skipid('search_euckr')" onkeypress="skipid('search_euckr')">카페검색창으로 바로가기</a></li> <li><a href="#footer" onclick="skipid('footer')" onkeypress="skipid('footer')" >copyright 바로가기</a></li> </ul> </div>

---

2.9 키보드로만 서비스 이용 가능

2.9.1 순서에 맞게 구조화

보통 마크업 구조상으로 보면 아레와 같이 분리되어 있어 텝메뉴 순서상으로도 카페>블로그>플래닛>포커스>랭킹... 순으로 되어 포커스가 카페 depth 안에 포함된 카테고리인지 인식 할 수가 없게 된다..

• 카페
• 블로그
• 플래닛

• 포커스
• 랭킹
• 서포터즈
• 공식커뮤니티

아레와 같이 순서에 맞게 구조화 되면 올바르게 표현할수 있다

• 카페
  • 포커스
  • 랭킹
  • 서포터즈
  • 공식커뮤니티
• 블로그
• 플래닛

예제) 순서에 맞게 구조화된 문서

<div id="gnbTabNav" class="home"> <ul id="gnbList"> <li id="home"><a href="#" title="동영상 홈" class="menu">동영상 홈</a> <ul> <li class="sub"><a href="#">동영상 올리기</a></li> <li class="on"><a href="#"><b>MY 동영상</b></a></li> <li><a href="#">MY 동영상 댓글 모아보기</a></li> </ul> </li> <li id="new"><a href="#" title="NEW 동영상" class="menu">NEW 동영상</a></li> <li id="popular"><a href="#" title="뜨는 동영상" class="menu">뜨는 동영상</a></li> <li id="channel"><a href="#" title="채널" class="menu">채널</a></li> <li id="ranking"><a href="#" title="동영상 랭킹" class="menu">동영상 랭킹</a></li> <li id="producer"><a href="#" title="동영상 PD" class="menu">동영상 PD</a></li> <li id="event"><a href="#" title="이벤트" class="menu">이벤트</a></li> <li id="pie"><a href="#" title="파이" class="menu">파이</a></li> </ul> </div>

2.9.2 마우스와 키보드 이벤트 처리기 대응

이벤트 처리기가 장치 독립적인지 확인하십시오. 이 이벤트 처리기는 필수적인 정보나 이 페이지를 사용하는 데 필요합니다. 이벤트 처리기를 "onfocus", "onblur" 및 "onselect"와 같은 장치 독립적인 처리기로 제한할 것을 고려하십시오. 장치 독립적인 특성을 사용해야 하는 경우 키보드 방식을 제공하십시오. 예를 들어, "onmousedown"의 경우 "onkeydown"도 지정하십시오. 마우스 좌표에 의존하는 이벤트 처리기는 장치가 독립적이지 않으므로 사용할 수 없습니다.

마우스와 키보드 이벤트 처리기 대응표

마우스	키보드
onmousedown	onkeydown
onmouseup	onkeyup
onclick	onkeypress
onmouseover	onfocus
onmouseout	onblur

각각의 메뉴 링크에 onMouseOut, onMouseOver 이벤트만을 사용하여 키보드를 이용한 접근은 제한됩니다.
onFocus, onBlur를 추가하여 작성하면 이론적으로 최소의 키보드 접근이 가능하게 됩니다.
ondblclick, onmousemove 등에 상응하는 키보드 이벤트 처리기는 HTML 4.0 현재 존재하지 않으므로 그러한 이벤트 처리기는 되도록 사용을 피하는 것이 좋습니다.

<a href=“#" onmouseout=“view()“ onblur=“view()“ onmouseover=“hide()” onfocus=“hide()” >...

예제) 키보드로 텝 메뉴 컨텐츠 구현

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <meta http-equiv="imagetoolbar" content="no"> <title>Youth Voice - 퍼져라, 대한민국 젊은 목소리</title> <script type="text/javascript" src="http://image.youthvoice.daum.net/yv2/js/common.js"></script> <link rel="stylesheet" type="text/css" href="http://image.youthvoice.daum.net/yv2/css/common.css"> <style type="text/css"> /* common */ body {margin:0;padding:0;text-align:center;} h1,h2,h3,h4,h5 {padding:0;margin:0;} hr {display: none;} textarea,input {font-size:12px;} img {vertical-align:middle;} dl,dt,dd {margin:0;padding:0;} .var {font-family:dotum;font-weight:normal;font-size:11px;color:#ccc;} #yv_mediazone {text-align:left;position:relative;width:600px;height:170px;margin-top:30px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_bg2.gif) 10px 25px no-repeat;} #yv_mediazone h3 {padding-left:7px;height:49px;} #yv_mediazone h3 a {display:block;width:149px;height:15px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tt_04.gif) no-repeat;font-size:1px;line-height:0%;text-indent:-1000em;overflow:hidden;} #yv_mediazone h4 {border:none;padding:0;margin:0;} #yv_mediazone h4 a {position:absolute;top:25px;left:7px;display:block;text-align:center;width:65px;padding:8px 0 2px 0;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_gr_bl.gif) no-repeat #fff;font-weight:normal;} #yv_mediazone h4.on a {width:65px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_wh_bl.gif) left 1px no-repeat;font-weight:bold;padding:8px 0 3px 0;} #yv_mediazone h4#y_1 a {left:10px;} #yv_mediazone h4#y_2 a {left:80px;} #yv_mediazone h4#y_3 a {left:146px;} #yv_mediazone h4#y_4 a {left:212px;} #yv_mediazone ul {clear:left;padding:14px 0 0 23px;} #yv_mediazone li {float:left;padding:0 10px;} #yv_mediazone li p {padding-top:7px;} #yv_mediazone li p a {font-family:dotum;font-size:11px;color:#666;} </style> <script type="text/javascript"> <!-- function viewYear(tab){ var stYear=document.getElementById("yv_mediazone").getElementsByTagName("ul"); for(i=0;i<stYear.length;i++){ var sty = stYear[i]; sty.style.display="none"; } var stYearH4=document.getElementById("yv_mediazone").getElementsByTagName("h4"); for(i=0;i<stYearH4.length;i++){ var sth = stYearH4[i]; sth.className=""; } document.getElementById('y_'+tab+'_list').style.display="block"; document.getElementById('y_'+tab).className="on"; } --> </script> </head> <body> <div id="yv_mediazone"> <h3><a href="#" title="유스크리에이터 미디어존">유스크리에이터 미디어존</a></h3> <h4 id="y_1" class="on"><a href="javascript:;" onmouseover="viewYear('1')" onfocus="viewYear('1')">2005년</a></h4> <ul id="y_1_list"> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">2005..억울함없는 </a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> </ul> <h4 id="y_2"><a href="javascript:;" onmouseover="viewYear('2')" onfocus="viewYear('2')">2004년</a></h4> <ul id="y_2_list" style="display:none;"> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">2004. 억울함없는 </a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> </ul> <h4 id="y_3"><a href="javascript:;" onmouseover="viewYear('3')" onfocus="viewYear('3')">2003년</a></h4> <ul id="y_3_list" style="display:none;"> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">2003..억울함없는 </a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt="" /></a> <p><a href="#">억울함없는 사회를..</a></p> </li> </ul> <h4 id="y_4"><a href="javascript:;" onmouseover="viewYear('4')" onfocus="viewYear('4')">2002년</a></h4> <ul id="y_4_list" style="display:none;"> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt=""/></a> <p><a href="#">2002..억울함없는 </a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt=""/></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt=""/></a> <p><a href="#">억울함없는 사회를..</a></p> </li> <li> <a href="#"><img src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif" width="104" height="77" alt=""/></a> <p><a href="#">억울함없는 사회를..</a></p> </li> </ul> </div> </body> </html>

---

2.10 독립적인 링크 텍스트

2.10.1 링크 텍스트 자체로서 독립적인 의미를 갖는다.

시각 장애인의 경우, 홈페이지를 순차적으로 읽어 주는 기계를 통해서 탐색하는데, 빠른 탐색을 위해 키보드의 Tab key로 링크에서 다음 링크로 건너 띄는 경우가 많이 있다. 그럴 때에 음성으로 그 링크의 성질을 설명해주는데 ‘여기’라고 나오면 도대체 그 링크가 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 수정해야 한다.

좋지 않은 예

Abc 제품에 대한 자세한 설명을 보리면 <a href="#">여기</a>를 누르십시오.

좋은 예

자세한 내용이 궁금하신 분은 <a href="#"> Abc 제품에 제품에 대한 셜명서</a>를 보십시오

2.10.2 반복적인 이미지 링크도 구별되는 독립적인 의미를 갖는다.

"더보기", "자세히보기" 등 각 콘텐츠에 반복적으로 열람되는 이미지 링크 사용시 음성으로 링크가 구체적으로 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 "000 더보기","000 자세히 보기"로 수정해야 한다.

---

2.11 웹 문서에는 독립적인 제목을 붙인다

웹문서 제목

일반인들의 사용성 측면, 검색 엔진의 효율성 측면에서 제목은 매우 중요하다. 또, 시각 장애인에게는 제목이 여러 문서를 구분하고, 현재 위치를 파악하고 앞으로 계속 탐색할 것인지 말 것인지 결정하는 가장 중요한 단서가 된다.
따라서 제목은 해당 문서의 내용을 대표할 수 있도록 정확하고 간결하게 작성해야 한다.

<title> Daum 서비스명 - 서브 서비스명 : 문서제목 </title>

head테그안에서 title 선언시 주의사항

utf-8 인코딩 문서에서 head테그 맨 상단에 한글이 포함된 title 오면 IE 일부에서 문서가 하얗게 보여지는 현상이 일어난다.
따라서 head테그 맨 상단에 title선언보다 meta테그 인코딩 먼저와야 한다.

좋지 않은 예

<head> <title> Daum tv팟 - 베스트 동영상 </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

좋은 예

<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <title> Daum tv팟 - 베스트 동영상 </title>

---

2.12 양식 컨트롤과 양식 이름표

양식 컨트롤과 양식 이름표를 명확히 짝짓는다

좋지 않은 예

<input type="radio" name="sex" value="M" checked>남 <input type="radio" name="sex" value="F" >여

좋은 예

<input type="radio" id="sex_m" name="sex" value="m" checked="checked" /><label for="sex_m">남</label> <input type="radio" id="sex_f" name="sex" value="f" /><label for=“sex_f”>여</label>

---

참고 출처:

• 실전 웹 표준 가이드 : 한국소프트웨어진흥원
• 소수 사용자를 위한 웹 접근성 : lg전자 global elearning group, 신승식
• 공평한 인터넷 환경 제공을 위한 창의적 UI 발상 프로젝트 : Daum 커뮤니케이션 커뮤니티 UI팀 조제희
• 웹 접근성 이해 : 한국정보문화 진흥원 접근기술 연구팀 현준호
• http://www.bb00dd.com/blog/entry/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-%ED%96%A5%EC%83%81%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9B%B9-%ED%91%9C%EC%A4%80%ED%99%94-%EA%B0%80%EC%9D%B4%EB%93%9C-1
  

웹 표준화 기구인 W3C(World Wide Web Consortium)가 다중 소스로부터의 데이터 수집과 함께 웹 2.0 애플리케이션 개발 가속화를 위한 목적으로 만들어진 질의 언어인 스파클(Sparql)을 발표했다.

스파클(Sparql)은 데이터 검색에 발전된 형식의 질의어를 이용한다. 그래서 새로운 데이터 소스로의 확장 및 신규 애플리케이션으로의 이식이 보다 용이하다. W3C 소장이자 WWW를 만든 팀 버너스-리는 "스파클 없이 시만텍 웹(the Semantic Web)을 이용하려는 것은 SQL 없이 관계형 데이터베이스를 이용하려는 것과 마찬가지"라고 말했다.

그에 따르면 스파클에 의해 비단 데이터베이스뿐만 아니라 다른 여러 데이터 소스에 대해서도 정보 질의가 가능하다.

HP의 SIM(Software Information Management) 사업부의 진-루크 쉐털레인 최고 기술 임원은 HP의 "제나 오픈소스 시만텍 웹 프레임워크(Jena open-source Semantic Web framework)"를 위한 스파클 데이터베이스 시스템인 SBD를 발표하면서 "스파클은 통합형 정보 액세스에 필수적 요소"라고 말했다.

이어 "HP고객들은 시맨틱 웹 기술에 의해 정보 활용도 제고라는 혜택을 누릴 수 있을 것"이라고 덧붙였다.

현재 스파클의 구현물에는 SDB를 포함 14가지가 알려져 있는데 이는 W3C의 데이터 액세스 워킹 그룹(DAWG)에서 유래한 것들이다. 이를 벌써부터 이용하고 있는 개발회사들도 있다.

예컨대 로마 소재 개발회사인 에이시맨틱스(Asemantics)는 유럽항공우주국을 위한 위성 이미지 검색 엔진 구축에 스파클을 이용하고 있다. 이는 네덜란드 수자원관리청(the Dutch Water Authority)에 있는 400년간의 조수 데이터에 액세스하기 위한 엔진으로서 BBC의 메모리셰어 자료보관소를 대상으로 한 피드 데이터 취합 기능도 제공한다.

전통적 질의 언어인 SQL 등은 단일 데이터 소스에 액세스를 위해 고안된 언어로서 다중 소스의 경우 취약점을 드러낸다. 반면 스파클은 단일 질의어에 의해 다중 소스에 액세스할 수 있으며 검색 결과 취합도 가능하다.

또 특정 데이터베이스 포맷과 연관이 없으므로 거대한 웹 2.0 데이터를 효과적으로 이용할 수 있을 뿐 아니라 여타 시만텍 웹 리소스와의 매시업도 가능하다고 한다.

RDF 데이터 액세스 워킹 그룹을 이끌고 있는 리 파이겐바움은 "스파클은 데이터 모형에 대한 질의에 의해 시간을 절약할 수 있게 해주며 여타 잡다한 웹 서비스에 대한 필요성 또한 없애준다. 스파클이라면 어떠한 형태의 질의든 가능하다"고 말했다.

한편 스파클은 W3C의 RDF(Resource Description Framework: 자원기술구조) 및 WSDL(the Resource Description Language)와 함께 작용한다.

출처 : http://www.zdnet.co.kr/news/internet/etc/0,39031281,39165262,00.htm

http://www.dt.co.kr/contents.htm?article_no=2008012102010151600001 장애인 `인터넷 접근성` 좋아진다

4월 '장차법' 시행…공공부문 한정 '반쪽' 우려 SW등 IT 전영역 확대 필요 전자정부ㆍ인터넷뱅킹 불편요소 많아 접근성 개선 지속효과 정부의지 중요

장애인차별금지 및 권리구제 등에 관한 법률(장차법)이 오는 4월 발효되는 것을 기점으로 인터넷 사이트의 장애인 접근성이 빠르게 개선될 것으로 기대된다.

전문가들은 장차법 시행이 웹 사이트에 대한 접근성은 물론, IT 전 영역에서 장애인 접근성 향상을 강하게 추진하기 위한 계기로 삼아야 한다고 지적하고 있다.

20일 장애인단체와 전문가들에 따르면, 국내 IT 분야의 장애인 접근성은 외국에 비해 매우 열악한 것으로 평가되고 있다.

◇장애인에 필요한 전자정부서비스마저 외려 불편=한국장애인인권포럼 현근식 팀장은 "정부의 대표적인 온라인 서비스인 전자정부 민원 서비스의 경우 장애인 접근성이 떨어져 비장애인은 안방에서 온라인으로 민원서류를 발급 받을 수 있는데 비해 정작 이동이 어려운 장애인은 불편한 몸을 이끌고 직접 동사무소까지 찾아가 민원서류를 떼야 하는 게 우리나라 장애인 접근성의 현실"이라고 말했다.

은행의 인터넷 뱅킹 역시 시각장애인 등의 이용이 매우 어려워 직접 은행창구에서 훨씬 많은 수수료를 지불하고 은행업무를 해결해야 하는 실정이다.

또 최근 확산되고 있는 이러닝 역시 교육 콘텐츠의 상당수가 표준을 지키지 않고, 지나치게 플래시를 많이 사용하거나 글자의 가독성이 낮고, 대체 텍스트가 없거나 부적절해 장애인의 이용을 가로막고 있다는 지적이 나오고 있다.


LG전자 이러닝솔루션그룹 신승식 과장은 "국내에서 제작된 교육 콘텐츠의 경우 표준을 고려하지 않아 장애인의 접근성이 떨어진다"며 "콘텐츠 제작자가 원칙을 지키기 위해 노력해야 하며, 온라인 교육 사이트의 접근성을 높이기 위한 기술 가이드도 필요하다"고 말했다.

◇법 제정만으로 한계, 정부의 법적용 의지 중요=전문가들은 장차법 시행이 열악한 국내 웹 사이트 접근성을 개선하는 계기가 될 것으로 보고 있지만, 큰 효과를 거두기 위해서는 적용범위 확대와 강력하고 지속적인 법 적용 의지가 필요하다고 보고 있다.

한국시각장애인연합회 강완식 팀장은 "장차법 중 전자정보 접근권의 주된 적용대상이 공공기관인데, 실제로 인터넷을 통해 얻는 정보의 상당부분이 민간 사이트를 통한 것이라는 점에서 공공부문에 한정하면 반쪽짜리로 전락할 수 있다"며 "신속하게 인터넷 쇼핑몰을 비롯한 민간 사이트까지 적용범위를 확대해 장애인 접근성 향상을 강제하는 것이 필요하다"고 말했다.

이와 함께 장애인 접근성의 논의 범위를 소프트웨어(SW) 제품 등 IT 전 영역으로 확대하지 않으면 광범위한 개선효과를 거두기 어렵다는 지적이 나오고 있다.

오피스 프로그램이나 그룹웨어 등의 SW를 제대로 사용하지 못하면 정상적인 회사업무를 수행하기 어렵다는 점에서 SW는 웹 사이트 못지 않게 장애인 접근성이 중요한 분야라는 게 전문가들의 지적이다. 하지만 한국정보문화진흥원의 지난해 SW 실태조사 결과에 따르면, 많은 SW가 스크린 리더를 제대로 지원하지 않고, 키보드만으로 작업이 어려운 점 등의 문제점을 보이면서 전체적으로 장애인 접근성 준수도와 장애인 사용 편의성이 떨어져 장애인의 정상적인 제품 활용이 힘든 것으로 나타났다. 이후 핸디소프트 등 일부 기업이 자사 제품의 장애인 접근성 개선 노력을 시작했지만, 아직까지 다른 대부분의 기업은 별다른 움직임을 보이지 않고 있다.

SW 품질 관리기업인 마름모소프트 김진권 실장은 "제품 개발 기획단계부터 장애인 접근성을 고려한다면 별다른 추가 비용이나 시간이 들지 않는데도 SW 제품 대부분이 낮은 접근성을 보이는 것은 대부분의 SW기업이 개발단계에서 장애인 문제를 고려하지 않았기 때문"이라며 "정부가 장애인 접근성 준수를 공공부문 납품의 기본조건으로 삼는 방안이 필요하다"고 말했다.

한국장애인인권포럼 현근식 팀장은 "그동안 IT 분야의 장애인 접근성은 주로 웹 사이트를 중심으로 논의돼 왔지만, SW를 비롯해 거의 모든 분야가 접근성에 문제를 안고 있다"며 "장차법 시행을 계기로 IT 전 영역에 대해 장애인 접근성 개선 논의가 본격화돼야 한다"고 말했다.

<용어설명>장차법=지난해 초 국회를 통과해 오는 4월 발효되며, 정보통신 부문에서는 장애인이 비장애인과 동등하게 전자정보에 접근, 필요한 수단을 제공받아야 한다고 명시했다. 또 정부의 장차법 시행령(안)은 국가와 지방자치단체, 대통령령으로 정한 공공기관은 1년 내에 웹 접근성을 준수하고 그 이외 기관과 법인 등은 5년 내에 단계적으로 준수하도록 했다.

C2C 결제 솔루션, 이니p2p

이니시스는 온라인에서 상품 구매 결제를 대행하는 업체다. 이 회사는 1주일 전 이니P2P라는 서비스의 테스트 버전을 공개했다. 이 서비스는 개인이 어떤 상품을 판매하고자 할 때 실명 인증만 거치면 즉시 결제 시스템을 제공하는 온라인 서비스다. 그들은 이것을 C2C PG 서비스라고 부르고 있다. C2C는 "Customer To Customer"의 약자이고 PG는 "Payment Gateway" 즉 결제 시스템을 말한다. 개인과 개인이 상품을 사고 파는 결제 시스템을 지원하는 것이다.

온라인을 통해 한 번도 상품을 팔아 본 적이 없다면 이런 시스템이 얼마나 획기적인지 이해하기 힘들 것이다. 만약 집에서 쓰던 냉장고를 헐 값에 팔고 싶다면 어떤 선택을 할 수 있을까? 몇 가지 방법이 있는데 현재 가장 보편적인 방법은 G마켓이나 옥션 같은 곳에 상품을 등록하는 것이다. 누군가 냉장고를 사겠다고 구매 신청을 하고 상품을 전달하면 끝일까? 아니다. 상대방은 카드 결제를 하고 싶을 수도 있고, 온라인 이체를 하거나 휴대전화 결제를 하고 싶을 수도 있다. 상품을 받은 다음에 돈을 지불하고 싶을 수도 있다. 이런 결제 과정을 G마켓이나 옥션과 같은 오픈 마켓은 지원한다. 물론 직접 거래를 할 수도 있다. 냉장고를 사려는 사람을 집으로 초대하여 냉장고를 보여주고 그 자리에서 현금을 받고 넘길 수도 있다. 벼룩 시장을 이용할 수도 있다.

이니시스의 "이니P2"는 결제를 대행하는 서비스다. 누군가 물건을 팔고 싶을 때 사이트에 접속해서 간단한 절차를 걸쳐 상품을 등록하면 된다. 나머지는 절차 - 입금 확인, 실명 인증, 보안, 애스크로 등등 -는 이니시스에서 대행한다. 그런 것을 대행하는 대가로 카드 결제는 5%, 계좌 이체의 경우 2.5~3%의 수수료를 받는다. 기존 오픈 마켓의 수수료보다 저렴하다. 자신의 블로그에 팔고자 하는 상품을 올려 둘 수도 있고, 미니홈피나 카페에 올려 둘 수도 있다. 이 서비스를 이용하기 위해 개인 사업자 등록증이 필요한 것도 아니다. 만약 블로그, 미니홈피, 카페를 동시에 운영하는 사람이 있다면 세 곳에 동시에 팔고자 하는 상품을 올려 놓을 수 있다. 상품 판매는 자신이 하고 결제 절차는 이니시스가 책임지는 구조다. 이 서비스는 내년 1월까지 테스트 버전을 운영하기 때문에 현재 1개 카드사를 통한 결제만 가능하다.

이런 C2C PG 서비스는 일단 이니시스가 먼저 시작했지만 동종 업계에서도 곧 유사한 서비스를 내놓을 계획이라고 한다. 그런데 이런 서비스가 갑자기 튀어나온 아이디어냐면 절대 그렇지 않다. 이런 아이디어는 2000년 초반부터 이미 존재했다. 개인과 개인이 상거래를 할려면 반드시 필요한 것이 결제 대행 업체다. 개인이 거래를 할 경우 직접 현금 수령이나 온라인 입금 외에는 별다른 방법이 없다. 그래서 반드시 결제 대행 업체를 이용할 수 밖에 없는데 7~8년 전에도 개인 간 거래에 대해 결제 대행을 해 줘야 한다는 아이디어와 의견이 있었다. 그러나 당시엔 법률적 규제나 해당 업체의 소극적 태도, 결제 인프라의 부족으로 이런 아이디어가 실제 구현되지 못했다. 오랜 시간이 흐른 후 마침내 개인 간 거래를 지원하는 결제 서비스가 현실화되었다. 웹 2.0에 대한 현실적 실천을 한 것이다.

출처 : http://www.zdnet.co.kr/itbiz/column/anchor/bluemoon/0,39032576,39165001,00.htm