1 Results for '타임라인'

  1. 2007.08.31 [Silverlight] 애니메이션 소개 (6)

너무나도 오랫만의 포스팅이에요. 그간 바빴단 핑계는 안통하겠죠?
오늘어제 은광여고 모임에서 급하게 준비했던 데모를 가지고 실버라이트의 애니메이션 모델에 대해 간단하게 소개합니다. 이 부분은 저도 계속 공부중이고 아직은 확신이 잘 안가는 부분도 많으니 오류나 더 좋은 방안이 있으면 바로 얘기해주세요.


실버라이트 애니메이션 소개

개요

애니메이션을 구현하는 방법은 여러가지가 있을 수 있겠지만 크게 프레임frame기반의 애니메이션 모델과 타임라인timeline기반의 애니메이션모델로 구분할 수 있을거에요. 이 글에서는 이 두가지 애니메이션 모델에 대해 간단하게 소개하고 차이점을 비교해보도록 할께요.

먼저 애니메이션을 한 마디로 정의 내리기는 쉽지 않지만 나름대로 정의를 내려볼까요?

정지된 다수의 장면을 연속적이고 순차적으로 화면에 표시하여 마치 움직이고 있다고 착각하게 만드는 효과

다른 말을 덧붙이고 싶으신 분들도 많으시겠지만 위의 정의에 대체로 동의한다는 가정하에 중요하다고 생각하는 몇 가지 용어도 알아보죠.

  • 프레임frame
    정지된 화면 한 장면 한 장면을 프레임이라고 합니다.
  • 렌더링rendering
    프로그래밍 코드에서 한 프레임을 이루는 요소들을 화면에 그리는 동작을 말합니다. 엄밀하게 얘기하자면 렌더링은 실제 화면이 되는 비디오 메모리에 픽셀 정보를 기록하는 것을 말하지만 실버라이트는 픽셀 단위의 비디오 메모리 조작은 불가능하고 모든 화면 구성 요소가 개체로 관리되므로 '화면에 표시될 개체의 속성을 변경하는 동작'이라고 표현해도 좋을 것입니다. 앞으로 렌더링이라고 하면 후자의 의미로 사용할 것입니다.
  • FPS(Frames Per Second)
    1초 동안 몇 개의 프레임이 표시되는지를 나타내며 일반적으로 FPS가 높을 수록 움직임이 자연스럽습니다.
  • 간격interval
    한 프레임과 한 프레임이 표시되는 시간적인 간격을 의미하며 1초를 FPS로 나눈 값입니다. 되며 예를 들어 30FPS인 애니메이션은 대략 33ms의 간격을 갖습니다. 이 간격이 짧을 수록 보다 높은 FPS로 애니메이션을 재생할 수 있습니다. 일반적으로 윈도2000 이상의 OS에서 제공하는 기본 타이머로 얻을 수 있는 최소 간격은 약 15~16ms로 알려져 있으며 따라서 이 기본 타이머만으로 구현할 수 있는 애니메이션의 최대 FPS는 64~66FPS라고 생각할 수 있습니다.

어떤 모델이든 위의 기본적인 개념은 잘 이해하고 있어야 해요. 그럼 본격적으로 각 애니메이션에 대해 생각해보죠.

전통적인 프레임 애니메이션

전통적인 애니메이션 프로그래밍은 앞서 말한 애니메이션의 기초 요소들을 그대로 모델링하고 있어요. 프로그램은 목표 FPS를 위한 간격의 타이머를 구동시키고 이 타이머내에서 렌더링을 수행해요. 물론 렌더링할 개체들의 표시 상태라던가 위치라던가 색상이라던가 투명도라던가하는 속성 값들을 개발자가 직접 작성한 코드로 계산하여 입력해줘야 하겠고요. 또한 복잡한 프레임의 경우 렌더링을 위한 계산 시간과 렌더링 자체에 걸리는 물리적인 시간도 어느 정도 소모되므로 간격을 이 시간도 고려해야 해요.

예를 들어 30FPS를 목표로 하는 애니메이션은 약 33ms의 간격을 유지해야 하므로 한 프레임을 렌더링 하는데 대략 3ms가 소요된다면 타이머가 30ms주기로 작동해야 할 거에요. 물론 플래쉬와 같은 애니메이션 툴에서는 이런 단순한 계산은 툴에서 지원을 해주고 FPS값만 지정해주면 몇 개의 프레임을 진행하는데 얼마의 시간이 걸릴지를 보여주니까 그다지 깊게 생각할 필요가 없을 거에요.

