Daum UI개발자 블로그

png ... 사용 여러분들 생각은 어떠신지요?

2008-09-10T10:44:19Z

요즘 이런저런 일들을 진행하다 보니 png를 쓸 일이 생기고 있는데요.

png 사용으로 인해 발생하는 문제가 있죠. 바로 ie6이 png의 투명도를 지원하지 않는다는..

때문에 필터를 사용하던가 해야하는데 이거 은근 귀찮고 또 지원하지 않는걸 억지로 지원되게 만드는 형국인 것 같아서 찝찝하기도 하고 말이죠.

GIF 라도 잘 깍아서(디자이너들이 깍는다는 표현을 쓰더군요) 투명GIF 만들면 배경이 투영되는 멋진 라운드 박스를 만들 수도 있는데...

어쨋든 이런 png 어디까지 수용해야 할까요? 아님 png 사용금지라는 규제를 두고 철저하게 사용을 금해야 할까요?

여러분들 생각은 어떠신지 궁금합니다.

tag : png, 쓸래말래

Internet Explorer8 Beta 1에 Visual Search에 검색 프로바이더 등록하기

2008-08-26T01:50:54Z

Internet Explorer 8 Beta 1에는 Visual Search 라는 기능이 있습니다.

어떤 검색을 위해 매번 브라우저의 주소창에 검색 사이트를 입력해서 해당 페이지를 연 다음 다시 검색 결과를 입력하고 검색하지 않아도 브라우저에 있는 검색 프로바이더를 선택해서 간편하게 검색할 수 있게 해주는 기능입니다.

아래의 그림에 보면 Visual Search 영역은 브라우저의 오른쪽에 있습니다.

Visual Search에 검색 프로바이더를 추가하기 위해선 브라우저의 오른쪽에 위치한 Visual Search에서 메뉴를 오픈하고 Fine More Providers... 를 선택합니다.

그러면 MS의 공급자 사이트로 이동하게 됩니다.

Internet Explorer 8 Beta 1 브라우저에 검색 프로바이더를 추가하기 위해선 약간의 절차가 필요합니다.

1. 먼저 내가 등록하고자 하는 검색 사이트로 이동합니다.
2. 검색창에 대문자로 TEST를 입력해서 검색 쿼리를 만들어 냅니다.
3. 아래의 빨간 네모 박스에 나오는 주소를 복사합니다.

4. 아래의 그림처럼 빨간 네모 박스 영역에 주소를 복사해서 붙여 넣습니다.
5. 다음으로 검색 프로바이더의 이름을 적절하게 입력합니다.
6. 그런 후 마지막으로 설치 버튼을 클릭하면 됩니다.

7. XML 보기를 클릭하면 아래의 그림처럼 XML로 된 프로바이더 정보를 확인할 수 있습니다.

참고로 Internet Explorer 7에서도 검색 프로바이더를 확장할 수 있다고 합니다. 그것은 Internet Explorer 7 에서 검색 아키텍처가 새롭게 디자인 되었기 때문이라고 하는데요.
Internet Explorer 7에 사용된 새로운 검색 아키텍처에 대한 내용은 아래의 링크를 참조하시면 됩니다.

OpenSearch Description : http://www.opensearch.org/Specifications/OpenSearch/1.1

위의 주소를 클릭해서 열어보면 검색 프로바이더로 등록되는데 필요한 xml의 정의가 매우 상세하게 설명되어 있습니다. Internet Explorer에서의 주소등록은 window.external 객체의 AddSearchProvider 메서드에 의해서 이루어진다고 합니다.

만드는 방법도 매우 쉽게 되어 있네요.
먼저 검색 프로바이더는 다음과 같은 형태의 XML 파일을 만듭니다.

MSDN
MSDN Search
   template="http://search.msdn.microsoft.com/search/results.aspx?view=msdn&qu={searchTerms}"
/>

그리고 위의 XML을 읽어들이기 위해서 다음과 같은 코드를 이용하면 된다고 합니다.

   onclick="window.external.AddSearchProvider('http://www.example.com/provider.xml')"
   >Add Search Provider Example

만약 위와 같은 클릭 행위 없이 페이지 로드시에 검색 공급자를 등록하고 싶다면 HTML 파일의 head 내에 link 엘리먼트를 이용하여 등록하면 된다고 합니다.

   http://www.example.com/provider.xml">

보다 자세히 알고 싶으신 분은 아래의 참고주소로 직접 들어가 보시면 될 듯 합니다.^^

참고주소
1. Search Provider Extensibility in Internet Explorer 7, MSDN, http://msdn.microsoft.com/en-us/library/ms532996.aspx
2. AddSearchProvider, MSDN, http://msdn.microsoft.com/en-us/library/ms535931(VS.85).aspx
3. OpenSearch Description, OpenSearch, http://www.opensearch.org/Specifications/OpenSearch/1.1

tag : Internet Explorer 8 Beta1, Visual Search, AddSearchProvider

IE Tester 라는 툴 입니다.

2008-07-29T11:26:29Z

Multiple IE 보다는 이것이 더 좋은 것 같습니다.

IE5.5 ~ IE8 베타1 까지 사용할 수 있습니다.

물론 무료 입니다.

다운로드 : http://www.my-debugbar.com/wiki/IETester/HomePage

대부분의 무료 도구가 그렇듯 이것 역시 약간의 문제점을 내포하고 있습니다.

사소한 문제점은 사이트에 잘 설명되어 있으니 확인하시고, 사용하시면 좋을 것 같습니다.

keyup과 keydown 의 연쇄 이벤트 발생

2008-07-08T17:27:06Z

이 현상은 브라우저의 버그(?)인지 표준적인것인지 아직 검증이 안되었습니다만 공유드립니다.

최근에 해당 div에서 key 이벤트를 처리할 일이 생겼습니다.

그런데 IE는 div 객체에서 key 이벤트를 발생시키지만 모질라 계열에선 div 객체에서 key 이벤트를 발생시킬수 없더군요..

div 객체에 focus를 주는것이 불가능하기 때문이라고 판단했습니다..

그래서 다음과 같은 꼼수(?)를 사용해봤습니다.

1. div 내부에 input 테그를 하나 삽입한다. (input 테그는 position을 사용하여 안보이게 한다)

2. div 테그를 클릭하거나 mouseover 하면 그 input 테그로 focus를 가게 한다.

3. input 테그에서의 keyevent 발생시 div 테그에서 이벤트가 발생하는것으로 간주해서 처리

4. div 외부를 클릭하거나 mouseout 시 input테그의 focus를 blur 시킨다.

네.. 결과는 만족 스러웠습니다.. 대부분의 처리가 가능했죠.. 그런데 곧 심각한 문제를 발견했습니다.

해당 div의 mousedown 이벤트와 mouseup 이벤트를 처리할 일이 있었는데

mousedown 시 keyup 이벤트가 선행되고 나서 mousedown이 발생하는 현상이 발견되었습니다.

자세한건 첨부드린 html을 확인해주시기 바랍니다.

문제의 요지는..

해당 div 내부의 input 테그에 focus가 위치해 있으면 div 에서 mousedown이 일어났음에도

해당 div테그의 keyup 이벤트가 먼저 선행하여 발생한다는 것입니다..

focus가 없으면 이런 현상이 발생하지 않습니다.

그래서 keyup시 keyCode를 검출해 봤습니다.

e.keyCode || e.which

결과는 "229" 라는 값이 찍히더군요...

이 229라는 키코드에 대해서 또 찾아봤습니다.

[특수 ; 한/영 전환키 입력시] - keydown : 229, keyup : 21

[특수 ; 한자키 입력시] - keydown : 25, keyup : 229

[마우스 클릭] - keyup : 229

출처 - http://blog.naver.com/jalppa/140038786737

흠;; 마우스 클릭시 keyup이 발생하게 되어있는거였군요 ;;;

그래서 229라는 keycode가 들어오면 그냥 return 하는 로직을 추가하여 해결했습니다.

저 포스트를 보아하니 버그현상은 아닌것 같고.....

이런것들을 모르고 있었다면 저처럼 당하실수도(?) 있다고 생각하여 공유드립니다.

좋은 하루되세요 : )

IE, imagetoolbar 제거하기

2008-07-08T17:12:35Z

Internet Explorer 브라우저에서 보면 일반적으로 테그를 사용하고
해당 태그에 마우스 오버를 하면 다음과 같은 도구 상자가 나타납니다

이것을 "imagetoolbar" 라고 부르더군요...

최근에 imagetoolbar가 뜨면 안되는 상황이 와서 구글링좀 해봤습니다..

두가지 해결 방법을 찾았습니다.

1. Meta markup in Head

head 테그 내부에 meta 테그를 삽입함으로써 해결가능합니다..

2. 비표준 img 테그 속성 사용

IE에서만 제공하는 img 테그의 비표준 속성을 사용할 수 있습니다.

해당 이미지 테그에 galleryimg = "no" 라는 속성을 주면 imagetoolbar가 뜨지 않습니다.

galleryimg="no"/>

비표준 속성이므로 사용이 장려되지는 않는군요... 하지만 이렇게 부분적으로 처리를 해야한다든지

여러 사정상 meta 테그를 사용할 수 없는 경우에 자바스크립트로 처리할 수도 있습니다.

var _img = document.getElementById("img1");

_img.galleryimg = "no";

두가지 방법중 사용 가능한 방법을 사용하면 좋을것 같습니다 : )

Google Toolbar Pop-up Blocker

2008-07-07T19:36:50Z

구글 툴바에는 여타 브라우저와 마찬가지로 팝업방지 기능이 있습니다.

이 팝업방지 관련 도움말을 보면, 아래와 같은 점에 주의하라고 합니다.

If you're concerned about links being blocked on your site, please keep in mind that the design of the Google Pop-up blocker is based on the following principle: certain user actions, such as clicking a link, will issue a pop-up lease, which is cleared with one navigation or the opening of one new window. A single lease will not permit both a navigation and the opening of a new window.

즉, 구글 툴바는 사용자가 링크를 클릭할 경우 popup lease가 발생하는데, 이 popup lease는 새창을 띄우거나 다른 페이지로 탐색하는 2가지 액션 중, 하나만 허용한다는 것입니다. (둘 다는 안됩니다.)

잘 이해가 되지 않을 텐데, 가상의 질문/답변을 통해 이 부분을 풀어보겠습니다.

궁금녀 질문:

컨텐츠 링크가 무척 많은 페이지를 운영하고 있어요.

<다음http://www.daum.net/>다음a> ....

그리고, 이 링크들의 클릭 로그를 집계하기위해,

document의 click 이벤트를 잡아서 iframe으로 클릭 로그를 쏘고 있어요. 아래처럼...

function documentClick(evt){
아이프레임.src = '로그 집계 페이지';
}
document.onclick = documentClick;

소스는 핵심만 정리하였기에 실제와는 다소 차이가 있지만..

어쨌든, 사용자가 링크를 클릭하면 document의 onclick 이벤트가 먼저 발생하고 이때 클릭 로그를 아이프레임으로 쏘는 방식이에요.

그 후, A 링크의 href가 지정한 URL로 이동하구요.

여튼.. 이런 방식으로 별 문제 없이 잘 돌아가고 있었는데,

몇몇 A 링크에 target="_blank" 속성을 추가하니, 구글 툴바에서 문제가 발생하더군요.

문제인즉, A 링크에 target="_blank" 속성이 지정된 페이지는 아예 뜨지 않고 팝업 방지에 걸립니다.

원인을 찾다가.. iframe으로 클릭 로그를 쏘는 부분을 뺐더니 새창으로 페이지가 뜨더군요.

원인은 찾았는데, 해결할 방법을 고민하다 이렇게 질문 올립니다.

