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

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

타임라인 켜기

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

키프레임 만들기

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

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

타임라인이 켜져 있으면 인스펙터의 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 영상으로 내보낼 수 있습니다. 내보내기 참고.