여튼, 프레임 애니메이션에서는 모든 장면을 프레임 단위로 생각하고 표시할 개체의 속성 변화 역시 프레임 단위로 계산된다는 게 핵심이라고 할 수 있어요.

실버라이트의 타임라인timeline 애니메이션

실버라이트는 프레임 기반의 애니메이션 대신 사람이 이해하기 쉬운 개념으로 추상화한 타임라인 기반의 애니메이션 기법을 제공해요. 하지만 한글을 사용하는 우리에겐 타임라인이나 프레임이나 어렵긴 매한가지지만 그러려니 해야죠. :)

먼저 타임라인의 개념에 대해 이해할 필요가 있어요. 아래 그림을 보시죠.


타임라인timeline은 말 그대로 시간의 흐름이 한줄로 늘어서있는 것을 말해요. 이 타임라인에 그림에서 보이는 화살표와 같은 어떤 흐름을 놓는다고 생각해보세요. 이 흐름이 유한하다면 -시작과 끝이 있다면- 타임라인상에서 시작시간begin time과 지속시간duration을 갖을거에요. 즉, 타임라인이란 특정 시공간내에서 진행되는 어떤 흐름의 시작시간과 지속시간을 의미한다고 볼 수 있어요. 이 타임라인에 애니메이션이란 흐름을 올려놓으면 바로 타임라인 애니메이션이 구성되는 것이죠.

실버라이트는 이 타임라인에 기반한 몇 가지 애니메이션 클래스들을 제공하고 있어요. 여기에서 타임라인은 애니메이션의 시작시간과 지속시간만을 관리하고 실제 개체의 속성은 바로 실제 애니메이션 클래스들이 제공하는 속성들-Double, Color, Point등-을 설정함으로써 시간의 흐름에 따라 자동으로 계산되게 되죠.

애니메이션은 크게 시퀀스sequence 애니메이션과 키프레임keyframe 애니메이션으로 구분할 수 있지만 여기에서는 개념을 이해하기 위해 보다 단순한 시퀀스 애니메이션을 중심으로 설명드릴께요. 다음의 그림을 보세요.


애니메이션은 타임라인위에 배치되고 이 타임라인이 애니메이션의 시작시간과 지속시간을 관리해요. 그리고 애니메이션은 변경될 대상의 속성값을 시작값from에서 목표값to까지 시간의 흐름에 따라 변경하는 역할을 수행하죠.

프레임 애니메이션과 달리 타임라인 애니메이션은 애니메이션이 진행되는 동안 벌어지는 일에 대해 손을 댈 필요가 없어요. 시작시간, 지속시간, 시작값, 목표값만 정해주면 나머지 계산과 렌더링은 런타임에서 알아서 수행하게 되죠. 아마 프레임 애니메이션에 익숙하신 분들은 이런 의문이 들거에요.

그럼 도대체 타임라인기반 애니메이션은 몇 FPS로 렌더링되는 거죠?

답은 무책임해보이지만 '알 필요 없다 '에요. 왜냐면 FPS는 현재 시스템 상황에 맞춰 실버라이트 런타임이 자동으로 계산한 결과물일 수밖에 없기 때문이죠. 그래서 FPS가 딱 정해졌다고 말할 수는 없어요. 다만 실버라이트 런타임은 자신의 현재 렌더링 FPS를 브라우저의 상태 표시줄에 표시할 수 있는데요, 방법은 MSDN의 EnableFramerateCounter실버라이트 성능향상 팁의 마지막 예제 코드를 보시고, 이 글 마지막의 샘플 프로젝트도 한번 보세요. 참고로 이 방법은 인터넷 익스플로러에서만 동작하고 보안설정에서 '스크립팅->스크립트를 통해 상태 표시줄 업데이트 허용'을 '사용'으로 체크하셔야 해요.

애니메이션의 집합, 스토리보드storyboard

실버라이트는 또한 시간의 흐름의 기준이 되는 타임라인 아래에 동시에 진행되는 여러개의 애니메이션을 올려 놓을 수 있는 병렬 타임라인PararellTimeline이란 개념을 제공해요. 바로 이 병렬 타임라인을 구현하는 클래스가 블렌드에서 익숙하게 사용하던 스토리보드storyboard에요.

스토리보드는 스스로가 하나의 타임라인인데요, 즉 시작 시점과 지속 시간을 가지고 있고 이 시간의 흐름이 스토리보드에 올라갈 여러개의 애니메이션의 공통된 기준이 되는 거죠. 스토리보드에 올라간 애니메이션은 각자 자신이 해야할 명확한 일 -어떤 개체(Name)의 어떤 속성(Property)을 어디에서(From) 얼마까지(To) 언제 시작하여(BeginTime) 얼마동안(Duration) 변경할 것인가- 에 대한 정의를 가지고 있고 스토리보드는 이 애니메이션들의 시작과 중지를 제어하는 메서드를 제공해요.

