---
url: "/ko/pitchdeck/design/animations.md"
description: "슬라이드 요소에 애니메이션을 추가하고, 타이밍과 순서를 설정하고, 타임라인에서 검토하세요."
---

# 슬라이드에 애니메이션 넣기

> 슬라이드 요소에 애니메이션을 추가하고, 타이밍과 순서를 설정하고, 타임라인에서 검토하세요.

Pitchdeck은 각 슬라이드의 직계 하위 레이어에 애니메이션을 적용해요. **Animations** 탭에서 요소를 선택하고 모션을 함께 편집하세요.

> **Note:** 전체 모션은 Preview, Presenter, Local HTML에서 재생돼요. 호스팅 공유는 배포된 뷰어가 고급 모션을 지원하는지 확인해요. MP4는 지원되는 2D 모션과 전환을 렌더링해요. 기본 PowerPoint는 보수적인 페이드/빌드 효과 일부만 지원하며, 지원되지 않는 모션은 보고돼요. Keynote, Google Slides, 정적 형식에는 Pitchdeck 모션이 포함되지 않아요.

[Video](/assets/videos/pitchdeck/design/adding-layer-animations.mp4)

## 요소 선택 {#select-elements}

1. 왼쪽 사이드바에서 슬라이드를 선택하고 **Animations**를 여세요.
2. **Animation order**나 슬라이드 미리보기에서 요소를 클릭하세요. 요소를 추가하거나 제거하려면 Mac에서는 **Command**, Windows에서는 **Ctrl**을 누른 채 클릭하세요. 범위를 선택하려면 **Shift**를 누르세요.
3. 목록의 모든 요소를 선택하려면 **Select all**을 사용하세요. 모션이 없는 요소는 **Not animated** 아래에 표시돼요. 레이어가 많은 슬라이드에서는 레이어 이름으로 검색하세요.

여러 요소를 선택하면 인스펙터에서 값이 서로 다른 항목에 **Mixed**가 표시돼요. 필드를 편집하면 선택한 모든 요소에서 해당 필드만 바뀌고, 다른 설정, 링크, 미디어는 그대로 유지돼요.

## 애니메이션 추가 {#add-an-animation}

슬라이드 전체에 한 번에 애니메이션을 넣으려면 Animations 패널에서 **Animate this slide**를 고르거나, 타임라인에서 **Animate slide**를 고르세요(둘 다 슬라이드에 애니메이션이 없을 때 표시돼요). Commands에서 **Animate slide**를 실행해도 돼요. 제목이 먼저 나오고 부제목이 뒤따른 다음, 콘텐츠가 읽는 순서대로 한 줄씩 떠오르듯 나타나요. 카드 안의 텍스트는 카드와 함께 나타나고, 배경, 로고, 바닥글, 페이지 번호, 구분선은 움직이지 않아요. 이 기능은 슬라이드의 기존 애니메이션을 대체하므로, 되돌리려면 **Undo**를 사용하세요.

모션이 없는 요소에는 **Fade**, **Slide up**, **Scale**, **Pop** 중 하나를 고르거나, **All effects…** 항목을 골라 모든 애니메이션을 둘러보세요. 효과는 **Entrance**, **Emphasis**, **Exit**로 묶여 있고, 직접 만든 키프레임용 **Custom**도 있어요. 효과 위에 마우스를 올리면 모션을 미리 볼 수 있어요.

**Entrance** 맨 위쪽에는 은은한 옵션이 있어요. **Wipe**는 요소를 한쪽 가장자리부터 드러내고, **Reveal**은 원형으로 열어 보여 주고, **Settle**은 살짝 큰 상태에서 부드럽게 자리 잡게 하고, **Grow**는 왼쪽, 가운데, 오른쪽, 아래쪽에서부터 늘어나게 해서 막대와 차트에 잘 어울려요. **Exit**에는 방향을 지정하는 **Fade**, **Wipe**, **Close**, **Shrink**가 있어요. 이 효과들은 에디터, Presenter, Local HTML, MP4에서 재생되며, PowerPoint에는 페이드만 유지돼요.

애니메이션을 고른 뒤 **Direction**으로 요소가 들어오는 방향을 정하거나, **Style**에서 **Up**, **Down** 같은 변형을 고르세요. 무언가를 바꿀 때마다 편집한 효과가 슬라이드에서 재생되어 결과를 바로 확인할 수 있어요.

