---
url: "/ko/pitchdeck/design/keyframes.md"
description: "Pitchdeck 기본 애니메이션 프리셋에 원하는 애니메이션이 없다면 *x*, *y*, *scale*, *rotation*, *opacity* 속성으로 키프레임을 추가해 나만의 타임라인 애니메이션을 만드세요."
---

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

> Pitchdeck 기본 애니메이션 프리셋에 원하는 애니메이션이 없다면 *x*, *y*, *scale*, *rotation*, *opacity* 속성으로 키프레임을 추가해 나만의 타임라인 애니메이션을 만드세요.

## 새 사용자 지정 애니메이션 만들기 {#creating-a-new-custom-animation}

[Video](/assets/videos/pitchdeck/design/custom-animation-create.mp4)

사용자 지정 애니메이션 패널을 열려면 Pitchdeck 상단 헤더의 **Custom Animations** 버튼을 클릭하세요(Small 창 크기에서는 **Animations**로 표시돼요). 사용자 지정 애니메이션 패널이 열리면 나만의 키프레임 애니메이션을 추가할 수 있어요.

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

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

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

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

기본 시작점과 끝점 사이에 키프레임을 추가하려면 퍼센트 값(예: **50**)을 입력하고 **Insert New Keyframe**을 선택하세요.

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

### 키프레임 속성 편집 {#editing-keyframe-properties}

애니메이션 키프레임마다 서로 다른 속성 5가지를 편집할 수 있어요. 키프레임 간 속성 차이는 자동으로 애니메이션돼요. 예를 들어 0% 키프레임의 scale을 2x로, 100% 키프레임의 scale을 1x로 설정하면 자동으로 “축소” 애니메이션이 만들어져요.

- **X** 속성은 요소의 좌우 픽셀 위치를 애니메이션해요.
- **Y** 속성은 요소의 상하 픽셀 위치를 애니메이션해요.
- **Opacity** 속성은 요소의 투명도(%)를 애니메이션해요.
- **Rotate** 속성은 요소의 회전 각도를 애니메이션해요.
- **Scale** 속성은 요소의 크기를 애니메이션해요.

### 키프레임 속성 복사 및 붙여 넣기 {#copying-and-pasting-keyframe-properties}

한 키프레임의 속성을 다른 키프레임으로 복사해 붙여 넣을 수 있어요. 먼저 속성을 복사할 키프레임을 선택하고 **Copy Properties** 버튼을 클릭한 다음, 붙여 넣을 키프레임을 선택하고 **Paste Properties** 버튼을 클릭하면 복사한 속성이 선택한 키프레임에 적용돼요.

> **Note:** 복사한 속성은 패널을 닫기 전까지만 사용할 수 있어요. 사용자 지정 애니메이션 패널이 열려 있는 동안에는 애니메이션의 어떤 키프레임 사이에서든 속성을 복사하고 붙여 넣을 수 있지만, 패널을 닫으면 복사한 속성을 더 이상 붙여 넣을 수 없어요.

### 키프레임 삭제 {#deleting-keyframes}

키프레임을 삭제하려면 키프레임 퍼센트 행에서 키프레임을 클릭해 선택한 다음, **Delete Keyframe** 버튼을 클릭해 타임라인에서 삭제하세요. 단, **0%** 키프레임과 **100%** 키프레임은 애니메이션 타임라인에 꼭 필요한 기본 키프레임이므로 삭제할 수 *없어요*.

키프레임을 삭제하면 **0%** 키프레임이 편집할 활성 키프레임으로 자동으로 다시 선택돼요.

> **Warning:** 키프레임을 삭제하면 영구적으로 삭제돼요. 키프레임을 삭제하면 타임라인에서 영구적으로 제거되며 삭제를 실행 취소할 수 없어요. 다만 애니메이션 타임라인을 편집하는 중이라면, 키프레임의 속성을 **Copy Properties**로 복사한 뒤 삭제하고, 삭제한 속성을 다른 키프레임에 붙여 넣을 수 있어요.

### 실시간 미리보기로 애니메이션 확인 {#using-the-live-preview-to-see-your-animation}

수정한 키프레임과 속성에 따라 애니메이션이 어떻게 보이는지 확인하려면 **Live Preview** 영역을 보세요. 이 영역은 키프레임 속성 바로 옆, 애니메이션 타임라인 바로 아래에 있어요. 키프레임, 속성, 이징을 바꾸면 실시간 미리보기에 자동으로 반영돼요.

> **Note:** 실시간 미리보기의 재생 속도를 조정할 수 있어요. 사용자 지정 애니메이션이 다른 속도에서 어떻게 보이는지 확인하고 싶다면, **Live Preview** 아래의 속도 슬라이더를 왼쪽이나 오른쪽으로 드래그해 실시간 미리보기의 재생 속도를 줄이거나 높이세요.

### 애니메이션 이징 설정 {#setting-the-animation-easing}

**Easing** 선택 상자에서 옵션을 골라 애니메이션에 적용할 이징 종류를 정할 수 있어요. 이징은 타임라인 전체에 자동으로 적용되며, **Live Preview** 영역도 업데이트되어 선택한 이징에 따라 키프레임 애니메이션의 움직임이 어떻게 달라지는지 확인할 수 있어요.

다음 이징 옵션 중에서 선택할 수 있어요.

- Ease(기본값)
- Linear
- Ease In
- Ease Out
- Ease In Out

### 새 사용자 지정 애니메이션 저장 {#saving-your-new-custom-animation}

새 애니메이션을 저장하려면 **New Custom Animation Name** 입력 필드에 애니메이션 이름을 입력한 다음 **Add New Animation**을 클릭하세요.

> **Note:** 사용자 지정 애니메이션은 *현재 Figma 파일*에만 저장되고 그 안에서만 사용할 수 있어요. 애니메이션을 저장하면 *현재* Figma 파일 안의 모든 *페이지*에서 사용할 수 있어요. 하지만 애니메이션은 Figma 파일에 직접 저장되며 다른 파일로 옮길 수 없으므로, 완전히 다른 Figma 파일이나 새 Figma 파일에서 Pitchdeck을 실행하면 저장한 애니메이션이 표시되지 *않아요*. 새 Figma 파일에서는 애니메이션을 다시 만들어야 해요. 또는 *현재* Figma 파일에 새 *페이지*를 만들면, 이 Figma 파일에 저장한 사용자 지정 애니메이션을 그대로 사용할 수 있어요.

### 저장한 사용자 지정 애니메이션 사용 {#using-your-saved-custom-animations}

사용자 지정 애니메이션을 하나 이상 저장했다면, **Animations** 탭에서 레이어를 선택하고 애니메이션 선택기(All effects… 또는 **Animation** 메뉴)를 열어 슬라이드에 사용할 수 있어요. 선택기에 **Custom** 탭이 표시되며, 여기에서 저장한 모든 사용자 지정 애니메이션을 볼 수 있어요.

다른 프리셋 애니메이션과 마찬가지로, **Animations** 탭에서 [여러 레이어를 함께 선택](/ko/pitchdeck/design/animations#select-elements)하면 사용자 지정 애니메이션을 한 번에 적용할 수 있어요.

## 저장한 애니메이션 업데이트 {#updating-your-saved-animations}

[Video](/assets/videos/pitchdeck/design/custom-animation-update.mp4)

이전에 저장한 사용자 지정 애니메이션을 업데이트하려면 **Your Saved Animations** 선택 상자에서 업데이트할 애니메이션을 고르세요. 저장한 애니메이션과 키프레임이 사용자 지정 애니메이션 패널에 불러와져요.

저장한 애니메이션을 고른 다음에는 필요한 대로 키프레임과 속성을 편집할 수 있어요. 수정이 끝나면 **Update Saved Animation** 버튼을 클릭해 변경 사항을 저장하고 이전 애니메이션 키프레임을 *덮어쓰세요*.

저장한 애니메이션을 업데이트하면, 방금 업데이트한 사용자 지정 애니메이션을 이미 사용하고 있던 슬라이드의 모든 레이어에 업데이트된 키프레임이 자동으로 적용돼요.

> **Tip:** 저장한 애니메이션을 바탕으로 새 애니메이션 만들기. 저장한 애니메이션을 불러와 수정하되 저장된 버전을 “덮어쓰고” 싶지 않다면, **New Custom Animation Name**을 입력하고 **Add New Animation** 버튼을 클릭해 새 애니메이션으로 만들 수 있어요.

## 저장한 애니메이션 삭제 {#deleting-your-saved-animations}

[Video](/assets/videos/pitchdeck/design/custom-animation-delete.mp4)

애니메이션을 삭제하려면 **Your Saved Animations**에서 옵션을 선택해 애니메이션을 불러온 다음, **Delete Saved Animation** 버튼을 클릭해 저장한 애니메이션을 삭제하세요.

> **Warning:** 저장한 애니메이션을 삭제하면 영구적으로 삭제되고 레이어에서도 제거돼요. 저장한 애니메이션을 삭제하면 **Your Saved Animations** 목록에서 영구적으로 제거돼요. 삭제한 사용자 지정 애니메이션을 사용하던 슬라이드의 레이어는 **애니메이션 없음** 상태로 돌아가요.