옷장수 나라: JS(Product)

레이블이 JS(Product)인 게시물을 표시합니다. 모든 게시물 표시

2008년 8월 5일 화요일

JSEclipse가 종료되었군요.

Eclipse에서 JavaScript 플러그인으로 JSEclipse를 사용했었습니다. Adobe에 인수된 뒤로 제대로 유지보수도 안되더니만, 결국에는 Flex Builder의 옵션 플러그인으로 집어넣고, 플러그인을 종료해버렸군요.

이클립스의 JSDT가 나와있기는 합니다만, WTP R3.0 이상에서만 지원이 되는 것 같네요. (WTP R 3.0에서는 PDT와 Subclipse가 제대로 동작하지 않는군요.)

Adobe도 믿을 것은 못되는군요.

P.S > PDT Nightly Build 버전을 설치하여도 안되네요. ㅠㅠ 정식 버전을 기다려야 할 것 같습니다. Adobe ㅅㅂㄹㅁ...

2008년 1월 31일 목요일

JSDT

JSEclipse를 사용하여 JavaScript 코드를 보던 중 prototype 1.6 기반의 소스코드를 보게 되었습니다.
var Editor = Class.create(...) 와 같은 형식의 코드는 JSEclipse의 Outline 뷰에서 전혀 동작을 하지 않더군요.

혹시나 싶어 JSEclipse 업데이트 버전이라도 있을까 싶어서 Adobe lab을 뒤져봤지만, 보이는 것은 JSEclipse가 죽었다는 사용자들만의 불만만 보이더군요. 결국 새로운 IDE를 검색해 보았지만, 마땅한 대안은 보이지 않더군요.

그나마, 기대를 갖게하는 것은 JSDT(JavaScript Development Tools)입니다. JDT(Java Development Tools)를 기반으로한 JavaScript 에디터이구요. prototype, dojo도 지원할 예정이라고 합니다.

기능 스펙 보기 ..

2008년 1월 26일 토요일

JSLeaksDetector

Rhio.Kim님의 블로그에서 'JavaScript Memory Leak Detector - 자바스크립트 메모리 누수 디텍터'글을 보고 설치를 해보았습니다. (Rhio.Kim님 좋은 글 감사해요 ^^)

JSLeaksDetector는 IE에서 Memory leack을 측정하는 툴입니다.
설치는 인스톨러에 나와있는 명령대로 설치를 하면 됩니다. (바로 설치하니 나오지 않더군요. 저의 경우 재부팅 후 활성화가 되더군요.)
JSLeaksDetector을 실행시키기 위해서는
- '메뉴 모음 > 보기 > 탐색창 > js memory leaks detector'를 클릭하면 IE Dev toolbar 처럼 창의 하단에 나오게 됩니다.
- 또는 '명령 모음 > 도구 > 도구모음 > 탐색창 > js memory leaks detocr'를 클릭합니다.
그 다음에, '도구 > 인터넷 옵션 > Advanced > Disable script debugging(Internet Explorer)'의 체크를 풀어서 디버깅이 가능하게 설정합니다.
JSLeaksDetector에서 Settings를 눌러서 IE6/7 또는 Actual leaks를 눌러서 각각의 케이스의 경우에 Memory leak에 대한 체크를 설정합니다.
- IE6: where all circular references are considered leaks
- IE7: where only the DOM objects detached by the markup at "closing" time could be leaked. (IE 7에서는 circular reference에 대해서 gc 시점에 제거를 합니다.)
- Actual leaks: look for leaked DOM elements.
페이지를 load/unload를 해보면서 memory leak을 찾아보면 됩니다.

사용 소감: DOM leak에 대해서는 잘 찾는 것 같습니다만, jsObject에 대한 Memory leak에 대해서는 잘 모르겠네요.^^;; - 만들었던 페이지를 이동하면서 보니 leak이 생각외로 많군요;;;;;

출처:

'JavaScript Memory Leak Detector - 자바스크립트 메모리 누수 디텍터' by Rhio.Kim
JavaScript Memory Leak Detector by GPDE Team Blog

2007년 8월 30일 목요일

YSlow

YSlow는 Yahoo에서 만든 웹 페이지의 퍼포먼스를 측정하는 툴로서 Firebug의 플러그인입니다.

측정하는 페이지의 퍼포먼스를 내기 위해서 HTTP Request의 개수와 Gzip 사용여부 등을 측정해서 점수(Performance Grade)를 매깁니다. 제가 만든 페이지는 F를 받았군요. -_-;;;