## 타이밍 설정 {#set-timing}

**Plays**에서 효과가 시작되는 시점을 고르세요. 아래 줄에 어떤 효과와 함께 또는 어떤 효과 다음에 재생되는지, 몇 번째 클릭을 기다리는지 등이 쉬운 말로 설명돼요.

| Plays | 동작 |
| --- | --- |
| On click | 발표 중 클릭을 기다려요. |
| With previous | 앞 효과와 함께 시작하며, 여기에 지연 시간이 더해져요. |
| After previous | 앞 효과가 끝난 뒤 시작하며, 여기에 지연 시간이 더해져요. |

**Speed**에서 **Fast**(0.3초), **Normal**(0.6초), **Slow**(1.2초) 중 하나를 고르거나, **Custom**을 고르고 **Duration**을 입력하세요. **Delay**에는 초 단위 값을 입력하세요. **More options**에는 **Easing**과 **Effect type**이 있어요. Easing에는 **Gentle**, **Overshoot**, **Anticipate** 등 프리셋 곡선이 있고, 프리셋 위에 마우스를 올리면 점이 그 곡선대로 움직이는 모습을 볼 수 있어요. 곡선의 핸들 두 개를 드래그하거나, 핸들에 포커스를 두고 화살표 키를 사용하면 사용자 지정 곡선을 만들 수 있어요. Effect type은 선택한 애니메이션에 따라 자동으로 설정돼요. 종료 효과로 쓰는 페이드처럼 효과를 다른 유형으로 재생해야 할 때만 바꾸세요.

텍스트 레이어에서는 **Build text**로 **All at once**나 **By line**을 고를 수 있어요. By line은 텍스트를 한 줄씩 차례로 보여 줘요. 예상 줄 수가 맞지 않으면 **Lines**를 텍스트에 맞게 설정하고, 줄 사이 간격은 **Between lines**로 설정하세요. 줄 단위 빌드는 에디터, Presenter, Local HTML, MP4에서 재생돼요. PowerPoint에서는 텍스트 레이어 전체에 애니메이션이 적용돼요.

여러 요소를 차례로 재생하려면 요소를 선택하고 **Stagger selected layers**에 간격을 초 단위로 입력한 다음, **Forward** 또는 **Reverse**를 고르고 **Stagger**를 고르세요. 간격을 0으로 하면 동시에 시작해요.

## 순서 검토 {#review-the-order}

**Animation order**에는 모든 효과가 재생 순서대로 나열돼요. 강조 표시된 번호는 클릭을 기다리고, 회색 번호는 자동으로 재생돼요. 같은 번호가 슬라이드 미리보기에도 표시돼요. 각 행에는 효과가 재생되는 시점을 나타내는 작은 막대가 있어요. 행을 드래그하거나, 행 위에 마우스를 올리고 화살표 버튼을 사용하면 순서를 앞뒤로 옮길 수 있어요. 행을 클릭하면 해당 요소가 선택되고 효과가 재생돼요.

슬라이드 아래 **Speaker notes** 옆에 있는 **Timeline**을 고르면 모든 효과를 하나의 시간 축에서 볼 수 있어요. 해당 슬라이드에서 직접 탭을 고르지 않았다면, 애니메이션을 고르거나 편집하거나 재생할 때 창이 자동으로 **Timeline**으로 바뀌어요. 점선은 각 클릭 지점을 나타내요. 막대를 드래그하면 지연 시간이, 오른쪽 가장자리를 드래그하면 길이가 바뀌어요. 타이밍은 0.05초 단위로 맞춰지며, **Alt**를 누르고 있으면 자유롭게 움직일 수 있어요. 시간 눈금자를 클릭하거나 드래그하면 재생 헤드가 이동해 애니메이션을 훑어볼 수 있고, 왼쪽·오른쪽 화살표 키로 재생 헤드를 조금씩 움직일 수 있어요. 미리 보는 동안 재생 헤드는 재생 위치를 따라가요.

막대는 다른 막대의 가장자리, 클릭 지점 선, 슬라이드 시작 지점에 맞춰 붙고, 맞춰질 때 빨간 가이드 선이 표시돼요. 슬라이드에 전환이 있으면 맨 위에 **Transition** 행이 나타나요. 오른쪽 가장자리를 드래그해 길이를 바꾸세요. 내레이션이 있는 슬라이드에는 파형과 함께 **Narration** 행이 표시돼요. 드래그해서 내레이션 시작 시점을 바꾸거나, 클릭해서 오디오 설정을 여세요.

