Dreamweaver 8 팝업 응용 익스텐션 기능을 활용한 샵앵끄닷컴 사이트 |
Dreamweaver 8 의 익스텐션은 보다 다양하고 편리한 사용으로 제작자에게 웹 사이트의 다양한 제작 방식을 제시하고 있다 . 또한 유료 , 무료 방식의 보급으로 사용자 층이 점점 더욱 늘어가고 있는 추세이다 . 다양한 익스텐션 중 팝업 응용 익스텐션은 가장 활용도가 높은 익스텐션 중 하나라고 할 수 있다 . 웹 사이트 팝업창에 응용되는 익스텐션에 대해 알아본다 .
글 . 한형만
명지대학교 대학원 디자인석사
( 현 ) 열린사이버대학교 컴퓨터디자인 강사
( 현 ) 앵끄닷컴 디자인팀 과장
|
| |
| |
* 익스텐션의 의미
익스텐션은 보다 편리하고 다양한 웹사이트 제작방법에 그 솔루션을 제시하는 중요한 역할을 한다 . 특히 순수 웹디자이너에게는 보다 다양한 기능을 활용할 수 있는 기능이라 할 수 있다 .
일반적으로 익스텐션의 기능은 웹 사이트를 제작하는 디자이너라면 누구나 알고 있지만 , 그 활용은 미미하다 할 수 있다 . 이는 웹프로그래머와의 공동 작업으로 인한 필요성 문제와 또한 익스텐션의 인식 문제등 여러 가지가 있을 것이다 .
익스텐션은 고정되어 있는 기능이 아니라 , 수시로 업그레이드되고 또한 개발되어지는 기능으로 사용자에 따라 그 위력에 큰 차이를 보여주는 기능이라 할 수 있다 . 이는 익스텐션의 사용이 필요하다는 제시로만 그치는 것이 아니라 , 실제 활용 방안을 제시하고 실제 응용 가능한 예제를 보는 것 또한 중요한 활용 방법이라 할 수 있다 . |
| |
익스텐션의 활용된는 범위는 그 한계를 정할 수가 없다 . 이는 무한 확장이라는 의미와 실제 익스텐션이 제작되는 방법에 의해 알 수 있다 . 이는 순수 웹디자이너가 접근하기 쉽지 않은 방법이기 때문에 역시 익스텐션의 활용을 주로 해야 되는 웹디자이너에게 인식의 문제로 다가오고 있다 .
* 익스텐션 (Extension) : 익스텐션은 드림위버의 확장 방식으로 크게 ‘ 객체형 ' , ‘ 커맨드형 ' , ‘ 비헤이비어형 ' 으로 나누어 볼 수 있다 .
익스텐션은 웹디자이너를 위한 기능이고 , 또한 주 사용자라 할 수 있다 . 드림위버가 웹디자이너의 위한 다양한 업그레이드를 하고 있다면 , 웹 프로그래머에게도 다양한 활용방법을 제시하고 있다 . 이는 웹 디자이너 뿐만 아니라 , 웹프로그래머 역시 그 사용 타겟을 확장했다는 의미이며 , 또한 실제 웹 프로그래머의 드림위버 사용 범위도 점점 늘어가고 있는 추세이다 .
이제 익스텐션은 웹디자이너 뿐만 아니라 . 웹프로그래머의 사용에도 범위를 넓여 그 활용 및 응용 방법을 제시하고 있다고 할 수 있다 . 이는 보다 빠르고 , 의도된 웹사이트를 제작할 수 있게 해 주는 여러 방법 중에 하나라고 할 수 있겠다 . |
 |
Animate Browser Window 익스텐션 다운로드 페이지 |
|
* 익스텐션 설치 진행 순서
익스텐션의 설치는 아주 간단한 방법으로 진행된다 .
먼저 익스텐션 다운로드 페이지 ( http://www.adobe.com/kr ) 에서 원하는 익스텐션을 다운로드 받은 후에 아래의 그림과 같이 익스텐션 관리자 페이지에서 설치를 하면 된다 . 이렇게 설치된 익스텐션은 익스텐션의 종류에 따라 드림위버의 인터페이스에서 확인할 수 있다 . |
 |
| 아래의 그림과 같이 설치된 ‘Animate Browser Window' 익스텐션은 간단히 ‘Behaviors' 화면에서 마우스로 클릭하여 적용할 수 있다 . |
 |
Animate Browser Window 가 추가된 Behaviors 화면 |
|
마우스로 ‘Behaviors / Animate Browser Window' 를 클릭하면 아래의 그림과 같이 대화 상자가 열리는데 , 이때 시작 윈도우의 크기와 최종 윈도우의 크기를 설정하고 , 확장되는 단위를 설정해 주는 것으로 마무리 하면 된다 . |
 |
| 이와 같이 간단한 방법으로 삽입된 Animate Browser Window 의 코드는 그리 간단하지가 않다 . 소스 모두를 보여 줄 수는 없지만 , 대충 20 줄 이상의 코드가 삽입된 것을 확인할 수 있다 . |
 |
Animate Browser Window 소스 |
|
<body leftmargin="0" topmargin="0" onload="TB_animateWindow(100,100,600,600,20,20,false)" >
<script type="text/JavaScript">
<!--
function TB_animateWindow(windowWidth,windowHeight,targetWidth,targetHeight,widthMod,heightMod,fullScreen)
{
* 생략
</script>
간략하게 코드를 내용을 확인해 보면 TB_animateWindow( ) 함수가 실행되면서 설정된 값이 적용되는 것을 확인할 수 있다 . |
 |
실행과 동시에 확장되는 Animate Browser Window 페이지 |
|
* Advanced Open Window 는 드림위버의 기본적인 open browser window 보다 더욱 발전된 모습을 갖고 있다 . 이는 브라우져의 크기를 제어하는 기능 뿐만 아니라 , 브라우져의 위치를 지정해서 띄울 수 있는 기능까지 갖고 있다 . |
 |
Advanced Open Window 익스텐션 다운로드 페이지 |
|
 |
Advanced Open Window 3.05 인터페이스 |
|
몇 가지의 팝업 관련 익스텐션을 다운로드하고 , 설치하고 , 적용하는것에 대해 알아보았다 . . 드림위버를 처음 배우는 사용자의 경우에는 익스텐션에 대한 부분의 필요성과 사용방법에 대해 의문이 생길 수 있겠지만 , 실무를 진행하는 웹 디자이너와 웹 기획자의 경우에는 꼭 필요한 확장 기능 중에 하나라고 생각한다 . 쉽지 않은 스크립트를 공부하지 않아도 다양하고 , 의도된 웹사이트를 제작하기 위해서 익스텐션의 공부를 꼭 필요한 요소가 아닐까 한다 . 익스텐션은 말 그대로 무한 확장 이라는 큰 장점을 갖고 있다 . 드림위버의 모든 기능을 갖고 가는 것은 드림위버 사용자 각자의 선택에 따라 다르겠지만 , 본인이 전념해야 하는 영역이 적지 않음을 또한 잊지 않는 것이 중요하다 할 것이다 . |