그 외에 페이지의 쿠키나 헤더 등을 볼 수 있는 툴이긴 합니다만, 그렇게 필요성을 느끼지는 못하겠네요.

출처: YSlow via Ajaxian

※ IE에서 Performace 체크를 할 수 있는 AjaxView(via InfoQ)라는 것도 있습니다만, 저는 자꾸 브라우져가 죽어서 사용해보지 못했습니다. (Ajaxian에 올라있는 AjaxView 소개글도 참고하세요.)

2007년 8월 29일 수요일

.Mac Web Gallery 어떻게 만들었을까.. 모르겠다. -_-;;

1. 호기심이 발동한 이유
.Mac Web Gallery를 Ajaxian을 통해서 본 이후로 관심을 많이 가지고 있었습니다.
(한 이미지의 영역에서 마우스 좌우 이동만으로 여러 이미지를 보여준다는 것은 참으로 매력적이죠.)

그러던중에, 오늘 잠시 비는 시간을 이용해서(-디자인 결정이 나기전에 잠시 짬이나서..) 한번 만들어보았습니다. 로컬에서는 비슷하게 돌아가던데, 서버에 올려놓고 테스트를 해보니 다르더군요.

2. 구현에 관한 생각.
.Mac Web Gallery를 어떻게 구현할 것인가를 고민해본다면 여러가지 방법이 있을 수 있을 것 같습니다.
저의 경우 다음과 같은 방법이 생각이 나더군요.

이미지 리스트를 갤러리 생성시에 받아서 저장해 놓습니다.
자바스크립트를 사용해서 이미지를 미리 로딩합니다.(new Image()..)
앨범의 이미지(primaryImage) 위를 마우스가 이동할 때 위치에 따라서 primaryImage의 src 값을 변경해줍니다.

그런데, 문제가 발생하더군요. 이미지를 미리 로딩해 놓았지만, 이미지가 변경되었는지를 확인하기 위한 Request/Response 비용이 발생을 해서 .Mac Web Gallery리 처럼 동작을 하지 않더군요.

이미지를 로딩한 다음에 로딩안한 것처럼 감춰놓고 보여줄 수도 있을 수도 있지만...

.Mac Web Gallery의 코드를 보면 그렇지는 않은 것 같더군요..

3. 실제구현을 살펴보면.
파이어버그를 사용하여 네트워크 트래픽을보면 초기 로딩 시간에 이미지가 모두 로딩된 것을 확인할 수 있습니다. 그리고, Web Developer Toolbar를 사용하여 JavaScript를 사용하여 생성된 HTML 소스를 확인해보면 초기에 로딩된 화면에 보이지 않는 이미지 주소가 HTML에 포함되어 있지 않습니다.

살펴보다보니 재미있는 것은 이미지 위를 마우스로 이동할 때, 이미지에 대한 Request/Response가 발생하는게 아니라 emily_parker 페이지에 대해서 요청을 하더군요.

그리고, 소스코드 실행되는 부분을 살펴보면,

didMouseOver가 호촐되어 보여줄 이미지의 index를 계산한 다음에
renderScrubImage가 호출되어 이미지를 가지고와서
setImage를 사용해서 이미지를 보여줍니다.

setImage:function(content){
if(content){
this.primaryImage.src="";
var src=content.get("square");
if(src){
this.primaryImage.onerror=function(){
this.src='/g/images/gallery/spacer.gif';
};
this.primaryImage.src=src;
}
this.primaryImage.style.width=this._defaultDim+"px";
this.primaryImage.style.height=this._defaultDim+"px";
}
},

그.. 그렇다면, 왜 Request/Response가 발생하지 않는걸까요? ㅠㅠ
답을 아시는 분은 좀 가르켜주세요~~

4. 기타..
.Mac Web Gallery에서 사용한 라이브러리는 prototype.js와 script.aculo.us와 sproutit입니다. sproutit은 script.aculo.us를 기반으로하는 이미지 갤러리를 만드는 프레임웤이라고 하더군요.

소스상에서는 도저히 답이 보이지 않아서 찾어보던 중 Brian씨가 만들었다는 .Mac Web Gallery 스타일의 skim이라는 프로그램을 보았습니다. 마찬가지로 첫 로딩에 전체 이미지를 로딩합니다. (예제)

aera를 사용하여 전체 이미지를 html페이지에 로딩해 놓기 때문에 .Mac Web Gallery와는 다릅니다.
보이기에는 빠르게 보이지만 브라우져 안에서는 이미지가 바뀌었는지에 대한 Request/Response가 발생합니다.

출처:

