Rev. 2.73

애플 홈의 아이폰 4S 제폼 웹페이지에서 메인 비주얼를 장식하는 슬라이드는 총 6개의 애니메이션 시퀀스로 구분된 제품 특징들로 구성되어 있습니다. 이 제품 슬라이드를 구현하는 CSS 애니메이션과 자바스크립트 코드를 사례로 효과적인 애니메이션을 구현하는 방법에 대하여 공부해 봅시다.

아래의 데모는 작동원리를 이해하기 위해 약 20% 수준으로 축소한 것이며, 브라우저의 뷰포트를 확인하기 위한 가상 요소(browser)가 포함되어 있습니다. 슬라이드 요소들이 커다란 하나의 맵(phone-stage)으로 구성되어 있고 아이폰 검정색(bphone)만 별도의 레이어로 취급되고 있습니다. 그리고 슬라이드 6번은 1번 슬라이드와 절묘하게 교차하면서 반복된다는 사실을 알 수 있습니다. 그러나 실제 버전에는 각 슬라이드에 사용된 이미지와 텍스트가 개별 요소들로 구분되어 보다 많은 구성 요소들로 이루어져 있으며, 링크와 텍스트 애니메이션 정보 등의 처리까지 포함하고 있지만 이 데모에서는 그 것을 통합하거나 생략한 것입니다.

데모 출처: http://johnbhall.com/iphone-4s/ via John B. Hall

슬라이드 기능을 만드는 자바스크립트 핵심 함수는 SlideSequencer 클래스입니다. Sequencer는 재생/정지 상태를 관장하고 정해진 시간에 다음 시퀀스를 재생합니다. Slide는 애니메이션 대상 요소와 이벤트 핸들러, CSS transformtransition 속성에 사용될 translate, rotate 등의 값들로 구성된 인스턴스를 생산합니다. 대상이 된 HTML 요소에 스타일(style) 속성이 인라인으로 갱신되면서 애니메이션이 발생하는 것입니다. 파이어버그 또는 돔인스펙터(개발자 도구)를 열고 "phone-stage"의 스타일 속성을 감시해 보세요. 위 데모에 사용된 코드는 다음과 같습니다.

  var phoneStage = $("phone-stage"),
      bphone = $("bphone");
  
  var q = new Slide([{
      el: phoneStage,
      x: -325,
      y: -234,
      r: -30
    }, {
      el: bphone,
      x: 0,
      y: 0,
      r: -30
    }]),
  
  t = new Slide([{
      el: phoneStage,
      x: -264,
      y: -316,
      r: -0
    }, {
      el: bphone,
      x: -300,
      y: -300,
      r: -30
    }]),
  
  ...
  
  b = new Sequencer([q, t, z, u, j, f, v]);
  b.play();

즉, 이 슬라이드에서 발생하는 애니메이션은 전부 CSS로 처리하지만 이것을 제어하는 것은 자바스크립트입니다. 자바스크립트는 시퀀스를 구성하는 transition과 transform 속성을 만들어 해당 요소의 인라인 스타일 속성에 대입해 주는 거죠. 이 간단한 원리로 얻어지는 가치는 무엇일까요? 자, 우리는 일반적으로 애니메이션을 처리할 때 jQuery에서 제공하는 .animate 또는 Prototype & Scriptaculous의 .morph와 같은 자바스크립트 기반 애니메이션 함수를 사용해 왔습니다. 왜냐하면 사용자의 미세한 행동들 까지도 감지하여 화면에 응답하는 것을 만들어야 했기 때문입니다. 그리고 이 애니메이션 함수들은 Frame-by-Frame으로 연산하기 때문에 생각보다 많은 처리 비용이 든다는 사실을 여러분은 잘 알고 있을 것입니다.

CSS로 처리되는 애니메이션을 자바스크립트로 제어한다는 것은 곧 화면상의 상호작용을 직접 제어할 수 있게 되는 것을 의미합니다. 이것은 매우 흥미롭습니다. .animate.morph를 사용하는 대신에 CSS 속성을 활용하여 브라우저의 자원을 효율적으로 분산 처리하는 효과적인 애니메이션 구현 기법입니다. 이렇게 확보된 자원으로 더욱 복잡한 애플리케이션을 구상할 수 있고, 아름다운 그래픽 애니메이션도 지원 받을 수 있습니다. 특히 CSS transitions는 하드웨어 가속을 지원하기 때문에 자바스크립트 연산으로는 도저히 답이 안나오는 여러가지 사치성(호화로운) 애니메이션 효과들을 제품에 적용여 네이티브 애플리케이션에 하이킥을 날리는 레알 웹애플리케이션을 만들어 낼 수 있습니다.

Comments

Chris Coyier씨는 예술가인 Zoran Pekoviċ씨의 플래시로 만들어진 작품을 HTML, CSS, 그리고 약간의 자바스크립트를 이용하여 보여지도록 변환했습니다. 파이어폭스와 웹킷 계열 브라우저(사파리, 크롬 등)에 정상적으로 작동하며 파폭에서 더욱 깔끔한 애니메이션을 보여줍니다. 자바스크립트는 단지 z-index를 증가시키고 클래스 이름을 변경하며, 나머지는 모두 CSS로 표현되는 것입니다.

Click on the images to reveal another.

Comments