왜 우주선을 타고 별들을 향해 여행하는 것이 불가능한지 12 가지 이유라는 내용의 글을 읽어 보았다.

원문의 출처 는 Encyclopedia 라고 하는데 링크가 깨져 있어서 찾을 수 없었다. 다만 번역 되어 있는 글을 볼 수 있었는데 번역 하신 분들은 "IT사역위원회" 라고 하신다.


이 글을 거꾸로 생각해 보면 12가지 문제를 해결하면 어느정도 우주여행의 실마리를 찾을 수 있다는 이야기가 된다. (자아 이제 하나씩 살펴보자) ^^


  1. 신체의 악화 (Deterioration)
    • 문제점: 중력이 없는 상태에서 오래동안 있으면 몸이 약화된다.
    • 실마리: 가속과 감속에 필요한 가속압력을 이용한다.
  2. 낡아짐과 고장 (Wear and Breakdown)
    • 문제점: 오래 동안의 우주선 가동으로 장비가 낡아져 고장이 생긴다. (15년간의 가동으로점도 다양한 문제점이  있었음)
    • 실마리:  계속 개선되어야 할 사항이고, 이에 따른 우주여행의 시간에 제약이 따름. (중간 기착지 필요)
  3. 방사능 위험 (Radiation Hazards)
    • 문제점: 우주공간에 존재하는 고에너지 입자(X-ray,Cosmic rays ... )들이 사람에게 문제가 됨.
    • 실마리: 자기장이나 차폐막과 같은 구조물 아래 중앙 부분에 거주공간이 존재하여야 할 필요가 있음.
  4. 유성들 (Meteoroids)
    • 문제점: 크거나 작은 물체에 충돌할 가능성이 매우 높다.
    • 실마리: 이 문제 때문에 보다 정밀한 관측 장치 및 "소규모 방해물 요격장치" 회피장치 등이 필요하다.
  5. 가능성 없어 보이는 수리작업 (Repairs Unlikely)
    • 문제점: 100년 이상 걸리는 여행에 심각한 고장이 일어난다면 수리는 불가하다.
    • 실마리: 2번 문제와 더불어 이러한 문제 때문에 우주선을 높은 속도 까지 가속하여 운항시간을 단축 하여야 하며, 중간 기착지가 필수 적이다. 가능하면 단거리 항행 쪽이 유리하다.
  6. 멀미 (Motion sickness)
    • 문제점: 원심력에 의한 중력 유지는 코리올리의 효과(Coriolis effect) 때문에 심각한 멀미를 유발 할 수 있다. (신체적인 혼란)
    • 실마리: 가속압력을 중력유지에 사용한다면 원심력에 의한 문제는 사라진다.
  7. 공기오염 (Air Pollution)
    • 문제점: 작은 공간에서 100년 이상 온전한 환경의 균형을 유지하는 것은 힘들다.
    • 실마리: 이 또한 항행 시간을 단축 하는 방법과 생명유지 장치의 개선 밖에 방법이 없다. 광속에 가까운 속도까지 가속 하게 되면 상대적으로 우주선 안의 시간이 느려지게 된다.
  8. 에너지 공급 (Energy Sources)
    • 문제점: 태양에너지를 쓴다고 하더라도, 에너지 문제는 해결되지 않는다.
    • 실마리: 태양에너지도 쓸수 있지만, 원자력 에너지와 같은 다른 에너지도 써야한다.
  9. 사람들 사이의 분쟁 (Interpersonal Conflicts)
    • 문제점: 갇혀진 공간에서의 삶은 심각한 문제를 초래한다.
    • 실마리: 7번의 문제가 생물학적 문제라면, 9번의 문제는 사회적 문제이다. 문제해결의 실마리는 동일 할 것이다.
  10. 너무도 광대한 거리 (Distances Too Vast)
    • 문제점: 가까이에 있는 10광년 거리의 별에 가더라도, 현재 기술로는 330년 에서 3만년 정도가 걸릴 것 이다.
    • 실마리: 광속에 가까운 속도 까지 가속하는 방법이 실용화 되기 전까지는 장거리 우주여행은 거의 불가능 한게 사실이다. 현재의 기술로는 이룰 수 없다.
  11. 무선 통신 (Radio contact)
    • 문제점: 너무나 먼 거리 때문에 무선통신도 역시 어렵다.
    • 실마리: 광속보다 빠른 통신 속도는 불가능 하다. 중간기착지도 도착하기 전 까지는 통신 없이 항해하는 수 밖에 없다.
  12. 가능성 없는 목적지 (Objective Unlikely)
    • 문제점: 한번의 여행으로 유용한 정착지를 발견하지 못한다면, 다른곳으로 갈 연료가 없다.
    • 실마리: 광속에 가까운 속도로 가속하는 방법이 있다면, 가장 가까운 별까지 왕복 하는 것이 가능해 진다면, 한발씩 전진하는 것은 가능하다.

여기까지 대충 살펴 보았는데, 장거리 우주여행의 가장 큰 문제는 그 광대한 거리에 따른 시간의 문제가 가장 심각하다. 장거리 우주여행을 위한 가장 기초적으로 해결되어야 할 일은, 약 5광년의 거리를 여분의 물자를 싫고 10년 안의 시간에 도착하여 물자를 내려놓고, 다시 10년안의 시간에 되돌아 올 수 있는 방법을 개발하는 것이다. 여기에는 적은 연료로 오랫동안 가속 할 수 있는 기술이나, 충분한 가속을 오래동안 유지할 수 있는 기술, 광속에 가까운 속도 까지 가속 할 수 있는 기술 등이 중요한 영역이 될 것이다.


우주선을 광속의 99% 까지 가속하는 방법이 가능하다면 12가지 중 절반 이상을 차지하고 있는 시간적인 문제(1,2,5,6,7,9,10)는 어느정도 해결이 가능하다. 약 5광년의 거리에 중간 기착지를 만들었다고 쳤을때 여기까지 도착하는 시간은 가속하는 압력에 따라 아래와 같이 계산 해 볼 수 있다.
압력 실제 5광년을 여행하는 시간
실제(상대) 가속시간
우주선 안의 상대적인 시간
1G 2194일, 6년
350일(278일) 766일 (가속감속 556일, 210일 무중력)
2G 2018일, 5.5년
175일(139일) 513일 (가속감속 278일, 235일 무중력)
3G 1960일, 5.3년
116일(93일) 429일 (가속감속 186일, 243일 무중력)
5G 1913일, 5.2년
70일(55일) 361일 (가속감속 110일, 251일 무중력)
10G 1878년, 5.1년
35일(28일) 310일 (가속감속 56일, 254일 무중력)
25G 1857일, 5.0년
14일(11일) 280일 (가속감속 22일, 258일 무중력)
급하게 계산해 보느라 틀렸을 수도 있지만 결과는 흥미로왔다. 급속한 가속을 할 경우 우주선 안에서 280일이 지나면  도착이 가능하다. 1G의 압력 이면 지구의 중력과 동일한 환경이 되는데, 약 2년의 항해시간 중에 6개월 정도는 무중력 하에서 보내게 된다. 이 정도의 환경이면 어느정도 우주여행을 할 수 있지 않을까? 문제는 광속의 99% 까지 안정적으로 가속 및 감속하는 기술이 될 것이다.

관련글:
2007/11/29 -- 외계인과 우주전쟁을 한다면 #10 - 우주전함 간의 전투

'It's WEB' 카테고리의 다른 글

HTML <!DOCTYPE> tag  (0) 2007.08.27
HTTP Status Messages  (0) 2007.08.27
HTML 4.01 Entities Reference  (0) 2007.08.27
OPML(Outline Processor Markup Language) 이란 무엇인가?  (0) 2007.08.17
Mashup: 신종 웹 애플리케이션  (0) 2007.08.17

 

Definition and Usage

The <!DOCTYPE> declaration is the very first thing in your document, before the <html> tag. This tag tells the browser which HTML or XHTML specification the document uses.


Tips and Notes

Note: The <!DOCTYPE> tag does not have an end tag!


HTML

HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.

HTML Strict DTD

Use this when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

The Transitional DTD includes presentation attributes and elements that W3C expects to move to a style sheet. Use this when you need to use HTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

The Frameset DTD should be used for documents with frames. The Frameset DTD is equal to the Transitional DTD except for the frameset element replaces the body element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 


XHTML

XHTML 1.0 specifies three XML document types: Strict, Transitional, and Frameset.

XHTML Strict DTD

Use this DTD when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD

Use this DTD when you need to use XHTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD

Use this DTD when you want to use frames!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

To check that you have written a valid XHTML document with a correct DTD,  you can link your XHTML page to an XHTML validator.


Attributes: NONE

이 글은 스프링노트에서 작성되었습니다.

 

When a browser requests a service from a web server, an error might occur.

This is a list of HTTP status messages that might be returned:


1xx: Information

Message: Description:
100 Continue Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request
101 Switching Protocols The server switches protocol

2xx: Successful

Message: Description:
200 OK The request is OK
201 Created The request is complete, and a new resource is created
202 Accepted The request is accepted for processing, but the processing is not complete
203 Non-authoritative Information
204 No Content
205 Reset Content
206 Partial Content

3xx: Redirection

Message: Description:
300 Multiple Choices A link list. The user can select a link and go to that location. Maximum five addresses
301 Moved Permanently The requested page has moved to a new url
302 Found The requested page has moved temporarily to a new url
303 See Other The requested page can be found under a different url
304 Not Modified
305 Use Proxy
306 Unused This code was used in a previous version. It is no longer used, but the code is reserved
307 Temporary Redirect The requested page has moved temporarily to a new url

4xx: Client Error

Message: Description:
400 Bad Request The server did not understand the request
401 Unauthorized The requested page needs a username and a password
402 Payment Required You can not use this code yet
403 Forbidden Access is forbidden to the requested page
404 Not Found The server can not find the requested page
405 Method Not Allowed The method specified in the request is not allowed
406 Not Acceptable The server can only generate a response that is not accepted by the client
407 Proxy Authentication Required You must authenticate with a proxy server before this request can be served
408 Request Timeout The request took longer than the server was prepared to wait
409 Conflict The request could not be completed because of a conflict
410 Gone The requested page is no longer available
411 Length Required The "Content-Length" is not defined. The server will not accept the request without it
412 Precondition Failed The precondition given in the request evaluated to false by the server
413 Request Entity Too Large The server will not accept the request, because the request entity is too large
414 Request-url Too Long The server will not accept the request, because the url is too long. Occurs when you convert a "post" request to a "get" request with a long query information
415 Unsupported Media Type The server will not accept the request, because the media type is not supported
416
417 Expectation Failed

