애니메이션 (타임라인 · 키프레임)

캔버스 하단의 타임라인에서 키프레임 애니메이션을 만듭니다.

타임라인 켜기

하단의 Enable Timeline 을 누르면 타임라인이 활성화됩니다.
타임라인 패널 위쪽 경계선에 커서를 올리면 상하 리사이즈 커서가 되며, 드래그하면 패널 높이를 조절할 수 있습니다(트랙이 많을 때 넓게 보기).
룰러에는 전체 길이에 맞춘 시간 눈금(1s, 2s …) 이 표시되며, 룰러를 드래그하면 재생헤드(빨간 선) 가 움직이며 그 시각의 상태를 미리 봅니다.
컨트롤 오른쪽 ⋯ 메뉴에서 타임라인 표시 옵션을 켤 수 있습니다 — 예: 이징 곡선 표시(기본 꺼짐).
재생 시간 표시 옆의 길이(초) 입력란으로 타임라인 전체 길이를 직접 설정할 수 있습니다(비디오 삽입 시 자동으로 늘어난 길이도 여기서 조정).
재생 컨트롤(왼쪽부터): 맨 처음으로 ▎◀ · 1프레임 뒤로 · 재생/일시정지 ▶ · 1프레임 앞으로 · 맨 끝으로 ▶▎ · 반복(loop) 토글 ↻ · 재생 속도(0.25×~4×, 기본 1×).
재생은 실시간 기준으로 진행됩니다 — 비디오 디코딩 등으로 한 프레임이 느려도 시계는 실제 시간을 따라가고(프레임을 건너뛸 뿐) 전체 재생 길이가 늘어나지 않습니다. 반복이 켜져 있으면(강조 표시) 끝에서 처음으로 돌아가 계속 재생하고, 꺼져 있으면 한 번 재생한 뒤 재생 헤드가 처음으로 돌아가 다시 재생할 준비를 합니다. 프레임 이동·처음/끝 이동은 재생을 일시정지합니다.

키프레임 만들기

레이어 하나를 선택합니다.
재생헤드를 원하는 시각으로 옮깁니다.
Add Keyframe 을 눌러 현재 포즈(위치·크기·스케일·회전·불투명도·채움색·패스)를 키프레임으로 기록합니다.
- t=0이 아닌 곳에서 처음 추가하면 t=0에 기준(Baseline) 키프레임이 함께 생성됩니다.
다른 시각으로 옮겨 값을 바꾸면(아래 "자동 키프레임"), 두 키프레임 사이가 보간되어 애니메이션됩니다.

애니메이션 프리셋 (등장·퇴장)

레이어를 우클릭(캔버스 또는 레이어 패널) ▸ Animate(애니메이션)에서 미리 만든 움직임을 고릅니다: Fade In / Out, Slide Up · Down · Left · Right In / Out, Pop In / Out(살짝 튀어나왔다 돌아옴), Rotate In, Blur In / Out, Draw Line(선이 그려짐).

재생헤드 위치에서 시작해 0.6초 동안 움직입니다. 등장은 지금 모습으로 끝나고, 퇴장은 지금 모습에서 시작합니다.
여러 레이어를 선택하면 레이어 목록의 위쪽부터 하나씩 차례로(0.08초 간격) 움직입니다.
결과는 일반 키프레임이라 타임라인에서 옮기거나 지울 수 있습니다. 타임라인이 없으면 만들고, 짧으면 늘립니다. 그룹은 안의 레이어와 함께 움직입니다.

텍스트 애니메이션 (키네틱 타이포)

텍스트 레이어를 선택하고 인스펙터의 Text Animation 섹션에서 글자·단어·줄이 차례로 움직이게 합니다.

Add Animation — 페이드, 올라오기, 떨어지기, 왼쪽/오른쪽으로 밀기, 팝, 흐림, 회전, 타자기, 물결.
방향 — 등장(시작 상태 → 원래 텍스트) 또는 퇴장(원래 텍스트 → 끝 상태).
단위 — 글자 / 단어 / 줄(자동 줄바꿈도 한 줄, 공백은 세지 않음). 순서 — 앞에서부터, 뒤에서부터, 가운데부터, 무작위.
타이밍 — 시작(타임라인 초), 길이(하나가 움직이는 시간), 간격(다음 것이 시작하기까지). 이징 — Ease Out / In / In Out, Linear, Spring(통통 튐), Hold.
시작 상태 / 끝 상태 — 움직이는 상태의 위치 이동 X/Y, 크기, 회전, 불투명도, 흐림.
여러 개를 함께 쓸 수 있습니다(예: 0초 등장 + 3초 퇴장). 캔버스·재생·PNG·동영상·GIF 내보내기에 반영되고, SVG·Lottie 내보내기에는 멈춘 상태의 텍스트로 나갑니다.

