Rev. 2.73

yui.jpg

야후의 Bill Scott은 야후! UI 라이브러리에 추가할 수 있는 Carousel Component(회전목마 컴포넌트)를 공개했다. Static HTML, DTHML, Ajax 로 구축된 환경에서 가로, 세로구성 및 애니메이션, 슬라이드쇼, 스크롤링 등 여러방식으로 적용할 수 있도록 설계되었다. IE, 파이어폭스, 사파리, 오페라 등 주요 브라우저에 최적화 되었으며, 야후! UI가 로드된 상태에서 carousel.jscarousel.css 두개의 파일 추가만으로 컴포넌트가 추가된다. 자바스크립트로 생성된 DIV노드에 적용되는 CSS Style의 정의를 살펴보면 아래의 그림과 같은 구조로 되어있다.

carousel-html-css-structure.png

Ajax 로딩방식은 XML이 아닌 JSON을 사용하고 있으며, 지정한 단위로 필요한때 XMLHttpRequest를 실행한다. 한번 불러들인 데이터는 DOM에 남아있어 케쉬효과를 발하기 때문에 같은 데이터를 한번이상 요청하지 않는다. 하지만 무한으로 생산되는 DIV노드는 특정 브라우저에서 메모리랙을 유발하기도 한다.(용도에 따라 다르겠지만)

이와 비슷한 같은 회전목마 아키텍쳐를 올라로그의 개인페이지에 적용할 예정이었는데 때마침 잘 나와주어서 요긴하게 참고할 수 있겠다. 올라로그에는 에피소드 슬라이더라는 이름으로 이미 Script.aculo.us를 사용하여 비스무례하게 구현해 놓기는 했지만 조엘이 말하는 '러시아 페인트공 알고리즘'이 두루~ 사용되고 있기 때문이다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar