---
url: "/ko/bannerify/animation/creating-keyframes.md"
description: "사용자 지정 애니메이션 타임라인에서 키프레임을 추가하고 관리하세요."
---

# 사용자 지정 애니메이션 키프레임 만들기

> 사용자 지정 애니메이션 타임라인에서 키프레임을 추가하고 관리하세요.

### 영상 튜토리얼: Figma 배너 디자인에 사용자 지정 애니메이션 추가하기(영어)

Bannerify 플러그인으로 배너에 사용자 지정 키프레임 애니메이션을 추가하는 방법을 보여 주는 영상이에요.
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

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

애니메이션 패널을 열면 첫 번째 키프레임(0%)과 마지막 키프레임(100%), 이렇게 2개의 키프레임이 보여요. 키프레임 애니메이션에는 애니메이션이 시작되는 프레임과 끝나는 지점을 나타내는 키프레임이 최소한 하나씩 필요하므로, 이 두 키프레임은 기본으로 추가되며 삭제할 수 없어요.

## 편집할 키프레임 선택하기 {#selecting-a-keyframe-to-edit}

사용자 지정 애니메이션 패널 위쪽의 **Keyframes** 트랙에서 키프레임을 클릭하면 키프레임 사이를 바로 전환할 수 있어요. 키프레임을 클릭하면 그 키프레임의 속성을 편집할 수 있어요.

## 새 키프레임 삽입하기 {#inserting-new-keyframes}

기본 시작점과 끝점 사이에 키프레임을 추가하려면 **Add at** 필드에 퍼센트(예: **50**)를 입력한 다음 **Add**를 선택하세요.

새로 추가한 키프레임은 현재 선택한 키프레임과 같은 속성으로 자동 생성돼요. 그래서 이미 추가한 다른 키프레임을 바탕으로 속성을 조정할 수 있어요. **Add** 버튼을 클릭하면 새로 추가한 키프레임이 자동으로 선택돼요.