script.aculo.us는 Prototype Framework를 이용한 라이브러리이다. 처음 프로토타입 프레임워크에 대해서 알았을 때 프로토타입 프레임워크와 항상 콤비를 이룬다는 script.aculo.us에 대해서 들었다.(솔직히 머라고 읽는건지 모르겠다. 난 그냥 스크립타큘러스라고 하긴 하지만...) 꼭 써야할 만큼 강력하다는 얘기도 들었지만 그 당시에는 프로타입 자체도 잘 이해못하던 때였기 때문에 script.aculo.us를 이해한다는 건 거의 불가능에 가까웠다.

그 당시 프로토타입 분석의 임무를 맡고 있었기 때문에 분석하면서 콤비네이션 이펙트를 우리 팀장님한테 보여줬을때 "이걸 어따써"라는 대답(우리 사업분야를 고려해서..)을 들었지만 솔직히 좀 동감하고 있었다. 내심 내가 모르는 뭔가 있을꺼야 라는 생각을 하고 있긴 했지만 lightbox등등의 수많은 화려한 자바스크립트에 비한다면 "이걸 가지고 어쩌란 말이지?"라는 의문은 당연한 거였다.

이때 잘못했던 것이 바로 사용할 수 있게 만든 라이브러리등과 script.aculo.us를 동일선에서 비교한 것이었다. script.aculo.us는(아직 살짝만 써본거지만) 라이브러리라고 써있긴 하지만 내생각으로는 거진 프레임워크에 가깝다. 프로토타입 프레임워크가 가지지 못한 것들을 좀더 확장시켜주는 역할을 하는 것이지 다른 라이브러리들처럼 script.aculo.us그 자체로 쓰라고 나온 것이 아니다.

script.aculo.us도 여러가지 기능이 있는데 이중에서 이펙트관련 기능만 사용해 보았다.

script.aculo.us의 데모페이지에 가면 콤비네이션 이펙트 16가지에 대한 데모가 있다. 이 부분에 대해서 설명을 할려고 한다. 좀 복잡함에 쫄았었는데 만지다 보면 완전히 이해는 못해도 사용하는데는 그렇게 어렵지 않다. 그리고 먼저 추가적으로 말하면 script.aculo.us에서 제공하는 이 콤비네이션 이펙트는 내가 이해하기에는 이렇게 쓴다정도를 제시한다고 할 수 있다. 그렇기 때문에 예외처리등을 안되어 있다. 슬라이드등의 효과를 연속적으로 하면 오작동이 일어나기 때문에 이런 부분은 별도로 처리를 해 주어야 한다.

콤비네이션 이펙트는 말그대로 콤비네이션이다.(엥?)

를 다양하게 조합해서 이루어진다. 즉 이걸 다르게 조합하면 내가 원하는 다른 효과도 만들어 낼 수 있다는 것이다.

내부 코드를 다 이해한 것은 아니기 때문에 동작원리까지 설명하긴 아직 어렵고  콤비네이션 이펙트를 어떻게 사용하는 지 정도만 보겠다. 분량이 많은 관계로 일일이 다 설명하면서 하기는 좀 부담되서(귀찮기도 하고.) 예제페이지를 하나 놓고 전체적으로 간략하게만 설명하겠다. 여기선 그냥 사용법정도만 다루는 것이기 때문에 예제의 소스를 보는것 만으로도 이해하는 데 문제가 없을거라고 생각한다.

 기본적인 사용법은 Effect.메서드('엘리먼트id', {옵션}); 의 형태로 이루어진다. 옵션을 말 그대로 빠져도 상관없다. (표현과 구조의 분리를 위해서 태그에 직접 onclick으로 자바스크립트를 사용하는 것 보다는 이벤트 리스너를 통해서 따로 등록하는게 좋지만 여기서는 보기쉽게 하기 위해서 태그에 직접 코드를 써넣었다.)

 이벤트 관련해서는 script.aculo.us의 이펙트관련 도규먼트에서 사용에 대한 어느정도의 정보를 얻을수 있고 유저들이 다양한 활용을 올려놓은 Effects Treasure Chest를 보면 도움을 꽤 얻을 수 있다.