장낙중의 드림위버강좌

비헤이비어는 오브젝트,커멘드등과 더불어 비주얼 웹에디터의 선구자적인 역할을 자임한 매크로미디어사가 드림위버라는 웹저작도구를 만들면서 도입한 이제까지의 웹에디터와는 전혀 새로운 방식의 개념이다.

비헤이비어라는 것에 대한 개념을 정확히 이해하기 위하여 몇몇가지 용어들에 대한 설명을 하여야 할 것 같다.

1.HTML과 JavaScript

HTML이라는 언어와 이를 탐험(Navigation)하게 할 수 있는 브라우저의 개발은 인터넷이 세계적으로 확산되는데 크게 기여를 한 바 있다.
HTML언어는 세계도처의 컴퓨터(서버)들을 온라인상에 묶어 연결하고 누구나 인터넷망을 통하여 자신의 개인용 컴퓨터에 장착된 브라우저(클라이언트)라는 수단을 써서 어느 곳에 있는 정보라도 순간적으로 접속하여 자료를 얻을 수 있게 한 획기적인 언어이다.

그러나 사람들은 이러한 HTML언어가 단지 서버에 저장된 문서만을 요구에 따라 보여주기만 하는 것으로 그치는 것에 만족하지 못하여 동적이고 클라이언트의 요구에 반응하는 문서를 만들기에 온갖 노력을 기울여 왔다.

그 하나가 여러분께서 게시판이나 방명록 또는 카운터등...여러가지로 사용하고 있는 CGI프로그램이다.
CGI는 여러분이 방문한 사이트에 여러분의 방문 흔적을 남기고 또 다른 방문자가 그것을 언제든지 호출하여 볼 수 있게 해준다.

그러기 때문에 이 역시 동적인 페이지와는 무관한 것이다.

사람들은 그래서 여러가지 언어들을 개발하여 동적인 웹페이지제작을 시도 하게 되었는데 그중 하나가 JavaScript라는 언어이다.

원래 Netscape Navigator에 맞도록 개발된 것이지만 브라우저의 Version이 업그레이드되면서 공통으로 쓸 수 있는 부분이 많아졌으며 마이크로소프트에서도 이에 대응하는 JScript 라는 언어를 개발한 바 있다.

우리는 브라우저상에 보여지는 현상을 가지고 그것이 서버측에서 프로그램을 구동하여 보여지는 것인지 브라우저(클라이언트)가 서버로부터 전송받은 내용을 가지고 한줄 한줄 번역해가며 시행하는 것인지를 잘 구분하지 않고 있는데..

JavaScript 언어는 후자에 속하는 언어인 Interpreter 언어이다.

JavaScript 언어가 Interpreter 언어이기 때문에 이것을 번역하여 보여주는 브라우저의 종류와 Version에 따라 보여지는 것이 달라질 수 밖에 없다는 점을 염두에 두어주기 바란다.
즉 이것을 다시 설명하면 같은 코드로 작성된 소스일지라도 브라우저의 종류에 따라 달리 보여지는 것이 많으므로 늘 양대 브라우저에서 어떻게 나타내어 지는지 신경을 써야만 할 일이라는 것이다.

2.오브젝트,이벤트,액션 비헤이비어...

우리가 자바스크립트를 이해하기 위해서는 간단하게나마라도 오브젝트와 이벤트 그리고 액션이라는 것의 개념을 알고 지나가야만 이해가 빠르다.

오브젝트는 문자 그대로 도큐먼트상에 놓여질 수 있는 모든 대상물을 말한다.
문자도 될 수 있고 그림도 될 수 있으며 앞서 설명한 레이어와 심지어는 형태는 보이지 않지만 문서의 본체임을 알리는 body에 이르기까지 오브젝트라 할 수 있다.

이벤트는 이와 같은 오브젝트에 일어난 사건을 의미한다.

예컨대 어떤 오브젝트위에 마우스가 올라갔을 때 이를 onMouseOver이벤트가 일어났다고 말하고 문서가 로드될때는 body라는 오브젝트에 onLoad 라는 이벤트가 일어났다고 하는 것이다.

액션은 어떤 종류의 오브젝트에 어떤 이벤트를 주었을 때 어떤 일이 일어나게 할 것인가를 정한 것을 말한다.