5xx: Server Error

Message: Description:
500 Internal Server Error The request was not completed. The server met an unexpected condition
501 Not Implemented The request was not completed. The server did not support the functionality required
502 Bad Gateway The request was not completed. The server received an invalid response from the upstream server
503 Service Unavailable The request was not completed. The server is temporarily overloading or down
504 Gateway Timeout The gateway has timed out
505 HTTP Version Not Supported The server does not support the "http protocol" version

이 글은 스프링노트에서 작성되었습니다.


HTML 4.01 supports the ISO 8859-1 (Latin-1) character set.

The lower part of ISO-8859-1 (codes from 0-127) is the original 7-BIT ASCII standard. Most of these characters can be used without a character reference.

The higher part of ISO-8859-1 (codes from 160-255) can all be used using character entity names.

Note that the entity names are case sensitive.


ASCII Entities with new Entity Names

Result Description Entity Name Entity Number
" quotation mark &quot; &#34;
' apostrophe &apos; (does not work in IE) &#39;
& ampersand &amp; &#38;
< less-than &lt; &#60;
> greater-than &gt; &#62;

ISO 8859-1 Symbol Entities

Result Description Entity Name Entity Number
  non-breaking space &nbsp; &#160;
¡ inverted exclamation mark &iexcl; &#161;
¤ currency &curren; &#164;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
¦ broken vertical bar &brvbar; &#166;
§ section &sect; &#167;
¨ spacing diaeresis &uml; &#168;
© copyright &copy; &#169;
ª feminine ordinal indicator &ordf; &#170;
« angle quotation mark (left) &laquo; &#171;
¬ negation &not; &#172;
­ soft hyphen &shy; &#173;
® registered trademark &reg; &#174;
trademark &trade; &#8482;
¯ spacing macron &macr; &#175;
° degree &deg; &#176;
± plus-or-minus &plusmn; &#177;
² superscript 2 &sup2; &#178;
³ superscript 3 &sup3; &#179;
´ spacing acute &acute; &#180;
µ micro &micro; &#181;
paragraph &para; &#182;
· middle dot &middot; &#183;
¸ spacing cedilla &cedil; &#184;
¹ superscript 1 &sup1; &#185;
º masculine ordinal indicator &ordm; &#186;
» angle quotation mark (right) &raquo; &#187;
¼ fraction 1/4 &frac14; &#188;
½ fraction 1/2 &frac12; &#189;
¾ fraction 3/4 &frac34; &#190;
¿ inverted question mark &iquest; &#191;
× multiplication &times; &#215;
÷ division &divide; &#247;

ISO 8859-1 Character Entities

Result Description Entity Name Entity Number
À capital a, grave accent &Agrave; &#192;
Á capital a, acute accent &Aacute; &#193;
 capital a, circumflex accent &Acirc; &#194;
à capital a, tilde &Atilde; &#195;
Ä capital a, umlaut mark &Auml; &#196;
Å capital a, ring &Aring; &#197;
Æ capital ae &AElig; &#198;
Ç capital c, cedilla &Ccedil; &#199;
È capital e, grave accent &Egrave; &#200;
É capital e, acute accent &Eacute; &#201;
Ê capital e, circumflex accent &Ecirc; &#202;
Ë capital e, umlaut mark &Euml; &#203;
Ì capital i, grave accent &Igrave; &#204;
Í capital i, acute accent &Iacute; &#205;
Î capital i, circumflex accent &Icirc; &#206;
Ï capital i, umlaut mark &Iuml; &#207;
Ð capital eth, Icelandic &ETH; &#208;
Ñ capital n, tilde &Ntilde; &#209;
Ò capital o, grave accent &Ograve; &#210;
Ó capital o, acute accent &Oacute; &#211;
Ô capital o, circumflex accent &Ocirc; &#212;
Õ capital o, tilde &Otilde; &#213;
Ö capital o, umlaut mark &Ouml; &#214;
Ø capital o, slash &Oslash; &#216;
Ù capital u, grave accent &Ugrave; &#217;
Ú capital u, acute accent &Uacute; &#218;
Û capital u, circumflex accent &Ucirc; &#219;
Ü capital u, umlaut mark &Uuml; &#220;
Ý capital y, acute accent &Yacute; &#221;
Þ capital THORN, Icelandic &THORN; &#222;
ß small sharp s, German &szlig; &#223;
à small a, grave accent &agrave; &#224;
á small a, acute accent &aacute; &#225;
â small a, circumflex accent &acirc; &#226;
ã small a, tilde &atilde; &#227;
ä small a, umlaut mark &auml; &#228;
å small a, ring &aring; &#229;
æ small ae &aelig; &#230;
ç small c, cedilla &ccedil; &#231;
è small e, grave accent &egrave; &#232;
é small e, acute accent &eacute; &#233;
ê small e, circumflex accent &ecirc; &#234;
ë small e, umlaut mark &euml; &#235;
ì small i, grave accent &igrave; &#236;
í small i, acute accent &iacute; &#237;
î small i, circumflex accent &icirc; &#238;
ï small i, umlaut mark &iuml; &#239;
ð small eth, Icelandic &eth; &#240;
ñ small n, tilde &ntilde; &#241;
ò small o, grave accent &ograve; &#242;
ó small o, acute accent &oacute; &#243;
ô small o, circumflex accent &ocirc; &#244;
õ small o, tilde &otilde; &#245;
ö small o, umlaut mark &ouml; &#246;
ø small o, slash &oslash; &#248;
ù small u, grave accent &ugrave; &#249;
ú small u, acute accent &uacute; &#250;
û small u, circumflex accent &ucirc; &#251;
ü small u, umlaut mark &uuml; &#252;
ý small y, acute accent &yacute; &#253;
þ small thorn, Icelandic &thorn; &#254;
ÿ small y, umlaut mark &yuml; &#255;

Some Other Entities supported by HTML

Result Description Entity Name Entity Number
Πcapital ligature OE &OElig; &#338;
œ small ligature oe &oelig; &#339;
Š capital S with caron &Scaron; &#352;
š small S with caron &scaron; &#353;
Ÿ capital Y with diaeres &Yuml; &#376;
ˆ modifier letter circumflex accent &circ; &#710;
˜ small tilde &tilde; &#732;
en space &ensp; &#8194;
em space &emsp; &#8195;
thin space &thinsp; &#8201;
zero width non-joiner &zwnj; &#8204;
zero width joiner &zwj; &#8205;
left-to-right mark &lrm; &#8206;
right-to-left mark &rlm; &#8207;
en dash &ndash; &#8211;
em dash &mdash; &#8212;
left single quotation mark &lsquo; &#8216;
right single quotation mark &rsquo; &#8217;
single low-9 quotation mark &sbquo; &#8218;
left double quotation mark &ldquo; &#8220;
right double quotation mark &rdquo; &#8221;
double low-9 quotation mark &bdquo; &#8222;
dagger &dagger; &#8224;
double dagger &Dagger; &#8225;
horizontal ellipsis &hellip; &#8230;
per mille &permil; &#8240;
single left-pointing angle quotation &lsaquo; &#8249;
single right-pointing angle quotation &rsaquo; &#8250;
euro &euro; &#8364;

이 글은 스프링노트에서 작성되었습니다.

'It's WEB' 카테고리의 다른 글

HTML <!DOCTYPE> tag  (0) 2007.08.27
HTTP Status Messages  (0) 2007.08.27
OPML(Outline Processor Markup Language) 이란 무엇인가?  (0) 2007.08.17
Mashup: 신종 웹 애플리케이션  (0) 2007.08.17
Web 2.0 Tutorial  (0) 2007.08.17

OPML(Outline Processor Markup Language) 이란 무엇인가?


