Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

script.aculo.us의 Combination Effects 사용하기

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.Scale
투명도를 조절해주는 Effect.Opacity
이동시켜주는 Effect.Move, Effect.MoveBy
여러 효과를 묶어주는 Effect.Parallel

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

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

script.aculo.us Combination Effects Examples
(prototype.js 1.6.0.2 & script.aculo.us 1.8.0 Based)


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

● Effect.toggle은 toggle를 소문자로 적어주어야 한다. 대문자로 하면 동작하지 않는다.

● Effect.Appear는 처음에 엘리먼트가 안보이는 상태여야 동작가능한데 display속성을 통해서 불편하게 할 필요없이 $('example2').hide(); 와 같은 방식으로 안보이게 설정해 줄 수 있다.

● Effect.Puff는 margin-left:200px이기 때문에 최초위치와 다르게 나타나는데 margin-left가 0px이면 제대로 동작한다.

● Effect.BlindUp/Down에서는 scaleY 옵션을 먹지 않는다.(문서상으론 되는것 같은데.. ㅡ..ㅡ)

● Effect.SlideUp/Down에서는 scaleX/Y옵션을 1,0으로 주어야 한다. 1이 true이고 0이 false이다.

● Effect.Shake에서는 delay옵션이 먹지 않는다.

● Effect.Squish는 뭘 잘못한건지 옵션이 전혀 먹지 않는다.

● Effect.Highlight는 반드시 new와 함께 써주어야 한다. 기본으로 하일라이트 색은 #ffff99(밝은 노란색)에서 #ffffff(흰색)으로 변한다. restorecolor를 지정해주지 않으면 원래색으로 자동으로 돌아간다. 색지정은 #fff식의 단축코드는 먹지 않는다.


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

2008/03/07 01:19 2008/03/07 01:19