.Mac Web Gallery on Prototype via Ajaxian
Skim via tuaw.com

2007년 6월 29일 금요일

다음 블로그의 '꾸미기 기능' 소스를 읽다.

다음 블로그의 '꾸미기' 기능이 업데이트 되었다는 이야기를 듣고 써봤는데 상당히 빠르더군요. 총 소스 분량만 2만 줄이 넘어가던데 어떻게하면 이렇게 빠르게 짤 수 있을까 너무 궁금해서 소스를 들여다 봤습니다.

꾸미기 기능의 속성을 설정하거나 설정된 값에 따라 스킨 속성을 변경해줍니다.

오랜만에 소스코드 읽기를 했는데 즐거운 글을 읽는 듯하더군요. 소스코드를 읽고 기분이 좋아지더군요~ ^^

꾸미기의 기능들
꾸미기 기능은 크게 두가지 기능으로 나뉘어져 있습니다.

하나는 쉬운 꾸미기, 구성 꾸미기, 직접 꾸미기등의 꾸미기 속성을 선택하고 선택한 값에 따라서 스킨의 속성을 설정해주는 부분입니다.
두번째는 꾸미기 기능의 하위 속성으로 메뉴를 드래그&드롭으로 배치하거나 접거나 닫을 수 있는 기능입니다.

메뉴를 드래그&드롭으로 배치하거나 닫거나 삭제할 수 있습니다.

꾸미기의 특징들
꾸미기의 특징 중 하나는 방대한 css의 속성들을 정의하고 이들을 array list 형태로 정의하고 있다는 것입니다.
csslist.js 파일의 내부를 보면

getBGList()
getCommonSetList()
getFontList()
getFrameList()
getMoveSetList()
getNavList()
getPhotoSetList()
getSideList()
getTitleList()

메소드를 정의하고 인자로 받아오는 속성 값에 따라 적절한 css 속성을 리턴해 주고 있습니다.
해당하는 코드의 길이는 무려 11,202줄이나 되더군요.(공백 포함입니다.)

스킨의 속성들을 정의하고 이들에 대해서 어떠한 속성을 유지하고 어떠한 값을 들고갈지에 대한 분석이 없었다면 못할것 같은 작업이라 생각됩니다.. -_-;; (다음 블로그 개발자 분이 너무 부럽네요.)

꾸미기의 로딩과정
꾸미기 기능의 로딩과정은 블로그 꾸미기 페이지에 인라인으로 정의되어 있는 자바스크립트 코드에서 시작됩니다.

핵심이 되는 기능은 Designer.initDesigner()에서 시작됩니다. 재미있는 것은 window의 onload 이벤트에 붙여서 로딩하는게 아닌 파일 로딩 시점에서 초기화가 시작된다는 점입니다. - css와 js가 적절히 분리되었다는 의미가 될 수도 있지 않을까요? 아닐 수도......-_-;;

Designer에는 다섯 개의 Manager 클래스들이 초기화 됩니다.

ControlManager - 스킨, 레이아웃 등 꾸미기에 사용되는 세부 속성들을 설정하는 Manager입니다. 사용자의 선택을 분류별로 보여주고 선택을 받는 경우 이들의 값을 얻어서 다른 Manager들을 사용해서 속성을 설정해주는 역할을 합니다.
LayoutManager - 레이아웃의 크기나 스타일 설정을 처리합니다.
StylesManager - CSS 스타일 설정과 관련된 모든 기능을 가지고 있습니다.
DragManager - Drag &Drop을 처리합니다.
PickerManager - ControlManager의 직접 꾸미기에서 폰트나 컬러를 선택하게 해주는 세부 컴포넌트들을 정의하고 있습니다.

ControlManager와 PickerManager는 내부적으로 Composite 패턴을 사용하고 있는것 같습니다.

예를 들면, ControlManager에 속해있는 Control.SetControl과 관련해서 살펴보면

Component - Control
Composite - Control.SetControl
Leaf - CommonSetControl, PhotoSetControl, MovieSetControl, UsetSetControl

과 같은 형태로 ControlManager에서 Control.SetContol 그리고 하위 클래스로 위임되는거죠.

결론?
아직 소스코드 전체를 다 읽지 못했고 js파일만 읽어서 무슨 분석이냐고도 할 수 있겠습니다만.. 일단 글을 끝내기 위해서 결론 항목을 만들어보았습니다. 적절히 분산된 클래스들과 잘 나누어진 스타일 데이타가 훌륭하게 조합된 소스가 아니었나 싶습니다.