어떻게 해결해야 할까요? 빠른 답변 부탁드려요. ~~

친절남 답변:

구글 툴바 도움말을 살펴보니, 사용자가 링크를 클릭하게 되면 팝업 리스가 발생한다고 되어 있네요.

팝업 리스라는 용어가 정확히 무슨 의미인지 모르겠지만,

여튼 사용자가 클릭한 링크가 새창을 띄우려 할 때는

1) 실제 새창만 뜬다.

2) 다른 페이지로 탐색을 한다.

위 둘 중 하나만 허용한다는 의미인 듯 합니다.

그런데, 궁금녀님의 소스를 보면 iframe으로 클릭 로그를 쏘고나서 (탐색)

링크된 URL로 새창을 띄우고 있는데, 이 부분이 팝업 방지에 걸릴 것으로 보이네요. (둘 중 하나만 되기에)

자, 그렇다면 해결 방법은...

우선 제가 테스트해보니 iframe 대신 img로 대체하니 팝업 방지에 걸리지 않더군요.

function documentClick(evt){

var img = new Image();
img.src = '로그 집계 페이지';
}

다른 방법으로는 Ajax를 이용해도 될 거 같은데, 이 부분은 테스트를 하지 않아 잘 모르겠네요.

궁금녀님께서 테스트해보시고 결과 알려주세요. ^^;;

궁금녀님 프로필 이미지가 없어 짧게 설명을 끝내니

설명이 더 필요하시면 아래 메일로 사진과 연락처를 남겨주세요. 제가 연락드릴께요.

iamsocool@one-wolf.com

Daum의 웹접근성 추진전략 및 Pragmatic HTML/CSS

2008-06-26T17:29:28Z

Daum의 웹접근성 추진전략 및 Pragmatic HTML/CSS

1 추진현황

UI 워크샵
IWA TFT 결성
시각장애인UT
UI 개발가이드라인
사내/와교육및홍보
직군영역확장

2 웹접근성?

IWA TFT
웹접근성준수실태
웹접근성? 웹표준? 웹사용성?
국제/국내동향
기대효과

3 웹접근성 향상 기술 실무 적용 방법

3.1 웹표준화

3.1.1 HTML

HTML Element
(X)HTML/CSS/SCRIPT 분리
구조화
일반문법준수
DTD 문법준수

3.1.2 CSS

속성
에러속성
경고속성

3.2 웹 접근성

3.2.1 HTML

웹 문서 제목
문서 언어
대체 수단 제공
키보드로만 서비스 이용
독립적인 링크 텍스트
페이지 자동 새로고침
온라인 양식

3.2.2 CSS

미디어 설명자

3 웹 사용성

3.3.1 HTML

반복 네비게이션 링크
양식 컨트롤
인접 링크 분리
새 브라우저 창 열기

4 Daum 첫 화면으로 본 웝 접근성

4.1 개발 프로세스

4.2 웹 접근성 개발 프로세스

4.3 적용 된 웹 접근성 예제

4.3.1 웹 표준화 part

(X)HTML/CSS/JASCRIPT 분리
구조화
W3C 유효성 검증기 통과 Tip

4.3.2 웹 사용성 part

목차 제공
양식콘트롤
fieldset / legend
이용가이드

4.3.3 웹 접근성 part

키보드 이용
독립적 링크 텍스트
의미론적 요소

4.4 효과

5 결론

PDF 파일 다운 받기 >> http://uidevstory.tistory.com/attachment/jk0.pdf

tag : HTML, CSS, 웹접근성

UI DevDay 발표자료 입니다.

2008-06-09T19:14:07Z

UI DevDay 2008 에 많은 관심을 보여주셔서 감사드립니다.

발표했던 자료 공유해 드립니다.

Session 1

다음 메인 페이지에 담긴 비밀 - UI개발팀 - 김선진

미니다음 개편 사례: 20픽셀의 미학, 그 현재와 미래 - UI개발팀 - 추홍엽

XUL을 이용한 개발 사례 - RIA기술팀 - 김대웅

한메일 Express iPhone 버전 개발 사례 - RIA기술팀 - 조영주

Session 2

JRIA Widget 구현의 핵심 - UI개발팀 - 구경택

액션스크립트3.0에 대한 개발자들의 호기심 - UI개발팀 - 박형석

RIA와 Silverlight2.0 - UI개발팀 - 박종현

AJAX 채팅 어플리케이션 구현 - UI개발팀 - 최종배

브라우저 확장 - 플랫폼의 다양화 - UI개발팀 - 유시형

Front-End 성능 향상 Tip - 동영상개발팀 - 유승근

좋은 하루 되세요.^^

tag : UI DevDay, 발표자료

2008 UI DevDay 강사들 사진 입니다.

2008-05-29T21:14:26Z

2008년 5월 30일 오후 1시 30분 ~ 오후 6시

삼성동 섬유센터 17층 대회의실에서 UI DevDay를 개최 합니다.

800분이 신청을 해 주셨는데, 자리가 협소하여 250분 밖에 모시지 못해서 죄송합니다.

다음번엔 조금 더 큰 곳에서 더 좋은 내용을 가지고 모시겠습니다.

행사 프로그램 소개 입니다.

이번 첫 UI DevDay를 계기로 UI 개발 기술을 공유하는 장이 많이 생겼으면 합니다.

다음은 발표하실 분들을 소개하겠습니다.

바쁜 업무 도중에도 발표 준비를 해 주신 달인들 이십니다.

-. 16년 동안 다음 메인 페이지에 비밀을 담아가실 김장 김선진님을 소개합니다.

-. 16년동안 매년 1픽셀을 늘리실 땅따먹기의 달인 추홍엽님을 소개합니다.

-. 16년 동안 디자인 패턴을 연구해 가실 앙드레 구경택님을 소개합니다.

-. 16년 동안 액션스크립트 호기심만 갖고있는 급질 박형석님을 소개합니다.

