영상 튜토리얼: Figma에서 배너에 애니메이션을 넣고 HTML로 내보내기(영어)
Figma에서 바로 게재할 수 있는 HTML 배너에 애니메이션을 넣고 몇 초 만에 내보내는 방법을 보여 주는 영상이에요.
애니메이션 선택하기
Bannerify에는 키프레임 기반의 미리 정의된 애니메이션이 수십 가지 들어 있으며, 5가지 카테고리로 나뉘어 있어요.
- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans
등장 애니메이션을 설정하려면 Bannerify 타임라인에서 애니메이션을 넣을 레이어에 마우스를 올리고 위쪽 선택 상자를 클릭하세요. 애니메이션 목록을 스크롤해 애니메이션 이름을 클릭하면 레이어에 적용돼요. 새 애니메이션이 적용된 배너 미리보기가 바로 업데이트돼요.
레이어에서 애니메이션 제거하기. 레이어에 애니메이션을 넣고 싶지 않다면 No Entry Animation 또는 No Exit Animation을 선택하거나, Figma 레이어 이름 앞에 locked- 접두사를 붙이세요(예: locked-RectangleBackground). 이렇게 하면 애니메이션이 추가되지 않고, 플러그인 타임라인의 애니메이션 선택 상자도 비활성화돼요.
타임라인에서 배너 애니메이션 미리 보기
Play 아이콘 버튼을 클릭하면 배너의 애니메이션을 미리 볼 수 있고, Pause 아이콘 버튼을 클릭하면 언제든 타임라인을 일시 정지할 수 있어요. Restart 아이콘 버튼을 클릭하면 애니메이션을 처음부터 다시 재생해요.
배너 위의 시간 눈금자를 클릭하거나 드래그하면 애니메이션을 원하는 지점으로 이동하며 볼 수 있어요. 공유 재생 헤드는 모든 배너의 타이밍 트랙과 맞춰져 있어요. 눈금자가 표시된 배너 헤더에서도 이동할 수 있어요.
+, −, 확대/축소 슬라이더를 사용하거나 눈금자나 타이밍 트랙 위에서 트랙패드를 두 손가락으로 핀치하면 100%~1000% 범위로 확대/축소할 수 있어요. 확대한 상태에서는 눈금자 아래의 둥근 파란색 스크롤바 핸들을 드래그해 좌우로 이동하세요. Fit을 클릭하면 타임라인 전체가 다시 보여요. 이 컨트롤은 보기만 바꾸며 애니메이션 타이밍이나 내보내기 길이는 바꾸지 않아요. 전체 탐색 컨트롤은 타임라인 확대/축소 및 스크롤을 참고하세요.
더 정밀하게 편집하려면 스냅, 레이어 필터, 마커, 재사용 가능한 모션 시퀀스를 사용하거나, 전환 효과를 조정하는 동안 작업 영역을 반복 재생하세요.
타임라인 설정
헤더에서 Timeline Settings를 클릭하세요. 패널은 General 탭으로 열리며 4개의 탭이 있어요.
| 탭 | 컨트롤 |
|---|---|
| General | 타임라인 길이, Magic Delays, Magic Speeds |
| Timeline Tools | 미리보기 범위 반복 재생, 이름 있는 마커 추가 |
| Motion Sequences | 조합된 애니메이션 저장 및 재사용 |
| Sync Timings | 배너 크기 간 타이밍 복사 |
Snap, 레이어 필터, Zoom To Selection, 그룹 접기 컨트롤은 Timeline Settings → Timeline Tools에 있어요.
편집 내용 검토 및 복원
실행 취소/다시 실행 화살표 옆의 History를 클릭하면 타임라인 편집 기록을 살펴볼 수 있어요. 단계를 선택하면 뒤나 앞으로 이동하며, Current가 현재 상태를 나타내요. 뒤로 이동한 뒤 새로 편집하면 이후 기록은 대체돼요.
타임라인 길이 조정하기
Timeline Settings → General을 열고 Total Timeline Length에서 길이를 고른 다음 Update Timeline Length를 클릭하세요. 1초부터 3분까지 고를 수 있어요. 변경 사항은 모든 배너에 적용되며, 짧아진 타임라인을 넘는 타이밍 범위는 맞게 조정돼요.
Undo로 이전 길이와 타이밍을 복원하거나 History에서 이전 단계를 선택할 수 있어요. 타임라인 길이 조정을 참고하세요.
퇴장 애니메이션 추가하기
퇴장 애니메이션은 등장 애니메이션과 같은 방법으로 추가해요. 위쪽 선택 상자 대신 아래쪽 선택 상자를 클릭해 레이어의 퇴장 애니메이션을 선택하세요.
레이어에 설정한 퇴장 애니메이션은 반드시 “등장” 애니메이션이 끝난 뒤에 시작되도록 하세요. 그렇지 않으면 두 애니메이션이 겹치면서 동시에 충돌하는 전환이 일어나 문제가 생겨요.
애니메이션 속도와 타이밍 조정하기
레이어 타임라인 바의 왼쪽/오른쪽 가장자리를 클릭한 채로 드래그하면 애니메이션 길이와 시작/끝 지점을 조정해 속도와 지연 시간을 바꿀 수 있어요.
레이어 타임라인 바의 가운데를 클릭한 채로 왼쪽이나 오른쪽으로 드래그하면 타임라인에서 애니메이션 위치를 옮길 수 있어요.
키보드로 정확한 타이밍 숫자 입력하기. 타이밍 바를 쓰고 싶지 않다면 타임라인 레이어의 두 번째 값을 클릭하고 키보드로 새 숫자(예: 1.5)를 입력해 속도와 지연 시간을 초 단위로 설정할 수도 있어요.
애니메이션 반복 재생
특정 레이어의 애니메이션을 배너 타임라인이 끝난 뒤에도 무한히 반복하고 싶다면, 선택한 애니메이션 옆의 Loop 토글을 켜세요. 반복 재생에 잘 어울리는 아주 짧은 애니메이션(예: “Heartbeat”, “Flicker”, “Pulse”)에 유용해요.
애니메이션 복사/붙여넣기
Copy와 Paste 버튼을 사용하면 한 타임라인 레이어의 애니메이션을 다른 레이어로 빠르게 복사할 수 있어요. Copy 버튼을 클릭해 애니메이션을 복사한 다음, 다른 레이어에서 Paste 버튼을 클릭해 붙여 넣으세요.
복사한 애니메이션을 여러 레이어에 붙여 넣기 일괄 적용 기능을 사용하면 복사한 애니메이션을 여러 레이어에 한꺼번에 적용할 수도 있어요.
애니메이션 일괄 적용하기
여러 레이어에 애니메이션을 한 번에 빠르게 적용하려면 각 레이어 이름 옆의 체크박스로 레이어를 선택하고(또는 Quick Select Layers 기능 사용), 플러그인 창 아래쪽에서 올라오는 영역에서 애니메이션을 설정하세요. 애니메이션이 마음에 들면 Apply Animations to Selected Layers 버튼을 클릭해 선택한 모든 레이어에 새 애니메이션을 적용하세요.
비슷한 레이어 빠르게 선택하기
같은 요소나 레이어가 들어 있는 배너가 여러 개인 배너 세트로 작업한다면, Bannerify 헤더의 Quick Select Layers 메뉴를 사용해 모든 배너에서 비슷한 레이어를 자동으로 선택할 수 있어요. 레이어를 하나하나 체크하는 대신 쓰기 좋은 방법이에요.
Quick Select Layers 사용 예시 예를 들어 모든 배너에 CTA Button이라는 레이어가 있다면, 그 옵션을 클릭해 CTA Button 레이어를 모두 자동으로 체크할 수 있어요. 그러면 모든 배너의 해당 레이어에 애니메이션을 동시에 일괄 적용할 수 있어요.
Magic Delays와 Magic Speeds 사용하기
Timeline Settings → General을 열고 Magic Delays나 Magic Speeds에서 값을 고르세요. Apply To All Entry Animations 또는 Apply To All Exit Animations를 클릭하면 모든 배너에 적용돼요.
Magic Delays
0.1초부터 0.5초까지 시차를 둔 지연 시간을 고르세요. 레이어마다 애니메이션 길이는 그대로 유지한 채 지연 시간이 차례로 늘어나요.
Magic Speeds
0.1초부터 1초까지 길이를 고르세요. 타임라인 안에 맞추기 위해 앞당겨야 하는 경우가 아니면 시작 시간은 그대로예요.
적용할 때마다 기록 단계가 하나씩 생겨요. Undo, Redo 또는 History 패널로 변경 사항 사이를 이동하세요. Magic Delays와 Magic Speeds를 참고하세요.