스토리보드가 시작되면 각 애니메이션은 자신이 정의하고 있는 시작 시간과 지속 시간을 스토리보드의 타임라인에 맞춰서 렌더링 동작을 수행하게 되고 애니메이션이 끝날 때까지 개발자는 이 중간 과정에 어떤 일이 벌어지는지 알 수 없어요. 그래서 기존의 프레임 기반의 애니메이션에 익숙한 분이시라면 굉장히 답답함을 느낄 수도 있겠지만 저는 오히려 이러한 고수준의 추상화가 작업을 상당히 단순하게 만들어준다고 생각해요. 그것이 바로 개체 지향이 추구하는 방향이기도 하겠죠.

프레임 애니메이션 VS 타임라인 애니메이션

지금까지 간단하게 실버라이트에서 구현할 수 있는 프레임 애니메이션과 타임라인 애니메이션에 대해 알아봤는데요, 그래서 과연 어떤 모델을 사용하는게 더 좋은 건지 따져봐야겠죠? 이 두가지 모델을 비교하기 위한 몇 가지 샘플을 준비했어요. 먼저 말씀드릴건 저는 프레임 애니메이션을 그다지 많이 해보지 않았고 그래서 프레임 애니메이션에서 아주 초보적으로 흔하게 사용되는 로직도 잘 몰라요. 때문에 일부 프레임 애니메이션의 코드는 매우 비효율적으로 작성되었을 수도 있으니 더 좋은 방법을 알고 계신 분께서는 조언을 해주시기 바래요. 또 이 샘플들의 자세한 설명이나 분석은 다음 기회로 미룰께요.

전체 다운로드


샘플) 등가속도로 운동하는 개체

샘플) 자유 낙하하는 개체

샘플) 자연스러운 가속을 받는 개체

샘플) 동적인 애니메이션과 사용자 정의 컨트롤

이런 단순하고 단편적인 애니메이션은 사실 어느쪽 모델로 해도 별로 관계 없을거에요. 하지만 코드를 살펴보고 원리를 생각해보면 이 두 모델이 가진 장단점을 비교해볼 수는 있죠.

구분 프레임 애니메이션 타임라인 애니메이션
XAML로의 표현 불가능 가능
코딩의 복잡도 복잡 비교적 단순
속성 제어의 정밀도 정밀 단순
동작 효율 높음 (단, 코딩 상태에 따라 크게 차이가 남) 보통 (최소한의 노력으로 좋은 효율을 얻을 수 있고 단순반복적인 움직임의 효율은 매우 높음)
강점 상태의 복잡한 변화를 정밀하게 제어할 수 있고 특히 다수 개체의 상호 연관된 상태 변화를 제어하는데 유용 비교적 단순한 변화를 최소한의 노력으로 표현할 수 있고 특히 다수 개체의 독립적인 상태 변화를 제어하는데 유용하고 XAML을 통한 협업이 유리
약점 여러 종류의 애니메이션을 하나의 시간축에 통합하기 어렵고 시간 단위로 제어하기 어려움 동적으로 복잡하게 변하는 상태를 제어하기 어렵고 타임라인만으로는 개체끼리의 충돌과 같은 상태 간섭을 검출하기 힘듬

타임라인 애니메이션의 최대 장점은 바로 XAML로 표현이 가능하다는 것이라고 할 수 있어요. 애니메이션의 동작조차 XAML로 단순하게 선언이 될 정도로 잘 추상화 되어 있고 XAML을 통해 디자이너와 개발자와의 협업이 좀 더 자연스럽게 끊김없이 이루어질 수 있다는 거죠. 또한 사용되는 개념이 사람이 이해하기 쉽고 직관적으로 구성되어 있어서 조금만 훈련을 하면 매우 빠르게 작업이 가능해요. 반면 최대의 약점은 게임에서 흔하게 사용되는 개체끼리의 정확한 충돌collision검출이 어렵다는 점인 것 같아요.

결론

실버라이트는 프레임 단위의 전통적인 애니메이션 모델을 구현할수도 있지만 보다 직관적이고 디자이너와 개발자와의 협업이 가능한 타임라인 애니메이션을 사용하는 것이 일반적인 움직임을 표현할 때에 매우 효과적이에요. 지금은 이런 모델이 많이 낯설고 자료도 부족하지만 차근차근 연구해보면 더 효율적인 애니메이션을 구사할 수 있다고 생각해요.

참고


신고
Posted by gongdo


티스토리 툴바