이지(Easing)
ProtoPie의 이징 기능을 사용하여 현실적인 움직임으로 애니메이션을 향상시켜 보세요.
실제 세상에서는 물체가 갑자기 움직이기 시작하거나 멈추지 않습니다. 그렇기 때문에 프로토타입에 이징을 포함하여 자연스러운 애니메이션을 구현하는 것이 매우 중요합니다.
이징 함수를 통합하면 다음 예시처럼 디자인에 현실감과 자연스러운 움직임을 더해주어 시각적으로 매력적이고 몰입감 있는 전환 효과를 만들 수 있습니다.
이 예시에서 이징이 어떻게 사용되었는지 최신 모바일 게임 프로토타이핑 마스터클래스(Mobile Game prototyping masterclass)에서 확인해 보세요.
기본 이징 옵션
Linear (선형)
Linear 이징은 애니메이션이 진행되는 동안 가속이나 감속이 없습니다. 객체는 일정한 속도를 유지하며 부드럽고 균일하게 움직입니다.
Ease
Ease 이징은 전환의 가속과 감속을 제어하는 데 사용됩니다. 상태 간에 애니메이션되거나 전환되는 객체나 요소에 부드러움과 자연스러운 움직임을 더해줍니다.
Ease In (가속)
Ease In 이징은 전환의 시작 가속도를 제어하는 데 사용됩니다. 애니메이션이 점진적이고 부드럽게 시작되도록 하는 데 중점을 두며, 객체나 요소가 처음에는 느리게 시작했다가 애니메이션이 진행됨에 따라 속도를 얻습니다.
Ease Out (감속)
Ease Out 이징은 전환의 감속을 제어하는 데 사용됩니다. 애니메이션이 끝날 때 점진적이고 부드럽게 속도가 줄어들도록 하는 데 중점을 둡니다.
Ease In Out (가속 및 감속)
Ease In Out 이징은 부드럽고 균형 잡힌 전환을 만드는 데 사용됩니다. Ease In과 Ease Out 이징의 특성을 모두 결합하여 시작 부분에서는 점진적으로 가속되고, 중간 부분에서는 일정한 속도를 유지하며, 애니메이션 끝부분에서는 점진적으로 감속하도록 제어합니다.
Cubic Bezier (베지에 곡선)
Cubic Bezier 이징은 전환의 가속 및 감속을 정밀하게 제어하는 데 사용됩니다. 네 개의 점(고정점 두 개와 제어점 두 개)을 조정하여 커스텀 곡선을 정의할 수 있으므로, 유연하게 독특하고 복잡한 모션 효과를 만들 수 있습니다.
Spring (스프링)
Spring 이징은 스프링의 움직임을 시뮬레이션하는 데 사용됩니다. 물리적인 스프링이 늘어났다가 놓아질 때의 동작을 모방하여 전환에 역동적이고 탄력 있는 느낌(바운시 효과)을 더해줍니다.
커스텀 이징 옵션
커스텀 이징 프리셋 만들기
ProtoPie에서는 맞춤형 커스텀 이징 프리셋을 만들 수 있습니다. 자신만의 커스텀 이징을 만들려면 다음 단계를 따르세요.
기본 이징 목록에서 기본 이징 옵션을 하나 선택합니다.
"+" 버튼을 클릭하여 새 이징 프리셋을 추가합니다.
새로운 값을 입력하거나 조절 도점을 원하는 위치로 드래그하여 재생 시간과 사전 정의된 값을 수정합니다.
입력 영역 위를 더블 클릭하여 이징 프리셋의 이름을 바꿉니다.
새로 만든 이징 프리셋은 커스텀 이징 목록에 저장되어 향후 언제든지 간편하게 사용할 수 있습니다.
커스텀 이징 프리셋 내보내기 및 가져오기
새로운 커스텀 이징 프리셋을 만든 후, 로컴 컴퓨터에 .json 파일로 내보낼 수 있습니다. 이 파일에는 현재 커스텀 목록에 있는 모든 프리셋이 포함됩니다. 이 기능을 활용하면 팀원들과 간편하게 이징 프리셋을 공유할 수 있으며, 기기를 변경하는 경우를 대비해 나중에 사용할 수 있도록 백업해 둘 수 있습니다.
