그룹과 중첩 레이어를 각각 따로 애니메이션하기

부모 그룹을 이동, 확대/축소, 회전, 페이드하는 동안 그 안의 중첩된 자식 레이어는 각자의 Bannerify 애니메이션을 재생하게 하세요.

영상 튜토리얼: Group Motion으로 그룹과 레이어를 각각 따로 애니메이션하기
단계별 튜토리얼 따라 하기(영어).

Bannerify는 부모 그룹과 그 안의 레이어를 동시에 애니메이션할 수 있어요. 예를 들어 그룹으로 묶은 자동차를 배너 가로질러 움직이면서 바퀴 레이어는 따로 회전시킬 수 있어요.

준비할 것 ​

  • 배너 디자인이 들어 있는 최상위 Figma 프레임
  • 안에 자식 레이어가 하나 이상 있는 부모 레이어
  • 따로 애니메이션할 자식 레이어마다 구분되는 이름

단계 ​

  1. Figma에서 관련된 레이어를 부모 그룹 하나에 넣으세요. 자동차 애니메이션이라면 Body, Wheel Left, Wheel Right가 들어 있는 Car 그룹을 만들 수 있어요.
  2. 다음 두 방법 중 하나로 Bannerify가 부모 그룹을 펼치게 하세요.
    • 부모 레이어 이름에 [expand]를 붙이세요(예: Car [expand]).
    • Bannerify를 열고 배너 타임라인 위쪽의 List 아이콘을 클릭한 다음, 부모 레이어 옆의 Arrow를 클릭하세요.
  3. 중첩 레이어 패널에서 펼친 부모 옆의 Keep Parent Animatable을 켜세요. 이 옵션은 기본적으로 꺼져 있어서, 기존의 중첩 레이어 설정은 이전처럼 자식 레이어만 애니메이션하는 동작을 유지해요.
  4. 중첩 레이어 패널을 닫으세요. Bannerify가 배너를 새로 고치고 드러난 자식 레이어를 타임라인에 추가해요.
  5. 타임라인에 자식 레이어와 함께 (Group Motion) 레이블이 붙은 별도의 부모 행이 있는지 확인하세요. 이 예시에서는 부모 행이 Car [expand] (Group Motion)으로 표시돼요.
  6. 공통 움직임은 Group Motion 행에 적용하세요. 예를 들어 Slide In Left를 적용해 자동차 전체를 배너 안으로 들어오게 하세요.
  7. 자식 행에는 각각 따로 애니메이션을 적용하세요. 예를 들어 바퀴마다 Rotate 360° 애니메이션을 적용하세요.
  8. Play All Banners를 클릭하거나 타임라인 스크러버를 사용해 합쳐진 결과를 미리 보세요.
  9. 평소처럼 배너를 내보내세요. 부모와 자식 애니메이션은 HTML, GIF, MP4, WebM 및 기타 canvas 기반 미디어 내보내기에서 합쳐져요.

Group Motion ​

Keep Parent Animatable을 켜면 Bannerify가 부모를 Animatable로 표시하고 타임라인에 별도의 Group Motion 행을 추가해요. 부모 행은 드러난 자식 레이어를 감싸는 모션 래퍼 역할을 해요. 부모에 적용한 이동, 확대/축소, 회전, 불투명도, 클리핑은 각 자식에 적용한 애니메이션과 합쳐져요.

Keep Parent Animatable을 끄면 자식 레이어는 펼쳐진 채 계속 애니메이션할 수 있지만, Bannerify가 부모 Group Motion 행을 추가하지 않아요. Bannerify는 부모 레이어마다 이 옵션을 기억해요.

여러 배너 크기에 같은 구조가 있다면 자식 레이어 이름을 명확하고 일관되게 지으세요. 그러면 Quick Select Layers로 일치하는 레이어를 선택해 애니메이션을 일괄 적용할 수 있어요.

둥근 마스크 안에서 사진 움직이기 ​

마스크를 적용한 그룹을 배너 안으로 밀어 넣으면서 그 안의 사진은 따로 움직이게 하려면 다음과 같이 하세요.

  1. Figma에서 사각형 하나를 그룹 전체의 마스크로 사용하세요. 마스크는 잘라 낼 모든 아트워크보다 아래에 두세요. 모서리마다 다른 모서리 반경을 사용할 수 있어요.
  2. Bannerify에서 마스크 그룹을 펼치고 Keep Parent Animatable을 켜세요.
  3. 그룹의 Group Motion 행에 Slide In Left를 적용하세요.
  4. 사진 행에는 Zoom Pan Right 같은 별도의 애니메이션을 적용하세요. 더 천천히 패닝하려면 지속 시간을 늘리세요.
  5. 배너를 미리 보고 내보내세요. 부모 애니메이션이 그룹 전체를 움직이는 동안 사진은 둥근 윤곽선 안에서 움직여요.

회전하지 않은 표준 모서리 사각형 마스크를 지원하며, 불투명 Alpha 마스크나 Vector 마스크를 사용할 수 있어요. 마스크 자체는 애니메이션 행이 되지 않아요. 마스크가 여러 개인 그룹, 일부 형제 레이어에만 적용된 마스크, 소프트 마스크나 휘도 마스크, 모서리 스무딩, 선, 효과가 있는 그룹은 하나의 이미지로 보이도록 접힌 상태로 두세요.

Figma Section 사용하기 ​

Use Figma sections as multi-scene banners를 켠 경우에도 같은 방법으로 설정할 수 있어요. 드러난 각 행에는 장면 번호가 붙고, 옵션을 켠 부모는 해당 장면 안에서 별도의 Group Motion 행으로 계속 사용할 수 있어요.

Figma Slot 레이어 ​

Bannerify는 배너 프레임 안의 Figma 슬롯 레이어(영어)도 지원해요. 슬롯 컨테이너는 중첩 레이어 그룹처럼 다뤄지며, Bannerify가 처음 불러올 때 펼쳐진 상태로 시작하므로 자식 레이어를 타임라인에서 바로 사용할 수 있어요.

Slot 레이어를 직접 접으면 배너를 새로 고칠 때 Bannerify가 그 설정을 기억해요.

그룹이나 자식 레이어가 보이지 않을 때 ​

  • 배너가 최상위 Figma 프레임이거나, 다중 장면 모드로 불러온 Section 안에 있는지 확인하세요.
  • 부모에 자식 레이어가 있고 Bannerify에서 펼쳐져 있는지 확인하세요.
  • 자식 레이어는 보이는데 부모 Group Motion 행이 없다면, 중첩 레이어 패널을 열고 부모 옆의 Keep Parent Animatable을 켜세요.
  • 배너를 불러온 뒤 부모 이름에 [expand]를 붙였다면 Refresh Banner Layers를 클릭하세요.
  • Figma에서 자식 레이어를 표시 상태로 두고, 펼친 부모 안에 들어 있는지 확인하세요.