(prototype.js를 제외하곤 전부 만드신 것 같은데 어느정도 인원이 개발기간이 얼마나 걸렸을까 매우 궁금해지네요. ^^;;;)

출처: 다음 블로그, Composite Pattern in Wikipedia

P.S.1 글을 쓰면서도 남의 소스코드를 분석해서 글을 써도 될까 고민을 많이 했습니다. 혹시 저작권 문제가 된다면 글을 바로 삭제하도록 하겠습니다.. (__)

P.S.2 틀린부분 당연히 있을 수 있습니다. -_-b

2007년 1월 10일 수요일

Novalet 사용기

Introduction
Ajaxian에 올라온 Novalet기사를 보다가 Vox보다 가볍게 만들어졌다는 기사를 보고 Novalet Beta를 신청하였습니다. 그런데, 신청한 사람들은 다 주는지 바로 메일로 주소가 날라오더군요. 바로 테스트에 들어가보았습니다.

맨들맨들한 첫 화면~

Create, Edit and Delete Instantly
Novalet의 가장 큰 특징은 블로그 페이지에서 바로 Post, Category, Page 등의 모든 정보를 Admin 페이지에 들어가는일 없이 바로 추가 삭제가 가능한 점입니다. 일반적으로 부르는 Admin(또는 Config)가 없고 동일한 스킨상에서 글을 쓰거나, 설정을 변경합니다.

글쓰기를 바로 그 자리에서~

각각의 포스트나 카테고리 항목도 블로그 화면에서 바로 제어가 가능합니다.

스킨위에서 설정하기 어려운 항목들은 우측의 Adminbar를 통하여 Setting 페이지로 이동하여 설정이 가능하게 되어 있습니다. Adminbar에는 네가지 항목들이 있습니다. Add Post, Manage, Settings, Log out이구요. Manage는 글에 대한관리를 Settingss에는

Settings에는 블로그 설정 사용자 설정 테마 설정을 할 수 있게 되어 있습니다.

[참고로, 이글을 보실 기획자 분들께 Novalet에서 제공하는 스킨은 하나입니다. 스킨 수정가능하지 않습니다. 똑같이 만들라면 만들 수 있습니다. 지금 가진 기능들 다빼면~ ^^]

하나밖에 없는 스킨~

Implementation
기본 라이브러리로 Prototype.js와 Script.aculo.us를 사용하였구요. 에디터는 TinyMCE를 사용하였습니다. Side의 Adminbar와 Top의 메뉴바를 제외하고는 다른 JavaScript는 보이지 않습니다.

Novalet이 가볍다고 기사는 나와있으나 실제 사용한 느낌은 그렇게 가볍지는 않다는 느낌입니다. TinyMCE관련 소스는 Minifying 및 Obfuscating이 되어 있으나 Prototype.js와 Script.aculo.us에 대해서는 Minifying처리가 안되어 있기 때문에 정식 버전이 나올경우 충분히 개선할 여지가 있을 것 같습니다.

에디터로 사용된 TinyMCE에 대해서도 다른 Plugin을 추가하지는 않았습니다.

Problem
문제는 스킨이 담을 수 있는 HTML의 범위를 넘어선 경우, 글 본문의 가로길이보다 더큰 이미지를 삽입하는 경우라던가, 잘못된 HTML이 삽입되어 레이아웃이 잘못될 경우 어떻게 될 것인가가 가장 큰 문제가 아닐까 싶습니다.

레이아웃보다 큰 이미지를 삽입한 경우

Conclusion
그래도, 사용자가 페이지 상에서 바로바로 에디팅할 수 있다는 것은 상당한 매력이 아닐까 싶네요.
아.. 그리고 다국어도 조만간 지원하지 않을까 싶습니다. 언어별 리소스가 en.js로 따로 분리되어 있네요 ^^

출처: Ajaxian의 NovaLet: More simple blogging

2007년 1월 3일 수요일

Vox에서 사용된 toolbar의 css hack

Vox의 toolbar에 적용된 css를 보면 처음 보는게 한가지 있는데요.

<a class="command-bold toolbar button" id="test3"><b>C</b></a>

특정 element의 class에 공백을 주는 방법이 있더군요. (저는 처음 봤습니다.)

a.button
a.button.toolbar
a.button.toolbar.command-bold
a.command-bold
a.toolbar
a.toolbar.command-bold
...

각각이 css에 적용이 될 수 있더군요. 각각은 우선순위를 가지고 있구요.
단계를 상세히 적을수록 우선순위가 더 높은 것 같습니다. vox에서는 각각의 비슷한 element들이 병렬로 연결됬을 때 공통된 style은 a.button에 정의하고 상세한 style은 a.button.command-bold와 같은 형태로 적용을 했더군요.

