---
url: "/ko/bannerify/animation/editing-keyframe-properties.md"
description: "키프레임의 X, Y, Scale, Rotation, Opacity 속성을 원하는 대로 설정하세요."
---

# 키프레임 속성 편집하기

> 키프레임의 X, Y, Scale, Rotation, Opacity 속성을 원하는 대로 설정하세요.

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

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

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

애니메이션 키프레임마다 5가지 속성을 편집할 수 있어요. 키프레임 사이에 속성 차이가 있으면 자동으로 애니메이션이 만들어져요. 예를 들어 0% 키프레임의 크기를 2배로, 100% 키프레임의 크기를 1배로 설정하면 자동으로 “줄어드는” 애니메이션이 만들어져요.

- **X** 속성은 요소의 좌우 위치(픽셀 단위)를 애니메이션으로 바꿔요.
- **Y** 속성은 요소의 상하 위치(픽셀 단위)를 애니메이션으로 바꿔요.
- **Opacity** 속성은 요소의 투명도(퍼센트)를 애니메이션으로 바꿔요.
- **Rotate** 속성은 요소의 회전 각도를 애니메이션으로 바꿔요.
- **Scale** 속성은 요소의 크기를 애니메이션으로 바꿔요.

## 퍼센트 기반 상대 X/Y 변형 사용하기 {#using-percentage-based-relative-x-y-transforms}

애니메이션을 적용할 요소 크기의 퍼센트로 X/Y 위치를 설정하고 싶다면, 키프레임 속성에서 **Position** 단위를 **px**에서 **%** 로 바꾸세요. 그러면 X/Y 값을 픽셀 대신 퍼센트로 설정할 수 있어요.

퍼센트 X/Y 변형 값을 적용하면, 애니메이션이 적용된 요소의 크기를 기준으로 그 퍼센트만큼 자동으로 움직여요. 예를 들어 키프레임에 X 변형 값을 `10%`로 설정하면 너비가 `100px`인 레이어는 `10px`만큼 움직여요. 같은 `10%` X 변형 애니메이션을 너비가 `200px`인 레이어에 적용하면 `20px`만큼 움직여요.

## Scale을 X/Y Scale 옵션으로 나누기 {#splitting-scale-into-x-y-scale-options}

X축과 Y축의 크기 값을 따로 설정하고 싶다면, 키프레임 속성에서 **Scale** 모드를 **Uniform**에서 **X / Y**로 바꾸세요. 그러면 두 축을 똑같이 키우거나 줄이는 대신, 키프레임의 가로와 세로 “Scale” 값을 각각 설정할 수 있어요.

다른 축에는 영향을 주지 않고 레이어의 너비나 높이만 애니메이션으로 바꿔야 할 때 유용한 설정이에요.