출처: 김중태문화원 1기 블로그(http://www.dal.co.kr/blog/archives/)

 

RSS 트랙백에 이어 요즘 심심치 않게 보는 용어가 OPML이죠. 초보자분들은 OPML이 무엇인지 궁금할 겁니다. OPML은 'Outline Processor Markup Language'의 줄임말로 이름 그대로 해석하자면 '개요 처리 언어'입니다. 이런 면에서 보면 홈페이지의 문서 내용을 요약해서 보여주는 RSS 형식과 마찬가지로 인터넷 문서 수집(신디케이팅)을 위한 문서 형식 중 하나로 보시면 됩니다.

 

약간 어렵게 설명하면 'OPML은 XML기반의 형식으로 각기 다른 환경과 운영체제의 어플리케이션 실행 사이에서 개요 구조 정보를 교환하는 형식'입니다. OPML이 RSS와 다른 점은 블로그를 채널그룹(channel group=blog roll) 별로 관리할 수 있다는 점입니다.

 

이렇게 XML이니 채널그룹이니 하는 말로 설명하면 더 어렵죠. 가장 쉽게 말하자면 여러 개의 블로그 사이트 RSS 목록을 하나의 문서 파일로 만들어 쓸 수 있는 형식이 OPML이라고 보면 됩니다.

 

예를 들어 피드데몬, 엑스파이더와 같은 RSS 구독기를 쓸 경우 블로그 사이트의 RSS(XML) 주소를 하나씩 등록했죠. 그런데 만약 이렇게 등록한 수 백 개 블로그의 RSS 주소를 다른 등록기 프로그램이나 RSS 구독 서비스로 옮기는 경우를 생각해봅시다.

 

예를 들어 bloglines.com에 가입해 웹으로 RSS를 구독하려고 합니다. 이때 다시 수 백 개의 블로그 사이트 RSS 주소를 수작업으로 일일이 등록하려면 힘듭니다. 하지만 피드데몬에 등록된 RSS 주소를 OPML 형식으로 저장하면 수 백 개 블로그의 RSS 주소가 정리된 문서 파일이 만들어집니다. 이 OPML 파일을 bloglines.com에서 불러오면 순식간에 피드데몬에서 사용하던 수 백 개 블로그 사이트를 그대로 구독할 수 있습니다.

 

간단하게 말하자면 OPML 파일은 수 백 개 블로그 사이트의 RSS 주소를 정리한 RSS 목록 파일이라고 보셔도 좋습니다. 따라서 OPML 파일을 지원할 경우 블로그(외에 RSS 지원 사이트) 사이트의 RSS 주소 관리가 무척 편해집니다. 또한 다른 사람이 구독하는 블로그 사이트 정보를 담은 OPML 파일을 받아서 자신의 RSS 구독 프로그램에 등록시키면 손쉽게 다른 사람이 구독하던 좋은 블로그(외에 RSS 지원) 사이트 목록을 공유할 수 있게 됩니다.

 

자신이 구독하는 블로그 사이트 정보를 OPML 파일로 서로 주고받음으로써 블로거들끼리 좋은 블로그 사이트 정보를 공유하게 되는 것이죠. 마치 과거에 좋은 사이트 정보를 담은 북마크를 주고받으면서 사이트 정보를 공유한 것처럼, OPML을 통해 좋은 RSS 지원 사이트 정보를 공유할 수 있게 됩니다.

 

RSS와 마찬가지로 OPML의 활용 가치는 아직 매우 높습니다. OPML 수집이나 교환 사이트가 생긴다면 좋은 RSS 지원 사이트를 서로 공유할 수 있습니다. 또한 사이트를 손쉽게 구별하는 등 많은 점이 편리해집니다. 영화 관련 사이트만 정리한 OPML을 수집 사이트에 올리고 이를 모두 더해나간다면 손쉽게 영화 관련 사이트 목록이 만들어지는 셈이죠.

 

다음은 OPML의 샘플소스이다.

<?xml version="1.0" encoding="ISO-8859-1" ?>

<opml version="2.0">

<head>

  <title>scriptingNewsDirectory.opml</title>

  <dateCreated>Mon, 31 Oct 2005 17:23:24 GMT</dateCreated>

  <dateModified>Tue, 20 Jun 2006 17:49:17 GMT</dateModified>

  <ownerName>Dave Winer</ownerName>

  <ownerId>http://blogs.opml.org/mail/dave</ownerId>

  <expansionState />

  <vertScrollState>1</vertScrollState>

  <windowTop>163</windowTop>

  <windowLeft>626</windowLeft>

  <windowBottom>549</windowBottom>

  <windowRight>966</windowRight>

</head>

 

<body>

  <outline text="On this day in" created="Mon, 31 Oct 2005 18:22:29 GMT"

              type="link" url="http://archive.scripting.com/xml/onThisDayIn.opml" />

  <outline text="CNN Podcasts" created="Tue, 20 Jun 2006 17:49:07 GMT"

              type="include" url="http://www.cnn.com/services/podcasting/CNN.opml" />

  <outline text="BloggerCon" created="Tue, 20 Jun 2006 16:10:55 GMT"

              type="include" url="http://www.scripting.com/docNography/index.opml" />

  <outline text="Scripting News Archive" created="Wed, 08 Feb 2006 21:44:03 GMT">

        <outline text="In HTML" created="Wed, 08 Feb 2006 21:44:07 GMT"

                    type="link" url="http://www.scripting.com/monthlyArchiveOutline.opml" />

        <outline text="In OPML" created="Fri, 10 Feb 2006 20:24:00 GMT"

                    type="link" url="http://www.scripting.com/opmlArchive/index.opml" />

  </outline>

</body>


</opml>

 

OPML에 대한 더 자세한 내용은 다음 사이트에서 정보를 얻을 수 있습니다.

*연결: http://www.opml.org/

'It's WEB' 카테고리의 다른 글

HTTP Status Messages  (0) 2007.08.27
HTML 4.01 Entities Reference  (0) 2007.08.27
Mashup: 신종 웹 애플리케이션  (0) 2007.08.17
Web 2.0 Tutorial  (0) 2007.08.17
쿠키(Cookies) 개념잡기  (0) 2007.08.17

Mashup: 신종 웹 애플리케이션


제공 : DB포탈사이트 DBguide.net

출처 : IBM Korea


mashup은 대화형 웹 애플리케이션의 한 장르로서, 외부 데이터 소스에서 가져온 콘텐트를 사용하여 완전히 새롭고 혁신적인 서비스를 만듭니다. 비공식적으로 Web 2.0이라고 알려진 2 세대 웹 애플리케이션을 의미하기도 합니다. 이 글에서는 mashup의 의미, 오늘날 구현되는 대중적인 mashup들, mashup 개발자들이 애플리케이션을 구현할 때 활용하는 기술들을 소개합니다. 또한, mashup 개발자들이 직면한 기술적, 사회적인 많은 문제점들도 있습니다.


1.머리말


신종 웹 기반 데이터 통합 애플리케이션이 인터넷을 통해 자라나고 있다. 비공식적으로 mashups이라고 불리는 이 애플리케이션은 대화형 사용자 참여를 강조하고, 자기 파괴적인 방식으로 서드 파티 데이터를 한데 모은다. mashup에 대한 정의는 다음과 같다; mashup 웹 사이트는 웹에 기반하여, 외부의 데이터 소스에서 가져온 콘텐트와 기능을 사용한다.


mashup의 모호한 데이터 통합에 대한 정의는 정확한 것은 아니다. mashup을 생각하는 가장 좋은 방법은 이 용어의 어원을 생각해 보는 것이다. 대중 음악에서 차용된 것으로, mashup은 (보통 다른 장르에 속한) 두 개의 다른 노래들에서 보컬과 악기 트랙을 혼합한 새로운 노래이다.


“잡종 팝송(bastard pop)” 과 마찬가지로, mashup은 콘텐트를 비정상적이고 혁신적으로 혼합한다. (종종 관련성이 없는 데이터 소스에서도 가져온다.) 전산 소비가 아닌 인간이 소비할 수 있도록 만들어진다.


그렇다면, mashup은 과연 어떤 모습일까? ChicagoCrime.org 웹 사이트는 매핑 mashup의 좋은 예제이다. 언론에서 광범위한 대중성을 확보한 첫 번째 mashup 중 하나인 이 웹 사이트는 Chicago Police Department의 온라인 데이터베이스에서 얻은 범죄 데이터를 Google Maps의 지도 제작법과 혼합한다.


사용자들은 이 mashup 사이트와 인터랙팅 할 수 있다. 이를 테면, South Chicago의 최근 모든 강도 사건의 상세를 나타내는 푸쉬업(pushup)을 포함한 지도를 지리적으로 디스플레이 할 수 있다. 개념과 표현은 단순하고, 범죄와 지도 데이터의 합성은 시각적으로 강력한 힘을 발휘한다.


In mashup 장르에서는, 매핑 mashup을 포함한 대중적인 mashup 장르를 연구할 것이다. 관련 기술에서는 mashup의 구현과 작동과 관련된 기술을 검토할 것이다. 기술적 문제와 사회적 문제 섹션에서는 시급한 기술적, 사회적인 도전 과제들을 규명할 것이다.


2.Mashup 장르


이 섹션에서는, 대표적인 mashup 장르를 간단히 설명할 것이다.


매핑 mashup


정보 기술 세대에서, 사람들은 물건과 행위에 대한 상당한 데이터를 모으게 된다. 두 가지 모두 위치에 대한 주석이 달린다. 위치 데이터를 포함하고 있는 이 모든 데이터들은 지도를 사용하여 지리적으로 표현되고 있다. mashup이 등장하기 까지 가장 큰 촉매제가 된 것 중 하나가 Google의 Google Maps API이다.


이것은 웹 개발자들(취미 활동가, 사상가, 기타)이 모든 데이터들(핵 재앙에서부터 보스턴의 CowParade까지) 지도로 가져왔다. Microsoft (Virtual Earth), Yahoo (Yahoo Maps), AOL (MapQuest)의 API들이 바로 뒤를 이었다.


비디오 mashup과 사진 mashup


사진 호스팅과 Flickr 같은 소셜 네트워킹 사이트와 사진 공유를 표방하는 API들이 등장하면서 다양한 mashup들이 생겨나고 있다. 이러한 콘텐트 프로바이더들은 그들이 호스팅 하고 있는 이미지와 관련된 메타데이터(누가 사진을 찍었는지, 어떤 사진인지, 어디서 언제 찍었는지 등)를 갖고 있기 때문에, mashup 디자이너들은 사진을 이 메타데이터와 제휴될 수 있는 다른 정보들과 혼합한다.


예를 들어, 하나의 mashup이 노래 가사나 시를 분석하고 관련 사진들의 모자이크나 콜라주를 만들 수 있고, 또는 공통적인 사진 메타데이터(제목, 타임스탬프, 기타 메타데이터)에 기반하여 소셜 네트워킹 그래프를 디스플레이 한다. (CNN 뉴스 사이트 같은) 웹 사이트에서 뉴스의 단어들을 사진들과 매칭시키는 방식으로 텍스트를 렌더링 할 수 있다.


검색 mashup과 쇼핑 mashup


검색과 쇼핑 mashup은 mashup이라는 용어가 생겨나기 전부터 존재했다. 웹 API 전에, BizRate, PriceGrabber, MySimon, Google Froogle 같은 비교 쇼핑 톨들은 b2b 기술이나 screen-scraping의 결합을 사용하여 가격 비교 데이터들을 모았다. mashup과 기타 웹 애플리케이션들을 활용하기 위해, eBay와 Amazon 같은 사용자 마켓플레이스는 이들의 콘텐트에 프로그래밍 방식으로 액세스 할 수 있는 API를 만들었다.


뉴스 mashup


뉴스 소스(New York Times, BBC, Reuters)는 2002년부터 RSS와 Atom 같은 신디케이션 기술을 사용하여 다양한 토픽과 관련된 뉴스 피드를 보급했다. 신디케이션 피드 mashup은 사용자의 피드를 모아서 웹에 나타낸다. 독자의 특수한 취향에 맞게 제공되는 개인적인 신문을 만든 것이다. Diggdot.us가 한 예인데, 이는 기술 관련 뉴스 소스인 Digg.com, Slashdot.org, Del.icio.us 등에서 피드를 결합한다.


3.관련 기술


이 섹션에서는 mashup의 개발에 활용할 수 있는 기술들을 살펴보도록 하겠다. 기술에 대한 자세한 내용은 참고자료 섹션을 참조하기 바란다.


아키텍처


mashup 애플리케이션은 논리적으로나 물리적으로 떨어진(네트워크와 구성 영역에 의해 분리된 것 같다.) 세 개의 다른 참여자들로 구성된다: API/콘텐트 프로바이더, mashup 사이트, 클라이언트의 웹 브라우저.

  • API/콘텐트 프로바이더. 이들은 혼합되는 콘텐트의 공급자들이다. ChicagoCrime.org mashup 예제에서, 공급자는 Google과 Chicago Police Department가 된다. 데이터를 가져올 수 있도록 하기 위해, 공급자는 REST, 웹 서비스, RSS/Atom 같은 웹 프로토콜을 통해서 웹 콘텐트를 노출한다.

    하지만 많은 잠재적인 데이터 소스는 아직까지는 편리한 방법으로 API를 노출하지 않는다. Wikipedia, TV Guide, 그리고 가상의 모든 정부 및 공공 도메인 웹 사이트에서 콘텐트를 추출하는 mashup은 스크린 스크래핑 기술을 사용하여 이를 사용한다.

    이러한 상황에서, 스크린 스크래핑이 의미하는 것은, 원래 인간이 소비하기로 되어있는 공급자의 웹 페이지를 파싱하여, 콘텐트 프로바이더에서 정보를 추출하는 과정을 의미한다.
  • mashup 사이트. 이곳은 mashup이 호스팅 되는 장소이다. 여기에 mashup 로직이 있다는 이유 때문에 여기에서는 반드시 실행될 필요가 없다. 반면, mashup은 자바 서블릿, CGI, PHP, ASP 같은 서버 측 동적 콘텐트 생성 기술을 사용하는 전통적인 웹 애플리케이션과 비슷하게 구현될 수 있다.

    또는, mashup 콘텐트는 클라이언트 측 스크립팅(JavaScript)이나 애플릿을 통해 클라이언트의 브라우저에서 직접 생성될 수도 있다. 이러한 클라이언트 측 로직은 mashup의 웹 페이지에 직접 삽입된 코드와 스크립팅 API 라이브러리나, 이러한 웹 페이지들이 참조하는 애플릿들의 결합이다.

    이 방식을 사용하는 mashup을 rich internet applications (RIA)이라고 하는데, 대화형 사용자 경험을 강조한다는 뜻을 내포하고 있다. (리치 인터넷 애플리케이션은 "Web 2.0"이 표방하고 있는 것이다.) 클라이언트 측에서 혼합할 때의 이점은 mashup 서버를 대신하기 때문에 오버헤드가 적고(데이터는 콘텐트 프로바이더에서 직접 가져올 수 있다.), 보다 완벽한 사용자 경험이 가능하다는 점이다. (페이지들은 전체 페이지를 리프레쉬 하지 않고도 콘텐트의 일부만 업데이트할 것을 요청할 수 있다.)

    Google Maps API는 브라우저 측 JavaScript를 통한 액세스를 위한 것이고, 클라이언트 측 기술의 한 예가 된다.

    종종 mashup은 서버 측 로직과 클라이언트 측 로직의 결합을 사용하여 데이터를 모은다. 많은 mashup 애플리케이션들은 자신들에게 직접 제공된 데이터를 사용하여, (적어도) 한 개의 데이터 세트는 로컬로 만든다.

    게다가, 다중 소스 데이터("Kevin Bacon과 공동 주연을 했던 영화 배우가 사들인 평균 부동산 가격")에 대한 복잡한 쿼리는 클라이언트의 웹 브라우저 내에서 많은 일을 수행해야 한다.
  • 클라이언트의 웹 브라우저. 이곳에서 애플리케이션은 그래픽으로 실행되고, 사용자 인터랙션이 발생한다. 앞서 설명한 것처럼, mashup은 종종 클라이언트 측 로직을 사용하여 혼합 콘텐트를 조합 및 합성한다.

Ajax


Ajax가 약어(어떤 사람은 "Asynchronous JavaScript + XML"의 합성으로 본다.)인지 아닌지에 대한 논의가 있다. Ajax는 특정 기술이기 보다는 웹 애플리케이션 모델이라고 할 수 있다. 비동기식 로딩과 콘텐트의 표현에 초점을 맞춘 여러 기술들을 구성하고 있다.:

  • 스타일 표현을 위한 XHTML과 CSS
  • 동적 디스플레이이와 인터랙션에 의해 노출된 Document Object Model (DOM) API
  • 비동기식 데이터 교환, 일반적으로 XML 데이터
  • 브라우저-측 스크립팅, 주로 JavaScript

이러한 기술들이 함께 사용될 때, 그 목적은 사용자 액션 후에 전체 페이지를 재 로딩 및 재 실행 하기 보다는, 소량의 데이터를 콘텐트 서버와 교환하여 보다 원활한 사용자 경험을 만들어 내는 것이다. JavaScript에서 구현된 다양한 Ajax 툴킷과 라이브러리(Sajax 또는 Zimbra)에서 mashup용 Ajax 엔진들을 구현할 수 있다.


Google Maps API에는 상용 Ajax 엔진이 포함되어 있고, 사용자 경험 역시 강력하다. 페이지 재 로드를 실행하는 조작 화살표나 트랜슬레이션 화살표에 대한 스크롤바가 없다는 점에서 진정한 로컬 애플리케이션처럼 작동한다.


웹 프로토콜: SOAP과 REST


SOAP과 REST는 원격 서비스들과 통신하는 플랫폼 중립적인 프로토콜이다. 서비스 지향 아키텍처 패러다임의 일부로서, 클라이언트는 SOAP과 REST를 사용하여 기반 플랫폼에 대한 지식 없이도 원격 서비스들과 인터랙팅 할 수 있다. 서비스의 기능은 요청 및 응답 받은 메시지의 디스크립션에 의해 전달된다.


SOAP은 웹 서비스 패러다임의 기본 기술이다. 원래, Simple Object Access Protocol의 약어였던 SOAP은 Services-Oriented Access Protocol (또는 그냥 SOAP)으로 개명되었다. 초점이 객체 지향 시스템에서 메시지 교환의 상호 운용성으로 이동했기 때문이다. SOAP 스팩에는 두 개의 핵심 요소가 있다. 첫 번째는 플랫폼 중립적인 인코딩을 위한 XML 메시지 포맷이고, 두 번째는 헤더와 바디로 구성된 메시지 구조이다.


헤더는 애플리케이션 페이로드(바디), 이를 테면, 인증 정보에 국한되지 않는 콘텍스트 정보를 교환한다. SOAP 메시지 바디는 애플리케이션 스팩의 페이로드를 캡슐화 한다. 웹 서비스용 SOAP API는 WSDL 문서로 기술되는데, 서비스가 노출하는 작동, 메시지 포맷(XML Schema 사용), 접근 방법 등이 설명되어 있다. SOAP 메시지는 HTTP를 통해 전달되지만, 다른 트랜스포트(JMS 또는 이메일)도 가능하다.


REST는 Representational State Transfer의 약어로서, HTTP와 XML을 사용한 웹 기반 통신 기술이다. 단순함과 프로파일의 부족 때문에 SOAP과 분리되고 매력도 떨어진다. 현대 프로그래밍 언어에서 찾을 수 있는 동사 기반 인터페이스(getEmployee(), addEmployee(), listEmployees() 같은 다양한 메소드로 구성됨)와는 달리, REST는 근본적으로 모든 정보 조각에 사용할 수 있는 몇 가지 연산들(POST, GET, PUT, DELETE)만 지원한다. REST에서 강조하는 것은 리소스라고 하는 정보이다.


예를 들어, 사원에 대한 정보 기록은 URI로 구분되고, GET 연산을 통해 가져오고, PUT 연산으로 업데이트 되는 식이다. 따라서 REST는 SOAP 서비스의 document-literal 스타일과 비슷하다.


스크린 스크래핑


앞서 언급했던 것처럼, 콘텐트 프로바이더에서 오는 API의 부족 때문에, mashup 개발자들이 스크린 스크래핑에 의존하여 그들이 혼합하고자 하는 정보를 가져온다. 스크래핑(Scraping)은, 프로그래밍 방식으로 사용 및 조작될 수 있는 정보의 시맨틱 데이터 구조를 추출하기 위해, 소프트웨어 툴을 사용하여 인간이 소비하도록 작성된 콘텐트를 파싱하고 분석하는 프로세스이다. 일부 mashup은 데이터 획득에 스크린 스크래핑 기술을 사용한다.


특히, 공공 섹터에서 데이터를 가져올 때 그렇다. 예를 들어, 부동산 매핑 mashup은 지도 제작 공급자의 지도와 판매 또는 임대 리스팅을 스크랩 된 “comp” 데이터를 혼합할 수 있다. 데이터를 스크래핑 하는 또 다른 mashup 프로젝트로는 XMLTV가 있는데, 이것은 전 세계, TV 리스트를 모으는 툴의 컬렉션이다.


스크린 스크래핑은 세련되지 않은 솔루션으로 간주된다. 여러 가지 이유가 있다. 두 개의 근본적인 단점들이 있기 때문이다. 첫 번째는 인터페이스를 가진 API와는 달리, 스크래핑은 콘텐트 프로바이더와 콘텐트 소비자 간 지정된 프로그램 방식의 콘트랙트가 없다.


스크래퍼는 소스 콘텐트의 모델과 관련하여 툴을 디자인 해야 하고, 공급자는 지속적으로 표현 모델에 의존해야 한다. 웹 사이트는 룩앤필을 주기적으로 정비하여 스타일을 유지해야 한다. 툴이 이 일을 하지 못하기 때문에 스크래퍼의 고통만 늘어난다.


두 번째 문제는 고급의, 재사용 가능한 스크린 스크래핑 툴킷 소프트웨어, 즉 scrAPIs의 부족이다. 이 같은 API와 툴킷이 부족한 이유는 각 스크랩핑 툴이 애플리케이션을 필요로 하기 때문이다. 때문에 많은 개발 오버헤드가 생기고, 개발자들은 콘텐트를 역 엔지니어링 하고, 데이터 모델을 개발하며, 공급자 사이트에서 미가공 데이터를 파싱 및 모아야 한다.


시맨틱 웹과 RDF


스크린 스크래핑의 세련되지 못한 특성은 인간이 소비하도록 만들어진 콘텐트가 자동화된 머신이 소비하기에 좋은 콘텐트가 되지 못한다는 사실에서 기인한다. 시맨틱 웹은, 기존 웹이 머신도 읽을 수 있는 정보를 사용하여 인간을 위해 설계된 콘텐트를 보완하도록 증가될 수 있다고 표방한다.


시맨틱 웹이라는 정황에서, 정보는 데이터와는 다르다. 데이터가 의미를 전달할 때에는 정보가 된다. 시맨틱 웹의 목적은 의미를 전달하는 메타데이터를 가진 데이터를 보강하여, 자동화, 통합, 추론, 재사용에 맞는 웹 인프라스트럭처를 만드는 것이다.


Resource Description Framework (RDF)로 알려진 W3C 스팩군은 데이터를 기술하는 문법 구조를 확립하는 방식을 제공한다. XML로는 충분하지 않다. 같은 데이터를 기술하는데 많은 방식으로 코딩 할 수 있다는 점에서 너무 모호하다. RDF-Schema는 RDF의 기능에 추가되어 머신이 읽을 수 있는 방식으로 인코딩 한다.


일단 데이터 객체가 데이터 모델에서 기술될 수 있다면, RDF는 subject-predicate-object(subject의 S는 relationship R과 object O를 갖고 있다.)를 통해서 데이터 객체들 간 관계 구조를 제공한다. 데이터 모델과 관계 그래프의 결합은 온톨로지의 생성에 적용되고, 이는 검색 및 추론될 수 있는 계층적 지식 구조가 된다.


예를 들어, it "eats" other "animal-type" 라는 제약 조건을 가진 "animal-type"의 하위 클래스로서 "carnivore-type" 모델을 정의할 수 있고, 이것에 대한 두 개의 인스턴스를 만든다. 하나는 치타와 북극곰과 이들의 습성과 관련된 데이터로 전개되고, 또 다른 하나는 가젤과 펭귄과 이들 각각의 습성과 관련된 데이터를 전개할 수 있다. 추론 엔진은 이러한 개별 모델 인스턴스들을 “혼합”하고 치타가 펭귄이 아닌 가젤을 잡아먹는다는 추론을 내린다.


RDF 데이터는 다양한 분야에서 빠르게 채택되고 있다. 소셜 네트워킹 애플리케이션(FOAF -- Friend of a Friend)과 신디케이션(RSS)도 한 예이다. 게다가, RDF 소프트웨어 기술과 컴포넌트는 어느 정도 성숙해졌고, 특히 RDF 쿼리 언어(RDQL과 SPARQL)와 프로그래밍 프레임웍과 추론 엔진(Jena와 Redland) 분야가 성장했다.


RSS와 ATOM


RSS는 XML 기반 신디케이션 포맷의 일부이다. 신디케이션은 콘텐트를 배포하고자 하는 웹 사이트가 RSS 문서를 만들고 이 문서를 RSS 퍼블리셔로 등록한다. RSS가 실행되는 클라이언트는 퍼블리셔의 피드에서 새로운 콘텐트를 검사하고 알맞은 방식으로 이에 대응한다.


RSS는 뉴스 아티클과 헤드라인, CVS checkins나 wiki pages용 changelog, 프로젝트 업데이트, 라디오 프로그램 같은 오디오 데이터까지, 광범위한 콘텐트를 합성한다. Version 1.0은 RDF 기반이지만, 최신 2.0 버전은 그렇지 않다.


ATOM은 새롭지만 더 유사한 신디케이션 프로토콜이다. Internet Engineering Task Force (IETF)의 제안 표준이고 RSS 보다 더 좋은 메타데이터를 관리 할 방법을 모색하고 있으며, 더 좋은 문서를 제공하고, 구조 개념을 일반 데이터 표현에 적용한다.


이러한 신디케이션 기술은 뉴스와 웹로그 애그리게이터 같은 이벤트 기반 콘텐트 또는 업데이트 중심 콘텐트를 모으는 mashup에는 잘 맞는다.

 

4.기술적 문제


다른 데이터 통합 분야와 마찬가지로, mashup 개발에는 기술적 문제들이 많이 있다. 특히 mashup 애플리케이션들은 더욱 많은 기능들을 갖추어야 한다. 이 섹션에서는 몇 가지 문제점들을 규명해보도록 하겠다.


데이터 통합 문제: 시맨틱 의미와 데이터 품질


오늘날 기업의 제 1의 IT 관심사는 엔터프라이즈 가상 구조에 데이터 통합하기라는 조사가 있었다. 가상 구조(virtual organization)는 연합 비즈니스 단위의 합성이며, 각각은 관리 도메인 안에 포함되어 있음을 의미한다.) (현재 비즈니스 조건들을 반영하는 기업 대시보드를 만들기 위해) 레거시 데이터 소스를 통합해야 하는 도전에 직면한 많은 엔터프라이즈 IT 관리자들과 마찬가지로, mashup 개발자들도 이종의 데이터 세트 간 공유 시맨틱 의미를 추출해야 한다는 비슷한 도전 과제를 안고 있다. 따라서, mashup 개발자가 무엇을 해야 하는지 알고 싶다면 엔터프라이즈 IT가 직면한 통합 문제를 검토해 봐야 한다.