막대를 클릭해 포커스를 둔 뒤 다음 키를 사용하세요.

| 동작 | 결과 |
| --- | --- |
| 왼쪽 또는 오른쪽 화살표 | 지연 시간을 0.05초씩 조정해요. **Shift**를 누르고 있으면 0.5초씩 조정돼요. |
| Alt+위쪽 또는 Alt+아래쪽 화살표 | 효과를 앞이나 뒤로 옮겨요. |
| Enter 또는 막대 더블 클릭 | 효과 선택기를 열어요. |
| Delete | 효과를 삭제해요. |
| Space | 슬라이드를 재생하거나 일시 정지해요. |

여러 막대를 선택하려면 Shift-클릭이나 Command/Ctrl-클릭을 하거나, 빈 트랙 공간을 드래그해 상자에 닿는 모든 막대를 선택하세요. 선택한 막대 중 아무거나 드래그하면 선택 항목 전체가 함께 움직이고, 화살표 키로 조금씩 옮기거나 **Delete**로 삭제할 수 있어요. 막대를 여러 개 선택한 상태에서 마우스 오른쪽 버튼을 클릭하면 메뉴에 **Stagger _n_ animations**가 추가돼요. 이 항목을 고르면 애니메이션이 0.15초 간격으로 배치돼요.

타임라인을 확대·축소하려면 **Command/Ctrl**을 누른 채 스크롤하거나, 트랙패드에서 핀치하거나, 타임라인 위의 **−** 버튼과 **+** 버튼을 사용하세요. 퍼센트 값을 고르면 슬라이드 전체가 다시 화면에 맞춰져요. 타임라인 위의 **Deck motion**을 고르면 덱 전체 보기가 열려요.

막대를 마우스 오른쪽 버튼으로 클릭하면 **Change effect…**, **Play this animation**, **Copy animation**, **Paste animation**, **Move earlier**, **Move later**, **Remove animation** 메뉴를 쓸 수 있어요. 행 이름을 위아래로 드래그하면 순서가 바뀌어요. 타임라인 위쪽 가장자리를 드래그하면 크기를 조절할 수 있고, 가장자리를 더블 클릭하면 다시 행 높이에 맞춰져요.

## 효과 추가, 복사, 재사용 {#add-copy-and-reuse-effects}

요소 이름 옆의 **+** 버튼을 고르면 효과를 하나 더 추가할 수 있어요. 요소 하나에 등장, 강조, 종료 효과를 하나씩 넣을 수 있어요. 효과가 목록으로 표시되므로 하나를 선택해 편집하거나 **−** 버튼을 골라 제거하세요. 같은 요소의 효과끼리 변형이 겹칠 때는 효과를 순서대로 배치하세요.

**⋯** 메뉴에는 **Copy animation**, **Paste animation**, **Remove all animations**가 있어요. 복사와 붙여 넣기는 **Command/Ctrl+Shift+C**와 **Command/Ctrl+Shift+V**로도 할 수 있어요. 애니메이션을 제거해도 링크와 미디어는 유지돼요.

**Motion styles**를 펼치고 **Save current as**에 이름을 입력한 다음 **Save style**을 고르세요. 스타일에는 처음 선택한 요소의 모션이 사용돼요. 저장한 스타일을 고르면 같은 덱 안의 다른 선택 항목에 적용할 수 있어요.

> **Tip:** 애니메이션 메타데이터는 Figma 레이어에 붙어 있어요. 레이어를 다른 슬라이드로 복사하면 애니메이션 설정도 함께 복사돼요.

## 변경 사항 미리보기 및 실행 취소 {#preview-and-undo-changes}

편집하는 동안 **Play**(또는 **Space**)와 타임라인 재생 헤드는 해당 시점의 슬라이드 모습을 보여 주므로, 편집 모드를 벗어나지 않고 타이밍을 확인할 수 있어요. 재생 헤드 위치에서 아직 보이지 않는 요소는 점선 윤곽으로 표시되어 여전히 찾고 선택할 수 있어요. 슬라이드에서 요소를 클릭하면 모든 요소가 보이고 선택할 수 있는 전체 슬라이드로 돌아가요. **Replay**, **Next click**, 시간 슬라이더, 클릭 가능한 링크를 쓰려면 **Preview**를 고르세요.

