모션의 원칙

마케팅 페이지, 소셜 에셋, 브랜드 비디오 및 프레젠테이션 전반에 걸쳐 모션은 아이디어에 생명을 불어넣는 방법입니다. 모션은 리듬, 사운드, 시퀀싱을 사용하여 시선을 유도하고 의미를 형성함으로써 디자인이 시간에 따라 펼쳐지게 합니다.

우리는 Figma의 모션 디자이너인 Chad Colby, Ben Hill, Gilles Desmadrille에게 모션의 원칙, 스토리텔링의 가능성을 확장하는 방법, 그리고 AI가 그들의 작업 방식에 어떤 변화를 주는지 설명해 달라고 요청했습니다.

Anja L.

그래픽 디자인과 모션 디자인의 가장 큰 차이점은 무엇인가요?

Ben H.

그래픽 디자인에서는 모든 것이 시간 속에 얼어붙은 순간들을 통해 전달됩니다. 모션은 그러한 제약을 없애고 리듬, 페이싱, 변화, 캐릭터를 도입합니다. 기반이라 할 수 있는 핵심적인 명확성과 의도는 동일하게 유지됩니다.

Gilles D.

우리는 여러 가지 프레임에 따라 더 많이 생각합니다. 스토리의 모든 요소를 단일 이미지에 압축하려 하는 대신, 더 쉽게 이해할 수 있도록 '먼저 이것, 그다음 저것'과 같이 분할합니다.

Chad C.

이는 스토리를 전달하거나 아이디어를 소통하기 위해 모션에서 시간이라는 요소를 어떻게 활용하는지에 대한 것입니다. 이징과 타이밍을 사용하여 감정을 불러일으키거나 전달하려는 내용을 어떻게 명확히 표현할까요? 이는 사운드와 동기화되는 방식과도 깊은 연관이 있습니다. 음악을 생각할 때 비트가 구성되는 방식, 즉 모든 것이 모션과 마찬가지로 타이밍입니다.

Ben H.

저는 항상 사운드와 이미지가 결합하여 부분의 합보다 더 큰 무언가를 만들어내는 방식에 경외감을 느낍니다. 뇌는 당신이 미처 계획하지 못했던 연결을 만들어냅니다. 그것은 제가 사물에 접근하는 방식의 꽤 기본적인 토대입니다. 어떤 것들은 운에 맡기고, 그러한 즐거운 우연에 마음을 열어두는 것이죠.

Anja L.

무언가가 어떻게 움직여야 하는지 결정하기 위한 레퍼런스는 어디서 찾나요?

Gilles D.

가장 기본적인 것은 물리학을 이해하는 것이라고 생각합니다. 모션은 현실 세계에서 사물이 움직이는 방식에 뿌리를 두고 있습니다. 튀어 오르는 공을 애니메이션으로 만들거나 프롬프트를 작성한다고 가정해 보겠습니다. 매우 빠르게 시작해서 다시 튀어 오르고, 정점에 도달할 때 느려집니다. 그런 다음 다시 떨어지며 튕길 때마다 높이가 낮아집니다. 그 느낌을 포착하는 것이 정말 중요합니다.

Ben H.

오로지 다른 모션 작업에서만 영감을 찾는다면, 예상 가능한 트렌드에 빠질 가능성이 높습니다(튀어 오르는 공과 직사각형만으로는 한계가 있죠). 자연의 움직임, 영화의 스토리텔링 장치와 편집 기법, 또는 예술과 디자인의 제스처 형태에서 영감을 얻는다면 남들과 차별화될 것입니다.

Gilles D.

결국 사람들은 왜 그런지 설명하지 못하더라도 모션이 "좋다"고 느껴지는 때를 포착할 겁니다. 디자인은 더 주관적입니다. 현실 세계와 모션의 관계가 그러한 차이를 만듭니다.

Anja L.

현실 세계에서 보는 것을 모션이 주는 느낌으로 어떻게 변환하나요?

Gilles D.

가장 큰 요소는 이징이라고 생각합니다. 이는 타이밍과 사물이 자리를 잡는 방식을 설명하는 용어입니다. 또 다른 하나는 매치 컷(match cut)입니다. 한 장면에서 다른 장면으로 넘어갈 때 동일한 움직임을 통해 연결하는 것이죠. 느리게 시작해서 빠르게, 다시 느리게 가다가 가장 빠른 지점에서 하드 컷(hard cut)을 하면 결과적으로 매끄러운 전환처럼 느껴집니다. 전환(Transition)은 우리가 모션을 생각하는 방식에서 큰 부분을 차지합니다. 전환은 이야기의 각기 다른 흐름을 연결하는 핵심으로, 모든 것이 응집력 있고 통일된 느낌을 주는 데 도움이 됩니다. 예를 들어, 당사의 많은 출시 비디오는 한 기능의 여러 사용 사례를 보여주지만 여전히 하나의 연속적인 경험처럼 느껴져야 합니다. 따라서 시청자의 몰입을 지속적으로 유지하기 위해 전환과 적절한 컷을 사용하여 모멘텀과 리듬을 유지합니다.

Ben H.

우리는 움직임의 페이스와 사물이 소통하는 방식에 대해 많은 이야기를 나눕니다. 무언가를 진정으로 인상 깊게 만드는 스토리 아크나 커다란 크레센도의 순간은 무엇일까요? 그런 다음 키프레임 곡선, 프레임 속도 및 표현식(JavaScript 코드 조각)에 깊이 파고들어 모션의 디테일을 정밀하게 조정합니다.

Chad C.

더 넓은 그룹에 작업물을 프레젠테이션할 때, 모션의 아이디어를 어필하기 위해 많은 음향 효과를 사용합니다. 어떤 통화에서는 "이게 왼쪽에서 오른쪽으로 이동할 거예요"라고 말할 때는 잘 이해하지 못하다가 누군가 "'휙!' 하고 갈 거예요"라고 말해야 이해하는 경우도 있었습니다.

Anja L.

모션이 다른 디자인 업무 흐름과 더 통합될 수 있는 가장 큰 기회는 어디에 있다고 보십니까?

Chad C.

캔버스에서 디자인 작업을 하면서 동시에 애니메이션을 테스트하고 실시간으로 효과가 있는 것과 없는 것을 확인할 수 있다는 생각은 큰 변화입니다. 이전에는 여러 도구와 플랫폼 사이를 이동해야 했습니다. 이제 모든 것이 멀티플레이어 캔버스에서 이루어질 수 있어, 사람들이 더 빠르게 움직이고 작업할 수 있으며 디자인과 모션이 함께 작동하는 기준을 높여 줍니다.

Ben H.

모션은 직관적으로 다가갑니다. 모션은 말로 설명할 수 없는 것을 설명하며 브랜드도 이를 알고 있습니다. 훌륭한 모션 작업에 대한 욕구가 계속해서 커지는 이유이기도 합니다. 동시에 모션 작업은 시간이 매우 많이 소요되므로 모션 팀이 디자인 속도에 맞춰 동일한 방식으로 반복 작업하기가 것이 어렵습니다. 하지만 디자인과 애니메이션을 하나의 소프트웨어에서 작업하는 것은 정말 흥미롭습니다. 어떤 기회의 문이 열릴지 지켜보는 것도 재미있을 것입니다.

Gilles D.

저를 설레게 하는 것은 평소라면 모션에 관심이 없었을 많은 사람들이 모션을 발견하거나 그 매력에 빠지게 될 것이라는 점입니다. 저에게 일어난 일이 바로 그것입니다. 제가 모션 디자이너가 되고 싶어 하는지 전혀 몰랐지만, 몇 가지 도구를 다뤄보고 깨달았습니다. '단일 프레임에서 작업하는 것보다 훨씬 멋지잖아.'

Chad C.

모션은 항상 사람들에게 마법처럼 느껴졌는데, 그 이유 중 하나는 다른 분야의 디자이너보다 모션 디자이너의 수가 적기 때문입니다. 이제 한 명의 모션 디자이너를 기다리는 대신 더 많은 사람들이 초기에 기여하고 아이디어를 더 빠르게 진전시킬 수 있습니다.

Anja L.

AI와 함께 환경이 어떻게 진화할 것으로 보시나요? 기대되는 점은 무엇인가요? 우려되는 점이 있나요?

Chad C.

After Effects에서 모션은 속성을 제어하고 시스템을 구축하기 위해 표현식과 스크립트를 추가하는 것을 의미하는 경우가 많았으므로 본질적으로 코딩을 하는 것과 같았습니다. 제가 처음 시작할 때는 대부분의 애니메이터가 코딩을 할 줄 몰랐기 때문에 프로젝트에 복사하고 붙여넣을 표현식이 담긴 스프레드시트에 의존했습니다. 이제 모션 프롬프팅이 이를 바꿔놓습니다. 기술적인 측면을 다루면서 느린지, 빠른지, 튕기는 느낌인지 등 아이디어를 빠르게 스케치할 수 있습니다. 무언가 코드로 정의되고 뒷받침되면 어디서나 재사용할 수 있습니다. 이는 획기적 발전입니다.

Ben H.

많은 사람들이 단순히 모션을 위한 화려한 모션을 만들겠지만, 어떤 사람들은 사용자와 소통하고 가이드하기 위해 더 사려 깊게 모션을 사용할 것입니다. 기술, 완성도, 의도 및 절제가 차별화 요소가 될 것입니다.

Chad C.

시간이라는 도구와 그것이 가진 의도를 통제하는 것이 필수가 될 것입니다. 시간이 바로 당신이 디자인에 활용할 수 있는 새로운 도구이자 요소라는 것을 이해해야 합니다. 아무런 감정도 불러일으키지 않거나 아무 의미도 전달하지 않고 그저 움직이기만 한다면, 사실상 디자인 위에 필터를 씌우는 것일 뿐입니다.

Gilles D.

좋은 모션을 만드는 것은 아주 쉬워지겠지만, 기본적인 모션 원칙을 이해하지 못하면 훌륭한 모션을 만들기는 어려울 것입니다. 사람들은 아주 오랫동안 이 일을 해왔습니다. 100년 동안 유지되어 온 것들이 있는데, 거기에는 다 이유가 있습니다. 기술이 발전함에 따라 이러한 기초적인 원칙을 유지하는 것이 중요해질 것입니다. 그것이 사물을 인간답게 유지하는 요소입니다.

This article was featured in our annual print magazine, Start Anywhere. Explore the digital version, or purchase a copy.