예를 들어, 데이터 모델들 간 트랜슬레이션 시스템들이 설계되어야 한다. 데이터를 일반 형식으로 변환할 때, 매핑이 완전한 것이 아닐 때 추론이 이루어진다. (예를 들어, 하나의 데이터 소스가 하나의 모델을 가질 수 있고, 주소 유형에는 국가 필드가 포함되어 있는 반면, 다른 것은 그렇지 않다.) mashup 개발자들은 소스 데이터 모델 분야에는 전문가가 될 수 없다. 이 모델은 이들에게는 서드 파티에 해당하고, 추론은 매력적이거나 명확하지 못하다.


소실된 데이터나 불완전한 매핑 외에도, mashup 디자이너는 그들이 통합하고자 하는 데이터가 머신 자동화에 맞지 않다는 것을 알게 된다. 정리가 필요하다. 예를 들어, 법 집행 체포 기록은 일관성 없이 입력될 수 있다. 이름을 줄여서 쓰고(어떤 곳에서는, "mkt sqr"로, 또 다른 곳에서는 "Market Square"로 표기한다.), 추론이 어렵게 된다.


RDF 같은 시맨틱 모델링 기술은, 데이터 스토어에 빌트인 된다면, 다른 데이터 세트들 간 자동화 추론 문제를 완화시킨다. 레거시 데이터 소스들은 시맨틱 모델링 기술에 사용되기 전에 분석과 데이터 청소의 관점에서 인간의 노력이 많이 필요하다.