참으로 신기한 css의 정신세계라고나 할까요 ^^

Copyright
코드의 모든 권한은 Six Apart에 있습니다. Six Apart의 JavaScript 코드는 Copyright과 Disclaimer를 포함하는 조건하에서 재배포가 가능합니다.

Copyright (c) 2005, Six Apart, Ltd.
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

   * Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.

   * Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.

   * Neither the name of "Six Apart" nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

P.S. IE6에서 다중 클래스 적용 문제

<a class="command-bold toolbar button" id="test3"><b>C</b></a>에 대해서 command-bold class 적용하고 toolbar에 대해서 적용한 class에 대해서 각각에 대한 적용은 됩니다.

그런데 a.toolbar.command-bold와 같은 css는 적용이 안되고 에러가 납니다.
제가 실험을 제대로 안했네요. 죄송합니다. (__)

2007년 1월 2일 화요일

WTP의 HTML formatting

Eclipse의 WTP(Web Tools Platform Prjoect)는 웹과 관련된 여러가지 기능을 제공하고 있습니다.
개인적으로는 HTML 편집을 위해서 주로 사용하고 있구요. HTML의 자동완성 기능은 상당히 강력합니다.

attribute의 이름에 대한 자동완성기능

attribute의 값에 대한 자동완성기능

tag를 쌍으로 만들어주기부터 attribute설정 및 attribue값에 대한 자동완성 기능을 제공해줍니다.
이 외에도 닫아주는 태그가 빠진 경우 표시해주는 등의 다양한 기능이 제공되고 있습니다. 만....

개인적으로 잊어먹고 있던 기능이 있었는데요. Java Programming 할 때 사용했던 Format기능입니다.
단축키는 Java에서 사용했던 단축 키와 동일한 것 같습니다. (Java했을 때는 Windows, 지금은 Mac이거든요.)

아쉬운 점은 (아니면 제가 못찾았을 가능성이 높습니다. -_-;;; 아시는 분은 가르쳐 주세요 ^^) Format > Document를 하는 경우 긴 tag에 대해서 내려쓰기 정도만 지원되고 들여쓰기는 지원이 안되는 점입니다.

대신에 Format위의 Cleanup Document를 클릭하게 되면 Cleanup창이 뜨는데요.

Cleanup창에서는 Missing tag를 채워주기 부터 attribute의 이름을 소문자 또는 대문자로 일괄 변경, tag의 이름을 소문자 또는 대문자로 일괄 변경하는 꼭 있었으면 하던 기능이 제공되더군요.
(xhtml에서는 모든 태그들이 소문자로 작성되야 한다고 합니다. ^^;;)

P.S
개인적으로 이클립스로 js, html을 개발하면서 편하게 생각하고 있는 기능이 있는데요. html페이지를 Open with를 사용해서 브라우저 상에서 바로 볼 수 있는 방법입니다. (이클립스의 내장 브라우저로도 되지만, 파폭이나 IE에서 디버깅 등을 하기 위해서는 브라우저를 띄우는게 가장 좋겠죠.)

Eclipse의 Window > Preferences에 들어갑니다.
General > Editors > File Associations를 클릭합니다.
*.htm, *.html을 선택하고 Associatied editors에서 Add를 눌러서 외부 프로그램을 선택합니다.
Package Explorer에서 Open with를 눌러서 브라우져를 실행시키면 됩니다.

주의 : Mac에서는 사용못합니다. ㅠㅠ

2006년 12월 17일 일요일

Vox.com (2)

HTML Code
Vox.com의 소스를 보면 재미있는 부분이 많습니다. 먼저, 소스읽기를 해서 head 코드를 읽어보면 head 안에 script와 link 태그를 살펴보면 각각의 src와 href속성이 특이한 부분을 볼 수 있습니다.

보통 src나 href에 하나의 파일을 설정합니다만, Vox.com에 나와있는 소스에는 여러 파일들을 하나의 태그안에 링크한 거처럼 보입니다. 처음에는 새로운 문법이라도 나왔을까 생각하면서(-_-;; 그럴 리는 없죠?) 표준을 뒤져보기도 했습니다.

두번째는 소스에 나와있는 href나 src의 위치에 여러 파일들을 하나의 파일로 만들어서 배치하는 빌드를 가지고 있다는 가정에 몇 가지 실험을 해봤습니다.

link태그를 기준으로 다음의 파일들은 실제 위치에 존재합니다.

http://aka-static.vox.com/.shared:v19.6:vox:ko_kr/css/base.css
http://aka-static.vox.com/.shared:v19.6:vox:ko_kr/css/dialog.css
http://aka-static.vox.com/.shared:v19.6:vox:ko_kr/css/control-strip.css
http://aka-static.vox.com/.shared:v19.6:vox:ko_kr/css/flyout-vew.css
http://aka-static.vox.com/.shared:v19.6:vox:ko_kr/css/base.css?dialog.css,control-strip.css,flyout-view.css

그 와중에 나미님이 link에 사용된 href뒤의 파일들의 순서 및 개수를 바꿀때도 각각의 새로운 css 파일들이 생성된다고 알려주셨습니다.

Dynamic Css, JavaScript file Creation
즉, link나 script태그의 src, href 속성의 파일들의 요청을 해석해서 필요한 파일들의 집합을 하나의 파일로 동적으로 생성해냅니다. (*.* 호~ 참 편리하게도 만들었다는 생각이 들더군요. 저만 그런가요? ) script에 사용된 jsc의 경우에는 javascript파일을 minifying처리한 후에 필요한 여러파일들을 하나의 파일로 생성합니다.

Toolbar CSS
Vox.com 의 Toolbar에도 CSS를 깔끔하게 사용하고 있습니다. Toolbar가 위치한 editor의 html을 살펴보면 id가 compose-toolbar인 div가 있습니다. 그리고 그 안에 a 태그가 여럿들어 있습니다. 각각의 a 태그는 toolbar의 메뉴들입니다.

각각의 메뉴들을 DOM으로 만든다면, onMouseOver인 경우 css등을 이용하여 선택된 화면을 보여주고 onClick시 어떠한 동작을 수행하는 것을 나타내기 위해서 sytle을 변경하기 위한 여러 코드가 들어가게 됩니다.

그러나, Vox.com의 Toolbar는 Toolbar의 이미지를 하나로 통짜로 만든 후 css를 통해서 이미지의 위치를 이동시켜 보여줌으로서 Toolbar의 이미지 관리를 쉽게하였습니다. 또한 css의 hover기능을 이용함으로서 onMouseOver에 대한 기능을 추가할 필요가 없어졌죠.

따라서, click에 대해서만 따로 처리하고 있습니다. click의 경우에도 일괄적으로 click event를 듣는 클래스에 등록시킨 후 event를 발생시킨 target이 class의 이름을 통해서 어떠한 동작이 발생했는 지를 처리하고 있습니다.

Toolbar의 부모클래스인 Component에서는 모든 이벤트에 대해서 들을수 있도록 이벤트를 등록하고 있습니다.

Toolbar에서는 이벤트 중 click이벤트만 처리를 합니다.

Conclusion
Vox.com의 코드를 보면 상당히 단순하면서도 확장이 쉽게 될 수 있는 구조를 가지고 있습니다. DOM에서 html을 생성해내는 구조는 html 페이지와 css를 이용하여 밖으로 뺐구요. 동작에 관련된 구조도 Observer 클래스와 Componenet 클래스를 계층화 시켜서 쉽게 동작하도록 처리되어 있습니다.

이 때까지 봐온 코드중에서 가장 깔끔한 구조를 가진 것 같네요. ^^

Copyright
코드의 모든 권한은 Six Apart에 있습니다. Six Apart의 JavaScript 코드는 Copyright과 Disclaimer를 포함하는 조건하에서 재배포가 가능합니다.

Copyright (c) 2005, Six Apart, Ltd.
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

   * Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.

   * Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.

   * Neither the name of "Six Apart" nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

2006년 12월 12일 화요일

Vox.com (1)

About
Vox는 Six Apart에서 만든 블로깅 서비스입니다. 블로그를 메인으로하나, Social Network를 중시하는 서비스로 다음의 특징들을 갖습니다.

Picking of predefined designs
Layout설정 및 미리 정의된 테마를 쉽게 변경할 수 있습니다.

Uploading videos
자신이 가진 동영상을 업로드하면, 웹에서 쉽게 재생할 수 있는 Flash로 변환시켜줍니다.

동영상을 업로드합니다.

업로드된 동영상은 동영상에 대한 상세 정보를 설정할 수 있는(폼형태의) 새로운 글에 링크를 가집니다.

[PV]..로 되어있는 링크를 클릭하면 동영상에 대한 세부내용을 적을 수 있는 다른 글로 이동됩니다.

삽입된 동영상은 실제 동영상을 embed 등의 태그로 삽입되어 있는 형태가 아니라 동영상이 캡쳐된 이미지와 실제 동영상을 재생할 수 있는 페이지의 링크를 div로 감싼 형태입니다.

