옷장수 나라

2006년 3월 31일 금요일

Web Office가 나가야 할 방향

개인적으로 Office 개발에 몸을 담고 있어서 Web Office에 대해서 많은 관심을 가지고 있습니다.

패키지로서만 존재하던 Office가 Web을 만나서 어떻게 진화할 것인가?

'지민아빠'님과도 토론을 한적도 있고 직장 상사이신 ㅇ대리님과 논쟁을 벌인적도 있습니다. 1년반이라는 짧은 기간의 경험만으로 답을 내기는 어려운 문제였고, 어찌보면 답이라는게 없을 수도 있습니다. 그래서 나름대로 다른 사람들(Macmanus아저씨 같은 유명한 사람들 ^^;;)의 블로그 글들을 뒤져봤습니다.

Web Office가 지녀야할 특징들을 살펴보면 다음과 같은 조건이어야 할것입니다.

Web 상에서 실행되어야 합니다. (설치과정이 없어야 합니다.)
Web 상에서 작성된 문서들은 Web상에 저장할 수 있어야 합니다.

그러면, 이분들이 생각하는 Web Office를 사용함으로서 얻을 수 있는 장점은 어떠한 것들이 있을까요?

Collaboration - between people, between machine, between service(Mash up)
Web 문서(html 페이지)처럼 쉽게 배포하고 공유할 수 있습니다.

예로 들자면, 10명의 사람들에게 문서를 보내고 이 문서에 대한 의견을 듣고 싶다고 가정해보구요. 현재의 시스템에서는 먼저 10명의 사람들에게 doc으로 작성한 문서를 메일로 배포를 하고 메일을 통해서 피드백을 얻는 형태가 될 수 있습니다.

그러나, Web Office를 사용하게 되면 작성한 문서를 Web 상에 쉽게 배포를 하고 10명의 사람들에게 이 문서에 대해서 수정하거나 자신들의 의견을 추가하게할 수 있습니다. (Wiki 형태를 생각하시면 좋겠군요.)
Reduces Costs - Web Office라함은 Web을 기반으로 하여서 다른 시스템에 쉽게 통합될 수 있는 형태를 지니게 됩니다. (전재 조건으로 Web에서 동작한다 뿐만아니라 HTML 데이터를 생성하고 이를 바탕으로 다른 Web 기반 시스템과 상호 작용할 수 있음을 가정합니다.)

이를 통하여 파트너쉽 또는 아웃소싱이 쉽게 이루어질 수 있고, 이를 통해서 비용을 줄일 수 있습니다. 또한 백업, 업그레이드, 배포에서 발생할 수 있는 비용도 줄일 수 있습니다.
Universal Access - Device independant, Location independant
회사 이외의 장소에서 회사 이외의 Computer나 Mobile Device로 접근하고 Update하는 것이 가능해지게 됩니다.
Versioning - version control
해당 문서에 대해서 Versioning을 함으로서 문서의 갱신이나 수정을 추적하거나 복원등을 할 수 있습니다.
기타 - 바이러스 걱정을 할 필요가 없다.

그럼, 반대로 Web Office를 사용함으로 발생할 수 있는 문제점들은 어떠한 것이 있을까요?

보안이슈 -
Web Office 기능을 제공하는 회사의 제품을 이용할 때 자신들의 문서가 외부 유출없이 잘 관리되리라고 확신할 수 있을까요? 단순히 Ajax기능만을 추가함으로서 이러한 이슈를 해결할 수는 없을 것입니다. zot.com이나 intranets.com이 traffic을 얻지 못하는 이유중의 하나로도 볼 수 있을 것입니다.
인터넷 의존성
제한된 기능들(limited features)
프로그래밍하기 어렵다.

1번과 2번의 경우는 Web Office 뿐만아니라 Web이라는 플랫폼이 안고있는 문제라고 봐야할 것 같습니다. 3번의 경우에는 현제로서는 Word, Excel, Powerpoint 만한 기능을 Web에서 가질 수는 없다고봐야할 것 같습니다.