mashup 개발자들은 IT 통합 매니저가 겪지 않은 여러 문제들과도 싸워야 한다. 이중 하나가 데이터 오염 문제이다. 이들의 애플리케이션 디자인의 일부로서, 많은 mashup들은 퍼블릭 사용자 인풋을 끌어들인다. WIKI 애플리케이션 도메인에서 분명해졌듯이, 이는 양날이 선 칼이다. 공개 기여와 데이터 혁신을 가능케 하기 때문에 강력하지만, 일관성 없고, 부정확 하게, 또는 의도적으로 데이터 입력을 유도한다. 후자는 데이터 신뢰성에 대해 의심하게 되고, 이는 mashup이 제공하는 가치를 충분히 상쇄한다.


mashup 개발자들이 직면한 또 다른 통합 문제는 스크린 스크래핑 기술이 데이터 획득에 사용될 때 발생한다. 이전 섹션에서도 설명했지만, 파싱과 수집 툴과 데이터 모델을 추출하는 데는 상당한 역 엔지니어링이 필요하다. 이러한 툴과 모델이 만들어지는 최고의 상황에서도, 소스 사이트가 콘텐트를 표현하는 방식을 리팩토링 해야 한다. 따라서 통합 프로세스에 제동이 걸리고 mashup 애플리케이션 오류로 이어진다.


컴포넌트 문제


Ajax 모델의 웹 개발은 보다 풍부하고 완벽한 사용자 경험을 제공할 수 있지만, 난점도 안고 있다. Ajax는 브라우저의 클라이언트 측 스크립팅 기능과 DOM을 결합하여 브라우저 디자이너가 생각하지 못했던 콘텐트 전달 방식을 이룩해야 한다. (아마도 Ajax의 해킹 특성에 기인한 것 같다.)


하지만, 이는 Ajax 기반 애플리케이션을 Microsoft created Internet Explorer 이후 웹 디자이너를 난감하게 하는 같은 브라우저 호환성 문제로 가져온다. 예를 들어, Ajax 엔진은 XMLHttpRequst 객체를 사용하여 원격 서버들과 비동기식으로 데이터를 교환한다. Internet Explorer 6에서, 이 객체는 원시 JavaScript가 아닌 ActiveX로 구현된다.


보다 근본적으로는, Ajax의 경우, 사용자 브라우저 안에 JavaScript가 실행되어야 한다. 하지만 JavaScript를 지원하지 않거나 실행되지 않는 브라우저나 자동화 툴을 사용하는 특정 사용자들도 있기 마련이다. 이 같은 툴 세트로는 인터넷과 인트라넷 검색 엔진용 정보를 모으는 로봇, 스파이더, 웹 크롤러 등이 있다. Ajax 기반 mashup 애플리케이션은 소수의 사용자 기반과 검색 엔진 가시성을 잃게 된다.


페이지 내에 비동기식으로 콘텐트를 업데이트 할 때 JavaScript를 사용하면 사용자 인터페이스 문제가 생긴다. 콘텐트는 더 이상 브라우저의 주소 바에 있는 URL로 연결되지 않기 때문에, 사용자는 브라우저의 백(back) 버튼의 기능과 BOOKMARK 기능을 기대할 수 없다.


Ajax는 비점증적 콘텐트 업데이트를 요청함으로써 레이턴시를 줄일 수 있지만, 형편 없는 디자인 때문에 사용자 경험이 엉망이 되고, 업데이트의 세분성은 양에 비해 너무 적고 업데이트 오버헤드는 가용 리소스를 갉아먹는다. 또한, 인터페이스 로드나 콘텐트가 업데이트 되는 동안 사용자(진행 바 같은 비주얼 피드백을 가진)사용자를 지원해야 한다.


