JS에서 TweenMax 사용하기 [ 0 ] – 머릿말

TweenMax 소개

트윈맥스는 그랜트 스키너가 만든 애니메이션 라이브러리입니다. GreenSock이라는 그룹을 통해서 오픈소스로 공개되고 있습니다. (상용 사용에 대해 일부 제한이 있을 수 있으니 라이센스를 확인하십시오.)
트윈맥스는 처음 플래시 플랫폼의 액션 스크립트를 대상으로 만들어졌습니다. 액션 스크립트 개발자에게는 가장 많이 알려진 애니메이션 라이브러리 중 하나이기도 합니다. 지금은 JS용으로도 공개가 되었고, 지속적으로 업데이트가 되고 있습니다.
저는 애니메이션이 사용되는 대부분의 프로젝트에 트윈맥스를 사용하고 있습니다. 제가 가장 능숙하게 다루는 라이브러리이기도 하면서 장점도 굉장히 많기 때문입니다. 제가 가끔 트윈맥스에 대해서 이야기를 하면 대부분의 개발자들은 들어본 적이 없거나, 들어본 적은 있지만 사용하지 않은 경우가 많습니다. 들어본 적은 있지만 왜 사용하지 않는가? 대략적으로 의견을 들어보면 다음과 같습니다.

  1. jQuery.animate()로 작업이 충분히 가능하다.
  2. 플래시 플랫폼 출신의 라이브러리라 신뢰가 가지 않는다.
  3. CSS3 애니메이팅을 지원하는 라이브러리로 알고 있다. (IE 대응이 불완전 할 것으로 예상된다.)

저에게는 무척 아쉬운 내용들이었습니다. 트윈맥스에 대한 애정으로 굳이 변을 해 보자면,

  1. jQuery는 훌륭한 DOM 제어도구이자 JS 유틸리티이지만 애니메이션에 관해서는 지원 수준이지 뛰어나다고 할 순 없습니다. 수준 높은 UI를 구현하고 거기에 애니메이션이 필요하다면 애니메이션 전문 라이브러리를 사용해 보는 것은 강력히 추천할만합니다.
  2. 플래시 플랫폼은 웹 UI에 있어서 사양 기술이 맞습니다. 하지만 UI/UX에 있어서 플래시가 그 동안 공헌을 했던 것 또한 사실입니다. 플래시 개발자들의 UI/UX 경험은 JS 개발자에게 많은 도움이 될 것이고, 서로 도움을 주고 협력해 시너지를 만들어낼 수 있을 것입니다. (플래시 까지마! ㅜㅜ)
  3. 트윈맥스는 CSS3 애니메이션을 지원하면서 크로스 브라우징과 하위 브라우저 대응을 모두 커버하는 라이브러리입니다.
  4. 트윈맥스의 철학

    트윈맥스는 쓰기 편한 라이브러리를 지향하고 있습니다. 편리하고 유연하게 코드를 짤 수 있도록 도와줍니다. 자체적으로 메모리 관리를 하고 있어 개발자가 크게 신경쓰지 않을 수 있도록 해줍니다. 원한다면 애니메이션 객체를 직접 제어할 수도 있습니다. 물론 찾아보면 트윈맥스보다 더 빠르고 가벼운 라이브러리도 있습니다. 하지만 성능과 편리성을 모두 고려한다면 저는 트윈맥스가 아주 우수하다고 생각합니다.

    트윈맥스의 장점

    1. 퍼포먼스가 뛰어납니다. 참고 : HTML5 Animation Speed Test
    2. 애니메이션 효과에 관련한 브라우저 호환성을 쉽게 해결해줍니다.
      벤더 프리픽스를 신경쓰지 않고 코드를 작성할 수 있고, IE 구버전에서 지원하지 않는 효과들도 최대한 구현해줍니다.
    3. matrix를 이용해 복잡하게 구현해야 하는 scale, rotate, skew 등을 쉽게 구현할 수 있습니다.
    4. 단순히 일회성으로 애니메이션 효과만 주는 것이 아니라, 생성된 애니메이션을 제어하기 수월합니다.
    5. jQuery등의 자주 사용되는 라이브러리와 쉽게 호환됩니다. jQuery는 플러그인 방식으로도 제공되고 있습니다.
    6. 다양한 easing을 제공합니다.

    이 강좌에 대한 소개

    • 이 강좌는 기본적인 자바스크립트를 알고 계신다는 전제로 진행합니다. 자신이 개발하는 UI 품질을 높이고 싶은 분들에게 도움이 되었으면 하는 바람입니다.
    • JS Fiddle을 통해 예제 코드를 제공합니다.
    • DOM 제어에 jQuery를 사용합니다. 하지만 다른 라이브러리를 사용하시는 분들도 큰 무리 없이 적용하실 수 있을 겁니다.

    준비하실 것들

    TweenMax의 최신 버전은 http://www.greensock.com/에서 받을 수 있습니다.
    여느 라이브러리와 같이 head 태그 안에 script 태그를 넣어줍니다.
    CDN으로 제공되는 js를 사용하셔도 됩니다.

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

    준비가 끝났으면 가벼운 코드로 시작해 보도록 하겠습니다.

JS에서 TweenMax 사용하기 [ 0 ] – 머릿말”에 대한 1개의 생각

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다