Rev. 2.73

Even More Rounded Corners With CSS

(Another technique for the pile.)

There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with various visual effects. Based on the original More Rounded Corners With CSS, this update reduces the background to a single "sprite", retaining the alpha transparency benefits of PNG without bloating the markup required to produce the same effect. The end result is something which should allow for further customization.

Scott Schiller씨는 100% CSS기반의 예쁜 다이얼로그를 공개했습니다. 놀라운것은 알파값을 지닌 PNG 이미지를 하나만 사용하고 있습니다.(마치 맵핑소스처럼 사용하는군요.) PNG를 지원하지 않는 IE6에서는 일반 GIF이미지가 나타납니다. nate.koechley.comsquidfingers.com에서 함께 참여한듯 합니다. 요것 참 마음에 드는군요. 아래는 테스트삼아 여러가지 장난을 부려 보았습니다.

꿈틀대기 | 드래그 부여하기 | 리사이즈 부여하기 | 색상 : 빨강, 검정, 파랑

Comments

analytics.gif

최근 자바스크립트의 사용량이 많아지면서 트래픽도 덩달아 증가하고 있다. CPU 연산 의존도가 높은 자바스크립트는 당장 필요치않은 라이브러리들까지 처리하려니 브라우저도 죽을 맛이다. 조금 더 효율적인 처리방법은 없을까?
근간 호스팅 업체에서 제공하는 트래픽 분석 프로그램을 모니터링해 보니 좌측화면과 같이 상위권을 휩쓸고 있다. 브라우저가 파일캐시를 한다지만 신규방문자가 70-80% 이상이면 이것이 대안이라고 보기 힘들다. 자바스크립트 파일을 패키드(packed)하여 단순히 크기를 줄이는 방법도 있지만 브라우저에 부담을 주는 것은 마찬가지이다.

예를 들어 보자. 이미지를 멋지게 표현해주는 라이트박스(Lightbox JS)를 설치했으나 방분객은 이미지를 조회하지 않고 떠났다. 방문객은 필요치않은 자바스크립트 파일들을 다운로드 한 결과를 가져왔다. 물론 서버단에서 이미지가 있는 경우만을 체크하여 라이브러리를 로드했다 하더라도 작동을 시키지 않은것 또한 낭비인것은 사실이다. 페이지에 꼭 필요한 자바스크립만 로드하고 나머지는 필요한 때 동적으로 로드하도록 구현하여 쾌적한 브라우징 환경을 제공하면서 트래픽 손실도 줄이는 일석이조의 효과를 누려보자.

우선 자바스크립트를 동적으로 불러올 함수가 필요하다. 일전에 소개했던 "인클루드 (자바스크립트 || 스타일시트) 파일"을 변형해서 사용했으며 내용은 아래와 같다.(예제에 사용된 코드는 Prototype.js 1.5.1_rc2 기반으로 작성됨)

자, 이제 준비는 끝났다. 예를 들어 Scriptaculous의 dragdrop.js(30.46kb)을 동적으로 호출하는 코드를 만들어보자.

//Include dragdrop.js on action
var Draggable = function(element, options){
	new Include('dragdrop.js', function(){
		new Draggable(element, options);
	}); 
};

'Draggable' 이라는 함수를 미리 선언했다. 이 함수는 dragdrop.js의 메인 클래스이름과 동일하다. 만약 어딘가에서 'Draggable' 클래스를 작동시키면 'dragdrop.js'파일이 로드되고 작동시킨 함수는 온컴플리트(onComplete) 이벤트에 의해 실행되며 위에서 미리 선언한 함수는 'dragdrop.js' 원래의 클래스로 오버라이드(override)되는 로직이다. 위 코드는 이곳에서 실제 사용되는 코드로 키워드 뷰어나 댓글수정 등(Draggable 이 적용된 곳)에 적용되어 있으니 직접 사용해보자. Firefox의 JSView 플러그-인을 설치하면 자바스크립트 및 스타일시트의 사용현황을 쉽게 확인 할 수 있다.

var FishEye = function(element){
    new Include('fisheye.js', function(){
        new FishEye(element);
    });
};
var CMotion = function(element){
    new Include('cmotion.js', function(){
        new CMotion(element);
    });
};
var Favicon = function(element){
    new Include('favicons.js', function(){
        new Favicon(element);
    });
};

위 코드는 어떤 역할을 할까? 그렇다. 해당 기능이 작동할 때에만 자바스크립트가 로드되고 오버라이드 된다. 'fisheye'는 어안메뉴이고, 'cmotion'은 블로그 상단의 썸네일 모션이며, 'favicons'는 댓글쓴이의 이름앞에 패비콘을 찍어주는 작은 단위의 라이브러리들이다. 이 함수들을 개별 파일로 분리하여 필요한 때에 필요한 파일을 동적으로 호출하는 것이다. 오버라이딩하는 기법을 사용하지 않고 아래처럼 단순히 로드해서 사용해도 무방하다.

if($$('pre code').length){
	new Include('syntax.js, syntax.css');
}

끝으로, 이 작업을 거친후 페이지당 약 50-60KB로 용량을 절약할 수 있었으며, 하루평균 최소 100MB이상의 트래픽 손실 및 비용 절감 효과가 있다는 결론이 나왔다. 더불어 브라우저가 로딩압박에서 조금은 벗어난 것을 체감할 수 있었다. 앞으로 30~50KB이상을 더 세부적, 체계적으로 분리할 예정이며, 마치 관례처럼 사용되고 있는 자바스크립트 사용법(All in header)에 조금씩 변화를 가져볼 생각이다.

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

Comments