---
url: "/ko/bannerify/animation/animating-banners.md"
description: "Figma 프레임을 Bannerify로 불러온 뒤, 플러그인의 타임라인 기능으로 배너의 모든 레이어에 애니메이션을 적용할 수 있어요."
---

# 배너에 애니메이션 넣기

> Figma 프레임을 Bannerify로 불러온 뒤, 플러그인의 타임라인 기능으로 배너의 모든 레이어에 애니메이션을 적용할 수 있어요.

### 영상 튜토리얼: Figma에서 배너에 애니메이션을 넣고 HTML로 내보내기(영어)

Figma에서 바로 게재할 수 있는 HTML 배너에 애니메이션을 넣고 몇 초 만에 내보내는 방법을 보여 주는 영상이에요.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## 애니메이션 선택하기 {#selecting-animations}

[Video](/assets/videos/bannerify/animation/select-animations.mp4)

Bannerify에는 키프레임 기반의 미리 정의된 애니메이션이 수십 가지 들어 있으며, 5가지 카테고리로 나뉘어 있어요.

- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans

**등장 애니메이션**을 설정하려면 Bannerify 타임라인에서 애니메이션을 넣을 레이어에 마우스를 올리고 **위쪽 선택 상자**를 클릭하세요. 애니메이션 목록을 스크롤해 애니메이션 이름을 **클릭**하면 레이어에 적용돼요. 새 애니메이션이 적용된 배너 미리보기가 바로 업데이트돼요.

> **Tip:** **레이어에서 애니메이션 제거하기**. 레이어에 애니메이션을 넣고 싶지 않다면 **No Entry Animation** 또는 **No Exit Animation**을 선택하거나, Figma 레이어 이름 앞에 **locked-** 접두사를 붙이세요(예: *locked-RectangleBackground*). 이렇게 하면 애니메이션이 추가되지 않고, 플러그인 타임라인의 애니메이션 선택 상자도 비활성화돼요.

## 타임라인에서 배너 애니메이션 미리 보기 {#previewing-your-banner-animations-in-the-timeline}

[Video](/assets/videos/bannerify/animation/preview-banner.mp4)

**Play** 아이콘 버튼을 클릭하면 배너의 애니메이션을 미리 볼 수 있고, **Pause** 아이콘 버튼을 클릭하면 언제든 타임라인을 일시 정지할 수 있어요. **Restart** 아이콘 버튼을 클릭하면 애니메이션을 처음부터 다시 재생해요.

배너 위의 시간 눈금자를 클릭하거나 드래그하면 애니메이션을 원하는 지점으로 이동하며 볼 수 있어요. 공유 재생 헤드는 모든 배너의 타이밍 트랙과 맞춰져 있어요. 눈금자가 표시된 배너 헤더에서도 이동할 수 있어요.