분산된, 크로스 도메인 애플리케이션과 마찬가지로, mashup 개발자와 콘텐트 프로바이더는 보안 문제도 다루어야 한다. 아이디의 개념은 성가신 주제가 될 수 있다. 전통적인 웹은 익명 액세스용으로 구현되었다. 싱글사인온은 바람직한 기능이지만, 많은 기술들이(Microsoft Passport에서 Liberty Alliance 까지)있고, 반드시 통합되어야 하는 아이디 네임스페이스에 부조화를 만든다.


콘텐트 프로바이더는 자신들의 API에 인증과 권한 스킴을 적용하여(보안 아이디나 안전하게 구분할 수 있는 애트리뷰트 개념이 필요하다.) 유료 등록자나 민감한 데이터가 포함된 비즈니스 모델에 실행해야 한다.


민감한 데이터는 기밀성(암호화)이 필요하고, 이들을 다른 소스들과 결합할 때 특별한 주의를 기울여야 한다. 아이디는 감사와 규제 순응에 필수적이다. 게다가, 서버와 클라이언트 측에서 발생하는 데이터 통합의 경우, 사용자부터 mashup 서비스까지 아이디와 보안이 필요하다.
 

사회적 문제


이전 섹션에서 설명한 기술적 문제 외에도, mashup이 대중성을 확보하면서 생기는 사회적인 문제도 있다.


mashup 개발자들이 직면한 가장 큰 사회적 문제들 중 하나는 지적 재산의 보호와 소비자 프라이버시 대 공정 사용과 정보의 자유로운 흐름 간 대립이다. 무식한 콘텐트 프로바이더(스크린 스크래핑의 표적)와 데이터 검색을 위해 API를 노출하는 콘텐트 프로바이더들은 자신들의 콘텐트가 승인되지 않는 방식으로 사용되고 있다는 것을 알아야 한다. 웹 애그리게이션과 규제와 관련하여, 참고자료를 참조하라.


mashup 웹 애플리케이션 장르는 아직 유아기에 머물러 있다. 여가 시간에 많은 mashup을 만드는 정도이다. 이러한 개발자들은 보안 같은 문제들을 인식하지 못한다. 게다가, 콘텐트 프로바이더는 머신 기반 콘텐트 액세스에 API를 제공하는 것의 가치를 이제서야 깨닫기 시작했고, 많은 사람들은 이것을 중요한 비즈니스 문제로 간주하지 않는다.


이러한 사실들이 결합하여 저질의 소프트웨어를 양산하고, 테스팅과 품질 보증 같은 우선순위들은 개념 입증과 혁신의 뒤로 물러나 있다. 커뮤니티는 보다 성숙한 소프트웨어 개발 프로세스를 위해서 오픈 표준과 재사용 가능한 툴킷들을 조합해야 한다.


mashup이 재미있는 장난감에서 세련된 애플리케이션으로 변모하기 전에, 강력한 표준, 프로토콜, 모델, 툴킷 등의 제반 사항들이 해결되어야 한다. 많은 소프트웨어 개발 리더, 콘텐트 프로바이더, 기업가들이 mashup의 가치, 즉 mashup이 귀중한 비즈니스 모델이라는 것을 인식해야 한다.


API 프로바이더는 자신들의 콘텐트에 요금을 부과할 것인지의 여부를 결정해야 하고, 부과할 것이라면, 그 방법도 모색해야 한다. (예를 들어, 등록비 또는 사용료) 아마도, 다양한 서비스 품질이 제공될 것이다. eBAY나 Amazon 같은 프로바이더들은 자신들의 API를 무료로 사용할 수 있도록 하는 운동을 벌이고 있다. mashup 개발자들은 광고 기반의 수익 모델을 모색하거나, 흥미진진한 mashup 애플리케이션을 개발해야 할 것이다.
 

5.요약


mashup은 웹 애플리케이션의 신종 장르이다. 시맨틱 웹에서 기인한 데이터 모델링 기술을 약결합, 서비스 지향, 플랫폼 중립의 통신 프로토콜과 결합하면, 웹에서 사용할 수 있는 거대한 정보를 활용 및 통합할 수 있는 애플리케이션을 위한 인프라스트럭처를 제공하게 된다.


mashup 애플리케이션이 대중성을 얻어가면서, 공정 사용과 지적 재산권, 그리고 그리드 컴퓨팅과 b2b 워크플로우 관리 같은 사회적 문제들에 어떤 영향을 미치는지를 보는 것도 재미있는 일이다.


mashup 개발에 대해 자세히 알고 싶다면 developerWorks의 새로운 튜토리얼 시리즈를 기대하기 바란다. mashup 구현 방법을 설명할 예정이다. 시맨틱 웹 기술과 온톨로지를 사용하여 자신의 mashup을 구현하는 방법을 설명할 것이다.

'It's WEB' 카테고리의 다른 글

HTML 4.01 Entities Reference  (0) 2007.08.27
OPML(Outline Processor Markup Language) 이란 무엇인가?  (0) 2007.08.17
Web 2.0 Tutorial  (0) 2007.08.17
쿠키(Cookies) 개념잡기  (0) 2007.08.17
PRINT.CSS 프린트 스타일  (0) 2007.08.16

Web 2.0 Tutorial


작성: 몽키몽키 (cache798@naver.com)

 


본 문서는 프로젝트 수행도중 틈틈히 시간을 내서 작성된 문서입니다. 개인적인 노력과 시간투자에 의한 산출물인 만큼 배포하실때는 꼭 작성자와 출처를 명시해 주시기 바랍니다.

 

목차는 다음과 같이 작성하였습니다.

 

1. Web 2.0 개요..

1.1 Web 발전사에 따른 Web 2.0 위치..

1.2 Web 2.0 개념정의..

1.3 Web 1.0과 Web 2.0 비교..

1.4 Web 2.0 용어정리..

 

2. Web 2.0 관련기술..

2.1 롱테일 (Long Tail)

2.2 RIA (Rich Internet Application)

2.3 RSS (Really Simple Syndication)

2.4 OPML (Outline Processor Markup Language)

2.5 Trackback / Trackback Ping.

2.6 Mashup Service.

2.7 AJAX (Asynchronous Javascript And XML)

2.8 Adobe FLEX.

 

3. Web 2.0 특징..

3.1 웹을 플랫폼으로 생각한다.

3.2 집단 지성을 활용한다.

3.3 차별화된 데이터로 승부한다.

3.4 소프트웨어 릴리스 주기의 혁신을 꾀한다.

3.5 가벼운 프로그래밍 모델을 사용한다.

3.6 단일 디바이스 수준을 넘어선 소프트웨어를 지향한다.

3.7 풍부한 사용자 경험을 제공한다.

 

4. Web 2.0 사례 사이트 분석..

4.1 del.icio.us (del.icio.us), 딜리셔스..

4.2 Flickr (www.flickr.com), 플리커..

4.3 Wikipedia (www.wikipedia.org), 위키피디어..

4.4 싸이월드 태깅서비스 (www.cyworld.com)

4.5 Writely (www.writely.com), 라이틀리..

4.6 Google 개인화 사이트 (www.google.com/ig)