-. 16년 동안 Silverlight2.0를 만들어 가실 후레시맨 박종현님을 소개합니다.

-. 16년 동안 Ajax 채팅을 해 가실 물관리 최종배님을 소개합니다.

-. 16년 동안 익스텐션을 꽂아 가실 돼지코 유시형님을 소개합니다.

-. 16년 동안 Front-End 성능을 향상 시켜 나가실 팁 유승근님을 소개합니다.

각각 내용 중 궁금한 사항이 있으시면, 각 달인 들에게 물어 봐 주세요.

유익한 시간 되셨으면 좋겠습니다.

tag : UI DevDay, 2008 UI개발, UI 컨퍼런스, UI달인

2008년 UI개발자 & Flash 개발자를 구인합니다.

2008-05-29T16:32:47Z

안녕하세요.
(주)다음커뮤니케이션에서 즐겁게 세상의 변화를 만들어갈 인재를 모집합니다.
http://www.daum.net/

◆ 업무내용
- Daum 서비스 UI개발 업무.

- Ajax, Flash, Silverlight를 이용한 RIA 구축.

- Javascript Framework 구축.

- Web Template Module 구현.

- Semantic Markup, CSS, XUL 개발.

◆ 지원자격
- XTHML/HTML, CSS, CrossBrowsing, 웹 표준, 웹 접근성 관련 유 경험자.

- JavaScript, Ajax, XML/XSL 경력자.

- 웹 서비스 개발 경력 2년 이상.

- Flash 개발자는 Flash 개발 경력 2년 이상.

- UX, HCI 관련 창의적인 아이디어가 많으신 분.
- Semantic Web 등 웹의 미래에 대해 관심이 많으신 분.

◆ 채용인원 (정규직)
- UI개발자 5명

- Flash 개발자 2명

◆ 제출서류
- 이력서, 자기소개서.
- 제출 서류는 일체 반환하지 않음.

◆ 제출방법
- 이메일 : uidev@hanmail.net
- 채용 공고 사이트 : http://recruit.daum.net/DaumRecruit/recruit_main.jsp
Technical > 상세 모집 부문 보기 > Daum 서비스UI개발

Daum 과 함께 대한민국 웹의 미래를 만들어 가실 여러분을 초대합니다.

Daum 은 개발자의 미래를 위해 개발자 컨퍼런스, 각종 내부 교육, 개발자 마일리지, Tech Note 등 많은 노력을 합니다.

웹의 미래를 이끌어가실 여러분들의 많은 지원을 부탁 합니다.

tag : 구인, UI개발자, Flash 개발자

객체 초기화의 중요성

2008-05-22T16:51:36Z

자바스크립트 코딩을 하던 중 제 머리를 아프게 했던 문제가 있었습니다.
약 30분 가량을 이 문제로 씨름하다가 단 한줄로 문제를 해결했습니다.
자바사크립트로 oop를 구현하는게 일반적인 요즘, 자칫 간과하기 쉬운 객체 초기화의 중요성을 다시 한 번 상기시켜 준 문제였기에 공유합니다.

제가 설계한 객체는 기본적으로 자바스크립트의 배열을 사용하고 배열을 조작할 몇 가지 부가 기능을 첨가한 단순한 객체였습니다.

function TemporaryBasket(){
    this.basket = [];
}

TemporaryBasket.prototype.add = function(){
    var temp = [];

    for(var i=0,max=arguments.length; i
        this.basket.push(arguments[i]);
    }

    return this.size();
}

TemporaryBasket.prototype.remove = function(obj){
    for(var idx in this.basket){
        if(this.basket[idx] == obj){
            this.basket.splice(idx,1);
        }
    }
}

TemporaryBasket.prototype.removeAt = function(idx){
    return this.basket.splice(idx,1);
}

(이하 메서드 생략)

그리고 이 TemporaryBasket를 상속받고 몇몇 메서드들을 오버라이드하는 SelectedItemBasket 이라는 객체가 있습니다.

function SelectedItemBasket(){}

SelectedItemBasket.prototype = new TemporaryBasket;

SelectedItemBasket.prototype.compareSequence = function(a,b){
    return a.sequence - b.sequence;
}

SelectedItemBasket.prototype.add = function(obj){
    var cnt = TemporaryBasket.prototype.add.call(this,obj);
    Consol.print("add> selected itmes: " + this.size());

    Consol.print('board type: ' + obj.fldtype);

    this.basket.sort(this.compareSequence);

    return cnt;
}

SelectedItemBasket.prototype.remove = function(obj){
    var removedItem = TemporaryBasket.prototype.remove.call(this,obj);
    Consol.print("delete> selected itmes: " + this.size());

    this.basket.sort(this.compareSequence);

    return removedItem;
}

(이하 메서드 생략)

정말 단순한 객체죠?
하지만 그 단순함에 속아 커다란 문제점을 놓치고 말았습니다.

어떤 페이지에 SelectedItemBasket객체의 인스턴스를 두 개 이상 생성하였는데 문제가 발생하였습니다.
인스턴스가 한 개 일땐 전혀 일어나지 않던 문제였기에 무척이나 당황스러웠죠;;

문제는, 각 인스턴스가 자신의 속성으로 갖고 있는 Array객체인 basket 을 공유하는 것이었습니다.
분명 독립적으로 생성된 서로 다른 인스턴스지만 이상하게도 basket을 공유해서 한 쪽에서 add() 메서드를 호출하면 다른 쪽 basket에도 항목이 추가되어 결국 두 개의 인스턴스가 동일한 basket을 갖게 되었습니다.

결론부터 말하자면 문제의 원인은 SelectedItemBasket의 생성자 함수 였습니다.

function SelectedItemBasket(){}

prototype을 TemporaryBasket의 인스턴스로 하였기 때문에 당연히 초기화는 필요 없으리라 생각했는데 오산이었습니다.

