IV. 움직이는 상자

* 오늘 이야기는 브라우져 안에서 우리 크롬리스에 생명을 불어 넣어 줄 레이어 컨트롤 Javascript에 대한 것입니다.  역시 말씀 드렸던  FASTCLICK사의 InVue ( http://www.fastclick.com/demo/invue.html )를 중심으로 이야기를 진행 해 볼까 합니다.
* 이 회에서 다루는 inVue의 소스코드입니다.
http://labor119.com/sundew/mpl/sundew_mplayer_packages/resources/invue.zip
* 안녕하세요, 귀여운Rootin님. 반갑습니다.^^


1. 몸풀기
시작에 앞서, 혹시 아직 위 링크를 열어보지 않으셨다면 지금이라도 하셔서 함께 살펴 봤으면 합니다. 자. 새 창이 떳습니다. 화면중앙 상단에 큼직한 글씨로 "InVue Demo/works for IE only"라는 글이 있는데 지금은 그냥 넘어가겠습니다.  자 이제 창이뜨고 조금 지나니까 왼쪽에서 팝업창 하나가 "스르르~" 미끄러져 들어와서는 정중앙에서 멈추네요. 음. 이제 속으로 이런 생각이 드십니다.

"시간이 좀 흐르니 팝업창 하나가 '스르르~'하고 들어오는군.  처음에 시간이 좀 흐른 후에 동작이 시작된걸 보니 타이머가 있군.  그리고, '슥~' 하고 빨리 날아 올 수도 있고 '스르르르륵~'하고 늦게 나올 수도 있는데 '스르르~'하고 나오는 걸 보니 속도를 설정하고 유지시켜 주는 부분이 있겠군.  속도설정,조정??  음.. 또 타이머군. 그건 그렇고, 이건 눈 내리는 스크립트처럼 대상(눈)이 무한정 날라다니는게 아니라 어느 순간에 멈추는 걸 보니 조건문이 있나 보군. 그리고는 그 조건은 팝업창이 화면중앙에 오는 순간을 검사 할꺼고.. 음... 이 조건이 만족되면 움직이는데 쓰인 타이머는 기능을 상실하겠군. 그러니까 더 안 움직이는 것이겠지.  어라..  이제 보니 팝업창인데 브라우져안에 있군.  역시 레이언가..   음.. 최소화 버튼을 눌러 볼까..   오~. 아이콘으로 줄어드네. Kite님이 생각나는군 =) ..  자세히 보니 그냥 줄어드는게 아니라 팝업창이 스르르 작아지면서 아이콘으로 줄어드는것 같군. 오오...."

제가 이런 정도의 통찰력을 글 읽으시는 분들께 기대하고 있느냐하면 그렇지 않습니다.  그런 분이시라면 이런 글이 필요가 없겠죠. 그럼 제가 이만한 통찰력을 가진 사람이냐?, 왜냐하면 이런 글을 쓰고 있으니까?.. 그건 더더욱이(!) 아닙니다.  코드를 살펴본 후니까 이런 걸 지어내죠..  사실은 이 재밌지도 않은 얘기를 한참 하는 동안에 InVue에서 눈여겨 봐 둬야 할 사항들을 한번씩 언급해 봤습니다.  
위 얘기가 어떤 것들에 관한 얘기인지를 아신다면 지금부터 다룰 내용들을 이해하시는데 어려움이 없으시리라 생각합니다.


2. 코드를 살펴보기에 앞서..
첫번쨰로, 코드를 살펴본다는 얘기는 InVue의 핵심 js파일인 fast.js를 살펴보는 것이 되는데요, 이 Javascript는 3회에서 다뤘던 Jerrett의 Drag코드와는 비교가 될 만큼 전역변수와 지역변수를 잘 구분해서 정의/사용하고 있습니다.  즉, 이 코드에서 전역변수들은 파일 처음에 var를 붙이고 선언해 주고, 지역변수는 각 함수의 적절한 위치에서 역시 var를 붙여서 선언해 주고요.  비록 친근한 변수명들은 아닙니다만, 참 깔끔한 변수 정의/인용입니다.  배워 둘 만한 가치가 있다고 생각합니다.

두번째로 고려해야 할 사항은 바로 코드 속의 고정수치들 입니다.  InVue는 컨텐츠부분(iframe)의 크기가 250*250인 광고팝업레이어를 위해서만 계획되고 만들어진듯 합니다.  물론 코드재활용의 관점에서 이렇게 파라미터값들을 고정해서 사용하는것이 바람직하지 못한 것이긴 하지만 여기서는 이것에 마음을 쓰기보다 고정되어 있는 수치들은 나중엔 각자의 목적에 따라 변수로 교체해서 사용할 것을 감안하며 살펴 봅니다.

마지막으로 개체명/속성값 줄여 쓰기에 관한 부분입니다.
다음은 fast.js의 첫 여덟(8)줄입니다.

var dc=document;
var ie=dc.all
var dom=dc.getElementById
var hd='hidden';
var vs='visible';

dc.writeln("");
dc.writeln("<div id="tv" style="position:a...........

위에서 보면 "document" 개체는 "dc"라는 변수로 바뀌고 그 다음부터는 "document.writeln"이라고 할 부분을 "dc.writeln"으로 줄여서 쓰고 있다는 것을 알 수 있습니다.  

이와 같이, Javascript에서는 개체(Object)명도 임의의 변수로 재지정 하여 사용할 수 있다는 것을 알 수 있습니다.  곧, 변수형에 integer, string등 이외에도 OBJECT형이 있다는 얘기입니다.  또 한가지, 개체명 재정의 때는 인용부호(')를 안쓰지만 속성값 재정의 때는 var hd='hidden'; 같이 인용부호를 써 주는군요.  이렇게 되면 이 때의 변수, hd의 변수형은 string이 되겠습니다.
* 이 같은 개체명/속성값 줄여 쓰기는 방대한 Javascript의 파일크기를 최소로 해야 할 때 유용하게 사용될 수 있습니다만, 일반 변수명들과 헛갈릴 가능성이 있으므로 특별히 주의해서 사용해야 겠습니다.


3. 코드 구성
InVue는 4개의 레이어들과 6개의 함수들로 구성되어 있습니다.

- tv (역시 레이어의 아이디명입니다.)
이 레이어는 최소화가 되었을 때 보여지는 좌측하단의 아이콘 레이어입니다.

- sm(포함: table1)
눈속임 레이어로 이것과 이것의 유일한 내용물인 테이블(table1)의 역할은 minimizeit() 함수 설명부분에서 언급하겠습니다.

- fx2        
팝업의 껍질레이어이며 "최소화"버튼과 "닫기"버튼이 이미지맵으로 포함 되어 있습니다.

- fx(포함: 컨텐츠 iframe)
사용자(본래 목적은 광고) 컨텐츠가 들어가는 iframe을 담고 있는 레이어 입니다.

이번엔 함수들의 구성과 기능들입니다.

- function slideit() {...}
팝업레이어를 좌측으로부터 화면 중앙으로 이동 시킵니다.

- function minimizeit() {...}
팝업의 껍질레이어(fx2)에서 "최소화"버튼영역(이미지맵)을 클릭하면 자체 레이어의 틀이 줄어드는 것 같은 에니메이션이 나오는데 실제로는 이 함수에 의해 자체 레이어는 버튼부분을 클릭하는 순간 style[visibility]속성이 'hidden'으로 바뀌어 감춰지고 그 레이어 뒤에 숨어있던 눈속임 레이어(sm)을 좌측하단으로 이동시키면서 그 속의 테이블(table1)의 크기를 점점 줄임으로 팝업창이 줄어드는 눈속임 효과 냅니다.

- function processit(Tps,Lps,Wps,Hps) {...}
minimizeit()함수에 의해 호출되며 테이블(table1)의 크기를 줄입니다.

- function endit(Tps,Lps,Wps,Hps) {...}
역시 minimizeit()함수에 의해 호출되며 눈속임 레이어(sm)의 이동이 끝나면 아이콘 레이어(tv)의 위치를 좌하로 이동 시키고 style[visibility]속성을 바꿔 보이도록 합니다.

- function closeit() {...}
팝업의 껍질레이어(fx2)에서 "닫기" 버튼영역을 클릭하면 모든 레이어들의 style[visibility]속성을 hidden으로 바꿔 프로그램(팝업레이어)가 브라우져에서 완전히 사라진 것처럼 보이게 합니다.
*하지만 사실 사라진것은 아니기 때문에 발생하는 현상들에 대해 나중에 언급되어질 것입니다.  여기서는 정말(!)로 개체가 소멸하는 것은 아니라 '보이기'(visibility)속성만 바꾸어 눈속임을 한다는 사실을 잘 기억해 둡니다.

- function openit() {...}
팝업의 껍질레이어(fx2)의  '보이기'(visibility)속성을 바꿔 보이도록 해주고 아이콘 레이어는 다시 숨깁니다.

이렇게 해서 InVue의 레이어구성과 함수구성을 간단히 살펴 봤습니다.  다음은 InVue를 통해 함께 살펴봤으면 하는 부분들을 정리해 보았습니다.


4. 생각 해 볼 만한 부분들
- "InVue Demo/works for IE only" ("InVue 데모/IE에서만 동작함")
이 사실때문에 문제가 되는 부분은 바로 팝업레이어가 "스르르~"하고 들어오는 부분인데 이 기능은 지금 일단 관심외 사항으로 넘어가도록 하겠습니다. 참고로 최소화하는 부분의 Netscape 지원에 관한 얘기는 차후에 나누도록 하겠습니다.

- Drag기능의 결여.
이 부분은 Jerrett의 Drag로 보완되는 부분입니다.

- 레이어를 화면(브라우져안의) 중앙에 위치 시키기
레이어.style[left]=document.body.clientWidth/2-레이어폭/2
레이어.style[top]=document.body.clientHeight/2-레이어높이/2

이 방법을 통해 레이어를 화면 중앙에 두는 방법은 메모 해 둘만 합니다.  
* 특별히 이 부분은 "Sticky Layer" - (윈엠프같이)프로그램창(크롬리스창)이 경계 가까이로 이동 되어졌을 때 경계선으로 잡아 당겨다 붙이기- 나 "레이어 이동 범위 제한하기" 등등 많은 흥미로울 내용들과 연결되어 있습니다.  역시 기회가 닫기를 기다리며 여기서는 넘어갑니다.

- 음수(-) 위치좌표값?
다음은 팝업의 껍질레이어(fx2)의 초기좌표 설정 부분의 코드입니다.

fx2.left=-400;

여기서 음수 위치좌표값의 의미는 말 그대로 위치좌표 0 -브라우져의 좌측 한계(모서리) 부분- 을 기준으로 좌측으로 400만큼 더 왼쪽으로 간 좌표를 의미합니다.  그러니까 화면상에서는 허공이 되겠습니다.  이와같은 설정은 레이어를 화면상에서 숨길 목적으로 자주 사용되고 있습니다.  
참고로 앞서 2회에서 MEDIOPIXEL CHROMELESS가 모드-2에서 createPopup() 메쏘드를 사용했고, 그렇기 때문에 어딘가에 일반 브라우져 개체를 숨겨 뒀다는 얘기를 했었습니다.  MEDIOPIXEL CHROMELESS의 경우 이 일반창의 위치좌표는 (0,4000)으로 화면 저~ 밑에 위치 시킴으로 스크린상에는 크롬리스(popup개체)만을 남겨 두고 그 생성창은 시야에서 숨깁니다.  위에서 레이어 위치좌표값으로 음수를 설정하는 것과 비슷한 목적이었음 알 수 있습니다.



끝으로 본 4회에서 다뤘던 항목들은 다음과 같습니다.

- 개체명/속성값 줄여 쓰기
- InVue의 구성과 동작
- 레이어, 화면 중앙에 위치 시키기
- 음수(-) 위치좌표값의 의미

자, 드디어(!), 결국에(!!),  처음에 소개 해 드렸던 세개의 상자를 모두 열어 보고 그 이야기들을 함께 나눠 봤습니다.
다음에는 이 상자들을 가지고 어떻게 웹어플리케이션을 위한 가시적 인터페이스를 구성할 것인가에 대해 함께 생각 해 봤으면 합니다.




닫는 글입니다.  도대체 이 중에 하나라도 건질 내용이나 있는지, 아니면 소중한 게시판 공간만 쪼로록 낭비하고 있는 것은 아닌지 스스로도 해답을 못 내리고 있습니다. 부디 부족한 부분에 대한 많은 질책과 조언, 그리고 테클(^^) 부탁 드립니다.

끝까지 읽어주신 분들께 고마움을 전하며 4회를 여기서 마칩니다.  감사합니다.


*이 게시물에서 다루는 내용의 예제는 아래주소에서 보실 수 있습니다.
http://m-player.wo.to

*이 회에서 다루는 inVue의 소스코드입니다.
http://labor119.com/sundew/mpl/sundew_mplayer_packages/resources/invue.zip