4.7 피코디 개인화 사이트 (http://www.pcodi.com/)

 

5. 맺음말..

5.1 사회적 네트워크의 형성..

5.2 신규 사업기회 창출..

5.3 사용자 언론 영향력 확대..

 

Appendix. Web 2.0 용어 정리..

- AJAX (Asynchronous Javascript And XML), 아작스, 애이잭스..

- Collective Intelligence, 집단지성, 집단지능..

- Content Syndication, 컨텐츠 신디케이션, 컨텐츠 수집..

- FOAF (Friend Of A Friend)

- Folksonomy, 폭소노미..

- Long Tail, 롱테일..

- Mashup, 매쉬업, 혼합..

- Niche Market, 니치마켓, 틈새시장..

- OPML (Outline Processor Markup Language), 개요처리언어..

- Personalization, 개인화..

- RIA (Rich Internet Application)

- RSS (Really Simple Syndication / Rich Site Summary)

- Tag, 태그, 꼬리표..

- Trackback, 트랙백, 원격댓글..

- UCC (User Created Content), 사용자 제작 컨텐츠..

- Wiki, 위키..

- XFN (XHTML Friends Network)

쿠키(Cookies) 개념잡기


출처: http://www.emh.co.kr/xhtml/cookies.html

 

쿠키(Cookies)는 웹 싸이트를 만드는 쪽에서 사용자와 관련된 정보를 사용자의 하드디스크에 저장해 둔 것을 뜻합니다. 여기서 주의할 단어는 '하드디스크'입니다. 사용자의 하드디스크에 작은 텍스트 파일로 저장을 해두기 때문에 사용자가 컴퓨터를 껐다가 켜더라도 언제든지 하드디스크에 저장된 쿠키 파일을 읽어와서 거기에 기록해 놓은 내용을 활용할 수가 있습니다. 그렇다면 왜 다른 곳도 아닌 사용자의 하드디스크에 정보를 저장할까요?


그것은 HTTP 프로토콜이 'stateless' 프로토콜이기 때문입니다. 웹 브라우져가 웹 써버에 접속을 해서 어떤 문서나 파일을 요청하면 웹 써버는 요청 받은 내용을 보내준 다음 접속을 끊습니다. 즉, 접속을 한 '상태(state)'가 지속되지 않고 요청된 것만 처리한 뒤 연결을 끊는 거죠.

 

그러므로 웹 서버는 일단 요청된 내용들을 클라이언트에 보내고 나면 그 뒤 사용자가 접속을 하고 있는지 어떤지 알 수가 없습니다. 나아가, 예전에 접속했던 클라이언트가 또 접속을 한 것인지 아닌지 등은 더더욱 알 수 없습니다. 그런데 웹 싸이트를 운용하는 측에서는 어떤 사용자가 다시 방문을 했는지와 같은 정보가 절실히 필요했고 바로 이런 점을 해결하기 위해, 즉 stateless한 http의 특징을 커버하기 위해 등장한 아이디어가 쿠키(Cookie)입니다.

 

쿠키의 아이디어는 간단합니다. 접속한 클라이언트의 하드디스크에 적당한 정보를 저장해 둠으로써 또 그 클라이언트가 접속한 경우 언제든지 하드디스크에 저장된 정보를 읽어 들여서 그 사용자를 인식할 수 있는 것입니다. '상태'에 관한 점검을 언제든지 할 수 있는 것이죠.

 

쿠키에 저장되는 내용은 천차만별입니다. 간단하게는, 사용자가 어떤 페이지를 읽었고, 로그인 아이디가 뭐고, 이메일 주소가 뭐고 등을 기록할 수도 있고, 사용자가 어떤 물품을 주문했는지, ip 주소가 뭐고, 어떤 싸이트를 거쳐서 우리 싸이트로 왔는지, 또는 서버에서 각 클라이언트를 식별할 특별한 정보를 기록하는 등, 거의 모든 형태의 정보를 저장할 수 있습니다.

 

사용자 처지에서는 사실 기분나쁠 수 있습니다. 나도 모르게 나의 행동이 하나하나 기록되어 '파일'로 저장되고 있고, 그 파일이 다른 곳도 아닌 '내' 컴퓨터에 나도 모르게 저장된다는 것은 별로 좋은 느낌은 아니죠.

 

쿠키 파일은 사용자가 컴퓨터를 끄든 켜든 하드디스크에 (상당 기간) 저장되어 있기 때문에, 언제든지 사용자가 다시 어떤 웹 싸이트에 접속하면 쿠키에 저장해 놓은 정보를 읽어 들여서 여러 형태의 '맞춤화된' 서비스를 제공할 수 있습니다. 이를 테면, 로그인을 한 번만 하면 그 다음부터 안 해도 된다든지, 어떤 페이지를 "몇 번 보셨군요" 라고 알려준다든지 등이 가능합니다.

 

쿠키의 이런 독특한 점은 결국 개인 정보 유출에 관한 문제를 불러 일으킵니다. 왜냐하면, 사용자 하드디스크에 그 사용자가 어떤 식으로 웹 써핑을 하고 있는지, 어떤 물건을 구입했는지, 이메일 주소는 무엇인지 등의 개인정보까지 저장될 수도 있기 때문에 누군가 악한 마음을 품고 쿠키를 뒤지면 민감한 정보가 유출될 수도 있을 것이기 때문입니다.

 

그래서 웹 브라우져에는 대개 쿠키를 항상 받아들일 것이냐, 아니면 매번 대화상자를 띄워서 물어보길 원하느냐, 그렇지 않으면 쿠키를 절대 받아들이지 않느냐를 선택하는 부분이 있습니다만, 불행히도 기본 설정은 모든 쿠키를 다 받아들이는 것으로 되어 있고, 또, 대개의 엔드유져는 쿠키란 것이 있는지도 모른 채 자기 정보를 하드 디스크에 저장을 하고 있습니다. 게다가, 쿠키를 꺼놓으면 싸이트 내용을 보는데 지장을 초래하게 하는 싸이트도 아주 많구요.

 

그렇다면 쿠키는 어디 있을까요?


windows 2000 유져는 C: 안의 "Documents and Settings" 폴더 속에 들어 있는 자기 폴더(로그인 유져 폴더) 안에 보면, "Cookies"라는 폴더가 있습니다. 열어 보면 이상한 .txt 파일들이 많이 들어 있습니다. 윈98 은.. 잘 생각이 안 나는데, 아마 C:의 System 폴더인가, System32이던가에 "Cookies" 폴더가 있을 것입니다.

 

이 쿠키 파일들은 인터넷 익스플로러에서 지울 수 있습니다.
[도구] --> [인터넷옵션] 메뉴를 선택해보면 아래 그림처럼 쿠키를 지울 수 있는 부분이 나옵니다.

remove cookies

 

이제 쿠키를 실제 어떻게 만드는지, 자바스크립트 예제를 통해 알아봅시다.

자바스크립트를 이용한 쿠키 만들기

쿠키를 기록하고 읽는 것은 서버 측에서 할 수도 있고 클라이언트 측에서 할 수도 있습니다. 서버 쪽에서 한다면 이나 PHP, ASP 같은 server-side scripting 언어를 이용해서 http의 헤더를 통해 쿠키를 기록합니다. 클라이언트 쪽에서 한다면 자바스크립트를 이용해서 만듭니다. 이 글에서는 자바스크립트를 이용한 것을 다룹니다.

문자열 처리

쿠키를 만드려면 문자열 처리와 관련된 내용을 조금 알아야 합니다. 필요한 내용은 indexOf()의 활용, 그리고 split()의 활용입니다. indexOf() 는 괄호안의 문자가 어떤 문자열의 몇 번째에 나오는가를 알려주는 함수입니다. 예를 들어,

 

var name="myonghon";
 var position1 = name.indexOf("m");


이 경우 position1 변수에는 0이 담깁니다.(m이 myonghon이라는 문자열의 첫번째자리에 나오므로 0입니다. 컴퓨터는 0부터 셉니다) 같은 식으로,


var position2 = name.indexOf("g");


의 경우엔 position2 변수에 4가 담깁니다.

"m"처럼 한 자가 아니라 한 단어를 입력하는 경우 그 단어 첫글자의 위치를 리턴합니다.

예를 들어,

 

var positon3 = name.indexOf("hon");


의 경우 position3 변수에는 5가 담깁니다.

만약 찾는 문자가 없으면 -1을 리턴 합니다.
어떤 문자열에 특정 문자가 있는지 없는지 알아볼 때 사용할 수 있습니다.

 

var address ='';
 while (address.indexOf("@") == -1) {address = prompt("이메일 주소는요?", "")};

 

위와 같이 하면, @가 들어간 내용을 입력할때까지 계속 이메일 주소를 묻습니다. 물론, 이메일 주소의 유효성 확인은 위와 같이 간단히 되는 것이 아닙니다. 사실은 엄청나게 복잡합니다. ^_^

 

그 다음, split()은 어떤 문자열을 split() 괄호 안에 들어있는 것을 기준으로 쪼개서 그 결과를 배열로 리턴하는 겁니다.

 

var name="george&paul&john&lingo";
 var beatle = name.split("&");

 

라고 하면, beatle[0]에는 george가, beatle[1]에는 paul이, beatle[2]에는 john이 들어 가게 됩니다.

 

쉽죠?

이제 도구는 다 갖췄으니, 쿠키를 공략해 봅시다. 쿠키를 만드는 건 정말 쉽습니다.

 

쿠키 굽기


복잡하게 들어가면 많은 내용이 있지만, 이 글에서 필요한 내용에 해당하는 부분은 정말 간단합니다. 쿠키는 다음과 같은 형태를 갖는 문자열에 다름 아닙니다.
쿠키이름 = 쿠키값

쿠키 이름은 우리 마음대로 정하면 됩니다. 쿠키 값은 콤마, 콜론, 공백, 세미콜론이 오면 안된다는 규칙만 지키면 됩니다. 콜론이나 공백은 escape() 함수를 이용하면 적절한 형태로 변형됩니다. 이렇게 쿠키 이름에 쿠키 값을 할당한 다음,

 

document.cookie=쿠키이름;


이렇게만 하면 그 html 문서에 해당하는 쿠키가 셋팅됩니다.

 <head>
 <script name="javascript">
 function readCookie() {
   var cookie2 = document.cookie;
   my_cookie = unescape(cookie2);
   var cookie_value = my_cookie.split(":");
   var name2 = cookie_value[1];
   alert("당신이름은 " + name2 + "이군요");
 }
 </script>
 </head>
 <body onload="readCookie()">


setCookie 함수의 두번째줄은 이름을 묻는 대화상자를 띄워주는 것입니다.
예를 들어 myonghon이라고 입력했다면, 그 다음 줄은 my_cookie라는 변수에 cookie1=name%3myonghon이라고 저장하게 됩니다.

name:myonghon이라는 문자열이 escape() 함수에 의해서 name%3myonghon으로 바뀌는 겁니다. escape() 함수가 콜론을 "%3"으로 바꾼 것입니다. 그런데, 이런 건 전혀 신경쓸 필요없습니다. 그냥 콜론이나 공백 등이 들어가 있는 문자열은 escape() 함수에다가 넣어 줘야 쿠키에 저장된다는 것만 기억하면 됩니다.

그 다음 줄은 my_cookie를 그 문서의 쿠키로 지정하라는 내용입니다. <body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 setCookie() 함수가 호출되도록 하면 됩니다.

 

다 입력했으면 이 html 문서를 웹 브라우져에서 불러보세요.
이름을 묻는 대화상자가 뜰 겁니다. 예를 들어 "myonghon"이라고 입력을 하게 되면,
쿠키 파일에는 cookie1=name%3myonghon이라고 저장하게 됩니다.


cookie1은 쿠키 이름, = 다음 부분은 쿠키 값입니다.

 

이제 이 쿠키가 정말로 저장되었는지 확인해 봅시다. 쿠키를 읽어 들이는 것도 굉장히 간단합니다. 위에서 했던 과정을 반대로 하면 됩니다.

 

쿠키 읽기

 

새로 html 문서를 하나 열고 다음과 같이 입력해 보세요.


<head>
<script name="javascript">
function readCookie() {
   var cookie2 = document.cookie;
   my_cookie = unescape(cookie2);
   var cookie_value = my_cookie.split(":");
   var name2 = cookie_value[1];
   alert("당신이름은 " + name2 + "이군요");
}
</script>
</head>
<body onload="readCookie()">

 

함수의 두 번째 줄은 쿠키를 읽어 들여서 cookie2라는 변수에 할당합니다. 아까 저장했던 my_cookie 안에 담겨있던 쿠키 값, name%3myonghon이 cookie2 변수에 담기게 됩니다.
세 번째 줄은 escape()를 통해서 변환했던 공백이나 콜론 등을 다시 원상태로 (%3-->:) 되돌립니다. unescape()이므로 escape()의 반대입니다. (그런데, "unescape"란 영어 단어는 없습니다. ;-)

 

네 번째 줄은 원상태로 되돌려놓은 값을 ":"을 중심으로 나누고(split)
그 다음 줄에서는 나눈 값 중에 2번째 값, 즉 콜론 다음값 (myonghon)을 name2 변수에 담습니다.


마지막 줄은 name2에 있는 이름을 이용해서 경고 상자를 띄웁니다.

역시 처음 예와 마찬가지로, <body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 readCookie() 함수가 호출되도록 하면 됩니다.

이 스크립트를 입력한 html 문서를 웹브라우져에서 보세요.
경고 상자가 뜨면서 위에서 입력한 이름이 보이죠?

 

쿠키 관련 라이브러리

 

라이브러리씩이나 되지는 않지만 쿠키를 만들고 읽을 때 자주 쓰이는 루틴이 있습니다. 많은 싸이트가 이 루틴을 카피해서 사용하고 있습니다. 어떻게 이뤄진 것인지 하나하나 설명하겠습니다.

 

먼저 쿠키를 세팅하는 루틴부터 봅시다.
쿠키 이름과 값만 세팅하는 경우는 앞에서 본 것처럼 escape() 함수와 document.cookie만 활용하면 간단하게 할 수 있습니다. 그런데 그건 제일 간단한 쿠키일 때의 이야기이고, 사실은 쿠키는 여러 가지 조건과 함께 셋팅할 수 있습니다. 제일 대표적인 것이 쿠키를 '언제까지 저장할 것인가'입니다.

 

쿠키는 사용자 하드디스크에 저장된다고 했습니다. 그런데, 아무 값도 할당하지 않고 쿠키 이름과 쿠키 값만을 세팅하면 그 쿠키는 하드디스크에 실제로 저장되지는 않고 웹 브라우져 창을 닫음과 동시에 사라지게 됩니다.(이런 것을 쿠키가 그 '세션에서만 유효하다'라고 합니다.)

 

만약 쿠키를 실제로 하드디스크에 저장하고 싶다면 name=value 다음에 세미콜론을 쓰고, expires=란 것을 붙여 줘야 합니다. (name=value;expires=)

이때 expires= 다음에 써 주는 시간은 반드시 표준화된 시간, 즉 GMT로 바꿔야 합니다. 그럴 때 사용하는 것이 toGMTString()이라는 함수입니다.

 

예를 들어 지금 현재 시간을 GMT 형식으로 출력하려면,

 

var today = new Date();
var mytime = today.toGMTString();
document.writeln(mytime);

이렇게 하면 7 Jan 2002 13:40:12 UTC라고 출력됩니다. 바로 이런 것이 GMT 형식입니다.

'지금으로부터 얼마 뒤'를 계산하려면 모두 다 "초"로 고치는것이 좋습니다. 이 때 주로 밀리세컨드(즉, 천분의 일초)를 사용합니다. 이렇게 날짜(Date)를 밀리세컨드로 바꿔 주는 함수가 getTime() 함수입니다. 다음 코드를 보세요.


var today = new Date();
var millisec = today.getTime();
document.writeln(millisec);

 

지금 시간을 해 보니까 1010410299350이군요.

그러면 지금으로부터 28일 뒤는 어떻게 될까요?

 

(today.getTime() + 28 * 24 * 60 * 60 * 1000);

이것을 Date() 함수에 (엄밀하게 얘기하자면 Date() 객체에) 넣어 주면 다시 날짜로 바꿉니다. 이제 쿠키를 세팅해 봅시다. 쿠키세팅 함수는 setCookie() 이고, 퍼래미터는 name과 value, expires입니다.


 var today = new Date();
 var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);
 function setCookie(name, value, expires) {
   document.cookie=name + "=" + escape(value) +
   ((expires)? "; expires=" + expiry.toGMTString() : "");
 }

 