그러나, Mashup 등을 통하여 기존의 오피스에서는 얻을 수 없는 기능들을 Web에서는 가질 수 있으므로 단순한 비교는 해서는 안된다고 생각합니다. 4번의 경우에도 Win 3.1이나 C++이 처음 나왔을 때를 생각한다면 크게 문제가 될 것은 없다고 생각해야 합니다.

그러나, Web Office가 좋다, 나쁘다 등을 논의하기 전에 Web이라는 공간에 대한 전제조건이 항상 포함되어야 함을 잊지 말아야 합니다. 사용자가 혼자서 문서를 작성하는 것이 아니라는 점을요.

참고 자료들

Richard MacManus 님의 'Why you need a Web Office'
Slashdotted의 'Office Tools On The Web'
Rod Boothby 님의 'The Next Wave in Productivity Tools Web Office'
Liam Breck님의 'Web 2.5: The Web Office is Tiny Niche'

DOM 객체에 EventListener 등록

Javascript에서 Load, Interpret, Run 등의 Event를 받아서 처리하기 위해서는 EventListener에 등록을 시켜줘야 합니다. 이 때 사용되는 메소드가 attatchEvent()와 addEventListener()입니다. W3C에서는 addEventListener()를 사용하며 IE에서는 attatchEvent()를 사용합니다.

이 때 주의할 점은 IE에서는 event 이름 앞에 "on"을 붙여주어야 하는 점입니다. 그리고, w3c DOM인 경우 마지막에 받게 되는 파라미터는 이벤트의 발생 순서를 의미합니다.

※ addEvent를 사용하여 handler를 추가하게 되면 호출된 handler에서 this를 호출하게 되면 handler가 속해있는 object가 아니라, element가 호출됩니다. 이를 해결하기 위해서 element의 property에 handler가 속해있는 object의 인스턴스를 넣어주는 것도 하나의 방법입니다.

B element를 포함하고 있는 A element를 가진 웹페이지를 만든다고 가정을 하구요. 두 element 모두 onClick event를 처리하는 function을 가지고 있다고 가정을 합니다. 이 때, 어떤 Element가 이벤트를 먼저 받을까요?

정답은 브라우저와 addEventListener의 마지막 파라미터에 따라 달라집니다. 과거 익스플로러와 넷스케이프간의 브라우저 전쟁이 있었던 무렵에는 두 브라우저의 이벤트 순서는 완전히 달랐습니다.

B element를 클릭했을 경우 익스플로러에서는 B element에서 먼저 이벤트를 받은 다음에 A element으로 이벤트가 발생하게 됩니다. (이를 'Bubbling'이라고 합니다.)

반면에, Netscape에서는 A element가 이벤트를 먼저 받고 그 다음으로 B element에서 이벤트가 발생하게 됩니다. (이를 'Capturing'이라고 합니다.) Netscape 4에서는 Capturing만 지원합니다.

그리고, 이를 해결하기 위해서 w3c에서의 해결책은 addEventListener의 마지막 파라미터의 값에 따라 caturing(true) 또는 bubbling(false)을 처리할 수 있도록하는 해결책을 내놓게 됩니다.

브라우저마다 이벤트 처리방식을 다르게 하지 않을거라면 세번째 파라미터를 true로 사용하는 일은 없겠죠 ^^;;

- event를 설정하는 방법에는 위의 addEventListener()방식을 사용하는 방법 외에도 여러가지가 있습니다.
- 가장 잘 알려진 방식인 element.eventType = callback;으로 설정해주는 방법도 있고 (예: div.onClick = callbackMethod;)
- 또 다른 방법으로 element[elementType] = callback;같이 배열을 이용하는 방법도 있습니다. (예: div[onClick] = callbackMethod;)
- 위의 방법은 모두 똑같습니다.

