---
url: "/ko/bannerify/animation/selecting-animations.md"
description: "미리 정의된 수십 가지 키프레임 애니메이션 중에서 골라 배너 레이어에 적용하세요."
---

# 애니메이션 선택하기

> 미리 정의된 수십 가지 키프레임 애니메이션 중에서 골라 배너 레이어에 적용하세요.

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

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

## 애니메이션 {#animations}

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

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

> **Tip:** **Split Text 애니메이션 사용하기**. Bannerify에는 지원되는 텍스트 레이어를 글자, 단어, 줄 단위로 나눠 움직이는 전용 애니메이션 세트도 있어요. 설정 단계, 지원되는 폰트, 현재 주의 사항은 [Split Text 애니메이션](/ko/bannerify/animation/split-text)을 참고하세요.

> **Tip:** **Figma Motion 기본 애니메이션 사용하기**. 개별 레이어에서 **Figma Motion** 그룹의 감지된 애니메이션을 고르거나, **Batch Layer Actions** 등장 메뉴에서 **Apply Each Layer's Figma Motion**을 선택하세요. 하나 이상의 레이어에 Motion을 적용한 뒤 Figma의 기본 타이밍 오프셋도 쓰고 싶다면 타임라인 위의 **Mirror Figma Motion Timings**를 켜세요. 사용 설정의 전체 단계와 지원되는 속성은 [Figma Motion 애니메이션 사용하기](/ko/bannerify/animation/figma-motion)를 참고하세요.

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

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

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

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

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

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

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

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