쉽게 이해가 되죠? expires? a : b는 전달받은 퍼래미터에 expires 항목이 있으면 a, 없으면 b를 택한다는 의미입니다. 위의 경우 expires 항목이 있으면 ;expires=날짜를 쿠키 값 뒤에 붙여 주고, 없으면 "", 아무 것도 안 붙이는 겁니다.

 

쿠키 읽어들이기

 

먼저 약간의 설명이 필요합니다. 앞에서 얘기한 문자열 관련 함수 중에는 substr()이란 것이 있습니다. 이렇게 사용합니다.

 

var myname = "paul gilbert";
var a = myname.substr(0,4);


이렇게 하면 a에는 paul이 담깁니다. 즉 substr(a,b) 라고 하면, 어떤 문자열의 a 번째 위치에서부터 b개를 세서 리턴합니다. 위의 경우 첫 글자부터 4글자를 세서 리턴합니다. 문자열을 셀 때는 0부터 센다는 것에 주의하세요.

 

indexOf를 조금 더 확장해 볼까요? indexOf("a",3)이라고 하면 어떤 문자열에서 a를 찾아서 위치를 돌려 주되, 3번째 글자부터 찾는다는 의미입니다. length는 이름 그대로입니다. 글자 수를 세서 리턴합니다. 예를 들어 위에서 a.length는 4를 리턴합니다. 정리하는 의미에서 예를 하나 들어볼까요?


var wb = "webbiz";
var b = wb.length;


b에는 6이 담깁니다.

자, 이제 쿠키를 읽는 루틴을 봅시다. 이렇게 생겼습니다.

 

function getCookie(name) {
  var index = document.cookie.indexOf(name + "=");
  if (index == -1) return null;
   index = document.cookie.indexOf("=", index) + 1;
   var endstr = document.cookie.indexOf(";", index);
  if (endstr == -1) endstr = document.cookie.length;
   return unescape(document.cookie.substring(index, endstr));
}

 

복잡해 보이나요?
이 함수는 쿠키 이름(name)을 던져 주면 쿠키 값(value)을 리턴하는 함수입니다. 개략적으로 설명해 보면, name= 다음 글자에서 부터 맨 마지막 글자까지(즉 쿠키 value)를 뽑아서 리턴하는 것입니다. 따라서 name= 다음 글자 위치와 맨 마지막 글자 위치를 알아낸 다음 substr()을 이용해서 값 부분만 추출하면 됩니다.

 

첫 줄은 쿠키 이름을 받아 들이는 것입니다.
그 다음 줄은 쿠키를 읽어서 그 중에 name=이라는 문자열의 첫 글자가 몇 번째에 나오는가를 세서 그 값을 index에 담습니다. document.cookie는 쿠키를 읽어들이는 것이라고 했죠?
그 다음 줄, index가 -1 즉, name=이라는 문자열이 쿠키에 없는 경우는 그 이름에 해당하는 쿠키가 없는거니까 null을 리턴합니다.


그 다음 줄은 name= 다음 문자의 위치를 index 값에 할당합니다. name= 다음 값은 그 이름에 해당하는 쿠키 값(value)의 시작 위치입니다. 생각 나죠? 쿠키는 name=value;의 형태로 되어 있다고 했습니다.


그 다음 줄은 쿠키 값의 마지막 위치인 ;을 찾아서 그 위치를 endstr이라는 변수에 할당한다는 의미입니다. 즉, document.cookie 의 마지막 위치를 endstr이라는 값에다 담는 것입니다.


indexOf(";",index)의 의미는 ;의 위치를 찾되, index 값의 위치에서부터 찾아라는 의미입니다 그리고 현재 index 값은 = 다음 값(즉, 쿠키 value)의 첫 글자 위치입니다.


그 다 음줄은 세미콜론이 안 나온 경우에 읽어 들인 쿠키의 길이를 endstr에 할당하는 것입니다. 마지막 줄은 document.cookie를 index에서부터 세서 endstr개만큼 추?란 뒤, 그것을 unescape()하는 것입니다.


한 가지 주의할 점이 있습니다. 세미콜론이 있는 경우는 0부터 세니까 [글자수 -1]개를 뽑아내게 되고, 세미콜론이 없는 경우는 글자 수만큼 뽑아 내니까 결국에는 세미콜론이 나오기 전까지의 문자열만 substr하는 게 됩니다.(즉, 세미콜론 앞의 쿠키 value만 뽑아내는 것이죠) 그러면 counter라는 이름의 쿠키를 이용해서 페이지 방문횟수를 계산해 봅시다. 다음과 같이 하면 됩니다.

 

var visits = getCookie("counter");
// counter 라는 쿠키가 있으면 그 값을 꺼내서 visits 에 담아라는 얘기 입니다
if (!visits) { // 만약 visits 가 거짓이라면, 즉 counter 라는 쿠키가 없다면
   visits = 1; // visits 를 1 로 세팅하고
   document.write("이 페이지에 처음 오셨군요");
} else {
  // visits 값이 있다면 1 을 증가시킵니다
   visits = parseInt(visits) + 1; } // parseInt() 는 정수로 바꿔주는 함수..
document.write("이 페이지에 " + visits + "번째군요!");
setCookie("counter", visits, today);
// 다시 counter 쿠키에 visits 값을 할당한 뒤 쿠키세팅

 

한 번 테스트 해볼까요?

 

이 페이지에 처음 오셨군요
현재 페이지를 다시보기(F5 또는 CTRL-R) 해 보면 위 숫자가 하나씩 올라 가는 것을 확인할 수 있습니다. 그리고 쿠키가 저장되는 디렉토리에 가보면 이 싸이트에서 저장한 counter 쿠키를 확인할 수 있습니다. :-P

 

즉시 활용할 수 있도록 소스를 정리해 봅니다.


<script language="javascript">
<!--
  function getCookie(name) {
    var index = document.cookie.indexOf(name + "=");
    if (index == -1) return null;
    index = document.cookie.indexOf("=", index) + 1;
    var endstr = document.cookie.indexOf(";", index);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(index, endstr));
  }

  var today = new Date();
  var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);

  function setCookie(name, value, expires) {
      document.cookie = name + "=" + escape(value) +
   ((expires)? "; expires=" + expiry.toGMTString() : "");
  }
var visits = getCookie("counter");
if (!visits) {
  visits = 1;
  document.write("<p><font color=#990099>이 페이지에 처음 오셨군요</font>");
} else {
  visits = parseInt(visits) + 1;
  document.write("<p><font color=#990099>여기에 " + visits + " 번째시군요</font>");}
setCookie("counter", visits, today);

//-->
</script>

'It's WEB' 카테고리의 다른 글

HTML 4.01 Entities Reference  (0) 2007.08.27
OPML(Outline Processor Markup Language) 이란 무엇인가?  (0) 2007.08.17
Mashup: 신종 웹 애플리케이션  (0) 2007.08.17
Web 2.0 Tutorial  (0) 2007.08.17
PRINT.CSS 프린트 스타일  (0) 2007.08.16

+ Recent posts