SelectedItemBasket.prototype = new TemporaryBasket;

위와 같이 SelectedItemBasket 생성자 함수 아래에 prototype을 지정하였지만 이 코드는 페이지 로딩시 단 한 번 실행될 뿐입니다.

SelectedItemBasket 객체를 생성할때마다 호출 되는 것이 아니기 때문에 SelectedItemBasket 객체를 생성할 때마다 처음 생성된 TemporaryBasket 객체를 그대로 쓰게 됩니다. (개인적인 추측입니다;;;)

때문에 SelectedItemBasket의 생성자 함수에서 초기화 하는 작업이 필요합니다.

function SelectedItemBasket(){
    this.constructor();
}

물론 위 코드는 TemporaryBasket와 SelectedItemBasket 의 생성자 함수가 동일 하기 때문에 SelectedItemBasket만의 초기화 코드가 없습니다. 그저 TemporaryBasket의 생성자 함수를 빌려 쓰면 되는 것이지요.

'초기화'의 부재로 인해서 일어난 문제였던 만큼 다른 코드들을 건드리지 않고 쉽게 마무리가 되었습니다만, '초기화'의 중요성을 다시 한번 느끼게 되었습니다^^;; (C언어 책을 다시 보게 만드네요...)

tag : 초기화

UI개발팀 난상토론 ver.08년5월19일

2008-05-20T18:05:47Z

UI개발팀 난상토론회

주제 : Data Web이란?

서기 : 김선진
토론자 : (초기발표순) 박종현, 추홍엽, 유시형, 김종오, 승무영, 구경택, 최종배, 박형석, 임종혁

[Guide]
1. 빠짐없이 모두 발표한다
2. 한사람당 1분이상 5분이하
3. 최초 1회는 시계 반대반향 2회부터는 무작위
4. 내용은 경험이나 아이디어, 추후 발전 과제 정도로 한정
5. 서기는 서두 발표후 토론 내용을 기록. 최후 5분간 정리하여 토론자와 공유하고, 추후 내용을 블로그에 공개한다.

서두
Data Web은 무엇이며, 누구에의해서, 어떤내용으로 발전했는가?

(참고) 편의를 위해 토론자의 이름만 표기하였음.

------------------------ ice break : data web이 무엇이라 생각하는가? ---------------------------------

종현
data web은 마크업을 기준으로 구조화된 데이타들을 뽑아서 처리하는 기술이라 생각한다.

홍엽
난제한 정보들을 xml과 같은 Data화 시켜서 사용 가능

시형
웹에 존재하는 정보들을 리소스화 시키는것.
UI개발자들이 이러한 리소스에 맞춰서 어떻게 준비해야 하는지? (맞춰진 폼은 있는지)

정오
한가지 Data Protocol(XML)을 깊이 공부하다보면 그 구조 (자료 -> data) 추론으로 확장하기 용의하다
data web은 시멘틱웹의 또다른 이름이다!
이론이 발전하여 특정 정의가 되었다. data web 도 마찬가지
구현에 많은 시간이 필요하다 : meta데이타를 뽑는데 많은 시간이 든다.

무영
정보를 세분화해서 구분한다
과거 문서단위 웹에서 데이타 단위 웹, 따라서 검색이 더 잘되게, 사용자가 더 쉽게 찾도록
또한 데이타 하나를 여러곳에 사용가능하도록(확장)
스프링노트 -> 스프링북, 스프링로그 (remix 웹) : 연관된곳에 많이 사용된다

경택
data web은 시멘틱웹으로 가기위한 정거장이다
문서에 존재하는 data간의 연결을 보장해야 한다.
문서 구조가 중요하다. rest, rss, atompub과 같은 여러 형식이 있다. data 규약을 정해서 표준화 시켜야 한다.
UI개발에 맞게 xml보다는 json으로 정의하는것은 어떤가?(json이 더 좋은 이유? 검증필요)

------------------------ end of ice break ---------------------------------

------------------------ 난상 토론 시작 ---------------------------------

종배
웹(은 특성상) : 정보 공유를 위해 만들어 졌다.
W3C(와 같은 표준기구)에서 정보공유의 기준을 정해 줬으며 이러한 기준이 존재하기 때문에 data web으로 발전하기 위한 토양은 갖춰있다고 말할 수 있다.
그렇다면 기계가 가져가서 어떻게 사용할지 고민해 봐야 하지 않은가? 요즘 추세로 볼때 이런 고민이 더 필요하다.

UI개발자는 문서작성시에 어떻게 하면 시멘틱하게 작성할 수 있는가?를 생각해야 하고, 규약/기준은 현재 rss나 atom외에 새로운것이 나왔을때 빠르게 대응하는 능력이 필요하다.

형석
개인적으로 단어와 단어 사이 의미가 있는 정보를 db에 넣어보는 아이디어가 있었다.
내용은 단어와 단어간의 관계를 찾고, 이를 키워드로 새로운 키워드를 연결하여 망화(web)시키는것이었다.

허나 너무 많은 관계로 인하여 구현에 어려움이 있었다.

이러한 노력을 UI개발단에서 준비한다면, 방법은 매니아들 이용하여 진행하는것이 좋다고 생각한다.

태그와 같이 사용자의 노력으로 데이타들을 메타화 시키는 노력이 필요하다.

종현
XML이라는 구조화된 언어와 마찬가지로, data web 의 성공 요인은 디바이스와의 연개 + 데이타의 구조화이다.
1. 각 업체관의 이해를 뿌리치고 얼마나 빠른시간안에 표준화를 진행하느냐!!!
2. 자유로운 디바이스 상황에서 얼마만큼의 퍼포먼스를 내느냐!!! : 신뢰성 (문자열전송이 가진 문제점)

시형
질문이 있다.

data web은 진행해야 하는건지? 진행 중인지? 발전 가능성은 있는것인지?
현존하는 meta data화 되지 않은 수 많은 데이타들을 모두 처리 가능한지?

