UI 모프 애니메이션 디자인

하나의 도형이 영상 전체를 이끄는 방식

영상은 120 BPM으로 14초 동안 이어지며, 소스 노트는 이를 7마디로 나눕니다. 하나의 도형이 Generate 버튼에서 시작해 로더, 체크, 다이내믹 아일랜드, 음악 플레이어, 볼륨 슬라이더, 토글, 탭 인디케이터, 차트, 커맨드 팔레트, 토스트로 바뀐 뒤 다시 버튼으로 돌아옵니다.

그 대가로 모든 상태는 같은 본체의 크기와 둥글기를 바꾸는 것만으로 이전 상태에서 도달할 수 있어야 합니다. 이런 형태 변화에 맞지 않는 콘텐츠는 빼거나 다시 디자인해야 합니다.

플레이어, 탭, 팔레트 프레임 읽기

캡처한 세 프레임은 같은 도형이 얼마나 다르게 보일 수 있는지 보여 줍니다. 플레이어에서는 검은색 둥근 카드에 그라데이션 타일, “motion study 02”, 0:49에 −2:09가 남은 스크럽 바, 이전·재생·다음 아이콘이 담깁니다. 탭 프레임에서는 흰색 필 안에 Day, Week, Month가 있고 Day 뒤에 검은 인디케이터가 있습니다.

팔레트에서는 입력된 단어 “frame”이 두 개의 결과 “Frame rate · 60fps”와 “Every frame is code”로 이어지며, 첫 번째 결과가 강조됩니다.

01

읽기 쉬운 재생 상태

경과 시간과 남은 시간 레이블은 진행 바 아래에 놓입니다. 이는 14초 영상 안의 예시 인터페이스 콘텐츠일 뿐 쇼케이스 영상의 실제 재생 시간이 아닙니다. 플레이어를 더 작은 캔버스에 맞출 때도 두 레이블을 선명하게 유지하세요.

02

탭 인디케이터는 움직이는 오브젝트

커서가 Month 위에 있는 동안 검은 Day 필은 흰색 트랙 안에 머뭅니다. 인디케이터가 별도의 도형이기 때문에 강조를 바꿔치기하는 대신 레이블 사이를 미끄러지고 늘어날 수 있습니다.

03

영상과 맞아떨어지는 팔레트 텍스트

“Frame rate · 60fps”와 “Every frame is code”라는 결과는 작품 자체를 이야기합니다. 이 발상은 그대로 쓰되, 문구는 자신의 제품 어휘로 바꾸세요.

시간 기반 구성과 그 트레이드오프

소스 노트는 마스터 타임라인 시간으로 프레임 전체를 그리는 단일 render(t) 함수를 설명합니다. 눈에 보이는 모든 값은 이징, 스프링, 키프레임을 쓰는 t의 순수 함수이며 프레임 사이에 상태가 이어지지 않습니다. 그래서 뒤로 탐색해도 똑같은 프레임이 재현됩니다.

덕분에 내보내기는 예측 가능해지지만 제작자에게 더 많은 것을 요구합니다. 이벤트 핸들러라면 간단했을 호버나 타이핑 같은 상호작용도 시간에 맞춘 키프레임으로 작성해야 합니다.

1. 시계는 하나만 두기

   GSAP 마스터 타임라인이 유일한 시계입니다. 레이어는 자체 타이머를 돌리지 않고 이 타임라인의 현재 시간을 읽습니다.

2. 변화마다 스프링 합산하기

   각색 노트는 변화마다 스프링을 합산하라고 권합니다. 그러면 겹치는 움직임이 다시 시작되지 않고 자연스럽게 섞입니다.

3. 모든 것을 커서가 일으키게 하기

   모든 상태 변화에는 그 앞에 포인터 동작이 필요합니다. 이 규칙이 없으면 모프는 상호작용이 아니라 장식으로 읽힙니다.

출처와 범위

이 작품은 X의 @twoclipping이 처음 게시한 모션 작품을 OpenDesign이 공식적으로 코드로 다시 만들고 각색한 것입니다. 공개된 작품을 바탕으로 코드로 재구성했으며, 14초 사운드트랙은 원본 오디오가 아닌 오리지널 스코어입니다. 크레딧은 사실에 따른 참조일 뿐 원작자의 보증을 의미하지 않습니다.

이는 렌더링된 모션 스터디이며 사용할 수 있는 인터페이스 제품이 아닙니다. 영상 속 플레이어, 차트, 팔레트는 입력에 반응하지 않습니다. 이 템플릿은 제안된 OpenDesign 영상 워크플로에서 나온 것이며, 사용 가능 여부는 설치된 버전에 따라 달라집니다.

내 제품에 맞게 모프 적용하기

노트는 SHAPE 정의의 상태와 그 내용을 교체하되 세 가지 규칙을 유지하라고 제안합니다. 컷이 없는 하나의 도형, 변화마다 합산되는 스프링, 모든 변화 뒤에 있는 커서입니다. 먼저 가장 보여 주고 싶은 제품 상태 다섯 가지를 나열한 뒤, 컨테이너가 작은 것부터 큰 것 순으로 배열하세요.

루프를 원한다면 첫 상태와 마지막 상태를 같게 유지하세요. 상태 간 크기 차이가 크면 중간 프레임이 늘어나 보이므로 그에 맞춰 템포를 늦추세요.