참고사이트
W3C의 DOC관련 사이트 :
http://www.w3.org/TR/DOM-Level-2-Events/events.html
Event order :
http://www.quirksmode.org/js/events_order.html

Boolean 값

Javascript에서 Boolean 값은 true 또는 false를 가질 수 있습니다. 이 외에도 가질 수 있는 값이 한가지 더 있는데요. undefined 입니다. 다음과 같이 testBoolean()이라는 function을 만들고 호출을 해보면 다음의 결과를 얻을 수 있습니다.

function testBoolean(b){
return "This is " + b;
}

testBoolean() 출력 결과는 다음과 같습니다.

testBoolean(true) => This is true
testBoolean(false) => This is false
testBoolean() => This is undefined

Boolean값을 if에 넣고 테스트할 때 true, false, undefined가 들어올 수 있다는 점에 주의해야 되겠더군요.

2006년 3월 30일 목요일

Javascript관련 리소스들

1. Mozilla developer center

Mozilla developer center(MDC)는 제가 JavaScript관련 작업을 할 때, 가장 많이 이용하는 사이트중 하나입니다. (또 다른 하나는 Prototype API 사이트입니다.) MDC는 MediaWiki로 나누어져 있기 때문에 카테고리 정리가 잘 되어 있는 사이트 중의 하나입니다.

MDC(Mozilla develpoer center)의 구성

Topics
- Extensions
- Plugins
- ...
Technologies
- AJAX
- CSS
- DOM
  - Gecko DOM Reference: DOM에 대한 property와 method 등에 대해서 잘 정리되어 있습니다.
  - Tools: Mozilla에서 Web 개발할 때 필요한 프로그램 목록이 여기에 있습니다.
    - Firebug: Firebug는 디버깅, CSS 변경 등 여러가지를 확인, 실험해 볼 수 있는 Firefox 플러그인 입니다. JavaScript 개발의 필수품(Web Developer도 저의 완소 프로그램입니다. ^^)이라고 할 수 있습니다.
    - DOM Inspector
    - Mouse-over DOM Inspector
    - Aadvark Firefox extension
- HTML
- JavaScript
  - Core JavaScript 1.5 Reference: JavaScript의 모든 Reference들을 다루고 있습니다. (없는 부분도 있기는 합니다만, 없는 경우 w3c 표준안으로 링크가 되어 있습니다. -아닌 부분도 있기는 하지만요.)
  - Core JavaScript 1.5 Guide : JavaScript의 전반적인 소개 및 Type, Object, Operator, Function에 대해서 다양하게 다루고 있습니다.
- ...

※ Reference의 경우 Global Object나 Function을 보는데 좋고 Guide는 JS 1.5 문법에 관련된 내용 위주로 보시면 좋을 것 같습니다. DOM을 보시려면 Gecko DOM Reference를 보시구요.

한글 모질라 사이트에도 훌륭한 자료가 많이 있습니다.

웹 개발자 자료 : 한글 모질라 사이트에서 제공하는 웹 개발자 자료입니다. w3c와 Netscape, KIPA 등의 외부 자료 링크목록이 잘 정리되어 있습니다.
한글 모질라 포럼: 한글 모질라 포럼 게시판으로 훌륭한 Q&A가 많습니다. 질문을 올리셔도 되구요. (저의 경우에는 답변을 받지 못했습니다... 답이 없는 문제였거든요. ^^)

2. MSDN

사용자가 가장 많은 IE를 지원하려면 필수적으로 들러야하는 MSDN입니다. MSDN을 사용하시기 전에 주의하실 점은 IE를 사용할 것입니다. Firefox를 사용하실 경우, Properties/Methods에 대한 내용을 볼 수가 없습니다. 그래서 저같은 경우는 IE 탭을 사용하고 있습니다.

MSDN에서 웹 개발과 관련된 항목들은 Web Developer 항목에 정리되어 있습니다.

Web Developer - Web Developer 관련 항목의 시작 페이지