종현
비관적이다. 허나 업체들은 진행 할것이다.
이기종간의 data처리가 많기 때문에 통일화 하려는 노력을 할것이다. 또한 대세(주변이 하는일)를 따를것이라 생각한다.
많은 시간과 노력이 필요하다는것에 공감한다. 허나 응용부분에 WS(Web Service)와 같은 예를 본다면 가능성이 있다고 생각한다.

종배
사람들은 자신에게 이익이 있는지 알아야 그 인식이 바뀐다.
따라서 웹표준과 마찬가지로 '왜 해야 하는지?'를 알려주는것이 우선이라 생각한다.
누군가 전도사가 나와서 전파해야 발전하지 않을까?

종현
(왜 하는지에 대한 대답으론) 어플리케이션의 설정부분은 xml로 많이 되어있것이 그 예가 될수 있다.

경험으로 얻은 불필요한 시간과 노력을 이러한 정해진 표준으로 줄일 수 있을것이라 생각한다.
이처럼 데이터웹으로 가는 길은 불필요한 시간과 노력을 줄일 수 있다.
또한 검색의 결과를 높일 수 있다는 장점이 있다.

만약 검색기가 표준으로 사용하는것이 xml이라는 사실을 안다면 굳이 다른 protocol을 만들 필요는 없지 않은가?

형석
data web은 분산을 중요시 여긴다.
html문서 단위가 아니라 data단위로 따로 노출되어 있는 자원(정보)을 수집하여 사용해 보자. 이를 위해서 의미를 부여해야 하며, 이때문에 수많은 메타 데이타가 생성된다.

허나 문제가 있다. 통제가 불가능한 데이타들의 조합은 위험(불안)이 많다.

예) 블로그에 타 사이트의 글들을 링크해 왔을때, 원본 사이트의 글이 삭제되거나 수정되면 인용한 블로그는 그 정체성을 잃는다.

종혁

질문이 있다.
데이타 웹이 XML을 이용한다는 가정이라면, 파싱은 XML을 기준으로 해야 하는가?

형석
개인적으로 메타데이타 단위라 생각한다.

종혁
XML이 요즘 규약화 되고 있다. atom이나 rss와 같이.
공통적인 시멘틱웹(메타데이타화)은 오기 힘들 것이다. 허나 의료나 교육과 같은 특화에서는 가능할듯하다.
하지만 atom이나 rss같이 쉬운 포멧이라면 보다 많은 곳으로 확장될듯하다.
또 질문이 있다.
정보의 과포화 : 너무 많은 정보가 존재하는데, 이 때문에 사용자는 신뢰할 수 있는 정보인지 알고 싶어한다.
어떤것이 신뢰 할 수 있는 데이타인지 알 수 있을까?

시형

없다고 본다.
최종 신뢰할 수 있는 data를 얻는것은 본인의 시간을 들이지 않으면 무리이다.

종현
신뢰할 수 있는 data를 구분짓는 알고리즘을 만들어서 진행하면 어떤가?

수많은 검증받지 못한 data에서 검증한 data를 뽑아내는 방법이 있다고 생각한다. 덩치 큰 데이타에서 작은 단위로 얼마나 빨리 뽑느냐가 강건.

시형
웹 data와 실 상황은 매칭하기 어렵다. 따라서 개인의 노력이 필요하다.

예) 맛집 사이트에 등록된 맛집이 실제로는 문을 닫았을 수 도 있다. (sync의 문제)
결국 검색 결과보다는 검색 query에 집중하는것이 더 옳은것이 아닌가?

즉, 개인화된 data를 기준으로 검색을 하면 보다 쉽게 검색이 되지 않을까?

형석
그러기위해서는 사용자들을 통해 data를 얻는것이 좋겠다.

종배
쉽지 않다.
이유 : 자신에게 득이 되는게 없기 때문에.

형석
다른사람을 대상으로 하는것이 아니라 자기 자신에게 특화된 결과를 주는것이다. 자기에게 이득이 있기때문에 참여를 유도할 수 있다.

예) 대학 시간표, 취업 연봉 검색

추가로 당신이 하기 따라서 세상이 달라진다라고 의미를 부여해보자.

종혁

질문이 있다.

사용자가 data를 넣다보면, 악의적인 정보 가공이 있지 않겠느냐?

종현
그이들도 지겹지 않을까?

형석
결국 자기를 위한 개인화 서비스를 등록하게 하여 그러한 결과를 모아서 자신에게 보여주는 방식이 피해가 적겠다.

종현
구현하는 방안으로 무분별하게 db에 넣지 말고 로컬에 쌓았다가 최종 패턴만 웹으로 돌려주는 서비스를 하는것이 좋을듯 하다.

------------------------ 난상 토론 끝---------------------------------

회의실 예약 시간 관계상 딱 떨어지는 결론없이 토론이 종료되었습니다.

개인적으로 다음 난상토론에는 마지막에 기록을 공유하고, 그 결과를 다시한번 고민해 보는것이 좋겠다 생각했습니다.

처음하는 난상토론이었음에도 잘 참여해주신 ui개발팀 모두에게 감사 드립니다. (__)v

보다 확장된 의견은 피드백으로, 다음 난상토론 발표주제는 리플로 남겨주세요. ^^

tag : 난상토론회, ui개발팀, data web

월드 와이드 우주망원경

2008-05-10T23:13:58Z

평소 우주천문 분야에 컴퓨터 기술의 접목을 통해 대중성을 확보하는... 모 그런거에도 관심을 가지고 있었습니다.

그 중 제가 가장 관심있게 주시하고 있는 분야가 가상 천문대... 즉 우주 망원경이라 불리는 프로젝트 입니다.

간단하게 설명하자면...

DSS라고 하는 프로젝트인데요.. 이 프로젝트는 전체 하늘에 대한 이미지를 확보하는 프로젝트를 말합니다.