애니메이션이 있는 슬라이드는 썸네일에 효과 개수가 적힌 재생 배지가 표시돼요. 썸네일 위에 마우스를 올리면 그 자리에서 애니메이션이 재생되고, 배지를 고르면 슬라이드가 열리며 재생돼요. 동영상, 오디오, 임베드가 있는 슬라이드는 정지된 썸네일을 그대로 유지해요.

**Make it move**는 덱 전체에 한 번에 애니메이션을 넣어요. **Tools** > **Animate whole deck…** 메뉴, 레이어를 선택하지 않았을 때 Animations 패널의 **Animate the whole deck**, 타임라인 위의 **Deck motion**, 또는 Commands에서 열 수 있어요. **Calm**(부드러운 페이드), **Confident**(떠오르기와 확대), **Bold**(옆으로 이동하기와 팝) 중 하나를 고른 다음 **Apply to _n_ slides**를 고르세요. 각 슬라이드는 **Animate slide**와 같은 방식으로 연출되며, 선택한 스타일의 효과가 사용돼요. 큰 이미지는 튀어 오르는 대신 확대되거나 페이드되고, 요소가 많은 슬라이드는 타이밍을 촘촘하게 줄여 모든 빌드가 약 2초 안에 끝나요. 슬라이드는 페이드(Calm, Confident) 또는 슬라이드(Bold) 전환으로 바뀌며, 첫 슬라이드에는 전환이 없어요. **Keep slides I've already animated**는 기본으로 켜져 있어요. 전체 변경은 **Undo** 한 번으로 되돌릴 수 있고, 효과에는 표준 이징이 사용되므로 PowerPoint로 내보내도 유지돼요.

**Deck motion**은 타임라인 위나 Commands에서 열 수 있으며, 포함된 모든 슬라이드를 애니메이션 수, 클릭 수, 전환, 길이와 함께 보여 줘요. 슬라이드를 고르면 해당 슬라이드가 열려요. **Use this slide's transition everywhere**는 현재 슬라이드의 전환을 포함된 모든 슬라이드에 복사하고, **Animate _n_ unanimated slides**는 아직 애니메이션이 없는 슬라이드에 **Animate slide**를 실행해요. 두 작업 모두 실행 취소할 수 있어요. 슬라이드의 등장 전환은 해당 슬라이드의 **Transition** 컨트롤로 설정하세요.

애니메이션, 노트, 섹션, 모션 설정을 편집할 때는 **Undo**와 **Redo** 또는 **Command/Ctrl+Z**와 **Command/Ctrl+Shift+Z**를 사용하세요. 툴바의 작은 점은 변경 사항이 저장되었음을 나타내며, 저장 대기 중인 변경이 있으면 **Saving…** 또는 **Unsaved**로 바뀌어요. 저장에 실패하면 새로고침, 발표, 내보내기 전에 **Retry saving**을 사용하세요.

## Commands, 타임라인, Morph {#commands-timeline-and-morph}

슬라이드 콘텐츠를 찾거나 도구를 열려면 **Tools** > **Commands & search**를 고르거나 **Command/Ctrl+K**를 누르세요. **Command/Ctrl+Shift+C**로 복사한 모션은 **Command/Ctrl+Shift+V**로 다른 슬라이드의 선택한 객체에 붙여 넣을 수 있어요. 미리보기의 빈 공간을 드래그하면 겹치는 객체가 선택되고, Command/Ctrl이나 Shift를 누르고 있으면 선택 항목에 추가돼요.

정확한 시작 시간과 속성 트랙이 필요하다면 Commands에서 **Open visual motion timeline**을 고르세요. 막대를 드래그하면 시작 시점이, 오른쪽 가장자리를 드래그하면 지속 시간이 바뀌어요. 타이밍은 0.05초 단위로 맞춰지며, 단위에 맞추지 않고 움직이려면 **Alt**를 누른 채 드래그하세요. 정확한 시작 시간과 지속 시간을 입력하는 필드도 있어요. **Property track**은 선택한 객체에 위치, 배율, 회전, 불투명도 애니메이션을 독립적으로 추가해요. 트랙은 프리셋 애니메이션과 함께 조합할 수 있어요. 타임라인에는 일치하는 효과가 최대 150개까지 표시되므로, 더 큰 슬라이드에서는 검색으로 범위를 좁히세요.

