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

런던에서 열린 Future of Web Apps 컨퍼런스에서 Chris Coyier씨가 발표한 슬라이드입니다. Wufoo에서 CSS를 다루는 과정과 자주 범하는 실수들 그리고 가짜 요소(pseudo elements)들의 활용법에 대한 내용을 담고 있습니다. 아래 슬라이드는 Speaker Deck에 등록된 것입니다.

Comments

새로 들어간 회사일로 HTML5를 이용하여 네이티브 앱 개발을 할 수 있는 도구들을 조사했습니다. 대표적으로 Appcelerator에서 개발한 TitaniumNitobi에서 개발한 PhoneGap이 있습니다. 이들은 급변하는 환경에 발빠르게 대응하여 진화하는 중이며, 근황을 살펴보면 Nitobi는 며칠전에 Adobe에 인수되었으며, Appcelerator는 웹 클라이언트 개발도구인 Aptana를 인수한 바 있습니다. 이 두 프레임웍을 중점으로 찾은 자료들 중 괜찮게 비교한 포스트가 있어 일부를 발췌했습니다.

이 두 프레임웍은 모바일 네이티브 앱 뿐만아니라 Adobe AIR의 취지와 같이 데스크탑 애플리케이션 개발 범주까지 포함하거나 포함할 예정이며, 한 플랫폼으로 구축된 프로젝트를 재사용하여 다른 플랫폼(iOS, Android 등)에서 돌아가는 네이티브 앱을 구축할 수 있다는 장점을 가지고 있기 때문에 웹 개발자들로부터 귀추가 주목되어 왔습니다. 지금부터 설명할 프레임웍들의 특성을 숙지하고 자신이 개발하려는 애플리케이션의 성격을 고려하여 적합한 개발도구를 선택하도록 합시다.

PhoneGap

PhoneGap은 웹 개발자들이 가진 기존의 모든 기술을 활용하고 자체적으로 제공되는 Device API에 자바스크립트로 접근할 수 있게 하는 것으로 모바일 디바이스에 특화된 네이티브앱을 개발할 수 있습니다. 별도의 개발도구를 제공하지 않으며, 해당 플랫폼의 SDK에 유기적으로 결합됩니다. 예를 들면 iOS인 경우 Xcode의 프로젝트 타입으로 등록되고, 안드로이드인 경우 이클립스에 프로젝트 타입이 추가됩니다.

PhoeGap.png

Titanium 보다 좋은 점

  • 보다 자유 분방한 라이센스(Apache open source license 대비 MIT)
  • 보다 쉽고 다양한 테스팅(웹브라우저, Xcode 시뮬레이터, Adobe AIR 시뮬레이터)
  • 더 많은 모바일 플랫폼 지원

모바일에 최적화된 웹페이지를 가지고 있다면 여기에 모바일 디바이스에서 지원하는 몇 가지 기능을 아주 쉽고 빠르게 추가 개발하여 배포하고 수익을 창출할 수도 있을 것입니다. 브라우저를 하나의 플랫폼인 관점으로 접근했기때문에 향후 이러한 프로그래밍은 더욱 인기가 높아질 것입니다.

Titanium

Titanium 역시 자바스크립트와 HTML, CSS를 작성할 수 있긴 하지만, 다소 억척스러운 면이 있습니다. 실제 네이티브 UI 컴포넌트를 호출할 수 있는 API를 제공합니다. PhoneGap처럼 브라우저를 드로잉 앤진(UIWebView)으로 사용하지 않는다는 얘기죠. 그리고 앞서 밝혔듯이 Aptana를 인수하여 이클립스 기반의 전용 IDE(통합 개발 환경)로 작업할 수 있습니다.

Titanium.png

PhoneGap 보다 좋은 점

  • 쉽게 네이티브 앱처럼 보이도록 만들 수 있음(실제 네이티브 UI 컴포넌트를 사용하기 때문)
  • 더 나은 성능(Objective-C로 작성된 앱과 견줄만 함)
  • 모든 네이티브 기능을 추가하여 확장가능(예를 들면 서드파티 라이브러리?)

Titanium은 Objective-C를 배우는 대신에 사랑스러운 자바스크립트로 프로그래밍하고 네이티브 앱에 버금가는 성능을 얻는다는 것이 두드러진 특징이라 할 수 있겠습니다.

결론

결국 이들은 구축방식과 작동방식에서부터 완전히 다른 목적을 추구하는 프레임웍입니다. PhoneGap으로 작성된 앱은 네이티브 앱에 비해 성능이 떨어지는 아쉬운 점이 있습니다만, 웹과 앱을 구동하는데 있어서 프로젝트를 다방면으로 재사용하기에 좋습니다. Titanium은 마치 Objective-C로 작성하는 것과 같은 더욱 많은 장점이 있습니다만, Device API에 UI 컴포턴트 API 그리고 디바이스별로 사용법이 달라 같은 소스에서 크로스-디바이스까지 고려해야 한다는 노고가 뒤따릅니다. 참고로 Titanium / PhoneGap / Adobe Air for Mobile 비교표도 확인해 보세요.

Comments