이 DSS라고 하는 것은 DSS1과 DSS2가 있는데 DSS1은 흑백 이미지이고, DSS2는 컬러 이미지 입니다.

아무튼 이렇게 확보된 컬러 이미지의 용량은 대략 10TB정도라고 하는군요.

이 DSS를 이용해서 현재 서비스를 하고 있는 곳은 전 세계적으로 3군데 입니다.

1. 미국 STScl(허블 우주 망원경을 관리하는 곳입니다.)

- http://archive.stsci.edu/cgi-bin/dss_form

2. 유럽의 The European Southern Observatory

- http://archive.eso.org/dss/dss

3. 일본 국립 천문대(national astronomical observatory of japan)

- http://dss.nao.ac.jp

이렇게 서비스 되고 있는 DSS 데이터가 이제 민간차원에서도 활용하게 되는데요.

바로 지도검색 기술을 이용하여 개인 컴퓨터 상에서 전천 하늘을 입체적으로 볼 수 있도록 하는 겁니다.

이와 관련된 서비스는 현재 웹 기반과 데스크탑 응용 애플리케이션의 2가지 타입으로 제공되고 있습니다.

1. Sky Map

- http://www.sky-map.org

2. 구글 Sky

- http://www.google.com/intl/ko/sky/

3. 스태리나잇 (데탑용 응용 애플리케이션 이며, 상용 입니다.)

그런데 앞에서 언급한 고용량의 이미지를 웹 기반에서 이용하게 된다면 렌더링이나 브로드밴드 위쓰에 의한 렉이 발생합니다.

따라서 사용자에게 답답함과 화려한 인터페이스를 제공하는데 제약이 따르게 됩니다.

인터넷 서비스에서 가장 중요한 게 시간인 건 누구나 다 알고 있죠.

이런 단점을 극복하고, 또 무료로 제공하면서도 기존의 서비스 보다 진일보한 서비스를 Microsoft가 얼마전 "서울디지털포럼(http://www.seouldigitalforum.org/kr/index.sdf)" 에서 시연했습니다.

빌 게이츠는 이 포럼에서 앞으로의 10년은 소프트웨어기술의 확보가 매우 중요한 시기라고 언급을 하면서, "월드 와이드 우주 망원경"을 소개했습니다. 이 소프트웨어는 마이크로소프트 리서치(Microsoft Research : http://www.worldwidetelescope.org/)가 개발한 Visual Experience Engine 이라는 기술을 이용해서 개발되었다고 합니다. 나중에 기회가 되면 이 기술을 분석해서 다시 다뤄보도록 하겠습니다.

제가 이 소프트웨어를 소개하는 이유는 '꽤 UI적인 요소는 최소화 하면서도 기능 구현에 신경을 많이 썼다.'라는 느낌을 받았기 때문입니다. 현재 플렉스나 실버라이트와 같은 마크업에 기반하지 않는 애플리케이션에서는 이런 패턴이 지금보다 더더욱 중요하게 여겨질게 될 것이기 때문입니다.

아래에 빌 게이츠가 소개하는 영상의 주소를 링크로 남겨봅니다.

SBS 서울 디지털 포럼 : http://news.sbs.co.kr/section_news/news_read.jsp?news_id=N1000413379
시연 영상을 보시고, 그들이 어떤 방식으로 UI를 설계했는지 참고삼아 보는 자료로써 활용되기를 바랍니다.

앞으로 기회가 되면 이쪽 분야의 기술이나 UI적인 요소들을 분석해서 조금씩 다뤄보도록 하겠습니다.

(Microsoft Research "World Wide Telescope")

안녕하세요~ 늦은 인사드립니다~

2008-05-09T09:32:22Z

안녕하세요~

통합검색플랫폼팀 이원주입니다.

벌써 입사한지 한달이 좀 넘어 가는데요.. 늦게나마 이렇게 인사올립니다~ ( ^^))

우선 이렇게 Daum과 함께하기까지 6년이 조금 넘는시간동안의 외도(?)끝에 결국 다음人이 되기 위한 첫발을 내딧었습니다.

81년 생이며 11개월된 딸아이를 둔 아이 아빠 입니다.

'강원도 원주' 지역명을 기억해 주신다면 쉽게 저의 이름을 기억해주실 수 있으리라 생각이 듭니다.. 아님 '전원주' 라도.. ^^;;

기존엔 웹에이젼시 회사에서 출발하여 인크루트, 동원엔터프라이즈를 거쳐 이곳 Daum 까지 오게 되었구요,

주로 스크립트 기반 랭기지와 .net , jsp 등을 다뤄왔었습니다.

아직 UI개발 분야에서는 부족한점 많지만 팀원분들이 잘 대해주시는 덕분에 빠르게 적응하며 지내고 있구요..

미숙한점.. 부족한것, 그리고 앞으로 배울것도 많은 저이기에 앞으로 잘 부탁드린다는 인사 드리오니 많이 챙겨주시기 바랍니다. ( ^^))

감사합니다.. 오늘도 행복한 하루 보내세요~~

마지막으로.. 저도 오래전.. 사진하나 올리고 떠납니다~ ^^;

Google NIght 후기...

2008-04-26T14:41:17Z

Google NIght을 다녀온 후

(HostName : Google Night)

Thursday, April 24, 2008 17: 26

지난 목요일에 회사 동료와 함께 Google Night 이라는 행사에 초대되었습니다.

구글에서 주최하는 행사 참석은 처음이었고, 구글 밤이라는 행사는 또 어떤 류의 행사인지 매우 궁금했습니다.
기존 행사인 구글 개발자의 밤과 같은 행사는 아닌 듯 보였습니다.(비공개 행사라는 이야기를 들었기 때문입니다.)

아무튼 행사 담당자의 초대 이메일을 확인하고, 사진으로만 보아오던 알록달록하게 꾸며진 유쾌한 Workspace의 모습을 직접 볼 수 있게 된다는 약간의 설레임을 안고 스타타워로 향했습니다.