반복과 흔들림

속성별 하위 트랙(레이어 트랙을 펼친 것)의 키프레임을 선택하면 타임라인 바에 버튼 두 개가 나타납니다.

반복(Loop) — 마지막 키프레임 뒤에 멈추지 않고 처음부터 반복 또는 왕복합니다. 돌아가는 아이콘, 숨 쉬는 빛 같은 효과에 씁니다.
흔들림(Wiggle)(숫자 속성) — 키프레임 위에 부드러운 무작위 움직임을 더합니다: 빈도(초당 흔들림 수), 크기(양쪽으로 얼마나), 시드(다르지만 매번 같은 패턴). 떠다니는 배지, 흔들림, 깜빡임에 씁니다.

카운터 · 글자 크기 · 자간

텍스트 레이어 인스펙터에서 Counter 를 켜면 숫자가 됩니다: Number(키프레임 다이아몬드 있음), 소수 자릿수, 앞·뒤 글자(예: "$", "%"), 천 단위 구분. 두 시각에 Number 키프레임을 넣으면 그 사이를 셉니다("$0" → "$1,250.00").
텍스트의 Size 와 Tracking 에도 키프레임 다이아몬드가 있어 제목을 키우거나 자간을 벌리는 애니메이션을 만들 수 있습니다. 자동 너비/높이 상자는 따라갑니다.

모션 블러

타임라인 옵션(⋯) ▸ 내보내기에 모션 블러 를 켜면 동영상·GIF/APNG·PNG 시퀀스 내보내기에서 빠른 움직임이 번집니다: 셔터 90°(약하게) / 180°(영화) / 360°(강하게), 품질(프레임마다 평균하는 순간 수 4 / 8 / 16 — 많을수록 부드럽고 느림). 캔버스 미리보기는 또렷하게 유지됩니다.

그룹 타이밍 (애니메이션 재사용)

그룹이나 프레임을 선택하고 인스펙터 Timing 섹션에서 자체 타이밍을 켜면, 안의 모든 애니메이션이 그룹의 시계로 재생됩니다 — 시작 지연, 속도(2 = 두 배 빠르게), 반복(처음부터 / 왕복, 반복 길이). 애니메이션된 그룹을 복제해 지연만 다르게 주면 같은 애니메이션을 재사용할 수 있습니다. 타임라인에는 안의 키프레임이 원래 시각에 표시됩니다.

카메라

레이어 우클릭 ▸ 여기로 카메라 이동: 재생헤드에서 0.8초 동안 화면이 이동·확대되어 그 레이어들이 화면을 채웁니다. 카메라 원위치는 프레임 전체로 돌아갑니다. 처음 쓸 때 장면이 Camera 그룹에 들어가고, 카메라 움직임은 그 그룹의 키프레임이라 타임라인에서 그대로 고칠 수 있습니다. Camera 그룹 밖의 레이어(제목, 자막)는 화면에 고정됩니다.

장면 전환

레이어 두 개(보통 장면 그룹 두 개)를 선택 ▸ 우클릭 ▸ Animate ▸ 전환: 크로스페이드, 밀기(4방향), 덮기(위 레이어가 아래 레이어를 덮음), 줌 전환, 흐림 전환 — 레이어 목록의 아래 레이어에서 위 레이어로, 재생헤드부터 0.8초. 들어오는 장면은 그 전에 숨겨지고, 나가는 장면은 그 뒤에 숨겨집니다.

모양 모핑

패스 키프레임은 점 개수가 다른 두 모양 사이에서도 이어집니다(원 → 별). 단순한 쪽에 점을 더하고 비틀리지 않게 맞춥니다. Arrange ▸ 합치기 / 빼기 / 교차 / 제외는 선택한 도형(같은 부모)을 하나의 패스로 합칩니다.