슬라이드 전환 컨트롤에서 **Morph**를 선택한 다음 Commands에서 **Configure Morph / Magic Move**를 사용해 객체 매칭을 검토하세요. Smart Morph는 객체를 자동으로 매칭해요. 고유한 레이어 이름을 가장 먼저 보고, 그다음 같은 컴포넌트의 인스턴스와 동일한 텍스트를 보며, 레이어 이름이 바뀌었더라도 매칭해요. 두 슬라이드에 이름이 반복되는 객체가 같은 수만큼 있으면 읽는 순서대로 짝지어지고, 그렇지 않으면 원본 객체를 직접 고르지 않는 한 반복되는 이름은 매칭되지 않아요. 각 매칭에는 매칭된 이유가 표시돼요. 매칭되지 않은 객체는 페이드돼요. 원본 레이어는 그대로 유지돼요.

## 연결된 모션 스타일과 브랜드 키트 {#linked-motion-styles-and-brand-kits}

재사용 가능한 모션 스타일을 적용하면 선택한 객체가 해당 스타일에 연결돼요. 스타일을 업데이트하면 연결된 객체가 바뀌지만, 개별 필드 재정의 값은 유지돼요. **Detach**는 현재 모션을 독립적인 스냅숏으로 유지해요. 정의가 삭제되더라도 객체에 포함된 스냅숏은 계속 재생돼요.

Commands에서 **Linked motion styles and libraries**를 열면 스타일 이름을 바꾸거나, 검토한 JSON 라이브러리를 가져오거나 내보내거나, 스타일을 Figma 문자열 변수로 저장할 수 있어요. 사용 가능한 게시된 변수 라이브러리를 가져올 수도 있어요. 로컬 변수를 저장한다고 팀 라이브러리가 게시되지는 않아요. 게시하려면 Figma의 라이브러리 워크플로를 사용하세요.

**Brand kits, object roles and relayout**을 열면 의미 역할, 대체 텍스트, 장식용 표시, 읽기 순서를 지정할 수 있어요. 연결된 제목, 본문, 강조 스타일을 만든 다음 현재 슬라이드, 선택한 슬라이드, 불러온 덱 전체에 적용되는 결과를 검토하세요. 로컬 스타일 재정의 값은 유지할 수 있어요. 역할 기반 재배치는 기존 최상위 객체를 검토한 배치로 옮기며, 객체의 ID, 콘텐츠, 미디어, 모션은 그대로 유지돼요. 원본 편집과 Figma 스타일 변경은 **Figma Undo**로 되돌리세요.

## 내레이션 {#narration}

Commands나 타임라인에서 **Narration and audio cues**를 여세요. 오디오를 업로드하거나, 호스트가 마이크 접근을 허용하면 직접 녹음하세요. 녹음은 120초에서 멈춰요. 클립은 2 MB보다 작아야 하며, 로컬 라이브러리에는 파일당 3 MB까지 저장할 수 있어요. 큐 시작 시점과 볼륨을 설정한 다음 **Save slide cue**를 고르세요.

오디오는 이 컴퓨터에 있는 플러그인의 로컬 라이브러리에 저장돼요. 다른 컴퓨터에서는 내보내기 전에 클립을 다시 연결하세요. Local HTML과 MP4에는 오디오가 함께 포함되고, 호스팅 덱을 공유하면 연결된 오디오가 프레젠테이션과 함께 업로드돼요. 브라우저 자동 재생 규칙 때문에 **Play narration**이 필요할 수 있어요. 편집 가능한 기본 프레젠테이션 형식으로 내보내면 이 내레이션 큐는 포함되지 않아요.

연결된 브랜드 키트를 업데이트하면 파일에서 해당 Figma 기본 스타일을 사용하는 모든 객체가 바뀌어요. 범위 컨트롤로 어떤 객체에 스타일이나 재배치 제안을 적용할지 정해요. 타이포그래피와 텍스트 색상은 각각 별도의 연결된 스타일을 사용해요. 모션 감소 재생에서는 클릭 빌드가 유지되며, 현재 빌드가 바로 나타나요.