저의 경우에는 Firefox 기준으로 개발을 하고, IE는 나중에 Firefox와 다른 부분만 추가 개발합니다.(IE에는 Firebug같은 프로그램이 없거든요.) 따라서, MSDN에 이용할 때는 HTML and DHTML Reference만 사용합니다.

3. OPERA

오페라의 경우도 훌륭한 브라우저이기는 합니다만, 사용자가 별로 없기 때문에, (이논리대로라면 IE에서 개발해야겠죠 ^^;;) 테스트할 때만 사용합니다.

opera developer tools - DOM console, css editor, dom snapshot

4. Webkit

Safari의 경우에는 Apple Developer Connection을 접속하면 됩니다. (대부분의 해외사이트에서는 개발과 관련된 항목을 http://developer.사이트명.com에 둡니다. 또는 여기로 접속하면 자신들이 지정한 위치로 포워딩하기도 합니다. - adobe)

ADC Home > Internet & Web > Safari

Safari에서 디버깅이 필요한 경우에 사용할 수 있는 방법이 있습니다. Webkit의 Drosera를 사용하는 것입니다. (Webkit의 경우 Safari의 다음버전 엔진으로, 다르다고 볼 수 있지만, 나름대로 쓸만합니다.)

5. Regular Expression

RegExp: 정규표현 식 중 Javascript에 관련된 내용을 다루고 있습니다.
※ 이 사이트에 들어가보시면 JavaScript뿐만 아니라 다양한 정규표현식을 다루고 있습니다. (요즘들어 느낀거지만, 다양하지는 않은 것 같습니다. -_-a )

6. Javascript, HTML 및 AJAX 참고하면 좋은 사이트와 기사들

jinoxst님 블로그 : AJAX, JSDoc, JsUnit등의 다양한 내용들이 한글로 제공되는 블로그입니다. 정리 및 설명이 진짜 잘되어 있는 블로그입니다.
cadvance.org : 건달콩(RogueBean) 님이 추천해준 사이트 - 전반적인 HTML, XHTML, Javascript가 잘 제공됩니다만, Javascript의 경우 사용자 정의 객체 등에 관한 자료가 없습니다.
koxo.com : 자칭 미남형 아저씨가 추천해준 사이트, 뭔가는 많은데 좀 찾기 힘들더군요.
JSDoc : Javascript를 Javadoc형태의 문서로 생성해주는 프로젝트입니다. Perl환경을 설치하고 실행하면 됩니다.
JSUnit : Javascript testunit 사이트입니다.
XMLHTTPRequest : w3c의 working draft
crokford.com: crokford.com에서 제공하는 javascript 관련 링크들
W3C - DOM Level2 Style specification

7. Javascript Tutorial들

Simon Willison's Weblog : ETech에서 강좌하기 위해서 사용된 자료라고 합니다. 명확하게 잘설명되어있어서 속성으로 보기를 원하시는 분들은 좋을 것 같네요.
w3schools.com : 지민아빠님이 추천해주셨던 사이트. HTML, XHTML 및 Javascript등을 쉽게 해볼 수 있게 해둔 사이트입니다.
From DHTML to DOM scripting : DHTML과 DOM에 대한 설명이 잘 되어 있다.
O'Relly 책들 : 이건 자바 책이구나 ^^;;
Coding forum: DOM scripting에 관한 FAQ
Tag Overview: w3schools.com의 태그 overview
Ajax Tutorial : 출처 ajaxian
Max Kiesler님의 Ajax tutorial:
XML과 JSON 변환하기 : XML 을 JSON으로 변환시키는 정규표현식 같은 규칙에 관한글(?)
GData : 모음의 모음?
Carson Workshop의 How to Build a Web App:
BootCamp Tutorial
RSS and AJAX: A Simple New Reader
What I didn't know about XHR
Efficient JavaScript - Opera Developer Community

8. execCommand 가이드

Midas Specification : 모질라에서 정의한 execCommand 명령에대한 마이다스 스펙
Command Identifier : MS ie의 execCommand 스펙

9. Javascript Tool

IE관련 (Ajaxian의 기사)
Web Development Helper : debug/trace, page's state, DOM inspector등을 제공
Internet Explorer Developer Toolbar : MS 제공 툴바

Firefox관련
FIREBUG : Firefox 디버깅 툴
Web Developer Extension: DOM 구조 등, 디버깅을 위해서 사용할 수 있는 툴

기타
JSON 변환 툴 : xml을 json으로 변환해줍니다.
Ajax Toolkit Framework (ATF)

10. Javascript Framework

The Latest Trend: Javascript Frameworks on the Server Side
Prototype: API한글 번역, 소개글, 퀵가이드 , 프로토타입을 기반으로 한 라이브러리들

11. CSS

Position is Everything
Details on CSS changes for IE7
leezche님의 글에 올라온 CSS 한글 번역문 : Trio 홈페이지 CSS2
leezche님의 글에 올라온 CSS Design Korea
nmind님의 CSS핵 정리
CENTRICLE.COM의 "Will the browser apply the rule(s)?"
quirksmode - 여러가지 hack이나 디버깅, html/css/js에 관해서 풍부한 자료를 가지고 있는 사이트 아쉽게도 rss 제공 안된다. -_-;
maratz.com의 Essentials of CSS Hacking For Internet Explorer - IE hack과 관련하여 총정리(?)

12. Tutorial for JavaScript Info

MicroSummary : <link rel="microsummary" href="microsummary.txt" /> 를 이용하여서 작은 RSS처럼 사이트의 요약본과 갱신을 알려주는 역할을 합니다. Firefox에서 제공되는 기능입니다.
MD5 Library : 다양한 언어로 구현된 MD5 라이브러리입니다. (JavaScript도 제공)

테터에 구글맵을 붙여보자~

테터에 구글맵을 붙이려고 테터 소스를 많이 뒤져봤습니다.[--;;; 많이는 아니구요]
찾아보던 중 구글맵을 붙이기 위해서 몇가지 문제점(? 제약사항이라고 할수도..)을 발견했습니다.

1. 테터에서 본문중에서 script 태그 지원을 하지 않습니다.
2. 구글맵을 사용하기 위해서는 발급받은 Google Map Key를 HTML Header에 추가해야 합니다.
3. 테테에서 헤더(<html><head></head></html>을 생성하는) 를 생성하는 코드가 따로 존재하지 않습니다.
헤더는 각각의 에디터나 파일들이 모두 가지고 있으며(EAF 프레임웍에서 빌드시 자동으로 완성된 헤더코드를 모든 html 또는 php 파일에 넣어주는 것으로 생각됩니다.)

테터가 문제가 있다는 것은 절대 아닙니다.!!
언제나, 잔머리를 잘굴리는 '옷장수'로서는 다음과 같은 방법으로 붙여보았습니다.

구글 맵 키를 먼저 발급 받습니다.
[Google Maps API에서 발급 받습니다.]
헤더가 들어있는 모든 파일들을 검색해서 다음의 코드를 삽입합니다.
<script src="발급받은 Google Map 키를 넣습니다." type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[

   function onLoad() {
   if (GBrowserIsCompatible()) {
   var map = new GMap(document.getElementById("map"));
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());
   map.centerAndZoom(new GPoint(127.544,37.329), 15);
   }
   }

//]]>
※ 귀찮으시면 2번은 생략해도 됩니다. 에디터 창에서 구글맵이 안보일 뿐입니다.
테터에서는 블로그의 내용이 생성되어 다른 사람에게 보일 때 최종적으로 Skin 파일의 HTML 구조 안으로 삽입되게 됩니다. 따라서~ 테터의 스킨관리 페이지로 들어가서 스킨 편집을 눌러서 2번에 입력했던 코드를 다시 삽입합니다.
코드의 의미는 다음과 같습니다.
   //이코드가 존재하는 HTML 페이지가 로딩될 때 다음의 코드를 실행합니다.
   function onLoad() {
   //Google Map이 지원하는 브라우져인지 체크를 합니다.
   if (GBrowserIsCompatible()) {
   //구글맵의 모든 기능을 지니는 GMap 클래스('map' id를 지닌)를 생성합니다.
   var map = new GMap(document.getElementById("map"));
   //구글맵을 상하좌우로 이동시킬 수 있는 컨트롤을 추가합니다.
   map.addControl(new GSmallMapControl());
   //구글맵을 MAP, SATELITE, HYBRID 형태로 설정하는 컨트롤을 추가합니다.
   map.addControl(new GMapTypeControl());
   //맵이 다음의 GPoint(위도,경도)를 중앙에 위치시키도록 설정합니다. 15는 depth
   map.centerAndZoom(new GPoint(127.544,37.329), 15);
   }
   }
<div></div>태그를 사용하여 맵을 추가합니다. 이 때 HTML코드를 삽입해야하므로 HTML 모드에서 추가해야하며, 앞의 자바스크립트 코드에서 정의하였던 'map' 아이디를 추가하는 것도 잊으시면 안됩니다.
<div id="map" style="width: 500px; height: 300px"></div>

이상이 옷장수의 편법으로 테터에 구글맵 붙이기 작업이었습니다. 한일은 별로 없으면서 코드 뒤젹거리는 일은 매우 많군요. 테터에서 헤더를 따로 생성하는 코드가 있었으면 하는 바람도 있었구요.

가장 안좋은 점은 구글맵 자체에서 한국 지도는 매우 허접으로만 제공하기 때문에 붙일만한 가치가 별로 없었다는 점입니다. --;;;; 크~

구글 맵 API documentation이구요. 여기 예제를 사용했습니다.
http://maps.google.com/apis/maps/documentation/#Introduction

쓸만한 Javascript 이클립스 플러그인 [JSEclipse]

쓸만한 Javascript 이클립스 플러그인이 없어서 이리저리 기웃거리던 중 Ajaxian에서 InterAKT(Adobe가 인수하였습니다.)의 JSEclipse를 소개하는 기사를 봤습니다. 원래는 상용이었다가 Free 버전을 내놓았는데 상당히 마음에 드는 기능이 많더군요. 가장 눈에 띄는 놈이 Code completion입니다. 자바의 Code Completion처럼 잘 작동합니다.

Code template, Editing Assistance 등의 기능도 제공합니다.[이기능은 따로 사용해보지 않았습니다.] 그리고, 마음에 드는 것 중 하나는 Outline에서 JavaScript 파일의 구성을 잘 보여준다는 점도 마음에 들더군요.

이 외에도 'F1'을 누르는 경우 Netscape Communications Corp에서 제공하는 Core Javascript Reference 1.5도 포함되어 있는 점도 마음에 듭니다.

Javascript 이클립스 플러그인 중 가장 마음에 드는군요. 더 나은 기능 있는 플러그인이 있으면 소개좀 시켜주세요 ^^

출처 :

Ajaxian - JSEclipse 1.5 Released
Interakt - JSEclipse

P.S:
Mac에서 설치하는 경우 UTF-8로 작성한 js파일의 경우 워크스페이스의 인코딩을 따르지 않네요. 제가 잘못한것인지 몰라도 파일 각각을 UTF-8로 설정해야 했었습니다.

P.S.2:
Windows> Preferences > Content Type에 들어가면 Text 아래의 항목에 JavaScript 항목이 있습니다. 이를 클릭하고 File associations의 아래에 있는 Default Encoding 항목을 UTF-8로 변경합니다. 이 부분이 변경되지 않으면 (P.S에 나와있는 방법만 사용하면) 새로 생성되는 파일은 이클립스 디폴트 인코딩 값을 사용하게 됩니다.

2006년 3월 29일 수요일

그녀는 애교만점~ [06.3.29]

그녀의 매력에 더 빠지고 싶으시다구요?..