비트와 마커

레이어 패널에서 오디오·동영상 레이어 우클릭 ▸ 비트 찾기: 비트가 시간 눈금 위의 주황색 마커가 되고, 키프레임을 드래그하면 마커에 붙습니다. 타임라인 옵션(⋯) ▸ 마커 지우기로 없앱니다.

따라가기

인스펙터 Layer ▸ 따라가기로 다른 레이어에 연결하면, 그 레이어가 원래 모습에서 움직인 만큼 함께 이동·회전·크기 변경합니다 — 그룹으로 묶지 않는 부모 연결입니다(팔과 손, 카드와 라벨). 선택 상자는 레이어 자신의 위치에 표시됩니다.

3D 회전 (2.5D)

Layout ▸ 3D 회전으로 레이어를 깊이 방향으로 돌립니다: X는 위쪽 가장자리가 멀어지고, Y는 오른쪽 가장자리가 멀어집니다(둘 다 키프레임 다이아몬드). 원근으로 깊이감의 세기를 정하고, 뒷면 보이기를 끄면 뒤를 향할 때 숨겨집니다(카드 뒤집기). PNG·동영상·GIF 내보내기에 반영되고, SVG·Lottie 내보내기와 선택 상자는 평면 그대로입니다.

모션 조각

삽입 메뉴(툴바 ＋ 메뉴도 같음)로 미리 만든 조각을 넣습니다. 모두 일반 레이어와 키프레임으로 만들어지므로 안의 모든 것을 고치고, 타이밍을 바꾸고, 내보낼 수 있습니다(Lottie 포함).

차트… — 레이블, 값 행으로 세로 막대·가로 막대·선·영역·파이·도넛 차트를 만듭니다(스프레드시트에서 붙여 넣기 가능, 한 행에 값이 여러 개면 시리즈가 늘어남). 재생 헤드부터 막대가 자라고 선이 그려지며 조각이 펼쳐지고, 값 레이블과 범례가 붙습니다. 차트를 선택하고 인스펙터 ▸ Chart(종류·값·축·애니메이션)나 데이터 편집… 으로 바꿉니다 — 다시 만들면 차트 구성 요소가 바뀌어 안에서 직접 고친 내용은 사라집니다.
코드… — 제목과 창 버튼이 있는 코드 창(다크/라이트)에 Swift·JavaScript·TypeScript·Python·JSON·Kotlin·Go·Rust·셸 문법 색을 입힙니다. 타이핑 효과를 켜면 재생 헤드부터 코드가 입력됩니다.
커서 — 지점 사이를 미끄러지듯 움직이는 포인터. 재생 헤드를 옮기고 포인터를 옮긴 뒤 우클릭 ▸ 재생 헤드에 클릭 추가 로 그 자리에서 누르며 물결이 퍼집니다.
파티클 ▸ 색종이·반짝임·눈·거품·폭발 — 시뮬레이션이 입자마다 키프레임으로 구워집니다(나중에 고쳐도 다시 계산되지 않으니 새 패턴은 다시 삽입).
기기 프레임 — 이미지·동영상 우클릭 ▸ 기기 프레임 추가 ▸ iPhone·iPad 모델(또는 그림의 픽셀 크기로 모델을 고르는 화면 크기에 맞추기). 그림이 둥근 화면 모서리의 벡터 베젤 안에 들어가고, 그림의 움직임은 프레임으로 옮겨집니다.

글로우와 그레인

인스펙터 ▸ Effects 에 글로우(레이어 모양 둘레의 색 번짐 — 색·반경)와 그레인(레이어 위 필름 노이즈 — 양·크기)도 있습니다. 미리보기와 이미지·동영상 내보내기에 모두 반영됩니다.

Lottie 애니메이션 가져오기

삽입 ▸ Lottie 애니메이션…(＋ 메뉴에도 있음)나 Lottie .json 을 캔버스에 떨어뜨리면, 애니메이션이 고칠 수 있는 레이어 그룹 하나가 됩니다 — 도형(사각형·타원·패스[애니메이션 패스 포함]·별·채움·선·트림 패스), 솔리드, 널, 프리컴프(자체 시계를 가진 그룹), 포함된 이미지, 고정 텍스트 — 위치·크기·회전·불투명도·기준점 키프레임은 이징까지 그대로 옵니다. 그라디언트는 첫 번째 색이 됩니다. 익스프레션·마스크·트랙 매트·이펙트·텍스트 애니메이터·외부 이미지는 빠지고, 건너뛴 내용은 시트로 알려 줍니다. 아트보드보다 큰 컴프는 맞게 줄어들고, 타임라인은 애니메이션 길이만큼 늘어납니다.

