.Mac Web Gallery 어떻게 만들었을까.. 모르겠다. -_-;;

1. 호기심이 발동한 이유
.Mac Web Gallery를 Ajaxian을 통해서 본 이후로 관심을 많이 가지고 있었습니다.
(한 이미지의 영역에서 마우스 좌우 이동만으로 여러 이미지를 보여준다는 것은 참으로 매력적이죠.)

그러던중에, 오늘 잠시 비는 시간을 이용해서(-디자인 결정이 나기전에 잠시 짬이나서..) 한번 만들어보았습니다. 로컬에서는 비슷하게 돌아가던데, 서버에 올려놓고 테스트를 해보니 다르더군요.

2. 구현에 관한 생각.
.Mac Web Gallery를 어떻게 구현할 것인가를 고민해본다면 여러가지 방법이 있을 수 있을 것 같습니다.
저의 경우 다음과 같은 방법이 생각이 나더군요.

1. 이미지 리스트를 갤러리 생성시에 받아서 저장해 놓습니다.
   
2. 자바스크립트를 사용해서 이미지를 미리 로딩합니다.(new Image()..)
   
3. 앨범의 이미지(primaryImage) 위를 마우스가 이동할 때 위치에 따라서 primaryImage의 src 값을 변경해줍니다.
   

그런데, 문제가 발생하더군요. 이미지를 미리 로딩해 놓았지만, 이미지가 변경되었는지를 확인하기 위한 Request/Response 비용이 발생을 해서 .Mac Web Gallery리 처럼 동작을 하지 않더군요.

이미지를 로딩한 다음에 로딩안한 것처럼 감춰놓고 보여줄 수도 있을 수도 있지만...

.Mac Web Gallery의 코드를 보면 그렇지는 않은 것 같더군요..

3. 실제구현을 살펴보면.
파이어버그를 사용하여 네트워크 트래픽을보면 초기 로딩 시간에 이미지가 모두 로딩된 것을 확인할 수 있습니다. 그리고, Web Developer Toolbar를 사용하여 JavaScript를 사용하여 생성된 HTML 소스를 확인해보면 초기에 로딩된 화면에 보이지 않는 이미지 주소가 HTML에 포함되어 있지 않습니다.

살펴보다보니 재미있는 것은 이미지 위를 마우스로 이동할 때, 이미지에 대한 Request/Response가 발생하는게 아니라 emily_parker 페이지에 대해서 요청을 하더군요.

그리고, 소스코드 실행되는 부분을 살펴보면,

1. didMouseOver가 호촐되어 보여줄 이미지의 index를 계산한 다음에
   
2. renderScrubImage가 호출되어 이미지를 가지고와서
   
3. setImage를 사용해서 이미지를 보여줍니다.

        setImage:function(content){
            if(content){
                this.primaryImage.src="";
                var src=content.get("square");
                if(src){
                    this.primaryImage.onerror=function(){
                        this.src='/g/images/gallery/spacer.gif';
                    };
                    this.primaryImage.src=src;
                }
                this.primaryImage.style.width=this._defaultDim+"px";
                this.primaryImage.style.height=this._defaultDim+"px";
            }
        },

그.. 그렇다면, 왜 Request/Response가 발생하지 않는걸까요? ㅠㅠ
답을 아시는 분은 좀 가르켜주세요~~

4. 기타..
.Mac Web Gallery에서 사용한 라이브러리는 prototype.js와 script.aculo.us와 sproutit입니다. sproutit은 script.aculo.us를 기반으로하는 이미지 갤러리를 만드는 프레임웤이라고 하더군요.

소스상에서는 도저히 답이 보이지 않아서 찾어보던 중 Brian씨가 만들었다는 .Mac Web Gallery 스타일의 skim이라는 프로그램을 보았습니다. 마찬가지로 첫 로딩에 전체 이미지를 로딩합니다. (예제)

1. aera를 사용하여 전체 이미지를 html페이지에 로딩해 놓기 때문에 .Mac Web Gallery와는 다릅니다.
   
2. 보이기에는 빠르게 보이지만 브라우져 안에서는 이미지가 바뀌었는지에 대한 Request/Response가 발생합니다.

출처:

.Mac Web Gallery on Prototype via Ajaxian
Skim via tuaw.com