Rev. 2.73

581915.gif

Shaun Inman씨는 깔끔한 파일 타입 인풋을 자바스크립트와 CSS 그리고 DOM을 이용해 만드는 과정을 소개했다. 우선 데모를 확인하기 바란다. 뭔가 허전하지 않은가? 텍스트 영역과 업로드 버튼이 사라지고 없다. "Choose file..."을 클릭하여 파일을 선택하면 자바스크립트에 의해 자동으로 파일의 업로드가 진행되어 조금 더 사용성이 좋은 파일 업로드 환경을 제공할 수 있다.

label 태그의 class에는 "cabinet"을 그리고 input태그의 class에 "file"을 정의했다. 충돌을 막기위해 부모 엘리먼트가 필요하며, 부모 엘리먼트의 class는 "SI-FILES-STYLIZED"로 가정하자.

마크업 하기

<label class="cabinet"> 
    <input type="file" class="file" />
</label>

스타일시트

.SI-FILES-STYLIZED label.cabinet {
    width: 79px;
    height: 22px;
    background: url(btn-choose-file.gif) 0 0 no-repeat;

    display: block;
    overflow: hidden;
    cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file {
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

첫 번째 프로퍼티는 포장될 엘리먼트의 스타일이다. 버튼의 이미지까지 들고 있다. 두번째 프로퍼티는 인풋의 스타일이다. 완전히 투명한 알파값을 지니고 있다. 그리고 정확하게 두 엘리먼트가 포개지는 구성을 가지고 있다는 것을 알 수 있다. 허상으로 나타는 input 버튼이 작동하게 하기 위한 트릭이라는 것을 알 수 있다.

자바스크립트

<script type="text/javascript" src="/path/to/si.files.js"></script>

자바스크립트 파일을 인클루드하고 onload 이벤트에 SI.Files.stylizeAll();를 선언하면 완료된다. IE 5.5+, 파이어폭스 1.5+, 사파리 2+ 에서 작동되며, 라이브러리와 예제는 이곳에서 다운로드 할 수 있다. 딱 한가지 단점이라면 자바스크립트가 작동하지 않는 환경에서는 업로드가 정상적으로 작동하지 않는 것이다.

Comments

보통의 HTML 문서는 이미지와 CSS, JS 등 여러가지 정적인 파일들로 구성됩니다. 이 파일들의 통신을 형성하기 위한 규칙 중 하나로 헤더(Header)라는 것이 있습니다. 이 것은 크게 요청(Request)과 수신(Response)으로 나뉩니다. 요청부는 특수한 경우를 재외하고 브라우저가 만들어 내는 것이 보통으로, 요청 형식, 브라우저 종류(User-Agent), 데이터 유형(Accept), 쿠키(Cookie), 리퍼러(Referer), 호스트(Host) 등의 정보를 서버로 전달합니다. 요청 형식에는 프로토콜(protocol)과, 문서명, 그리고 메서드(method)를 기본으로 포함합니다. "Get /document.html HTTP/1.0"과 같은 형식이죠. 웹 서버는 이렇게 받은 요청을 처리하고 데이터와 함께 응답 헤더를 싫어 보냅니다. 응답 헤더는 응답 결과, 응답 일시(Date), 서버 종류(Server), 콘텐츠 종류(Content-type), 콘텐츠 길이(Content-Length), 데이터 보관일시(Expires), 마지막 작성한 일시(Last-Modified), ETag(해시타입 구분자) 등을 포함하여 토해냅니다. 응답 결과물로는 "HTTP/1.0 200 Found"와 같은 서버 상황(status)을 코드로 작성합니다. 만약 서버로부터 요청한 파일이 존재하지 않는다면 "404 Not Found"를 내뱉어 브라우저에게 문서가 없다는 사실을 알리죠.

firebug-net.gif

자, 이제 본론으로 들어가서, 응답 헤더로부터 어떠한 성능향상을 기대할 수 있을까요? 그렇습니다. 바로 브라우저 캐싱(caching)입니다. 응답헤더에 붙어오는 ETag, Expires, Last-Modified는 더이상 같은 정보를 요청하지 않아도 된다는 중요한 정보를 브라우저에게 알려줍니다. 구글의 경우, Expires가 1년으로 설정되어 있습니다. 즉, 한번 퍼간 데이터는 1년동안 다시 요청하지 말라는 뜻이죠. 그렇다고 브라우저가 정말로 1년동안 요청행위를 금지 당하는 것은 아닙니다. 까칠한 브라우저는 페이지가 다시 열리는 시점에서 기존의 캐시정보들을 무시하고 예전에 읽었던 파일이라도 다시금 불러오거나 확인요청을 보냅니다. 캐시정보를 인지한 브라우저는 페이지에(도메인을 떠나지 않고) 머물러 있는 동안 새로 읽으라는 명령(Ctrl + F5 또는 리로드)이 있기 전에 다시금 요청하는 일은 없습니다.

이제 여러분의 사이트가 들고있는 이미지, CSS, JS, SWF 등의 파일들에는 어떠한 헤더가 붙어서 날라오는지 확인해 보세요. 아차, 그전에 확인하는 방법을 알려드려야 겠군요. 사용중인 브라우저가 IE라면 개별 파일의 헤더를 실시간 확인하는 일이 쉽지 않습니다.(불가능하지 않나요?) 파이어폭스의 개발 플러그인 중 하나인 파이어버그를 설치하면 좌측에 있는 그림처럼 쉽게 알 수 있죠. 참고로 아래는 이 곳에서 사용되는 이미지의 응답 헤더입니다.

Date : Tue, 07 Aug 2007 15:11:51 GMT
Server : Apache
X-Powered-By : PHP/4.4.1
Accept-Ranges : bytes
Content-Length : 7665
Content-Type : image/jpeg
Etag : "9b4efc32c22d0eeabdbbfc9b667a93c0"
Cache-Control : max-age=7776000
Expires : Mon, 05 Nov 2007 15:11:51 GMT
Last-Modified : Sat, 10 Mar 2007 14:05:01 GMT
Keep-Alive : timeout=1, max=95
Connection : Keep-Alive

만약에 Last-Modified와 Expires 또는 ETag가 잘못 설정되어 있거나 없으면, 새로 불러들여야 할 파일이 아님에도 브라우저는 가차없이 다시 읽어들입니다. 서버의 access 로그에 접근할 수 있는 환경이라면 확인이 더욱 빠릅니다. 그렇지 않은 경우 파이어버그의 NET 화면에서 캐시된 양을 간접적으로 확인 할 수 있습니다. 파이어폭스의 경우 ETag만으로도 캐시여부를 알아내지만 IE는 그렇지 않을 때도 있습니다. 파일의 캐시여부를 확인하기 위한 요청을 제차 날리기도 하며, 심지어는 하나의 파일을 3,4번씩 요청하는 경우도 있습니다. 예를 들어 "new"가 찍힌 아이콘이 한 페이지에 10번 중복 사용 되었다면, 최소 10번에서 40번의 요청이 일어나기도 합니다. 다른 예를 들면, 자바스크립트와 스타일시트를 사용한 애니메이션에서 마우스 커서모양에 모래시계가 연달아 나타나는 현상과 함께 모션이 부드럽지 못한 것을 들 수 있으며, 롤오버/아웃 이벤트에 이미지를 적용한 경우 계속해서 불러오는 현상이 발생합니다. 물론 방문객 브라우저의 캐시설정이 정상이라도 발생하죠.

이러한 현상은 대부분 Expires헤더로 해결 할 수 있습니다. YSlow(성능 개선 도구)에서는 Expires를 모든 파일에 사용할 것을 권고(Add an Expires Header)하고 있습니다. 지금까지 송/수신 헤더를 그리 중요하게 여기지 않았습니다만, YSlow로 인해 헤더에 대하여 공부할 수 있었던 좋은 계기가 되었고 서버가 어떠한 응답 헤더를 주느냐에 따라 브라우저와 서버 양쪽의 성능을 모두 끌어올릴 수 있다는 사실을 알았습니다. 서버로부터 응답해더를 어떻게 커스토마이징 하는지는 다루지 않겠습니다. 서버의 종류, 언어, 버전, 모듈 등에 따라 헤더를 설정하는 방법론은 헤아릴수 없을 정도로 많거든요.(구글링 강추)

Comments

Guillermo Rauch씨는 MooTools 자바스크립트 라이브러리와 CSS를 이용하여 재미있는 메뉴 네비게이션 효과를 만들었다. 메뉴 항목에 마우스가 이동할 때 마다 배경이미지에 시각적인 변화가 발생하며, 간단한 마크업만으로 사용할 수 있는 것이 특징이다. 이 것을 회사 프로젝트에 써먹기 위해 Prototype/Scriptaculous에서도 사용할 수 있도록 수정하였으며 사용방법은 아래와 같다.

<div id="fancymenu">
  <ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
  </ul>
</div>
new FancyMenu('fancymenu', {
  transition: Effect.Transitions.backOut,
  duration: 0.7
});


※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments