움직이는 원칙 | Figma 블로그 (새 탭에서 열림)
모션 디자인은 정적인 그래픽에 시간, 리듬, 속도, 소리, 순서를 더해 의미와 감정을 전달하는 작업이다. 좋은 모션을 만들려면 물리적 움직임을 이해하고, 타이밍과 이징을 활용해 이야기를 단계적으로 보여줘야 한다. 또한 자연·영화·예술 등 다양한 분야에서 움직임의 영감을 얻고, 우연히 생기는 조화까지 열린 태도로 받아들이는 것이 중요하다. ## 그래픽 디자인과 모션 디자인의 차이 - 그래픽 디자인은 정지된 한 장면 안에서 메시지를 전달한다. - 모션 디자인은 시간의 흐름을 활용해 다음 요소를 추가한다. - 리듬과 페이싱 - 변형과 전환 - 움직임의 성격과 캐릭터 - 소리와 이미지의 동기화 - 모든 내용을 한 화면에 담기보다 여러 프레임으로 나누어 “먼저 이것, 다음에 저것”의 순서로 보여주면 이야기를 더 쉽게 이해시킬 수 있다. - 모션의 핵심은 움직임 자체보다 시간 요소를 사용해 아이디어와 감정을 전달하는 데 있다. ## 타이밍, 이징, 사운드의 역할 - 이징과 타이밍은 움직임의 감정과 의도를 결정한다. - 음악의 박자처럼 모션도 속도와 간격의 구조를 가진다. - 이미지와 소리가 결합하면 각각의 요소를 넘어선 새로운 의미와 연결이 만들어진다. - 설계자가 모든 결과를 완벽히 통제하기보다, 사운드와 이미지가 만나며 생기는 우연한 효과와 ‘행복한 실수’를 받아들이는 태도도 창작의 중요한 부분이다. ## 물리학에서 찾는 움직임의 기준 - 현실의 움직임은 모션 디자인의 기본 참고점이다. - 예를 들어 공이 튀는 움직임은 다음과 같은 물리적 특징을 가진다. - 처음에는 빠르게 움직인다. - 위로 올라갈수록 속도가 느려진다. - 다시 떨어진다. - 반복할 때마다 튀어 오르는 높이가 낮아진다. - 이런 가속·감속과 에너지의 변화를 포착해야 움직임이 자연스럽고 설득력 있게 느껴진다. - 관객은 움직임이 왜 좋은지 설명하지 못해도 현실의 경험을 바탕으로 자연스러움과 어색함을 직관적으로 판단한다. ## 다양한 분야에서 얻는 영감 - 기존 모션 디자인만 참고하면 유행하는 표현을 반복하기 쉽다. - 자연의 움직임에서는 생동감과 물리적 설득력을 얻을 수 있다. - 영화의 스토리텔링과 편집 기법에서는 장면 전환과 서사 구성 방식을 배울 수 있다. - 예술과 디자인의 제스처, 형태, 움직임은 차별화된 표현을 만드는 데 도움이 된다. - 익숙한 공이나 사각형 애니메이션을 넘어 다양한 시각적·서사적 자원을 활용해야 독창적인 결과를 만들 수 있다. ## 모션의 핵심 원칙 - **Ease in / Ease out**: 움직임이 시간에 따라 가속하거나 감속하는 방식 - **Anticipation**: 앞으로 일어날 동작을 예고하는 준비 동작 - **Overshoot**: 목표 지점을 약간 지나친 뒤 원래 위치로 돌아오는 움직임 - **Follow-through**: 주된 움직임이 끝난 뒤에도 이어지는 보조 움직임 - **Hold**: 관객이 방금 일어난 일을 인식할 수 있도록 잠시 멈추는 구간 - **Settle**: 대상이 최종 위치에 도달한 뒤 안정되는 미세한 움직임 ## 전환으로 이야기를 연결하기 - 이징은 움직임의 속도뿐 아니라 장면이 자연스럽게 정착하는 느낌까지 결정한다. - **Match cut**은 서로 다른 장면을 같은 움직임이나 형태로 연결하는 편집 방식이다. - 느림에서 빠름으로, 다시 느림으로 속도를 변화시킨 뒤 가장 빠른 순간에 장면을 전환하면 두 장면이 매끄럽게 이어질 수 있다. - 전환은 이야기의 각 박자를 연결하고 전체 흐름을 하나로 묶는 역할을 한다. 실무에서는 먼저 전달하려는 메시지와 감정을 정한 뒤, 현실의 물리 법칙을 참고해 타이밍과 이징을 설계하는 것이 좋다. 여기에 자연·영화·음악 등 다양한 분야의 움직임을 결합하면 더 자연스럽고 독창적인 모션을 만들 수 있다.