**+**, **−**, 확대/축소 슬라이더를 사용하거나 눈금자나 타이밍 트랙 위에서 트랙패드를 두 손가락으로 핀치하면 **100%~1000%** 범위로 확대/축소할 수 있어요. 확대한 상태에서는 눈금자 아래의 둥근 파란색 스크롤바 핸들을 드래그해 좌우로 이동하세요. **Fit**을 클릭하면 타임라인 전체가 다시 보여요. 이 컨트롤은 보기만 바꾸며 애니메이션 타이밍이나 내보내기 길이는 바꾸지 않아요. 전체 탐색 컨트롤은 [타임라인 확대/축소 및 스크롤](/ko/bannerify/animation/animation-speed-timing#zoom-and-scroll-the-timeline)을 참고하세요.

더 정밀하게 편집하려면 [스냅, 레이어 필터, 마커, 재사용 가능한 모션 시퀀스](/ko/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline)를 사용하거나, 전환 효과를 조정하는 동안 [작업 영역을 반복 재생](/ko/bannerify/animation/previewing-animations#loop-a-work-area)하세요.

## 타임라인 설정 {#timeline-settings}

헤더에서 **Timeline Settings**를 클릭하세요. 패널은 **General** 탭으로 열리며 4개의 탭이 있어요.

| 탭 | 컨트롤 |
| --- | --- |
| **General** | 타임라인 길이, Magic Delays, Magic Speeds |
| **Timeline Tools** | [미리보기 범위 반복 재생](/ko/bannerify/animation/previewing-animations#loop-a-work-area), [이름 있는 마커 추가](/ko/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) |
| **Motion Sequences** | [조합된 애니메이션 저장 및 재사용](/ko/bannerify/animation/animation-speed-timing#save-and-reuse-a-motion-sequence) |
| **Sync Timings** | [배너 크기 간 타이밍 복사](/ko/bannerify/animation/animation-speed-timing#synchronise-timings-across-banner-sizes) |

**Snap**, 레이어 필터, **Zoom To Selection**, 그룹 접기 컨트롤은 **Timeline Settings → Timeline Tools**에 있어요.

## 편집 내용 검토 및 복원 {#review-and-restore-edits}

실행 취소/다시 실행 화살표 옆의 **History**를 클릭하면 [타임라인 편집 기록을 살펴볼](/ko/bannerify/animation/undo-redo) 수 있어요. 단계를 선택하면 뒤나 앞으로 이동하며, **Current**가 현재 상태를 나타내요. 뒤로 이동한 뒤 새로 편집하면 이후 기록은 대체돼요.

## 타임라인 길이 조정하기 {#adjusting-the-timeline-length}

[Video](/assets/videos/bannerify/animation/adjusting-timeline.mp4)

**Timeline Settings → General**을 열고 **Total Timeline Length**에서 길이를 고른 다음 **Update Timeline Length**를 클릭하세요. 1초부터 3분까지 고를 수 있어요. 변경 사항은 모든 배너에 적용되며, 짧아진 타임라인을 넘는 타이밍 범위는 맞게 조정돼요.

**Undo**로 이전 길이와 타이밍을 복원하거나 **History**에서 이전 단계를 선택할 수 있어요. [타임라인 길이 조정](/ko/bannerify/animation/timeline-length)을 참고하세요.

## 퇴장 애니메이션 추가하기 {#adding-exit-animations}

[Video](/assets/videos/bannerify/animation/exit-animation.mp4)

**퇴장 애니메이션**은 등장 애니메이션과 같은 방법으로 추가해요. 위쪽 선택 상자 대신 **아래쪽 선택 상자**를 클릭해 레이어의 퇴장 애니메이션을 선택하세요.

> **Note:** 레이어에 설정한 퇴장 애니메이션은 반드시 **“등장” 애니메이션이 *끝난 뒤에* 시작되도록** 하세요. 그렇지 않으면 두 애니메이션이 겹치면서 동시에 충돌하는 전환이 일어나 문제가 생겨요.

## 애니메이션 속도와 타이밍 조정하기 {#adjusting-animation-speeds-and-timings}

[Video](/assets/videos/bannerify/animation/adjust-speed.mp4)

레이어 타임라인 바의 왼쪽/오른쪽 **가장자리**를 **클릭한 채로 드래그**하면 애니메이션 길이와 시작/끝 지점을 조정해 속도와 지연 시간을 바꿀 수 있어요.

레이어 타임라인 바의 **가운데**를 **클릭한 채로** 왼쪽이나 오른쪽으로 **드래그**하면 타임라인에서 애니메이션 위치를 옮길 수 있어요.

> **Tip:** **키보드로 정확한 타이밍 숫자 입력하기**. 타이밍 바를 쓰고 싶지 않다면 타임라인 레이어의 두 번째 값을 클릭하고 키보드로 새 숫자(예: *1.5*)를 입력해 속도와 지연 시간을 초 단위로 설정할 수도 있어요.

## 애니메이션 반복 재생 {#looping-animations}

[Video](/assets/videos/bannerify/animation/loop-animation.mp4)

특정 레이어의 애니메이션을 배너 타임라인이 끝난 뒤에도 무한히 반복하고 싶다면, 선택한 애니메이션 옆의 **Loop** 토글을 켜세요. 반복 재생에 잘 어울리는 아주 짧은 애니메이션(예: “Heartbeat”, “Flicker”, “Pulse”)에 유용해요.

## 애니메이션 복사/붙여넣기 {#copy-pasting-animations}

[Video](/assets/videos/bannerify/animation/copy-paste.mp4)

**Copy**와 **Paste** 버튼을 사용하면 한 타임라인 레이어의 애니메이션을 다른 레이어로 빠르게 복사할 수 있어요. **Copy** 버튼을 클릭해 애니메이션을 복사한 다음, 다른 레이어에서 **Paste** 버튼을 클릭해 붙여 넣으세요.

> **Tip:** **복사한 애니메이션을 여러 레이어에 붙여 넣기** [일괄 적용](/ko/bannerify/animation/animating-banners#applying-bulk-animations) 기능을 사용하면 복사한 애니메이션을 여러 레이어에 한꺼번에 적용할 수도 있어요.

## 애니메이션 일괄 적용하기 {#applying-bulk-animations}

[Video](/assets/videos/bannerify/animation/bulk-animations.mp4)

여러 레이어에 애니메이션을 한 번에 빠르게 적용하려면 각 레이어 이름 옆의 체크박스로 레이어를 선택하고(또는 **Quick Select Layers** 기능 사용), 플러그인 창 아래쪽에서 올라오는 영역에서 애니메이션을 설정하세요. 애니메이션이 마음에 들면 **Apply Animations to Selected Layers** 버튼을 클릭해 선택한 모든 레이어에 새 애니메이션을 적용하세요.

## 비슷한 레이어 빠르게 선택하기 {#quick-selecting-similar-layers}

[Video](/assets/videos/bannerify/animation/quick-select.mp4)

같은 요소나 레이어가 들어 있는 배너가 여러 개인 배너 세트로 작업한다면, Bannerify 헤더의 **Quick Select Layers** 메뉴를 사용해 모든 배너에서 비슷한 레이어를 자동으로 선택할 수 있어요. 레이어를 하나하나 체크하는 대신 쓰기 좋은 방법이에요.

> **Tip:** **Quick Select Layers 사용 예시** 예를 들어 모든 배너에 **CTA Button**이라는 레이어가 있다면, 그 옵션을 클릭해 **CTA Button** 레이어를 모두 자동으로 체크할 수 있어요. 그러면 모든 배너의 해당 레이어에 애니메이션을 동시에 **일괄 적용**할 수 있어요.

## Magic Delays와 Magic Speeds 사용하기 {#using-magic-delays-and-magic-speeds}

[Video](/assets/videos/bannerify/animation/magic-timeline.mp4)

**Timeline Settings → General**을 열고 **Magic Delays**나 **Magic Speeds**에서 값을 고르세요. **Apply To All Entry Animations** 또는 **Apply To All Exit Animations**를 클릭하면 모든 배너에 적용돼요.

### Magic Delays {#magic-delays}

0.1초부터 0.5초까지 시차를 둔 지연 시간을 고르세요. 레이어마다 애니메이션 길이는 그대로 유지한 채 지연 시간이 차례로 늘어나요.

### Magic Speeds {#magic-speeds}

0.1초부터 1초까지 길이를 고르세요. 타임라인 안에 맞추기 위해 앞당겨야 하는 경우가 아니면 시작 시간은 그대로예요.

적용할 때마다 기록 단계가 하나씩 생겨요. **Undo**, **Redo** 또는 **History** 패널로 변경 사항 사이를 이동하세요. [Magic Delays와 Magic Speeds](/ko/bannerify/animation/magic-delays-speeds)를 참고하세요.