이번 주제는 Sementic Element 이다.
HTML 4 vs HTML 5 (1), (2) 주제의Contents Model 과  Language  에서 언급되었던 이야기를 조금 더 자세히, 특히 아웃라인인과 과 관련된 엘리먼트를 좀 더 살펴보려고 한다.

아래 내용들은 본인의 생각도 물론 많이? 포함되어 있지만

등을 참고하고 재구성 했음을 미리 말씀드립니다.

<!DOCTYPE HTML>
<html lang="ko">
  <head>
    <
meta charset="UTF-8">
  <title>HTML 5 예제</title>
  </head>  <body>
    <!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
    <p>안녕하시렵니까? HTML 5?</p>
  </body>
</html>
위 예제가 생각나시는지 모르겠다.
^^
위 요소들을 몇가지 살펴보려한다.


1. 문서타입과 Root 요소

1-1. 문서타입.

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


이 문서타입은 Microsoft 가 Mac 용 internet explorer 5 를  개발하면서 예전에 만든 HTML페이지들이 제대로 표시되지 않는 심각한 문제가 발생하여, 이를 해결하기 위해서 문서의 상단에 HTML DocType 을 추가하였다...
Mac 용 Internet explorer의 경우 이 DocType 을 확인하도록 하여 이 DocType 이 포함되지 않은 기존 HTML 페이지는 옛날방식으로 렌더링하도록 하였다.

그래서 새 명세를 적용하려면 HTML Element 앞에 적절한 Doc Type만 지정하면 됐다.

그런데 아이디어가 남용되면서 (^^;) 명세를 최대한 지키는 표준모드와 표준을 따르지 않는 비표준모드로 나뉘고, 또 몇몇 요소에서 표준을 따르지 않는 준 표준모드까지 나오게 되었다.