인스펙터 키프레임 다이아몬드

타임라인이 켜져 있으면 인스펙터의 Position · Size · Rotation · Opacity · Fill · Stroke · Trim(도형) · Content(텍스트) 항목 앞에 다이아몬드(◇/◆) 가 표시됩니다. (Stroke는 색·두께를 함께 키프레임하며, 색의 투명도까지 애니메이션됩니다. Content는 텍스트 레이어에서만 나타납니다.)

Smooth motion path — 타임라인이 켜진 상태에서 Layout 섹션의 Smooth motion path 를 켜면, 위치 키프레임 사이를 직선이 아니라 부드러운 곡선으로 이동합니다(자동 베지어). 켜면 캔버스에 모션 패스 곡선과 키프레임 점이 주황색으로 표시됩니다. 끄면 직선 보간으로 돌아갑니다.

각 키프레임 점에서 뻗어나온 흰 동그라미(탄젠트 핸들) 를 드래그하면 곡선 모양을 직접 조절합니다. 기본은 양쪽이 대칭으로 움직이고, Option을 누른 채 드래그하면 한쪽만(대칭 깸) 움직입니다.

흐린 ◇ — 아직 애니메이트되지 않은 속성. 누르면 현재 시각에 키프레임이 추가되며 애니메이션이 시작됩니다(0초 시점에 기준 키프레임도 함께 생성).
빈 ◇(강조색) — 애니메이트된 속성이지만 현재 시각엔 키프레임이 없음. 누르면 현재 화면 값으로 키프레임을 추가합니다.
채운 ◆(강조색) — 현재 시각에 키프레임이 있음. 누르면 그 키프레임을 삭제합니다.

자동 키프레임 (편집 시 자동 기록)

타임라인이 켜져 있고 이미 키프레임이 있는 레이어를 편집하면(캔버스 드래그/리사이즈/회전, 인스펙터 값 변경, 색·패스 편집 등), 변경한 속성이 현재 재생헤드 시각에 자동으로 키프레임으로 기록됩니다.
여러 객체를 선택해 한 번에 이동하면, 각 객체가 그 시각에 키프레임으로 기록됩니다.
키프레임이 없는 레이어는 "고정"으로 간주되어 편집해도 키프레임이 생기지 않습니다(먼저 Add Keyframe 필요).

애니메이션 가능한 속성

위치(Position), 크기(Size: W/H), 스케일, 회전(Rotation), 불투명도(Opacity)
채움(Fill) — 단색은 색을 보간, 그라디언트는 같은 종류면 스톱(색·위치)을 보간합니다. 종류가 다르면(예: 단색↔그라디언트, Linear↔Radial) 두 채움이 부드럽게 교차 전환(크로스페이드) 됩니다.
패스(펜 도형의 앵커/곡선) — 키프레임마다 다른 점 배치로 모핑
텍스트 내용(Content) — 글자는 보간하지 않고, 각 키프레임 시각에 해당 텍스트로 즉시 전환되어 다음 키프레임까지 유지됩니다(계단식/이산 전환 — 자막·문구 교체 등). 텍스트 레이어에서만 사용할 수 있습니다.
- 동영상(MP4/MOV/GIF 등) 내보내기에는 그대로 반영됩니다. 단, Lottie(JSON) 내보내기에는 아직 텍스트 내용 키프레임이 포함되지 않습니다(디자인 시점의 정적 텍스트로 내보내짐).

키프레임 편집