블로그 글에 삽입된 동영상에 대한 이미지와 링크

동영상의 이미지를 클릭하면 동영상과 동영상에 대한 정보를 상세하게 적을 수 있는 페이지로 이동하게 됩니다.

블로그 글에 대한 또다른 글을 생성하여 동영상, 사진, 음악에 대해서 정해진 폼을 통하여 정보를 얻기 위한 것은 좋으나 사용자가 과연 각각을 따로 싶어하고 싶을지는 의문이 가는 점이기도 합니다.

Control which posts are available to the public
Post 내부에서도 Social Network내부의 특징에 따라 공개를 다양하게 설정할 수 있습니다. 이 외에도 Social family, friends, neighborhood 등의 Network에 대해서 설정을 달리할 수 있습니다.

Linking of content from other sites, such as: YouTube, Flickr, iStockphoto, Photobucket, etc.
Compose(새글쓰기)에서 Photos, Audio, Video, Books, Collection에 대해서 링크를 생성(각각의 서비스에 Mashup을 통하여 접근하여 데이터를 가지고 옴과 동시에 서비스에 대한 링크도 생성이 됩니다.)할 수 있고 별점을 매기거나 책에 대한 평가 정보를 추가할 수 있는 폼도 제공합니다.

YouTube mashup

위의 다이얼로그를 통해서 링크가 삽입되고, 블로그 글에서 링크를 클릭할 때 각각의 Photo, Audio 등에 대해서 평점이나 동영상에 대한 느낌을 적을 수 있는 폼이 나옵니다.

Google AdSense
그리고, 다른 블로그 서비스와 달리 Vox.com내의 광고를 통해서 수익모델을 만들고 있습니다.

출처 : Wikipedia.org의 Vox항목

2006년 11월 29일 수요일

Virtual Earth API가 공개되었습니다.

InfoQ의 기사에 Virtual Earth 2lines of JavaScript라는 기사가 올라왔습니다. Google Map을 사용할 때보다 훨씬 빠른 느낌에 드네요. 3D로 보면서 방향 전환도 가능하네요 ^^

위 이미지는 Virtual Earth의 Hello World에서 캡쳐한 사진입니다. 동작은 Google Map과 동일합니다. div에 image를 감싼 형태로 마우스 이동시 이미지를 받아오는 기법을 사용하고 있구요. 파폭에서본 화면입니다.

출처 : InfoQ - Virtual Earth 2 lines of JavaScript

P.S.
IE에서는 프로그램을 설치하라고 하는군요!! .Net Framework 2.0이 함께 설치됩니다.

2006년 11월 25일 토요일

Ohpy.com

Introduction
나우콤에서 개발한 Ohpy(Open + Homepy의 합성어)는 기존의 카페, 블록, 미니홈피 등을 통합한 서비스로서 모든 서비스를 포함한 홈페이지 서비스를 제공하는 것을 목표로 하고 있습니다. 그렇기 때문에 형태 자체도 기존의 블로그나 미니홈피와는 다르며 카페의 형태에 더 가까운 것 같습니다.

특이사항으로는 상거래 기능을 지원하기 위해서 공동구매, 장터 게시판이 따로 카테고리로 제공되고 있으며 안전한 거래를 위해서 오피 안전거래 서비스를 도입하고 있습니다. 수수료는 저렴하게 받겠다고 하는 군요. ^^

Homepage

우측 메뉴의 Visitor, Ranking, 동보쪽지를 봤을 때는 카페같은 커뮤니티 지향적인 모습을 볼 수 있습니다.

Ohpy에서 가입을하고 (--;; 클럽박스에서 1300point를 준다길래 덜컥 가입해 버렸습니다. 쿨헉~) 홈페이지를 만들고 나면 제공되는 기본 게시판은 3개입니다. [공지사항, 자유게시판, 사진첩] 세개의 게시판이 겉으로 보기에는 동일한 모양새를 취하고 있고 내부 에디터의 경우에도 동일하게 사용됩니다.

에디터의 마지막을 보면 Creative Commons License에 대한 조항이 눈에 띄는데요. Creative Commons License를 보여주는 건 좋은데 사용자한테 대놓고서 '저작물의 영리적 이용 허락을 허락합니까?'로 묻는다면, 기분 좋다할 유저는 별로 없을 것으로 생각됩니다.. (나만 그런가? ^^;;;)