위 DocType 은 여러 표준 Doc type 중 하나다 나머지는 이곳(http://www.w3.org/QA/2002/04/valid-dtd-list.html) 에서 확인할수 있다.

여러분이 생각해도 정리를 해야할 것 같다는 생각이 들지 않는가?
그래서 확~! 줄여서 나온 DocType !!!

<!DOCTYPE HTML>

인 것이다.
머리나쁜 본인도 외운다. ㅋㅋㅋ
그리고 모든 브라우져가 표준모드로 작동할 것이다.
한가지 주의할 점은 있는데...
맨 첫줄에 써주어야 한다는 것이다. 빈줄이 있으면 안된다는 것.
그렇지 않으면 비표준모드로 랜할 수 있다는...

그리고 또 한가지...
기존에 HTML 4.01 이나 XHTML 1.0, 1.1 로 작성한 페이지를 HTML 5로 변환하는 작업의 시작!!! 이라는 것. ^^

1-2. Root Element
HTML 페이지의 루트 엘리먼트인 <HTML> 는 기존에 XHTML 에서 사용하는 namespace 가 포함되어있었는데 이제 HTML 5 에서는 Lang 속성만 있다.( manifast 속성은 추후에 다시 알아보기로 하자...)
그래서... 
<html lang="ko"> 만 적으시면 된다.

1-3. <head> Element
head Element 는 변화 요소가 거의 없는데 문서의 Metadata 를 담는 Element 이며
Title Element 가 필수로 들어가고 Meta Element, Link Element, Script Element 가 들어간다는 것은 기본적인 사항이라 모두들 알고 있을 것이다.

1-4. Meta Element
Meta Element 는 Content 속성을 사용해서 나타내는데 이번에 새로 Charset 속성을 사용하여 문자 Encoding 을 나타낼 수 있게되었습니다.
HTTP Header 에 문자 Encoding 이 포함되어 있다면 Meta Element 의 문자 Encoding 보다 우선한다는 것도 알아두시길...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
위와 같이 적긴하지만 다른 요소들은 생략하시더라도 아래와 같이 charset을 포함한 Meta Element 를 포함하기 바란다.
<meta charset="utf-8">


2. 아웃라인 구성 Element들
이번엔 이번에 추가된 아웃라인을 구성하는 Element 들을 살펴보려한다.
이전 글에서 소개했듯이 HTML 5 에 문서의 구조화와 관련된 요소들이 많이 추가되었다.

아래와 그림과 같이 간단히 나타낼 수 있는데 하나하나 중요하게 생각해야하는 사항들만 짚어 보도록 하자.

Simentic.jpg



2-1. Section Element

Outline 을 구성하는 Element 들을 설명하기 위해서는 먼저 Section Element 를 알아봐야 할 것이라 생각한다.
Section Element 는 일반적인 Section을 나타낸다.
그런데 의미 자체로만 보게되면 기존에 사용하던 Div Element 와 사용하기에 혼동하기 쉽다.
Section Element 는 장이나 절 단위를 나타낸다고 생각하면 된다. 스타일을 적용하기위해서 Section Element 를 사용해서는 안되며 그런 용도라면 Div Element 를 사용하도록 해야한다.
Section Element 는 장이나 절을 나타내므로 제목과 본문을 하나로 묶을 때 사용합니다.
만약에 아래와 같이 제목과 본문에 스타일을 적용하고 싶다거나 구분을 지으려 한다면 Div Element 를 사용해야 할 것이다.



 

<section class="title">
<h1>제목</h1>
<section class="content">
<p>본문</p>
</section>
</section>


위와 같이 Element 를 구성하게되면 제목과 본문을 다른 Section 으로 해석하게 될 것이다.
본문의 Level 이 하나 더 내려가게 되겠지?

그래서 위그림과 같은 구조에서는 아래와 같이 Mark up해야 할 것이다.
<section class="title">
<h1>제목</h1>
<div class="content">
<p>본문</p>
</div>
</section>

또한 아래와 같은 구성에서도
각각을 모두 Section Element 로 나누는 것이 아닌 HTML 5 의 OutLine 구성 Element 들을 적절히 사용하여 구성해야 할 것이다.


<body>
<header>제목</header>
<div class="left">
<nav>...
</nav>
</div>
<div>
<article>...
</article>
</div>
<div>
<aside>....
</aside>
</div>
<footer>....</footer>
</body>


이와 같이 말이다...
아직 언급하지 않은 Element 가 있지만 후에 알아볼테니 그런것이 있구나 식으로 생각하시면 되겠다. ^^'

2-2. nav Element
nav Element 는 Navigation Section 을 나타냅니다. 페이지상의 Header 나 좌측, 우측에 표현하는 Link 모음이고 간혹 Footer 에도 표현하기도 하지요.
모든 Link 에 nav Element 를 사용하면 안되겠고, 다시한번 이야기 하지만 스타일을 적용하기 위해서 nav Element 를 사용하면 안될 것이다.
또 한가지!! Site Map Page 를 nav Element 로 표현해서도 안될 것이다. Site Map 의 Link 는 nav 특성보다는 Main Contents 이기 때문에...

주로 nav Element 내에 ul Element 를 사용하여 목록으로 Navigation Link 를 Markup 한다.

이번엔 nav Element를 그룹화하는 방법을 몇가지 알아보죠.


 


위 이미지는 제 블로그의 우측에 있는 링크들이다.
붉은 부분만 떼어놓고 본다면 아래와 같이 Markup 할 수 있을 것이다.
<nav>
<h3>카테고리</h3>
<ul>
<li><a href="...">분류전체보기</a></li>
<li><a href="...">VB.NET</a></li>
...
</ul>
</nav>
<nav>
<h3>글보관함</h3>
<ul>
<li><a href=">2011/05(8)</a></li>
<li><a href=">2011/04(4)</a></li>
...
</ul>
</nav>

한가지 더 생각해 보자면
위 그림상에 있는 컨텐츠의 내용은 aside element 에 속하는 것으로
아래와 같이 nav Element 들을 aside Element 내에 포함시킬 수 있을 것이다.
<aside>
<nav>
<h3>카테고리</h3>
<ul>
<li><a href="...">분류전체보기</a></li>
<li><a href="...">VB.NET</a></li>
...
</ul>
</nav>
<nav>
<h3>글보관함</h3>
<ul>
<li><a href=">2011/05(8)</a></li>
<li><a href=">2011/04(4)</a></li>
...
</ul>
</nav>
</aside>


이렇게 말이다.

글이 너무 길어진듯하여 나누어야 겠다.
다음 글에서는 article Element 부터 진행하도록 하겠다.



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API

행복한 고수되십시요...

[출처] SQLER.COM http://www.sqler.com/384917

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 

http://www.jumptovb.net


HTML4 vs HTML5

마치 K1 에서 둘이 싸워야할 듯... ^^;


이번엔 두 버전 간의 차이점을 살펴보려 한다.
W3C 친절하게도? 두 버전간의 차이점에 대한 문서를 오픈해 놓았다.
http://www.w3.org/TR/2010/WD-html5-diff-20100304/
인데...
"친절하게도" 라고 쓴 이유는 HTML 4 인 경우 HTML 에 대한 GuideLine  아주 간단히 제공했었다고 한다.

솔직히 이 문서만 봐도 HTML 4 와 HTML 5 의 차이는 바로 알 수 있을듯? ^^;
한번 꼭 살펴보시길 (말도 안되는 나의 영어 실력에... 이 아티클의 오류를 위 문서로 채우시길... ㅡㅡ')

소개할 내용은 위 링크를 통해 살펴보게될 내용을 바탕으로 진행을 하도록 하겠다.

위 문서는 두 버전간의 차이점을 크게 세가지로 구분해 놓았다.

1. Syntax (구문)
2. Language (언어)
3. API

이 세가지는 다시 여러 항목으로 나뉘는 데 그 사항들은 후에 다시 자세히? 다룰 예정이니
이 글에서는 간단히 살펴보고 넘어가려한다.


1. Syntax

먼저 간단한 HTML 5 예제를 보자.
<!DOCTYPE HTML><html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5 예제</title>
  </head>  <body>
    <!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
    <p>안녕하시렵니까? HTML 5?</p>
  </body>
</html>


위에서 부터 한번 쭈욱 훑어보면 알 수 있으리라...

 

1-1. DOCTYPE

먼저 DOCTYPE 을 볼 수 있다.
너무도? 간결하지 않은가?
HTML 5 문서라면 최상단에(Enter-개행문자 도 들어가면 안된다.) 반드시 넣어줘야한다. ^^
DOCTYPE 은 "HTML" 과 "XHTML" 두가지가 있다.
HTML 5 문서를 작성할 때 HTML 로 작성할지, XHTML 로 작성할지 첫부분에 선언해 준다는 것으로 HTML 문법을 따르도록 할 것인가? 아니면 XML 문법을 따르게 할 것인가 를 결정하는 것이라고 보면 되겠다.
참고로 HTML 5 가 따르는 HTML 문법을 "HTML5", HTML 5 가 따르는 XML문법을 "XHTML5" 라 부른다.

위 문서는 "탁" 보면 "착" 알수 있듯이.
HTML5 문법을 따르도록 작성할 것이라는 것을 알 수 있다.

1-2. Encoding

그 다음 보이는 것이 Charset. 바로 Encoding  에 대한 사항이다.
기존 HTML 문서에서 볼 수 있는
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
와는 다르게
<meta charset="UTF-8">

무척이나 간단해진 것을 알 수 있을 것이다.

1-3.  SVG, MathML
그리고 아래 글상자와 같이 HTML 문서안에 SVG 나 MathML 을 사용할 수 있다.

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

흠... 그리고...
Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던간에 대소문자를 가리지 않는다는 점...

이 정도면... 될 것 같은데... 또 필요한 사항이 있으면 추후에... ^^; 

2. Language

오호~~ 이제 본격적으로 HTML 4 와 HTML 5 간의 특징들을 살펴보겠다.
새로 만들어진 Element와 Attribute, 변경된 Element 와 Attribute, 없어져 버린 Element 와 Attribute 등으로 나눠서 알아보자.

2-1. 새롭게 추가된 Element
이번에 추가된 Element 에는 특히나 Sementic 요소들이 많이 추가가 되었다.
아래 표는 이번에 추가된 Sementic Element 들이다.
Element
설명
 Header  문서의 Header 를 나타낼 때 사용한다.
 Footer  문서의 Footer 를 나타낼 때 사용한다.
 Nav  문서내에 Navigation 요소가 있을 때 사용한다.
 Section  문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다.  
 Article  뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용한다.
 Aside  주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용한다.
 Hgroup  각 Section 의 Header 를 나타낼때 사용한다.
 Figure  그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용한다.
 Figcaption  캡션에 사용한다.

음... 새로운 엘리먼트는 어떻게 사용할까?
간단히 그림을 그려봤다...

Simentic.jpg


이러한 새로운 Sementic Element 들로 인해서 기존의 Div Tag 들로 나뉘어 졌단 막연하고 무의미했던 Contents 들이 한층더 유용한 정보들로 탈바꿈하게 되었다.
또 이런 변화는 우리들에게 Contents 구성에 대한 커다란 숙제를 안겨주고 있다.

이 밖에 몇가지 Element 가 추가되었다.
Element
설명
 Audio, Video HTML 5 Element 중 관심이 집중되는 Element  중 하나다.
멀티미디어 컨텐츠를 표시하는 데 사용한다.
 Embed Plugin 컨텐츠를 표시할 때 사용한다.
 Mark 별도로 표시한 문자를 표시하는데 사용한다.
 Progress 작업 진행상황을 나타낼 때 사용한다.
 Meter 측정값을 표시할 때 사용한다.
 Time 날짜, 시간을 표시할 때 사용한다. 
 Ruby, rt, rp Ruby 언어를 나타낼 때 사용한다.
 Canvas Bitmap Graphic을 표시할 때 사용한다.
 Command 사용자가 호출할 수 있는 명령어를 표시하는데 사용한다.
 details 사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 표시하는데 사용한다.
 Datalist List Attribute 와 함께 사용하여 ComboBox 를 만들때 사용한다.
 Keygen 키쌍(Key pair)을 생성할 때 사용한다.
 Output 스크립트 계산 결과 같은 실행결과를 표시하는데 사용한다.


2-2. 새롭게 추가된 Attribute
새로 추가된 속성들 중에 몇가지만 소개하려 한다.
Attribute
설명
contenteditable 편집가능한 Area 임을 나타낸다.
contextmenu 작성자가 제작한 Context Menu 지정하는데 사용할 수 있다.
data-* 접두사 "data-" 를 가진 속성으로 추후 HTML  버전 충돌없이 사용자 태그로 이용하거나 추후 브라우져가 지원하게 되었을때 사용할 수 있다. 
draggable 새로운 Drag & Drop API 에서 사용할 수 있다. 
hidden element 가 아직 없거나 없을 때 사용한다.
role, aria-* 보조기능에 가리키는데 사용할 수 있다.
spellcheck 맞춤범 검사기능을 제공할지 여부를 지정한다.

2-3. 변경된 Element
Element
설명
 a href 속성이 없이 사용하면 "placeholder link" 를 나타낸다.
 address sectioning 의 새로운 개념으로 범위를 나타낸다. 어떤 Contents 부분관 관련된 연락처 정보인지 알 수 있다.
 b 문자열 강조 뿐만이 아니라 제품소개 중 제품명 키워드 같이 특별히 중요하지는 않으나 일반적으로 강조하기 위해 사용한다.
 hr 단락 수준의 주제 바꿈에 사용한다.
 i 기존 기능처럼 문자의 기울임 뿐만이 아니라 음성, 분위기, 분류명, 기술용어, 다른언어의 숙어구, 생각, 선박명 등을 표현할 때 사용한다.
 label 기본 플랫폼 User interface 표준이 아닐 경우  Label 에서 Control로 Focus 를 이동시키면 안된다.
 menu 툴바와 Context Menu 용으로 사용한다.
 small 세부 주석과 법적 인쇄물 같은 작은 인쇄를 나타낼때 사용한다.
 strong 기존 Strong 의 기능보다 더 중요한 것을 표시할때 사용한다. 

2-4 변경된 Attribute
아래 속성은 사용하지 않기를 권장하며 꼭 필요한 곳에서만 사용하도록 한다.
Attribute
설명
img 의 border border 값은 0 일때만 사용하고 CSS 를 사용할 수 있다.
a 의 name name 속성을 id 속성으로 바꾸어 쓸 수있다.
table 의 summary 다른 대안을 정의하고 있다.
script 의 language language 값은 JavaScript 에만 사용하고 type 속성과 함께 쓰지 않고 생략할 수있다.

2-5. 제거된 Element

없어진 이유를 보면 크게 세가지로 나뉜다.

1. CSS 로 처리할 수 있는 Element
2. Frame 관련 Element
3. 거의 사용되지 않는 Element



2-5-1. CSS로 처리할 수 있는 Element
다음 Element 는 순전히 보여지는 것에만 사용되는 Element 들이다.
basefont, big, center, font, s, strike, tt, u

2-5-2. Frame 관련 Element
다음 Element 는 Frame 과 관련된 Element로 이들 Element 의 사용은 사용성과 접근성에 부정적인 영향을 끼치 때문이다.
frame, frameset, noframes

2-5-3. 거의 사용되지 않는 Element
다음 Element 는 자주 사용되지 않고, 혼란스럽게하거나 다른 Element 로 기능을 대체할 수 있기 때문이다.
acronym, applet, isindex, dir


2-6. 제거된 Attribute

나열하기에 많아서 좀 애매하다...
http://www.w3.org/TR/2010/WD-html5-diff-20100304/#absent-attributes
문서에서 3.6 Absent Attributes 를 참고 하시길...


3. API
이젠 새로 사용할 수 있게된 API 들을 설명하려 한다.

Video/Audio API : Video, Audio Element 와 함께 Video, Audio 를 재생하는데 사용수 있다.
Offline Web Application : 말 그대로 Offline 을 지원하는 API 이다.
Web Application 이 특정 프로토콜 또는 Media Type 을 등록할 수 있는 API
새로운 Grobal Attribute 인 "Contenteditable" Attribute 와 함께 사용하는 편집 API
"draggable" Attribute 와 함께 사용하는 Drag & Drop API
 Navigation 시 사용하는 History 정보를 노출하는 API

그리고 그 사항들은 아래와 같은 사항들을 확장하였다..
3-1 HTMLDocumnet 확장사항들
DOM Level2 HTML 의 HTMLDocument interface 를 확장했다.
getElementsByClassName() : Class Name 으로 Element 를 선택할 수 있다.
innerHTML : HTML 또는 XML 문서를 분석하고 직렬화하는 쉬운 방법이다.
activeElement, hasFocus : Element 가 현재 Focus 되어 있는지, "Document" 가 Focus 되어있는지 여부를 확인한다.
getSelection() : 현재 선택되어있는 Object 를 반환한다.

3-2 HTMLElenemt 확장사항들
HTML 5 의 HTMLElement interface 는 몇가지 확장사항들이 있다.
getElementsByClassName()
innerHTML
:
classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다. Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle() 과 같은 함수를 노출한다.
a, area, link Element 는 relList 라는 유사한 Attribute 를 가지고 있으며 rel Attribute에 같은 기능을 제공한다.


훔... HTML 4와 HTML 5 간의 차이점에 대한 어느정도 필요한 정보들을 간단히 나열해 보았다.





4. HTML 5  작성 Tip

4-1. 이전 Browser 에서 새로운 요소들 사용.

HTML 5 에서 사용하는 Tag 들은 이전 버전의 브라우져에서는 지원하지 않는다.
하지만 이전 Browser 에게 약간의 편법을 쓰면 HTML 5 Tag 들을 지원하는 것처럼 하게 할 수 있다.
아래 Javascript 를 추가해보자.
 
<script type="text/javascript">
document.createElement('address');
document.createElement('article');
document.createElement('aside');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('menu);
document.createElement('nav');
document.createElement('section ');
</script>

그리고 아래 구문을 CSS 에 추가에 추가한다.
이로써 아래 Tag 들에 대해서 Block 요소로 인식하게 해준다.
address, article, aside, figure, footer, header, hgroup, menu, nav, section { display:block;}

4-2. 사용하는 Browser 의 HTML 5 기능 지원여부 확인
현재 사용하는 Browser 에 HTML 5 기능이 적용되어 있는지 알아보기 위해서 다음 페이지를 통해서 확인 하기 바란다.
http://a.deveria.com/caniuse/

현재 브라우져가 특정 기능을 지원하는지 Code 상에서 확인하기위해 필요한 Script 라이브러리가 있다.
그 것은 Modernizr (http://www.modernizr.com) 이다.

아래내용은 간단히 GeoLocation  기능을 지원하는 지를 확인하는 JavaScript 코드이다.

if (Modernizr.geolocation){
  navigator.geolocation.getCurrentPosition(function(position) {
    // pass the lat and long values to an application
    // e.g. a setUserLatandLong() function may find the closest bodega

    setUserLatandLong(position.coords.latitude,position.coords.longitude);
  }); 

이와 같이 HTML 5 JavaScript API 기능의 지원 여부를 손쉽게 확인할 수 있도록 도와준다.


4-3. 구문 검증

다음은 우리가 작성한 HTML 문서를 검증하기 위한 Site 를 소개한다.
http://validator.w3.org 
http://html5.validator.nu
http://gsnedders.html5.org/outliner/ (이 Site는 Contents Model 에 기반을 두어 작성한 HTML 5문서의 Outline 을 검증합니다. )


음... 두편의 Article 을 통해 이전 버전의 HTML과 HTML 5 와의 차이점과 변경된 사항들을 간단히 살펴보았다.
지금까지 나열된 사항들은 추후 이어질 아티클에서 다시 조금더 자세한? 내용들로 언급이 될 것이다. (훔... 왠지 모르게 서둘러 마무리하는 것 같은 생각이 드네... 추가할 사항들이 생기면 계속 업데이트하겠다. 느낌 희안허네... 그림이 없어서그런가? 역시 그림이 없으니 건조해... ㅡㅡ')


HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API

행복한 고수되셔요...

  [출처] SQLER.COM http://www.sqler.com/379909

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 

HTML 4 Vs HTML 5

둘의 차이점을 알기위해서 반드시 먼저 짚고 넘어가야할 주제가 있다.

그것은...

바로 Contents Model 이다.

HTML 5 이전의 HTML 문서는 <div>, <p>, <h1>, <h2>... Tag 와 같은 Block Level Element 와 <img>, <input>, <i>, <b> Tag 와 같은 Inline Element 로 구분되어지는 Tag 들로 구성되어 두 종류의 Tag 들을 적절히 사용하여 표현하였다.
그리고 이러한 Tag 들은 Tree 형태의 계층구조를 이루어 문서의 OutLine 을 구성하고 그 구조를 따라 Contents 에 접근할 수 있다.(JavaScript 나 CSS 에서 특정 Element 에 접근하는 방식을 떠올린다면 이해가 쉬우리라...)

HTML 5 문서 또한 다르지 않다.
하지만 HTML 5 는 "Contents Model" 이라는 새로운 개념을 추가하여 문서의 Outline 을 잡고 Contents 를 구성하게 된다.
HTML 5 는 기존의 Tag 에
한마디로 HTML 5 는 구성에 중점을 둔 구조라고 할 수 있겠다.
따라서 기존 DOM Tree 계층구조에서의 Contents 접근이 아닌 구성에 따라서 접근이 가능하게 되었다.(<Header>, <Footer>, <article> Tag 를 떠올려 보라. DOM Tree 를 따라갈 필요없이 곧바로 Contents 에 접근이 가능하다.-<Header>, <Footer>, <article> 과 같은 Tag 를 아직 모르시는 분께 죄송... 하지만 곧바로 다음에서 다루겠다. 일단은 그런게 있구나 식으로만이라도...>)
이런 이유로 HTML 5 의 Element들은 추가되었고, 기존의 HTML 보다 훨씬 더 Sementic 한 Web을 구성 할 수 있게 되었다는데에 집중해야 할 것이다.

따라서, 이제 우리는 HTML 5 의 각 Tag(Element)가 갖는 역할과 의미를 확실히 이해하여 Content Model 에 적합한 HTML 문서를 작성할 수 있도록 한층 더 많은 생각을 해야할 것이다.

HTML 5 에서는 아래 그림과 같이 Contents 의 종류에 따라 Element 들을 분류하고 있다.

content-venn.png

Contents 는 다음과 같이 분류한다.
1. Metadata Contents
2. Flow Contents
3. Sectioning Contents
4. Heading Contents
5. Phrasing Contents
6. Embedded Contents
7. Interactive Contents


다음은 위 분류에 대해 간단히 설명해 보았다.
Category
설명
Tag
Metadata Content 나머지 Contents 의 Presentation 이나 behavior를 설정하거나 현재문서와 다른 문서와의 관계를 설정. 또는, 기타 "Out Of Band"정보를 전달한다. base, command, link, meta, noscript, script, style, title
Flow Content 문서와 Application 의 Body 에서 사용되는 대부분의 Element들은 Flow Content 로 분류된다. a, abbr, address, area (map 요소의 자손인 경우) , article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (scoped 속성이 있으면) , sub, sup, svg, table, textarea, time, ul, var, video, wbr, Text
Sectioning Content Headings 와 Footers 의 범위를 정의한다. article, aside, nav, section
Heading Content Section 의 Header 를 정의한다. h1, h2, h3, h4, h5, h6, hgroup
Phrasing Content 문서의 Text 이다. 또한 그 Text 를 intra-paragraph Level 로 Markup 하는 Element 이다. a (구문 컨텐츠만을 포함하는 경우) , abbr, area (map 요소의 자손인 경우) , audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (구문 컨텐츠만을 포함하는 경우) , dfn, em, embed, i, iframe, img, input, ins (구문 컨텐츠만을 포함하는 경우) , kbd, keygen, label, map (구문 컨텐츠만을 포함하는 경우) , mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, Text
Embedded Content 문서에 다른 Resource 를 삽입하는 Content 이다. audio, canvas, embed, iframe, img, math, object, svg, video
Interactive Content 사용자의 상호작용을 위해 특별하게 의도된 Content 이다. a, audio (controls 속성이 있으면) , button, details, embed, iframe, img (usemap 속성이 있으면) , input (type 속성이 Hidden 상태가 “아니면”) , keygen, label, menu (type 속성이 toolbar 상태면) , object (usemap 속성이 있으면), select, textarea, video (controls 속성이 있으면)

자세한 내용은 http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html 를 참고하시길...


다음은 위 내용을 바탕으로 변화된 HTML 5 의 모습을 살펴보기로 하겠다.



<참고>
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
철저분석 HTML 5
http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents
http://www.clearboth.org/html5/


HTML5 시리즈 강좌 리스트

[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API


HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



행복한 고수되십시요...

[출처] SQLER.COM http://www.sqler.com/378506

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

html5-topper.png



 
"HTML 5 is really the second coming of this Web stuff — of the Web"

 
- Dion Almaer                          
(co-founder of the Ajaxian Web site and co-director of developer tools at Mozilla)




오늘부터 HTML 5 에 관해서 이야기를 해보려한다.
요즘 HTML 5 에 대한 관심은 지금까지 IT 에 관련된 어느 사건, 어느 주제에도 견줄 수 없을 정도의 관심이라 생각한다.

넷스케이프의 등장으로 인한 인터넷혁명(나는 학교의 한 실험실, Windows 3.1 에 설치된 PC 에서 Netscape 2.0 을 처음 실행할 때의 상황을 아직도 잊지 못한다. 그 많은 선후배, 친구들을 제치고 마우스 한번 잡아보겠다고... ㅋㅋㅋ 지금 생각하면 너무도 심플한 화면이 뜨는 걸 보고 있는... 신기해 하기만 했던...),
Windows95 가 세상에 나타났을 때 PC 산업의 발전,
아이폰으로 시작된 스마트폰 혁명.
(또 다른 사건이 있을까요? 제가 지식이...^^;
.NET 등장과 ie 6 릴리즈 등도 꼽는 분도 계시긴 한 것 같은데... 위 사건보다는 소소하다 생각이 들어서... ^^;)

이러한 사건들을 이어 "HTML 5" 의 등장?은 이제 Web 2.0 을 넘어 다음 세대의 환경에서 없어서는 안될 화두로, 아직 표준이 확정되지 않은 상황에서 시기 상조라는 조심스런 우려속에서도 많은 개발자를 비롯한 웹기획자, 웹디자이너들, 웹컨텐츠 제작자들뿐만아니라 웹소비자 에게도 반드시 필요한 지식으로 웹의 새로운 혁명의 주체가 될 것이라는 의견에는 그 누구도 반문하지 않는다. (학학학... 너무 장황하게 긴 호흡의 글을 쓰자니... 너무 힘들다... ㅡㅡ')

이렇게 많은 이들이 관심을 가지고 있는 주제에 관해 이야기를 한다는 것이 아주 많이, 너무도 많이, 아니아니 완전 부담스럽긴하다.
그리고 많은 이들이 원하는 "HTML 5" 라는 주제가 현재 아직 표준이 확정되지도 않은데다가
"HTML 5 로 무엇을 할 수 있을까?" 라고 생각하고 접근하는 분들을 만족시키기 위한 HTML 5 의 내용은
HTML 5 자체의 내용뿐만아니라 CSS 3.0, JavaScript 모두를 의미하고 있기때문에 다루어야 할 세부주제를 잡는 것 까지도 그리 만만치 않은 작업이었다.

이번에 잡은 "HTML 5" 의 주제는 많은 분들이 실망을 하실지는 모르지만
순수한... "HTML 5" 에 대한 내용만으로 채울 생각이다.

먼저, 고심? 끝에 정한 세부 주제를 먼저 살펴보면...

1. HTML5 개요
2. HTML4 vs HTML5 (1)
3. HTML4 vs HTML5 (2)
4. Sementic Element (1)
5. Sementic Element (2)
6. Strong Web Form
7. Rich Text Edit API
8. Video
9. Audio
10. Canvas
11. Drag & Drop
12. Offline Web Application
13. Communication API
14. Web Storage
15. Web SQL Database
16. Web Worker
17. Web Socket
18. GeoLocation API
19. SVG
20. File API


이런 순서로 진행하려고 합니다. 어떨까요? ^^

 

 

그럼 시작합니당... ㅋㅋ

#################################################################################

 

HTML 의 역사

 

HTML 5 을 정리하면서, HTML 역사에 대해서도 살펴보려한다.
아~ 이 생각을 하는 순간, 내가 가지고 있는 HTML 책자가 떠올랐다...

후다닥, 책장에 달려가 보았다. 하하하 있다...

완전 古書 ㅋㅋㅋ 사진에서 찾아보시라...

IMG_3723.jpg

 


위 사진은 아직도 나의 집 책꽂이에 꾲혀있는 HTML4 & CSS2.
발행일자를 보니... 헙... 1998년 4월 27일... 세월이 느껴진다...
발행일자가 1998년 이라도 그 당시 여느 책들처럼 CD 부록도 함께 꽂혀있다.
(완전 역사 지 말입니다. ^^)

IMG_3727.jpg

 



 1991년에 시작해서 현재까지의 HTML.

timeline.jpg 


1991년부터 1997년까지 HTML은 빠르게 발전했다. CSS가 포함이 되었고, JavaScript 가 추가되었다.
HTML 4.0 이후에도 W3C 에 의해서 HTML 은 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 진화시키기 위해서 많은 노력을 해왔다(위 이미지를 보면 역사에 대해서는 간단히 아시겠죠? 더 자세한 내용은 웹을 통해서 찾아보시면 더 많은 내용을 얻으시리라...)

그 과정에서 W3C 는 HTML 의 Version Up 을 중단하고 XHTML 로 개발의 방향을 변경하였다. XHTML 2.0 은 하위호환성을 고려하진 않는 새로운 언어로 디자인하기 시작했다.

그런 XHTML 2.0 은 W3C 의 이상과 현실의 차이로 인해서 XHTML 은 브라우저들에게서 외면당해졌고,
W3C 와는 생각이 다른, 몇개의 브라우져회사가 모여 WHATWG 라는 Working Group을 설립하여, 웹 개발현실을 반영하면서도 하위버젼의 HTML 과도 호환되는 발전된 HTML 을 정의하기 시작했다.

WHATWG 를 인정하지 않던 단호한 W3C 도 XHTML 2.0을 포기하고 2009년 10월, WHATWG 를 인정하였으며, 그들과 방향성을 공유하기 시작했다.
그리고, "HTML 5" 라는 이름을 가지고 새로운 HTML 을 디자인하기 시작했다.

HTML 의 한계
HTML, 참... 오랜 기간동안 사용된 언어임에 틀림없다.

그리고 HTML 4 에 대한 그때의 지식으로 오늘날까지도 HTML 을 읽고 있는 것을 보면 변화 없이 멈추어버린 언어라고 생각이 될 수도 있겠지만 HTML 의 버전업이 없다고 웹이 발전하지 않았다는 말은 아닐 것이다.
본래 HTML 이 처음 만들어졌을 때의 목적은 인터넷을 통해 문서를 보기 위함이었다.
자신이 가지고 있는 문서들을 웹을 통해서 볼 수 있도록 문서 형태로 표현할 수 있는 그 수단? Language가 필요했다.

Dos 의 640K 메모리 장벽이 그러했고, Y2K 밀레니엄 버그가 그러했듯이, HTML 또한 그 당시에는 지금의 웹을 상상도 할 수 없었으리라 생각된다.
단순히 인터넷을 통해 문서를 보기 원했던 것을 뛰어 넘어, 화려하고 인터랙티브한 화면 흐름과 멀티미디어, 예측할 수 없는 사용자들의 요구사항들을 충족시키기 위해 우리들은 HTML 에 갖가지 기술들을 만들어 내고, 포함시키고, 또 그러한 기능들을 사용할 수 있도록 하기위해 사용자들에게 "OK" 버튼을 눌러야만 사용할 수 있다는 협박으로 클릭을 강요하고, 언제, 어떻게 일어날지도 모르는 재앙에 따르는 책임을 사용자들에게 전가시켜왔다.

웹은 그렇게 HTML 버전의 발전은 없었지만 HTML 의 한계를 벗어나기위한 방향으로 발전?되어 왔다.
하지만 그렇게 한계를 벗어나기 위한 발전이 반복되면서 한계의 극복은 더욱 불완전한 웹환경으로 몰아가기 시작했다.(너무 장황한거 아녀? ㅡㅡ' 어여 영웅이 나타나야 할 것 같은...)

세상은 이런 불완전함을 깨뜨리고 순수하고 완전한 존재를 원하게 되었다.

그래서 나타난 것.
"HTML 5" 다.


HTML 5 의 등장

그렇게 HTML 은 모든 불완전함을 "순수"라는 이름으로 깨뜨리기 위해 탄생하게 되었다.
HTML 의 역사를 살펴봐서 알수 있듯이 기존의 HTML 은 단순 Markup Language 로서 한계가 명확했으며,
그런 HTML 의 한계는 HTML 5 의 등장으로 기존에 가졌던 HTML 의 기능적 한계를 커버할 수 있다.
발전된 CSS3, JavaScript API 를 통한 기능의 확장과 결합을 통해서 기존의 Markup language 이상의 의미를 가지게 되었다.
HTML 의 한계로 인해서 유행처럼 번졌던 플러그인과 엑티브엑스 컨트롤의 문제들로 인해 웹은 순수한 HTML만으로는 표현이 불가능한, 너무도 많은? 외부기술에 의존하게 되었다.
이로 인해 웹의 접근성은 현저하게 떨어지는 상황이 되었고 HTML 5 의 등장은 플러그인과 엑티브엑스기술에서 웹을 해방?시키고 웹의 접근성과 상호운영성 또한 높이게 하는 결과를 가져오게 될 것이다.
JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이언트와 나눔과 함께 Application으로써의 웹의활용도를 극대화 시킬것이다.

그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그인들의 사용을 줄일 것이다.(플러그인의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero로 만들려 하지도 않을 것이고. 그러한 플러그인은 플러그인이 반드시 필요한 영역에서 활발히 활동할 것이라 생각한다.)
플러그인과 엑티브엑스의 설치로 인한 취약해진 보안도 걱정하지 않아도 될 것이다.
순수한 웹환경은 현재의 Device 는 물론이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다.
마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5로 제작하여 차세대 Web 환경에서의 주도권을 갖기위해 노력하고 있다.
현재 HTML 5 의 표준이 확정되지도 않은 상황인데도 말이다...


어떤가?
HTML 5 를 시작해야하는 이유가 이 정도면 충분한가? (저한테 자문하는 거예요... ^^')



HTML 5 의 디자인 원칙


다음은 HTML 5 은 이러한 디자인 원칙을 가지고 만들어지고 있다고 한다.
  • 호환성
  • 컨텐츠의 호환성
  • 이전 브라우저와의 호환성
  • 기능의 재사용
  • 이용 방법의 호환성
  • 혁신보다는 발전을 우선함
  • 실용성
  • 상호 운영성
  • 보편적 접근성

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)


위 내용들을 간략하게 살펴보면 아래와 같다.

컨텐츠의 호환성 : HTML 5 이전 버전으로 제작한 컨텐츠가 완벽히 정상 작동하리라고는 생각하진 않지만 문제없이 이용가능해야한다.
이전 브라우저와의 호환성 : 말 그대로 HTML 5 가 지원되지 않는 이전 버전의 브라우저에서도 이용가능해야 한다.
기능의 재사용 : 이전까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 책정하여 브라우저들간의 호환성을 가지게 한다.
이용방법의 호환성 : 기존에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다.
혁신보다는 발전을 우선함 : HTML 5 이라는 Version UP 이 새로운 MarkUP Language 를 구현하는 것이 아닌 기존에 존재하던 HTML 을 개량한다.

실용성 : W3C 가 진행하던 이상적인 MarkUp Language 인 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야한다.
상호운영성 : HTML 5 를 적용한 브라우저라면 동일하게 동작해야한다.
보편적 접근성 : 컨텐츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접근할 수 있도록 한다.

http://html5test.com/index.html


HTML5 표준화 일정


다음은 HTML 5 표준화 일정이다.

  • 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범
  • Web Form 2.0, Web Applications 1.0
  • 2007.03 : 새로운 HTML 워킹 그룹 생성
  • 2009.10 : W3C에서 XHTML 전환 실패를 인정함
  • 2011.05 : HTML5 최종 초안 (Last Call Working Draft)
  • 2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료
  • 2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영
  • 2014.Q2 : HTML5 최종 표준안 (Recommendation)

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)


(기분좋게하는 소식인지는 몰라도... 최종초안 결정이... 이번달이네... ^^
일정은 지연될것이다 라고 말들 하는데... 그래도 기대해 보자... ^^)




아... 참 두서없이 길게도 적었다... (제 글의 특징입니다. ㅡㅡ')
HTML 5 에 참고할 만한 사이트 들은 차츰차츰
이 페이지에 추가하도록 해야겠다.
그래야... 나 자신이 또 들어와 볼테니... ^^;


있을실지 모를 제 글을 보시는 분들...
두서없는 긴글 보시느라 수고하셨습니다.

다음
HTML 4 Vs HTML 5 에서 뵙겠습니다.



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



행복한 고수되십시요...

[출처] SQLER.COM http://www.sqler.com/374157

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 

1. HTML5관련

가. jQuery, HTML5, CSS3 튜토리얼 리소스 모음
http://freshenupdesign.com/ultimate-jquery-html5-and-css3-tutorial-roundup/
 

나. 크롬과 스트리트뷰를 통해 HTML5의 파워를 보여주는 데모
http://www.chromeexperiments.com/arcadefire/
 

다. HTML5 tutorial site
http://blogfreakz.com/web-design/html5-tutorial/
 

라. HTML5의 깔끔한 정리.
http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/
 

마. 이미지 처리를 위한 paintbrushJS
http://www.webmonkey.com/2010/08/trick-out-your-images-with-paintbrushjs/ 

바. HTML5 및 모바일 웹 개발 교육 관련 사이트 입니다.
http://code.google.com/p/html5-class/

 

2. 안드로이드 관련

가. How to build an Android application, step by step

http://www.computerworld.com/s/article/9181925/How_to_build_an_Android_application_step_by_steptaxonomyId=18&pageNumber=1


 HTML5를 활용하여 빠른 웹 애플리케이션 개발하기
http://wonsuk73.tistory.com/22
 

60 High Quality Photoshop PSD Files For Designers
http://www.hongkiat.com/blog/60-high-quality-photoshop-psd-files-for-designers/
 

HTML5에 대한 5가지 중요한 Myths
http://www.streaminglearningcenter.com/articles/the-five-key-myths-about-html5.html
 

아이폰/안드로이드 앱 UI 디자인
http://johnnyholland.org/2010/09/06/android-iphone-app-design-is-it-twice-the-work/


Qwiki관련 기사
http://think1more.kr/127
 

테크크런치가 선별한 앱 30개 [안드로이드] 안드로이드 앱
http://techcrunch.com/2010/10/30/top-30-android-apps/
 

로컬 커머스의 미래 = 페이스북+포스퀘어+Yelp+그루폰
http://techcrunch.com/2010/10/30/the-future-of-local-commerce-facebook-foursquare-yelp-groupon/
 

HTML5 관련 사이트 10가지 
http://webhole.net/2010/10/30/html5-tutorials-resources-demos-and-tools/


소규모 비지니스를 위한 소셜미디어 마케팅팁 8가지
http://undergroundresearchnetwork.com/blogone/8-social-media-marketing-tips-for-your-small-business/
 

중국, 일본, 인도, 브라질을 대상으로하는 소셜미디어 전략
http://www.webrank.org/site.php?url=http://inventorspot.com/articles/social_media_strategy_targeting_china_japan_india_and_brazil


페이스북에서 발견하는 디자인 블로그 45가지 
http://vandelaydesign.com/blog/social-media/45-design-blogs-on-facebook/
 

중소기업의 성공적인 팬 페이지 운영을 위한 10가지 팁
http://www.smallbusinesscomputing.com/news/article.php/3910846
 

소규모 사업자를 위한 페이스북 그룹 활용 팁 4가지
http://mashable.com/2010/11/01/facebook-groups-business/
 

The Top 10 Must-Have iPhone Apps 
http://www.nytimes.com/2010/11/11/technology/personaltech/11smart.html?_r=1&src=twt&twt=nytimesbusiness


50 New Free High Quality Icons Sets
http://www.smashingmagazine.com/2010/11/09/50-free-high-quality-icons-sets/
 

윈폰7용 머스트 해브 앱 25가지 
http://www.intomobile.com/2010/11/09/top-25-apps-wp7-windows-phone/
 

Top 10 social media dashboard tools
http://www.socialbrite.org/2010/11/09/top-10-social-media-dashboard-tools/
 

Top 10 websites to learn HTML 5 online 
http://www.comptalks.com/top-10-websites-to-learn-html-5-online/
 

페이스북 메시징 시스템은 “이메일+메신저+문자”. 평생 특정인과 주고받은 메시지가 차곡차곡 쌓이고, 스팸은 따로 걸러내고. 혁신적!
http://blog.hankyung.com/kim215/blog/3653251
http://www.nytimes.com/2010/11/16/technology/16facebook.html?src=twt&twt=nytimesbusiness


9 Must Have Gadgets for Social Media Nuts
http://thenextweb.com/gadgets/2010/11/13/9-must-have-gadgets-for-social-media-nuts/
 

20 Shockingly Cool HTML5 Canvas Applications
http://creativefan.com/20-shockingly-cool-html5-canvas-applications/
 

12 Android Apps to Replace Your Other Gadgets
http://www.pcworld.com/article/210599/12_android_apps_to_replace_your_other_gadgets.html
 

25 Best Html5 Tutorials & Demos and Resources
http://skyje.com/2010/10/html5/
 

25 Useful HTML5/CSS3 Tools, Cheat Sheets and Resources
http://smashinghub.com/25-useful-html5css3-tools-cheat-sheets-and-resources.htm
 

Social media trends to watch for 2011
http://www.imediaconnection.com/content/27999.asp


10 Charts That Every Internet Exec Must See Right Now
http://www.businessinsider.com/10-charts-that-every-internet-exec-must-see-right-now-2010-11?slop=1#slideshow-start


RIM Attacks Apple -- Makes Video Showing PlayBook Browser Is Way Faster Than The iPad's
http://www.businessinsider.com/playbook-ipad-video-2010-11
 

"브라우저와 웹에 대해 궁금한 것 20가지" HTML5로 만들어진그림책
http://www.20thingsilearned.com/

 

 

혹시 포토샵이 필요한데 깔려있지 않아서 고민하던 적 있으신가요?

포토샵이 무거워 넷북에서 돌리기 힘들어 한숨이 나오던 적 있으신가요?

 

사실 저도 똑같은 고민을 할 때가 많았습니다.

학교 컴퓨터나 공공장소 등등에는 포토샵이 없는 경우가 많고

그렇지만 이미지 보정 등등 당장 포토샵은 필요하고....

 

그런 분들이 있다면 분명 좋은 팁이 될 수 있을 것이라고 생각합니다 ^ ^

저도 밖에서 포토샵을 쓸 수 없을 때 대신 사용하는 것들인데요.

바로 웹이미지에디터입니다 !

 

웹이미지 에디터들은 웹을 기반으로 하여 따로 설치할 필요가 없을 뿐만 아니라

인터넷이 되는 곳이라면 어디서나! 사용가능하다는 장점이 있어요 ~

함께 웹에디터를 살펴보러 가실까요? ^ ^

 

 

 

 

제가 가장 즐겨사용하는 웹에디터인  pixlr!

(http://pixlr.com/editor/)

 

 

 

 

처음 딱 들어가시면 이런 화면이 나오실 거예요 ~

보시다시피 URL을 통해서도 이미지를 불러올 수 있답니다.

 

 

 

 

 

 

 

 

특히 Pixlr는 네비게이터, 레이어 ,히스토리 등등의 구성으로

포토샵과 거의 비슷한 배치를 보여추고 있어요 ~

그래서 포토샵을 사용하시는 분이라면 큰 불편없이 손쉽게

Pixlr를 다룰 수 있답니다.

 

 

 

 

 

 

특히 많은 양은 아니지만 간단한 필터효과나 브러시 등도 이용할 수 있답니다.

포토샵과 같이 정교한 효과까지는 구현할 수 없지만,

간단한 보정과 함께 포토샵의 많은 기능들을

포토샵을 다루듯이 사용할 수 있어서 매우 편리해요 !

 

 

 

 

 

들어가자마자 귀여운 스모아이콘이 반겨주는 이곳, 스모페인트입니다 ^ ^

(http://www.sumopaint.com/app/)

 

 

 

 

 

들어가면 우선 요런 귀여운 캐릭터가 우리를 반겨요 ㅎㅎ

안타깝게도 스모페인트는 한글을 지원하지는 않는답니다 ㅠㅠ

한글판이 편하신 분들은 pixlr추천해드려요!

(Pixlr는 한글지원이 된답니다 !)

 

 

 

 

 

스모페인트도 포토샵과 많이 닮아있어서

포토샵 사용하시 듯이 사용해주시면 된답니다.

 

역시 브러시, 필터 등등 다양하게 가지고 있어서

왠만한 기본 작업들은 수행할 수 있어요 !

 

 

 

 

 

간단한 팁으로 이렇게 소개해드렸는데요 ~

물론 위의 두 프로그램에 포토샵과 같이 완전 정밀하게 작업을

수행할 수는 없겠지만 ㅠㅠ

 

혹시 저처럼 급하게 포토샵이 필요할 때 등등의

상황이 온다면 유용하게 사용할 수 있기를 바랍니다 !

 

[원문] [하늘아래/인천/공상가Amy] 포토샵이 안 깔려있어도 걱정 뚝! 웹에디터!


 

 

위 화면은 미국 애플 앱스토어 화면입니다.

평소 국내에서 아이폰, 아이패드, 아이팟터치 등을 쓰시는 분들이 보시는 한국 앱스토어하고는 차이가 많은 것을 아실 수 있으실 거예요.

 

 

 

 

이 화면이 오늘 현재 한국 앱스토어의 화면입니다.

위 미국 계정에는 다양한 게임들이 제공되고 있는지 한국 앱스토어에는 이런 게임들이 하나도 보이지 않네요.

그 이유는 바로 게임심의위원회 때문이립니다. 

덕분에 국내 앱스토어에서는 plants vs zoombi나 we city, We rule, We farm 등의 게임들을 찾아보기 힘들죠.

또한 미국 앱스토어에 가끔씩 가보면 정말 신기한 어플들이 많이 있답니다.

이래서 많은 분들이 애플 앱스토어 미국 계정을 무료 계정을 만들어서 사용 중에 있습니다

 

무료 계정을 만드는 이유는 미국 계정은 카드 주소지가 미국인 카드만 등록이 된답니다. ㅡㅡ;;

그래서 유료 어플을 다운로드 받기는 정말 힘들답니다.

 

요즘 미국 계정 만드는 방법이 점차 어려워지고 있어서 애플 앱스토어 미국 계정 만드는 법을 포스팅 해 봅니다.

 

 

 

 

 

 

 

글을 읽으시기전에 손가락 한번 꾸욱 눌러주세요!!!

 

 

 

 

[아이튠즈에서 미국 계정 생성 방법]

 

1. 아이튠즈를 실행하

 

 

 

먼저 아이튠즈를 실행해주세요. 그리고 왼쪽에서 itunes store를 선택하세요

그럼 오른쪽에 store 메인 화면이 쭉 뜨죠...

혹시 한국 계정으로 로그인되어 있으신 분들은 로그인 해제는 해야 합니다.

 

해제 방법은 오른쪽 위에 있는 자시의 이메일 주소를 클릭하시고 로그아웃을 눌러주시면 됩니다.

 

 

 

 

그리고 스크롤을 통해 아래 내리면 오른쪽 화면 하단에 태극기가 있습니다

태극기를 클릭 하세요!!!
 

 

 

2. 국가(미국) 선택하기

 

 

 

태극기를 클릭하셨다면 국가를 선택하는 화면이 나타납니다.

스크롤 해보면 united states가 있으니 선택해주세요. 

 

 

 

3. 미국 itunes 접속 및 무료 어플 클릭하기

 

 

  

 

 

미국을 선택하셨다면 미국 itunes로 접속됩니다.

첫번째 화면은 app store가 아니니 상단 중앙에 있는 app store를 선택해주세요.

그럼 app store로 이동됩니다.

 

지금부터가 정말 중요합니다.

이것 하나만 잘 하시면 미국 계정 바로 만드실 수 있습니다.

 

 

 

 

미국 app store 화면을 아래쪽으로 스크롤 하다보면 오른쪽에 paid apps가 나오고 그아래 free apps가 나옵니다.

free apps 중에 하나에 마우스를 오버하세요.

그럼 free 라고 뜹니다. 이것을 클릭하셔야 합니다.

 

위에서 말씀드린 것처럼 미국 계정은 한국 카드가 등록이 되지 않기 때문에 꼭 이 free를 누르고 들어가셔야

카드 등록 없이 계정을 만들 수 있습니다.


 

4. 계정생성하기

 

 

 

free를 클릭하시면 현재 로그인이 안되어 있기때문에

새로운 계정을 만들것인지 기존 계정을 사용하실건지에 대한 창이 뜹니다

저희는 새로운 미국 계정을 생성하는 것이니 당연이 새로운 계정 생성 선택하셔야죠

 

 

 

 

새로운 계정 만들기를 선택하셨다면 이렇게 환영한다는 페이지가 뜹니다.

contine를 눌러주세요.
 
 

 

5. 서비스 이용 규약 동의하기.

 




 

서비스 규약 화면입니다

규약 내용 아래 네모박스에 체크하신 후에 continue 눌러주세요

읽고, 동의한다 안 누르고 continue 누르면 네모박스 앞에 붉은색 화살표가 나타나서 체크하라고 뜹니다.

앱스토어 아이디를 만들때 뭔가 잘못했다면 페이지가 다음 페이지로 넘거가지 않고 잘못된 부분에 붉은색 화살표가 뜨니 당황하지 마시고 수정해 주시면 됩니다.
 

 

 

 

6. ID 생성하기

 

 

 

 

 

자 이제 아이디를 만드는 화면입니다.

 

1) 가장 먼저 아이디로 사용할 이메일을 넣어주세요.

한국 계정으로 사용하고 계시는 이메일은 안되니, 새로운 이메일을 넣어주세요.

 

2) 패스워드 넣어주세요.

애플 앱스토어의 비밀번호 첫글자는 무조건 대문자여야 합니다.

첫글자를 대문자로 해서 비밀번호를 두번 입력합니다.

 

3)  비밀번호 질문, 답변 넣어주세요.

답변은 짧아도 되지만 질문은 약간만 길게 해주세요.

 

4) 생일 선택하시고요

 

5) 아래 continue 클릭해주세요.

 

 

 

 

 

7. 결제 정보 입력 하기

 

 

 

 

 

거의 마지막 단계입니다.

 

1) 먼저 카드 정보를 입력하셔야 하는데요.

카드 정보는 none 선택 하세요

만약 none가 나오지 않는다면 앞에서 fre apps을 선택하지 않으셔셔 입니다

여기서 none가 보이지 않으시면 앱스토어 메인 화면으로 가셔서 free를 클릭하고 다시 시작해주세요.

카드 none을 선택하면 아래 카드 넘버 등의 화면에 사라집니다

 

2) gift 카드는 없으니 그냥 빈칸으로 두시고요

 

3) 성별을 선택하고, 이름 넣어주세요 (영어로 적으셔야 합니다)

 

4) 아래 주소/우편번호/전화번호는 이렇게 넣어주세요

 

-----------------------------------------------
Address : Apple Computer Inc. 1 infinite Loop
City : Cupertino
State : CA
ZipCode : 95014
Phone : 800-5007078
-----------------------------------------------

-----------------------------------------------
만약 위의 주소로 넣었는데 에러가 가능 경우는 아래 링크 누르고 들어가셔서 아무 주소나 하나 골라서 쓰세요

http://365hananet.koreadaily.com/yp/list.asp?mode=search&bra_code=LA&sort=A&select=LA&category1=L020000&category2=L020300&category3

-----------------------------------------------

 

5) continue 클릭해주세요.

 

 

 

 

8. 이메일 인증하기

 

 

 

이 화면으로 오셨다면 이제 마지막 이메일 인증만 하시면 됩니다.

아이디로 사용하신 이메일에 접속하시면 애플에서 메일 한통이 와 있으실 거세요.


 

 

 

 

만약 이메일이 안 왔다면 스팸 메일함을 확인해보세요.

가끔은 메일이 오지 않고 계정이 생성되는 경우도 있으니 로그인도 한번 해보시고요.

둘다 안된다면 처음부터 다시 해주세요. (대부분은 이메일이 옵니다.)

 

중간에 있는 verify Noe! 를 클릭해주세요.

 

 

 

 

그럼 이렇게 애플앱스토어 이메일 인증하는 화면이 뜹니다.

중앙에 미국 계정으로 사용하신 이메일과 아까 만드신 패스워드를 입력해주세요.

(패스워드 첫글자는 대문자입니다. ^^)

 

 

 

 

 

 

 

이메일 인증이 완료되었습니다.

수고 많으셨습니다. 여기까지 다 하셨으면 성공적으로 미국 계정이 만들어지신것이랍니다.

앞으로 여러분의 아이패드, 아이폰, 아이팟터치의 앱 생활이 더욱 풍요러워지신거죠 ㅎㅎ

 

이제 한국 계정 미국 계정 번갈아가면서 마음껏 즐기세요.

 

한가지 알아두실 점은 앱 업그레이드할때 미국 계정 앱은 미국 계정으로 한국 계정 앱은 한국 계정으로 하셔야 한다는 것입니다. 모두 업데이트를 클릭하고 한국 계정으로 로그인 했는데 뭐라 에러가 난다면 그건 미국 계정에서 받으신 앱이기 때문입니다. 그럴때 다시 미국 계정으로 로그인만 해주시면 업데이트 됩니다.


미국 계정 생성 잘 하시고 즐기고 싶으신 어플 마음껏 즐기세요!!!

 

출처 : 어설픈 얼리어답터 이퓨의 IT소식 http://iffu.blog.me/90115730059

[마우스우클릭해제] 마우스 우클릭 해제 알툴바 다운




오늘은 웹서핑 도중에 우클릭이 방지된 사이트의 우클릭을 해제하는 프로그램에 대해서 알아보겠습니다.
다양한 우클릭 해제 프로그램들이 있는데 추가 기능들이 많은 알툴바 프로그램에 대해서 알아보겠습니다.

알툴바는 인터넷 익스플로러에 다양한 기능을 추가해줍니다.
불펌 이미지를 퍼오거나 동영상 캡쳐, 마우스 제스처 기능등 유용한 기능들이 많이 있습니다.
한번 사용해보시면 편리하기 때문에 대부분의 분들이 다시 찾으시는 프로그램입니다.

다운받으신 알툴바를 실행하여 설치하도록 합시다.



스샷과 달리 올려드린 버전은 최신 2.04 버전이니 안심하시고 설치해주세요.
동의함에 체크하고 마우스우클릭해제 프로그램 설치를 진행하도록 합시다.



마우스우클릭해제 프로그램 설치시에 익스플로러를 종료해야하니 사용중인 익스플로러를 모두 닫도록 합시다.


마우스우클릭해제 설치시에 Daum을 시작페이지로 할 지 물어봅니다.
원하시면 체크 한다음에 계속 설치를 진행합니다.


위와 같이 하면 마우스우클릭해제 설치가 완료됩니다.

이제 익스플로러를 켜보면 위와 같이 툴바가 생성되어 있습니다.
복잡한 화면을 간단하게 만들 수도 있습니다.


마우스우클릭해제에서 아래와 같은 아이콘을 선택한 다음 설정을 해주시면 됩니다.


마우스우클릭해제 설정에서 불필요한 항목들을 모두 제거하시면 됩니다.


마우스우클릭해제에서 캡쳐 부분을 클릭하시면 다양한 캡쳐 옵션과 마우스 우클릭 제한 해제 여부를 설정할 수 있습니다.


웹페이지에 있는 이미지 파일을 모두 긁어 올 수도 있습니다.
긁어올 이미지의 크기나 형식을 지정할 수도 있어 큰 사진만 가져오는 등 다양한 기능이 있습니다.



 

이상으로 마우스우클릭해제 프로그램의 소개였습니다.
마우스우클릭해제 뿐만 아니라 유용한 추가 기능들이 많으니 꼭 사용해보시기 바랍니다.

[주석] 특히 영어단어 위에 마우스 커서를 위치 시켰을 때 간단한 레이어로 영단어의 뜻과 발음을 들을 수 있는 기능,
마우스 오른쪽 버튼으로 화면을 앞에서 뒤로 끌면 뒤로 버튼의 기능, 뒤에서 앞으로 끌면 앞으로 버튼의 기능을 수행하는
것들이 사용하다보면 상당히 편리합니다. ^^


[출처] SMARTTM님 블로그 :  http://smartm.tistory.com/226 좋은 정보 감사합니다.

Contents

1 최근 변경 소식
1.1 2009/3/30
1.2 2009/3/17
2 구글의 개발자 포용 정책
3 구글 Map API
4 구글 MAP API 분석
4.1 기본
4.2 Map에서의 이동
4.3 Control 버튼 추가하기
4.4 Event Listener
4.5 정보창 열기
4.6 맵에 표시하기
4.7 클릭 이벤트 제어
4.8 마커에 정보 창 출력하기
4.9 탭 사용하기
4.10 사용자 정의 아이콘 사용하기
4.11 아이콘 클래스 사용하기
4.12 마커 드래그
4.13 SideBar를 통한 맵 링크
5 XML과 비동기 HTTP를 이용한 지도 생성
6 Google 검색엔진 연동
6.1 GoogleBar를 이용한 검색엔진 활용
7 관련 링크

태그 :


1 최근 변경 소식

1.1 2009/3/30

  1. 구글 맵검색 연동 방법추가.

1.2 2009/3/17

  1. 지도 서비스가 된다. 지도 서비스를 받기 위해서는 http://maps.google.com 대신 http://maps.google.co.kr 을 이용해야 한다.
  2. 지도 서비스가 되면서, 길찾기 기능도 추가되었다. 수도권으로만 한정한다면, 매우 정확한 정보를 보여준다.
  3. Map api 에서도 maps.google.com 대신 maps.google.co.kr 로 API를 요청해야 한다.
  4. 이 페이지의 모든 예제들의 API 요청주소를 maps.google.co.kr 로 변경했다.

2 구글의 개발자 포용 정책


구글은 다양한 개발자를 자신의 영역으로 끌어들이기 위한 개방정책을 사용한다. 그래서 대부분의 서비스들이 서비스를 제어할 수 있는 API를 공개적으로 제공하고 있다. 개발자는 이 API를 이용해서 구글이 선보인 서비스를 단순히 둘러보는 정도에 그치지 않고, 다양한 응용을 시도해볼 수 있다. 구글 MAP같은 경우 구글에서 서비스를 만들어내기도 전에, 구글이 제공한 API를 이용해서 자신들만의 독특한 서비스를 만들어낸 사용자들이 있다. http://HousingMaps.com 의 경우 미국 주요도시의 집값 정보를 보여주며, http://ChicagoCrime.org 는 도시내의 범죄와 범행위치를 검색하는 서비스를 제공하고 있다.

자신의 제품을 사용하거나 테스트해줄 많은 개발자들을 확보하는건 소프트웨어 회사가 성장하기 위한 가장 중요한 동력원임은 말할필요도 없을 것이다. 기존에도 개발자를 자신의 영역으로 끌어들이기 위한 노력을 해왔던건 사실이지만, 많은 제한을 둔 폐쇄적인 형태로 이루어졌었다. 구글은 정보를 완전히 공개하고 있으며, 많은 우호적인 개발자 세력을 만들어냈다. 이들 개발자는 구글매니아로 불리우는 중요 고객이기도 하다. 최근에는 국내 대형포탈들도 이러한 공개 개발자 포용정책을 펴나가는 추세다.

3 구글 Map API

구글 Map은 Ajax기술을 사용하는 구글의 대표적인 서비스들 중 하나이다. 구글은 단순히 서비스를 제공하는데 그치지 않고 개발자의 참여를 끌어들이기 위해 API를 공개하고 있다. 구글 Map API를 이용하면 자신의 사이트에 구글 Map을 붙이고, 테스트하면서 새로운 응용을 만들 수 있다. Map API를 사용하기 위해서는 Map Key를 받아야 하는데, http://www.google.com/apis/maps 를 방문해서 Map을 사용할 URL만 명시해주면 바로 Key를 받을 수 있다. 그다음 생성된 코드를 가져다 붙이기만 하면 자신의 사이트에서 바로 구글 Map을 붙일 수 있다.

gmap.png

Map Key는 구글 maps 자바스크립트를 불러올때 key에 명시하면 된다.
<script src="http://maps.google.co.kr/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script> 
 

4 구글 MAP API 분석

구글 MAP API는 JavaScript로 제어된다. 여기에서는 완전한 형태의 HTML 파일을 보여주지는 않을 것이다. 완전한 HTML 페이지를 만드는건 Map Key를 생성할 때 만들어지는 HTML 코드를 이해하는 것만으로 충분할 것이다.

4.1 기본

구글 Map을 불러오기 위한 가장 기본이 되는코드다. 서울주변을 보여준다.
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4); 
 
setCenter을 이용해서 보여줄 위치를 지정한다. 첫번째 인자는 좌표를 지정하기 위해서 사용한다. 두번째 인자는 지도의 해상도를 결정하기 위해서 사용한다. 숫자가 클 수록 더 자세한 결과를 보여준다.
[http]simple.html 예제

구글 맵은 , 위성, 합성의 3가지 모드를 제공된다. setMapType메서드를 이용하면 모드를 변경할 수 있다. 따로 지정하지 않을 경우 모드로 실행된다.

4.2 Map에서의 이동

다음은 맵에서 중심을 이동하는 예제다. panTo 메서드를 이용하면 해당 중심으로 지도를 부드럽게 이동시킨다. 길찾기등의 기능구현에 유용하게 사용할 수 있을 거 같다.
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4); 
window.setTimeout(function() { 
    map.panTo(new GLatLng(42.615527631349245, 128.353515625)); 
}, 2000); 
 
[http]animate.html 예제

4.3 Control 버튼 추가하기

맵을 확대기시커나 모드를 바꾸거나 하는등의 제어를 위한 컨트롤 버튼을 추가한다.
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4); 
 
[http]control.html 예제


4.4 Event Listener

event listener는 GEvent.addListener를 호출해서 생성한다. 이것은 맵에서 발생하는 이벤트를 알려준다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는걸 확인할 수 있을 것이다.
var map = new GMap2(document.getElementById("map")); 
GEvent.addListener(map, "moveend", function() { 
  var center = map.getCenter(); 
  document.getElementById("message").innerHTML = center.toString(); 
}); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4); 
 