이것이 좁은 의미에서의 액션 비헤이비어이지만 드림위버에서 쓰는 비헤이비어는 오브젝트와 이벤트를 포함하는 넓은 의미로 쓰여진다.
또 한가지 중요한 사실은 이벤트가 일어나는 오브젝트와 액션이 일어나는 오브젝트가 늘 같지는 않다는 점을 이해해야 할 것이다.

3.드림위버의 비헤이비어.

드림위버의 비헤이비어는 자바스크립트이다.
즉 다시 말하자면 드림위버의 비헤이비어는 이를 사용하면 코드상 자바스크립트를 생성한다는 말이다.
여러분들께서는 이 싸이트가 열릴 때 "장낙중의 드림위버강좌!"라고 쓰인 글이 우측에서 한자 한자씩 날라들어 오는 것을 보았을 것이다.

이것은 아래와 같이 매우 복잡한 코드로 짜여진 자바스크립트이다.

글짜가 날라들어오는 자바스크립트코드

이러한 자바스크립트코드를 작성하는 일은 매우 번거롭고 자바스크립트라는 언어에 익숙해 있어야만 하는 일이다.
그런데 드림위버의 비헤이비어는 이렇게 복잡하고도 어려운 자바스크립트코드를 단 몇번의 클릭만으로 쉽게 작성할 수 있도록 도와준다.
위의 예제에 대한 것이 이 강좌의 "확장편"에 실려 있으니 참고하기 바란다.

4.드림위버의 비헤이비어-2

자바스크립트를 연구하는 프로그래머들은 자바스크립트를 생산해 낸다.
그리고 이들이 만든 자바스크립트코드들은 그 소스가 공개되어 있는 관계로 빠른 속도로 인터넷상에 퍼져 사용되어진다.

드림위버의 제3개발자들은 이렇게 보편화된 자바스크립트들을 드림위버의 비헤이비어로 만들어 이 또한 공개를 한다.
드림위버 고급사용자들은 이들이 만든 비헤이비어들을 자신의 드림위버프로그램에 접목시켜 이를 활용하는 것이다.

참으로 편한 세상인 것이다.

드림위버의 비헤이비어를 활용하면 아주 복잡하고도 어려운 자바스크립트코드를 단숨에 만들어 낼 수 있으니 말이다.

드림위버의 비헤이비어는 자바스크립트를 아는 프로그래머들이 보면 알겠지만 그 코드가 매우 간결하여 군더더기가 없으며 될 수 있으면 양대 브라우저에서 똑같이 보일 수 있도록 개발되어지는 경우가 많다(물론 그렇지 않은 것도 있지만..)

양대브라우저에서 똑같이 보이는 자바스크립트 ...프로그래머들에게는 얼마나 귀찮은 일인데^^

5.비헤이비어의 설치방법

비헤이비어들은 보통 ZIP 같은 압축파일의 형태로 배포되어진다.
이것을 다운 받아서 Dreamweaver 가 있는 폴더의 Configuration =">" Behavios =">" Actions 폴더내에 Addon이라는 폴더를 생성하고 거기에 압축을 풀어 넣으면 된다.

최근에는 드림위버의 개발사인 매크로미디어에서 세계도처에서 만들어지는 비헤이비어,오브젝트,커멘드등의 "확장"을 드림위버에 접목시키고 사용하는 것을 "관리"하기 위하여 Extension Manager라는 것을 만들어 드림위버사용자에게 배포하고 있는데..아마도 다음 버젼에서는 프로그램자체에 포함되어질 것으로 생각한다.

(Extension Manager는 매크로미디어사를 방문하면 다운 받을 수 있는데..이 강좌 "확장편"에 따로 올려 놓았으니 거기서 다운 받아 설치하는 것이 좋겠다.)

비헤이비어들이 공급되는 또 다른 형태로 확장자가 mxp인 것 ...

바로 이러한 형태의 비헤이비어는 실행시키기만 하면 드림위버의 Extension Manager가 알아서 알맞은 장소에 드림위버를 확장시켜 관리를 하여준다.

 

드림위버의 비헤이비어들은 이 강좌의 확장편에서 하나하나 소개하고 자료를 배포할 계획이니 그곳에서 참고를 하기 바란다.