트랙백이나, 덧글(제가 못찾은건지 모르겠습니다)은 지원하지 않으며 거의 Zeroboard와 형태가 유사합니다. Zeroboard의 데이터를 임포트 가능하게 되어있습니다.

아.. 블로그와 다른 홈페이지이기 때문에 대문에 대한 관리를 따로 두고 보여줄 게시판의 글들이나, thumbnail들을 보여줍니다. 기존 카페의 대문이랑 큰 차이는 없으며 Naver의 프롤로그 같은 형태라 보시면 될 듯 싶습니다.

관리 모드의 경우, 오피마법사와 구성요소마법사라는 것을 두어서 관리 메뉴를 처리하고 있습니다. (개인적인 의견입니다만... 오피스의 Wizard같은 의미로 사용했는지는 모르겠지만, 관리메뉴를 굳이 마법사라고 바꾸는 -기존 블로그나 카페의 관리메뉴와 차이도 없으면서- 이유는 도통 이해를하지 못하겠군요. 제가 무식한건지 ㅡㅡ;)

오피 마법사를 클릭하게 되면 관리모드에 들어가고, 구성요소 마법사를 클릭하게 되면 다이얼로그가 뜨면서 배경 및 기타 내용에 대한 세부설정 다이얼로그가 나옵니다. (따로 둔 이유도 잘 모르겠네요.)

관리모드는 다섯 단계로 이루어집니다.

기본설정
디자인관리
메뉴관리(메뉴는 Tatter 1.1처럼 Drag &Drop이 추가되었답니다.)
게시판관리(장터 및, 공동구매 게시판이 포함되어 있습니다.)
회원관리(시삽 및 회원관리도 따로 있구요.)

Implementation
기다리던 소스 분석으로 들어가보면 눈에 익숙한 코드들이 눈에 많이 띄입니다. 사용된 라이브러리들은 다음과 같습니다.

prototype.js
Lightbox JS 2.0
script.aculo.us의 Effect
Tooltip.js
Mr.Proto님의 Prototype Window class를 축소한 window
dhtmlHistory
whizzywig 에디터

소스코드는 Obfuscating이나 Minifying을 하지 않은 코드들입니다. 오픈 소스를 많이 사용하였구요. 아쉬운 점은 prototype을 사용했다면 좀 더 재사용가능하게 Class로 상속받으면 낳지 않을까 싶은데.. 대부분이 function기반으로 구현이 되어 있네요.

출처 :

Ohpy.com

dhtmlHistory는 Koders.com에서 찾았습니다.

2006년 11월 22일 수요일

Remember The Milk

Remember The Milk는 나온지는 좀 되었기는 하나 가입할 때의 UI가 (@hof님에 따르면) 아주 직관적이며 알기 쉽게 되어있다고 하여서 나름 분석에 들어가 보았습니다.

Remember The Milk는?
할일 목록을 웹상 또는 이메일 상에서 쉽게 관리하기 위한 서비스입니다.

Implementation
Remember The Milk의 js파일은 크게 두가지로 구성되어 있습니다. 리소스를 관리하기 위해서 사용된 ko.hompage.32.js는 'HOMEPAGE_'로 시작되는 116개의 연관배열이 들어있습니다.

또 하나의 파일은, rtm.signup.9.js로 obfuscating은 되어 있지 않고 minifying만 되어 있습니다. prototype같은 라이브러리를 사용하지 않고 자신들의 코드만으로 18810 bytes의 적은 용량의 js만 사용하고 있습니다.

동작은 간단합니다. 각각의 input element에서 keyup 이벤트가 발생하는 경우 이를 체크하여서 input 옆의 span 태그에 성공메시지 또는 실패메시지의 html코드를 innerHTML로 삽입하는 구조를 취하고 있습니다.

코드 상에서 확인하는 것도 크게 어렵지는 않습니다만, 코드 주석에 Don't steal, Please라 되어 있네요. ^^;;
스크립트 상의 코드만 보고 이렇다 저렇다 말하긴 어렵겠지만, 단순하면서도 필요한 곳에만 사용한 스크립트 코드가 참 마음에 드네요.

리소스 관리를 통해서, 영어권 외의 시장까지 노릴 준비를 했다는 점,
필요한 곳에만 스크립트 사용을 함으로써 파일 전송과 관련된 리소스를 대폭 줄였다는 점,
이미지와 텍스트만 사용했지만 사용자에게 무엇이 문제인지를 알 수 있게하는 직관적인 인터페이스

이러한 점이 Remember The Milk만의 큰 장점이 아닐까 싶네요. 아... 가입쪽만 분석해봤습니다. TODO List 쪽은 보지 않았습니다.