[http]event.html 예제

4.5 정보창 열기

openInfoWindow를 이용하면 원하는 지역에 DOM정보를 출력할 수 있다. 다음은 맵중앙에 저는 여기에 살아요메시지를 출력하는 코드다.
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4); 
map.openInfoWindow(map.getCenter(), 
                   document.createTextNode("저는 여기에 살아요")); 
 
[http]infowindow.html 예제

4.6 맵에 표시하기

이번 예제는 overlay기능을 이용해서 지도에 랜덤하게 10개의 마크를 표시한다. 마크에 사용되는 이미지는 기본 이미지이며, 사용자 정의 아이콘을 만들 수도 있다. 서울시를 기준으로 작성했다.
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
 
// 랜덤 포인트를 만들고 각각의 포인트에 마킹을 한다. 
for (var i = 0; i < 10; i++) { 
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                          southWest.lng() + lngSpan * Math.random()); 
  map.addOverlay(new GMarker(point)); 
} 
// 랜덤 포인트를 만들고 이것을 연결한다.  
var points = []; 
for (var i = 0; i < 5; i++) { 
  points.push(new GLatLng(southWest.lat() + latSpan * Math.random(), 
                          southWest.lng() + lngSpan * Math.random())); 
} 
points.sort(function(p1, p2) { 
  return p1.lng() - p2.lng(); 
}); 
map.addOverlay(new GPolyline(points)); 
 
[http]overlay.html 예제

4.7 클릭 이벤트 제어

맵에 클릭을 할경우 이벤트를 받아서 마킹을 하는 예제다. 앞서 배웠던 addListenr메서드를 이용해서 click 이벤트를 기다리고, 클릭이 발생하면 addOverlay메서드를 이용해서 마킹을 한다.
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
GEvent.addListener(map, "click", function(marker, point)  
{ 
  if (marker)  
  { 
    map.removeOverlay(marker); 
  } else { 
    map.addOverlay(new GMarker(point)); 
  } 
}); 
 
[http]click.html 예제

4.8 마커에 정보 창 출력하기

10개의 마커를 랜덤하게 표시하고, 마커를 클릭하면 클릭이벤트에 대한 Listener가 작동하도록 해보자. Listener 함수는 openInfoWindowHtml메서드를 이용해서 정보창을 출력한다.
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
function createMarker(point, number)  
{ 
  var marker = new GMarker(point); 
  GEvent.addListener(marker, "click", function()  
  { 
    marker.openInfoWindowHtml("Marker #<b>" + number + "</b>"); 
  }); 
  return marker; 
} 
 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
for (var i = 0; i < 10; i++)  
{ 
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                        southWest.lng() + lngSpan * Math.random()); 
  map.addOverlay(createMarker(point, i + 1)); 
} 
 
[http]markerinfo.html 예제

4.9 탭 사용하기

openInfoWindowsTabs메서드 와 GInfoWindowTab 클래스를 이용하면, 탭을 제어할 수 있다. 다음 예제는 마커를 클릭하면 2개의 tab을 가진 Info Windows를 띄운다.
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
 
var infoTabs = [ 
    new GInfoWindowTab("탭1", "안녕하세요.<br><img src=http://www.joinc.co.kr/images/joinc.png border=0>"), 
    new GInfoWindowTab("탭2", "반갑습니다."), 
]; 
 
var marker = new GMarker(map.getCenter()); 
GEvent.addListener(marker, "click", function() { 
    marker.openInfoWindowTabsHtml(infoTabs); 
}); 
map.addOverlay(marker); 
marker.openInfoWindowTabsHtml(infoTabs); 
 
[http]tab.html 예제

4.10 사용자 정의 아이콘 사용하기

사용자 정의 아이콘을 사용하는 예제다. 아이콘은 구글에서 제공하는 mini marker이미지들을 사용하기로 했다. 완전한 사용자 정의 아이콘을 만들기 위해서는 원본이미지와 함께 그림자 이미지가 쌍으로 준비되어야 한다.
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
 
var icon = new GIcon(); 
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 
icon.iconSize = new GSize(12, 20); 
icon.shadowSize = new GSize(22, 20); 
icon.iconAnchor = new GPoint(6, 20); 
icon.infoWindowAnchor = new GPoint(5, 1); 
 
// 10개의 랜덤위치를 찾아서 marking한다. 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
for (var i = 0; i < 10; i++) { 
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                      southWest.lng() + lngSpan * Math.random()); 
map.addOverlay(new GMarker(point, icon)); 
} 
 
[http]icon.html 예제

4.11 아이콘 클래스 사용하기

지도서비스를 하게 된다면, 여러개의 아이콘들이 사용될 것이다. GIcon클래스를 이용하면 아이콘을 쉽게 관리할 수 있다.
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
 
// 아이콘에서 사용할 이미지/그림자 이미지, Info Windows등 객체의  
// 속성을 결정한다. 
var baseIcon = new GIcon(); 
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 
baseIcon.iconSize = new GSize(20, 34); 
baseIcon.shadowSize = new GSize(37, 34); 
baseIcon.iconAnchor = new GPoint(9, 34); 
baseIcon.infoWindowAnchor = new GPoint(9, 2); 
baseIcon.infoShadowAnchor = new GPoint(18, 25); 
 
function createMarker(point, index) { 
  // Create a lettered icon for this point using our icon class 
  var letter = String.fromCharCode("A".charCodeAt(0) + index); 
  var icon = new GIcon(baseIcon); 
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png"; 
  var marker = new GMarker(point, icon); 
 
  GEvent.addListener(marker, "click", function() { 
    marker.openInfoWindowHtml("지역 <b>" + letter + "</b>"); 
  }); 
  return marker; 
} 
 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
for (var i = 0; i < 10; i++) { 
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                          southWest.lng() + lngSpan * Math.random()); 
  map.addOverlay(createMarker(point, i)); 
} 
 
[http]iconclass.html 예제

4.12 마커 드래그

마커는 클릭, 다른장소로의 드래그 등이 가능한 상호작용하는 객체다. 이 예제는 맵에서 마커를 클릭하고 드래그하는 이벤트를 처리하는 방법을 알려준다. 드래그는 click, dragstart, drag, dragend의 4가지 타입의 이벤트를 발생한다.
    var map = new GMap2(document.getElementById("map")); 
    var center = new GLatLng(37.51025350131836, 127.06023216247559); 
    map.setCenter(center, 16); 
    map.setMapType(G_SATELLITE_MAP); 
 
    var marker = new GMarker(center, {draggable: true}); 
 
    GEvent.addListener(marker, "dragstart", function() { 
        map.closeInfoWindow(); 
    }); 
 
    GEvent.addListener(marker, "dragend", function() { 
        map.openInfoWindowHtml("여기를 약속장소로...");  
    }); 
 
    map.addOverlay(marker); 
} 
 
[http]drag.html 예제

4.13 SideBar를 통한 맵 링크

[http]google map에서 검색을 해보면 지도 옆에 SideBar를 통해서 맵을 제어하는 걸 볼수 있다. 여기에서는 SideBar를 이용해서 map을 제어하는 방법에 대해서 알아보겠다.

우선 셈플을 테스트해보도록 한다.
[http]sidebar.html 예제

<script language="JavaScript" type="text/javascript"> 
    // 이 변수에 side bar에 이벤트가 발생했을 때 출력할 HTML코드가 저장된다. 
    var side_bar_html = ""; 
 
    // side bar에는 여러개의 마커에 대한 HTML요소가 사용되므로 
    // 배열로 정의 한다.  
    var gmarkers = []; 
    var htmls = []; 
    var i = 0; 
 
    // marker을 만든다.  
    // 첫번째 인자는 위치, 두번째 인자는 이름, 세번째 인자는 설명이다. 
    function createMarker(point, name, html) 
    { 
        var marker = new GMarker(point); 
        // click 이벤트에 대한 listener 함수 정의 
        GEvent.addListener(marker, "click", function()  
        { 
            marker.openInfoWindowHtml(html); 
        }); 
        gmarkers[i] = marker; 
        htmls[i] = html; 
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>'; 
        i++; 
        return marker; 
    } 
 
    function myclick(i) 
    { 
        gmarkers[i].openInfoWindowHtml(htmls[i]); 
    } 
    var map = new GMap2(document.getElementById("map")); 
    // GSmallMapControl대신에 GLargeMapControl을 사용했다. 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336),14); 
    map.setMapType(G_SATELLITE_MAP); 
 
    // 테스트에 사용할 marker를 만든다.  
    var point = new GLatLng(37.508500299402435, 127.06263542175293); 
    var marker = createMarker(point, "반디엔 루인스", "제가 애용하는 서점 입니다"); 
    map.addOverlay(marker); 
 
    var point = new GLatLng(37.50209991181568, 127.03652143478394); 
    var marker = createMarker(point, "시티문고", "가끔 강남에 갈일이 있으면 시간을 때우는 장소로.."); 
    map.addOverlay(marker); 
 
    var point = new GLatLng(37.517802011991854, 127.0405125617981); 
    var marker = createMarker(point, "로터리 오락실", "드럼메니아 V2때문에 갑니다"); 
    map.addOverlay(marker); 
 
    var point = new GLatLng(37.5056235973398, 127.0512306690216); 
    var marker = createMarker(point, "onnet", "제가 다니는 회사지요"); 
    map.addOverlay(marker); 
 
    // <div> side_bar에 side_bar_html 문서를 배치한다. 
    document.getElementById("side_bar").innerHTML = side_bar_html; 
</script> 
 

5 XML과 비동기 HTTP를 이용한 지도 생성

이번 예제는 경도/위도와 지역정보를 포함한 data.xml을 다운로드 받아서, 지도에 마커를 표시한다. GDownloadUrl메서드를 이용해서 파일을 다운로드 받을 수 있다. 다운로드 받은 XML파일은 GXml메서드를 이용해서 처리한다. 마커를 클릭하면 지역정보가 표시된다.
<script language="JavaScript" type="text/javascript"> 
var side_bar_html = ""; 
var gmarkers = []; 
var htmls = []; 
var i = 0; 
 
function myclick(i) 
{ 
    gmarkers[i].openInfoWindowHtml(htmls[i]); 
} 
function load() 
{ 
  var map = new GMap2(document.getElementById("map")); 
  var center = new GLatLng(37.51030456483467, 127.05190658569336); 
 
  map.addControl(new GSmallMapControl()); 
  map.addControl(new GMapTypeControl()); 
  map.setCenter(center, 14); 
 
  function createMarker(point, name, html) 
  { 
    var marker = new GMarker(point); 
    GEvent.addListener(marker, "click", function() 
    { 
      marker.openInfoWindowHtml("<b>" + name + "</b>"); 
    }); 
    gmarkers[i]=marker; 
    htmls[i]=html; 
    side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>'; 
    i++; 
    return marker; 
  } 
 
  GDownloadUrl("data.xml", function(data, responseCode) 
  { 
    var xml = GXml.parse(data); 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) 
    { 
      var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
                            parseFloat(markers[i].getAttribute("lng"))); 
      map.addOverlay(createMarker(point, markers[i].getAttribute("name"), markers[i].firstChild.nodeValue)); 
    } 
    document.getElementById("side_bar").innerHTML = side_bar_html; 
  }); 
 
} 
</script> 
  </head> 
  <body onunload="GUnload()"> 
    <div id="map" style="width: 600px; height: 340px"></div> 
    <div id="side_bar"></div> 
    <img src=../images/eyes.gif height=0 width=0 onload=javascript:load()> 
  </body> 
</html> 
 