타임라인의 레이어 트랙에 키프레임이 다이아몬드(◆) 로 표시됩니다.
다이아몬드를 클릭하면 그 시각으로 이동하고 해당 키프레임이 선택됩니다.
다이아몬드를 드래그하면 키프레임의 시간을 옮깁니다.
인스펙터 상단 배너가 지금 어느 키프레임을 편집 중인지(Baseline / Keyframe n / m) 항상 알려줍니다. 그 상태에서 속성을 바꾸면 그 키프레임 값이 갱신됩니다.
키프레임 선택 후 Delete 로 삭제할 수 있습니다(타임라인 바의 휴지통 버튼과 동일). 캔버스를 클릭하면 키프레임 선택이 풀려 Delete 가 다시 레이어에 적용됩니다.
레이어의 등장/퇴장 스팬 바가 그 레이어의 채움색으로 칠해지고 이름 옆에 색 견본이 붙어, 어느 도형의 트랙인지 한눈에 보입니다(채움이 없으면 회색). 채움을 바꾸면 즉시 따라갑니다.
동영상 트랙은 더 높게 표시되고, 클립 바 안에 영상 프레임 썸네일이 시간 순으로 깔립니다(트림·이동·확대에 따라 갱신). 오디오 트랙의 클립 바에는 파형 아이콘이 표시되며, 두 클립 모두 페이드 구간(어두운 쐐기)과 음소거 표시가 바 위에 그려집니다. 재생 중에는 비디오·오디오 클립의 소리가 볼륨·페이드를 반영해 함께 들립니다.
키프레임을 선택하면 타임라인 바에 Easing 버튼이 나타납니다. 누르면 이징 편집기가 열립니다:
- 프리셋: Linear · In · Out · In·Out · Hold
- 곡선 그래프: 두 개의 제어점을 드래그해 커스텀 큐빅 베지어 가속 곡선을 직접 만들 수 있습니다(세로로 1을 넘겨 오버슈트도 가능).
- 이징은 그 키프레임 → 다음 키프레임 구간(오른쪽) 에 적용됩니다. 타임라인 ⋯ 메뉴 ▸ Show Easing Curves 를 켜면 각 키프레임 오른쪽 구간에 이징 곡선이 그려져 어떤 가속이 걸렸는지 보입니다(기본 꺼짐).

속성별 트랙 (하위 트랙)

레이어 트랙 이름 왼쪽의 펼침 화살표(▸/▾) 를 누르면 그 레이어의 속성별 하위 트랙(Position X/Y · Scale · Rotation · Opacity · Fill · Path 등)이 펼쳐집니다.
레이어 행의 키프레임은 포즈(같은 시각의 모든 속성) 단위로 선택·이동·삭제됩니다.
하위 트랙의 키프레임은 그 속성 하나만 선택·이동·삭제·이징할 수 있어 속성별로 따로 타이밍을 조절할 수 있습니다.

트랙 ↔ 캔버스 선택

캔버스에서 도형을 선택하면 타임라인의 해당 트랙 행이 강조됩니다.
타임라인 트랙 행(이름)을 클릭하면 캔버스에서 그 도형이 선택됩니다.

레이어 등장/퇴장 (가시성 구간)

타임라인이 켜져 있을 때 레이어를 선택하면 인스펙터에 Timeline 섹션이 나타납니다.
Appear At / Disappear At 으로 그 레이어가 타임라인에서 보이기 시작/끝나는 시각을 정할 수 있습니다. 그 구간 밖에서는 화면에 나타나지 않습니다.
타임라인 클립 바: 등장/퇴장 구간은 타임라인 트랙에서도 드래그 바로 편집할 수 있습니다 — 바의 가운데를 드래그하면 구간을 통째로 이동하고, 좌우 끝(핸들)을 드래그하면 등장·퇴장 시각을 각각 조절합니다.
- 이 바는 타임라인에 이미 행이 있는 레이어(키프레임이 있는 레이어)와, 등장/퇴장이 설정된 레이어에 표시됩니다. 아직 행이 없는 정적 레이어는 인스펙터에서 Appear/Disappear At 을 한 번 설정하면 타임라인에 행과 바가 나타납니다.
(비디오 레이어는 대신 클립 트림/배치로 가시성을 조절합니다.)

그룹 안 레이어 애니메이션

그룹 안의 자식 레이어도 독립적으로 키프레임 애니메이션할 수 있습니다. 그룹을 더블클릭해 자식을 선택한 뒤 키프레임을 추가하면, 그 자식만 따로 움직입니다(그룹 전체와 별개).

완성한 애니메이션은 MP4/MOV 영상으로 내보낼 수 있습니다. 내보내기 참고.