구글의 R&D 사무실은 스타타워 22층에 위치하고 있었고, 엘리버이터에서 내리면 아래 사진과 같은 입구가 보입니다. 아주 찾기 쉽습니다.

입구에 들어서니 사진으로만 보아오던 알록달록한 Infodeak가 시선을 사로잡았습니다.

스티커로 만들어진 명찰을 가슴에 붙이고 행사장으로 향했습니다.

인터넷에 공개된 사진들과 제가 촬영한 사진을 볼때 느껴지는 구글의 느낌은 크게 다를바 없지만 그래도 이렇게 직접 눈으로 보게되니 좋긴 하더군요.^^; 특별한 초대의 느낌(?) 남들 다 다녀온 곳을 이제서야 가본 저에겐 그런 느낌 들기에 충분했습니다. 사진에서 느껴지는 느낌처럼 눈으로 본 그 곳의 느낌 또한 굉장히 즐겁고, 창의적이고 어떤 에너지가 마구 분출될 것 같은 느낌이 들었습니다. 하지만 사진보다 그리 강하게 들진 않더군요.

구글의 시스템을 체험하지 못한 상황에서 분위기만으로 그것을 판단하는 것은 섣부르다는 생각이 들었고, 다만 이런 인테리어를 통해 구글의 의지 만큼은 확실하게 읽을 수 있었습니다. 국내 일부 기업들 처럼 실제 생활과 겉으로 보여지는 이미지가 불일치하는 그런 곳이 아니길(?) 마음 속으로 생각해 봤습니다. 물론 구글의 기업문화가 그렇진 않겠죠.(이미 많은 이야기를 들었으니깐요.)

30 여분간의 식사를 마치고, igoogle 개발자의 간단한 이야기를 들었습니다. 영어로 진행됐지만 기술적 이야기들이 오고가서 그런지 맥락을 이해하는데는 크게 어렵지 않았습니다. 다만 제가 질문을 하고 싶었는데 못했을 뿐이죠.^^

(역시 말하기는 별개의 능력인 것 같습니다.)

전 개인적으로는 구글의 검색 능력보다는 구글이 시도하는 웹 기반의 Application에 관심이 더 많습니다. 왜냐면 사용자는 인터넷을 통해 검색만 하고 살지는 않기 때문이죠. 사용자에게 있어 검색은 컴퓨팅 생활의 일부분이고, 대부분의 사용자는 검색과 같은 생활을 하기 위해서는 Application 에 의지해야 하기 때문이라고 봅니다.

Application의 사용 편이성과 성능이 사용자를 사로잡는다고 보고 있으며, 구글이 생산하는 웹 기반의 Application이 어느 정도의 사용자 임팩트를 주는가에 늘 관심을 가지고 있습니다. 웹 기반 Application에서는 가장 선도적인 업체라 생각되기 때문입니다.

아무튼 Application에 합리적인 결과를 도출해주는 것이 (검색을 기반으로 하는)데이터 가공에 의한 것이긴 하지만 일반 사용자는 검색 그 자체보다는 자신이 직접 컴퓨터 상에서 맞이하게 되는 Application에 더 관심이 있다고 보고 있으니깐요.

이후 행사는 구글코리아의 개발자가 모두 나와서 구글 코리아에 대해 설명했습니다. 자신이 하는 일은 무엇이고 어떻게 일하고 있으며, 구글에 입사하는데 필요한 지식을 전달하며, 두 시간에 이르는 세션이 마무리 되었습니다. 약간 리쿠르팅 냄새도 나긴 했지만 구글에 대한 정보가 부족한 상황에서 그런 행사를 여는 것 또한 구글에 대해 알고자 하는 사람들에게는 많은 도움이 되었다고 보여집니다.

(구글 밤 행사에서의 세티)

행사 중간에 구글 코리아 대표이사님께서 구글 코리아가 아직은 한국에서 미흡한 부분이 많이 있지만 시간이 걸리는 부분이고, 노력하고 있다고 말씀하셨습니다. 한편으로는 공감이 가면서도 주변 환경에서의 실적에 대한 압박을 어느 정도 받고 있는 것은 아닌가 하는 느낌도 들었습니다.(주관적 느낌이므로 틀렸다면 미안합니다.^^;)

참... 음료수는 매우 좋았습니다. 공짜였으니깐요.^^
하지만 뷔페의 음식은 화려하고 보기엔 좋았지만 입맛에 썩 맞지는 않았습니다. ^^*

용어 설명:
1. Google Developer Night : 구글에서 주최하는 개발자를 위한 모임, 구글의 비전과 지식을 개발자와 공유하기 위해 열리는 행사, 지난 번 제가 참석했던 MIcrosoft의 IT Hero 행사와 비슷한 행사 입니다. 지난 해에 한국에서도 열렸으며, 인터넷의 아버지라 불리는 빈트서트가 한국에 왔었죠. 관련 내용은 다음의 인터넷 주소에서 더 자세하게 볼수 있습니다. http://redcrow.tistory.com/11)

2. Google Night : 구글 개발자의 밤과는 다른 행사, 아직 알려진 게 그리 많지 않고 초대된 인원도 극소수 입니다. 지난 개발자의 밤이 400명 이었던데 반해 이번 모임에 초대된 사람은 30여명 남짓했거든요. 구글이 선별적으로 초대장을 허가한 것으로 봐서는 다른 의도(?)가 있었던 듯 싶은 모임이었습니다.

3. Application: 우리가 컴퓨터에서 일반적으로 사용하는 모든 프로그램을 말합니다. 윈도우 OS에 있는 계산기, 게임, 브라우저, 영화 플레이어 이런 류의 프로그램을 "데스크탑 애플리케이션" 이라고 말하며, 게시판, 쪽지, 메모장, 마크업 언어(HTML과 같은)와 같은 것을 기반으로 움직이는 애플리케이션을 웹 애플리케이션 이라고 합니다.

tag : Google Night