다음은 data.xml의 내용이다. 효율성과는 거리가 멀게 만들어졌다.
<markers> 
  <marker lat="37.508500299402435" lng="127.06263542175293" name="반디앤 루인스"><![CDATA[<a href=http://www.joinc.co.kr>www.joinc.co.kr</a>]]></marker> 
  <marker lat="37.50209991181568" lng="127.03652143478394" name="시티문고"><![CDATA[<a href=http://teamblog.co.kr>joinc teamblog</a>]]></marker> 
  <marker lat="37.50312128705489" lng="127.05825805664062" name="개미책방"><![CDATA[<a href=http://bbs.joinc.co.kr>joinc bbs</a>]]></marker> 
  <marker lat="37.517802011991854" lng="127.0405125617981" name="로터리오락실"><![CDATA[<a href=http://bbs.joinc.co.kr>joinc bbs</a>]]></marker> 
  <marker lat="37.5056235973398" lng="127.0512306690216" name="울회사"><![CDATA[<a href=http://bbs.joinc.co.kr>joinc bbs</a>]]></marker> 
</markers> 
 
[http]async.html 예제

6 Google 검색엔진 연동

6.1 GoogleBar를 이용한 검색엔진 활용

GoogleBar를 이용하면, 구글맵검색결과와 지도를 연동할 수 있다. 이를 위해서는 GGoogleBarOptions 객체를 설정하고 GMap2생성자의 옵션으로 넘겨주면 된다. 이제 GMap2.enableGoogleBar()를 이용하는 것으로 GoogleBar를 활성화 할 수 있다. GoogleBar의 화면은 google map의 메인화면에서와 비슷한 모습과 느낌을 보여준다.

다음과 같이 간단하게 google 지도 검색과 연동할 수 있다.
function initialize()  
{ 
    var map; 
    if (GBrowserIsCompatible())  
    { 
        var mapOptions = { 
            googleBarOptions : { 
            style : "new", 
            } 
        } 
        map = new GMap2(document.getElementById("map_canvas"), mapOptions); 
        map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336), 13); 
        map.setUIToDefault(); 
        map.enableGoogleBar(); 
    } 
} 
 

[http]구글 검색엔진 연동 예제

7 관련 링크

출처 :
Joinc Wiki : 구글맵(google map) API를 이용한 Map Service
http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI
좋은 정보 감사합니다. 

성능 및 스타일 향상에 도움이 되는 28가지 ASP 팁

Len Cardinal, 선임 컨설턴트, Microsoft Consulting Services
George V. Reilly, Microsoft IIS Performance Lead

Nancy Cluts가 작성한 기사에서 발췌
개발자 기술 엔지니어
Microsoft Corporation

업데이트 날짜: 2000년 4월

요약: 이 기사에서는 ASP 응용 프로그램 및 VBScript의 최적화를 위한 팁을 제공합니다.

목차

  1. 자주 사용되는 데이터는 웹 서버에 캐시하십시오.
  2. 자주 사용되는 데이터는 응용 프로그램이나 세션 개체에 캐시하십시오.
  3. 데이터 및 HTML은 웹 서버 디스크에 캐시하십시오.
  4. 비 agile 구성 요소는 응용 프로그램이나 세션 개체에 캐시하지 마십시오.
  5. 데이터베이스 연결은 응용 프로그램이나 세션 개체에 캐시하지 마십시오.
  6. 세션 개체를 올바르게 사용하십시오.
  7. 코드를 COM 개체에 캡슐화하십시오.
  8. 최신의 리소스를 얻어 신속하게 릴리스하십시오.
  9. 독립 프로세스 실행을 통해 성능과 안정성을 적절히 안배하십시오.
  10. Option Explicit를 사용하십시오.
  11. 로컬 변수를 하위 루틴 및 함수에 사용하십시오.
  12. 자주 사용되는 데이터를 스크립트 변수에 복사하십시오.
  13. 배열 크기 재정의를 피하십시오.
  14. 응답 버퍼링을 사용하십시오.
  15. 인라인 스크립트 및 Response.Write 명령문을 일괄 처리하십시오.
  16. 실행 시간이 긴 페이지를 만들 때 Response.IsClientConnected를 사용하십시오.
  17. 태그를 사용하여 개체를 초기화하십시오.
  18. TypeLib 바인딩을 ADO 및 기타 구성 요소에 사용하십시오.
  19. 브라우저의 유효성 검사 기능을 활용하십시오.
  20. 루프 형식의 문자열 연결을 피하십시오.
  21. 브라우저 및 프록시 캐싱을 사용하십시오.
  22. 가능하면 Response.Redirect가 아닌 Server.Transfer를 사용하십시오.
  23. 디렉터리 URL에 후행 슬래시를 사용하십시오.
  24. 서버 변수 사용을 피하십시오.
  25. 최신 구성 요소로 업그레이드하십시오.
  26. 웹 서버를 조정하십시오.
  27. 성능 테스트를 수행하십시오.
  28. 관련 리소스 링크를 읽어보십시오.

소개

성능은 일종의 기능입니다. 성능은 장래 환경에 맞게 설계해야 하며, 그렇지 않으면 나중에 응용 프로그램을 다시 작성해야 하는 일이 생길 수 있습니다. 즉, 'Active Server Pages(ASP) 응용 프로그램의 성능을 최적화하려면 어떤 전략이 좋지?'와 같은 의문이 발생하게 됩니다.

이 기사에서는 ASP 응용 프로그램과 Visual Basic® Scripting Edition(VBScript)을 최적화하는데 도움이 되는 팁을 제공하며 수많은 위험과 곤란한 문제에 대해서도 논의합니다. 이 기사에 나열된 제안 사항들은 http://www.microsoft.com 및 그외 다른 사이트에서 테스트를 거쳤으며 올바르게 작동합니다. 이 기사에서는 VBScript 및/또는 JScript, ASP 응용 프로그램, ASP 세션, 기타 ASP 고유 개체(요청, 응답서버) 등을 포함하여 ASP 개발에 대한 기본 사항들을 이해하고 있다고 가정합니다.

ASP 코드 자체 이외의 다른 요소들에 의해 ASP 성능이 달라지는 경우가 간혹 있습니다. 이 기사에서 미처 다루지 못한 사항들에 대해서는 뒷부분의 성능 관련 리소스를 참조하십시오. 뒷부분에 나열된 링크에서는 ActiveX® Data Objects(ADO), Component Object Model(COM), 데이터베이스 및 Internet Information Server(IIS) 구성 등을 포함하여 ASP와 비 ASP 항목에 대해 설명합니다. 이러한 링크들은 Microsoft가 즐겨 찾는 링크들이므로 반드시 참조하시기 바랍니다.

팁 1: 자주 사용되는 데이터는 웹 서버에 캐시하십시오

일반적인 ASP 페이지는 백엔드 데이터 저장소에 있는 데이터를 검색한 후 그 결과를 HTML(Hypertext Markup Language) 형식으로 표시합니다. 데이터베이스 속도에 상관없이, 메모리에 있는 데이터를 검색하는 속도는 백엔드 데이터 저장소에 있는 데이터를 검색하는 속도보다 훨씬 빠릅니다. 또한 로컬 하드 디스크에 있는 데이터를 읽는 속도도 데이터베이스에 있는 데이터를 검색하는 속도보다 빠른 것이 보통입니다. 따라서 데이터를 웹 서버의 메모리나 디스크에 캐시하면 일반적으로 성능이 향상됩니다.

캐싱은 전형적으로 속도 향상을 위해 공간을 희생시키는 작업입니다. 캐시 기능을 올바르게 사용하면 성능이 놀랄 만큼 향상되는 것을 볼 수 있습니다. 효과적인 캐시를 위해서는 자주 사용되는 데이터이면서 다시 연산하기에는 부담이 큰 데이터만 캐시에 보관해야 합니다. 사용 빈도가 낮은 데이터로 캐시를 가득 채우면 메모리가 낭비되는 결과를 낳게 됩니다.

자주 변경되지 않는 데이터는 시간이 지나더라도 데이터베이스에 동기화할 필요가 없으므로 캐시하는 것이 좋습니다. 콤보 상자 목록, 참조 테이블, DHTML 스크랩, XML(Extensible Markup Language) 문자열, 메뉴 항목과 데이터 원본 이름(DSN), 인터넷 프로토콜(IP) 주소 및 웹 경로를 포함하는 사이트 구성 변수 등은 캐시하는 것이 좋습니다. 데이터 자체를 캐시하는 대신에 데이터에 대한 표현을 캐시할 수도 있다는 점에 주목하십시오. 전체 제품 카탈로그와 같이 ASP 페이지가 자주 변경되고 캐시하기에 부담이 큰 경우에는 요청이 발생할 때마다 해당 ASP 페이지를 다시 표시하는 것이 아니라 미리 HTML을 생성하는 방법을 고려해 보십시오.

데이터는 어디에 캐시되어야 하며 캐싱 전략에는 어떠한 것들이 있습니까? 데이터는 간혹 웹 서버의 메모리 또는 디스크에 캐시됩니다. 다음 두 가지 팁에서는 이러한 옵션들에 대해 설명합니다.

팁 2: 자주 사용되는 데이터는 응용 프로그램이나 세션 개체에 캐시하십시오

ASP 응용 프로그램세션 개체는 데이터를 메모리에 캐시하는 편리한 컨테이너를 제공합니다. 데이터는 응용 프로그램세션 개체에 모두 지정될 수 있으며 이렇게 지정된 데이터는 새로운 HTTP 호출이 발생할 때까지 메모리에 그대로 남아 있습니다. 세션 데이터는 각 사용자별로 저장되지만 응용 프로그램 데이터는 모든 사용자들 사이에서 공유됩니다.

데이터는 응용 프로그램이나 세션에 언제 로드됩니까? 데이터는 간혹 응용 프로그램이나 세션이 시작될 때 로드됩니다. 응용 프로그램이나 세션을 시작하면서 데이터를 로드하려면 적당한 코드를 Application_OnStart() 또는 Session_OnStart()에 각각 추가하십시오. 이러한 함수들은 Global.asa에 들어 있으며, 그렇지 않다면 이러한 함수들을 직접 추가할 수 있습니다. 또한 처음 데이터를 필요로 할 때 해당 데이터를 로드할 수도 있습니다. 이렇게 하려면 데이터가 있는지 검사하여 데이터가 없으면 데이터를 로드하는 일부 코드를 ASP 페이지에 추가하거나 재사용 가능한 스크립트 함수를 만드십시오. 다음은 지연 평가(Lazy Evaluation)라는 고전적인 성능 기술에 대한 예로, 필요할 때만 이를 사용하십시오.

<%
Function GetEmploymentStatusList
Dim d
d = Application(?EmploymentStatusList?)
If d = ??Then
' FetchEmploymentStatusList function (not shown)
' fetches data from DB, returns an Array
d = FetchEmploymentStatusList()
Application(?EmploymentStatusList?)= d
End If
GetEmploymentStatusList = d
End Function
%>

각각의 필요한 데이터에 대해 이와 유사한 함수를 작성할 수 있습니다.

데이터는 어떤 형식으로 저장됩니까? 모든 스크립트 변수는 변형이기 때문에, 모든 변형 유형이 저장 가능합니다. 예를 들어, 문자열, 정수 또는 배열을 저장할 수 있습니다. 간혹 ADO 레코드 집합의 내용을 이러한 변형 유형들 중 하나로 저장할 수 있습니다. ADO 레코드 집합의 데이터를 꺼내기 위해 데이터를 VBScript 변수에 한 번에 하나의 필드씩 수동으로 복사할 수 있습니다. ADO 레코드 집합 지속성 함수인 GetRows(), GetString() 또는 Save()(ADO 2.5) 중 하나를 사용하면 복사가 더 빠르고 편리해집니다. 이 기사에서는 자세한 세부 정보는 제공하지 않습니다. 다음은 GetRows()를 사용하여 레코드 집합 데이터 배열을 반환하는 함수의 예입니다.

' Get Recordset, return as an Array
Function FetchEmploymentStatusList
Dim rs
Set rs = CreateObject(?ADODB.Recordset?)
rs.Open ?select StatusName, StatusID from EmployeeStatus?, _
?dsn=employees;uid=sa;pwd=;?
FetchEmploymentStatusList = rs.GetRows() ?Return data as an Array
rs.Close
Set rs = Nothing
End Function

배열이 아닌, 목록에 대한 HTML을 캐시하도록 위 예제를 변경할 수도 있습니다. 다음은 그에 대한 간단한 예입니다.

' Get Recordset, return as HTML Option list
Function FetchEmploymentStatusList
Dim rs, fldName, s
Set rs = CreateObject(?ADODB.Recordset?)
rs.Open ?select StatusName, StatusID from EmployeeStatus?, _
?dsn=employees;uid=sa;pwd=;?
s = ?<select name=??EmploymentStatus??>?& vbCrLf
Set fldName = rs.Fields(?StatusName?)' ADO Field Binding
Do Until rs.EOF
' Next line violates Don't Do String Concats,
' but it's OK because we are building a cache
s = s & ? <option>?& fldName & ?</option>?& vbCrLf
rs.MoveNext
Loop
s = s & ?</select>?& vbCrLf
rs.Close
Set rs = Nothing ' See Release Early
FetchEmploymentStatusList = s ' Return data as a String
End Function

올바른 조건 하에서는 ADO 레코드 집합 자체를 응용 프로그램이나 세션 범위에 캐시할 수 있습니다. 이 때 다음 두 가지를 고려해야 합니다.

  • ADO는 빈 스레드로 표시되어야 합니다.
  • 연결이 끊긴 레코드 집합을 사용해야 합니다.

이 두 가지 요구 사항이 충족된다고 보증할 수 없으면 ADO 레코드 집합을 캐시하지 마십시오. 아래의 팁 4(비 Agile 구성 요소는 응용 프로그램이나 세션 개체에 캐시하지 마십시오)와 팁 5(데이터베이스 연결은 응용 프로그램이나 세션 개체에 캐시하지 마십시오)에서는 COM 개체를 응용 프로그램이나 세션 범위에 저장할 때 발생할 수 있는 위험에 대해 설명합니다.

데이터를 응용 프로그램이나 세션 범위에 저장하면, 프로그램을 통해 변경되거나 세션이 만료되거나 웹 응용 프로그램이 다시 시작될 때까지 데이터가 그대로 남아 있습니다. 데이터를 업데이트해야 할 경우에는 어떻게 할까요? 응용 프로그램 데이터의 업데이트를 강제로 수행하도록 지정하려면 데이터를 업데이트하는 관리자 액세스 전용 ASP 페이지로 호출할 수 있습니다. 또한 함수를 사용하여 정기적으로 데이터를 자동으로 새로 고치는 방법도 사용할 수 있습니다. 다음 예에서는 캐시된 데이터와 함께 시간 스탬프를 저장하고 일정 기간이 경과한 후 데이터를 새로 고칩니다.

<%
' error handing not shown...
Const UPDATE_INTERVAL = 300 ' Refresh interval, in seconds

' Function to return the employment status list
Function GetEmploymentStatusList
UpdateEmploymentStatus
GetEmploymentStatusList = Application(?EmploymentStatusList?)
End Function

' Periodically update the cached data
Sub UpdateEmploymentStatusList
Dim d, strLastUpdate
strLastUpdate = Application(?LastUpdate?)
If (strLastUpdate = ??)Or _
(UPDATE_INTERVAL < DateDiff(?s?, strLastUpdate, Now)) Then

' Note: two or more calls might get in here.This is okay and will simply
' result in a few unnecessary fetches (there is a workaround for this)

' FetchEmploymentStatusList function (not shown)
' fetches data from DB, returns an Array
d = FetchEmploymentStatusList()

' Update the Application object.Use Application.Lock()
' to ensure consistent data
Application.Lock
Application(?EmploymentStatusList?) = Events
Application(?LastUpdate?) = CStr(Now)
Application.Unlock
End If
End Sub

다른 예를 보려면 World's Fastest ListBox with Application Data를 참조하십시오.

세션 또는 응용 프로그램 개체에 큰 배열을 캐싱하는 것은 좋지 않습니다. 스크립트 언어의 기능(Semantics)을 사용하려면 배열 요소에 액세스하기 전에 전체 배열을 임시로 복사해야 합니다. 예를 들어, 100,000개의 요소를 가지고 있으며 미국 우편 번호를 지방 기상청으로 매핑하는 문자열 배열을 응용 프로그램 개체에 캐시하는 경우, ASP는 그 중 하나의 문자열을 추출하기 전에 먼저 100,000개의 모든 기상청을 임시 배열에 복사합니다. 이 경우, 사용자 정의 메서드를 통해 사용자 정의 구성 요소를 작성하여 기상청을 저장하는 것이 보다 나은 방법입니다. 그렇지 않으면 딕셔너리 구성 요소들 중 하나를 사용하십시오.

주의를 상기시키는 의미에서 한 가지 더 언급하자면, 배열은 메모리 내에서 서로 인접해 있는 키 데이터 쌍에 대한 빠른 조회 및 저장 성능을 제공한다는 점을 고려해야 합니다. 딕셔너리 인덱싱 속도는 배열 인덱싱 속도보다 느립니다. 자신의 환경에 맞게 최적의 성능을 제공하는 데이터 구조를 선택해야 합니다.

팁 3: 데이터 및 HTML은 웹 서버 디스크에 캐시하십시오

간혹 데이터가 너무 많아서 메모리에 캐시할 수 없는 경우가 생길 수도 있습니다. "데이터가 너무 많다"는 의미는 상황에 따라, 즉 사용할 메모리의 양과 캐시할 항목의 수 및 그 검색 빈도에 따라 다를 수 있습니다. 메모리에 캐시할 데이터가 너무 많은 경우에는 데이터를 텍스트 또는 XML 파일 형식으로 웹 서버의 하드 디스크에 캐시하는 방법을 고려해 보십시오. 디스크 캐시 및 메모리 캐시를 결합하여 사이트에 맞는 최적의 데이터 캐싱 전략을 세울 수 있습니다.

단일 ASP 페이지의 성능을 평가할 때, 디스크에 있는 데이터를 검색하는 속도가 항상 데이터베이스에 있는 데이터를 검색하는 속도보다 빠른 것은 아니라는 점에 주의하십시오. 하지만 캐싱을 수행하면 데이터베이스와 네트워크에 걸리는 로드가 줄어듭니다. 로드가 큰 경우, 캐싱을 수행하면 전체 처리량을 크게 개선할 수 있습니다. 다중 테이블 조인 또는 복잡한 저장 프로시저 등과 같이 부담이 큰 쿼리의 결과를 캐시하거나 대규모 결과 집합을 캐시하는 경우에는 캐싱이 매우 효과적입니다. 여느 때와 마찬가지로 여러 가지 가능성을 테스트해 보십시오.

ASP 및 COM은 디스크 기반 캐싱 구성표를 작성하는 다양한 도구를 제공합니다. ADO 레코드 집합인 Save()Open() 함수는 레코드 집합을 디스크에 저장하고 디스크에 있는 레코드 집합을 로드합니다. 이러한 메서드를 사용하면 앞부분의 응용 프로그램 데이터 캐싱 팁에 있는 코드 예제를 다시 작성함으로써 Save()응용 프로그램 개체로 기록하는 코드용 파일로 대체할 수 있습니다.

다음은 파일에 사용되는 몇 가지 다른 구성 요소들입니다.

  • Scripting.FileSystemObject를 사용하면 파일을 작성하거나 읽거나 기록할 수 있습니다.
  • Internet Explorer와 함께 제공되는 Microsoft® XML 파서인 MSXML은 XML 문서의 저장 및 로딩을 지원합니다.
  • MSN에서 사용되는 샘플인 LookupTable 개체는 디스크로부터 간단한 목록을 로드하는데 유용합니다.

끝으로, 데이터 자체가 아니라 디스크 상의 데이터에 대한 표현을 캐시하는 것도 고려해 보십시오. 미리 렌더링된 HTML은 .htm 또는 .asp 파일 형식으로 디스크에 저장될 수 있으며 하이퍼링크를 통해 해당 파일들을 직접 가리킬 수 있습니다. Xbuilder 또는 Microsoft® SQL Server™ 인터넷 게시 기능 등과 같은 상용 도구를 사용하여 HTML 생성 프로세스를 자동화할 수 있으며, 그 대신 HTML 내용 일부를 .asp 파일에 포함시킬 수도 있습니다. 또한 FileSystemObject를 사용하여 디스크에 있는 HTML 파일을 읽거나 초기 렌더링 과정에서 XML을 사용하는 것 역시 가능합니다.

팁 4: 비 Agile 구성 요소는 응용 프로그램이나 세션 개체에 캐시하지 마십시오

데이터를 응용 프로그램 또는 세션 개체에 캐시하는 것은 좋은 방법이지만, COM 개체응용 프로그램 또는 세션 개체에 캐시하면 곤란한 문제들이 유발될 수 있습니다. 간혹 자주 사용되는 COM 개체를 응용 프로그램 또는 세션 개체에 캐시해야 하는 경우가 발생합니다. 불행하게도, Visual Basic 6.0 이하에서 작성된 개체를 포함한 많은 수의 COM 개체들의 경우 응용 프로그램 또는 세션 개체에 저장하려고 하면 심각한 병목 현상이 생길 수 있습니다.

특히, 비 agile 구성 요소인 경우에는 세션 또는 응용 프로그램 개체에 캐시할 때 성능 병목 현상이 발생하게 됩니다. agile 구성 요소는 FTM(Free-Threaded Marshaler)을 집계하는 ThreadingModel=Both로 표시된 구성 요소이거나 ThreadingModel=Neutral로 표시된 구성 요소입니다. Neutral 모델은 Windows® 2000 및 COM+의 새로운 모델입니다. 다음은 비 agile 구성 요소입니다.

  • FTM을 집계하지 않는 빈 스레드 구성 요소
  • 공동(Apartment) 스레드 구성 요소
  • 단일 스레드 구성 요소

중립 스레드가 아닌 한, Microsoft Transaction Server(MTS)/COM+ 라이브러리 및 서버 패키지/응용 프로그램 등과 같은 구성된 구성 요소들은 비 agile입니다. 공동(Apartment) 스레드 구성 요소와 기타 비 agile 구성 요소들은 페이지 범위에서 가장 잘 작동합니다. 즉, 단일 ASP 페이지에서 만들어지고 제거됩니다.

IIS 4.0의 경우 ThreadingModel=Both로 표시된 구성 요소는 agile로 간주되지만, IIS 5.0에서는 그렇지 않습니다. 이러한 구성 요소들은 Both로 표시되어야 하며 FTM도 집계해야 합니다. agility 기사에서는 Active Template Library로 작성된 C++ 구성 요소들이 FTM을 집계하는 방법에 대해 설명합니다. 구성 요소가 인터페이스 포인터를 캐시하는 경우에는 이러한 포인터는 그 자체가 agile이어야 하거나 COM GIT(Global Interface Table)에 저장되어야 합니다. FTM을 집계하도록 Both 스레드 구성 요소를 다시 컴파일할 수 없는 경우에는 그 구성 요소를 ThreadingModel=Neutral로 표시할 수 있습니다. 또한 IIS가 agility 검사를 수행하지 않기를 원해서 비 agile 구성 요소를 응용 프로그램이나 세션 범위에 저장하려고 할 경우에는 메타베이스에서 AspTrackThreadingModelTrue로 설정할 수 있습니다. AspTrackThreadingModel을 변경하면 안됩니다.

IIS 5.0에서는 Server.CreateObject를 사용해서 만든 비 agile 구성 요소를 응용 프로그램 개체에 저장하려고 하면 오류 메시지가 나타납니다. Global.asa에서 <object runat=server scope=application ...>을 사용하면 이러한 문제를 해결할 수 있지만, 이 방법은 아래에 설명된 바와 같이 마샬링 및 순차화를 유발하므로 사용하지 않는 것이 좋습니다.

비 agile 구성 요소를 캐시하면 어떻게 될까요? 세션 개체에 캐시된 비 agile 구성 요소는 ASP 작업자 스레드에 대한 세션을 "잠급니다". ASP는 요청을 처리하는 작업자 스레드의 풀을 유지 관리합니다. 일반적으로 새 요청은 최초 사용 가능한 작업자 스레드에 의해 처리됩니다. 스레드에 대한 세션이 잠기는 경우, 해당 요청은 자신이 연결된 스레드를 사용할 수 있을 때까지 기다려야 합니다. 다음은 이를 이해하는데 도움이 될만한 유사한 사례입니다. 즉, 슈퍼마켓에 가서 몇 가지 식료품을 고른 후 3번 계산대에서 그 대금을 지불합니다. 그런 다음부터는 그 슈퍼마켓에서 산 식료품의 대금은 항상 3번 계산대에서 지불해야 합니다. 다른 계산대에서 기다리는 손님이 적거나 심지어 없는 경우에도 마찬가지입니다.

비 agile 구성 요소들을 응용 프로그램 범위에 저장하면 성능에 최악의 영향을 미치게 됩니다. ASP는 별도의 스레드를 만들어서 비 agile 응용 프로그램 범위 구성 요소들을 실행해야 합니다. 결과적으로, 모든 호출이 이 스레드에 대해 마셜링되어야 하거나 모든 호출이 순차화되어야 합니다. 마셜링은 매개 변수들이 메모리 공유 영역에 저장되어야 함을 의미합니다. 즉, 부담이 큰 컨텍스트 스위치가 별도의 스레드에 대해 만들어지고 구성 요소의 메서드가 실행되며, 그 결과가 공유 영역으로 마셜링되고 다른 부담이 큰 컨텍스트 스위치는 제어 권한을 원래의 스레드로 되돌려야 합니다. 순차화는 모드 메서드가 한 번에 하나씩 실행되어야 함을 의미합니다. 따라서 서로 다른 두 개의 ASP 작업자 스레드가 공유 구성 요소에서 메서드를 동시에 실행할 수 없으므로 동시성이 사라지게 되는데, 특히 다중 프로세서 컴퓨터에서 이러한 현상이 더 두드러집니다. 더군다나, 모든 비 agile 응용 프로그램으로 범위가 한정된 구성 요소들이 한 개의 스레드("Host STA")를 공유하므로 순차화의 영향이 더욱 커지게 됩니다.

이해가 잘 안되면 아래의 몇 가지 일반 규칙들을 살펴보십시오. Visual Basic 6.0 이전 버전을 사용해서 개체를 작성하고 있는 경우에는 그 개체를 응용 프로그램 또는 세션 개체에 캐시하면 안됩니다. 개체의 스레드 모델을 모른다면 그 개체를 캐시하면 안됩니다. 비 agile 개체는 캐시하지 말고 각각의 페이지에서 만든 후 릴리스하십시오. 개체는 마셜링 또는 순차화가 발생하지 않도록 ASP 작업자 스레드에서 직접 실행해야 합니다. IIS 상자에서 COM 개체를 실행하고 있는 경우와 그 COM 개체를 시작하거나 종료하는데 많은 시간이 걸리지 않는 경우에는 적절한 성능을 얻을 수 있습니다. 단, 단일 스레드 개체는 이와 동일한 방식으로 사용되지 않아야 한다는 점에 주의하십시오. VB는 단일 스레드 개체를 만들 수 있으므로 조심하십시오! Microsoft Excel 스프레드시트 등과 같은 단일 스레드 개체를 이와 동일한 방식으로 사용해야 하는 경우에는 많은 처리량을 기대할 수 없습니다.

ADO 레코드 집합은 ADO가 빈 스레드로 표시되어 있을 때 안전하게 캐시할 수 있습니다. ADO를 빈 스레드로 표시하려면 보통 \\Program Files\Common\System\ADO에 있는 Makfre15.bat 파일을 사용하면 됩니다.

경고 Microsoft Access를 데이터베이스로 사용하고 있는 경우에는 ADO를 빈 스레드로 표시하지 마십시오. 또한 ADO 레코드 집합에 대한 연결이 끊어져 있어야 합니다. 일반적으로, 자기 자신만의 고유한 구성을 관리하는 고객들에게 웹 응용 프로그램을 판매하는 독립 소프트웨어 공급업체[ISV]처럼 사이트에서 ADO 구성을 제어할 수 없는 경우에는 레코드 집합을 캐시하지 않는 것이 좋습니다.

또한 딕셔너리 구성 요소는 agile 개체입니다. LookupTable은 데이터 파일로부터 데이터를 로드하며 구성 정보 뿐만 아니라 콤보 상자 데이터에서도 유용하게 사용됩니다. Duwamish Books에 있는 PageCache 개체는 Caprock Dictionary와 마찬가지로 딕셔너리 기능(semantics)을 제공합니다. 이러한 개체들과 그 파생물들은 효과적인 캐싱 전략의 토대로 사용될 수 있습니다. Scripting.Dictionary 개체는 비 agile이므로 응용 프로그램이나 세션 범위에 저장될 수 없다는 점에 주의하십시오.

팁 5: 데이터베이스 연결은 응용 프로그램이나 세션 개체에 캐시하지 마십시오

보통 ADO 연결은 캐시하지 않는 것이 좋습니다. 하나의 연결 개체를 응용 프로그램 개체에 저장하여 모든 페이지에서 이를 사용하는 경우에는 모든 페이지가 이 연결을 사용하기 위해 경쟁하게 됩니다. 연결 개체가 ASP 세션 개체에 저장되어 있으면 모든 사용자들에 대해 데이터베이스 연결이 설정됩니다. 따라서 연결 풀링을 통해 얻을 수 있는 장점들이 줄어들며 웹 서버와 데이터베이스 모두에서 불필요하게 많은 로드가 발생하게 됩니다.

데이터베이스 연결을 캐시하지 말고 ADO를 사용하는 모든 ASP 페이지에서 ADO 개체를 만들거나 제거하십시오. 이렇게 하면 IIS가 자체적으로 데이터베이스 연결 풀링을 보유하게 되므로 효과적입니다. 더 정확히 말해서, IIS가 OLEDB 및 ODBC 연결 풀링을 자동으로 사용하게 되므로 각 페이지에서 연결을 효과적으로 만들거나 제거할 수 있게 됩니다.

연결된 레코드 집합은 데이터베이스 연결에 대한 참조를 저장하므로, 연결된 레코드 집합을 응용 프로그램 또는 세션 개체에 저장하면 안됩니다. 단, 연결이 끊긴 레코드 집합은 데이터 연결에 대한 참조를 저장하지 않으므로 안전하게 캐시할 수 있습니다. 레코드 집합의 연결을 끊으려면 다음과 같은 두 단계를 수행하십시오.

Set rs = Server.CreateObject(?ADODB.RecordSet?)
rs.CursorLocation = adUseClient ' step 1

' Populate the recordset with data
rs.Open strQuery, strProv

' Now disconnect the recordset from the data provider and data source
rs.ActiveConnection = Nothing ' step 2

연결 풀링에 대한 자세한 내용은 ADO 및 SQL Server 설명서에 나와 있습니다.

팁 6: 세션 개체를 올바르게 사용하십시오

지금까지 데이터를 응용 프로그램 및 세션 개체에 캐시함으로써 얻을 수 있는 장점들에 대해 얘기했으며, 이제는 세션 개체를 사용하지 말라는 제안을 하려고 합니다. 세션 개체는 아래에 설명된 바와 같이 사용량이 많은 사이트에서 사용할 때 발생하는 수많은 곤란한 문제들을 가지고 있습니다. 여기서 사용량이 많은 사이트는 일반적으로 1초 당 사용되는 페이지 수가 수 백개에 달하거나 동시에 접속하는 사용자 수가 수 천명에 달하는 사이트를 의미합니다. 수평으로 확장해야 하는 사이트, 즉 여러 대의 서버를 사용하여 로드를 분산시키거나 내결함성을 구현하는 사이트에서는 이 팁이 더욱 중요합니다. 인트라넷 사이트와 같이 소규모 사이트인 경우에는 세션 사용으로 인한 편리함이 크기 때문에 오버헤드가 생기는 단점을 보상할 수 있습니다.

재생을 위해 ASP는 웹 서버에 접속하는 모든 사용자에 대해 세션을 자동으로 만듭니다. 각각의 세션은 10KB 정도의 메모리 오버헤드를 가지며 모든 요청을 약간씩 느려지게 만드는데, 이 때 오버헤드는 종류에 상관없이 데이터가 세션에 저장될 때마다 항상 맨 위에 놓여집니다. 세션은 구성 가능한 초과 시간이 경과할 때까지 계속 사용되며 그 초과 시간은 보통 20분입니다.

세션에 관련된 가장 큰 문제는 성능이 아닌 확장성에 관련된 문제입니다. 세션은 웹 서버를 스팬하지 않습니다. 즉, 일단 세션이 한 대의 서버에서 만들어진 이후에는 그 데이터가 그대로 보존됩니다. 따라서 웹 그룹에서 세션을 사용하고 있다면, 사용자의 세션이 있는 서버로 향하도록 각 사용자의 요청을 처리하기 위한 전략을 세워야 합니다. 이러한 전략을 세우는 작업은 웹 서버에 대한 사용자 "Sticking"이라고 합니다. "Sticky Session"이라는 용어는 바로 여기에서 유래된 것입니다. 세션은 디스크에 영구적으로 저장되지 않기 때문에, "sticky 상태의" 사용자는 웹 서버의 작동이 중단되면 자신의 세션 상태를 잃게 됩니다.

Sticky Session을 구현하기 위한 전략에는 하드웨어 및 소프트웨어 솔루션이 포함됩니다. Windows 2000 Advanced Server의 네트워크 로드 균형 조정 및 Cisco사의 Local Director 등과 같은 솔루션을 사용하면 약간의 확장만으로도 Sticky Session을 구현할 수 있습니다. 이러한 솔루션들은 완벽하지가 않습니다. 이 시점에서는 자기만의 소프트웨어 솔루션은 사용하지 않는 것이 좋습니다. Microsoft에서는 ISAPI 필터와 URL 맹글링(mangling) 등을 사용했습니다.

응용 프로그램 개체는 서버를 스팬하지 않기 때문에, 웹 그룹에 걸쳐 응용 프로그램 데이터를 공유하고 업데이트해야 할 경우에는 백엔드 데이터베이스를 사용해야 합니다. 단, 읽기 전용 응용 프로그램 데이터는 웹 그룹에서 그대로 사용할 수 있습니다.

업무상 중요한 대부분의 사이트에서는 가동 시간을 늘리려는 이유가 아닌 다른 이유, 즉 장애 조치 및 서버 유지 관리를 처리하기 위해 두 대 이상의 웹 서버를 구축하려고 할 것입니다. 따라서 업무상 중요한 응용 프로그램을 설계할 때, "Sticky Session"을 구현하거나 그렇지 못하면 세션 사용을 피해야 합니다. 또한 사용자 상태를 개별 웹 서버에 저장하는 다른 상태 관리 기술들도 사용해야 합니다.

세션을 사용하고 있지 않으면 세션 기능을 반드시 해제해야 합니다. 인터넷 서비스 관리자를 통해 응용 프로그램의 세션 기능을 해제할 수 있습니다. 자세한 내용은 ISM 설명서를 참조하십시오. 세션을 사용하는 경우에는 다양한 방법으로 세션이 성능에 미치는 영향을 최소화할 수 있습니다.

도움말 화면, 방문자 영역 등과 같이 세션에 필요하지 않은 내용은 세션 기능이 해제되어 있는 별도의 ASP 응용 프로그램으로 옮길 수 있습니다. 각 페이지 단위로 해당 페이지에서 세션 개체를 필요로 하지 않는 ASP에게 힌트를 제공할 수 있습니다. 다음과 같은 지시어를 ASP 페이지의 맨 위에 넣으십시오.

<% @EnableSessionState=False %>

위와 같은 지시어를 사용해야 하는 중요한 이유는 세션으로 인해 프레임셋 관련 문제가 생길 수 있기 때문입니다. ASP를 사용하면 세션으로부터 발생하는 요청이 한 번에 하나씩만 실행되도록 만들 수 있습니다. 따라서 브라우저가 한 명의 사용자에 대해 여러 개의 페이지를 요청하더라도 한 번에 한 개의 ASP 요청만 세션을 사용하게 되므로, 세션 개체에 액세스할 때 다중 스레드 문제가 유발되지 않습니다. 결과적으로 볼 때, 프레임셋에 있는 모든 페이지는 동시에 표시되는 것이 아니라 순차적으로 한 번에 하나씩 표시됩니다. 모든 프레임이 표시될 때까지 사용자가 장시간 기다려야 할 경우도 있습니다. 참고: 특정 프레임셋 페이지가 세션에 대한 신뢰를 가지고 있지 않은 경우에는 @EnableSessionState=False 지시어를 사용하여 반드시 ASP에게 알려야 합니다.

세션 개체를 사용하는 대신, 세션 상태 관리용으로 제공되는 많은 수의 옵션들을 사용할 수도 있습니다. 상태의 크기가 4KB 미만으로 작은 경우에는 일반적으로 쿠키, QueryString 변수 및 숨겨진 서식 변수를 사용하는 것이 좋습니다. 쇼핑 카트와 같이 데이터 크기가 큰 경우에는 백엔드 데이터베이스를 사용하는 것이 가장 좋습니다. 웹 서버 그룹에는 상태 관리 기술에 대한 많은 정보들이 들어 있습니다. 자세한 내용은 세션 상태 설명서를 참조하십시오.

팁 7: 코드를 COM 개체에 캡슐화하십시오

VBScript 또는 JScript가 매우 많은 경우, 간혹 그 코드를 컴파일된 COM 개체로 옮기면 성능을 개선할 수 있습니다. 컴파일된 코드의 실행 속도는 보통, 해석된 코드의 실행 속도보다 빠릅니다. 컴파일된 COM 개체는 스크립트에 사용된 "후기 바인딩"이 아니라, 보다 효과적으로 COM 개체 메서드를 불러오는 "초기 바인딩"을 통해 다른 COM 개체에 액세스할 수 있습니다.

성능 측면 뿐만 아니라, 코드를 COM 개체에 캡슐화하면 다음과 같은 장점도 얻을 수 있습니다.

  • COM 개체는 비즈니스 로직으로부터 표현 로직을 분리하는 성능이 매우 우수합니다.
  • COM 개체는 코드 재사용을 가능케 합니다.
  • 대부분의 개발자들은 VB, C++ 또는 Visual J++로 작성된 코드가 ASP로 작성된 코드보다 디버깅하기 쉽다는 점을 알고 있습니다.

COM 개체는 초기 개발 기간이 길고 다양한 프로그래밍 기술을 필요로 한다는 단점들을 가지고 있습니다. 작은 양의 ASP를 캡슐화하면 성능상 얻을 수 있는 장점보다는 단점이 많을 수 있다는 점에 주의하십시오. 일반적으로 이러한 상황은 작은 양의 ASP 코드가 COM 개체에 포함될 때 발생합니다. 이러한 경우에는 컴파일된 코드를 통해 얻을 수 있는 장점보다 COM 개체를 만들어 불러오는데 걸리는 오버헤드로 인한 단점이 더 많습니다. 어떤 방식으로 ASP 스크립트와 COM 개체 코드를 결합할 때 최적의 성능을 얻을 수 있는지를 판별하려면 여러 번의 시행 착오를 거쳐야 합니다. Microsoft는 Windows NT® 4.0/IIS 4.0에 비해 Windows 2000/IIS 5.0의 스크립트와 ADO 성능을 다양하게 개선했습니다. 따라서 ASP 코드에 비해 컴파일된 코드를 통해 얻을 수 있는 성능상의 장점들은 IIS 5.0의 도입과 함께 줄어들었습니다.

COM 개체를 ASP에 사용함으로써 발생하는 장단점에 대한 자세한 내용은 ASP Component Guidelines and Programming Distributed Applications with COM and Microsoft Visual Basic 6.0을 참조하십시오. COM 구성 요소를 구축하는 경우에는 반드시 스트레스 테스트를 수행해야 합니다. 실제로 모든 ASP 응용 프로그램들은 당연히 스트레스 테스트를 거쳐야 합니다.

팁 8: 최신의 리소스를 얻어 신속하게 릴리스하십시오

일반적으로 최신의 리소스를 얻어 신속하게 릴리스하는 것이 좋습니다. 이러한 팁은 파일 핸들 및 기타 리소스 뿐만 아니라 COM 개체에도 적용됩니다.

ADO 연결 및 레코드 집합이 이러한 최적화에 가장 적합합니다. 레코드 집합을 사용하는 경우, 그 데이터를 사용하여 테이블을 채운 후 페이지 끝에 도달할 때까지 기다리지 말고 즉시 릴리스하십시오. VBScript 변수는 Nothing으로 설정하는 것이 가장 좋습니다. 레코드 집합이 범위를 벗어나지 않게 하십시오. 또한 관련된 모든 명령 또는 연결 개체를 릴리스하십시오. = Nothing으로 설정하기 전에 레코드 집합 또는 연결에 대해 Close()를 호출하는 것을 잊지 마십시오. 그러면 데이터베이스에서 리소스를 저글링하는 기간이 단축되며 데이터베이스 연결이 최대한 빠르게 연결 풀에 릴리스됩니다.

팁 9: 독립 프로세스 실행을 통해 성능과 안정성을 적절히 안배하십시오

ASP와 MTS/COM+에는 모두 성능과 안정성이 적절히 안배되도록 조정할 수 있는 구성 옵션들이 있습니다. 응용 프로그램을 만들고 구축할 때 그 장단점을 이해하고 있어야 합니다.

ASP 옵션

세 가지 방법들 중 하나로 실행되도록 ASP 응용 프로그램을 구성할 수 있습니다. IIS 5.0에서는 이러한 옵션들에 대해 설명할 목적으로 "격리 수준(isolation level)"이라는 용어를 도입했습니다. 격리 수준 값에는 낮음, 보통높음의 세 가지가 있습니다.

  • 낮음 격리. 모든 IIS 버전에서 지원되며 속도가 가장 빠릅니다. 낮음 격리는 Inetinfo.exe로 ASP를 실행하는데, 이는 기본 IIS 프로세스입니다. ASP 응용 프로그램의 작동이 중단되면 IIS의 작동도 중단됩니다. IIS 4.0의 경우, IIS를 다시 시작하려면 웹 마스터가 InetMon 등과 같은 도구들을 사용하여 사이트를 모니터하고 서버 오류가 발생한 경우 배치 파일을 실행하여 서버를 다시 시작해야 합니다. IIS 5.0에서는 오류가 발생한 서버를 자동으로 다시 시작하는 안정적인 재시작 기능을 도입했습니다.
  • 보통 격리. IIS 5.0에서 새로 도입된 이러한 보통 격리 수준은 ASP가 IIS 프로세스와는 별도로 실행되므로 독립 프로세스라고도 불립니다. 보통 격리에서 보통으로 실행되도록 구성된 모든 ASP 응용 프로그램은 하나의 프로세스 공간을 공유합니다. 따라서 한 개의 상자에서 여러 개의 독립 프로세스 ASP 응용 프로그램을 실행하는데 필요한 프로세스의 수가 줄어듭니다. 보통은 IIS 5.0의 기본 격리 수준입니다.
  • 높음 격리. IIS 4.0 및 IIS 5.0에서 지원되는 높음 격리도 역시 독립 프로세스입니다. ASP 작동이 중단되더라도 웹 서버 작동은 중단되지 않습니다. 다음 번 ASP 요청이 발생하면 ASP 응용 프로그램이 자동으로 다시 시작됩니다. 높음 격리를 사용하면, 높음으로 실행되도록 구성된 각각의 ASP 응용 프로그램은 자체 프로세스 공간에서 실행됩니다. 따라서 ASP 응용 프로그램들이 상호 보호됩니다. 하지만 각각의 ASP 응용 프로그램마다 별도의 프로세스를 필요로 한다는 단점이 있습니다. 이러한 단점 때문에, 하나의 컴퓨터에 많은 수의 응용 프로그램들을 호스트해야 할 경우에는 엄청난 오버헤드가 생길 수 있습니다.

최상의 옵션은 무엇입니까? IIS 4.0에는 독립 프로세스를 실행하기에 좋지 않은 성능상의 단점들이 있습니다. IIS 5.0에서는 ASP 응용 프로그램을 독립 프로세스로 실행하는데 드는 비용을 최소화하기 위한 많은 작업들이 수행되었습니다. 실제로 대부분의 테스트를 거친 결과, IIS 5.0의 ASP 독립 프로세스 응용 프로그램이 IIS 4.0의 종속 프로세스 응용 프로그램보다 빠르게 실행되었습니다. 그럼에도 불구하고 종속 프로세스(낮음 격리 수준)는 두 플랫폼 모두에서 여전히 최상의 성능을 제공합니다. 그러나 상대적으로 방문 횟수가 적거나 최대 처리량이 낮은 경우에는 낮음 격리 수준을 통해 얻을 수 있는 장점들이 그다지 많지 않습니다. 따라서 각각의 웹 서버에서 1초에 수 백개 또는 수 천개의 페이지를 필요로 할 때까지는 낮음 격리 수준으로 설정할 필요성을 느끼지 못할 것입니다. 또한 다양한 구성들을 사용하여 테스트를 수행하고 그 장단점을 판별해야 합니다.

참고 ASP 응용 프로그램을 독립 프로세스(보통 또는 높음 격리)로 실행하면 ASP 응용 프로그램은 Windows NT4의 경우 MTS에서 실행되고 Windows의 경우 COM+에서 실행됩니다. 즉, Windows NT4의 경우 Mtx.exe로 실행되고 Windows 2000의 경우 DllHost.exe로 실행됩니다. 작업 관리자를 살펴보면 이러한 프로세스의 실행 여부를 알 수 있습니다. 또한 IIS가 MTS 패키지 또는 COM+ 응용 프로그램을 ASP 독립 프로세스 응용 프로그램용으로 구성하는 방법도 알 수 있습니다.

COM 옵션

ASP 옵션과 완전히 유사하지는 않지만, COM 구성 요소도 세 가지 구성 옵션들을 가지고 있습니다. COM 구성 요소는 "구성되지 않은" 구성 요소이거나 라이브러리 응용 프로그램으로서 구성된 구성 요소이거나 서버 응용 프로그램으로서 구성된 구성 요소입니다. 구성되지 않은 구성 요소는 COM+에 등록되지 않은 구성 요소를 의미합니다. 이러한 구성 요소는 호출자의 프로세스 공간에서 실행되므로 "종속 프로세스"입니다. 라이브러리 응용 프로그램도 종속 프로세스이지만 보안, 트랜잭션 및 컨텍스트 지원 등을 포함하여 COM+ 서비스의 장점을 활용합니다. 서버 응용 프로그램은 자체 프로세스 공간에서 실행되도록 구성됩니다.

라이브러리 응용 프로그램에 비해 구성되지 않은 구성 요소를 사용하여 얻을 수 있는 장점이 약간 더 많다는 사실을 알 수 있습니다. 또한 서버 응용 프로그램에 비해 라이브러리 응용 프로그램을 사용하여 얻을 수 있는 성능상의 장점이 훨씬 많다는 사실도 알 수 있습니다. 그 이유는 라이브러리 응용 프로그램이 ASP와 동일한 프로세스에서 실행되는 반면에 서버 응용 프로그램은 자체 프로세스에서 실행되기 때문입니다. 프로세스간 호출은 종속 프로세스 호출보다 더 부담이 큽니다. 또한 레코드 집합 등과 같은 데이터가 프로세스 사이에서 전달될 때에는 모든 데이터가 두 프로세스 사이에서 복사되어야 합니다.

주의! COM 서버 응용 프로그램을 사용할 때, ASP와 COM 사이에서 개체를 전달하는 경우에는 개체가 "값에 따른 마셜링" 또는 MBV를 구현해야 합니다. MBV를 구현하는 개체들은 하나의 프로세스에서 다른 프로세스로 자동 복사됩니다. 이러한 방식은 개체가 작성자의 프로세스에 그대로 남아 있으며 다른 프로세스가 개체를 사용하기 위해 작성 프로세스에 반복적으로 호출되는 방식보다 낫습니다. 연결이 끊긴 ADO 레코드 집합은 값에 따라 마셜링되지만, 연결된 레코드 집합은 그렇지 않습니다. Scripting.Dictionary는 MBV를 구현하지 않으며 프로세스 사이에서 전달되지 않습니다. 끝으로, VB 프로그래머는 MBV가 ByVal 매개 변수의 전달을 통해 구현되는 것이 아니라, 원래의 구성 요소 작성자에 의해 구현된다는 점에 주의해야 합니다.

수행할 사항

성능과 안정성이 적절히 조정된 구성을 설정하려면 다음과 같은 권장 사항들을 수행해야 합니다.

  • IIS 4.0에서는 ASP의 낮음 격리 수준을 사용하고 MTS 서버 패키지를 사용하십시오.
  • IIS 5.0에서는 ASP의 보통 격리 수준을 사용하고 COM+ 라이브러리 응용 프로그램을 사용하십시오.

이 권장 사항들은 매우 일반적인 지침들입니다. 기업 호스팅에서는 일반적으로 ASP가 보통 또는 높음 격리 수준에서 실행되는 반면에 단일 용도의 웹 서버는 낮음 격리 수준에서 실행될 수 있습니다. 그 장단점을 평가하여 어떤 구성이 자신의 환경에 맞는지를 스스로 판별하십시오.

팁 10: Option Explicit를 사용하십시오

.asp 파일에 있는 Option Explicit를 사용하십시오. .asp 파일의 맨 위에 있는 이 지시어는 사용할 변수를 모두 선언하도록 개발자에게 강요합니다. 응용 프로그램을 디버깅할 때 이 지시어를 사용하면 MyXMLString= 대신에 MyXLMString=가 발생하는 경우처럼 변수 이름의 입력 오타가 생기거나 원치 않는 변수가 만들어질 가능성을 봉쇄하기 때문에, 대부분의 프로그래머들은 이 지시어가 매우 유용하다는 것을 알고 있습니다.

보다 중요한 점은 선언된 변수가 선언되지 않은 변수보다 빠르게 실행된다는 것입니다. 스크립팅 실행 시간은 선언되지 않은 변수가 사용될 때마다 자동으로 변수 이름별로 그 선언되지 않은 변수를 참조합니다. 반면, 선언된 변수는 컴파일 시간 또는 실행 시간에서 서수를 할당받습니다. 결과적으로 볼 때, 선언된 변수는 이 서수에서 참조합니다. Option Explicit를 사용하면 변수를 선언하도록 강제 지정하므로, 모든 변수가 선언되어 빠른 액세스를 가능하게 합니다.

팁 11: 로컬 변수를 하위 루틴 및 함수에 사용하십시오

로컬 변수는 하위 루틴 및 함수 내에서 선언된 변수입니다. 함수 또는 하위 루틴 내에서 선언된 로컬 변수는 글로벌 변수보다 빠르게 액세스됩니다. 또한 로컬 변수를 사용하면 코드가 보다 명확해지므로, 가능하면 항상 로컬 변수를 사용하십시오.

팁 12: 자주 사용되는 데이터를 스크립트 변수에 복사하십시오

ASP에 있는 COM 개체에 액세스할 때는 자주 사용되는 데이터를 스크립트 변수에 복사해야 합니다. 이렇게 복사하면 스크립트 변수에 액세스하는 것에 비해 상대적으로 부담이 큰 COM 메서드 호출의 수가 줄어듭니다. 컬렉션딕셔너리 개체에 액세스할 때에도 이 기술을 사용하면 부담이 큰 조회의 수를 줄일 수 있습니다.

일반적으로 두 번 이상 개체 데이터에 액세스할 경우에는 해당 데이터를 스크립트 변수에 복사하십시오. 이러한 최적화의 주요 대상은 Request 변수(Form 및 QueryString 변수)입니다. 예를 들어, QueryString 변수로 호출되는 UserID가 반복적으로 분배되는 사이트에서 이 UserID가 특정 페이지에 12회 참조된다고 가정해 보십시오. Request(?UserID?)를 12회 호출하지 말고 ASP 페이지의 맨 위에 있는 변수에 UserID를 할당하십시오. 그러면 페이지 전체에 걸쳐 그 변수가 사용됩니다. 따라서 11회의 COM 메서드 호출이 줄어듭니다.

실제로 COM 속성 또는 메서드에 대한 액세스는 매우 부담이 큰 작업입니다. 다음은 자주 사용되는 구문 코드를 보여주는 예입니다.

Foo.bar.blah.baz = Foo.bar.blah.qaz(1)
If Foo.bar.blah.zaq = Foo.bar.blah.abc Then ' ...

이 코드는 다음과 같이 실행됩니다.

  1. Foo 변수가 글로벌 개체로 확인됩니다.
  2. bar 변수가 Foo의 구성원으로 확인됩니다. 결과적으로 COM 메서드 호출이 발생합니다.
  3. blah 변수가 Foo.bar의 구성원으로 확인됩니다. 결과적으로 COM 메서드 호출이 다시 발생합니다.
  4. qaz 변수가 foo.bar.blah의 구성원으로 확인됩니다. 결과적으로 COM 메서드 호출이 다시 발생합니다.
  5. Foo.bar.blah.quaz(1)를 불러옵니다. COM 메서드 호출이 다시 발생합니다. 여기까지 이해가 되었습니까?
  6. 1-3 단계를 다시 수행하여 baz를 확인합니다. 시스템은 qaz 호출이 개체 모델을 변경했는지 여부를 알지 못하므로, 1-3 단계를 다시 수행하여 baz를 확인해야 합니다.
  7. bazFoo.bar.blah의 구성원으로 확인합니다. 속성을 설정합니다.
  8. 1-3 단계를 다시 수행하여 zaq를 확인합니다.
  9. 1-3 단계를 다시 수행하여 abc를 확인합니다.

이처럼, 이 코드는 매우 비효율적이며 작성에 많은 시간이 걸립니다. VBScript에서 이 코드를 가장 빠르게 작성하는 방법은 다음과 같습니다.

Set myobj = Foo.bar.blah ' do the resolution of blah ONCE
Myobj.baz = myobj.qaz(1)
If Myobj.zaq = Myobj.abc Then '...

VBScript 5.0 이상을 사용하고 있는 경우에는 With 명령문을 사용하여 이 코드를 작성할 수 있습니다.

With Foo.bar.blah
.baz = .qaz(1)
If .zaq = .abc Then '...
...
End With

이 팁은 VB 프로그래밍에도 적용된다는 점을 기억하십시오.

팁 13: 배열 크기 재정의를 피하십시오

배열의 크기 재정의(Redim)는 가능한 한 피하십시오. 실제 메모리 크기에 의해 성능이 제한되는 컴퓨터의 경우에는 최악의 경우에 대비하여 초기 배열 크기를 설정하거나, 그 크기를 최적으로 설정하고 필요할 때마다 배열 크기를 재정의하십시오. 단, 필요하지 않은 경우에도 수 MB나 되는 메모리를 할당해야 한다는 것은 아닙니다.

다음 코드는 DimRedim 사용 예입니다.

<%
Dim MyArray()
Redim MyArray(2)
MyArray(0) = ?hello?
MyArray(1) = ?good-bye?
MyArray(2) = ?farewell?
...
' some other code where you end up needing more space happens, then ...
Redim Preserve MyArray(5)
MyArray(3) = ?more stuff?
MyArray(4) = ?even more stuff?
MyArray(5) = ?yet more stuff?
%>

배열의 크기 재정의(Redim)를 수행하여 그 크기를 늘리는 것보다는 초기에 올바른 크기까지 배열의 크기 정의(Dim)를 수행(위 코드의 경우 5)하는 것이 좋습니다. 모든 요소들을 끝까지 사용하지 않으면 약간의 메모리 낭비가 있게 되지만 속도가 빨라지는 이점이 있습니다.

팁 14: 응답 버퍼링을 사용하십시오

"응답 버퍼링" 기능을 설정함으로써 전체 출력 페이지 만큼을 버퍼링할 수 있습니다. 이렇게 하면 브라우저에 기록되는 양이 최소화되어 전체 성능이 향상됩니다. 기록할 때마다 IIS 및 회선을 통해 보내지는 데이터 크기로 인한 오버헤드가 아주 크기 때문에, 기록 횟수가 줄어들수록 성능이 향상됩니다. TCP/IP는 느리게 시작되며 Nagling 알고리즘을 통해 네트워크 혼잡을 최소화하므로, 작은 블록을 여러 개 보낼 때보다 큰 데이터 블록을 한 개 보낼 때 더욱 효율적으로 작동합니다.

응답 버퍼링 기능을 설정하는 방법은 두 가지가 있습니다. 첫번째 방법은 인터넷 서비스 관리자를 사용하여 전체 응용 프로그램의 응답 버퍼링 기능을 설정하는 것입니다. 이는 권장되는 방법이며 기본적으로 IIS 4.0 및 IIS 5.0에서 새로 사용되는 ASP 응용 프로그램의 응답 버퍼링 기능을 설정합니다. 두번째 방법은 다음과 같은 코드 행을 ASP 페이지의 맨 위쪽에 넣음으로써 응답 버퍼링 기능을 페이지 단위로 설정하는 것입니다.

<% Response.Buffer = True %>

이 코드 행은 응답 데이터가 브라우저에 기록되기 이전에 미리 실행되어야 합니다. 즉, HTML이 ASP 스크립트에 나타나기 이전과 Response.Cookies 컬렉션을 사용하여 쿠키가 설정되기 이전에 미리 실행되어야 합니다. 일반적으로 전체 응용 프로그램에 대해 응답 버퍼링 기능을 설정하는 것이 좋습니다. 이렇게 하면 각 페이지마다 이 코드 행을 사용하지 않아도 됩니다.

Response.Flush

응답 버퍼링에 관한 일반적인 불만 사항들 중 하나는 전체 페이지가 생성된 후에야 비로소 그 내용을 볼 수 있기 때문에 전체 응답 시간이 향상되었음에도 불구하고 사용자들이 ASP 페이지의 응답이 다소 느리다고 느낀다는 점입니다. 페이지를 장시간 실행하는 경우에는 Response.Buffer = False를 설정함으로써 응답 버퍼링 기능을 해제할 수 있습니다. 그러나 Response.Flush 메서드를 활용하는 것이 더 낫습니다. 이 메서드를 사용하면 ASP가 브라우저에 표시한 모든 HTML이 플러시됩니다. 예를 들어, 1,000개의 행으로 구성된 테이블에서 100개의 행을 표시한 후 ASP는 Response.Flush를 호출하여 표시된 결과를 브라우저에 강제 지정할 수 있습니다. 이렇게 하면 나머지 행이 표시되기 전에 사용자는 처음 표시된 100개의 행을 볼 수 있습니다. 이 기술을 사용하면 데이터를 브라우저에 점차적으로 표시함과 동시에 응답 버퍼링 기능도 사용할 수 있는 최상의 환경을 만들 수 있습니다.

1,000개의 행으로 구성된 테이블을 사용하는 위의 예에서 종료 </table> 태그가 나타날 때까지는 대부분의 브라우저에서 테이블 표시를 시작할 수 없다는 점에 주의하십시오. 대상 브라우저가 지원되는지 확인하십시오. 이 문제를 해결하려면 행 수가 적은 여러 개의 테이블로 나누고 각각의 작은 테이블 다음에서 Response.Flush를 호출하십시오. 최신 버전의 Internet Explorer에서는 전체 내용을 다운로드하기 전에 테이블을 표시하며, 테이블 열 너비가 지정되어 있으면 Internet Explorer가 모든 셀 내용의 너비를 측정함으로써 열 너비를 계산하지 않기 때문에 훨씬 빠르게 표시됩니다.

응답 버퍼링에 관한 또 다른 일반적인 불만 사항은 큰 페이지를 생성할 때 매우 많은 서버 메모리가 사용될 수 있다는 점입니다. 큰 페이지 생성을 조정하는 것이 아니라, Response.Flush를 적절히 사용하면 이 문제 역시 해결할 수 있습니다.

팁 15: 인라인 스크립트 및 Response.Write 명령문을 일괄 처리하십시오

VBScript 구문 <% = 표현식 %>을 사용하면 "표현식" 값이 ASP 출력 스트림에 기록됩니다. 응답 버퍼링 기능이 해제되어 있는 경우, 이러한 각각의 명령문을 사용하면 데이터가 네트워크를 통해 여러 개의 작은 패킷 형태로 브라우저에 기록됩니다. 이 기록은 아주 느리게 진행됩니다. 또한 작은 양의 스크립트와 HTML을 보내면 스크립트 엔진과 HTML간 전환이 발생하여 결과적으로 성능이 저하됩니다. 이 경우에는 여러 개의 인접한 인라인 표현식들을 한 번의 Response.Write 호출로 바꾸십시오. 예를 들어, 아래의 예에서는 응답 스트림 쓰기 동작이 각각의 행에 있는 각 필드에 대해 한 번 발생하며 VBScript와 HTML간 전환이 각각의 행에 대해 여러 번 발생합니다.

<table>
<% For Each fld in rs.Fields %>
<th><% = fld.Name %></th>
<%
Next
While Not rs.EOF
%>
<tr>
<% For Each fld in rs.Fields %>
<td><% = fld.Value %></td>
<% Next
</tr>
<% rs.MoveNext
Wend %>
</table>

보다 효율적인 아래의 코드에서는 응답 스트림 쓰기 동작이 각각의 행에 대해 한 번 발생합니다. 모든 코드는 한 개의 VBScript 블록 안에 포함됩니다.

<table>
<%
For each fld in rs.Fields
Response.Write (?<th>?& fld.Name & ?</th>?& vbCrLf)
Next
While Not rs.EOF
Response.Write (?<tr>?)
For Each fld in rs.Fields %>
Response.Write(?<td>?& fld.Value & ?</td>?& vbCrLf)
Next
Response.Write ?</tr>?
Wend
%>
</table>

이 팁은 응답 버퍼링 기능이 해제되어 있을 때 더욱 효율적입니다. 응답 버퍼링 기능을 설정한 후 Response.Write를 일괄 처리하여 성능이 향상되는지를 확인해 보는 것이 가장 좋습니다.

위의 예에서 테이블 본문을 구성하는 중첩된 루프(While Not rs.EOF...)는 제대로 구성된 GetString 호출로 바꿀 수 있습니다.

팁 16: 실행 시간이 긴 페이지를 만들 때 Response.IsClientConnected를 사용하십시오

참을성이 없는 사용자라면 자신의 요청을 실행하기도 전에 미리 ASP 페이지를 포기해 버릴 수도 있습니다. 이러한 사용자들이 새로 고침을 누르거나 서버의 다른 페이지로 이동하면 새 요청이 ASP 요청 대기열의 맨 끝부분에 넣어지고 연결이 끊긴 요청이 대기열의 중간 부분에 넣어집니다. 이러한 상황은 서버에 과도한 로드가 걸려 있을 때 간혹 발생하는데, 이 경우 요청 대기열이 길어져서 더 많은 응답 시간이 소요되므로 문제가 더욱 악화됩니다. 사용자의 연결이 끊어지면 ASP 페이지를 실행할 지점이 없어집니다. 특히, 속도가 느리고 그 내용이 많은 ASP 페이지인 경우에는 더욱 그렇습니다. Response.IsClientConnected 속성을 사용하면 이러한 상황이 발생했는지를 검사할 수 있습니다. False가 반환되면 Response.End를 호출하여 나머지 페이지를 포기해야 합니다. 실제로 IIS 5.0에서는 이러한 절차를 코드화했습니다. 즉, 새 요청을 실행하려고 할 때마다 ASP는 해당 요청이 대기열에 있었던 기간을 검사합니다. 그 기간이 3초를 초과하는 경우, ASP는 클라이언트가 아직도 연결되어 있는지를 검사하여 클라이언트 연결이 끊어져 있으면 그 즉시 해당 요청을 종료합니다. 메타베이스에 있는 AspQueueConnectionTestTime 설정을 사용하면 이러한 시간 초과 값(3초)을 변경할 수 있습니다.

매우 긴 실행 시간을 필요로 하는 페이지가 있는 경우에는 간혹 Response.IsClientConnected를 검사해야 합니다. 응답 버퍼링 기능이 설정되어 있는 경우에는 가끔 Response.Flush를 실행하여 무슨 일이 진행되고 있는지를 사용자에게 알리는 것이 좋습니다.

참고 IIS 4.0에서는 Response.Write를 먼저 실행하지 않으면 Response.IsClientConnected가 제대로 작동하지 않습니다. 또한 버퍼링 기능이 설정되어 있으면 Response.Flush도 실행해야 합니다. IIS 5.0에서는 이들을 실행하지 않더라도 Response.IsClientConnected가 제대로 작동합니다. Response.IsClientConnected를 실행하는데 어느 정도의 대가가 따를 수도 있으므로, Response.IsClientConnected는 500밀리초 이상이 소요되는 작업을 수행하기 전에만 사용해야 합니다. 1초에 수 십개의 페이지를 계속 처리해야 한다는 점에서 보면 500밀리초는 매우 긴 시간입니다. 일반적으로 20개 또는 50개의 테이블 행에 도달할 때마다 테이블 행을 표시하는 경우처럼, 간격이 짧은 루프가 반복될 때 이 속성을 호출하면 안됩니다.

팁 17: <OBJECT> 태그를 사용하여 개체를 초기화하십시오

모든 코드 경로, 특히 서버 또는 응용 프로그램 범위 개체에 사용되지 않는 개체를 참조해야 할 경우에는 Server.CreateObject 메서드를 사용하지 말고 Global.asa에서 <object runat=server id=objname> 태그를 사용하여 선언하십시오. Server.CreateObject는 즉시 개체를 만들기 때문에, 나중에 그 개체를 사용하지 않을 경우에는 리소스를 낭비하는 결과를 초래합니다. <object id=objname> 태그는 개체 이름(objname)을 선언하지만, 그 개체 이름은 해당 메서드나 속성들 중 하나가 처음으로 사용된 후 비로소 만들어집니다.

이것은 지연 평가(Lazy Evaluation)의 다른 예입니다.

팁 18: TypeLib 선언을 ADO 및 그 밖의 다른 구성 요소에 사용하십시오

ADO를 사용할 때, 개발자가 ADO의 다양한 상수들에 액세스할 목적으로 adovbs.txt를 포함시키는 경우가 간혹 있습니다. 이 파일은 상수가 사용될 모든 페이지에 포함되어야 합니다. 이 상수 파일의 크기는 매우 크기 때문에, 모든 ASP 페이지의 컴파일 시간 및 스크립트 크기에 엄청난 오버헤드가 추가됩니다.

IIS 5.0에는 구성 요소의 유형 라이브러리에 대한 바인드 기능이 새로 추가되었습니다. 이 기능을 사용하면 일단 유형 라이브러리를 참조한 이후에 모든 ASP 페이지에서 이를 다시 사용할 수 있습니다. 페이지마다 상수 파일을 컴파일할 필요는 없으므로, 구성 요소 개발자는 ASP에서 사용할 VBScript #include 파일을 만들 필요가 없습니다.

ADO TypeLib에 액세스하려면 다음 명령문들 중 하나를 Global.asa에 넣으십시오.

<!-- METADATA NAME=?Microsoft ActiveX Data Objects 2.5 Library?
TYPE=?TypeLib?UUID=?{00000205-0000-0010-8000-00AA006D2EA4}? -->

또는

<!-- METADATA TYPE=?TypeLib?
FILE=?C:\Program Files\Common Files\system\ado\msado15.dll? -->

팁 19: 브라우저의 유효성 검사 기능을 활용하십시오

최근에 개발되는 브라우저에서는 XML, DHTML, Java 애플릿 및 원격 데이터 서비스 등과 같은 기능들에 대한 고급 지원 기능을 제공합니다. 가능하면 항상 이러한 기능들을 사용하십시오. 이러한 모든 기술들은 데이터 캐싱 뿐만 아니라 클라이언트측 유효성 검사를 수행하므로 웹 서버에 대한 왕복 이동 시간을 줄여줍니다. 스마트 브라우저를 실행하고 있는 경우, 그 브라우저에서는 약간의 유효성 검사를 수행할 수 있습니다. 예를 들어, POST를 실행하기 전에 신용 카드에 유효한 검사값이 들어 있는지를 검사합니다. 다시 말해서, 가능하면 항상 이러한 기능들을 사용하십시오. 클라이언트 대 서버간 왕복 이동 시간이 줄어들면 서버가 액세스하는 백엔드 리소스 뿐만 아니라 웹 서버에 걸리는 스트레스와 네트워크 트래픽도 줄어듭니다. 단, 브라우저에서 수신하는 초기 페이지의 크기는 더 커집니다. 또한 사용자가 새 페이지를 그다지 자주 페치할 필요가 없으므로 성능이 훨씬 나아집니다. 그렇지만 서버측 유효성 검사를 수행하지 않아도 되는 것은 아닙니다. 서버측 유효성 검사는 항상 수행해야 합니다. 서버측 유효성 검사를 수행하면 브라우저가 클라이언트측 유효성 검사 루틴을 실행하지 않더라도 클라이언트로부터 해킹과 같은 나쁜 데이터가 들어오는 것이 방지됩니다.

"모든 브라우저에서 실행되는" HTML을 작성할 때 보통 이러한 기능이 사용됩니다. 이는 간혹 성능상의 장점을 제공하는 자주 사용되는 브라우저 기능을 이용하려는 개발자의 의욕을 꺾는 결과를 초래합니다. 따라서 "사용 가능한" 브라우저 종류를 고려해야 하는 고성능 사이트에서 유용한 전략은 가장 자주 사용되는 브라우저에 맞게 페이지를 최적화하는 것입니다. 브라우저 기능 구성 요소를 사용하는 ASP에서는 브라우저 기능들을 간편하게 검색할 수 있습니다. Microsoft FrontPage와 같은 도구를 사용하면 원하는 HTML 버전과 브라우저에서 작동하는 코드를 설계하는데 도움이 됩니다. 자세한 내용은 When is Better Worse? Weighing the Technology Trade-Offs를 참조하십시오.

팁 20: 루프 형식의 문자열 연결을 피하십시오

대부분의 개발자들은 다음과 같은 루프 형식의 문자열을 사용합니다.

s = ?<table>?& vbCrLf
For Each fld in rs.Fields
s = s & ? <th>?& fld.Name & ?</th> ?
Next

While Not rs.EOF
s = s & vbCrLf & ? <tr>?
For Each fld in rs.Fields
s = s & ? <td>?& fld.Value & ?</td> ?
Next
s = s & ? </tr>?
rs.MoveNext
Wend

s = s & vbCrLf & ?</table>?& vbCrLf
Response.Write s

이러한 접근 방법에는 몇 가지 문제가 있습니다. 첫번째 문제는 반복적인 문자열 연결로 인해 제곱 배의 시간이 소요된다는 점입니다. 공식적인 수치는 아니지만, 이러한 루프를 실행하는데 소요되는 시간은 레코드 수와 필드 수를 곱한 값의 제곱에 비례합니다. 이는 아래의 간단한 예를 살펴보면 더욱 분명해집니다.

s = ??
For i = Asc(?A?) to Asc(?Z?)
s = s & Chr(i)
Next

첫번째 반복에서 한 개의 문자로 구성된 문자열(?A?)이 얻어집니다. 두번째 반복에서 VBScript는 문자열을 다시 할당하고 두 개의 문자(?AB?)를 s에 복사해야 합니다. 세번째 반복에서 VBScript는 다시 s를 할당하고 세 개의 문자를 s에 복사해야 합니다. N번째(26번째) 반복에서 VBScript는 s를 다시 할당하고 N개의 문자를 s에 복사해야 합니다. 따라서 그 복사 합계는 1+2+3+...+N, 즉 N*(N+1)/2입니다.

위의 레코드 집합 예에서 레코드 수가 100개이고 필드 수가 5개인 경우에는 100*5 = 500회의 내부 루프가 실행되어야 하며, 모든 복사 및 재할당에 소요되는 시간은 500*500 = 250,000입니다. 이러한 수치는 보통 크기의 레코드 집합인 경우에는 아주 큰 값입니다.

이 예에서 문자열 연결을 Response.Write()로 바꾸거나 인라인 스크립트(<% = fld.Value %>)로 바꾸면 코드 성능이 향상될 수 있습니다. 응답 버퍼링 기능이 설정되어 있으면 Response.Write가 데이터를 응답 버퍼의 끝에 추가하므로 그 속도가 더욱 빨라집니다. 또한 재할당 동작이 발생하지 않으므로 아주 효율적입니다.

ADO 레코드 집합을 HTML 테이블로 변환해야 하는 특별한 경우에는 GetRows 또는 GetString을 사용해 보십시오.

문자열을 JScript에 연결하는 경우에는 반드시 += operator; that is, use s += ?some string?, not s = s + ?some string?을 사용하십시오.

팁 21: 브라우저 및 프록시 캐싱을 사용하십시오

기본적으로 ASP는 브라우저 및 프록시 캐싱 기능을 사용하지 않습니다. 그 이유는 ASP 페이지의 경우 잠재적으로 시간이 중요시되는 정보를 갖는 동적 페이지의 속성을 가지고 있기 때문입니다. 그러나 볼 때마다 새로 고칠 필요가 없는 페이지에서는 브라우저 및 프록시 캐싱 기능을 사용해야 합니다. 이렇게 하면 브라우저 및 프록시에서 일정 기간 동안 "캐시된" 페이지 복사본을 사용할 수 있으며, 그 기간은 사용자가 조절할 수 있습니다. 또한 서버에 걸리는 로드가 크게 줄어들며 성능이 훨씬 나아집니다.

어떤 종류의 동적 페이지를 캐시할 수 있습니까? 다음은 캐시 가능한 페이지의 예입니다.

  • 날씨가 5분마다 업데이트되는 날씨 페이지
  • 신문 기사나 보도 자료를 나열하고 하루에 두 번 업데이트되는 홈 페이지
  • 뮤추얼 펀드 실적을 나열하고 기초 통계 자료가 서너 시간마다 업데이트되는 페이지

브라우저 또는 프록시 캐싱 기능을 사용하면 웹 서버에 기록되는 방문 횟수가 줄어든다는 점에 주의하십시오. 모든 페이지 화면이나 게시 알림 횟수를 정확하게 측정하기 위해 브라우저 및 프록시 캐싱 기능을 해제해야 할 수도 있습니다.

브라우저 캐싱 기능은 웹 서버로부터 브라우저로 보내지는 HTTP의 "Expires" 헤더에서 제어됩니다. ASP에서는 두 가지 간단한 메커니즘을 통해 이 헤더를 전송합니다. 첫번째 메커니즘은 향후 일정 시간(분 단위)이 경과한 후 페이지를 만료하도록 Response.Expires 속성을 설정하는 것입니다. 다음은 10분이 경과한 후 내용을 만료하도록 브라우저에게 지시하는 예입니다.

<% Response.Expires = 10 %>

Response.Expires를 음수나 0으로 설정하면 캐싱 기능이 사용되지 않습니다. 서버 시계와 브라우저 사이의 불일치 문제를 해결하려면 -1000 등과 같이 하루보다 약간 적은 시간을 의미하는 음수를 사용해야 합니다. 두번째 메커니즘은 Response.ExpiresAbsolute를 사용하여 해당 내용을 만료할 시간을 설정하는 것입니다.

<% Response.ExpiresAbsolute = #May 31,2001 13:30:15# %>

Response 개체를 사용하여 만료 날짜를 설정하는 대신에 <META> 태그를 HTML에 사용할 수도 있습니다. 이 태그는 일반적으로 HTML 파일의 <HEAD> 섹션에 놓입니다. 아래의 지시어는 일부 브라우저에서는 인식되지만 프록시에서는 인식되지 않습니다.

<META HTTP-EQUIV=?Expires?VALUE=?May 31,2001 13:30:15?>

끝으로, Response.CacheControl 속성을 사용하여 HTTP 프록시에서 해당 내용을 캐시할 수 있는지 여부를 나타낼 수 있습니다. 이 속성을 "Public"으로 설정하면 프록시는 해당 내용을 캐시합니다.

<% Response.CacheControl = ?Public? %>

기본적으로 이 속성은 "Private"로 설정됩니다. 사용자 고유의 데이터를 보여주는 페이지인 경우에는 프록시가 다른 사용자의 페이지를 제공할 수도 있으므로 프록시 캐싱 기능을 사용하면 안됩니다.

팁 22: 가능하면 Response.Redirect가 아닌 Server.Transfer를 사용하십시오

Response.Redirect는 다른 페이지를 요청하도록 브라우저에게 지시합니다. 이 함수는 사용자를 로그온이나 오류 페이지로 리디렉션하는데 간혹 사용됩니다. 리디렉션은 새 페이지 요청을 강제로 수행하기 때문에, 결과적으로 볼 때 브라우저가 웹 서버에 두 번 왕복 이동해야 하며 웹 서버가 추가 요청을 처리해야 합니다. IIS 5.0에서는 동일한 서버에 있는 다른 ASP 페이지에게 실행을 전송하는 Server.Transfer 함수를 새로 도입했습니다. 이 함수를 사용하면 브라우저 대 웹 서버 왕복 이동이 추가로 발생하지 않기 때문에, 결과적으로 볼 때 사용자의 응답 시간이 빨라지며 전체 시스템 성능도 향상됩니다. 자세한 내용은 Server.TransferServer.Execute에 대해 설명하는 New Directions in Redirection을 참조하십시오.

또한 IIS 5.0 및 ASP 3.0의 새 기능에 대한 자세한 목록은 Leveraging ASP in IIS 5.0을 참조하십시오.

팁 23: 디렉터리 URL에 후행 슬래시를 사용하십시오

여기에 관련된 팁은 디렉터리를 나타내는 후행 슬래시(/)를 URL에 사용해야 한다는 것입니다. 후행 슬래시가 생략된 경우, 브라우저는 서버에게 디렉터리를 요청합니다. 그런 다음 브라우저가 슬래시를 URL에 추가하여 두번째 요청을 보내면 서버가 해당 디렉터리의 기본 문서로 응답하거나, 기본 문서가 없어서 디렉터리 찾아보기가 사용된 경우 디렉터리 목록으로 응답합니다. 슬래시를 추가하면 불필요한 첫번째 왕복 이동 동작이 발생하지 않습니다. 사용자가 쉽게 읽을 수 있도록, 표시되는 이름에서 후행 슬래시를 생략할 수도 있습니다.

예를 들면, 다음과 같습니다.

<a href=?http://msdn.microsoft.com/workshop/? title=?MSDN Web
Workshop?>http://msdn.microsoft.com/workshop</a>

이 팁은 웹 사이트의 홈 페이지를 가리키는 URL에도 적용됩니다.<a href=?http://msdn.microsoft.com?>이 아닌 <a href=?http://msdn.microsoft.com/?>을 사용해 보십시오.

팁 24: 서버 변수 사용을 피하십시오

서버 변수에 액세스하면 웹 사이트가 서버에게 특수한 요청을 보내어 요청한 변수 뿐만 아니라 모든 서버 변수들을 모으게 됩니다. 이는 불필요한 파일들을 넣어둔 창고에 있는 폴더에서 특정 항목을 찾는 경우와 비슷한데, 여기서 한 개의 필요한 항목을 찾으려면 원하는 항목에 액세스하기 전에 먼저 창고에 들어가서 해당 폴더를 찾아야 합니다. 이러한 상황은 서버 변수를 요청할 때 발생하는 상황과 동일합니다. 방문 횟수(performance hit)는 맨 처음 서버 변수를 요청할 때 추가됩니다. 나중에 다른 서버 변수를 얻기 위해 보내지는 요청은 방문 횟수(performance hit)에 추가되지 않습니다.

Request("Data")와 같이 정식 Request 개체가 아닌 개체에 액세스하면 안됩니다. Request.Cookies, Request.Form, Request.QueryString 또는 Request.ClientCertificate에 들어 있지 않은 항목에 대해서는 Request.ServerVariables에 대한 암시적 호출이 발생합니다. Request.ServerVariables 컬렉션 속도는 다른 컬렉션 속도보다 매우 느립니다.

팁 25: 최신 구성 요소로 업그레이드하십시오

시스템 구성 요소들은 자주 변경되므로 최신 구성 요소로 업그레이드해야 합니다. 가장 좋은 방법은 Windows 2000으로 업그레이드하고 IIS 5.0, ADO 2.5, MSXML 2.5, Internet Explorer 5.0, VBScript 5.1 및 JScript 5.1로 업그레이드하는 것입니다. IIS 5.0 및 ADO 2.5는 다중 프로세스 컴퓨터에서 놀랄만한 성능을 제공합니다. Windows 2000에서는 ASP가 네 개 이상의 프로세서로 완벽하게 확장되지만, IIS 4.0에서는 ASP가 두 개 이상의 프로세서로 제대로 확장되지 않았습니다. 응용 프로그램에 사용된 스크립트 코드와 ADO가 많을수록 Windows 2000으로 업그레이드한 후 얻게 될 성능상의 장점이 많아집니다.

Windows 2000으로 업그레이드할 수 없는 경우에는 SQL Server, ADO, VBScript 및 JScript, MSXML, Internet Explorer, Windows NT 4 서비스 팩의 최신 릴리스로 업그레이드할 수 있습니다. 이렇게 하면 안정성이 향상되는 동시에 성능도 좋아집니다.

팁 26: 웹 서버를 조정하십시오

사이트 성능을 개선할 수 있는 다양한 IIS 조정 매개 변수들이 제공됩니다. 예를 들어, IIS 4.0에서 ASP ProcessorThreadMax 매개 변수(IIS 설명서 참조)의 값을 늘리면 성능이 크게 향상된다는 점이 밝혀졌습니다. 특히, 데이터베이스와 같은 백엔드 리소스나 스크린 스크래퍼와 같은 기타 미들웨어 제품에서 대기하는 경향이 있는 사이트에서는 더욱 그렇습니다. IIS 5.0에서 현재 알려진 것처럼 최적의 AspProcessorThreadMax 설정을 찾는 것보다는 ASP Thread Gating을 조정하는 것이 보다 효율적입니다.

이 기사의 뒷부분에 있는 IIS 조정 부분에 참고 자료가 나와 있습니다.

최적의 구성 설정은 다른 요소들보다는 응용 프로그램 코드, 응용 프로그램 코드를 통해 실행되는 하드웨어 및 클라이언트 작업 부하에 의해 결정됩니다. 최상의 설정을 찾는 유일한 방법은 성능 테스트를 수행하는 것입니다.

팁 27: 성능 테스트를 수행하십시오

앞에서 언급한 바와 같이, 성능은 일종의 기능입니다. 사이트 성능을 개선하려면 일단 성능 목표를 설정한 후 그 목표에 도달할 때까지 점차적으로 개선 작업을 수행하십시오. 성능 테스트를 프로젝트 마지막 단계로 미루지 마십시오. 프로젝트 마지막 단계에서 아키텍처 변경을 하기란 너무 늦기 때문에 고객을 실망시키는 경우가 종종 발생합니다. 성능 테스트는 일상적인 테스트의 일부로서 수행하십시오. 성능 테스트는 ASP 페이지나 COM 개체 등과 같은 개별 구성 요소에서 별도로 수행하거나 전체 사이트에 걸쳐 한꺼번에 수행할 수 있습니다.

대부분의 관리자들은 한 개의 브라우저에서 페이지를 요청함으로써 웹 사이트의 성능을 테스트합니다. 이렇게 테스트하면 사이트의 응답 성능은 제대로 파악할 수 있지만, 일정한 로드 하에서 사이트가 제대로 작동하는지는 파악할 수 없습니다.

일반적으로 성능을 정확하게 측정하려면 테스트 전용 환경이 필요합니다. 이러한 테스트 전용 환경에는 프로세서 속도, 프로세서 수, 메모리, 디스크, 네트워크 구성 등의 측면에서 프로덕션 하드웨어와 거의 유사한 기능을 갖는 하드웨어를 설치해야 합니다. 그런 다음에는 동시 사용자 수, 사용자의 요청 빈도, 사용자가 방문하는 페이지의 유형 등과 같은 클라이언트 작업 부하를 정의해야 합니다. 사이트로부터 실제 사용량 데이터를 얻을 수 없으면 적당한 값을 추측해야 합니다. 끝으로, 예상되는 클라이언트 작업 부하를 시뮬레이트할 수 있는 도구가 필요합니다. 이러한 도구들을 사용하면 "N 명의 동시 사용자가 있는 경우에는 몇 대의 서버가 필요한가요?"와 같은 질문에 답할 수 있으며 병목 현상을 찾아내서 최적화를 위해 이를 해결할 수 있습니다.

훌륭한 웹 스트레스 테스트 도구들 중 몇 가지가 이 기사의 뒷부분에 나와 있지만, Microsoft WAS(Web Application Stress) 도구 키트를 사용할 것을 권장합니다. WAS에서는 테스트 스크립트를 작성하여 웹 서버를 방문하는 사용자들을 수 백명 또는 수 천명까지 시뮬레이트할 수 있습니다. WAS는 초당 요청수, 응답 시간 배포, 오류 카운트 등을 포함하여 매우 많은 수의 통계를 보고합니다. WAS에는 다양한 클라이언트 인터페이스와 웹 기반 인터페이스가 포함되어 있으며, 웹 인터페이스를 사용하면 테스트를 원격으로 수행할 수 있습니다.

반드시 IIS 5.0 조정 가이드를 읽어보십시오.

팁 28: 관련 리소스 링크를 읽어보십시오

다음은 몇 가지 아주 유용한 성능 관련 리소스 링크들입니다. Developing Scalable Web Applications은 반드시 읽어보는 것이 좋습니다.

리소스

ASP 스크립트 최적화

IIS 조정

ADO 및 SQL Server

ASP 구성 요소 및 스레딩 모델

딕셔너리 구성 요소

세션 상태

성능 및 확장성

도구

문서

ASP 웹 사이트

ASP 스타일

XML

ASP 스크립트 최적화

Developing Scalable Web Applications

Got Any Cache? 저자: Nancy Winnick Cluts

Maximizing the Performance of Your Active Server Pages 저자: Nancy Winnick Cluts

15 Seconds: Performance Section

Enhancing Performance in ASP - Part I 저자: Wayne Plourde

When is Better Worse? Weighing the Technology Trade-Offs 저자: Nancy Winnick Cluts

Speed and Optimization Resources 저자: Charles Carroll

IIS 조정

The Art and Science of Web Server Tuning with Internet Information Services 5.0

Leveraging ASP in IIS 5.0 저자: J.D. Meier

Tuning IIS 4.0 for High Volume Sites 저자: Michael Stephenson

Tuning Internet Information Server Performance 저자: Mike Moore

Navigating the Maze of Settings for Web Server Performance Optimization 저자: Todd Wanke

Managing Internet Information Server 4.0 for Performance 저자: Hans Hugli

ADO 및 SQL Server

Top Ten Tips: Accessing SQL Through ADO and ASP 저자: J.D. Meier

Improve the Performance of your MDAC Application 저자: Suresh Kannan

Pooling in the Microsoft Data Access Components 저자: Leland Ahlbeck 및 Don Willits

SQL Server: Performance Benchmarks and Guides

Improving the Performance of Data Access Components with IIS 4.0 저자: Leland Ahlbeck

Microsoft Data Access Components (MDAC) and ActiveX Data Objects (ADO) Performance Tips 저자: Leland Ahlbeck

Microsoft SQL Server 7.0 Practical Performance Tuning and Optimization - The Server Perspective 저자: Damien Lindauer

Microsoft SQL Server 7.0 Practical Performance Tuning and Optimization - The Application Perspective 저자: Damien Lindauer

Accessing Recordsets over the Internet 저자: Dino Esposito

ASP 구성 요소 및 스레딩 모델

ASP Component Guidelines 저자: J.D. Meier

Q243548: INFO: Design Guidelines for VB Components under ASP

Threading Models Explained 저자: Nancy Winnick Cluts

So Happy Together? Using ActiveX components with Active Server Pages 저자: Nancy Winnick Cluts

Developing Active Server Components with ATL 저자: George Reilly

Agility in Server Components 저자: Neil Allain

Building High-Performance Middle-Tier Components with C++ 저자: Jon Flanders

Active Server Pages and COM Apartments 저자: Don Box

House of COM: Active Server Pages 저자: Don Box

House of COM: Contexts 저자: Don Box

House of COM: Performance Trade-offs of the Windows 2000 Component Execution Environment 저자: Don Box

Building COM Components That Take Full Advantage of Visual Basic and Scripting 저자: Ivo Salmre

Component Design Principles for MTS

딕셔너리 구성 요소

Creating a Page Cache Object 저자: Robert Coleridge

Abridging the Dictionary Object: The ASP Team Creates a Lookup-Table Object 저자: Robert Carter

Caprock Dictionary

Site Server Commerce Edition에는 딕셔너리 구성 요소가 들어 있습니다.

세션 상태

Q175167: HOWTO: Persisting Values Without Sessions

Q157906: HOWTO: How To Maintain State Across Pages with VBScript

XML-based Persistence Behaviors Fix Web Farm Headaches 저자: Aaron Skonnard

House of COM: Stateless Programming 저자: Don Box

성능 및 확장성

Blueprint for Building Web Sites Using the Microsoft Windows DNA Platform

Server Performance and Scalability Killers 저자: George Reilly

Microsoft Visual Studio Scalability Center

Fitch & Mather Stocks 2000

Tuning the FMStocks Application

High-Performance Visual Basic Apps 저자: Ken Spencer

Duwamish Books, Phase 4

Top Windows DNA Performance Mistakes and How to Prevent Them 저자: Gary Geiger 및 Jon Pulsipher

Building from Static HTML to High-Performance Web-Farms 저자: Shawn Bice

도구

Microsoft Web Application Stress Tool

I Can't Stress It Enough -- Load Test Your ASP Application 저자: J.D. Meier

Windows DNA Performance Kit

Monitoring Events in Distributed Applications Using Visual Studio Analyzer 저자: Mai-lan Tomsen

문서

Professional Active Server Pages 3.0, Wrox Press. (특히, Chapter 26:Optimizing ASP Performance, 저자: George Reilly 및 Matthew Gibbs 참조)

Microsoft Internet Information Services 5.0 Resource Guide(Windows 2000 Server Resource Kit와 함께 제공됨), Microsoft Press.

Microsoft Internet Information Server Resource Kit (for IIS 4.0), Microsoft Press.

Programming Distributed Applications with COM and Microsoft Visual Basic 6.0 저자: Ted Pattison, Microsoft Press.

Effective COM 저자: Don Box, Keith Brown, Tim Ewald, Chris Sells 및 Addison-Wesley.

Developing Web Usability: The Practice of Simplicity 저자: Jakob Nielsen, New Riders.

ASP 웹 사이트

Microsoft TechNet for IIS

LearnASP.com

4GuysFromRolla.com

15Seconds.com

AspToday.com

Asp101.com

AspLists.com. 여기에는 다음과 같은 특수 메일 목록이 들어 있습니다.

  • Fast Code!
  • ASP Advanced
  • Not NewbieState Management
  • Scalability
  • Visual Basic Components
  • XML
  • C++/ATL Component Building

UseIt.com: Web Usability

ASP 스타일

ASP Best Practices 저자: George Reilly

ASP Quick Lessons 저자: Charles Carroll

Planning for ASP 저자: John Meade

ASP Guidelines 저자: J.D. Meier

XML

Inside XML Performance 저자: Chris Lovett

Inside MSXML3 Performance 저자: Chris Lovett


출처 : 마이크로소프트 TechNet

url : http://www.microsoft.com/korea/technet/iis/tips/asptips17_29.asp